/* myHOMA — public site.
   Tokens measured off the live site, not invented:
     ground #04120c · panels #0c2318 · gold #d9a93e · headline italic #d6b776
     hairline rgba(217,169,62,.28) · ink #f2f1ea
   Headings Playfair Display, UI Figtree, labels IBM Plex Mono.
   Mobile first: every layout rule below starts at the phone and widens. */

:root{
  --bg:#04120c;
  --bg-2:#0c2318;
  --bg-3:#102b1d;
  --ink:#f2f1ea;
  --ink-2:rgba(242,241,234,.74);
  --ink-3:rgba(242,241,234,.56);
  --gold:#d9a93e;
  --gold-2:#d6b776;
  --line:rgba(217,169,62,.28);
  --line-soft:rgba(242,241,234,.10);
  --signal:#4fd1a5;
  --serif:"Playfair Display",Georgia,"Times New Roman",serif;
  --sans:Figtree,-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --nav-h:56px;
  --wrap:1120px;
  --pad:20px;
  --r:22px;
}

*,*::before,*::after{box-sizing:border-box}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  /* the fixed header must not eat an anchored heading */
  scroll-padding-top:calc(var(--nav-h) + 16px);
}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font:400 16px/1.6 var(--sans);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul{margin:0;padding:0;list-style:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
svg{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px}

.skip{
  position:fixed;left:-9999px;top:8px;z-index:200;
  background:var(--gold);color:var(--bg);padding:10px 16px;border-radius:999px;font-weight:600;
}
.skip:focus{left:8px}

/* ── type scale ─────────────────────────────────────────────────────────── */

.mono{
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--gold);
  font-weight:400;
}

.d-hero{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(2.55rem,11.5vw,4.9rem);
  line-height:1.0;
  letter-spacing:-.02em;
  margin:.55rem 0 0;
}
.d-hero em{font-style:italic;color:var(--gold-2)}

.d-2{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(1.95rem,6.4vw,3rem);
  line-height:1.06;
  letter-spacing:-.02em;
  margin:.7rem 0 0;
}

.d-4{
  font-family:var(--serif);
  font-weight:400;
  font-size:1.34rem;
  line-height:1.2;
  margin:.55rem 0 .5rem;
}

.lead{font-size:1.06rem;line-height:1.6;color:var(--ink-2);margin:1rem 0 0;max-width:46ch}
.sm{font-size:.93rem;line-height:1.6;color:var(--ink-2);margin:0}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--pad)}

.eyebrow{
  display:inline-flex;align-items:center;gap:.5rem;
  border:1px solid var(--line);
  background:rgba(12,35,24,.6);
  border-radius:999px;
  padding:7px 15px;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
.eyebrow i{width:5px;height:5px;border-radius:50%;background:var(--gold);flex:none}

.btn-gold{
  display:inline-block;
  background:var(--gold);color:var(--bg);
  font-weight:600;font-size:1.02rem;
  padding:16px 38px;border-radius:999px;
  box-shadow:0 12px 34px rgba(217,169,62,.22);
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease;
}
.btn-gold:hover{background:#e5b855;transform:translateY(-1px);box-shadow:0 16px 40px rgba(217,169,62,.3)}
.btn-gold:active{transform:translateY(0)}

.panel{
  background:var(--bg-2);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:24px 22px;
}

/* ── 1a. header ─────────────────────────────────────────────────────────── */

.nav{
  position:fixed;top:0;left:0;right:0;z-index:60;
  padding:11px 13px;
  border-bottom:1px solid transparent;
  transition:background .25s ease,border-color .25s ease,backdrop-filter .25s ease;
}
.nav[data-solid="true"]{
  background:rgba(4,18,12,.88);
  border-bottom-color:var(--line);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
}
.nav__in{
  max-width:var(--wrap);margin:0 auto;
  display:flex;align-items:center;gap:.75rem;
}
.brand{display:flex;align-items:center;gap:.55rem;flex:none}
.brand__mark{width:30px;height:30px;border-radius:50%;object-fit:cover}
.brand__word{font-size:1.06rem;letter-spacing:.01em;font-weight:400}
.brand__word b{font-weight:600;color:var(--gold)}

.tabs{display:none;margin-left:auto;gap:.15rem}
.tab{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-3);padding:8px 12px;border-radius:8px;position:relative;
  transition:color .18s ease;
}
.tab:hover{color:var(--ink)}
.tab.is-on{color:var(--gold)}
.tab.is-on::after{
  content:"";position:absolute;left:12px;right:12px;bottom:2px;height:1px;background:var(--gold);
}
.nav__vr{display:none;width:1px;height:20px;background:var(--line-soft);margin:0 .35rem}
.nav__login{
  display:none;
  border:1px solid var(--gold);color:var(--gold);
  padding:8px 20px;border-radius:999px;font-size:.9rem;font-weight:500;
  transition:background .18s ease,color .18s ease;
}
.nav__login:hover{background:var(--gold);color:var(--bg)}

.burger{margin-left:auto;display:flex;flex-direction:column;gap:4px;padding:10px 6px}
.burger span{display:block;width:22px;height:1.5px;background:var(--ink);border-radius:2px;transition:transform .2s ease,opacity .2s ease}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}

.navmenu{
  margin-top:11px;
  background:rgba(4,18,12,.96);
  border:1px solid var(--line);border-radius:16px;
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  padding:8px;
  display:flex;flex-direction:column;
}
.navmenu[hidden]{display:none}
.navmenu a{
  padding:13px 14px;border-radius:10px;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2);
}
.navmenu a:hover{background:rgba(217,169,62,.08);color:var(--ink)}
.navmenu__login{color:var(--gold) !important;border-top:1px solid var(--line-soft);margin-top:4px;border-radius:0 0 10px 10px}

/* ── 1b. floating film controls ─────────────────────────────────────────── */

.stagectl{
  position:fixed;right:12px;z-index:40;
  bottom:calc(12px + env(safe-area-inset-bottom,0px));
  display:flex;gap:8px;
}
.sbtn{
  display:inline-flex;align-items:center;gap:.4rem;
  height:38px;padding:0 12px;
  background:rgba(4,18,12,.55);
  border:1px solid rgba(217,169,62,.5);
  border-radius:12px;
  color:var(--ink);
  font-size:.72rem;letter-spacing:.06em;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  transition:background .18s ease,border-color .18s ease;
}
.sbtn:hover{background:rgba(12,35,24,.8);border-color:var(--gold)}
.sbtn svg{width:17px;height:17px;flex:none}
.sbtn--icon{width:38px;padding:0;justify-content:center}
.sbtn--icon .i-on{display:none}
.sbtn--icon[aria-pressed="false"] .i-off{display:none}
.sbtn--icon[aria-pressed="false"] .i-on{display:block}

/* ── 2. hero ────────────────────────────────────────────────────────────── */

/* The section is a tall scroll runway holding one sticky viewport. --p is how
   far through that runway the page has scrolled, 0 at the top and 1 once the
   film has landed; --s is the scale that takes the film from covering the
   whole viewport back down to the size of its own card. site.js writes both,
   once per frame. Nothing here animates anything but a transform or an
   opacity, so the browser never re-lays-out the page mid-scroll. */

.hero{
  --p:0;
  --s:1;
  position:relative;z-index:1;
  height:260vh;
}
.hero__stick{
  position:sticky;top:0;
  height:100vh;
  /* dvh so a phone's collapsing toolbar cannot leave a strip of bare ground
     showing under the full-bleed film */
  height:100dvh;
  overflow:hidden;
  background:radial-gradient(ellipse 70% 55% at 50% 46%,#0a2115 0%,var(--bg) 78%);
}

/* the ground behind the film: flat while the film covers it, lifting as the
   card pulls away to let the glow underneath show */
.hero__veil{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:var(--bg);
  opacity:calc(1 - var(--p));
}

.hero__film{
  position:absolute;z-index:2;overflow:hidden;
  left:50%;top:50%;
  width:min(760px,88vw);height:min(428px,64vw);
  transform:translate(-50%,-50%) scale(var(--s));
  border-radius:calc(26px * var(--p));
  box-shadow:
    0 40px 90px rgba(0,0,0,calc(.6 * var(--p))),
    0 0 70px rgba(217,169,62,calc(.16 * var(--p)));
  will-change:transform;
}
.hero__film video{
  width:100%;height:100%;
  /* cover, so a phone in portrait crops the frame instead of letterboxing it */
  object-fit:cover;object-position:center 30%;
}
/* the shade the headline has to be legible against; gone before the card lands */
/* the film stays visible: a light lift under the header, nothing over the
   face, and a floor at the bottom for the copy to sit on */
.hero__shade{
  position:absolute;inset:0;pointer-events:none;
  opacity:calc(1 - var(--p) * 1.15);
  background:
    linear-gradient(to bottom,rgba(4,18,12,.55) 0%,rgba(4,18,12,.08) 22%,rgba(4,18,12,0) 45%,rgba(4,18,12,.34) 68%,rgba(4,18,12,.82) 88%,rgba(4,18,12,.94) 100%);
}

/* the copy sits at the FOOT of the frame, small, so the film is the page:
   the face is never under a headline */
.hero__copy{
  position:absolute;inset:0;z-index:3;
  display:flex;align-items:flex-end;justify-content:center;
  text-align:center;
  padding:calc(var(--nav-h) + 40px) var(--pad) calc(96px + env(safe-area-inset-bottom,0px));
  opacity:calc(1 - var(--p) * 2.2);
  transform:translateY(calc(var(--p) * -90px));
  pointer-events:none;
}
/* the copy is fully transparent well before --p reaches 1; without this the
   CTA would go on catching clicks in the middle of an empty film */
.hero.is-faded .hero__copy{visibility:hidden}
.hero__in{max-width:720px;display:flex;flex-direction:column;align-items:center;pointer-events:auto}
.hero .d-hero{font-size:clamp(1.9rem,5.4vw,3rem);margin-top:.5rem}
.hero .eyebrow{padding:5px 12px}
.hero .eyebrow .mono{font-size:.62rem}
.hero__lead{
  font-size:.95rem;line-height:1.55;color:var(--ink-2);
  max-width:46ch;margin:.8rem 0 0;
  text-shadow:0 1px 20px rgba(4,18,12,.7);
}
.hero .btn-ghost{margin-top:1.3rem}

/* the ghost button: a hairline and the ink, nothing solid — the film reads
   through it */
.btn-ghost{
  display:inline-flex;align-items:center;justify-content:center;
  padding:12px 30px;border-radius:999px;
  font-weight:500;font-size:.95rem;letter-spacing:.01em;
  color:var(--ink);background:rgba(4,18,12,.18);
  border:1px solid rgba(242,241,234,.42);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  transition:border-color .2s ease,background .2s ease,transform .18s ease;
}
.btn-ghost:hover{border-color:var(--gold);background:rgba(217,169,62,.12);transform:translateY(-1px)}
.btn-ghost:active{transform:translateY(0)}
.hero__thread{
  position:absolute;z-index:3;
  left:50%;bottom:calc(18px + env(safe-area-inset-bottom,0px));
  width:1px;height:44px;
  background:linear-gradient(to bottom,transparent,var(--gold));
  opacity:calc(.7 - var(--p) * 1.6);
}

/* ── 3. a form vs a sentence ────────────────────────────────────────────── */

.session,.vsession,.sec,.quote,.safety{position:relative;z-index:1}

.session{
  padding:clamp(72px,14vw,120px) 0;
  /* the hero's own sticky viewport carries the film now, so this section
     stands on the page's flat ground */
  background:var(--bg);
}

.handoff{
  font-family:var(--serif);
  font-size:clamp(1.85rem,6.6vw,3rem);
  line-height:1.14;letter-spacing:-.015em;
  text-align:center;margin:0 0 clamp(30px,6vw,52px);
}
.handoff em{font-style:italic;color:var(--gold-2)}

.app{
  background:linear-gradient(180deg,rgba(16,43,29,.96),rgba(12,35,24,.96));
  border:1px solid var(--line);
  border-radius:26px;
  overflow:hidden;
  box-shadow:0 30px 90px rgba(0,0,0,.45);
}
.app__bar{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:14px 18px;
  border-bottom:1px solid var(--line-soft);
  background:rgba(4,18,12,.4);
}
.app__timer{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--mono);font-size:.8rem;color:var(--ink-2)}
.app__timer svg{width:14px;height:14px;color:var(--gold)}
.app__timer b{font-weight:500;color:var(--ink);font-variant-numeric:tabular-nums}

.app__body{display:grid;grid-template-columns:1fr;gap:0}
.app__left{padding:22px 18px 24px;position:relative}
.app__right{padding:0 18px 22px;display:grid;gap:12px}

.app__badge{display:flex;justify-content:center;margin-bottom:14px}
.app__badge img{
  width:46px;height:46px;border-radius:50%;
  border:1px solid var(--line);
  box-shadow:0 0 0 6px rgba(217,169,62,.06),0 0 34px rgba(217,169,62,.18);
}

.app__state{position:relative;height:58px;margin-bottom:18px}
.lbl{
  position:absolute;top:0;left:50%;transform:translateX(-50%);
  font-family:var(--mono);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;
  opacity:0;transition:opacity .4s ease;
}
.lbl--s{color:var(--signal)}
.lbl--l{color:var(--gold)}
.lbl.is-on{opacity:1}
.band{position:absolute;left:0;right:0;bottom:0;height:26px;opacity:0;transition:opacity .4s ease}
.band.is-on{opacity:1}
.band svg{width:100%;height:26px}
.band--s svg path{animation:slide 1.6s linear infinite}
.band--l svg path{animation:slide 3.4s linear infinite}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-42px)}}

.app__thread{display:flex;flex-direction:column;gap:10px}
.turn{
  margin:0;padding:12px 15px;border-radius:16px;
  font-size:.94rem;line-height:1.55;max-width:88%;
}
.turn--homa{
  background:rgba(217,169,62,.09);
  border:1px solid var(--line);
  border-bottom-left-radius:6px;
  align-self:flex-start;color:var(--ink);
}
.turn--you{
  background:rgba(242,241,234,.06);
  border:1px solid var(--line-soft);
  border-bottom-right-radius:6px;
  align-self:flex-end;color:var(--ink-2);
}

.mcard{
  background:rgba(4,18,12,.42);
  border:1px solid var(--line-soft);
  border-radius:16px;padding:15px 16px;
}
.mcard__h{display:flex;align-items:center;gap:.45rem;margin:0 0 10px}
.mcard__h svg{width:15px;height:15px;color:var(--gold)}
.mrow{
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  padding:6px 0;font-size:.86rem;color:var(--ink-3);
  border-top:1px solid rgba(242,241,234,.05);
}
.mrow:first-of-type{border-top:0}
.mrow b{font-weight:500;color:var(--ink);font-size:.86rem}
.mrow i{font-style:normal;font-variant-numeric:tabular-nums;font-family:var(--mono);color:var(--gold-2)}

.trust{
  display:flex;align-items:center;gap:.6rem;
  background:rgba(4,18,12,.42);
  border:1px solid var(--line-soft);
  border-radius:16px;padding:13px 16px;
}
.trust>svg{width:16px;height:16px;color:var(--gold);flex:none}
.trust__lb{flex:none;font-size:.66rem}
.trust__track{flex:1 1 auto;height:4px;border-radius:999px;background:rgba(242,241,234,.1);overflow:hidden}
.trust__fill{display:block;height:100%;width:0;border-radius:999px;background:linear-gradient(90deg,var(--gold),var(--signal));transition:width 1.4s cubic-bezier(.2,.7,.2,1)}
.trust__val{font-family:var(--mono);font-size:.85rem;color:var(--ink);flex:none;font-variant-numeric:tabular-nums}
.trust__val i{font-style:normal}

.under{
  max-width:56ch;margin:clamp(24px,5vw,38px) auto 0;
  text-align:center;font-size:.93rem;line-height:1.65;color:var(--ink-3);
}

/* ── 4. voice / face ────────────────────────────────────────────────────── */

.vsession{padding:clamp(72px,14vw,120px) 0;background:var(--bg)}

.screen{
  position:relative;overflow:hidden;
  border:1px solid var(--line);
  border-radius:26px;
  background:#020906;
  box-shadow:0 30px 90px rgba(0,0,0,.45);
  aspect-ratio:3/4;
}
.screen video{width:100%;height:100%;object-fit:cover}
.screen__chip{
  position:absolute;top:14px;left:14px;
  display:inline-flex;align-items:center;gap:.45rem;
  padding:7px 13px;border-radius:999px;
  background:rgba(4,18,12,.66);border:1px solid var(--line);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
}
.screen__chip .mono{font-size:.62rem}
.screen__chip--live i{width:6px;height:6px;border-radius:50%;background:var(--signal);animation:pulse 1.8s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.8)}}

.screen__tap{
  position:absolute;left:50%;transform:translateX(-50%);bottom:16px;
  padding:9px 16px;border-radius:999px;
  background:rgba(4,18,12,.66);border:1px solid var(--line);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  transition:background .18s ease,border-color .18s ease;
}
.screen__tap:hover{background:rgba(12,35,24,.9);border-color:var(--gold)}
.screen__tap .mono{font-size:.62rem;color:var(--ink-2)}
.screen__tap[aria-pressed="false"] .mono{color:var(--signal)}

/* ── 5 & 6. content sections ────────────────────────────────────────────── */

.sec{padding:clamp(72px,13vw,104px) 0;background:var(--bg)}
.sec--raised{background:var(--bg-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.sec__head{text-align:center;margin-bottom:clamp(28px,6vw,42px)}

.grid{display:grid;grid-template-columns:1fr;gap:14px}
.panel h3{margin-top:.5rem}
.panel .mono{display:block}

.two{display:grid;grid-template-columns:1fr;gap:2.2rem;align-items:start}
.col3{display:grid;grid-template-columns:1fr;gap:14px}

.stats{margin-top:1.7rem;max-width:360px}
.stats__rows{margin-top:.85rem}
.metric{
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  padding:9px 0;border-top:1px solid var(--line-soft);
}
.metric:first-child{border-top:0}
.metric .mono{color:var(--ink-3);font-size:.66rem}
.metric b{font-family:var(--serif);font-size:1.5rem;font-weight:400;line-height:1;color:var(--ink)}
.metric s{text-decoration:none;font-family:var(--mono);font-size:.66rem;color:var(--gold);letter-spacing:.12em;margin-left:.25rem}

/* ── 7. the premise ─────────────────────────────────────────────────────── */

.quote{
  padding:clamp(64px,12vw,96px) 0;
  text-align:center;
  background:var(--bg);
  border-top:1px solid var(--line-soft);
}
.quote blockquote{
  margin:0 auto;max-width:22ch;
  font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:clamp(1.85rem,6.6vw,3rem);line-height:1.14;
}
.quote .mono{display:block;margin-top:1.15rem;color:var(--ink-3)}

/* ── 9. the safety notice ───────────────────────────────────────────────── */

.safety{padding:0 0 clamp(64px,12vw,96px);background:var(--bg)}
.safety__box{
  max-width:60ch;margin:0 auto;
  border:1px solid var(--line);border-left:3px solid var(--gold);
  border-radius:14px;
  background:rgba(12,35,24,.7);
  padding:18px 20px;
  font-size:.92rem;line-height:1.65;color:var(--ink-2);
}

/* ── 8. footer ──────────────────────────────────────────────────────────── */

.foot{
  position:relative;z-index:1;
  background:var(--bg-2);
  border-top:1px solid var(--line);
  padding:clamp(48px,10vw,64px) 0 20px;
}
.foot__grid{display:grid;grid-template-columns:1fr;gap:2rem}
.foot__brand .brand__word{font-size:1.3rem}
.foot__tag{font-family:var(--serif);font-size:1.15rem;margin:.6rem 0 .5rem}
.foot h2{margin:0 0 .8rem;font-size:.72rem;font-weight:400}
.foot li{margin:0 0 .55rem}
.foot li a{font-size:.93rem;color:var(--ink-2);transition:color .18s ease}
.foot li a:hover{color:var(--gold)}

.foot__safety{
  margin:clamp(32px,7vw,48px) 0 0;
  padding-top:22px;border-top:1px solid var(--line-soft);
  font-size:.82rem;line-height:1.65;color:var(--ink-3);max-width:74ch;
}
.foot__end{
  display:flex;flex-wrap:wrap;gap:.75rem 1.25rem;
  margin-top:22px;padding-top:18px;border-top:1px solid var(--line-soft);
}
.foot__end .mono{color:var(--ink-3);font-size:.64rem}
.foot__nmd{color:var(--gold) !important}

/* ── the film, full size ────────────────────────────────────────────────── */

.filmbox{
  position:fixed;inset:0;z-index:120;
  display:flex;align-items:center;justify-content:center;
  background:rgba(2,9,6,.94);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  padding:var(--pad);
}
.filmbox[hidden]{display:none}
.filmbox video{width:100%;max-width:1000px;max-height:82vh;border-radius:16px;border:1px solid var(--line)}
.filmbox__close{
  position:absolute;top:calc(12px + env(safe-area-inset-top,0px));right:14px;
  width:42px;height:42px;border-radius:50%;
  border:1px solid var(--line);background:rgba(4,18,12,.7);
  font-size:1.6rem;line-height:1;
}

/* ── entrance ───────────────────────────────────────────────────────────── */

.rise{opacity:0;transform:translateY(14px);animation:rise .9s cubic-bezier(.2,.7,.2,1) forwards}
.rise--1{animation-delay:.1s}
.rise--2{animation-delay:.2s}
.rise--3{animation-delay:.3s}
@keyframes rise{to{opacity:1;transform:none}}

.reveal{opacity:0;transform:translateY(18px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
.reveal.is-in{opacity:1;transform:none}

/* ── wider than a phone ─────────────────────────────────────────────────── */

@media (min-width:600px){
  :root{--pad:24px}
  /* the card goes back to the film's own 16:9 once the viewport is wide
     enough that a landscape card is not a letterbox slot */
  .hero__film{height:min(428px,49.5vw)}
  .app__left{padding:26px 24px 28px}
  .app__right{padding:0 24px 26px;grid-template-columns:1fr 1fr;grid-auto-rows:min-content}
  .trust{grid-column:1 / -1}
  .turn{max-width:76%}
  .screen{aspect-ratio:4/3}
  .grid--4{grid-template-columns:1fr 1fr}
  .foot__grid{grid-template-columns:1fr 1fr}
}

@media (min-width:860px){
  .tabs{display:flex}
  .nav__vr{display:block}
  .nav__login{display:inline-block}
  .burger{display:none}
  .navmenu{display:none !important}

  .app__body{grid-template-columns:1.35fr 1fr}
  .app__left{border-right:1px solid var(--line-soft);padding:30px 28px}
  .app__right{padding:30px 28px;grid-template-columns:1fr;align-content:start}
  .trust{grid-column:auto}
  .screen{aspect-ratio:16/9}

  .two{grid-template-columns:1fr 1fr;gap:3rem}
  .foot__grid{grid-template-columns:1.6fr 1fr 1fr 1fr;gap:2.5rem}
}

@media (min-width:1040px){
  .grid--4{grid-template-columns:repeat(4,1fr)}
  .stagectl{right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px))}
}

/* ── respect the setting ────────────────────────────────────────────────── */

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .rise,.reveal{opacity:1;transform:none}

  /* no runway and no scroll-jacking: the copy simply sits above the film, and
     the film is simply the card the transition would have landed on */
  .hero{height:auto;padding:calc(var(--nav-h) + 54px) var(--pad) clamp(56px,10vw,96px)}
  .hero__stick{
    position:static;height:auto;overflow:visible;background:none;
    display:flex;flex-direction:column;align-items:center;gap:clamp(30px,6vw,48px);
  }
  .hero__veil,.hero__shade,.hero__thread{display:none}
  .hero__copy{order:-1;position:static;padding:0;opacity:1;transform:none}
  .hero__film{
    position:relative;left:auto;top:auto;
    width:min(760px,100%);height:auto;aspect-ratio:16/9;
    transform:none;will-change:auto;
    border:1px solid var(--line);border-radius:var(--r);
    box-shadow:0 30px 90px rgba(0,0,0,.45);
  }
  .hero__film video{position:absolute;inset:0}
}

/* ── § 9. The inner pages — About, Tech, Partnerships, Journal, legal ────
   Rendered by pages.rs from content/*.json through the shared shell in
   layout.rs. Same tokens as the home page; the header is solid from the
   start because there is no hero film behind it. */

body.page{padding-top:var(--nav-h)}
body.page .nav[data-solid="true"]{position:fixed}
.pmain{position:relative;z-index:1}

.d-1{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(2.4rem,9vw,4.4rem);line-height:1.02;letter-spacing:-.02em;
  margin:.7rem 0 0;
}
.d-1 em,.d-2 em{font-style:italic;color:var(--gold-2)}
.d-3{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(1.5rem,4.6vw,2.1rem);line-height:1.12;letter-spacing:-.01em;
  margin:.6rem 0 0;
}
.lead--center{margin-inline:auto}
.center{text-align:center}
.center .d-2{margin-top:0}
.wrap--narrow{max-width:780px}

.sec--div{border-top:1px solid var(--line-soft)}
.sec--tight{padding-top:clamp(48px,9vw,72px)}
.phero{padding-top:clamp(56px,10vw,96px)}
.phero--center{text-align:center}
.phero--center .lead{margin-inline:auto}
.phero .cta{margin-top:2rem}

.grid--3{gap:16px;margin-top:1.6rem}
.panel--tap{transition:border-color .2s ease,transform .2s ease}
.panel--tap:hover{border-color:var(--gold);transform:translateY(-2px)}
.panel .ic{display:inline-flex;width:40px;height:40px;border-radius:12px;align-items:center;justify-content:center;
  background:rgba(217,169,62,.1);color:var(--gold);margin-bottom:.35rem}
.panel .ic svg{width:22px;height:22px}
.panel .d-4{margin-top:.5rem}

/* the film on About */
.film{margin:1.8rem 0 0;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);background:#000}
.film video{width:100%;aspect-ratio:16/9;object-fit:cover}
.film__cap{padding:10px 14px;color:var(--ink-3);font-size:.64rem}

/* the 21-day figure on About: counts down to 0 as the bar fills, then the
   "Homa answers now." line lands (site.js) */
.grid-2{display:grid;grid-template-columns:1fr;gap:2rem;align-items:center}
.figure{background:var(--bg);border:1px solid var(--line);border-radius:26px;padding:1.7rem 1.5rem}
.figure__lbl{color:var(--ink-3)}
.figure .n{display:flex;align-items:baseline;gap:.4rem;margin-top:.55rem;color:var(--gold);
  font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:500;letter-spacing:-.02em;
  font-size:clamp(2.6rem,10.5vw,3.9rem);line-height:1}
.figure .n u{text-decoration:none;font-size:.3em;letter-spacing:.12em;color:var(--ink-3)}
.figure .bar{height:2px;border-radius:2px;background:rgba(242,241,234,.12);margin:1rem 0 0;overflow:hidden}
.figure .bar i{display:block;height:100%;border-radius:2px;background:var(--gold);width:calc(var(--msp,0)*100%)}
.figure .live{display:flex;align-items:center;gap:.55rem;margin:1.1rem 0 0;opacity:0;transform:translateY(8px);
  transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}
.figure.done .live{opacity:1;transform:none}
.figure .live b{width:7px;height:7px;border-radius:50%;background:var(--signal);flex:none;animation:blip 2.4s ease-in-out infinite}
.figure .live span{font-family:var(--serif);font-style:italic;font-size:1.22rem;color:var(--ink)}
.figure__foot{margin-top:1.4rem;padding-top:1.1rem;border-top:1px solid var(--line-soft)}
.figure__foot .mono{color:var(--ink-3)}
@keyframes blip{0%,100%{box-shadow:0 0 0 0 rgba(79,209,165,.45)}50%{box-shadow:0 0 0 6px rgba(79,209,165,0)}}

/* Tech: the two pinned scenes. Each section is a tall scroll runway holding
   one sticky, viewport-high "pin"; site.js turns the runway's scroll
   progress into the custom properties below and the stylesheet hangs every
   movement off them — the same mechanism as the home hero. Nothing here is
   timed: scroll back and it plays back. Under reduced motion the runways
   collapse and every property is 1. */
:root{--cin:0;--cyou:0;--cgap:0;--choma:0;--crev:0;--bud:0;--navh:56px}
.cad,.bud{position:relative;background:var(--bg-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.cad{height:380svh}
.bud{height:340svh}
.cad .pin,.bud .pin{
  position:sticky;top:0;height:100svh;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(.85rem,2.4svh,1.6rem);text-align:center;
  padding:calc(var(--navh) + .9rem) max(1.15rem,env(safe-area-inset-right)) 2rem max(1.15rem,env(safe-area-inset-left));
}
.bud .pin{gap:.7rem}
.cad .pin > .mono,.bud .pin > .mono{color:var(--gold)}

/* cadence */
.cadwrap{position:relative;width:100%;max-width:660px;opacity:var(--cin);transform:translateY(calc((1 - var(--cin))*22px))}
.cadwrap svg{display:block;width:100%;overflow:visible}
.lanetag{font-family:var(--mono);font-size:13px;letter-spacing:2px;text-transform:uppercase;stroke:none}
.lane{fill:none;stroke-dasharray:100}
.lane--you{stroke:var(--gold);stroke-dashoffset:calc(100 - var(--cyou)*100)}
.lane--homa{stroke:var(--signal);stroke-dashoffset:calc(100 - var(--choma)*100)}
.guide{stroke:rgba(242,241,234,.34);stroke-width:1;stroke-dasharray:3 5;opacity:var(--cgap)}
.cal{stroke:var(--signal);stroke-width:1.4;opacity:var(--cgap);transform:scaleX(var(--cgap));transform-box:view-box;transform-origin:300px 0}
.cadnum{
  position:absolute;left:50%;top:50%;translate:-50% -50%;
  display:flex;align-items:baseline;gap:.3rem;white-space:nowrap;
  font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:500;
  font-size:clamp(2.1rem,8vw,3.2rem);line-height:1;color:var(--signal);
  opacity:var(--cgap);transform:scale(calc(.86 + var(--cgap)*.14));
}
.cadnum u{text-decoration:none;color:var(--ink-3);font-size:.32em;letter-spacing:.12em}
.cadrev{max-width:30ch;opacity:var(--crev);transform:translateY(calc((1 - var(--crev))*14px))}
.cadrev .d-3{margin:0}
.cadnote{margin:.8rem auto 0;opacity:var(--crev)}

/* the budget */
.budwrap{width:100%;max-width:620px}
.bud .d-3{max-width:26ch;margin:0}
.budbar{display:flex;height:34px;border-radius:9px;overflow:hidden;background:rgba(242,241,234,.07);border:1px solid var(--line)}
.seg{--w:clamp(0,calc(var(--bud)*6.8 - var(--i)),1);display:block;flex:0 0 auto;height:100%;background:var(--c);width:calc(var(--w)*var(--pct)*1%);transition:none}
.seg--head{background:none;background-image:repeating-linear-gradient(90deg,rgba(242,241,234,.12) 0 5px,transparent 5px 10px);border-left:1px solid var(--signal)}
.budaxis{display:flex;justify-content:space-between;margin-top:.5rem}
.budaxis .mono{color:var(--ink-3)}
.budlegend{margin-top:1.1rem;display:grid;gap:.1rem}
.budrow{
  --w:clamp(0,calc(var(--bud)*6.8 - var(--i)),1);
  display:flex;align-items:center;gap:.6rem;padding:.4rem 0;border-bottom:1px solid var(--line-soft);
  opacity:var(--w);transform:translateX(calc((1 - var(--w))*-10px));
}
.budrow:last-child{border-bottom:0}
.budrow .dot{width:8px;height:8px;border-radius:2px;background:var(--c);flex:none}
.budrow .budlbl{min-width:0;text-align:left}
.budrow .budlbl strong{display:block;font-size:.88rem;font-weight:500;line-height:1.25;color:var(--ink)}
.budrow .budlbl em{display:block;font-style:normal;font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-top:.12rem}
.budrow b,.budrow s{font-family:var(--mono);font-variant-numeric:tabular-nums;text-decoration:none;text-align:right;min-width:4.4em}
.budrow b{margin-left:auto;font-size:.8rem;font-weight:500;color:var(--ink)}
.budrow b u{text-decoration:none}
.budrow s{font-size:.7rem;color:var(--ink-3)}
.budtotal{display:flex;align-items:baseline;justify-content:flex-end;gap:.6rem;margin-top:.9rem}
.budtotal b{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:1.05rem;font-weight:500;color:var(--signal)}
.budtotal .mono{color:var(--ink-3)}
@media (max-width:600px){
  .budrow{padding:.28rem 0;gap:.45rem}
  .budrow b{font-size:.74rem;min-width:3.7em}
  .budrow s{font-size:.68rem;min-width:3.5em}
  .budrow .budlbl strong{font-size:.8rem}
}

/* Tech: the range — grows in once it is on screen */
.range{position:relative;max-width:600px;margin:2.4rem auto 1.4rem;padding:2.9rem 0 3.4rem}
.range__above,.range__below{position:absolute;left:0;right:0;height:2.6rem}
.range__above{top:0}
.range__below{bottom:0}
.range__lbl{position:absolute;left:var(--x);translate:-50% 0;white-space:nowrap;text-align:center;
  font-family:var(--mono);font-size:.7rem;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3);line-height:1.3;
  opacity:0;transition:opacity .6s ease 1.2s}
.range__lbl b{display:block;font-family:var(--sans);font-weight:500;font-size:.85rem;letter-spacing:0;text-transform:none;color:var(--ink)}
.range__lbl--us,.range__lbl--us b{color:var(--signal)}
.range.in .range__lbl{opacity:1}
.range__track{position:relative;height:46px;border-radius:10px;overflow:hidden;background:rgba(242,241,234,.05);border:1px solid var(--line-soft)}
.range__band{position:absolute;left:var(--from);top:0;bottom:0;width:0;border-radius:9px 3px 3px 9px;
  background:linear-gradient(90deg,rgba(79,209,165,.9),rgba(79,209,165,.26));transition:width 1.35s cubic-bezier(.16,1,.3,1)}
.range.in .range__band{width:calc(var(--to) - var(--from))}
.range__edge{position:absolute;left:var(--to);top:0;bottom:0;width:2px;background:var(--signal);opacity:0;transition:opacity .5s ease .95s}
.range.in .range__edge{opacity:1}
.range__typ{position:absolute;left:var(--typ);top:7px;bottom:7px;width:1px;background:rgba(4,18,12,.6);opacity:0;transition:opacity .5s ease 1.15s}
.range.in .range__typ{opacity:1}
.range__mark{position:absolute;top:0;bottom:0;width:0;border-left:1px dashed rgba(242,241,234,.32);opacity:0;transition:opacity .6s ease 1.2s}
.range.in .range__mark{opacity:1}
@media (max-width:700px){.range__lbl{font-size:.58rem}.range__lbl b{font-size:.75rem}}

@media (prefers-reduced-motion:reduce){
  :root{--cin:1;--cyou:1;--cgap:1;--choma:1;--crev:1;--bud:1}
  .cad,.bud{height:auto}
  .cad .pin,.bud .pin{position:static;height:auto;padding:3rem 1.15rem}
  .range__band,.range__edge,.range__typ,.range__mark,.range__lbl{transition:none}
  .range .range__band{width:calc(var(--to) - var(--from))}
  .range .range__lbl,.range .range__edge,.range .range__typ,.range .range__mark{opacity:1}
}

/* Tech: FAQ + emergency */
.faq{padding:1.2rem 0;border-top:1px solid var(--line-soft)}
.faq:first-of-type{margin-top:1.6rem}
.faq .d-4{margin-top:0}
.alert{margin-top:2rem;border:1px solid var(--line);border-radius:var(--r);padding:26px 24px;background:var(--bg-2)}
.alert .d-3{margin-top:.5rem}
.alert .sm{margin-top:.6rem}
.cells{display:grid;grid-template-columns:1fr;gap:12px;margin-top:1.2rem}
.cell{border:1px solid var(--line-soft);border-radius:16px;padding:16px}
.cell strong{display:block;font-family:var(--serif);font-size:1.3rem;font-weight:400;margin:.35rem 0}

/* Partnerships */
.tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:2.2rem}
.tile{display:flex;align-items:center;gap:.7rem;border:1px solid var(--line);border-radius:16px;padding:14px 16px;background:var(--bg-2)}
.tile svg{width:22px;height:22px;color:var(--gold);flex:none}

/* Journal */
.jcard{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r);background:var(--bg-2);overflow:hidden;
  transition:border-color .2s ease,transform .2s ease}
.jcard:hover{border-color:var(--gold);transform:translateY(-2px)}
.jcard .art{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;background:var(--bg-3);border-bottom:1px solid var(--line-soft)}
.jcard .art svg{width:28px;height:28px;color:var(--gold)}
.jcard .body{padding:18px 20px 20px;display:flex;flex-direction:column;gap:.35rem;flex:1}
.jcard .body .mono{color:var(--ink-3)}
.jcard .d-4{margin:.2rem 0}
.jcard .go{display:flex;align-items:center;gap:.5rem;margin-top:auto;padding-top:1rem;color:var(--gold)}
.jcard .go svg{width:18px;height:18px}

.article{padding:clamp(48px,9vw,80px) 0}
.article__back{display:flex;width:max-content;align-items:center;gap:.5rem;color:var(--gold);margin-bottom:2rem}
.article__back svg{width:18px;height:18px}
.article__title{font-size:clamp(2rem,7vw,3.4rem);margin-top:.5rem}
.article__sub{font-size:1.15rem;line-height:1.55;color:var(--ink-2);margin:1.2rem 0 0}
.article__takeaways{margin:2rem 0;border:1px solid var(--line);border-radius:var(--r);padding:22px 24px;background:var(--bg-2)}
.article__body p{font-size:1.04rem;line-height:1.75;color:var(--ink-2);margin:0 0 1.2rem}
.article__body .d-3{margin:2.2rem 0 .8rem}
.bullets{padding-left:1.2rem;list-style:disc}
.bullets li{margin:.45rem 0;line-height:1.6;color:var(--ink-2)}
.article__sources{margin-top:2.6rem;padding-top:1.4rem;border-top:1px solid var(--line-soft)}
.article__sources ol{padding-left:1.2rem;list-style:decimal;margin:.8rem 0 0}
.article__sources li{margin:.4rem 0;font-size:.9rem;color:var(--ink-2)}
.article__sources a{color:var(--gold)}

/* Legal */
.legal .d-2{margin-top:.5rem}
.legal__meta{margin-top:1rem}
.legal__pre{margin-top:1.4rem}
.legal__pre p,.legal__sec p{font-size:.98rem;line-height:1.7;color:var(--ink-2);margin:0 0 1rem}
.legal__toc{margin:1.6rem 0 2.2rem;border:1px solid var(--line-soft);border-radius:16px;padding:16px 20px}
.legal__toc ol{padding-left:1.2rem;list-style:decimal;columns:1;font-size:.9rem;line-height:1.7}
.legal__toc a{color:var(--gold)}
.legal__sec{padding-top:1.6rem;margin-top:1.2rem;border-top:1px solid var(--line-soft)}
.legal__sec .d-3{font-size:1.35rem;margin-bottom:.8rem}
.legal__sec b,.legal__pre b{color:var(--ink);font-weight:600}

@media (min-width:600px){
  .cells{grid-template-columns:1fr 1fr}
  .tiles{grid-template-columns:repeat(4,1fr)}
  .legal__toc ol{columns:2;column-gap:2rem}
}
@media (min-width:860px){
  .grid-2{grid-template-columns:1.1fr .9fr;gap:3rem}
  .grid--3{grid-template-columns:repeat(3,1fr)}
}