/* latin-ext */
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("/assets/fonts/f153aa07c1b1.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("/assets/fonts/8330490a01c6.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url("/assets/fonts/6d5226ffed03.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url("/assets/fonts/1e0d114a7292.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url("/assets/fonts/4af9c759c805.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("/assets/fonts/7e3c04662669.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("/assets/fonts/f120089b9440.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("/assets/fonts/48282a415ec2.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/c6f09ee0e0a2.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/7b59d6bf7f8b.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/0a8b854cc186.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/f1050dc5317b.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/c36f509c0a8f.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/311098be73ea.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/d524dc8ff6db.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/b2529fba93fd.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/77f03e26f981.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/a76f53ca6612.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}



:root{
  --navy:#0E1B3E; --navy-2:#16294F; --navy-3:#1E3566;
  --cream:#F7F4EC; --paper:#FBFAF6;
  --gold:#F3B347; --peri:#8FA9DC; --forest:#133826; --sage:#7FBFA0;
  --rose:#E8467C; --violet:#6B4BD6; --teal:#1FA3A3;
  --ink:#0E1B3E; --muted:#5A678C; --line:rgba(14,27,62,.13);
  --disp:"Fraunces",Georgia,serif;
  --body:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
  --rl:26px; --wrap:1120px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media(min-width:1100px){body{zoom:.75}}
body{margin:0;overflow-x:hidden;background:var(--paper);color:var(--ink);font-family:var(--body);
  font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{width:min(100% - 40px,var(--wrap));margin-inline:auto}

h1,h2,h3{font-family:var(--disp);font-weight:500;letter-spacing:-.018em;line-height:1.06;margin:0}
h1{font-size:min(4.6rem,11vw);line-height:1.06;font-variation-settings:"SOFT" 20,"WONK" 1}
@media(min-width:980px){h1{font-size:min(4.85rem,6.65vw)}}
.hero h1{margin-left:-.035em}
h2{font-size:clamp(2rem,4.6vw,3.3rem)}
h3{font-size:clamp(1.22rem,2vw,1.55rem);line-height:1.2}
p{margin:0 0 1em}
.lede{font-size:clamp(1.06rem,1.7vw,1.28rem);color:var(--muted);max-width:60ch}
.eyebrow{font-family:var(--mono);font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;
  color:#434C68;margin:0 0 18px;display:flex;align-items:center;gap:10px}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--gold);border-radius:2px;flex:none}
.eyebrow.on-dark{color:var(--peri)}
.serif-note{font-family:var(--disp);font-style:italic;font-size:1.12rem;color:var(--muted)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--body);
  font-size:1rem;font-weight:600;padding:15px 24px;border-radius:999px;border:1.5px solid transparent;
  cursor:pointer;text-decoration:none;white-space:nowrap;
  transition:transform .16s ease,box-shadow .16s ease,background .16s ease}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--navy);color:#fff;box-shadow:0 10px 26px -12px rgba(14,27,62,.7)}
.btn-primary:hover{background:var(--navy-3)}
.btn-gold{background:var(--gold);color:var(--navy);box-shadow:0 10px 26px -12px rgba(243,179,71,.9)}
.btn-ghost{background:transparent;color:var(--navy);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--navy)}
.btn-onnavy{background:#fff;color:var(--navy)}
.btn-sm{padding:11px 20px;font-size:.92rem}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:6px}

.nav{position:sticky;top:0;z-index:60;background:rgba(251,250,246,.87);backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;transition:border-color .3s}
.nav.stuck{border-bottom-color:var(--line)}
.nav-in{display:flex;align-items:center;gap:26px;padding:16px 0}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;font-family:var(--disp);
  font-size:1.55rem;font-weight:500;letter-spacing:-.02em}
.brand img{width:35px;height:35px}
.brand span{white-space:nowrap}
.brand .i{color:var(--gold)}
.nav-links{display:none;gap:26px;margin-left:auto;font-size:.95rem;font-weight:500}
.nav-links a{text-decoration:none;color:var(--muted);padding:6px 0;border-bottom:2px solid transparent}
.nav-links a:hover{color:var(--navy);border-bottom-color:var(--gold)}
.nav-cta{margin-left:auto;display:flex;gap:10px;align-items:center}
@media(min-width:960px){.nav-links{display:flex}.nav-cta{margin-left:0}}
@media(max-width:560px){.nav-cta .btn-ghost{display:none}.brand{font-size:1.25rem}.nav-in{gap:12px}}

.hero{position:relative;overflow:hidden;padding:56px 0 0}
@media(min-width:980px){.hero{padding-top:80px}}
.hero-glow{position:absolute;inset:-30% -10% auto -10%;height:900px;z-index:0;
  background:
    radial-gradient(40% 34% at 8% 14%,rgba(127,191,160,.62),transparent 66%),
    radial-gradient(34% 30% at 22% 22%,rgba(243,179,71,.72),transparent 64%),
    radial-gradient(40% 34% at 68% 12%,rgba(143,169,220,.60),transparent 66%),
    radial-gradient(38% 32% at 94% 4%,rgba(243,179,71,.60),transparent 66%),
    radial-gradient(42% 36% at 52% 44%,rgba(127,191,160,.44),transparent 68%),
    radial-gradient(34% 30% at 44% 58%,rgba(243,179,71,.5),transparent 66%),
    radial-gradient(44% 38% at 18% 62%,rgba(143,169,220,.58),transparent 70%),
    radial-gradient(36% 32% at 72% 74%,rgba(127,191,160,.40),transparent 70%);
  filter:blur(14px);pointer-events:none}
.hero-in{position:relative;z-index:1;display:grid;gap:44px;padding-bottom:64px}
@media(min-width:980px){.hero-in{grid-template-columns:1.22fr .78fr;gap:48px;align-items:center;padding-bottom:106px}.hero .hero-hand{margin-bottom:44px}}
.badge{display:inline-flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--line);
  border-radius:999px;padding:6px 16px 6px 6px;font-size:.86rem;font-weight:500;color:var(--muted);
  box-shadow:0 6px 20px -14px rgba(14,27,62,.5);margin-bottom:22px}
.badge b{background:var(--navy);color:#fff;border-radius:999px;padding:5px 12px;font-family:var(--mono);
  font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;font-weight:500}
.dot{width:7px;height:7px;border-radius:50%;background:var(--sage);
  box-shadow:0 0 0 4px rgba(127,191,160,.28);animation:pulse 2.6s ease-in-out infinite}
@keyframes pulse{50%{box-shadow:0 0 0 9px rgba(127,191,160,0)}}
h1 .l1{display:block;width:fit-content;white-space:nowrap;color:var(--navy)}
h1 .l2{margin-top:.08em;width:fit-content;white-space:nowrap}
h1 .l2{display:block;background:linear-gradient(94deg,var(--forest),#2F8F6B 26%,var(--peri) 54%,#E0A02F 84%,var(--gold));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.hero-sub{margin-top:26px;font-size:clamp(1.06rem,1.7vw,1.24rem);color:var(--navy);max-width:40ch;font-weight:500}
.hero-hand{font-family:var(--disp);font-style:italic;font-weight:400;
  font-size:clamp(1.06rem,1.8vw,1.3rem);color:#434C68;margin:8px 0 30px;max-width:44ch}
.hero-ctas{display:flex;flex-wrap:wrap;gap:11px}
.hero-ctas .btn{padding:15px 22px;font-size:.97rem}
.ticks{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:22px;font-size:.9rem;color:var(--muted)}
.ticks span{display:flex;align-items:center;gap:7px}
.ticks svg{flex:none}

.clock{background:#fff;border-radius:var(--rl);border:1px solid var(--line);
  box-shadow:0 40px 80px -50px rgba(14,27,62,.6);padding:24px;position:relative;overflow:hidden}
.clock-head{display:flex;align-items:center;gap:12px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.clock-head img{width:26px;height:26px}
.clock-title{font-weight:700;font-size:1.02rem;letter-spacing:-.01em}
.clock-time{margin-left:auto;font-family:var(--mono);font-size:.94rem;background:var(--cream);
  border-radius:999px;padding:5px 13px;color:var(--navy);font-variant-numeric:tabular-nums}
.steps{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:6px}
.step{display:grid;grid-template-columns:32px 1fr;gap:14px;padding:13px 12px;border-radius:14px;
  transition:background .35s ease,opacity .35s ease;opacity:.45}
.step .num{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;
  font-family:var(--mono);font-size:.8rem;background:var(--cream);color:var(--muted);transition:.35s}
.step h4{margin:0 0 3px;font-size:.99rem;font-weight:700;letter-spacing:-.01em}
.step p{margin:0;font-size:.88rem;color:var(--muted);line-height:1.5}
.step.on{opacity:1;background:linear-gradient(100deg,rgba(143,169,220,.16),rgba(243,179,71,.12))}
.step.on .num{background:var(--navy);color:#fff}
.step.done{opacity:.85}
.step.done .num{background:var(--sage);color:#08301f}
.clock-bar{height:5px;border-radius:99px;background:var(--cream);margin:18px 0 14px;overflow:hidden}
.clock-fill{height:100%;width:0%;border-radius:99px;
  background:linear-gradient(90deg,var(--sage),var(--peri),var(--gold));transition:width .5s linear}
.clock-foot{display:flex;align-items:center;gap:14px;font-size:.86rem;color:var(--muted)}
.clock-foot p{margin:0;line-height:1.45}
.clock-foot .btn{margin-left:auto;flex:none}

.band{padding:80px 0}
@media(min-width:900px){.band{padding:112px 0}}
.band-navy{background:var(--navy);color:#fff;position:relative}
.band-navy h2,.band-navy h3{color:#fff}
.band-navy .lede{color:rgba(255,255,255,.72)}
.band-cream{background:var(--cream)}
.wave{display:block;width:100%;height:auto;margin-bottom:-1px}
.wave-flip{transform:rotate(180deg);background:var(--cream)}
.band-cream + .wave{background:var(--cream)}
.wave-flip:has(+ .band:not(.band-cream)){background:var(--paper)}
.strip{background:var(--navy);color:#fff;padding:24px 0}
.strip-grid{display:grid;gap:26px;grid-template-columns:repeat(2,1fr)}
@media(min-width:820px){.strip-grid{grid-template-columns:repeat(4,1fr);gap:34px}}
.stat b{font-family:var(--disp);font-size:clamp(2.1rem,4.4vw,2.8rem);font-weight:600;line-height:1;display:block}
.stat b i{font-style:normal;font-family:var(--body);font-size:.9rem;font-weight:700;margin-left:3px}
.stat p{margin:9px 0 0;font-size:.88rem;color:rgba(255,255,255,.66);line-height:1.5}
.s1 b{color:var(--gold)} .s2 b{color:var(--peri)} .s3 b{color:var(--sage)} .s4 b{color:#fff}
.head{max-width:62ch;margin-bottom:44px}
.head .lede{margin-top:16px}
.cards{display:grid;gap:18px}
@media(min-width:760px){.cards.c2{grid-template-columns:1fr 1fr}.cards.c3{grid-template-columns:repeat(3,1fr)}}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--rl);padding:26px}
.card h3{margin-bottom:9px}
.card p{margin:0;color:var(--muted);font-size:.96rem}
.card .tag{font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);display:block;margin-bottom:14px}
.card.k1{border-top:3px solid var(--sage)} .card.k2{border-top:3px solid var(--peri)} .card.k3{border-top:3px solid var(--gold)}

/* ---- room demo ---- */
.room-grid{display:grid;gap:34px;align-items:center}
@media(min-width:980px){.room-grid{grid-template-columns:.92fr 1.08fr;gap:56px}}
.phone{background:linear-gradient(178deg,#0B1631,#16294F);border-radius:34px;padding:22px 20px 20px;
  border:1px solid rgba(143,169,220,.28);box-shadow:0 50px 90px -50px rgba(0,0,0,.8);
  min-height:430px;display:flex;flex-direction:column;position:relative;overflow:hidden}
.phone::after{content:"";position:absolute;left:0;right:0;bottom:0;height:112px;background:
  radial-gradient(120% 100% at 20% 100%,rgba(127,191,160,.3),transparent 60%),
  radial-gradient(120% 100% at 80% 100%,rgba(143,169,220,.3),transparent 60%);pointer-events:none}
.phone-top{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:.7rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--peri)}
.phone-top .mt{margin-left:auto;color:rgba(255,255,255,.62);letter-spacing:.06em;
  text-transform:none;font-variant-numeric:tabular-nums}
.orb{width:98px;height:98px;border-radius:50%;margin:30px auto 22px;
  background:radial-gradient(circle at 34% 32%,rgba(255,255,255,.5),rgba(127,191,160,.42) 42%,rgba(30,53,102,.1) 72%);
  box-shadow:0 0 60px rgba(127,191,160,.35)}
.orb.listening{animation:breathe 4.2s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.09)}}
.said{background:rgba(143,169,220,.16);border:1px solid rgba(143,169,220,.26);
  border-radius:16px 16px 5px 16px;padding:12px 15px;color:#fff;font-size:.94rem;
  margin:0 0 12px auto;max-width:88%;line-height:1.5}
.reply{color:#fff;font-family:var(--disp);font-size:1.06rem;line-height:1.45;max-width:94%;margin:0 0 12px}
.gather{display:flex;align-items:center;gap:11px;color:var(--peri);font-size:.85rem;margin-bottom:12px}
.gather-bar{flex:1;height:4px;background:rgba(143,169,220,.22);border-radius:99px;overflow:hidden}
.gather-fill{height:100%;width:0;background:linear-gradient(90deg,var(--sage),var(--gold));border-radius:99px}
.phone-body{flex:1;position:relative;z-index:1;display:flex;flex-direction:column;justify-content:flex-end}
.phone-foot{margin-top:16px;display:flex;gap:9px;position:relative;z-index:2;flex-wrap:wrap}
.chip{background:rgba(255,255,255,.09);border:1px solid rgba(143,169,220,.3);color:#fff;
  border-radius:999px;padding:9px 15px;font-size:.85rem;font-weight:500;cursor:pointer;
  transition:.16s;font-family:var(--body)}
.chip:hover{background:rgba(255,255,255,.18)}
.chip[disabled]{opacity:.4;cursor:default}
.autosend{display:flex;align-items:center;gap:8px;font-size:.78rem;color:var(--peri);
  margin-top:10px;position:relative;z-index:2}
.switch{width:34px;height:19px;border-radius:99px;background:var(--sage);position:relative;flex:none}
.switch::after{content:"";position:absolute;top:2px;right:2px;width:15px;height:15px;
  border-radius:50%;background:#06301f}
.beats{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.beat{display:grid;grid-template-columns:86px 1fr;gap:16px;padding:15px 0;border-top:1px solid rgba(255,255,255,.13)}
.beat:first-child{border-top:0}
.beat .t{font-family:var(--mono);font-size:.78rem;color:var(--gold);padding-top:3px}
.beat h4{margin:0 0 4px;font-size:1.02rem;font-weight:700;color:#fff}
.beat p{margin:0;color:rgba(255,255,255,.66);font-size:.92rem;line-height:1.55}
.phase{margin:34px 0 12px}
.phase:first-child{margin-top:0}
.phase h3{margin:0;font-family:var(--disp);font-size:1.32rem;font-weight:500;color:#fff;letter-spacing:-.01em}
.phase-note{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin:9px 0 0;font-size:.88rem;color:rgba(255,255,255,.72)}
.cam{font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;padding:4px 9px;border-radius:999px}
.cam.on{background:var(--gold);color:var(--navy)}
.cam.off{background:rgba(255,255,255,.12);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.28)}
.beats-note{margin:16px 0 0;color:rgba(255,255,255,.82);font-size:.88rem;line-height:1.6;padding-left:15px;border-left:2px solid color-mix(in oklab,var(--gold) 60%,transparent)}

/* ---- dashboard replica (mirrors the live 08/24 build) ---- */
.appwin{border:1px solid var(--line);border-radius:22px;overflow:hidden;background:#fff;
  max-width:920px;margin:0 auto;box-shadow:0 46px 90px -56px rgba(14,27,62,.6)}
.appwin .dash{padding:18px 16px 0}
.appwin .dash-in{padding-bottom:58px}
.appwin .dash .hi{font-size:clamp(1.25rem,2.2vw,1.6rem)}
.appwin .dash .sub{font-size:.86rem;margin-bottom:16px}
.appwin .dcard{padding:13px}
.appwin .dcard .stat-v{font-size:1.2rem}
.appwin .dcard .ico{width:30px;height:30px;border-radius:10px;margin-bottom:8px}
.appbar{display:flex;align-items:center;gap:8px;padding:11px 16px;background:#EEF0F4;border-bottom:1px solid var(--line)}
.appbar i{width:10px;height:10px;border-radius:50%;background:#D6DAE3;display:block}
.appbar .url{margin-left:12px;flex:1;background:#fff;border-radius:99px;padding:5px 14px;
  font-family:var(--mono);font-size:.72rem;color:var(--muted);border:1px solid var(--line)}
.dash{background:#F5F7F6 url("/assets/img/c2277722de4e.webp") center bottom/cover no-repeat;
  padding:22px 20px 0;position:relative;overflow:hidden}
.dash-wave{position:absolute;left:0;right:0;bottom:0;width:100%;height:180px;pointer-events:none}
.dash-in{position:relative;z-index:1;padding-bottom:74px}
.dash-top{display:flex;align-items:center;margin-bottom:20px}
.dash-top .brand{font-size:1.2rem}
.dash-top .brand img{width:28px;height:28px}
.dash-av{margin-left:auto;width:34px;height:34px;border-radius:50%;background:#fff;
  border:1px solid var(--line);display:grid;place-items:center;font-size:.85rem;color:var(--muted)}
.dash .hi{font-family:var(--disp);font-size:clamp(1.4rem,2.8vw,2rem);font-weight:600;margin:0 0 5px}
.dash .sub{color:var(--muted);font-size:.92rem;margin:0 0 20px}
.dcols{display:grid;gap:12px}
@media(min-width:780px){.dcols{grid-template-columns:1fr 1fr;align-items:start}}
.dcol{display:grid;gap:12px;align-content:start}
.dcard{background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px;
  width:100%;text-align:left;font-family:var(--body);cursor:pointer;position:relative;
  transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease;color:var(--ink);
  box-shadow:0 10px 22px -14px rgba(14,27,62,.34),0 2px 4px -2px rgba(14,27,62,.12)}
.dcard:hover,.dcard.sel{transform:translateY(-3px);border-color:var(--navy);
  box-shadow:0 16px 30px -20px rgba(14,27,62,.75)}
.dcard.sel::before{content:"";position:absolute;left:-1px;top:16px;bottom:16px;width:3px;
  border-radius:99px;background:var(--gold)}
.dcard .ico{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;
  font-size:.95rem;margin-bottom:10px}
.dcard .stat-v{font-family:var(--disp);font-size:1.45rem;font-weight:600;margin:0;line-height:1.1}
.dcard .stat-l{margin:2px 0 0;font-size:.82rem;color:var(--muted)}
.dcard h4{margin:0 0 3px;font-size:1rem;font-weight:700}
.dcard .d{margin:0;font-size:.84rem;color:var(--muted);line-height:1.45}
.drow{display:flex;gap:13px;align-items:flex-start}
.dcard.video{background:linear-gradient(105deg,#FDEBC6,#FBDFA8);border-color:rgba(243,179,71,.65)}
.dcard.video .ico{background:var(--gold);color:var(--navy)}
.dcard.video .d{color:#6C5527}
.dcard.spark{background:#E4EDF7;border-color:#C4D6EA}
.dcard.spark .ico{background:#fff;color:var(--navy)}
.dcard.locked{background:#F2F3F5}
.dcard.locked .ico{background:#fff;color:var(--muted)}
.lockpill{position:absolute;top:12px;right:12px;font-family:var(--mono);font-size:.55rem;
  letter-spacing:.11em;text-transform:uppercase;padding:4px 9px;border-radius:99px;
  background:var(--peri);color:#182c58;font-weight:500;display:flex;align-items:center;gap:4px}
.lockpill.iht{background:#D8DEE9;color:#3C4A6B}
.chev{position:absolute;top:16px;right:14px;color:var(--muted);font-size:.9rem}
.mini{font-size:.76rem;color:var(--muted);margin:-4px 0 0;padding-left:2px}
.ledger .lr{display:flex;justify-content:space-between;font-size:.79rem;margin-bottom:5px;gap:10px}
.ledger .lr .r{font-family:var(--mono);font-variant-numeric:tabular-nums;color:var(--navy);white-space:nowrap}
.ledger .tr{height:6px;border-radius:99px;background:#E7EAF0;overflow:hidden;margin-bottom:13px}
.ledger .tr i{display:block;height:100%;border-radius:99px}
.team{display:flex;align-items:center;gap:11px;padding:9px 0}
.team .av{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;
  font-family:var(--disp);font-size:.85rem;font-weight:600;flex:none}
.team h5{margin:0;font-size:.9rem;font-weight:700;font-family:var(--body)}
.team p{margin:0;font-size:.78rem;color:var(--muted)}
.roomlab{font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted);margin:22px 0 10px}
.tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:9px}
@media(min-width:620px){.tiles{grid-template-columns:repeat(3,1fr)}}
@media(min-width:900px){.tiles{grid-template-columns:repeat(6,1fr)}}
.tile{background:#fff;border:1px solid var(--line);border-radius:15px;padding:15px 8px;
  text-align:center;cursor:pointer;font-family:var(--body);font-size:.83rem;font-weight:600;
  color:var(--navy);transition:.16s;display:flex;flex-direction:column;align-items:center;
  gap:7px;position:relative}
.tile:hover,.tile.sel{border-color:var(--navy);transform:translateY(-3px);
  box-shadow:0 14px 26px -18px rgba(14,27,62,.7)}
.tile.sel{background:var(--navy);color:#fff}
.tile .ic{font-size:1.15rem;line-height:1}
.tile .lk{position:absolute;top:7px;right:8px;font-size:.62rem;color:var(--muted)}
.tile.sel .lk{color:var(--peri)}

.dashsplit{display:grid;gap:22px;align-items:start}
@media(min-width:860px){
  .dashsplit{grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr)}
  .dashsplit .appwin{max-width:none;margin:0;zoom:.86}
  .dashsplit .dcols{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .dashsplit .tiles{grid-template-columns:repeat(3,1fr)}
  .dashsplit .peek{margin-top:0}
  .dashsplit{align-items:stretch}
  .dashright{display:flex;flex-direction:column;gap:16px;height:100%}
  .dashright .peek{flex:1}
  .dashright .oneplan{margin-top:auto}
  .dashright .oneplan{grid-template-columns:1fr;align-items:start}
  .dashright .oneplan .btn{justify-self:start}
}
.ledger .lr{flex-wrap:wrap;font-size:.78rem}
.peek{background:#fff;border:1px solid var(--line);border-top:3px solid var(--sage);border-radius:var(--rl);padding:26px;margin-top:16px}
.peek.t-sub{border-top-color:var(--gold)}
.peek.t-iht{border-top-color:var(--peri)}
.peek .tag{font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);margin:0 0 10px;display:block}
.peek h3{margin-bottom:9px;font-size:clamp(1.3rem,2vw,1.6rem)}
.peek p{color:var(--muted);margin-bottom:16px;font-size:.95rem}
.peek ul{margin:0;padding:14px 0 0;list-style:none;border-top:1px solid var(--line);color:var(--muted);font-size:.92rem}
.peek li{margin-bottom:9px;padding-left:16px;position:relative;line-height:1.5}
.peek li:last-child{margin-bottom:0}
.peek li{padding-left:24px}
.peek li::before{content:"\2713";position:absolute;left:0;top:0;width:auto;height:auto;background:none;color:var(--sage);font-size:.9rem;font-weight:700}
.who{display:inline-flex;align-items:center;gap:8px;font-size:.82rem;font-weight:600;
  border-radius:999px;padding:6px 14px;margin-bottom:14px}
.who.f{background:rgba(127,191,160,.2);color:#0d5c3c}
.who.s{background:rgba(143,169,220,.24);color:#20366b}
.who.i{background:#E5E9F0;color:#3C4A6B}
.legend{display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center;margin-top:18px;
  background:#fff;border:1px solid var(--line);border-radius:18px;padding:16px 20px;font-size:.9rem}
.legend b{display:inline-flex;align-items:center;gap:8px;font-weight:600}
.legend b::before{content:"";width:11px;height:11px;border-radius:50%;flex:none}
.legend .lf::before{background:var(--sage)}
.legend .ls::before{background:var(--peri)}
.legend .li::before{background:#C3CBDA}
.oneplan{margin-top:16px;background:linear-gradient(103deg,var(--navy),#22376B);color:#fff;
  border-radius:var(--rl);padding:24px 26px;display:grid;gap:14px}
@media(min-width:820px){.oneplan{grid-template-columns:1fr auto;align-items:center}}
.oneplan h3{color:#fff;margin-bottom:6px}
.oneplan p{margin:0;color:rgba(255,255,255,.76);font-size:.96rem;max-width:64ch}
.oneplan .big{font-family:var(--disp);color:var(--gold)}

/* ---- plans ---- */
.plans{display:grid;gap:16px}
@media(min-width:900px){.plans{grid-template-columns:repeat(3,1fr)}}
.plan{background:#fff;border:1px solid var(--line);border-radius:var(--rl);padding:28px;
  display:flex;flex-direction:column}
.plan.free{border-top:4px solid var(--sage)}
.plan.sub{border-top:4px solid var(--gold)}
.plan.iht{background:var(--navy);color:#fff;border-color:var(--navy)}
.plan .pname{font-family:var(--mono);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);margin:0 0 12px;display:flex;align-items:center;gap:9px}
.plan.iht .pname{color:var(--peri)}
.plan .flag{background:var(--peri);color:var(--navy);border-radius:99px;padding:3px 9px;font-size:.6rem;letter-spacing:.1em}
.price{font-family:var(--disp);font-size:3rem;font-weight:600;line-height:1;margin:0}
.price small{font-family:var(--body);font-size:.95rem;font-weight:600;color:var(--muted);margin-left:2px}
.plan.iht .price small{color:var(--peri)}
.plan .under{font-size:.88rem;color:var(--muted);margin:8px 0 20px}
.plan.iht .under{color:rgba(255,255,255,.66)}
.plan ul{list-style:none;margin:0 0 24px;padding:0;font-size:.94rem;flex:1}
.plan li{padding:8px 0 8px 25px;position:relative;border-top:1px solid var(--line);line-height:1.48}
.plan.iht li{border-top-color:rgba(255,255,255,.14)}
.plan li:first-child{border-top:0}
.plan li::before{content:"";position:absolute;left:2px;top:15px;width:11px;height:6px;
  border-left:2.2px solid var(--sage);border-bottom:2.2px solid var(--sage);
  transform:rotate(-45deg);border-radius:1px}
.plan.sub li::before{border-color:var(--gold)}
.plan.iht li::before{border-color:var(--peri)}
.plan .btn{width:100%}

.honest{display:grid;gap:12px}
@media(min-width:760px){.honest{grid-template-columns:1fr 1fr}}
.honest div{background:var(--paper);border-left:3px solid var(--gold);border-radius:0 14px 14px 0;
  padding:15px 18px;font-size:.94rem;line-height:1.55}
.crisis{background:var(--navy);border:1px solid rgba(255,255,255,.14);border-radius:var(--rl);padding:26px 28px;margin-top:22px;color:#fff}
.crisis .m{font-family:var(--mono);font-size:1.05rem;color:var(--gold);font-weight:500}
.crisis p{margin:0;font-size:.93rem;color:rgba(255,255,255,.78)}
.crisis a{color:#fff}
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:20px 0;font-family:var(--disp);font-size:1.16rem;
  display:flex;align-items:center;gap:14px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";margin-left:auto;font-family:var(--body);font-weight:400;color:var(--muted);font-size:1.4rem}
.faq details[open] summary::after{content:"−"}
.faq .a{padding:0 0 20px;color:var(--muted);font-size:.98rem;max-width:70ch}
.pif{display:grid;gap:14px}
@media(min-width:820px){.pif{grid-template-columns:1fr 1fr;align-items:stretch}}
.pif > div{background:#fff;border:1px solid var(--line);border-top:3px solid var(--sage);
  border-radius:var(--rl);padding:24px 26px;display:flex;flex-direction:column;gap:10px;
  box-shadow:0 10px 22px -14px rgba(14,27,62,.34),0 2px 4px -2px rgba(14,27,62,.12)}
.pif > div:nth-child(2){border-top-color:var(--gold)}
.pifi{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;font-size:1.05rem}
.pif h3{margin:0;font-family:var(--disp);font-weight:500}
.pif p{margin:0;color:var(--muted);font-size:.96rem;line-height:1.6}
.pifrow{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:auto;padding-top:6px}
.pifnote{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.faqgrid{display:grid;gap:26px}
footer{background:var(--navy);color:#fff;padding:56px 0 30px}
.fgrid{display:grid;gap:32px}
@media(min-width:800px){.fgrid{grid-template-columns:1.5fr 1fr 1fr 1fr}}
footer h5{font-family:var(--mono);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--peri);margin:0 0 14px;font-weight:500}
footer ul{list-style:none;margin:0;padding:0;font-size:.93rem}
footer li{margin-bottom:9px}
footer a{color:rgba(255,255,255,.74);text-decoration:none}
footer a:hover{color:#fff}
.fbot{margin-top:38px;padding-top:20px;border-top:1px solid rgba(255,255,255,.16);
  font-size:.83rem;color:rgba(255,255,255,.6);display:flex;flex-wrap:wrap;gap:12px}
.rv{opacity:0;transform:translateY(20px);transition:opacity .7s ease,transform .7s ease}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .rv{opacity:1;transform:none}
  html{scroll-behavior:auto}
}

.ladder{list-style:none;margin:36px 0 0;padding:26px 26px 24px;display:grid;gap:24px;background:color-mix(in oklab, var(--cream) 93%, var(--gold) 7%);border:1px solid var(--line);border-radius:var(--rl)}
@media(min-width:880px){.ladder{grid-template-columns:repeat(4,1fr);gap:28px}}
.ladder li{position:relative;padding-top:18px;border-top:2px solid var(--line)}
/* line draws itself left-to-right, step by step, as the strip comes into view */
.ladder li::before{content:"";position:absolute;top:-2px;left:0;right:0;height:2px;transform:scaleX(0);transform-origin:left center;transition:transform .55s cubic-bezier(.4,0,.2,1)}
/* one continuous ramp across the four rungs: green -> blue -> gold */
.ladder li:nth-child(1)::before{background:linear-gradient(90deg,var(--sage),color-mix(in oklab,var(--sage),var(--peri)))}
.ladder li:nth-child(2)::before{background:linear-gradient(90deg,color-mix(in oklab,var(--sage),var(--peri)),var(--peri))}
.ladder li:nth-child(3)::before{background:linear-gradient(90deg,var(--peri),color-mix(in oklab,var(--peri),var(--gold)))}
.ladder li:nth-child(4)::before{background:linear-gradient(90deg,color-mix(in oklab,var(--peri),var(--gold)),var(--gold))}
.ladder li:nth-child(1) b{box-shadow:0 0 0 4px color-mix(in oklab,var(--sage) 34%,transparent)}
.ladder li:nth-child(2) b{box-shadow:0 0 0 4px color-mix(in oklab,var(--peri) 34%,transparent)}
.ladder li:nth-child(3) b{box-shadow:0 0 0 4px color-mix(in oklab,var(--peri) 20%,var(--gold) 20%)}
.ladder.in li::before{transform:scaleX(1)}
.ladder.in li:nth-child(1)::before{transition-delay:.10s}
.ladder.in li:nth-child(2)::before{transition-delay:.42s}
.ladder.in li:nth-child(3)::before{transition-delay:.74s}
.ladder.in li:nth-child(4)::before{transition-delay:1.06s}
.ladder time{display:block;margin-top:7px;font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;color:var(--navy);opacity:.66;font-variant-numeric:tabular-nums}
/* step 4 is the payoff, not another rung */
.ladder li.arrive b{background:var(--gold);color:var(--navy);box-shadow:0 0 0 4px color-mix(in oklab, var(--gold) 26%, transparent)}
.ladder li.arrive h4{color:var(--navy)}
.ladder li.arrive time{color:var(--navy);opacity:.72}
@media(prefers-reduced-motion:reduce){.ladder li::before{transform:scaleX(1);transition:none}}
.ladder li b{position:absolute;top:-11px;left:0;width:21px;height:21px;border-radius:50%;background:var(--navy);color:#fff;font-family:var(--mono);font-size:.6rem;font-weight:500;display:grid;place-items:center}
.ladder h4{margin:0 0 4px;font-size:.98rem;font-weight:700;letter-spacing:-.01em}
.ladder p{margin:0;font-size:.88rem;color:var(--muted);line-height:1.5}
.ladder-note{margin:14px 0 0;font-family:var(--mono);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}

/* ---- shared page chrome (subpages) ---- */
.pagehead{position:relative;overflow:hidden;padding:64px 0 0}
.pagehead .glow{position:absolute;inset:-14% -10% -6% -10%;z-index:0;
  background:
    radial-gradient(40% 34% at 8% 14%,rgba(127,191,160,.62),transparent 66%),
    radial-gradient(34% 30% at 22% 22%,rgba(243,179,71,.72),transparent 64%),
    radial-gradient(40% 34% at 68% 12%,rgba(143,169,220,.60),transparent 66%),
    radial-gradient(38% 32% at 94% 4%,rgba(243,179,71,.60),transparent 66%),
    radial-gradient(42% 36% at 52% 44%,rgba(127,191,160,.44),transparent 68%),
    radial-gradient(34% 30% at 44% 58%,rgba(243,179,71,.5),transparent 66%),
    radial-gradient(44% 38% at 18% 62%,rgba(143,169,220,.58),transparent 70%),
    radial-gradient(36% 32% at 72% 74%,rgba(127,191,160,.40),transparent 70%);
  filter:blur(14px);pointer-events:none}
.pagehead .wrap{position:relative;z-index:1;padding-bottom:62px}
.pagehead h1{font-size:min(4rem,8.4vw);max-width:17ch}
@media(min-width:980px){.pagehead h1{font-size:min(4rem,5.2vw)}}
.pagehead .lede{margin-top:22px}
.crumbs{font-family:var(--mono);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted);margin:0 0 20px}
.crumbs a{text-decoration:none;color:var(--muted)}
.crumbs a:hover{color:var(--navy)}
.tl{list-style:none;margin:0;padding:0;display:grid;gap:0}
.tl li{display:grid;grid-template-columns:82px 1fr;gap:22px;padding:22px 0;border-top:1px solid var(--line)}
.tl li:first-child{border-top:0}
.tl .t{font-family:var(--mono);font-size:.82rem;color:var(--navy);padding-top:4px}
.band-navy .tl li{border-top-color:rgba(255,255,255,.14)}
.band-navy .tl .t{color:var(--gold)}
.tl h3{margin:0 0 6px;font-size:1.24rem}
.tl p{margin:0;color:var(--muted);font-size:.96rem;max-width:62ch}
.band-navy .tl p{color:rgba(255,255,255,.68)}
.callout{background:#fff;border:1px solid var(--line);border-radius:var(--rl);padding:26px 28px;margin-top:26px}
.callout p:last-child{margin-bottom:0}
.crisis-big{background:var(--navy);color:#fff;border-radius:var(--rl);padding:30px 32px}
.crisis-big h3{color:#fff;margin-bottom:10px}
.crisis-big p{color:rgba(255,255,255,.76);max-width:64ch}
.crisis-big .nums{display:grid;gap:10px;margin-top:20px}
@media(min-width:760px){.crisis-big .nums{grid-template-columns:repeat(3,1fr)}}
.crisis-big .num{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.18);
  border-radius:16px;padding:16px 18px}
.crisis-big .num b{display:block;font-family:var(--mono);font-size:1.24rem;color:var(--gold);margin-bottom:4px}
.crisis-big .num span{font-size:.88rem;color:rgba(255,255,255,.7)}
.twocol{display:grid;gap:34px}
@media(min-width:900px){.twocol{grid-template-columns:1fr 1fr;gap:52px}}
.deflist{list-style:none;margin:0;padding:0}
.deflist li{padding:16px 0;border-top:1px solid var(--line)}
.deflist li:first-child{border-top:0}
.deflist h4{margin:0 0 5px;font-size:1.02rem;font-weight:700}
.deflist p{margin:0;color:var(--muted);font-size:.94rem;line-height:1.55}
.willnot{display:grid;gap:12px}
@media(min-width:760px){.willnot{grid-template-columns:1fr 1fr}}
.willnot div{background:#fff;border:1px solid var(--line);border-radius:18px;padding:18px 20px;font-size:.95rem;line-height:1.55}
.willnot b{display:block;font-family:var(--mono);font-size:.64rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);margin-bottom:8px;font-weight:500}
.nav-links a.here{color:var(--navy);border-bottom-color:var(--gold)}

/* ---- interactive nebula hero background ---- */
.hero{background:var(--paper)}
.nebula-card{position:relative;z-index:1;aspect-ratio:5/4;min-height:340px}
#nebula{position:absolute;inset:-8%;overflow:hidden;
  -webkit-mask-image:radial-gradient(58% 58% at 50% 50%,#000 32%,transparent 78%);
  mask-image:radial-gradient(58% 58% at 50% 50%,#000 32%,transparent 78%)}
#nebula canvas{position:absolute;inset:0;width:100%!important;height:100%!important;display:block}

/* ---- dashboard v2 ---- */
.dash-top2{display:flex;align-items:center;gap:12px;margin-bottom:20px}
.dash-top2 .brand{font-size:1.2rem}
.dash-top2 .brand img{width:28px;height:28px}
.dash-top2 .tr-right{margin-left:auto;display:flex;align-items:center;gap:9px}
.spill{display:flex;align-items:baseline;gap:6px;background:#fff;border:1px solid var(--line);
  border-radius:99px;padding:7px 15px;font-family:var(--body);cursor:pointer;color:var(--ink);
  box-shadow:0 6px 14px -10px rgba(14,27,62,.4)}
.spill b{font-family:var(--disp);font-size:1rem;font-weight:700}
.spill span{font-size:.78rem;color:var(--muted)}
.enter{display:flex;align-items:center;gap:16px;width:100%;text-align:left;cursor:pointer;
  background:linear-gradient(100deg,#FBE3B0,#FDF1D8);border:1px solid rgba(243,179,71,.75);
  border-radius:18px;padding:16px 18px;color:var(--ink);font-family:var(--body);
  transition:transform .15s ease,box-shadow .15s ease;
  box-shadow:0 12px 26px -16px rgba(158,113,22,.5),0 2px 4px -2px rgba(14,27,62,.12)}
.enter:hover,.enter.sel{transform:translateY(-3px);box-shadow:0 18px 34px -22px rgba(158,113,22,.85)}
.enter .play{width:50px;height:50px;border-radius:50%;background:var(--gold);color:#fff;
  display:grid;place-items:center;font-size:1.15rem;flex:none}
.enter .lab{font-family:var(--mono);font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;
  color:#96701D;margin:0 0 3px}
.enter h4{margin:0;font-family:var(--disp);font-size:1.3rem;font-weight:600}
.enter .go{margin-left:auto;color:#96701D;font-size:1.15rem}
.dgrid{display:grid;gap:12px;margin-top:12px}
@media(min-width:780px){.dgrid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}}
.dcard .ct{margin:0 0 3px;font-family:var(--disp);font-size:1.12rem;font-weight:600}
.moodrow{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin:13px 0 10px}
.mface{background:#fff;border:1px solid var(--line);border-radius:12px;padding:9px 4px;
  display:flex;flex-direction:column;align-items:center;gap:5px;font-size:.72rem;
  color:var(--navy);transition:.15s}
.dcard:hover .mface{border-color:#C9D2E2}
.mface .e{font-size:1.05rem;line-height:1}
.dnote{font-size:.74rem;color:var(--muted);margin:0;line-height:1.5}
.sparkchip{margin-left:auto;background:#E4EDF7;border:1px solid #C4D6EA;border-radius:11px;
  padding:7px 11px;font-size:.74rem;font-weight:600;color:var(--navy);text-align:center;flex:none}
.sparkchip em{display:block;font-style:normal;font-weight:400;font-size:.68rem;color:var(--muted);margin-top:2px}
.chatnavy{background:linear-gradient(103deg,var(--navy),#22376B);border-color:transparent;
  color:#fff;display:flex;align-items:center;gap:14px}
.chatnavy .ico{background:rgba(255,255,255,.14);color:#fff;margin-bottom:0;flex:none}
.chatnavy .ct{color:#fff}
.chatnavy .d{color:rgba(255,255,255,.72)}
.chatnavy .go{margin-left:auto;color:rgba(255,255,255,.72);font-size:1.15rem}
.wroomhead{display:flex;align-items:baseline;gap:18px;margin:26px 0 2px;flex-wrap:wrap}
.wroomhead h3{margin:0;font-family:var(--disp);font-size:1.35rem;font-weight:600}
.wroomhead p{margin:0 0 0 auto;font-size:.8rem;color:var(--muted)}
.wcards{display:grid;gap:11px;grid-template-columns:1fr}
@media(min-width:700px){.wcards{grid-template-columns:repeat(3,minmax(0,1fr))}}
.wcard{background:#fff;border:1px solid var(--line);border-radius:16px;padding:15px;
  text-align:left;font-family:var(--body);cursor:pointer;color:var(--ink);position:relative;
  transition:.15s;display:flex;flex-direction:column;gap:8px;
  box-shadow:0 10px 22px -14px rgba(14,27,62,.34),0 2px 4px -2px rgba(14,27,62,.12)}
.wcard:hover,.wcard.sel{border-color:var(--navy);transform:translateY(-3px);
  box-shadow:0 16px 30px -20px rgba(14,27,62,.75)}
.wcard .ic{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;font-size:.95rem}
.wcard h4{margin:0;font-family:var(--disp);font-size:1.02rem;font-weight:600}
.wcard .d{margin:0;font-size:.8rem;color:var(--muted);line-height:1.5}
.wcard .cta{margin:auto 0 0;font-size:.76rem;color:var(--muted)}
.wcard.open{background:linear-gradient(120deg,#FEF7E8,#FCEBC9);border-color:rgba(243,179,71,.6)}
.wcard.open .cta{color:#96701D;font-weight:600}
.wcard .lk{position:absolute;top:11px;right:12px;font-size:.6rem;color:var(--muted)}
.wcard .openpill{position:absolute;top:10px;right:11px;font-family:var(--mono);font-size:.52rem;
  letter-spacing:.12em;padding:3px 8px;border-radius:99px;background:var(--gold);color:#fff}
.grouplab{font-family:var(--mono);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted);margin:16px 0 8px}
@media(min-width:860px){
  .dashsplit .wcards{grid-template-columns:repeat(3,minmax(0,1fr))}
  .dashsplit .moodrow{gap:6px}
}



@keyframes nCaret{0%,50%{opacity:1}51%,100%{opacity:0}}
  @keyframes nEq{from{transform:scaleY(.35)}to{transform:scaleY(1.15)}}@media(prefers-reduced-motion:reduce){[style*="nEq"]{animation:none!important}}

  /* hero wash continues up behind the nav */
  .nav{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
  .nav.stuck{background:rgba(251,250,246,.9);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
  .hero{overflow:visible;background:transparent}
  .nav .brand{font-size:1.74rem}
  .nav .brand img{width:40px;height:40px}
  .hero-glow{inset:-260px -10% auto -10%;height:1060px;
    background:
      radial-gradient(40% 28% at 34% 8%,rgba(214,228,250,.66),transparent 70%),
      radial-gradient(34% 24% at 56% 12%,rgba(199,217,245,.5),transparent 68%),
      radial-gradient(38% 30% at 76% 6%,rgba(143,169,220,.4),transparent 68%),
      radial-gradient(38% 30% at 96% 14%,rgba(214,228,250,.55),transparent 70%),
      radial-gradient(40% 30% at 30% 34%,rgba(243,179,71,.6),transparent 64%),
      radial-gradient(34% 26% at 6% 40%,rgba(127,191,160,.6),transparent 66%),
      radial-gradient(42% 34% at 54% 48%,rgba(127,191,160,.44),transparent 68%),
      radial-gradient(34% 28% at 44% 60%,rgba(243,179,71,.5),transparent 66%),
      radial-gradient(44% 36% at 18% 64%,rgba(143,169,220,.58),transparent 70%),
      radial-gradient(36% 32% at 74% 76%,rgba(127,191,160,.4),transparent 70%)}
  #ia-screen-wrap{position:relative;flex:1;min-height:0}
  #ia-screen{position:absolute;inset:0;overflow:hidden}
  @media(max-width:899px){#ia-screen-wrap{min-height:420px}}
  @keyframes ia-breathe{0%{transform:scale(.66)}25%{transform:scale(1)}50%{transform:scale(1)}75%{transform:scale(.66)}100%{transform:scale(.66)}}
  @keyframes ia-breathlab{0%{opacity:0}3%{opacity:1}22%{opacity:1}25%{opacity:0}100%{opacity:0}}
  #ia-breath{cursor:pointer;position:relative;display:grid;place-items:center}
  #ia-breath .orb{animation:ia-breathe 16s cubic-bezier(.42,0,.58,1) infinite}
  #ia-breath .bl{animation:ia-breathlab 16s linear infinite;opacity:0}
  #ia-breath .bl:nth-child(2){animation-delay:4s}
  #ia-breath .bl:nth-child(3){animation-delay:8s}
  #ia-breath .bl:nth-child(4){animation-delay:12s}
  #ia-breath.paused .orb,#ia-breath.paused .bl{animation-play-state:paused}
  #ia-breath .hint{opacity:0;transition:opacity .2s}
  #ia-breath:hover .hint{opacity:1}


  /* Founder film slot — replace the .filmslot div with:
     <video class="film" src="assets/founder.mp4" poster="assets/founder-poster.jpg" controls playsinline></video> */
  .filmwrap{position:sticky;top:96px}
  .story p{font-size:1.02rem}
  .filmslot,.film{width:100%;aspect-ratio:16/9;border-radius:20px;display:block}
  .filmslot{border:1.5px dashed rgba(14,27,62,.26);background:linear-gradient(170deg,#FFFDF7,#F1EEE2);display:grid;place-items:center;text-align:center;padding:26px}
  .film{object-fit:cover;background:#0E1B3E;box-shadow:0 24px 60px -28px rgba(14,27,62,.5)}
  .filmslot .play{width:62px;height:62px;border-radius:50%;background:var(--gold);display:grid;place-items:center;margin:0 auto 16px;box-shadow:0 12px 30px -12px rgba(14,27,62,.5)}
  .filmslot .play span{display:block;width:0;height:0;border-left:16px solid var(--navy);border-top:10px solid transparent;border-bottom:10px solid transparent;margin-left:4px}
  .filmslot p{font-size:.88rem;color:var(--muted);line-height:1.55;margin:0}
  .filmslot b{display:block;font-family:var(--disp);font-size:1.06rem;color:var(--navy);font-weight:500;margin-bottom:6px}
  .filmcap{margin-top:16px;font-size:.86rem;color:var(--muted);line-height:1.6}
  .story p{margin-bottom:18px}
  .story .ph{color:var(--muted);font-style:italic}
  .quotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:18px}
  .band-navy .qslot{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.16)}
  .band-navy .qslot .mk{color:var(--peri)}
  .band-navy .qslot .line{border-color:rgba(255,255,255,.24);color:rgba(255,255,255,.6)}
  .band-navy .qslot .attr{border-top-color:rgba(255,255,255,.14)}
  .band-navy .qslot .attr i{color:rgba(255,255,255,.5)}
  .qslot{background:#fff;border:1px solid rgba(14,27,62,.1);border-radius:18px;padding:26px 28px 24px;display:flex;flex-direction:column;gap:14px}
  .qslot .mk{font-family:var(--disp);font-size:2.6rem;line-height:.6;color:var(--sage)}
  .qslot .line{border:1.5px dashed rgba(14,27,62,.2);border-radius:12px;min-height:96px;display:grid;place-items:center;padding:16px;text-align:center;font-size:.85rem;color:var(--muted);line-height:1.5}
  .qslot .attr{display:flex;flex-direction:column;gap:5px;margin-top:auto;padding-top:6px;border-top:1px solid rgba(14,27,62,.08)}
  .qslot .attr i{font-style:normal;font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}


  /* shared nav treatment: wash continues up behind the nav */
  .nav{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
  .nav.stuck{background:rgba(251,250,246,.9);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
  .nav .brand{font-size:1.74rem}
  .nav .brand img{width:40px;height:40px}
  .pagehead{overflow:visible;background:transparent}
  .pagehead .glow{inset:-260px -10% auto -10%;height:1060px;
    -webkit-mask-image:linear-gradient(to bottom,#000 52%,transparent 64%);
    mask-image:linear-gradient(to bottom,#000 52%,transparent 64%);
    background:
      radial-gradient(40% 28% at 34% 8%,rgba(214,228,250,.66),transparent 70%),
      radial-gradient(34% 24% at 56% 12%,rgba(199,217,245,.5),transparent 68%),
      radial-gradient(38% 30% at 76% 6%,rgba(143,169,220,.4),transparent 68%),
      radial-gradient(38% 30% at 96% 14%,rgba(214,228,250,.55),transparent 70%),
      radial-gradient(40% 30% at 30% 34%,rgba(243,179,71,.6),transparent 64%),
      radial-gradient(34% 26% at 6% 40%,rgba(127,191,160,.6),transparent 66%),
      radial-gradient(42% 34% at 54% 48%,rgba(127,191,160,.44),transparent 68%),
      radial-gradient(34% 28% at 44% 60%,rgba(243,179,71,.5),transparent 66%),
      radial-gradient(44% 36% at 18% 64%,rgba(143,169,220,.58),transparent 70%),
      radial-gradient(36% 32% at 74% 76%,rgba(127,191,160,.4),transparent 70%)}


  html{scroll-padding-top:92px}
  .glance{display:grid;gap:0;border-top:1px solid var(--line)}
  .glance div{display:grid;gap:6px;padding:20px 0;border-bottom:1px solid var(--line)}
  @media(min-width:760px){.glance div{grid-template-columns:230px 1fr;gap:28px;align-items:baseline}}
  .glance b{font-family:var(--disp);font-weight:500;font-size:1.06rem;color:var(--navy)}
  .glance p{margin:0;color:var(--muted);font-size:.96rem;line-height:1.6}
  .prose p{max-width:68ch;margin-bottom:18px}
  .plainlist{list-style:none;margin:0;padding:0;display:grid;gap:10px;max-width:62ch}
  .plainlist li{position:relative;padding-left:20px;color:var(--muted);font-size:.96rem;line-height:1.6}
  .plainlist li:before{content:"";position:absolute;left:0;top:.62em;width:7px;height:1.5px;background:var(--gold)}
  .princ{display:grid;gap:14px}
  @media(min-width:800px){.princ{grid-template-columns:1fr 1fr;align-items:stretch}}
  .princ div{background:#fff;border:1px solid var(--line);border-top:3px solid var(--peri);
    border-radius:16px;padding:20px 22px;
    box-shadow:0 10px 22px -14px rgba(14,27,62,.34),0 2px 4px -2px rgba(14,27,62,.12);
    transition:transform .16s ease,box-shadow .16s ease}
  .princ div:hover{transform:translateY(-3px);
    box-shadow:0 18px 34px -20px rgba(14,27,62,.5),0 2px 4px -2px rgba(14,27,62,.12)}
  .princ b{display:block;font-family:var(--disp);font-weight:500;font-size:1.08rem;color:var(--navy);margin-bottom:6px}
  .princ span{color:var(--muted);font-size:.94rem;line-height:1.6}
  .band-navy .prose p{color:rgba(255,255,255,.78)}
  .band-navy .plainlist li{color:rgba(255,255,255,.72)}
  .sect{margin:0 0 14px;font-family:var(--disp);font-size:clamp(1.3rem,2.4vw,1.72rem);font-weight:500;letter-spacing:-.015em;color:var(--navy)}
  .band-navy .sect{color:#fff}
  .sect + .prose{margin-bottom:0}
  .blk{padding:38px 0;border-top:1px solid var(--line);display:grid;gap:14px}
  .blk:first-child{border-top:0;padding-top:0}
  .band-navy .blk{border-top-color:rgba(255,255,255,.16)}
  @media(min-width:900px){
    .blk{grid-template-columns:260px minmax(0,1fr);gap:0 48px;align-items:start}
    .bhead{position:sticky;top:96px}
  }
  .bhead .sect{margin-bottom:0}
  .bhead,.ruled{display:flex;align-items:flex-start;gap:15px}
  .bhead:before,.ruled:before{content:"";flex:none;width:30px;height:2px;
    background:var(--gold);border-radius:2px;align-self:flex-start}
  .bhead:before{margin-top:.78em}
  .ruled:before{margin-top:1.55rem}
  .ruled h2{margin:0}
  .idx{display:grid;gap:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:8px}
  @media(min-width:640px){.idx{grid-template-columns:1fr 1fr}}
  @media(min-width:980px){.idx{grid-template-columns:repeat(3,1fr)}}
  .idx a{display:flex;align-items:baseline;gap:11px;padding:13px 4px;text-decoration:none;
    color:var(--navy);font-size:.94rem;border-bottom:1px solid var(--line);transition:padding-left .16s,color .16s}
  .idx a:hover{padding-left:10px;color:var(--navy)}
  .idx a i{font-family:var(--mono);font-style:normal;font-size:.66rem;color:var(--muted);letter-spacing:.1em}
  @media(min-width:980px){.idx a:nth-last-child(-n+3){border-bottom:0}}
  .ret{display:flex;align-items:baseline;gap:14px;background:#fff;border:1px solid var(--line);
    border-radius:16px;padding:16px 20px;margin:0 0 18px;max-width:68ch}
  .band-navy .ret{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.2)}
  .ret b{font-family:var(--disp);font-size:2.1rem;font-weight:600;line-height:1;color:var(--gold);letter-spacing:-.02em;white-space:nowrap}
  .ret b i{font-style:normal;font-size:.95rem;font-weight:500;margin-left:5px}
  .ret span{font-size:.92rem;line-height:1.55;color:var(--muted)}
  .band-navy .ret span{color:rgba(255,255,255,.76)}
  .nosell{font-family:var(--disp);font-size:clamp(1.5rem,3vw,1.95rem);font-weight:600;line-height:1;
    color:var(--gold);margin:0 0 18px;letter-spacing:-.03em}
  .pull{font-family:var(--disp);font-size:clamp(1.18rem,2vw,1.42rem);color:var(--navy);line-height:1.45}
  .band-navy .pull{color:#fff}
  #commitment .prose p{max-width:none}
  #trust .prose p{max-width:none}
  #trust .prose b{font-weight:700}
  #commitment .plainlist{max-width:none}
  @media(min-width:900px){#commitment .plainlist{grid-template-columns:1fr 1fr;gap:10px 40px}}


  /* shared nav treatment: wash continues up behind the nav */
  .nav{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
  .nav.stuck{background:rgba(251,250,246,.9);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
  .nav .brand{font-size:1.74rem}
  .nav .brand img{width:40px;height:40px}
  .pagehead{overflow:visible;background:transparent}
  .pagehead .glow{inset:-260px -10% auto -10%;height:1060px;
    -webkit-mask-image:linear-gradient(to bottom,#000 44%,transparent 60%);
    mask-image:linear-gradient(to bottom,#000 44%,transparent 60%);
    background:
      radial-gradient(40% 28% at 34% 8%,rgba(214,228,250,.66),transparent 70%),
      radial-gradient(34% 24% at 56% 12%,rgba(199,217,245,.5),transparent 68%),
      radial-gradient(38% 30% at 76% 6%,rgba(143,169,220,.4),transparent 68%),
      radial-gradient(38% 30% at 96% 14%,rgba(214,228,250,.55),transparent 70%),
      radial-gradient(40% 30% at 30% 34%,rgba(243,179,71,.6),transparent 64%),
      radial-gradient(34% 26% at 6% 40%,rgba(127,191,160,.6),transparent 66%),
      radial-gradient(42% 34% at 54% 48%,rgba(127,191,160,.44),transparent 68%),
      radial-gradient(34% 28% at 44% 60%,rgba(243,179,71,.5),transparent 66%),
      radial-gradient(44% 36% at 18% 64%,rgba(143,169,220,.58),transparent 70%),
      radial-gradient(36% 32% at 74% 76%,rgba(127,191,160,.4),transparent 70%)}


/* ── site fixes (scripts/overrides.css) ── */
/* Fixes on top of the design export. scripts/import-bundle.mjs appends this file to the stylesheet,
   so they survive the next export. Each rule says what it fixes; scripts/check-site.mjs measures them. */

/* The hero and page-header glows are 10% wider than the screen on each side, so every page scrolled
   sideways (144px on desktop, 39px on a phone). Clip sideways only: the glow still runs up behind the nav. */
html,
body {
  overflow-x: clip;
}
.hero,
.pagehead {
  overflow-x: clip;
}

/* The FAQ heading never wrapped, which forced the whole FAQ to 440px on a 390px phone and pushed
   the answers off screen. */
@media (max-width: 699px) {
  #faq h2 {
    white-space: normal !important;
  }
}

/* The hero's text ran off the right edge of 320 and 360px phones (to 369px). Under 980px the headline and
   the "Meet Phineas" block share one column, and the voice wave's fixed 360px box set that column's minimum.
   The column now keeps the screen's width: the wave stays 360px and overflows into the clipped hero (at
   320px, 25px past the left edge and 15px past the right; the glow has faded to the page by then). The
   headline's two lines never wrap and ran past the column at every phone width; the third limit sizes them
   to the column itself, 5 to 8% smaller on phones (5.4% at 390, 7.7% at 320). The tagline is balanced so
   it never ends on a one-word line ("to."). From 980px the export's two-column layout already fits, so the
   desktop headline keeps its designed size. */
@media (max-width: 979px) {
  .hero-in > * {
    min-width: 0;
  }
  .hero-in > :first-child {
    container-type: inline-size;
  }
  .hero h1 {
    font-size: min(4.6rem, 11vw, 11.6cqi);
  }
  .hero-hand {
    text-wrap: balance;
  }
}

/* Contrast (WCAG 1.4.3, measured on the rendered pixels by scripts/check-site.mjs). Same hues, moved
   only as far as each needs to pass. */

/* "Whenever You Are" and the Story heading: the gradient ended in periwinkle, amber and bright gold,
   1.3:1 on the light page where large text needs 3:1. Still rises from green into gold. */
.l2,
[style*="background-clip:text"] {
  background-image: linear-gradient(94deg, #133826, #2b8362 26%, #4873c6 54%, #9b6b17 84%, #a1690a) !important;
}
/* The crisis numbers (988, HOME to 741741, 911) were #B5650F, 3.95:1 on the card. */
.crisis .m {
  color: #a35b0b !important;
}
/* Step 6's number: white on sage was 2.1:1. Navy, as on the gold steps. */
.stepbtn span[style*="background:var(--sage)"] {
  color: var(--navy) !important;
}
/* The breadcrumb and intro on Story, Privacy and 404 sit on the header glow: 3.8 to 4.1:1. */
.pagehead .crumbs,
.pagehead .crumbs a,
.pagehead .lede {
  color: #46547a !important;
}
/* Story's sage and periwinkle chips on navy: 4.0 to 4.4:1. */
[style*="background:rgba(127,191,160,.2);color:var(--sage)"] {
  color: #86c6a7 !important;
}
[style*="background:rgba(143,169,220,.2);color:var(--peri)"] {
  color: #a0b9e8 !important;
}
/* A gold caption inside the app demo's chat screen: 4.4:1. */
[style*="color:#8A6A2E"] {
  color: #866729 !important;
}

/* Log in was hidden under 560px, so a member on a phone had no way to the app's sign-in from the
   site. Both buttons stay, at least 44px tall. */
@media (max-width: 560px) {
  .nav-cta .btn-ghost {
    display: inline-flex;
  }
  .nav-cta {
    gap: 6px;
  }
  .nav-cta .btn-sm {
    padding: 9px 13px;
    font-size: 0.86rem;
    min-height: 44px;
  }
}
/* The wordmark keeps its designed size down to 375px and shrinks only where both buttons would not fit. */
@media (max-width: 374px) {
  .nav .brand {
    font-size: 1.3rem;
    gap: 8px;
  }
  .nav .brand img {
    width: 30px;
    height: 30px;
  }
}

/* The 404 page is shorter than a desktop screen: keep its footer at the bottom. The page is zoomed to
   75% from 1100px, so the minimum height is a third larger there. */
body.page-404 {
  display: flex;
  flex-direction: column;
  min-height: 100svh;
}
body.page-404 footer {
  margin-top: auto;
}
@media (min-width: 1100px) {
  body.page-404 {
    min-height: 133.33svh;
  }
}

/* The scrollbar is the app's (app.phineaschat.com, web #174 and #180; Arthur, 2026-10-22). The default was
   a 15px grey bar with arrow buttons on a near-white track. One thin bar: a navy thumb (#464F67, the app's
   navy at 75% on its paper) on a transparent track, so the page's own paper shows through; hovered or
   pressed, Chrome's own shade of it (#6F7688, as the app states it); no arrow buttons. Two paths, chosen
   per device by the mark the inline script at the top of each page's <body> puts on <html> (the app's
   lib/classic-scrollbar.ts, the same string; scripts/import-bundle.mjs writes it):
   - the standard path, where the mark is absent (Firefox, a Mac, every overlay-scrollbar platform):
     scrollbar-width thin and two colours.
   - the classic path, html[data-classic-scrollbar] (Windows and Linux Chrome and Edge): the standard
     properties stay at auto, because Chromium ignores the ::-webkit-scrollbar family on an element where
     either is set, and that family draws the same 10px bar (a 6px thumb inset 2px) with no buttons.
     Body is left out of that family: Chromium styles the window's bar from <body> before <html>, and the
     body is zoomed to 75% from 1100px, which drew the bar 7px wide. Without a rule on body the window's
     bar takes html's, at 10px on every width.
   On html and every descendant: scrollbar-width is not inherited. A mouse or trackpad only: a phone's bars
   float over the page and stay untouched. Never in forced colours: the system bar. scripts/check-site.mjs
   measures the drawn bar. */
:root {
  --ph-sb-thumb: #464f67;
  --ph-sb-thumb-hover: #6f7688;
}
@media (hover: hover) and (pointer: fine) and (forced-colors: none) {
  html:not([data-classic-scrollbar]),
  html:not([data-classic-scrollbar]) * {
    scrollbar-width: thin;
    scrollbar-color: var(--ph-sb-thumb) transparent;
  }

  html[data-classic-scrollbar]::-webkit-scrollbar,
  html[data-classic-scrollbar] :not(body)::-webkit-scrollbar {
    width: 10px;
    height: 10px;
    background-color: transparent;
  }
  html[data-classic-scrollbar]::-webkit-scrollbar-thumb,
  html[data-classic-scrollbar] :not(body)::-webkit-scrollbar-thumb {
    background-color: var(--ph-sb-thumb);
    background-clip: padding-box;
    border: 2px solid transparent;
    border-radius: 999px;
  }
  html[data-classic-scrollbar]::-webkit-scrollbar-thumb:vertical,
  html[data-classic-scrollbar] :not(body)::-webkit-scrollbar-thumb:vertical {
    height: 15px;
  }
  html[data-classic-scrollbar]::-webkit-scrollbar-thumb:horizontal,
  html[data-classic-scrollbar] :not(body)::-webkit-scrollbar-thumb:horizontal {
    width: 15px;
  }
  html[data-classic-scrollbar]::-webkit-scrollbar-thumb:hover,
  html[data-classic-scrollbar] :not(body)::-webkit-scrollbar-thumb:hover,
  html[data-classic-scrollbar]::-webkit-scrollbar-thumb:active,
  html[data-classic-scrollbar] :not(body)::-webkit-scrollbar-thumb:active {
    background-color: var(--ph-sb-thumb-hover);
  }
  html[data-classic-scrollbar]::-webkit-scrollbar-track,
  html[data-classic-scrollbar] :not(body)::-webkit-scrollbar-track,
  html[data-classic-scrollbar]::-webkit-scrollbar-corner,
  html[data-classic-scrollbar] :not(body)::-webkit-scrollbar-corner {
    background-color: transparent;
  }
  html[data-classic-scrollbar]::-webkit-scrollbar-button,
  html[data-classic-scrollbar] :not(body)::-webkit-scrollbar-button {
    display: none;
  }
}