/* ============================================================
   Headroom product page (/apps/headroom/). Loads on top of prism.css
   and columnlens.css (reuses .cl-badge, .cl-actions, .cl-stats,
   .cl-feature, .cl-faq, .cl-city-list, .cl-cta).
   ============================================================ */

/* app-specific accent: Headroom's own meter teal, for the in-screen feel only */
:root{
  --hd-teal:#8EE6E9;
  --hd-phone-r:clamp(26px,3.4vw,44px);
}

/* ---- hero ---- */
.hd-hero{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(36px,6vw,80px);align-items:center;padding-block:clamp(56px,8vw,110px) clamp(30px,5vw,60px)}
@media(max-width:820px){.hd-hero{grid-template-columns:minmax(0,1fr)}}
.hd-app{display:flex;align-items:center;gap:16px;margin-bottom:26px}
.hd-app img{width:64px;height:64px;border-radius:var(--r-md);box-shadow:0 0 0 1px var(--edge)}
.hd-app-name{font-size:15px;font-weight:600;color:var(--white)}
.hd-app-meta{display:block;margin-top:3px;font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--faint);font-weight:600}
.hd-hero h1{font-size:clamp(36px,6vw,82px);font-weight:200;line-height:.98;letter-spacing:-.045em;margin-bottom:24px}
.hd-hero h1 em{font-style:normal;white-space:nowrap;font-weight:600;background:var(--beam);-webkit-background-clip:text;background-clip:text;color:transparent}
.hd-hero-sub{font-size:clamp(18px,2vw,22px);line-height:1.5;color:var(--dim);font-weight:300;max-width:46ch;text-wrap:pretty}
.hd-soon{display:inline-flex;align-items:center;gap:10px;font-size:14px;font-weight:600;color:var(--white);background:var(--surface);border:1px solid var(--edge-hi);border-radius:var(--r-pill);padding:12px 20px}
.hd-soon::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--warn);box-shadow:0 0 10px var(--warn)}
.hd-note{font-size:14px;color:var(--dim)}
.hd-note a{color:var(--dim);text-decoration:none;border-bottom:1px solid var(--edge-hi);transition:color .2s,border-color .2s}
.hd-note a:hover,.hd-note a:focus-visible{color:var(--white);border-color:var(--white)}
.hd-link{color:var(--white);text-decoration:none;border-bottom:1px solid var(--edge-hi);transition:border-color .2s}
.hd-link:hover,.hd-link:focus-visible{border-color:var(--white)}

/* ---- phone frame (video + screenshots) ---- */
.hd-phone{position:relative;margin:0;border-radius:var(--hd-phone-r);overflow:hidden;background:var(--ink);border:1px solid var(--edge-hi);box-shadow:0 30px 80px rgb(from var(--v3) r g b / .12)}
.hd-phone img,.hd-phone video{display:block;width:100%;height:auto}
.hd-hero .hd-phone{max-width:340px;justify-self:center;width:100%}

/* ---- screenshot gallery: horizontal scroll-snap ---- */
.hd-gallery{display:grid;grid-auto-flow:column;grid-auto-columns:clamp(220px,24vw,280px);gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 4px 22px;margin-inline:-4px;scrollbar-width:thin;scrollbar-color:var(--edge-hi) transparent}
.hd-gallery:focus-visible{outline:2px solid var(--v3);outline-offset:4px;border-radius:var(--r-sm)}
.hd-shot{scroll-snap-align:start;margin:0}
.hd-shot .hd-phone{border-radius:var(--r-lg)}
.hd-shot figcaption{margin-top:16px}
.hd-shot b{display:block;font-size:16px;font-weight:600;color:var(--white);letter-spacing:-.01em}
.hd-shot span{display:block;margin-top:5px;font-size:13.5px;line-height:1.5;color:var(--dim);font-weight:300}

/* ---- boards table ---- */
.hd-boards{overflow-x:auto}
.hd-boards table{width:100%;border-collapse:collapse;font-size:15px;min-width:600px}
.hd-boards th{text-align:left;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);font-weight:600;padding:0 18px 14px 0;border-bottom:1px solid var(--edge-hi)}
.hd-boards td{padding:15px 18px 15px 0;border-bottom:1px solid var(--edge);color:var(--dim);font-weight:300;vertical-align:top;line-height:1.55}
.hd-boards tbody tr:last-child td{border-bottom:0}
.hd-boards td:first-child{font-family:var(--mono);font-size:13px;font-weight:600;letter-spacing:.06em;color:var(--hd-teal);white-space:nowrap}

/* ---- split showcase (text + phone) ---- */
.hd-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.7fr);gap:clamp(32px,6vw,80px);align-items:center}
.hd-split.flip{grid-template-columns:minmax(0,.7fr) minmax(0,1fr)}
.hd-split.flip .hd-split-text{order:2}
@media(max-width:820px){.hd-split,.hd-split.flip{grid-template-columns:1fr}.hd-split.flip .hd-split-text{order:0}}
.hd-split .hd-phone{max-width:320px;width:100%;justify-self:center}
.hd-split-text>p{font-size:16px;line-height:1.65;color:var(--dim);font-weight:300;margin-bottom:22px;max-width:56ch}

/* ---- privacy promise ---- */
.hd-promise{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
@media(max-width:820px){.hd-promise{grid-template-columns:1fr 1fr}}
.hd-promise li{background:var(--surface);border:1px solid var(--edge);border-radius:var(--r);padding:24px 22px}
.hd-promise b{display:block;font-size:clamp(22px,2.6vw,28px);font-weight:250;letter-spacing:-.03em;color:var(--white);margin-bottom:6px}
.hd-promise span{font-size:14px;line-height:1.5;color:var(--dim);font-weight:300}

/* ---- support card ---- */
.hd-support{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px}

@media(prefers-reduced-motion:reduce){.hd-gallery{scroll-behavior:auto}}