/* Fetchi, 27 September 2026. The short homepage: one idea per section, a big short headline,
   at most one grey sentence, one visual, and room around it. Loaded after home-plain.css on
   index.html only; the long version of every section lives on details.html. Monochrome only. */

/* ---------- hero: centred, one button, the count under it ---------- */
#hero .hero-in,#hero.notch-open .hero-in{padding-top:128px}
#hero .hero-copy{max-width:none;margin:0 auto;text-align:center}
#hero .hero-eyebrow{margin:0 0 22px;color:var(--text-secondary)}
#hero h1{margin:0 auto;max-width:none;font-size:clamp(3rem,6.4vw,5.6rem)}
#hero .hero-sub{margin:4px auto 0;max-width:none;text-align:center;font-size:clamp(3rem,6.4vw,5.6rem);line-height:1.02;letter-spacing:-.055em}
#hero .hero-one{margin:28px auto 0;max-width:44ch;font-size:17px;line-height:1.6;color:var(--text-secondary)}
#hero .hero-cta{display:flex;flex-direction:column;align-items:center;margin:32px auto 0;gap:14px}
#hero .hero-actions{justify-content:center}
#hero .waitlist-count{display:block;margin:0;padding:0;border:0;font-size:13px;color:var(--text-muted)}
#hero .waitlist-count[hidden]{display:none}
#hero .waitlist-count-value{display:inline;min-width:0;font:inherit;color:var(--text-secondary);margin-right:.35em}
#hero .waitlist-count-label{font:inherit}
#hero .email-capture{margin:24px auto 0}
#hero .mac-strip{margin-top:64px}

/* ---------- section heads: huge, short, centred ---------- */
#main>.pl{padding:128px 0;border-top:0}
#main .pl-head{margin:0 auto 56px;text-align:center}
#main .pl-head .h2{font-size:clamp(2.4rem,5vw,4.2rem)}
#main .pl-head .lead{margin:18px auto 0;max-width:48ch;font-size:17px;color:var(--text-secondary)}

/* ---------- the four rows ---------- */
#features .alt{border-top:0;padding:56px 0}
#features .alt h3{font-size:clamp(2rem,3.4vw,3rem)}
#features .alt p{font-size:17px}

/* ---------- apps ---------- */
#apps .apps h2{font-size:clamp(2.4rem,4.4vw,3.6rem);font-weight:450;letter-spacing:-.045em;line-height:1.05}

/* ---------- privacy ---------- */
#privacy-panel .priv{text-align:center}
#privacy-panel .priv .h2{margin:0 auto;max-width:14ch}
#privacy-panel .priv .lead{margin:20px auto 0;max-width:46ch}
#privacy-panel .bgraph-fig{margin:48px auto 0;max-width:720px}
#privacy-panel .bgraph{position:relative;aspect-ratio:16/10;background:#000;border:1px solid var(--border-light);border-radius:12px;overflow:hidden}
#privacy-panel .bgraph canvas{position:absolute;inset:0;display:block;width:100%;height:100%;touch-action:manipulation}
#privacy-panel .bgraph-cap{margin:14px auto 0;max-width:52ch;font-size:13px;line-height:1.5;color:var(--text-muted)}
@media (max-width:600px){#privacy-panel .bgraph-fig{margin-top:32px}#privacy-panel .bgraph{aspect-ratio:1/1}}

/* ---------- FAQ: one column, five questions ---------- */
#faq{padding:128px 0 96px}
#faq>.wrap{display:block;max-width:760px}
#faq .h2{margin:0 auto 40px;text-align:center;max-width:none}
.faq-more{margin-top:32px;text-align:center;font-size:15px}
.faq-more a{color:var(--text-secondary);border-bottom:1px solid var(--btn-border)}
.faq-more a:hover{color:var(--text)}

/* ---------- closing ---------- */
.final-simple{display:flex;flex-direction:column;align-items:center;gap:20px;text-align:center}
.final-simple .dl-icon{width:96px;height:96px}
.final-simple .h2{font-size:clamp(2.4rem,5vw,4.2rem);font-weight:450;letter-spacing:-.045em}
.final-spec{font-size:14px;color:var(--text-muted)}
.final-simple .final-reach{margin-top:-12px;max-width:36ch}

@media (max-width:720px){
  #hero .hero-in,#hero.notch-open .hero-in{padding-top:104px}
  #hero h1,#hero .hero-sub{font-size:clamp(2.5rem,11vw,3.4rem)}
  #hero .hero-one{font-size:16px}
  #hero .mac-strip{margin-top:48px}
  #main>.pl{padding:80px 0}
  #main .pl-head{margin-bottom:36px}
  #features .alt{padding:32px 0}
  #faq{padding:80px 0 64px}
}
.final-simple .btn{font-family:var(--sans);font-size:14px;text-transform:none;letter-spacing:0;font-weight:500;min-height:50px;padding:0 24px}