/* Homebase product page (/homebase/). Loaded after site.css; page-specific only. */

/* Header brand: keep the typeset wordmark and endorsement on one tidy block */
.hb-brand{gap:.65rem}
.hb-brand__text{display:block;line-height:1}

/* Hero */
.hb-hero .badge{margin-bottom:var(--space-2xs)}
.hb-hero .hero__note{max-width:36rem}
@media (max-width:959.98px){.hb-hero .hero__media{max-width:640px;margin-inline:auto;width:100%}}

/* Problem: the jobs that live in one person's head */
.hb-jobs{display:grid;gap:var(--space-m);grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));list-style:none;margin:0;padding:0}
.hb-jobs li{padding:var(--space-m);border-radius:var(--radius);background:var(--surface);border:1px solid var(--line);border-top:4px solid var(--accent)}
.hb-jobs h3{font-size:var(--step-1)}
.hb-jobs p{margin-top:var(--space-2xs);color:var(--muted)}
.hb-bigidea{max-width:46rem;margin-top:var(--space-xl);font-size:var(--step-1);line-height:1.55}
.hb-bigidea strong{font-family:var(--font-display);font-weight:700}

/* Feature media: a laptop with a cropped panel under it */
.hb-media-stack{display:grid;gap:var(--space-m);width:100%}
.hb-media-stack .device--browser{width:92%;margin-inline:auto}
.feature__media .device--browser{align-self:center}
.hb-phone{--phone-w:290px}
.feature .fine{max-width:34rem}

/* Spotlight cards: several homes and the AI assistant */
.hb-spot{gap:var(--space-s);padding:clamp(1.25rem,1rem + 1.5vw,2.25rem)}
.hb-spot h3{font-size:var(--step-3)}
.hb-spot .list-check{margin-top:var(--space-2xs)}
.hb-asks{display:flex;flex-wrap:wrap;gap:var(--space-2xs);list-style:none;margin:var(--space-2xs) 0 0;padding:0}
.hb-asks li{padding:.45rem .9rem;border-radius:999px;background:var(--accent-soft);color:var(--accent-hover);font-weight:600;font-size:var(--step--1)}
.hb-more{margin-top:var(--space-3xl)}
.hb-more>h3{font-size:var(--step-3);margin-bottom:var(--space-l)}

/* How it works: three numbered steps */
.hb-steps{display:grid;gap:var(--space-m);grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));list-style:none;margin:0;padding:0;counter-reset:hbstep}
.hb-steps li{counter-increment:hbstep;position:relative;display:flex;flex-direction:column;gap:var(--space-xs);padding:var(--space-l) var(--space-m) var(--space-m);border-radius:var(--radius);background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-1)}
.hb-steps li::before{content:counter(hbstep);display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--accent);color:var(--on-accent);font-family:var(--font-display);font-weight:800;font-size:1.125rem}
.hb-steps h3{font-size:var(--step-1)}
.hb-steps p{color:var(--muted)}
.hb-steps-note{margin-top:var(--space-l)}

/* Pricing: monthly and yearly switch, pure CSS (radio inputs), no script needed */
.hb-billing{display:flex;justify-content:center;margin:0 0 var(--space-l);padding:0;border:0;min-width:0}
.hb-billing__group{display:inline-flex;flex-wrap:wrap;justify-content:center;gap:4px;padding:4px;border-radius:999px;background:var(--surface);border:1px solid var(--line-strong);max-width:100%}
.hb-billing input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.hb-billing label{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:44px;padding:.5rem 1.15rem;border-radius:999px;font-family:var(--font-display);font-weight:600;color:var(--ink);cursor:pointer;text-align:center;line-height:1.25;transition:background-color var(--dur) var(--ease),color var(--dur) var(--ease)}
.hb-billing label:hover{background:var(--accent-soft);color:var(--accent-hover)}
.hb-billing input:checked+label{background:var(--accent);color:var(--on-accent)}
.hb-billing input:focus-visible+label{outline:3px solid var(--focus);outline-offset:3px}
.hb-billing__save{font-family:var(--font-body);font-weight:500;font-size:var(--step--1);opacity:.92}
.hb-when-yearly{display:none}
.hb-pricing:has(#billing-yearly:checked) .hb-when-monthly{display:none}
.hb-pricing:has(#billing-yearly:checked) .hb-when-yearly{display:block}
.hb-when-monthly>*+*,.hb-when-yearly>*+*{margin-top:var(--space-2xs)}
.hb-pricing .price-grid{max-width:56rem;margin-inline:auto}
.hb-pricing .trial-panel{max-width:56rem;margin:var(--space-l) auto 0}
.hb-pricing .trial-panel p{line-height:1.55}
.hb-early{max-width:56rem;margin:var(--space-m) auto 0;text-align:center}

/* Privacy and data */
.hb-privacy .card h3{font-size:var(--step-1)}
.hb-privacy__links{margin-top:var(--space-l)}

/* Layout refinements over the shared components */
@media (min-width:900px){.feature--reverse:not(.feature--phone){grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}}
.hb-more.card-grid--2{grid-template-columns:repeat(auto-fit,minmax(min(100%,24rem),1fr))}
.hb-grid-3{grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr))}
@media (max-width:479.98px){
  .hb-billing__group{flex-wrap:nowrap}
  .hb-billing__save{display:none}
  .hb-billing label{padding-inline:1.4rem}
}

/* FAQ column */
.hb-faq .faq{max-width:52rem;margin-inline:auto}

@media (prefers-reduced-motion:reduce){.hb-billing label{transition:none}}
@media (forced-colors:active){
  .hb-billing__group{border:1px solid CanvasText}
  .hb-billing input:checked+label{outline:2px solid CanvasText;outline-offset:-4px}
}

/* Phones get the app's own phone screenshots: laptop frames are unreadable at 390 px */
.hb-sm-phone{display:none;--phone-w:272px;margin-inline:auto}
@media (max-width:599.98px){
  .feature__media .hb-lg-only{display:none}
  .feature__media .hb-sm-phone{display:block}
}

/* Give each feature list a clear step down from its paragraph */
.feature__text p+.list-check{margin-top:var(--space-m)}
.feature__text .list-check li+li{margin-top:var(--space-xs)}


/* Footer: complaints book and the ADR body together */
.legal-redress{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-2xs)}
@media (min-width:860px){.legal-redress{align-items:flex-end;text-align:right}}
.legal-redress__adr{max-width:34ch;font-size:var(--step--1);color:var(--muted)}
.legal-redress__adr a{color:var(--ink)}

/* Header: five links and a button do not fit beside the brand below 960 px, so keep the menu collapsed up to there */
@media (min-width:760px) and (max-width:959.98px){
  .js .theme-homebase .nav-toggle{display:inline-flex}
  .js .theme-homebase .nav{display:none;width:100%;flex-direction:column;align-items:stretch;padding-block:var(--space-2xs) var(--space-s);border-top:1px solid var(--line)}
  .js .theme-homebase .site-header[data-nav-open] .nav{display:flex}
  .js .theme-homebase .nav__list{flex-direction:column;align-items:stretch}
  .js .theme-homebase .nav__list a{width:100%}
  .js .theme-homebase .nav .btn{width:100%}
}