/* ============================================================
   Home (index.html, de/index.html). Loaded after styles.css on
   those two pages only; every rule is scoped to body.home or an
   .hm- class, so the comparison, feature and doc pages keep
   their styling. Phones are the defaults, tablet and desktop
   layer on top. Screens sit in the shared .lp-device mockup.
   ============================================================ */
body.home{--maxw:1200px;--g:24px;--ease:cubic-bezier(.16,1,.3,1);
  --sec-s:clamp(48px,7.5vw,96px);--sec-m:clamp(56px,9vw,112px);--sec-l:clamp(64px,12vw,144px)}
@media(max-width:760px){body.home{--g:20px}}
@media(max-width:480px){body.home{--g:18px}}
.hm .wrap{padding:0 var(--g)}

/* ---------- type ---------- */
.hm-kicker{color:var(--muted);font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;margin-bottom:16px}
.hm-display{font-size:clamp(34px,8.6vw,58px);line-height:1.04;letter-spacing:-.04em;font-weight:600}
.hm-h2{font-size:clamp(28px,6.6vw,40px);line-height:1.1;letter-spacing:-.03em;font-weight:600}
.hm-h3{font-size:clamp(22px,5.2vw,26px);line-height:1.2;letter-spacing:-.02em;font-weight:600}
.hm-display>span,.hm-h2>span{display:block;text-wrap:balance}
.hm-lede{color:var(--muted);font-size:clamp(16px,4.3vw,18px);line-height:1.55;max-width:36em;margin-top:18px;text-wrap:pretty}
.hm-p{color:var(--muted);font-size:clamp(16px,4.2vw,17px);line-height:1.6;max-width:36em;margin-top:16px;text-wrap:pretty}
.hm-p+.hm-p{margin-top:12px}
.hm-fine{color:var(--faint);font-size:14px;line-height:1.55;margin-top:14px;max-width:36em}
.hm a.hm-link,.hm .hm-p a,.hm .hm-fine a,.hm-quote figcaption a{color:var(--fg);text-decoration:underline;text-underline-offset:.22em;
  text-decoration-thickness:1px;text-decoration-color:var(--line);transition:text-decoration-color .2s ease}
.hm a.hm-link:hover,.hm .hm-p a:hover,.hm .hm-fine a:hover,.hm-quote figcaption a:hover{text-decoration-color:var(--fg)}
.hm-links{display:flex;flex-direction:column;margin-top:22px;max-width:28em;border-top:1px solid var(--border)}
.hm-links a{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:48px;color:var(--fg);font-size:16px;
  font-weight:500;border-bottom:1px solid var(--border)}
.hm-links a::after{content:"\2192";color:var(--faint);transition:transform .25s var(--ease),color .2s ease}
.hm-links a:hover::after{transform:translateX(4px);color:var(--fg)}

/* ---------- phone mockups (the shared .lp-device frame) ---------- */
.hm .lp-device{width:min(270px,68vw);margin-inline:auto}
.hm-device-col{display:flex;justify-content:center;min-width:0}
@media(min-width:900px){.hm .lp-device{width:290px}}

/* ---------- hero ---------- */
.hm-hero{padding:clamp(32px,6vw,64px) 0 clamp(56px,9vw,88px);border-bottom:1px solid var(--border)}
.hm-hero-grid{display:grid;gap:44px}
.hm-hero-grid>*{min-width:0}
.hm-hero-cta{display:flex;align-items:center;gap:22px;margin-top:26px}
.hm-hero-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;margin-top:20px;color:var(--muted);font-size:14px}
.hm-score{display:inline-flex;align-items:baseline;gap:6px;color:var(--fg);font-weight:500;font-variant-numeric:tabular-nums}
.hm-score b{font-size:18px;font-weight:600;letter-spacing:-.02em}
.hm-score i{font-style:normal;color:var(--muted);font-weight:400}
.hm-hero-meta a{color:var(--muted);text-decoration:underline;text-underline-offset:.22em;text-decoration-color:var(--line)}
.hm-hero-meta a:hover{color:var(--fg)}
.hm-hero-meta .hm-rule{width:1px;height:13px;background:var(--border)}
@media(max-width:599px){.hm-hero-meta .hm-rule{display:none}}
.hm-hero-quote{margin:22px 0 0;padding-top:14px;border-top:1px solid var(--line);max-width:30em}
.hm-hero-quote blockquote{color:var(--fg);font-size:15px;line-height:1.5}
.hm-hero-quote figcaption{color:var(--faint);font-size:13px;margin-top:4px}
@media(min-width:900px){
  .hm-hero-grid{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:56px;align-items:center}
  .hm-hero .lp-device{width:310px}
}

/* ---------- chapters: copy beside a phone ---------- */
.hm-ch{padding:var(--sec-m) 0;border-bottom:1px solid var(--border)}
.hm-ch-grid{display:grid;gap:40px;align-items:center}
.hm-ch-grid>*{min-width:0}
@media(min-width:900px){
  .hm-ch-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:72px}
  .hm-ch-flip .hm-ch-copy{order:2}
  .hm-ch-grid:not(:has(.lp-pair)){grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr)}
  .hm-ch-flip:not(:has(.lp-pair)){grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}
}
.hm .lp-pair{width:100%}
.hm .lp-pair .lp-device{width:min(230px,44%);margin-inline:0}

/* hairline notes under a chapter's copy */
.hm-notes{margin-top:28px;border-top:1px solid var(--border);max-width:36em}
.hm-note{padding:16px 0 18px;border-bottom:1px solid var(--border)}
.hm-note h3{font-size:16px;font-weight:600;letter-spacing:-.01em}
.hm-note p{color:var(--muted);font-size:15px;line-height:1.55;margin-top:4px;text-wrap:pretty}

/* ---------- what feeds what: the tools working together ---------- */
.hm-flow-sec{padding:var(--sec-m) 0;border-bottom:1px solid var(--border)}
.hm-flow{list-style:none;margin-top:28px;border-top:1px solid var(--border);max-width:58em}
.hm-flow li{display:grid;gap:4px;padding:14px 0;border-bottom:1px solid var(--border)}
.hm-flow-in{color:var(--fg);font-size:16px;font-weight:500;line-height:1.4}
.hm-flow-to{display:flex;gap:10px;color:var(--muted);font-size:15px;line-height:1.5}
.hm-flow-to::before{content:"\2192";flex:none;color:var(--faint)}
@media(min-width:760px){.hm-flow li{grid-template-columns:minmax(0,16em) minmax(0,1fr);gap:28px;align-items:baseline}}

/* ---------- the data ledger ---------- */
.hm-data{padding:var(--sec-m) 0;border-bottom:1px solid var(--border)}
.hm-ledger{list-style:none;margin-top:32px;border-top:1px solid var(--border)}
.hm-ledger li{padding:16px 0;border-bottom:1px solid var(--border)}
.hm-ledger-row{display:flex;align-items:last baseline;gap:12px}
.hm-ledger-n{flex:0 1 auto;min-width:0;max-width:68%;color:var(--fg);font-size:16px;font-weight:500;line-height:1.35;overflow-wrap:break-word}
.hm-ledger-lead{flex:1 1 0;min-width:14px;border-bottom:1px dotted var(--line);margin-bottom:.4em}
.hm-ledger-v{flex:none;color:var(--fg);font-size:clamp(24px,6vw,32px);font-weight:600;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.hm-ledger-note{display:block;color:var(--faint);font-size:13px;margin-top:3px}
/* counting values keep their width (tabular digits), so the row never shifts */
.hm-ledger-v[data-settle]{min-width:5ch;text-align:right}
.hm-ledger-v.is-pending{color:transparent}

/* ---------- gallery (swipe on phones, scroll strip on desktop) ---------- */
.hm-gal-sec{padding:var(--sec-m) 0 var(--sec-s);border-bottom:1px solid var(--border)}
.hm-gal{position:relative;display:grid;grid-auto-flow:column;grid-auto-columns:min(78vw,330px);gap:14px;margin-top:28px;
  overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;
  padding:2px max(var(--g),calc((100% - var(--maxw))/2 + var(--g)));
  scroll-padding-inline:max(var(--g),calc((100% - var(--maxw))/2 + var(--g)))}
.hm-gal::-webkit-scrollbar{display:none}
.hm-tile{scroll-snap-align:start;display:flex;flex-direction:column;margin:0;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.hm-tile-media{display:flex;justify-content:center;height:300px;padding-top:28px;overflow:hidden;border-bottom:1px solid var(--border)}
.hm .hm-tile-media .lp-device{width:62%;margin:0;flex:none}
.hm-tile-copy{padding:18px 20px 22px}
.hm-tile-copy h3{font-size:17px;font-weight:600;letter-spacing:-.015em;line-height:1.3}
.hm-tile-copy p{color:var(--muted);font-size:15px;line-height:1.5;margin-top:6px;text-wrap:pretty}
.hm-tile-copy .hm-fine{font-size:13px;margin-top:8px}
.hm-gal-ctl{display:none;align-items:center;justify-content:space-between;gap:20px;margin-top:18px}
.js .hm-gal-ctl{display:flex}
.js .hm-gal-ctl.is-static{display:none}
@media(min-width:1200px){.hm-gal{grid-auto-columns:calc((var(--maxw) - 2 * var(--g) - 42px) / 4)}}
.hm-ticks{display:flex;align-items:flex-end;gap:7px;height:12px}
.hm-ticks i{display:block;width:2px;height:7px;background:var(--line);transition:height .3s var(--ease),background .3s ease}
.hm-ticks i.on{height:12px;background:var(--fg)}
.hm-arrows{display:flex;gap:8px}
.hm-arrows button{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:10px;
  border:1px solid var(--border);background:transparent;color:var(--fg);font:inherit;font-size:16px;cursor:pointer;
  transition:border-color .2s ease,background .2s ease,opacity .2s ease}
.hm-arrows button:hover{border-color:var(--line);background:var(--surface)}
.hm-arrows button:disabled{opacity:.35;cursor:default;background:transparent;border-color:var(--border)}

/* ---------- statement ---------- */
.hm-statement{padding:var(--sec-l) 0;border-bottom:1px solid var(--border)}
.hm-statement-lines{font-size:clamp(36px,9.4vw,58px);line-height:1.02;letter-spacing:-.045em;font-weight:600}
.hm-statement-lines:lang(de){font-size:clamp(32px,8.2vw,58px)}
.hm-statement-lines span{display:block}
.hm-statement figure{margin:32px 0 0;max-width:34em}
.hm-statement blockquote{font-size:clamp(17px,4.4vw,18px);line-height:1.5;color:var(--fg)}
.hm-statement figcaption{color:var(--muted);font-size:14px;margin-top:10px}
/* each line lights up as it reaches the middle of the screen */
@supports (animation-timeline:view()){
  @media(prefers-reduced-motion:no-preference){
    .js .hm-statement-lines span{animation:hm-lit linear both;animation-timeline:view();animation-range:entry 30% cover 42%}
  }
}
@keyframes hm-lit{from{color:var(--line)}to{color:var(--fg)}}

/* ---------- reviews ---------- */
.hm-rev{padding:var(--sec-m) 0 var(--sec-s);border-bottom:1px solid var(--border)}
.hm-rev-head{display:flex;flex-direction:column;gap:16px}
.hm-bigscore{display:flex;align-items:baseline;gap:12px;color:var(--fg)}
.hm-bigscore b{font-size:clamp(44px,11vw,60px);font-weight:600;letter-spacing:-.045em;line-height:.95;font-variant-numeric:tabular-nums}
.hm-bigscore>span{color:var(--muted);font-size:15px;white-space:nowrap}
.hm-bigscore>span>span{color:var(--fg)}
.hm-quotes{display:grid;grid-auto-flow:column;grid-auto-columns:min(78vw,400px);gap:14px;margin-top:28px;
  overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;
  padding:0 max(var(--g),calc((100% - var(--maxw))/2 + var(--g)));
  scroll-padding-inline:max(var(--g),calc((100% - var(--maxw))/2 + var(--g)))}
.hm-quotes::-webkit-scrollbar{display:none}
.hm-quote{scroll-snap-align:start;margin:0;padding-top:18px;border-top:1px solid var(--line)}
.hm-quote blockquote{font-size:clamp(16px,4.2vw,18px);line-height:1.55;letter-spacing:-.01em;color:var(--fg);text-wrap:pretty}
.hm-quote figcaption{color:var(--muted);font-size:13px;margin-top:12px}
.hm-quotes.hm-quotes-one{grid-auto-flow:row;grid-template-columns:minmax(0,44em);overflow:visible;max-width:var(--maxw);margin-inline:auto;padding:0 var(--g)}
@media(min-width:900px){
  .hm-rev-head{flex-direction:row;align-items:flex-end;justify-content:space-between;gap:48px}
  .hm-quotes{grid-auto-flow:row;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 56px;overflow:visible;
    max-width:var(--maxw);margin-inline:auto;padding:0 var(--g)}
}
.hm-rev .hm-fine{margin-top:32px}

/* ---------- switching ---------- */
.hm-sources{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:20px;margin-top:22px;max-width:30em}
.hm-sources li{padding:10px 0;border-top:1px solid var(--border);color:var(--fg);font-size:15px}
.hm-switch-quote{margin:24px 0 0;padding-top:16px;border-top:1px solid var(--line);max-width:34em}
.hm-switch-quote blockquote{font-size:16px;line-height:1.55;color:var(--fg)}
.hm-switch-quote figcaption{color:var(--muted);font-size:13px;margin-top:8px}

.hm-cmp-sec{padding:var(--sec-s) 0;border-bottom:1px solid var(--border)}
.hm-cmp{display:grid;grid-template-columns:1fr;margin-top:28px;border-top:1px solid var(--border)}
.hm-cmp a{display:flex;flex-direction:column;gap:3px;padding:16px 0;border-bottom:1px solid var(--border);min-height:44px}
.hm-cmp b{font-size:16px;font-weight:600;letter-spacing:-.01em;display:flex;align-items:center;gap:8px}
.hm-cmp b::after{content:"\2192";color:var(--faint);font-weight:400;transition:transform .25s var(--ease),color .2s ease}
.hm-cmp a:hover b::after{transform:translateX(4px);color:var(--fg)}
.hm-cmp span{color:var(--muted);font-size:14px}
@media(min-width:700px){.hm-cmp{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:40px}}
@media(min-width:1000px){.hm-cmp{grid-template-columns:repeat(3,minmax(0,1fr))}
  .hm-cmp:has(> a:nth-child(4):last-child){grid-template-columns:repeat(4,minmax(0,1fr))}}

/* ---------- plans ---------- */
.hm-plans-sec{padding:var(--sec-m) 0 var(--sec-s);border-bottom:1px solid var(--border)}
.hm-plans-sec .lp-plans{margin-top:28px}
.hm-plans-sec .lp-plan-list{gap:0;margin-bottom:20px}
.hm-plans-sec .lp-plan-list li{padding:10px 0 10px 24px;border-top:1px solid var(--border)}
.hm-plans-sec .lp-plan-list li::before{top:10px}

/* ---------- waitlist, FAQ, closing ---------- */
.hm-notify{padding:var(--sec-s) 0}
.hm-notify .lp-notify-form{margin-top:22px}
.hm .faq{padding:var(--sec-m) 0 var(--sec-s);border-bottom:1px solid var(--border)}
.hm .faq h2{font-size:clamp(28px,6.6vw,40px);line-height:1.1;letter-spacing:-.03em;margin-bottom:28px}
.hm-close{padding:var(--sec-l) 0}
.hm-close-mark{display:block;width:44px;height:44px;border-radius:22%;margin-bottom:24px}
.hm-close .hm-h2{max-width:16em;text-wrap:balance}
.hm-close-cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;margin-top:28px}

@media(prefers-reduced-motion:reduce){
  .hm-ticks i,.hm-links a::after,.hm-cmp b::after{transition:none}
}

/* ---------- bands: the brand's surface plate on a cadence (flow, gallery,
   waitlist). Only background and the bottom hairline; the top edge is the
   previous section's hairline, so no line doubles. ---------- */
.hm-band{background:var(--surface);border-bottom:1px solid var(--border)}
.hm-band .hm-tile{background:var(--bg)}
.hm .lp-plan-foot{font-size:13px}

/* phones and tablets: the phone follows the call to action, the quote follows the phone */
@media(max-width:899px){
  .hm-hero-copy{display:contents}
  .hm-hero-grid{gap:0}
  .hm-hero .hm-device-col{order:1;margin-top:40px}
  .hm-hero-quote{order:2;margin-top:28px}
}