:root{
  --board:#1e1d22;--board-2:#26252b;--board-3:#2f2e35;--chalk:#f1ede4;--dim:#ded9cf;--line:rgba(241,237,228,.28);--line-soft:rgba(241,237,228,.16);
  --coral:#e9573f;                 /* brand accent — text, underline, small marks */
  --coral-btn:#d76350;--coral-btn-600:#c4543f;   /* softer coral for button fills (matches mockup) */
  --yellow:#e8b84b;--blue:#6fa8d6;--orange:#e0863c;--green:#8ab86e;--teal:#7fb0c4;--purple:#b18fd0;
  --disp:'Cabin Sketch',cursive;   /* chalky, hand-drawn — all display + logo */
  --body:'Nunito',system-ui,sans-serif;
}
*{box-sizing:border-box} html{scroll-behavior:smooth}
body{margin:0;font-family:var(--body);color:var(--chalk);line-height:1.6;
  background:#191820 url("/assets/chalkboard.png") center top/cover fixed;}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(1200px 700px at 82% -6%,rgba(233,87,63,.09),transparent 60%),
    radial-gradient(1000px 620px at -6% 108%,rgba(111,168,214,.07),transparent 60%),
    linear-gradient(rgba(20,19,26,.40),rgba(20,19,26,.5));}
.wrap{max-width:1541px;margin:0 auto;padding:0 32px;position:relative}
a{color:inherit;text-decoration:none}
.coral{color:var(--coral)}
/* hand-drawn coral underline sits just below "ink" */
.ul{position:relative;white-space:nowrap}
.ul::after{content:"";position:absolute;left:0;right:-1px;bottom:-2px;height:7px;background:no-repeat center/100% 7px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='7'%3E%3Cpath d='M2 4.5 C 22 2,46 6,70 3.5 S 108 2,118 4.5' stroke='%23e9573f' stroke-width='3' fill='none' stroke-linecap='round'/%3E%3C/svg%3E")}

/* buttons — flat matte, softer coral, no gloss, no glow */
.btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--body);font-weight:800;border-radius:40px;padding:15px 32px;font-size:18px;cursor:pointer;transition:background .15s,box-shadow .15s;border:0;letter-spacing:.01em;white-space:nowrap}
.btn-primary{background:var(--coral-btn);color:#fff} .btn-primary:hover{background:var(--coral-btn-600)}
.btn-ghost{background:transparent;color:var(--chalk);box-shadow:inset 0 0 0 2px var(--line)} .btn-ghost:hover{box-shadow:inset 0 0 0 2px var(--chalk)}
.btn-sm{padding:10px 22px;font-size:16px}

/* nav */
nav{position:sticky;top:0;z-index:20;backdrop-filter:blur(7px);background:rgba(25,24,32,.66);border-bottom:1px solid var(--line-soft)}
nav .wrap{display:flex;align-items:center;gap:22px;height:70px}
.brand{font-family:var(--disp);font-weight:700;font-size:34px;letter-spacing:.5px;line-height:1}
nav .links{margin-left:auto;display:flex;align-items:center;gap:26px;color:var(--chalk);font-weight:700;font-size:18px}
nav .links a{opacity:.82} nav .links a:hover{opacity:1} nav .links a.on{opacity:1;color:var(--coral)}
/* hamburger — mobile only */
.navtoggle{display:none;margin-left:auto;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;padding:10px;background:transparent;border:0;cursor:pointer}
.navtoggle span{display:block;height:2.5px;border-radius:3px;background:var(--chalk);transition:transform .2s,opacity .2s}
@media(max-width:820px){
  .navtoggle{display:flex}
  nav .links{position:absolute;top:70px;left:0;right:0;margin:0;flex-direction:column;align-items:stretch;gap:0;
    background:rgba(22,21,28,.98);border-bottom:1px solid var(--line-soft);padding:8px 0 16px;display:none}
  nav.open .links{display:flex}
  nav .links a{padding:14px 32px;font-size:19px;opacity:.92}
  nav .links a.btn{margin:12px 32px 2px;justify-content:center;font-size:17px}
  nav.open .navtoggle span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
  nav.open .navtoggle span:nth-child(2){opacity:0}
  nav.open .navtoggle span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
}

/* section scaffolding — big chalk titles, no small eyebrows (match mockup) */
section{padding:104px 0;position:relative}
h2.h{font-family:var(--disp);font-weight:700;text-transform:uppercase;font-size:clamp(34px,4.6vw,54px);line-height:1;margin:0 auto 14px;text-align:center;max-width:22ch;text-wrap:balance;letter-spacing:.01em}
.sub{color:var(--dim);max-width:54ch;margin:0 auto 60px;text-align:center;font-size:18px}
.doodle{position:absolute;pointer-events:none;opacity:.9;z-index:0}
@media(max-width:820px){section{padding:76px 0}.doodle{display:none}}

/* hero — text + 16:9 video player */
.hero{padding:72px 0 64px}
.hero .grid{display:grid;grid-template-columns:1.3fr 1fr;gap:60px;align-items:center}
.hero h1{font-family:var(--disp);font-weight:700;text-transform:uppercase;font-size:clamp(38px,4.4vw,56px);line-height:1.02;margin:0 0 18px;letter-spacing:.01em;white-space:nowrap}
.hero p.lead{font-size:18px;color:var(--chalk);max-width:42ch;margin:0 0 26px}
.hero .note{color:var(--dim);font-size:18px;margin-top:16px}
.player{position:relative;width:100%;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:#26262a;
  box-shadow:0 26px 56px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.05)}
.player .poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 46%;background:#26262a}
.player .veil{position:absolute;inset:0;background:radial-gradient(120% 120% at 50% 40%,transparent 55%,rgba(0,0,0,.28))}
.player .play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:86px;height:86px;border-radius:50%;
  background:var(--coral-btn);display:grid;place-items:center;cursor:pointer;border:0;box-shadow:0 12px 30px rgba(0,0,0,.45);transition:transform .15s,background .15s}
.player .play:hover{transform:translate(-50%,-50%) scale(1.06);background:var(--coral-btn-600)}
.player .play svg{width:32px;height:32px;fill:#fff;margin-left:5px}
.player .bar{position:absolute;left:16px;right:16px;bottom:16px;height:5px;border-radius:4px;background:rgba(255,255,255,.26)}
.player .bar span{position:absolute;left:0;top:0;height:100%;width:32%;border-radius:4px;background:var(--coral-btn)}
.player .chip{position:absolute;top:13px;right:14px;font-family:var(--body);font-size:12px;font-weight:800;color:#fff;background:rgba(0,0,0,.5);padding:3px 9px;border-radius:7px;letter-spacing:.02em}
.player .pvideo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#26262a;display:block}
.player .sound{position:absolute;bottom:14px;right:14px;width:46px;height:46px;border-radius:50%;border:0;background:rgba(0,0,0,.5);display:grid;place-items:center;cursor:pointer;z-index:3;transition:background .15s}
.player .sound:hover{background:rgba(0,0,0,.72)}
.player .sound svg{width:22px;height:22px;fill:#fff}
@media(max-width:900px){
  .hero .grid{grid-template-columns:1fr;text-align:center;gap:30px}
  .hero p.lead{margin-left:auto;margin-right:auto}
  .hero .artcol{order:-1;max-width:520px;margin:0 auto;width:100%}
}

/* stats + share proof */
.stats{padding:56px 0 4px}
.statgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;max-width:1040px;margin:0 auto}
@media(max-width:760px){.statgrid{grid-template-columns:repeat(2,1fr)}}
.stat{text-align:center;padding:26px 14px;border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.015)}
.stat .num{font-family:var(--disp);font-weight:700;font-size:clamp(36px,4.6vw,52px);line-height:1;color:var(--coral);font-variant-numeric:tabular-nums}
.stat .lbl{margin-top:8px;color:var(--dim);font-size:16px;font-weight:700}
.sharerow{display:flex;align-items:center;justify-content:center;gap:20px;flex-wrap:wrap;margin:36px auto 0;color:var(--dim)}
.sharerow .lead{font-size:16px;font-weight:700}
.sharerow svg{width:26px;height:26px;fill:currentColor;opacity:.85;transition:opacity .15s}
.sharerow a:hover svg{opacity:1;color:var(--chalk)}

/* how it works — clean chalk-line step icons */
.steps{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:64px;max-width:none;margin:0 auto}
.step{text-align:center;position:relative;padding:0 10px}
.step .ic{height:200px;display:flex;align-items:center;justify-content:center;margin-bottom:10px}
.step .ic img{height:200px;width:200px;object-fit:contain}
.step h3{font-family:var(--disp);font-weight:700;text-transform:uppercase;font-size:25px;margin:0 0 4px;letter-spacing:.01em}
.step .n{color:var(--coral)}
.step p{color:var(--dim);margin:0 auto;font-size:18px;max-width:26ch}
.sarrow{position:absolute;top:66px;width:70px;height:34px;color:var(--coral);opacity:.9;z-index:2;fill:none;stroke:currentColor;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}
.sarrow.s1{left:calc(33.33% - 34px)} .sarrow.s2{left:calc(66.66% - 36px)}
@media(max-width:820px){
  .steps{grid-template-columns:1fr;gap:40px;max-width:320px}
  .sarrow{position:static;width:40px;margin:-26px auto -4px;transform:rotate(90deg)}
  .sarrow.s1,.sarrow.s2{left:auto}
}

/* explore styles — animated marquee carousel */
.marquee{position:relative;overflow:hidden;padding:10px 0;border-radius:8px}
.marquee::before,.marquee::after{content:"";position:absolute;top:0;bottom:0;width:80px;z-index:2;pointer-events:none}
.marquee::before{left:0;background:linear-gradient(90deg,#191820,rgba(25,24,32,0))}
.marquee::after{right:0;background:linear-gradient(270deg,#191820,rgba(25,24,32,0))}
.mtrack{display:flex;gap:32px;width:max-content;animation:scroll 70s linear infinite}
.marquee:hover .mtrack{animation-play-state:paused}
@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(calc(-50% - 16px))}}
.scard{flex:0 0 auto;width:440px;text-align:center;color:inherit}
.scard .thumb{border-radius:16px;overflow:hidden;aspect-ratio:16/9;box-shadow:0 16px 34px rgba(0,0,0,.42);transition:transform .2s,box-shadow .2s;border:1px solid var(--line-soft)}
.scard:hover .thumb{transform:translateY(-5px);box-shadow:0 22px 44px rgba(0,0,0,.5)}
.scard img{width:100%;height:100%;object-fit:cover;display:block}
.scard .ct{font-family:var(--disp);font-weight:700;text-transform:uppercase;font-size:22px;margin:15px 0 0;letter-spacing:.01em}
.scard span{color:var(--coral);font-size:18px;font-weight:700}
@media(prefers-reduced-motion:reduce){.mtrack{animation:none}.marquee{overflow-x:auto}}
@media(max-width:640px){.scard{width:300px}}

/* pricing — clean bordered cards */
.plans{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;max-width:none;margin:0 auto;align-items:stretch}
@media(max-width:1040px){.plans{grid-template-columns:repeat(2,1fr)}}@media(max-width:560px){.plans{grid-template-columns:1fr;max-width:380px}}
.plan{position:relative;display:flex;flex-direction:column;padding:40px 34px;text-align:center;border:2px solid var(--line);border-radius:20px;background:rgba(255,255,255,.015)}
.plan.hot{border-color:var(--coral);box-shadow:0 18px 40px rgba(233,87,63,.12)}
.plan .tagpop{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--coral);color:#fff;font-family:var(--body);font-weight:800;font-size:11px;letter-spacing:.08em;text-transform:uppercase;padding:4px 13px;border-radius:40px}.tagpop.soon{background:rgba(255,255,255,.08);color:#b7b3ab}
/* fixed zones so titles / prices / buttons line up across all three cards (no jumping) */
.p-head{padding-bottom:20px;border-bottom:1px dashed var(--line)}
.plan .nm{font-family:var(--disp);font-weight:700;text-transform:uppercase;font-size:26px;color:var(--coral);letter-spacing:.01em}
.plan .pr{font-family:var(--disp);font-weight:700;font-size:46px;margin:6px 0 0;font-variant-numeric:tabular-nums} .plan .pr small{font-family:var(--body);font-size:18px;font-weight:700;color:var(--dim)}
.p-body{flex:1 1 auto;list-style:none;padding:0;margin:22px auto;color:var(--dim);font-size:18px;text-align:left;max-width:270px}
.p-body li{padding:9px 0 9px 26px;position:relative}
.p-body li::before{content:"";position:absolute;left:2px;top:17px;width:8px;height:8px;border-radius:50%;background:var(--coral);box-shadow:0 0 0 3px rgba(233,87,63,.14)}
.p-foot{padding-top:20px;border-top:1px dashed var(--line)}
.p-foot .btn{width:100%;justify-content:center}
.p-head .cr{margin-top:12px;color:var(--dim);font-size:15px;font-weight:700}
.bonus{display:inline-block;margin-left:4px;font-size:12px;font-weight:800;color:var(--coral);background:rgba(233,87,63,.15);padding:1px 7px;border-radius:20px;vertical-align:middle}
.pricenote{text-align:center;color:var(--dim);margin:34px auto 0;max-width:68ch;font-size:16px}
.pricenote b{color:var(--chalk)}

/* final cta */
.final{text-align:center;padding:86px 0 94px}
.final h2{margin-bottom:12px}

/* footer */
footer{border-top:1px dashed var(--line-soft);padding:34px 0;margin-top:8px}
footer .wrap{display:flex;gap:20px;align-items:center;flex-wrap:wrap}
footer .brand{font-size:26px}
footer .cpy{color:var(--dim);font-size:18px}
footer .flinks{display:flex;gap:18px;font-weight:700;font-size:18px;color:var(--chalk)}
footer .flinks a{opacity:.72} footer .flinks a:hover{opacity:1}
footer .social{margin-left:auto;display:flex;gap:16px}
footer .social a{color:var(--dim);transition:color .15s} footer .social a:hover{color:var(--chalk)}
footer .social svg{width:26px;height:26px;fill:currentColor;display:block}
@media(max-width:640px){footer .social{margin-left:0;width:100%}}

/* waitlist modal */
.wl{position:fixed;inset:0;z-index:60;display:none;align-items:center;justify-content:center;padding:24px;background:rgba(12,11,16,.86);backdrop-filter:blur(4px)}
.wl.open{display:flex}
.wl .wlbox{position:relative;width:min(460px,100%);background:var(--board-2);border:1px solid var(--line);border-radius:20px;padding:38px 34px 34px;text-align:center;box-shadow:0 30px 70px rgba(0,0,0,.6)}
.wl .wlclose{position:absolute;top:14px;right:16px;width:38px;height:38px;border-radius:50%;border:0;background:transparent;color:var(--dim);font-size:26px;line-height:1;cursor:pointer;transition:color .15s}
.wl .wlclose:hover{color:var(--chalk)}
.wl h2{font-family:var(--disp);font-weight:700;text-transform:uppercase;font-size:30px;margin:0 0 10px;letter-spacing:.01em}
.wl p{color:var(--dim);font-size:16px;margin:0 auto 22px;max-width:34ch}
.wl form{display:flex;flex-direction:column;gap:12px}
.wl input{width:100%;padding:15px 18px;border-radius:12px;border:1px solid var(--line);background:rgba(255,255,255,.03);color:var(--chalk);font-family:var(--body);font-size:16px;font-weight:600;text-align:center}
.wl input:focus{outline:0;border-color:var(--coral)}
.wl input::placeholder{color:var(--dim)}
.wl form .btn{width:100%;justify-content:center}
.wl .wlmsg{margin-top:16px;font-weight:700;font-size:15px;min-height:1px}
.wl .wlmsg.ok{color:var(--green)} .wl .wlmsg.err{color:var(--coral)}
.wl .wldone{display:none} .wl.done .wlform{display:none} .wl.done .wldone{display:block}
.wl .wldone .tick{width:64px;height:64px;margin:0 auto 14px;border-radius:50%;background:rgba(138,184,110,.16);display:grid;place-items:center}
.wl .wldone .tick svg{width:32px;height:32px;fill:none;stroke:var(--green);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}

/* ===== content pages (styles / use cases / input methods) =====
   Shared page furniture so every family view inherits the same hero, body
   copy and card treatment instead of re-inventing inline styles per view. */
.phero{padding:56px 0 0}
.phero .in{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center}
.phero .eyebrow{color:var(--coral);font-weight:800;margin:0 0 10px;font-size:16px;text-transform:uppercase;letter-spacing:.04em}
.phero h1{font-family:var(--disp);font-weight:700;text-transform:uppercase;font-size:clamp(34px,4.4vw,52px);line-height:1.02;margin:0 0 16px;letter-spacing:.01em}
.phero p.lead{font-size:18px;color:var(--chalk);max-width:44ch;margin:0 0 26px}
.phero img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:14px;border:1px solid var(--line-soft);box-shadow:0 22px 48px rgba(0,0,0,.45)}
@media(max-width:900px){.phero .in{grid-template-columns:1fr;gap:32px}.phero p.lead{max-width:none}}

.prose{max-width:720px;margin:56px auto 0;color:var(--dim);font-size:18px}
.prose h2{font-family:var(--disp);font-weight:700;text-transform:uppercase;color:var(--chalk);font-size:28px;line-height:1.1;margin:38px 0 10px;letter-spacing:.01em}
.prose h3{font-family:var(--disp);font-weight:700;text-transform:uppercase;color:var(--chalk);font-size:22px;margin:28px 0 8px}
.prose p{margin:0 0 16px}
.prose ul,.prose ol{padding-left:22px;margin:0 0 16px}
.prose li{margin:7px 0}
.prose strong{color:var(--chalk)}
.prose a{color:var(--coral);font-weight:700}
.prose a:hover{text-decoration:underline}

.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
@media(max-width:900px){.grid3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.grid3{grid-template-columns:1fr}}

/* text card -- cards with no artwork (use cases, input methods, link lists) */
.tcard{display:block;padding:30px 28px;border:2px solid var(--line);border-radius:20px;background:rgba(255,255,255,.015);color:inherit;transition:border-color .15s,transform .2s,box-shadow .2s}
.tcard:hover{border-color:var(--coral);transform:translateY(-4px);box-shadow:0 18px 40px rgba(0,0,0,.35)}
.tcard .ct{font-family:var(--disp);font-weight:700;text-transform:uppercase;font-size:24px;margin:0 0 8px;letter-spacing:.01em}
.tcard p{color:var(--dim);margin:0;font-size:17px}

.backlink{text-align:center;margin-top:46px}
.backlink a{color:var(--dim);font-weight:700}
.backlink a:hover{color:var(--chalk)}

/* ===== mega-menu nav + 4-column footer (Stage B) ===== */
nav .links{gap:24px}
nav .links a.signin{font-weight:700}
.drop{position:relative;display:flex;align-items:center}
.drop>.dtoggle{display:inline-flex;align-items:center;gap:8px;padding:0;border:0;background:none;color:var(--chalk);font-family:var(--body);font-weight:700;font-size:18px;line-height:1;cursor:pointer;opacity:.82}
.drop>.dtoggle:hover{opacity:1}
.drop>.dtoggle svg{width:12px;height:8px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .18s}
.drop:hover>.dtoggle{opacity:1}
.drop:hover>.dtoggle svg{transform:rotate(180deg)}
/* invisible bridge: keeps :hover alive across the gap between button and panel */
.drop::after{content:"";position:absolute;left:0;right:0;top:100%;height:20px}
.dpanel{position:absolute;top:calc(100% + 18px);left:-20px;min-width:342px;padding:12px;border:1px solid var(--line);border-radius:18px;background:rgba(30,29,34,.985);box-shadow:0 26px 60px rgba(0,0,0,.55);display:none;z-index:30}
.drop:hover .dpanel,.drop:focus-within .dpanel{display:block}
.dpanel a{display:block;padding:11px 14px;border-radius:12px;opacity:1;transition:background .15s}
.dpanel a:hover{background:rgba(255,255,255,.06)}
.dpanel b{display:block;font-size:17px;font-weight:800;line-height:1.25}
.dpanel span{display:block;margin-top:2px;color:var(--dim);font-size:14.5px;font-weight:600;line-height:1.35}

@media(max-width:820px){
  .drop{display:block;width:100%}
  .drop::after{display:none}
  .drop>.dtoggle{width:100%;justify-content:space-between;padding:14px 32px;font-size:19px;opacity:.92}
  .drop.open>.dtoggle svg{transform:rotate(180deg)}
  .dpanel,.drop:hover .dpanel,.drop:focus-within .dpanel{display:none}
  .drop.open .dpanel{display:block;position:static;min-width:0;margin:0;padding:0 0 10px;border:0;border-radius:0;background:transparent;box-shadow:none}
  .dpanel a{padding:9px 32px 9px 44px}
  .dpanel span{display:none}
}

/* footer -- link columns above the original brand/copyright/social bar */
footer{padding:52px 0 34px}
footer .wrap{display:block}
.fgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;padding-bottom:38px;margin-bottom:26px;border-bottom:1px dashed var(--line-soft)}
.fcol h5{font-family:var(--disp);font-weight:700;text-transform:uppercase;font-size:20px;letter-spacing:.02em;margin:0 0 14px;color:var(--chalk)}
.fcol a{display:block;color:var(--dim);font-weight:600;font-size:17px;padding:5px 0;opacity:.86}
.fcol a:hover{opacity:1;color:var(--chalk)}
.fbot{display:flex;gap:20px;align-items:center;flex-wrap:wrap}
@media(max-width:820px){.fgrid{grid-template-columns:repeat(2,1fr);gap:26px}}
@media(max-width:480px){.fgrid{grid-template-columns:1fr}}

/* ===== blog (Stage E): article head, hero, listing cards ===== */
.ahead{max-width:780px;margin:0 auto;text-align:center}
.ahead .eyebrow{margin-bottom:12px}
.ahead h1{font-family:var(--disp);font-weight:700;text-transform:uppercase;font-size:clamp(32px,4.2vw,50px);line-height:1.04;margin:0 0 14px;letter-spacing:.01em;text-wrap:balance}
.ameta{color:var(--dim);font-size:16px;font-weight:700;margin:0}
.ahero{display:block;width:100%;max-width:980px;margin:44px auto 0;aspect-ratio:16/9;object-fit:cover;border-radius:16px;border:1px solid var(--line-soft);box-shadow:0 22px 48px rgba(0,0,0,.45)}
.tcard .date{display:block;color:var(--coral);font-size:14px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;margin-bottom:8px}
.prose blockquote{margin:22px 0;padding:2px 0 2px 20px;border-left:3px solid var(--coral);color:var(--chalk)}
.prose code{font-size:.92em;background:rgba(255,255,255,.06);padding:2px 6px;border-radius:6px}
.prose h2:first-child{margin-top:0}

/* ===== ported legal pages (Stage F) ===== */
.prose.legal{max-width:800px}
.prose .note{background:var(--board-2);border:1px solid var(--line);border-radius:12px;padding:14px 18px;margin:20px 0;font-size:16px;color:var(--dim)}
.prose table{width:100%;border-collapse:collapse;margin:18px 0;font-size:16px}
.prose th,.prose td{border:1px solid var(--line);padding:9px 12px;text-align:left;vertical-align:top}
.prose th{color:var(--chalk);font-weight:700}

/* ===== gallery page (Stage F: lifted from the static page) ===== */
/* header */
.ghead{text-align:center;padding:78px 0 8px}
.ghead h1{font-family:var(--disp);font-weight:700;text-transform:uppercase;font-size:clamp(38px,5vw,60px);line-height:1;margin:0 0 16px;letter-spacing:.01em}
.ghead p{color:var(--dim);max-width:56ch;margin:0 auto;font-size:19px}
.ghead .tag{display:inline-block;margin-bottom:18px;font-weight:800;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--coral);border:1px solid rgba(233,87,63,.4);border-radius:40px;padding:6px 16px}

/* grid */
.gsec{padding:44px 0 96px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:32px}
@media(max-width:520px){.grid{grid-template-columns:1fr}}
.card{text-align:left;cursor:pointer;background:none;border:0;padding:0;color:inherit;font:inherit}
.card .thumb{position:relative;border-radius:16px;overflow:hidden;aspect-ratio:16/9;box-shadow:0 16px 34px rgba(0,0,0,.42);border:1px solid var(--line-soft);transition:transform .2s,box-shadow .2s;background:#26262a}
.card:hover .thumb,.card:focus-visible .thumb{transform:translateY(-5px);box-shadow:0 24px 46px rgba(0,0,0,.55)}
.card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.card .veil{position:absolute;inset:0;background:radial-gradient(120% 120% at 50% 42%,transparent 52%,rgba(0,0,0,.30))}
.card .play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:66px;height:66px;border-radius:50%;background:var(--coral-btn);display:grid;place-items:center;box-shadow:0 10px 24px rgba(0,0,0,.45);transition:transform .18s,background .18s}
.card:hover .play,.card:focus-visible .play{transform:translate(-50%,-50%) scale(1.08);background:var(--coral-btn-600)}
.card .play svg{width:26px;height:26px;fill:#fff;margin-left:4px}
.card .chip{position:absolute;top:12px;left:12px;font-size:12px;font-weight:800;color:#fff;background:rgba(0,0,0,.5);padding:4px 10px;border-radius:8px;letter-spacing:.02em}
.card .ct{font-family:var(--disp);font-weight:700;text-transform:uppercase;font-size:22px;margin:15px 2px 0;letter-spacing:.01em;line-height:1.05}
.card .style{color:var(--coral);font-size:16px;font-weight:700;margin:3px 2px 0}

/* lightbox */
.lb{position:fixed;inset:0;z-index:50;display:none;align-items:center;justify-content:center;padding:24px;background:rgba(12,11,16,.86);backdrop-filter:blur(4px)}
.lb.open{display:flex}
.lb .lbwrap{position:relative;width:min(1040px,100%)}
.lb .box{position:relative;width:100%;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:#000;box-shadow:0 30px 70px rgba(0,0,0,.6)}
.lb video{width:100%;height:100%;display:block;background:#000}
.lb .close{position:absolute;top:-18px;right:-18px;width:46px;height:46px;border-radius:50%;border:0;background:var(--coral-btn);color:#fff;font-size:24px;font-weight:800;cursor:pointer;display:grid;place-items:center;box-shadow:0 8px 20px rgba(0,0,0,.5);z-index:3;transition:background .15s}
.lb .close:hover{background:var(--coral-btn-600)}
.lb .lbtitle{display:block;text-align:center;margin-top:16px;font-family:var(--disp);font-weight:700;text-transform:uppercase;font-size:22px;color:var(--chalk);letter-spacing:.01em}
@media(max-width:560px){.lb{padding:16px}.lb .close{top:-14px;right:-6px}.lb .lbtitle{font-size:19px;margin-top:12px}}

/* cta strip */
.gcta{text-align:center;padding:14px 0 86px}
.gcta h2{font-family:var(--disp);font-weight:700;text-transform:uppercase;font-size:clamp(30px,4vw,46px);margin:0 0 10px}
.gcta p{color:var(--dim);margin:0 auto 24px;max-width:52ch;font-size:18px}

/* ===== standards pass (task #2861 remediation) ===== */
/* Index pages must carry exactly one H1 and it is the page title, so the chalk
   title treatment has to work on h1 as well as h2. */
h1.h{font-family:var(--disp);font-weight:700;text-transform:uppercase;font-size:clamp(34px,4.6vw,54px);line-height:1;margin:0 auto 14px;text-align:center;max-width:22ch;text-wrap:balance;letter-spacing:.01em}

/* answer-first lede block: visible, quotable, 40-60 words */
.answer{max-width:760px;margin:34px auto 0;padding:18px 22px;border:1px solid var(--line);border-left:3px solid var(--coral);border-radius:12px;background:rgba(255,255,255,.02);color:var(--chalk);font-size:18px;line-height:1.55}
.answer strong{color:var(--coral)}
.ahead + .answer{margin-top:26px}

/* FAQ block (the partial also emits its own FAQPage JSON-LD) */
.faq{max-width:800px;margin:0 auto;display:grid;gap:18px}
.faqitem{border:1px solid var(--line);border-radius:16px;padding:22px 24px;background:rgba(255,255,255,.015)}
.faqitem h3{font-family:var(--disp);font-weight:700;text-transform:uppercase;font-size:21px;line-height:1.15;margin:0 0 8px;letter-spacing:.01em}
.faqitem p{color:var(--dim);margin:0;font-size:17px}

/* Footer column titles stop being h5: sitting after an h2 they broke the heading
   hierarchy on all 41 pages (auditor U12). Same look, no heading level. */
.fcol .fh{font-family:var(--disp);font-weight:700;text-transform:uppercase;font-size:20px;letter-spacing:.02em;margin:0 0 14px;color:var(--chalk)}
.aauthor{color:var(--chalk)}

/* ===== layout system (task #2862) =====
   The theme grew one block at a time and each block brought its own width and
   its own margins, so a reader crossing the site met five different content
   widths (720 / 760 / 780 / 800 / 1541) and vertical gaps that ranged from
   104px to zero depending on which view happened to override them inline.
   Everything below is expressed as tokens; per-block numbers are gone. */
:root{
  --wrap:1440px;        /* outer container, one value */
  --gutter:32px;
  --measure:760px;      /* the single reading width for any text column */
  --sp-section:104px;   /* rhythm between sections */
  --sp-block:56px;      /* gap between blocks inside a section */
  --sp-tight:28px;
}
@media(max-width:1024px){:root{--sp-section:84px;--gutter:24px}}
@media(max-width:820px){:root{--sp-section:68px;--sp-block:40px;--sp-tight:20px;--gutter:20px}}

.wrap{max-width:var(--wrap);padding:0 var(--gutter)}
section{padding:var(--sp-section) 0}
/* A section that continues the one above it, instead of an inline padding-top:0
   sprinkled through the views. */

/* One reading width, everywhere text is read as a column. */
.prose,.prose.legal,.answer,.ahead,.faq,.pricenote{max-width:var(--measure)}
.prose{margin:var(--sp-block) auto 0}
.answer{margin:var(--sp-block) auto 0}
.faq{margin:0 auto}
.pricenote{margin-left:auto;margin-right:auto}
.ahero{margin:var(--sp-block) auto 0}
.backlink{margin-top:var(--sp-block)}
.answer + h2.h,.ahead + .grid3{margin-top:var(--sp-block)}
.sub{margin-bottom:var(--sp-block)}
.phero{padding:var(--sp-section) 0 0}

/* Cards fill their grid cell; the width lived as an inline style before. */
.grid3 .scard{width:auto}
.cta-row{text-align:center;margin-top:var(--sp-block)}
.pagelinks{text-align:center;margin-top:var(--sp-block)}
.pagelinks a{padding:0 10px;color:var(--dim);font-weight:700}
.pagelinks a.on{color:var(--coral)}
.searchform{max-width:520px;margin:0 auto var(--sp-block);display:flex;gap:12px}
.searchform input{flex:1;padding:14px 18px;border-radius:12px;border:1px solid var(--line);background:rgba(255,255,255,.03);color:var(--chalk);font-family:var(--body);font-size:16px;font-weight:600}
.searchform input:focus{outline:0;border-color:var(--coral)}

/* Responsive: the grids collapse on the same breakpoints as the type scale, so
   nothing changes shape halfway between two of them. */
@media(max-width:1024px){.grid3{gap:24px}}
@media(max-width:900px){.grid3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.grid3{grid-template-columns:1fr}}
@media(max-width:560px){.searchform{flex-direction:column}}

/* ===== fill balance (owner review of /use-cases/education) =====
   The complaint: the container fills unevenly. Card grids ran the full width
   while the text column and the FAQ sat as a narrow strip in the middle.
   Two sides of the fix, because a text line cannot simply be stretched: at this
   size a 1280px line is unreadable, the eye loses the start of the next line.
   So the container comes in, the measure goes out, and the FAQ uses the width
   it was wasting. */
:root{--wrap:1280px;--measure:820px}
@media(max-width:1024px){:root{--gutter:24px}}

/* The FAQ is a list, not a stack of cards. Two columns on desktop so it fills
   the container, and hairline rules instead of borders so the page has two
   textures rather than the same rounded box repeated to the footer. */
.faq{max-width:none;display:grid;grid-template-columns:repeat(2,1fr);gap:0 40px}
.faqitem{border:0;border-top:1px solid var(--line);border-radius:0;background:none;padding:22px 0 24px}
.faqitem h3{font-size:20px;margin:0 0 6px}
@media(max-width:900px){.faq{grid-template-columns:1fr;gap:0}}

/* Hero header of a content page: same centred pattern as articles and /pricing,
   so a visitor never meets two alignment axes on one page. */
.ahead p.lead{max-width:58ch;margin:0 auto 22px;font-size:18px;color:var(--chalk)}
.ahead .ameta{margin-bottom:22px}
.ahead .btn{margin-top:4px}
.phero .ahero{margin-top:44px}

/* ===== content pages fill the container top to bottom =====
   Owner review, second pass: the top of the page was narrower than the bottom.
   The reading column stays at --measure because a 1280px line is unreadable,
   so the space next to it now carries the rail, and hero art spans the
   container. Result: hero band, two-column body, wide sections, all the same
   width. */
.ahero{max-width:none;width:100%;margin-top:40px}
.phero .ahead{margin-top:8px}

.pbody{display:grid;grid-template-columns:minmax(0,var(--measure)) 320px;gap:48px;align-items:start;justify-content:center;margin-top:var(--sp-block)}
.pbody .pmain{min-width:0}
.pbody .pmain .prose,.pbody .pmain .answer{max-width:none;margin-left:0;margin-right:0}
.pbody .pmain .answer{margin-top:0}
.pbody .pmain .prose{margin-top:32px}

.prail{position:sticky;top:96px;display:grid;gap:16px}
.railcard{border:1px solid var(--line);border-radius:16px;padding:22px 24px;background:rgba(255,255,255,.015)}
.railcard-cta{border-color:rgba(233,87,63,.45)}
.railcard .rt{font-family:var(--disp);font-weight:700;text-transform:uppercase;font-size:19px;letter-spacing:.01em;margin-bottom:8px}
.railcard p{color:var(--dim);font-size:16px;margin:0 0 14px}
.railcard .btn{width:100%;justify-content:center}
.rlist{list-style:none;padding:0;margin:0;display:grid;gap:9px}
.rlist a{color:var(--dim);font-weight:700;font-size:16px}
.rlist a:hover{color:var(--chalk)}
.rmore{color:var(--coral);font-weight:800;font-size:16px}

@media(max-width:1024px){
  .pbody{grid-template-columns:1fr;max-width:var(--measure);margin-left:auto;margin-right:auto;gap:36px}
  .prail{position:static;grid-template-columns:repeat(2,1fr)}
  .railcard-cta{grid-column:1 / -1}
}
@media(max-width:640px){.prail{grid-template-columns:1fr}}

/* ===== one gap between any two sections =====
   Reported: the gaps above and below the "More use cases" block differ. They
   did. .phero carried padding-bottom:0 while the section after it carried
   padding-top:0, so that boundary collapsed to nothing, while the next
   boundary still had a full --sp-section from the block above it.

   The rhythm is now a rule rather than a per-block decision: every section
   pads top and bottom, and a section that follows another drops its top
   padding. Every boundary is then exactly one --sp-section, from the section
   above. .sec-join stays only so existing markup keeps working; it no longer
   decides anything. */
section{padding:var(--sp-section) 0}
.phero{padding:var(--sp-section) 0}

/* ===== section rhythm, one-sided =====
   The previous attempt used `section + section { padding-top: 0 }`. That breaks
   whenever something sits between two sections in the markup: the FAQ partial
   emits its FAQPage JSON-LD as a <script> right after its section, and a script
   is an element, so the adjacent-sibling rule stopped matching and the next
   section kept a top padding that added to the previous section's bottom one.
   Result: a double gap in some places and none in others.

   One-sided rhythm instead: a section only ever pads its top, so the gap
   between any two sections is exactly one --sp-section no matter what sits
   between them in the source. The last section pads its bottom so the footer
   is not glued to it. Nothing here depends on sibling order. */
section{padding:var(--sp-section) 0 0}
.phero{padding:var(--sp-section) 0 0}
.faqsec{padding-top:var(--sp-section)}
/* neutralised: gaps are no longer decided per block */

/* ===== rhythm belongs to the heading (owner call) =====
   Sections no longer decide their own spacing. One unit --sp-h: the gap above a
   section heading is 1x, the gap below the heading block (heading, or heading
   plus its subtitle) is 2x. Sections keep only that 1x on top so a section
   without a heading still breathes, and the last one pads its bottom so the
   footer is not glued to it.
   This replaces the earlier --sp-section padding, which produced a gap that
   depended on which blocks happened to be neighbours. */
:root{--sp-h:52px}
@media(max-width:1024px){:root{--sp-h:44px}}
@media(max-width:820px){:root{--sp-h:34px}}

section{padding:var(--sp-h) 0 0}

h1.h,h2.h{margin-top:0;margin-bottom:calc(var(--sp-h) * 2)}
/* when a subtitle follows the heading, the pair is the block: the heading sits
   tight to its subtitle and the subtitle carries the 2x below */
h1.h:has(+ .sub),h2.h:has(+ .sub){margin-bottom:12px}
.sub{margin-bottom:calc(var(--sp-h) * 2)}

/* the body grid and the article head follow the same unit */
.pbody{margin-top:calc(var(--sp-h) * 1.2)}
.ahero{margin-top:calc(var(--sp-h) * 0.8)}
.backlink,.cta-row,.pagelinks{margin-top:calc(var(--sp-h) * 1.2)}

/* ===== headings, one style everywhere (owner call) =====
   Two kinds of heading, two jobs.

   1. Section headings (h1.h, h2.h, the .ahead h1 on content pages) open a
      section. The section already gives them 1x above, so they carry no top
      margin of their own and a single --sp-h below. If a subtitle, byline or
      lede follows, the heading sits tight to it and that element carries the
      single gap instead, because the pair is one block.

   2. Headings inside body copy (.prose h2/h3) have no section boundary above
      them, so they keep 1x on top and sit tight to the paragraph they
      introduce. Removing the top gap there would glue them to the paragraph
      above, which is the one place the rule has to differ. */
h1.h,h2.h,.ahead h1{margin-top:0;margin-bottom:var(--sp-h)}
h1.h:has(+ .sub),h2.h:has(+ .sub),.ahead h1:has(+ .ameta),.ahead h1:has(+ .lead){margin-bottom:12px}
.sub,.ahead .lead,.ahead .ameta{margin-bottom:var(--sp-h)}
.ahead .eyebrow{margin-bottom:12px}
.ahead .lead:has(+ .ameta){margin-bottom:12px}

.prose h2{margin:var(--sp-h) 0 10px}
.prose h3{margin:calc(var(--sp-h) * 0.6) 0 8px}
.prose > :first-child{margin-top:0}
.prose h2:first-child,.prose h3:first-child{margin-top:0}

/* card, rail and FAQ titles are labels, not section headings: they stay tight */
.tcard .ct,.scard .ct,.card .ct{margin-bottom:8px}
.railcard .rt{margin-bottom:8px}
.faqitem h3{margin:0 0 6px}

/* ===== the tight gap scales with the heading =====
   12px under an h1 set at ~50px reads as no gap at all, which is what the owner
   saw on /use-cases/education. The pair-tight value is not one number: it is
   proportional to the type it sits under. */
.ahead h1:has(+ .lead),.ahead h1:has(+ .ameta),.ahead h1:has(+ .answer){margin-bottom:var(--gap-h1)}
h1.h:has(+ .sub),h2.h:has(+ .sub){margin-bottom:16px}
.ahead .lead:has(+ .ameta){margin-bottom:16px}
.ahead .eyebrow{margin-bottom:14px}

:root{--gap-h1:30px}
@media(max-width:820px){:root{--gap-h1:22px}}

/* =============================================================
   SPACING POLICY -- the single source for vertical space.
   Supersedes every spacing rule above it in this file.

   The bug it fixes: blocks such as .answer set their own bottom margin (or
   none), so a block could sit flush against the next section. Individual
   elements must not decide their own gaps.

   Model, two levels only:
     1. SECTION rhythm: a section pads its top with --s5. The last section pads
        its bottom too, so the footer is not glued to it. Nothing else.
     2. FLOW inside a section: a block gets its gap from the sibling above it,
        not from itself. `.wrap > * + *` carries --s4. Two exceptions, because
        a heading and its subtitle are one block: after a heading or an eyebrow
        the gap is --s2, and the heading block ends with a normal --s4.

   Consequences to keep in mind when adding markup:
     - Do not write margin or padding on a block. Put it in the flow.
     - A new direct child of `section > .wrap` is spaced automatically.
     - Text inside .prose keeps its own typographic margins; that is copy, not
       layout.
   ============================================================= */
:root{
  --s1:12px;   /* inside a line: label to value */
  --s2:20px;   /* inside a block: heading to its subtitle */
  --s3:32px;   /* inside a block: secondary gap */
  --s4:52px;   /* between blocks in a section */
  --s5:88px;   /* between sections */
}
@media(max-width:1024px){:root{--s4:44px;--s5:72px}}
@media(max-width:820px){:root{--s2:16px;--s3:24px;--s4:34px;--s5:56px}}

/* 1. section rhythm */
section,.phero,.sec-join,.faqsec{padding:var(--s5) 0 0}
section:last-of-type{padding-bottom:var(--s5)}

/* 2. flow: the gap belongs to the sibling above, never to the block itself */
section > .wrap > *{margin-top:0;margin-bottom:0}
section > .wrap > * + *{margin-top:var(--s4)}
section > .wrap > .eyebrow + *,
section > .wrap > h1 + *,
section > .wrap > h2 + *{margin-top:var(--s2)}

/* the page header block uses the same flow at its own scale */
.ahead > *{margin-top:0;margin-bottom:0}
.ahead > * + *{margin-top:var(--s2)}
.ahead > .lead + *,.ahead > .ameta + *{margin-top:var(--s3)}

/* blocks that used to carry their own margins are now silent */
.answer,.prose,.pbody,.grid3,.faq,.ahero,.cta-row,.backlink,.pagelinks,.searchform,.pricenote,.sub,.steps,.plans,.marquee{margin-top:0;margin-bottom:0}
.answer,.prose{margin-left:auto;margin-right:auto}
.pbody .pmain .prose{margin-left:0;margin-right:0;margin-top:var(--s3)}

/* copy inside .prose keeps typographic spacing: that is text, not layout */
.prose p{margin:0 0 16px}
.prose h2{margin:var(--s4) 0 var(--s1)}
.prose h3{margin:var(--s3) 0 var(--s1)}
.prose > :first-child{margin-top:0}
.prose > :last-child{margin-bottom:0}

/* ===== the heading block ends with the same gap that opens the section =====
   With the section gap at --s5, a heading followed by only --s4 read as
   top-heavy: more air above the title than under it. The rule now is simple to
   state and to keep: whatever opens a section closes its heading block.

     section top      --s5
     heading -> sub   --s2   (one block, stays tight)
     heading block -> content   --s5
     block -> block   --s4

   Only the gap under the heading block changes; blocks inside a section still
   sit --s4 apart, so the section does not turn into a list of islands. */
section > .wrap > h1 + :not(.sub),
section > .wrap > h2 + :not(.sub),
section > .wrap > .sub + *{margin-top:var(--s5)}

/* the page header block follows the same shape one step down the scale */
.ahead > .lead + *,.ahead > .ameta + *{margin-top:var(--s4)}