/* Candid Intelligence site — dark-first, single theme by the client's direction.
   Layout: 1240px column, generous vertical rhythm, hairline panels on black. */
:root{
  --bg:#f6f4ee;
  --panel:#edeae2;
  --panel-2:#e6e2d8;
  --line:#dcd7cc;
  --line-soft:#e7e3da;
  --fg:#121212;
  --fg-2:#4d4a44;
  --fg-3:#807b72;
  --fg-4:#b5afa3;
  --accent:#7a1f2b;
  --accent-hover:#651823;
  --accent-ink:#ffffff;
  --ok:#2f9b57;
  --dash:#b9b3a6;
  --ink:#121212;
  --font:"Geist",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --display:"Instrument Serif",Georgia,"Times New Roman",serif;
  --wrap:1240px;
  --r:12px;
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}

html{background:var(--bg)}
body{margin:0;background:transparent;color:var(--fg);position:relative;z-index:0;font-family:var(--font);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit;text-decoration:none}

img{max-width:100%;display:block}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3{margin:0;font-weight:400;letter-spacing:-.03em;text-wrap:balance}
p{margin:0}
:focus-visible{outline:2px solid var(--fg);outline-offset:3px;border-radius:4px}
.wrap{max-width:var(--wrap);margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3)}
.h1{font-family:var(--display);font-size:clamp(40px,6vw,84px);line-height:1;letter-spacing:-.015em;font-weight:400}
.h2{font-family:var(--display);font-size:clamp(34px,4vw,56px);line-height:1.04;letter-spacing:-.01em}
.lead{font-size:clamp(17px,1.4vw,20px);line-height:1.45;color:var(--fg-2);max-width:62ch}
.muted{color:var(--fg-3)}
.section{padding-block:clamp(72px,9vw,150px)}
.section.tight{padding-block:clamp(48px,6vw,96px)}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:10px;height:44px;padding:0 20px;border-radius:999px;border:1px solid var(--fg);color:var(--fg);font-size:14px;font-weight:500;letter-spacing:.01em;white-space:nowrap;transition:background .15s ease,color .15s ease,border-color .15s ease}
.btn:hover{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn .arr{transition:transform .15s ease}
.btn:hover .arr{transform:translateX(3px)}
.btn.solid{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.solid:hover{background:var(--accent-hover);border-color:var(--accent-hover);color:#fff}
.btn.lg{height:44px;padding:0 22px;font-size:14px}
.btn.ghost{border-color:var(--line);color:var(--fg)}
.btn.ghost:hover{border-color:var(--fg);background:var(--fg);color:#fff}

/* Nav: three floating pills (logo · menu · CTA), like the reference */
body{padding-top:calc(140px + env(safe-area-inset-top,0px))}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--bg)}
.nav{position:fixed;top:calc(52px + env(safe-area-inset-top,0px));left:0;right:0;z-index:50;pointer-events:none;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.nav .bar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px}
.nav .bar.wrap{max-width:none;padding-left:0;padding-right:0}
.pill{pointer-events:auto;height:52px;border-radius:999px;background:rgba(255,255,255,.94);backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%);border:1px solid rgba(0,0,0,.06);box-shadow:0 10px 30px rgba(20,18,10,.08)}
.brand.pill{justify-self:start;display:inline-flex;align-items:center;justify-content:center;width:52px;padding:0}
.brand .logo{width:26px;height:26px;object-fit:contain;display:block}
.foot .brand .logo{width:34px;height:34px}
.menu.pill{justify-self:center;display:flex;align-items:center;gap:6px;padding:0 14px;margin:0;list-style:none}
.menu > li{list-style:none;position:relative}
.menu .top{display:inline-flex;align-items:center;gap:9px;height:44px;padding:0 16px;border-radius:999px;font-size:16px;color:var(--fg)}
.menu .top:hover,.menu li.open .top{color:var(--fg);background:rgba(0,0,0,.05)}
.menu .top svg{width:11px;height:11px;transition:transform .15s;opacity:.8}
.menu li.open .top svg{transform:rotate(180deg)}
.nav .right{justify-self:end;pointer-events:auto;display:flex;align-items:center;gap:10px}
.nav .right .btn{height:44px;padding:0 20px;font-size:14px;background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.nav .right .btn:hover{background:var(--accent-hover);border-color:var(--accent-hover);color:#fff}
.dd{position:absolute;top:calc(100% + 18px);left:-8px;min-width:300px;background:#fff;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid rgba(0,0,0,.08);border-radius:18px;padding:8px;display:none;box-shadow:0 20px 50px rgba(20,18,10,.14)}
.dd::before{content:"";position:absolute;top:-18px;left:0;right:0;height:18px}
.menu li.open .dd{display:block}
.dd a,.dd .row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 12px;border-radius:10px;font-size:15px}
.dd a:hover{background:rgba(0,0,0,.05)}
.dd .row{color:var(--fg-3);cursor:default}
.dd .row .name{color:var(--fg-2)}
.badge{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-3);white-space:nowrap}
.badge.ready{color:var(--ok)}
.badge .dot{width:7px;height:7px;border-radius:50%;background:currentColor;box-shadow:0 0 0 3px rgba(47,155,87,.18)}
.badge .half{width:11px;height:11px;border-radius:50%;border:1.5px solid currentColor;background:linear-gradient(90deg,currentColor 50%,transparent 50%)}
.badge .spin{width:11px;height:11px;border-radius:50%;border:1.5px solid rgba(0,0,0,.14);border-top-color:var(--fg-2);animation:spin 1.1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.burger{display:none;width:52px;height:52px;align-items:center;justify-content:center;border-radius:999px;background:rgba(255,255,255,.94);border:1px solid rgba(0,0,0,.06);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.burger svg{width:18px;height:18px}
.mobile{display:none;pointer-events:auto;margin:10px 0 0;background:#fff;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid rgba(0,0,0,.08);border-radius:24px;box-shadow:0 18px 50px rgba(20,18,10,.14)}
.mobile.wrap{max-width:none;padding-left:22px;padding-right:22px}
.mobile[data-open="true"]{display:block}
.mobile .group{padding:16px 0;border-bottom:1px solid var(--line-soft)}
.mobile .group .eyebrow{margin-bottom:10px}
.mobile a,.mobile .row{display:flex;justify-content:space-between;align-items:center;padding:12px 0;font-size:16px}
.mobile .row{color:var(--fg-2)}

/* Hero */
.hero{position:relative;height:min(78vh,760px);min-height:520px;overflow:hidden;background:#f6f4ee}
.hero .vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;filter:invert(1) contrast(1.05);mix-blend-mode:multiply;}
.hero .edge{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(246,244,238,1) 0%,rgba(246,244,238,0) 12%,rgba(246,244,238,0) 88%,rgba(246,244,238,1) 100%),linear-gradient(180deg,rgba(246,244,238,1) 0%,rgba(246,244,238,0) 14%)}
.hero .shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(246,244,238,0) 35%,rgba(246,244,238,.7) 68%,rgba(246,244,238,1) 100%)}
.hero .copy{position:absolute;inset:0;padding:clamp(24px,4vw,56px);padding-bottom:clamp(40px,7vw,96px);display:flex;flex-direction:column;align-items:center;justify-content:flex-end;text-align:center;gap:22px}
.hero .copy .h1{font-size:clamp(34px,4.9vw,72px);letter-spacing:-.015em;line-height:1}
.hero .copy .lead{white-space:pre-line;line-height:1.5}
.hero .ctas{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:8px}
@media (min-width:721px){.hero .copy .h1{white-space:nowrap}}

/* Proof grid: borderless rectangle grid, plus marks at every intersection */
.grid6{position:relative;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:0;max-width:1020px;margin:0 auto;border-top:1px dashed var(--dash);border-left:1px dashed var(--dash)}
.grid6 > *{border-right:1px dashed var(--dash);border-bottom:1px dashed var(--dash)}
.grid6 > *{aspect-ratio:1/1;min-width:0;position:relative}
.grid6 > .span2{aspect-ratio:auto;grid-column:span 2;grid-row:span 2}
.grid6 > .pA{grid-column:1 / span 2;grid-row:1 / span 2}
.grid6 > .pB{grid-column:1 / span 2;grid-row:3 / span 2}
.grid6 > .pC{grid-column:5 / span 2;grid-row:3 / span 2}
.tile{background:var(--panel);padding:22px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:6px;color:var(--fg);transition:background .4s cubic-bezier(.4,0,.2,1),color .4s cubic-bezier(.4,0,.2,1)}
.tile.span2{padding:clamp(24px,2.6vw,36px);gap:10px}
.tile .lbl{transition:color .4s cubic-bezier(.4,0,.2,1)}
.tile img{transition:filter .4s cubic-bezier(.4,0,.2,1)}
a.tile:hover,a.tile:focus-visible{background:var(--ink);color:#fff}
a.tile:hover .lbl,a.tile:focus-visible .lbl{color:rgba(255,255,255,.72)}
a.tile:hover img,a.tile:focus-visible img{filter:invert(1)}
.tile .num{font-size:clamp(30px,2.8vw,40px);letter-spacing:-.03em;line-height:1;font-weight:300;font-variant-numeric:tabular-nums}
.tile.span2 .num{font-size:clamp(56px,7.2vw,104px);letter-spacing:-.045em}
.tile .lbl{font-size:14px;color:var(--fg-2);line-height:1.35}
.tile.span2 .lbl{font-size:17px}
.tile .tpill{display:inline-flex;flex-wrap:nowrap;align-items:center;justify-content:center;gap:8px;height:44px;width:auto;padding:0 20px;margin-top:12px;white-space:nowrap;flex:0 0 auto;line-height:1;border-radius:999px;border:1px solid var(--fg-3);color:var(--fg);font-size:14px;font-weight:500;transition:color .4s,border-color .4s,background .4s}
.tile .tpill .arr{display:inline-block;transition:transform .3s}
.tile .tpill.go{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
a.tile:hover .tpill,a.tile:focus-visible .tpill{border-color:rgba(255,255,255,.55);color:#fff}
a.tile:hover .tpill.go,a.tile:focus-visible .tpill.go{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
a.tile:hover .tpill .arr,a.tile:focus-visible .tpill .arr{transform:translateX(3px)}
a.tile:hover .tpill.go .arr,a.tile:focus-visible .tpill.go .arr{transform:translateX(3px)}
.tile.center{gap:20px}
.cell{display:flex;align-items:center;justify-content:center;padding:18%;perspective:900px}
.cell .flip{width:100%;height:100%;display:flex;align-items:center;justify-content:center;transform-style:preserve-3d;transition:transform .42s cubic-bezier(.4,0,.2,1),opacity .42s}
.cell .flip.out{transform:rotateX(-90deg);opacity:0}
.cell .flip.in{transform:rotateX(90deg);opacity:0;transition:none}
.cell img{width:100%;height:100%;object-fit:contain;opacity:.78}
.cell .ph{font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--fg-4)}

/* Blank sections */
.blank{background:var(--bg);border:1px dashed var(--line);border-radius:16px;min-height:clamp(320px,38vw,560px);display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-4)}

/* Two-col section */
.two{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5vw,72px);align-items:start}
.two .sticky{position:sticky;top:calc(132px + env(safe-area-inset-top,0px))}

/* FAQ */
.faq{border-top:1px solid var(--line);background:var(--bg)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:24px 0;font-size:clamp(17px,1.3vw,20px);cursor:pointer;color:var(--fg)}
.faq summary::-webkit-details-marker{display:none}
.faq summary .pm{width:28px;height:28px;flex:0 0 28px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;color:var(--fg-2);position:relative}
.faq summary .pm::before,.faq summary .pm::after{content:"";position:absolute;background:currentColor;width:11px;height:1.5px}
.faq summary .pm::after{transform:rotate(90deg);transition:transform .15s}
.faq details[open] summary .pm::after{transform:rotate(0)}
.faq .ans{padding:0 0 26px;color:var(--fg-2);line-height:1.6;max-width:68ch}

/* Badges */
.badges{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.badge-tile{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);height:124px;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:13px;letter-spacing:.06em;color:var(--fg-2);text-align:center;padding:16px}

/* CTA band */
.cta{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:clamp(48px,7vw,104px) clamp(24px,5vw,64px);display:flex;flex-direction:column;align-items:center;text-align:center;gap:26px;position:relative;overflow:hidden}
.cta::before{content:"";position:absolute;inset:auto -20% -60% -20%;height:70%;background:radial-gradient(closest-side,rgba(0,0,0,.06),transparent 70%);pointer-events:none}
.cta .h2{font-size:clamp(36px,5vw,72px);max-width:16ch}
.cta .lead{text-align:center}

/* Footer */
.foot{position:relative;border-top:1px solid var(--line-soft);background:var(--bg) url(footer-globe.jpg) no-repeat center bottom;background-size:100% auto;min-height:calc(min(100vw,1800px) * .5625);display:flex;flex-direction:column}
.foot::before{content:"";position:absolute;inset:0 0 auto;height:55%;background:linear-gradient(180deg,var(--bg) 0%,var(--bg) 45%,rgba(246,244,238,0) 100%);pointer-events:none}
.foot > .wrap{position:relative;z-index:1}
@media (max-width:720px){.foot{background-size:100% auto;min-height:0;padding-bottom:40vw}}
.foot .top{display:flex;justify-content:space-between;align-items:flex-start;gap:32px;flex-wrap:wrap}
.foot .cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px}
.foot h4{margin:0 0 14px;font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--fg-3);font-weight:500}
.foot .cols a{display:block;font-size:14px;color:var(--fg-2);padding:5px 0}
.foot .cols a:hover{color:var(--fg)}
.foot .bottom{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap}
.foot .fine{font-size:12px;color:var(--fg-4);line-height:1.55;max-width:72ch}
.social{width:40px;height:40px;border:1px solid var(--line);border-radius:8px;display:inline-flex;align-items:center;justify-content:center;color:var(--fg-2)}
.social:hover{color:var(--fg);border-color:var(--fg-3)}
.social svg{width:16px;height:16px}

/* Demo page */
.demo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:start}
.video{position:relative;aspect-ratio:16/9;max-width:100%;border-radius:14px;overflow:hidden;background:#efece4;border:1px solid var(--line-soft);display:flex;align-items:center;justify-content:center}
.video .label{position:absolute;left:16px;bottom:14px;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-3)}
.video .play{width:64px;height:64px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;color:var(--fg)}
.video .play svg{width:20px;height:20px;margin-left:3px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:clamp(22px,3vw,36px)}
.steps{display:flex;gap:22px;font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-4);margin-bottom:26px}
.steps .on{color:var(--fg)}
.steps .done{color:var(--fg-2)}
.field{display:flex;flex-direction:column;gap:8px}
.field label,.field .q{font-size:14px;color:var(--fg-2)}
.input{height:48px;width:100%;background:#fff;border:1px solid var(--line);border-radius:10px;padding:0 14px;color:var(--fg);font:inherit;font-size:15px;transition:border-color .15s}
.input::placeholder{color:var(--fg-4)}
.input:focus{outline:none;border-color:var(--fg)}
.f-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.f-stack{display:flex;flex-direction:column;gap:18px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{position:relative}
.chip input{position:absolute;opacity:0;inset:0;width:100%;height:100%;cursor:pointer;margin:0}
.chip span{display:inline-flex;align-items:center;height:40px;padding:0 14px;border:1px solid var(--line);border-radius:999px;font-size:14px;color:var(--fg-2);transition:border-color .15s,color .15s,background .15s}
.chip input:checked + span{border-color:var(--fg);color:#fff;background:var(--fg)}
.chip input:focus-visible + span{outline:2px solid var(--fg);outline-offset:2px}
.fine{font-size:12px;color:var(--fg-3);line-height:1.5}
.fine a{color:var(--fg-2);text-decoration:underline;text-underline-offset:3px}
.back{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--fg-3)}
.back:hover{color:var(--fg)}
.done-state{display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.done-state .check{width:44px;height:44px;border-radius:50%;background:var(--fg);color:#fff;display:grid;place-items:center}
.done-state .check svg{width:20px;height:20px}
.err{font-size:13px;color:#b3261e}

@media (max-width:720px){
  .menu.pill{display:none}
  .nav .bar{grid-template-columns:auto 1fr auto}
  .burger{display:inline-flex}
  .two{grid-template-columns:1fr}
  .two .sticky{position:static}
  .demo{grid-template-columns:1fr}
  .badges{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot .cols{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:720px){
  .grid6{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid6 > .pA{grid-column:1 / span 2;grid-row:auto / span 2}
  .grid6 > .pB{grid-column:1 / span 2;grid-row:auto / span 2}
  .grid6 > .pC{grid-column:1 / span 2;grid-row:auto / span 2}
  .hero{height:auto;min-height:520px}
  .hero .copy .h1{max-width:none}
  .f-grid{grid-template-columns:1fr}
  .nav .right .btn{display:none}
  .mobile .btn{display:inline-flex;margin:16px 0 8px}
  .brand.pill{height:52px;width:52px}.burger{width:52px;height:52px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* Proof section: realistic plant render behind the grid, faded and blurred at the top */
.proof-section{position:relative;overflow:hidden}
.proof-section .bgvid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 40%;display:block}
.proof-section .bgfade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(246,244,238,1) 0%,rgba(246,244,238,.92) 14%,rgba(246,244,238,0) 42%,rgba(246,244,238,0) 70%,rgba(246,244,238,.9) 92%,rgba(246,244,238,1) 100%)}




/* Demo video section */
.demo-wrap{position:relative;max-width:1020px;margin:0 auto;aspect-ratio:16/9;overflow:hidden;border-radius:14px;background:#000}
.demo-wrap video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.demo-wrap .cover{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.18);transition:opacity .35s}
.demo-wrap .cover[hidden]{display:none}
.demo-wrap .playbtn{display:inline-flex;align-items:center;gap:12px;height:54px;padding:0 22px 0 16px;border-radius:999px;background:rgba(255,255,255,.92);color:#111;font-size:15px;font-weight:500;box-shadow:0 14px 40px rgba(0,0,0,.35)}
.demo-wrap .playbtn .ic{width:30px;height:30px;border-radius:50%;background:#111;color:#fff;display:grid;place-items:center}
.demo-wrap .playbtn .ic svg{width:12px;height:12px;margin-left:2px}
.demo-wrap .playbtn:hover{background:#fff}

/* Hero sway: the loop drifts and tilts a little with the cursor */
.hero{perspective:1200px}
.hero .vid{transform:scale(1.08);will-change:transform;transform-origin:50% 50%}
@media (prefers-reduced-motion:reduce){.hero .vid{transform:none!important}}

/* Announcement bar */
.announce{position:fixed;top:env(safe-area-inset-top,0px);left:0;right:0;z-index:55;height:36px;background:var(--fg);color:var(--bg);display:flex;align-items:center;justify-content:center;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));font-size:13px;letter-spacing:.01em}
.announce a{display:inline-flex;align-items:center;gap:10px;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:inherit}
.announce a .tag{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;opacity:.7}
.announce a .arr{transition:transform .15s}
.announce a:hover .arr{transform:translateX(3px)}

/* 3x tile: plant render looping behind the number, cropped in so the baked-in captions fall outside */
.tile.vidtile{overflow:hidden;padding-bottom:clamp(24px,2.6vw,36px)}
.tile.vidtile .tilevid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:45% 45%;transform:scale(1.25);transform-origin:45% 45%;z-index:0}
.tile.vidtile .tileshade{position:absolute;inset:0;background:rgba(237,234,226,.6);z-index:0;transition:background .4s cubic-bezier(.4,0,.2,1)}
.tile.vidtile .num,.tile.vidtile .lbl{position:relative;z-index:1}
a.tile.vidtile:hover .tileshade,a.tile.vidtile:focus-visible .tileshade{background:rgba(18,18,18,.78)}
a.tile.vidtile:hover,a.tile.vidtile:focus-visible{background:var(--panel)}

/* CTAs: Schneider green, rounded rectangle, plain surface */
.btn.solid,.nav .right .btn,.tile .tpill.go{
  border-radius:999px;
  background-color:var(--accent);
  border:1px solid var(--accent);
  box-shadow:none;
  color:#fff;text-shadow:none;font-weight:600;letter-spacing:.01em}
.btn.solid:hover,.nav .right .btn:hover,a.tile:hover .tpill.go{background-color:var(--accent-hover);border-color:var(--accent-hover)}

/* What-we-evaluate panel: sticky viewport, plot plans filling the whole frame, four counters at different paces */
.scrolly{position:relative;height:340vh}
.sticky-view{position:sticky;top:calc(96px + env(safe-area-inset-top,0px));height:calc(100vh - 96px - env(safe-area-inset-top,0px));overflow:hidden}
.cfgfield{position:absolute;inset:0;display:grid;grid-template-columns:repeat(14,minmax(0,1fr));gap:clamp(10px,1.6vw,26px) clamp(8px,1.2vw,18px);align-content:space-evenly;padding:3vh 3vw;box-sizing:border-box}
.cfgtile{aspect-ratio:10/8;color:var(--fg-3);opacity:0;transform:translateY(10px) scale(.96);transition:opacity .4s,transform .4s,color .5s}
.cfgtile.on{opacity:.55;transform:none}
.cfgtile svg{width:100%;height:100%;display:block}
.cfgfield.settle .cfgtile.on{opacity:.14;color:var(--fg-4)}
.cfgtile.pick.on{color:var(--fg);opacity:1}
.cfgtile.pick.on svg{stroke-width:1.6}
.cfgfield.settle .cfgtile.pick.on{opacity:0;transform:scale(1.6);transition-delay:.15s}
.cfglayer{position:relative;z-index:1;height:100%;display:flex;flex-direction:column;justify-content:center}
.cfgrows{display:flex;flex-direction:column;gap:.1em;margin-top:-34vh}
.cfgrow{display:flex;align-items:baseline;gap:.35em;font-family:var(--display);font-size:clamp(34px,5vw,78px);line-height:1.05;letter-spacing:-.02em;color:var(--fg)}
.cfgrow .counter{font-style:italic;font-variant-numeric:tabular-nums;min-width:3.4ch;text-align:right;display:inline-block}
.cfgrow .cfgword{font-weight:400}
.cfgcap{font-size:clamp(15px,1.25vw,19px);line-height:1.4;color:var(--fg-2);margin:0;max-width:40ch;background:var(--bg);display:inline-block;padding:6px 10px 6px 0;align-self:flex-start}
.cfgfoot{position:absolute;left:max(20px,env(safe-area-inset-left,0px));right:max(20px,env(safe-area-inset-right,0px));bottom:4vh;display:flex;justify-content:space-between;align-items:flex-end;gap:24px}
.cfghint{font-size:13px;color:var(--fg-3);letter-spacing:.02em;display:inline-flex;gap:14px;background:var(--bg);padding:6px 10px 6px 0}
.pickstack .cfgpick{position:absolute;top:calc(100% + clamp(40px,9vh,96px));right:0;text-align:right;opacity:0;transform:translateY(8px);transition:opacity .6s,transform .6s;background:var(--bg);padding:8px 0 8px 14px;white-space:nowrap}
.cfgpick p{font-size:clamp(17px,1.4vw,20px);line-height:1.45;font-weight:300;color:var(--fg-2);margin:0}
.cfgpick p.small{font-size:14px;color:var(--fg-2);margin-top:8px}
.cfgpick.on{opacity:1;transform:none}
@media (max-width:720px){.scrolly{height:260vh}.cfgfield{grid-template-columns:repeat(7,minmax(0,1fr))}.cfgpick{text-align:left;padding:10px 0}.cfgfoot{flex-direction:column;align-items:flex-start}.cfgrow .counter{min-width:3ch}}

/* Full-bleed hero: edge to edge, up behind the announcement bar and nav */
.hero-section{margin-top:calc(-140px - env(safe-area-inset-top,0px))}
.hero{height:min(96vh,940px);min-height:600px;border-radius:0;border:0}
.hero .edge{display:none}
.hero .copy{padding-bottom:clamp(48px,7vw,104px)}
@media (max-width:720px){.hero{min-height:560px}}
/* theme toggle in the menu pill */
.menu .top.eye{padding:0 12px;color:var(--fg-2)}
.menu .top.eye svg{width:18px;height:18px;transform:none}
.menu .top.eye:hover{color:var(--fg)}

/* Picked configuration: card in the centre with the 18 deliverable folders stacking up behind it */
.pickstack{position:absolute;left:68%;top:55%;width:min(320px,56vw);aspect-ratio:200/140;transform:translate(-50%,-50%);z-index:3;pointer-events:none}
.pickcard{position:relative;z-index:40;background:var(--bg);border:1.5px solid var(--fg);border-radius:6px;padding:10px;color:var(--fg);aspect-ratio:10/7;transform:scale(.28);opacity:0;transition:transform .75s cubic-bezier(.2,.7,.2,1),opacity .3s}
.pickstack.on .pickcard{transform:scale(1);opacity:1}
.pickcard svg{width:100%;height:100%;display:block}
.folders{position:absolute;inset:0}
.folder{position:absolute;inset:0;background:var(--panel);border:1px solid var(--line);border-radius:6px;z-index:calc(39 - var(--i));opacity:0;transform:translateY(0);transition:transform .45s cubic-bezier(.2,.7,.2,1),opacity .3s;transition-delay:calc(550ms + var(--i)*28ms)}
.pickstack.on .folder{opacity:1;transform:translateY(calc(var(--i) * -17px))}
.folder .tab{position:absolute;top:-21px;left:calc(var(--slot) * 50%);max-width:50%;overflow:hidden;text-overflow:ellipsis;height:21px;line-height:21px;padding:0 9px;background:var(--panel);border:1px solid var(--line);border-bottom:0;border-radius:5px 5px 0 0;font-family:var(--mono);font-size:10px;letter-spacing:.03em;color:var(--fg-2);white-space:nowrap;box-sizing:border-box}
.cfgrow.fixed{opacity:0;transform:translateY(6px);transition:opacity .5s,transform .5s}
.cfgrow.fixed.on{opacity:1;transform:none}
.cfgrow.fixed em{font-style:italic;min-width:3.4ch;text-align:right;display:inline-block}
@media (max-width:720px){.pickstack{width:min(240px,62vw);top:46%;left:50%}.pickstack .cfgpick{white-space:normal;left:0;text-align:left;font-size:15px}.folder .tab{font-size:9.5px;padding:0 6px}.pickstack.on .folder{transform:translateY(calc(var(--i) * -10px))}}

/* hero subline tighter; proof grid closer to the hero */
.hero .copy .lead{line-height:1.22}
.hero .copy{gap:16px}
.proof-section.section{padding-top:clamp(36px,4.5vw,75px)}

/* plot-plan drawings in the field: landscape sheets */
.cfgtile{aspect-ratio:200/140}
.cfgtile svg,.pickcard svg{width:100%;height:100%;display:block}
.pickcard{aspect-ratio:200/140;padding:6px}

/* Trust panel: rotating word with a drawn underline, and a card that changes with it */
.trust .two{gap:clamp(40px,6vw,96px)}
.trusthead{font-family:var(--display);font-weight:400;font-size:clamp(40px,5.2vw,80px);line-height:1.02;letter-spacing:-.02em;margin:0}
.trusthead .swap{display:inline-block;position:relative;vertical-align:baseline;transition:min-width .4s}
.trusthead .swap em{font-style:italic;display:inline-block;position:relative;transition:opacity .25s,transform .25s}
.trusthead .swap em.out{opacity:0!important;transform:translateY(-6px);position:absolute;left:0;top:0}
.trusthead .swap em::after{content:"";position:absolute;left:0;right:0;bottom:.04em;height:.055em;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .7s cubic-bezier(.2,.7,.2,1) .15s}
.trusthead .swap em.draw::after{transform:scaleX(1)}
.trustsub{margin-top:22px}
.trustcard{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:clamp(18px,2vw,28px);min-height:360px;display:flex;flex-direction:column;gap:18px}
.tc-head{display:flex;justify-content:space-between;align-items:center}
.tc-right{color:var(--fg)}
.tc-body{flex:1;transition:opacity .25s}
.tc-body.fade{opacity:0}
.tc-rows,.tc-gantt{display:flex;flex-direction:column;gap:12px}
.tc-row{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,2fr);gap:14px;align-items:center;font-size:13px;color:var(--fg-2)}
.tc-l{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tc-bar{position:relative;height:10px;background:var(--line-soft);border-radius:999px;overflow:visible}
.tc-bar i{position:absolute;left:0;top:0;bottom:0;background:var(--fg);border-radius:999px;opacity:.85}
.tc-bar b{position:absolute;top:-3px;height:16px;border-left:1px dashed var(--fg-3);border-right:1px dashed var(--fg-3)}
.tc-track{position:relative;height:10px;background:var(--line-soft);border-radius:999px}
.tc-track i{position:absolute;top:0;bottom:0;background:var(--fg);border-radius:999px;opacity:.85}
.tc-foot{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid var(--line);padding-top:14px;font-size:13px;color:var(--fg-3)}
.tc-num{font-family:var(--display);font-size:22px;color:var(--fg);letter-spacing:-.01em}
.tc-num small{font-family:var(--mono);font-size:11px;color:var(--fg-3);letter-spacing:.06em}
.tc-chips{display:flex;flex-wrap:wrap;gap:8px}
.tc-chips span{font-family:var(--mono);font-size:11px;letter-spacing:.04em;padding:6px 9px;border:1px solid var(--line);border-radius:6px;color:var(--fg-2);background:var(--bg)}
.tc-grid{display:grid;grid-template-columns:auto repeat(3,minmax(0,1fr));gap:8px 10px;align-items:center}
.tc-h{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-3)}
.tc-cell{font-family:var(--display);font-size:26px;color:var(--fg);background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:14px 12px;text-align:center}
.tc-cell small{font-family:var(--mono);font-size:10px;color:var(--fg-3);letter-spacing:.06em}
@media (max-width:720px){.trustcard{min-height:0}.trusthead br{display:none}}

/* CTA band: whole box is the link, filled with the accent; the button is the page colour */
.cta{background:var(--accent);border:0;color:var(--fg);display:flex;cursor:pointer;transition:background .25s}
.cta::before{display:none}
.cta:hover{background-color:var(--accent)}
.cta .h2{color:var(--fg)}
.cta .lead{color:var(--fg);opacity:.85}
.cta .cta-btn{background:var(--bg);border-color:var(--bg);color:var(--fg);font-weight:600}
.cta:hover .cta-btn{background:var(--bg);border-color:var(--bg);color:var(--fg)}
.cta:hover .cta-btn .arr{transform:translateX(3px)}

/* maroon accent: white type on the band */
.cta,.cta .h2,.cta .lead{color:#fff}
.cta .lead{opacity:.88}

/* footer: mono labels throughout, mark only */
.foot .brand .logo{width:38px;height:38px}
.foot .eyebrow{line-height:1.7}

.foot-meta{text-transform:uppercase;letter-spacing:.14em;font-size:12px;font-weight:400;line-height:1.9;color:var(--fg-3)}

/* footer: no rule above, tighter top */
.foot{border-top:0}
.foot > .wrap{padding-top:40px!important}

/* stamp-ink texture on the maroon: soft, uneven ink coverage (seamless) */
.btn.solid,.nav .right .btn,.tile .tpill.go,.cta{background-color:var(--accent);background-image:url("texture.webp?v=1");background-size:640px 640px;background-blend-mode:multiply}
.btn.solid:hover,.nav .right .btn:hover,a.tile:hover .tpill.go,.cta:hover{background-color:var(--accent-hover)}
.cta .cta-btn{background-image:none}

/* hover rules: the band keeps its ink; buttons invert to the theme's text colour */
.cta:hover{background-color:var(--accent)}
.cta .cta-btn{transition:background .15s,color .15s}
.cta .cta-btn:hover{background:var(--fg);border-color:var(--fg);color:var(--bg)}
.btn.solid:hover,.nav .right .btn:hover{background-color:var(--fg);background-image:none;border-color:var(--fg);color:var(--bg)}
a.tile:hover .tpill.go{background-color:var(--accent)}
/* nav: menu items and the CTA label share one type spec */
.menu .top,.nav .right .btn{font-size:15px;font-weight:500;letter-spacing:0;color:var(--fg)}
.nav .right .btn{color:#fff}

/* footer: earth loop behind the links, dark on cream, blurred/faded at the top */
.foot{background:var(--bg);position:relative;overflow:hidden;min-height:calc(min(100vw,1800px) * .5625)}
.foot .footvid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center bottom;display:block;filter:grayscale(1) contrast(1.45) brightness(.42);mix-blend-mode:multiply}
.foot .footfade{position:absolute;inset:0 0 auto;height:58%;pointer-events:none;background:linear-gradient(180deg,rgba(246,244,238,.92) 0%,rgba(246,244,238,.7) 45%,rgba(246,244,238,0) 100%)}
.foot::before{display:none}
@media (max-width:720px){.foot{min-height:0;padding-bottom:42vw}}

/* the band itself never reacts to hover; only the Book demo button does */
.cta:hover{background-color:var(--accent)}
.cta:hover .cta-btn{background:var(--bg);border-color:var(--bg);color:var(--fg)}
.cta .cta-btn:hover{background:var(--fg)!important;border-color:var(--fg)!important;color:var(--bg)!important}

/* a blurred copy of the loop sits over the sharp one, masked to the upper half, so the horizon stays crisp and the text sits on soft ground */
.foot .footblur{filter:blur(28px) grayscale(1) contrast(1.45) brightness(.42);transform:scale(1.04);-webkit-mask-image:linear-gradient(180deg,#000 0%,#000 46%,transparent 58%);mask-image:linear-gradient(180deg,#000 0%,#000 46%,transparent 58%)}


/* footer: content pulled up into the clear upper band; loop stays below it */
.foot > .wrap{padding-top:150px!important;padding-bottom:0!important;gap:34px!important}
.foot{min-height:calc(min(100vw,1800px) * .8)}
.foot .cols a{padding:3px 0}

/* 3x tile CTA sits above the loop and keeps the ink texture */
.tile.vidtile .tpill{position:relative;z-index:1}
.tile .tpill.go{color:#fff;border-color:transparent}
a.tile:hover .tpill.go{background-color:var(--accent);color:#fff}

/* 3x tile loop in black and white */
.tile.vidtile .tilevid{filter:grayscale(1) contrast(1.08)}

/* footer, final layout: content on the plain page colour, then the Earth arc confined to the bottom quarter of the screen */
.foot{min-height:0;background:var(--bg);display:flex;flex-direction:column;padding-bottom:0}
.foot > .wrap{position:relative;z-index:1;padding-top:120px!important;padding-bottom:36px!important;margin:0 auto}
.foot .footvid{position:relative;inset:auto;height:25vh;min-height:160px;max-height:280px;width:100%;object-fit:cover;object-position:50% 64%;margin-top:auto}
.foot .footblur{display:none}
.foot .footfade{inset:auto 0 0 0;top:auto;height:25vh;min-height:160px;max-height:280px;background:linear-gradient(180deg,rgba(246,244,238,1) 0%,rgba(246,244,238,0) 38%)}
@media (max-width:720px){.foot{padding-bottom:0}.foot .footvid,.foot .footfade{height:18vh;min-height:120px}}

/* footer: plain page background, Earth arc confined to a bottom band (≤25vh), arc top aligned to the band top */
.foot{--band:min(25vh,21.7vw);position:relative;overflow:hidden;min-height:0;background:var(--bg);display:block;padding-bottom:var(--band)}
.foot > .wrap{position:relative;z-index:1;padding-top:120px!important;padding-bottom:48px!important;margin:0 auto}
.foot .footvid{position:absolute;left:0;right:auto;top:auto;bottom:calc(var(--band) - 26.15vw);width:100%;height:auto;aspect-ratio:16/9;max-height:none;min-height:0;margin:0;object-fit:fill;object-position:center;clip-path:inset(30.1vw 0 0 0);z-index:0;filter:grayscale(1) brightness(.75) contrast(2.4);mix-blend-mode:multiply}
.foot .footblur,.foot .footfade{display:none}

/* hero v4: grayscale render, inverted for the cream theme so the near-black backdrop becomes page-white */
.hero .vid{filter:grayscale(1) invert(1) brightness(1.1) contrast(1.04);mix-blend-mode:multiply}

/* footer dome: planet dissolves along its own curvature via a radial fade centred on the globe; more room above the footer */
#demo.section{padding-bottom:clamp(120px,14vw,220px)}
.foot > .wrap{padding-top:160px!important;z-index:2}
.foot .footvid{filter:grayscale(1) brightness(.75) contrast(2.4)}
.foot .footfade{display:block;position:absolute;left:0;right:0;bottom:0;top:auto;height:calc(var(--band) + 20vw);min-height:0;max-height:none;z-index:1;pointer-events:none;background:radial-gradient(circle 68.6vw at 50% calc(68.6vw + 20vw),rgba(0,0,0,0) 0%,rgba(0,0,0,0) 99.7%,rgba(0,0,0,.22) 100%,rgba(0,0,0,.12) 108%,rgba(0,0,0,.05) 116%,rgba(0,0,0,0) 127%)}

/* nav sized to match the tile pills (14px / 500, 44px tall) */
.pill,.brand.pill,.burger{height:48px}
.brand.pill{width:48px}
.menu .top{height:40px;padding:0 14px;font-size:14px}
.menu .top,.nav .right .btn{font-size:14px;font-weight:500}
.nav .right .btn{height:44px;padding:0 20px}
.brand .logo{width:24px;height:24px}
@media (max-width:720px){.brand.pill{height:48px;width:48px}.burger{width:48px;height:48px}}

/* tighter gap between the CTA band and the footer mark */
#demo.section{padding-bottom:clamp(56px,6vw,88px)}
.foot > .wrap{padding-top:88px!important}

/* footer: full render plays in the band, no halo, no blur */
.foot .footfade,.foot .footblur{display:none}
.foot .footvid{filter:grayscale(1) brightness(.85) contrast(1.9)}

/* footer content sits directly on the video: no clip, video backs the whole footer */
.foot .footvid{clip-path:inset(4.6vw 0 0 0)}
.foot > .wrap{background:transparent}

/* footer veil: opaque page color at the top, dissolving to fully clear at the globe's rim; the dome itself untouched */
.foot .footfade{display:block;position:absolute;inset:0;top:0;bottom:0;height:auto;min-height:0;max-height:none;z-index:1;pointer-events:none;background:radial-gradient(circle 68.6vw at 50% calc(100% - var(--band) + 68.6vw),rgba(246,244,238,0) 0%,rgba(246,244,238,0) 100%,rgba(246,244,238,.5) 111%,rgba(246,244,238,.88) 124%,rgba(246,244,238,1) 136%)}

/* veil: solid for the top half, then dissolving to clear at the dome rim; panel nudged down, space below it halved */
.foot{padding-bottom:calc(var(--band) / 2)}
.foot > .wrap{padding-top:104px!important;padding-bottom:24px!important}
.foot .footfade{background:linear-gradient(180deg,rgba(246,244,238,1) 0%,rgba(246,244,238,1) 50%,rgba(246,244,238,0) 50%),radial-gradient(circle 68.6vw at 50% calc(100% - var(--band) + 68.6vw),rgba(246,244,238,0) 0%,rgba(246,244,238,0) 100%,rgba(246,244,238,.4) 105%,rgba(246,244,238,.8) 110%,rgba(246,244,238,1) 116%)}

/* configs panel: the picked configuration is a video thumbnail (render behind, TV static on top, Watch) */
.pickcard{padding:0;overflow:hidden;cursor:pointer;pointer-events:auto;background:#000}
.pickcard .pickvid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(1) contrast(1.15) brightness(.9)}
.pickcard .static{position:absolute;inset:0;width:100%;height:100%;display:block;image-rendering:pixelated;opacity:.28;mix-blend-mode:screen;pointer-events:none}
.pickcard .watch{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:inline-flex;align-items:center;gap:10px;height:48px;padding:0 22px 0 18px;border-radius:999px;border:0;background:rgba(255,255,255,.92);color:#000;font:600 14px/1 var(--font);letter-spacing:.01em;cursor:pointer;box-shadow:0 8px 30px rgba(0,0,0,.35);transition:transform .25s,background .25s}
.pickcard .watch .tri{width:0;height:0;border-style:solid;border-width:7px 0 7px 12px;border-color:transparent transparent transparent #000}
.pickcard:hover .watch{transform:translate(-50%,-50%) scale(1.06);background:#fff}
.pickcard .watchcap{position:absolute;left:12px;bottom:10px;font:500 12px/1.2 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:#fff;opacity:.85;text-shadow:0 1px 8px rgba(0,0,0,.6)}
.pickcard svg{display:none}
.pickstack.on .pickcard{border-color:var(--fg)}
.vmodal{position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.92);display:none;align-items:center;justify-content:center;padding:4vw}
.vmodal.on{display:flex}
.vmodal video{width:min(1400px,100%);max-height:90vh;aspect-ratio:16/9;background:#000;border-radius:8px;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.vmodal .vclose{position:absolute;top:18px;right:22px;width:44px;height:44px;border-radius:999px;border:0;background:rgba(255,255,255,.14);color:#fff;font-size:26px;line-height:1;cursor:pointer}
.vmodal .vclose:hover{background:rgba(255,255,255,.3)}
body.noscroll{overflow:hidden}

/* configs panel: trade-off chart rises out of the top of the video card; Watch pill sits bottom-left; annotation with a squiggle */
.pickstack{top:62%}
.folders,.folder{display:none}
.tradeoff{position:absolute;left:50%;bottom:calc(100% + 14px);width:150%;transform:translate(-50%,46%);opacity:0;z-index:30;color:var(--fg);background:var(--bg);border:1px solid var(--line);border-radius:6px;padding:8px 10px 4px;transition:transform .9s cubic-bezier(.2,.7,.2,1) .15s,opacity .5s .15s;pointer-events:none}
.tradeoff svg{display:block;width:100%;height:auto;font-family:var(--font)}
.pickstack.on .tradeoff{transform:translate(-50%,0);opacity:1}
.pickcard .watch{left:14px;top:auto;bottom:14px;transform:none;height:42px;padding:0 18px 0 16px}
.pickcard:hover .watch{transform:scale(1.05)}
.howlabel{position:absolute;right:calc(100% + 18px);top:58%;display:flex;align-items:center;gap:8px;white-space:nowrap;color:var(--fg);opacity:0;transform:translateX(-10px);transition:opacity .6s .5s,transform .6s .5s;pointer-events:none}
.howlabel span{font-family:var(--display);font-style:italic;font-size:clamp(20px,1.7vw,26px);line-height:1}
.howlabel svg{width:92px;height:46px;flex:0 0 auto}
.pickstack.on .howlabel{opacity:1;transform:none}
@media (max-width:720px){.tradeoff{display:none}.howlabel{display:none}.pickstack{top:50%}}
.pickstack{width:min(400px,56vw);aspect-ratio:16/9}
.pickcard{aspect-ratio:16/9}
.tradeoff{width:140%}


/* ===== stacked folder drawers (panels 3 and 4) ===== */
.drawer{position:absolute;inset:0;z-index:30;pointer-events:none}
.fcard{position:absolute;inset:0;background:var(--panel);color:var(--fg);border:1px solid var(--line);border-radius:6px;transform:translateY(calc(var(--i) * -17px));transition:transform .7s cubic-bezier(.2,.7,.2,1),opacity .4s;pointer-events:auto;opacity:0;overflow:visible}
.pickstack.on .fcard{opacity:1}
.fcard .ftab{position:absolute;top:-24px;left:calc(var(--slot) * 50%);width:50%;height:25px;padding:0 10px;border:1px solid var(--line);border-bottom:0;border-radius:6px 6px 0 0;background:var(--panel);color:var(--fg);font:500 11px/1 var(--mono);letter-spacing:.04em;text-align:left;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:background .25s,color .25s}
.fcard .ftab span{display:block;overflow:hidden;text-overflow:ellipsis}
.fcard .ftab:hover{background:var(--fg);color:var(--bg)}
.fcard.open{transform:translateY(calc(-100% - 40px));z-index:60!important}
.fcard.open .ftab{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.fcard .fbody{position:absolute;inset:0;opacity:0;transition:opacity .35s;overflow:hidden;border-radius:6px}
.fcard.open .fbody{opacity:1;transition-delay:.25s}
.fcard .fback{position:absolute;top:8px;right:8px;width:30px;height:30px;border-radius:999px;border:1px solid var(--line);background:var(--bg);color:var(--fg);display:none;align-items:center;justify-content:center;cursor:pointer;z-index:2}
.fcard.open .fback{display:inline-flex}
.fcard .fback:hover{background:var(--fg);color:var(--bg)}
.fpad{position:absolute;inset:0;padding:16px 18px;display:flex;flex-direction:column;gap:10px}
.fpad .eyebrow{color:var(--fg-3)}
.rot{font:500 clamp(16px,1.5vw,21px)/1.3 var(--font);letter-spacing:-.01em;min-height:3.9em;display:flex;align-items:center}
.rot span{display:block;transition:opacity .28s,transform .28s}
.rot span.out{opacity:0;transform:translateY(-6px)}
.fsub{margin-top:auto;font:400 12px/1.4 var(--font);color:var(--fg-3)}
.fgrid{display:grid;grid-template-columns:1.6fr .7fr 1fr;gap:4px 10px;font:400 12px/1.3 var(--font);align-content:start}
.fgrid .fh{font:500 10px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--fg-3);padding-bottom:4px;border-bottom:1px solid var(--line)}
.fgrid .fl{color:var(--fg-2)}
.fgrid .fv{font-variant-numeric:tabular-nums}
.fgrid small{color:var(--fg-3);font-size:10px}
.fchart{position:absolute;inset:0;padding:6px 8px}
.fchart svg{display:block;width:100%;height:100%;font-family:var(--font)}
.tochart .pt{cursor:help}
.tochart .pt circle{transition:r .2s,stroke-width .2s}
.tochart .pt:hover circle{stroke:currentColor;stroke-width:2.2}
.tochart .pt .eb{transition:stroke-opacity .2s}
.tochart .pt:hover .eb{stroke-opacity:.9}
.fdraw{position:absolute;inset:0;display:flex;flex-direction:column}
.fdhead{display:flex;align-items:center;gap:10px;padding:10px 46px 8px 14px;border-bottom:1px solid var(--line)}
.fdname{font:500 13px/1 var(--font)}
.fdstamp{margin-left:auto;color:var(--accent)}
.fdplan{flex:1;padding:10px 14px;color:var(--fg)}
.fdplan svg{width:100%;height:100%;display:block}
.pickstack .cfgpick{z-index:0}

/* ===== panel 4: contrast panel, flipped layout ===== */
.trust2{position:relative;background:var(--fg);color:var(--bg);overflow:hidden}
.trust2 .sweep{position:absolute;inset:0;z-index:5;pointer-events:none;transform-origin:50% 0;transform:scaleY(var(--s,1))}
.trust2 .sweep::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--accent)}
.trust2-grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5vw,72px);align-items:end;min-height:100vh;padding-top:clamp(120px,14vw,200px);padding-bottom:clamp(72px,9vw,150px)}
.ps2{position:relative;left:auto;top:auto;transform:none;width:min(400px,100%);margin-top:max(300px,calc(100% * 9/16 + 60px));pointer-events:auto}
.ps2 .pickcard{transform:none;opacity:1;cursor:default}
.pc2 .soon{position:absolute;inset:0;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;padding:18px 18px 70px;gap:6px;color:#fff;background:linear-gradient(180deg,#141414,#0a0a0a)}
.pc2 .soon .eyebrow{color:rgba(255,255,255,.6)}
.pc2 .soon strong{font:600 22px/1.1 var(--font);letter-spacing:-.01em}
.pc2 .soonsub{font:400 12px/1.3 var(--font);color:rgba(255,255,255,.55)}
.pc2 .soonbtn{opacity:.45;pointer-events:none}
.ps2 .howlabel{right:auto;left:calc(100% + 18px);top:58%;transform:none;opacity:1}
.trustlines{display:flex;flex-direction:column;align-items:flex-end;text-align:right;gap:.1em}
.trustlines .cfgrow{color:var(--bg);justify-content:flex-end}
.trustlines .cfgrow em{font-style:italic}
.trust2sub{font:300 clamp(16px,1.3vw,19px)/1.45 var(--font);color:var(--bg);opacity:.75;max-width:34em;margin:28px 0 0}
@media (max-width:720px){.trust2-grid{grid-template-columns:1fr;min-height:0}.ps2{margin-top:320px}.ps2 .howlabel{display:none}.trustlines{align-items:flex-start;text-align:left}}
.trust2{--bg:#121212;--panel:#1b1b1b;--panel-2:#222;--line:#2e2e2e;--line-soft:#262626;--fg:#f6f4ee;--fg-2:#cfcbc2;--fg-3:#8f8a80;--fg-4:#5a5750;--dash:#3a3a3a;--ink:#f6f4ee;--ink-fg:#121212}
.trust2 .sweep{background:#f6f4ee}
.tradeoff{display:none}
.trust2{background:var(--bg);color:var(--fg)}
.trustlines .cfgrow,.trust2sub{color:var(--fg)}
.trustlines .cfgrow{display:block;font-size:clamp(30px,3.5vw,52px)}
.trustlines .cfgrow em{display:inline;margin-right:.28em}
.ps2 .howlabel{color:var(--fg)}
.ps2 .howlabel{top:14%}
.fdplan{min-height:0;display:flex;align-items:center;justify-content:center}
.fdplan svg{width:100%;height:100%;max-height:100%}
.trust2 .sweep::after{height:3px}

/* caption pill behind the Watch pill, opposite colours, text right-aligned */
.howlabel{display:none}
.pickcard .capbar{position:absolute;left:14px;right:14px;bottom:14px;height:42px;border-radius:999px;background:#0a0a0a;color:#f6f4ee;display:flex;align-items:center;justify-content:flex-end;padding:0 20px;font:500 14px/1 var(--font);letter-spacing:.01em;z-index:1;pointer-events:none}
.pickcard .watch{z-index:2;background:#f6f4ee;color:#0a0a0a}
.pickcard .watch .tri{border-left-color:#0a0a0a}
.pickcard:hover .watch{background:#fff}
.pc2 .soon{padding-bottom:70px}

/* drawers: two-column tab rows; when one card is open the rest ride above it. Panel 4 runs straight on from panel 3. */
.fcard{transform:translateY(calc(var(--row,1) * -17px))}
.drawer.has-open .fcard:not(.open){transform:translateY(calc(-100% - 40px - var(--row,1) * 17px))}
.fcard.open{transform:translateY(calc(-100% - 40px))}
.trust2{border-top:3px solid var(--accent)}
.trust2 .sweep{display:none}
.trust2-grid{min-height:0;padding-top:clamp(48px,5vw,80px);padding-bottom:clamp(64px,7vw,110px)}
.ps2{margin-top:470px}
@media (max-width:720px){.ps2{margin-top:470px}}
.trust2{overflow:visible}
.ps2{margin-top:300px}
@media (max-width:720px){.ps2{margin-top:300px}}

/* single-column drawers (panel 4) and denser tables */
.drawer.single .fcard .ftab{left:0;width:100%}
.fgrid.f4{grid-template-columns:1.5fr .8fr 1.2fr 1fr}
.fgrid.f3{grid-template-columns:1fr 1.1fr 1.3fr}
.fgrid{font-size:11.5px;gap:3px 10px}
.frows{margin-top:2px}
.frows .tc-row{margin:0;padding:4px 0}
.frows .tc-l{font-size:11.5px}
.ps2{margin-top:330px}
@media (max-width:720px){.ps2{margin-top:330px}}

/* ===== one panel: counters top-left, deliverables + explainer right, milestones + demo rise in bottom-left ===== */
.scrolly{height:460vh}
.cfglayer{justify-content:center}
.cfgrows{margin-top:0}
.cfgrow{font-size:clamp(30px,4.4vw,64px)}
.stack2{margin-top:clamp(28px,4vh,44px);width:min(320px,38vh);opacity:0;transform:translateY(40vh);pointer-events:none;will-change:transform,opacity}
.stack2.on{pointer-events:auto}
.ps2{position:relative;left:auto;top:auto;transform:none;width:100%;margin-top:92px;aspect-ratio:16/9;pointer-events:auto}
.ps2 .pickcard{transform:none;opacity:1}
.ps2 .drawer{z-index:30}
.ps2 .fcard.open{transform:translateX(calc(100% + 16px))}
.ps2 .drawer.has-open .fcard:not(.open){transform:translateY(calc(var(--row,1) * -17px))}
.ps2 .fcard .ftab{font-size:10.5px}
.trustlines{align-items:flex-start;text-align:left;margin-top:14px;gap:0}
.trustlines .cfgrow{color:var(--fg);font-size:clamp(18px,1.7vw,24px);line-height:1.15;display:block}
.trust2sub{color:var(--fg);opacity:.65;font-size:12.5px;line-height:1.4;margin:8px 0 0;max-width:30em}
.trust2{display:none}
.cfgfoot{transition:opacity .3s}
.pc2 .capbar{height:36px;bottom:12px;left:12px;right:12px;font-size:12.5px}
.pc2 .watch{height:36px;bottom:12px;left:12px;padding:0 14px 0 12px;font-size:12.5px}
.pc2 .soon{padding:14px 14px 58px}
.pc2 .soon strong{font-size:18px}
@media (max-width:720px){.stack2{display:none}.scrolly{height:300vh}}
.pickstack{top:66%}
.ps2{top:auto}
.stack2{margin-top:clamp(20px,3vh,36px)}
.trustlines .cfgrow{font-size:clamp(17px,1.55vw,22px);line-height:1.12}
.trust2sub{font-size:12px;margin-top:6px}

/* ===== 2x2 composition: headlines on top, stacks at the bottom, cards open upward into the gap ===== */
.cfglayer{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(32px,4vw,64px);align-items:stretch;height:100%;padding-top:1.5vh;padding-bottom:1vh}
.cfgcol{display:flex;flex-direction:column;justify-content:space-between;min-height:0}
.cfgcol-r{align-items:flex-end}
.cfgrows,.trustlines{transition:opacity .45s}
.cfgcol.dim .cfgrows,.cfgcol.dim .trustlines{opacity:.12}
.cfgrow,.trustlines .cfgrow{font-size:clamp(28px,4.1vw,60px);line-height:1.05}
.trustlines{display:flex;flex-direction:column;align-items:flex-end;text-align:right;gap:.1em;margin:0;opacity:0;transform:translateY(24px)}
.trustlines .cfgrow{display:flex;align-items:baseline;gap:.35em;color:var(--fg)}
.trustlines .cfgrow em{font-style:italic;margin:0}
.stack2,.stack1{width:min(320px,36vh);align-self:flex-start}
.stack1{align-self:flex-end}
.stack2{margin-top:0;pointer-events:none}
.cfglayer .pickstack{position:relative;left:auto;top:auto;transform:none;width:100%;aspect-ratio:16/9;pointer-events:auto}
.cfglayer .ps2{margin-top:calc(4 * 17px + 26px)}
.cfglayer #pickstack{margin-top:calc(9 * 17px + 26px)}
.cfglayer .cfgpick{position:static;margin-top:16px;padding:0;background:transparent;white-space:normal;opacity:1;transform:none;text-align:left}
.cfglayer .cfgcol-r .cfgpick{text-align:right}
.cfgpick p{font-size:clamp(15px,1.2vw,18px)}
.trust2sub{display:none}
.ps2 .fcard.open{transform:translateY(calc(-100% - 40px))}
.ps2 .drawer.has-open .fcard:not(.open){transform:translateY(calc(-100% - 40px - var(--row,1) * 17px))}
.pc2 .soon strong{font-size:17px}
.pickcard .capbar{height:36px;bottom:12px;left:12px;right:12px;font-size:12.5px}
.pickcard .watch{height:36px;bottom:12px;left:12px;padding:0 14px 0 12px;font-size:12.5px}
@media (max-width:720px){.cfglayer{display:flex;flex-direction:column}.cfgcol-r{align-items:flex-start}.trustlines{display:none}.stack1{align-self:flex-start}}
.cfgrow,.trustlines .cfgrow{font-size:clamp(26px,3.1vw,46px);line-height:1.08}
.cfgrow .counter{min-width:3.2ch}
.cfglayer .cfgpick p{font-size:clamp(14px,1.1vw,16px);line-height:1.4;white-space:nowrap}
.cfglayer .cfgpick{margin-top:14px}
.fcard{transform:translateY(calc(var(--row,1) * -16px))}
.drawer.has-open .fcard:not(.open),.ps2 .drawer.has-open .fcard:not(.open){transform:translateY(calc(-100% - 36px - var(--row,1) * 16px))}
.fcard.open,.ps2 .fcard.open{transform:translateY(calc(-100% - 36px))}
.cfglayer .ps2{margin-top:calc(4 * 16px + 26px)}
.cfglayer #pickstack{margin-top:calc(9 * 16px + 26px)}
.trustlines{opacity:calc(var(--rise,0) * var(--dimf,1))}
.cfgcol.dim{--dimf:.12}
.cfgcol.dim .trustlines{opacity:calc(var(--rise,0) * var(--dimf,1))}
.stack1 .cfgpick{display:flex;justify-content:flex-end;width:100%}
.stack1 .cfgpick p{white-space:nowrap}

/* ===== panels A and B: three columns (text · stage · video+tabs), flipped in B ===== */
.scrolly{height:380vh}
.cfglayer{display:flex;flex-direction:column;justify-content:center;gap:clamp(20px,3vh,36px);height:100%;padding-top:0;padding-bottom:0}
.sechead{display:flex;flex-direction:column;gap:14px}
.sechead .h2{font-size:clamp(30px,3.4vw,48px)}
.trio{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr) minmax(0,1fr);gap:clamp(20px,2.6vw,40px);align-items:center}
.trio-text{display:flex;flex-direction:column;gap:clamp(16px,2.4vh,28px);min-width:0}
.trio.flip .trio-text{align-items:flex-end;text-align:right}
.cfgrows,.trustlines{opacity:1;transform:none;margin:0}
.cfgrow,.trustlines .cfgrow{font-size:clamp(30px,3.6vw,54px);line-height:1.06}
.trustlines{display:flex;flex-direction:column;align-items:flex-end;gap:.08em;--rise:1}
.trustlines .cfgrow{display:block;color:var(--fg)}
.trustlines .cfgrow em{display:inline;margin-right:.26em;font-style:italic}
.cfglayer .cfgpick,.trustpanel .cfgpick{position:static;margin:0;padding:0;background:transparent;opacity:1;transform:none;text-align:left;white-space:normal}
.trio.flip .cfgpick{text-align:right}
.cfgpick p,.stack1 .cfgpick p{font-size:clamp(15px,1.25vw,19px);line-height:1.45;white-space:normal}
.trio-media{position:static;left:auto;top:auto;transform:none;width:100%;aspect-ratio:auto;display:flex;flex-direction:column;gap:12px;pointer-events:auto;margin:0}
.trio-media .pickcard{aspect-ratio:16/9;width:100%;position:relative;z-index:1}
.pickstack.on .pickcard{transform:none}
.trio-media#pickstack .pickcard{transform:scale(.6);opacity:0;transition:transform .7s cubic-bezier(.2,.7,.2,1),opacity .4s}
.trio-media#pickstack.on .pickcard{transform:none;opacity:1}
.tablist{display:grid;grid-template-columns:1fr 1fr;gap:4px 10px;opacity:0;transition:opacity .5s .2s}
.pickstack.on .tablist{opacity:1}
.tablist .tab{display:flex;align-items:center;gap:8px;height:26px;padding:0 8px;border:1px solid var(--line);border-radius:6px;background:transparent;color:var(--fg);font:500 11px/1 var(--mono);letter-spacing:.03em;cursor:pointer;text-align:left;white-space:nowrap;overflow:hidden;transition:background .2s,color .2s,border-color .2s}
.tablist .tab .tcode{color:var(--fg-3)}
.tablist .tab .tname{overflow:hidden;text-overflow:ellipsis}
.tablist .tab:hover{border-color:var(--fg)}
.tablist .tab.active{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.tablist .tab.active .tcode{color:var(--bg);opacity:.7}
.stage{position:relative;aspect-ratio:4/3;width:100%;border:1px dashed var(--dash);border-radius:8px;background:transparent;color:var(--fg);transition:border-color .3s,background .3s}
.stage.on{border:1px solid var(--line);background:var(--panel)}
.stage-empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;padding:24px;color:var(--fg-3);transition:opacity .25s}
.stage-empty p{margin:0;font:300 clamp(14px,1.1vw,16px)/1.4 var(--font)}
.stage.on .stage-empty{opacity:0;pointer-events:none}
.stage-body{position:absolute;inset:0;display:flex;flex-direction:column;transition:opacity .16s}
.stage-body.swap{opacity:0}
.stage-head{display:flex;align-items:center;gap:12px;padding:12px 52px 10px 16px;border-bottom:1px solid var(--line)}
.stage-name{font:500 14px/1 var(--font)}
.stage-head .dl{margin-left:auto;display:inline-flex;align-items:center;height:28px;padding:0 12px;border-radius:999px;border:1px solid var(--fg);color:var(--fg);font:500 12px/1 var(--font);text-decoration:none;transition:background .2s,color .2s}
.stage-head .dl:hover{background:var(--fg);color:var(--bg)}
.stage-content{position:relative;flex:1;min-height:0}
.stage-content .fpad,.stage-content .fchart,.stage-content .fdplan{position:absolute;inset:0}
.stage-content .fdplan{padding:16px 20px}
.stage-content .fpad{padding:16px 18px;gap:12px}
.stage-content .fgrid{font-size:12.5px;gap:5px 12px}
.stage-content .rot{font-size:clamp(18px,1.6vw,24px)}
.stage-content .fsub{font-size:12.5px}
.stage-close{position:absolute;top:10px;right:10px;width:30px;height:30px;border-radius:999px;border:1px solid var(--line);background:var(--bg);color:var(--fg);display:none;align-items:center;justify-content:center;cursor:pointer;z-index:2}
.stage.on .stage-close{display:inline-flex}
.stage-close:hover{background:var(--fg);color:var(--bg)}
.trustpanel{padding-top:clamp(56px,7vw,110px)}
.trustpanel .sechead{margin-bottom:clamp(28px,4vh,44px)}
.pickcard .capbar{display:none}
.pickcard .watch{left:14px;bottom:14px;height:42px;padding:0 18px 0 16px;font-size:14px}
.pc2 .soon{padding:18px 18px 70px}
.pc2 .soon strong{font-size:22px}
.cfgfoot{bottom:2vh}
@media (max-width:720px){.trio,.trio.flip{display:flex;flex-direction:column;align-items:stretch}.trio.flip .trio-text{align-items:flex-start;text-align:left}.trio.flip .cfgpick{text-align:left}.trustlines{align-items:flex-start}.scrolly{height:300vh}.stage{display:none}}
.trio{grid-template-columns:minmax(0,1.25fr) minmax(0,.95fr) minmax(0,1fr)}
.trio.flip{grid-template-columns:minmax(0,1fr) minmax(0,.95fr) minmax(0,1.25fr)}
.cfgrow,.trustlines .cfgrow{font-size:clamp(28px,3.4vw,50px)}
.trustlines .cfgrow em{white-space:nowrap}
.stage{aspect-ratio:auto;align-self:stretch;min-height:280px}
.cfglayer .cfgpick p,.trustpanel .cfgpick p{white-space:normal}
.stage{aspect-ratio:1/1;align-self:center;min-height:0}
.stage-content .fdplan{padding:14px 18px;display:flex;align-items:center;justify-content:center}
.stage-content .fdplan svg{width:100%;height:auto;max-height:100%}
.tablist .tab{height:25px}

/* ===== FINAL: one panel, staggered. counters top-left · explainer + deliverables mid-right · four lines lower-right · demo + milestones bottom-left ===== */
.scrolly{height:460vh}
.cfglayer{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(32px,4vw,64px);align-items:stretch;height:100%;padding-top:1.5vh;padding-bottom:1vh;gap:0 clamp(32px,4vw,64px)}
.cfgcol{display:flex;flex-direction:column;justify-content:space-between;min-height:0}
.cfgcol-r{align-items:flex-end;justify-content:flex-end;gap:clamp(18px,3vh,34px)}
.cfgrow,.trustlines .cfgrow{font-size:clamp(28px,3.4vw,50px);line-height:1.06}
.cfgrows{margin:0}
.trustlines{display:flex;flex-direction:column;align-items:flex-end;text-align:right;gap:.08em;margin:0;transform:translateY(24px)}
.trustlines .cfgrow{display:block;color:var(--fg)}
.trustlines .cfgrow em{display:inline;margin-right:.26em;font-style:italic;white-space:nowrap}
.stack1,.stack2{width:min(360px,40vh);display:block}
.stack1{align-self:flex-end}
.stack2{align-self:flex-start;margin-top:0;pointer-events:none;opacity:0;transform:translateY(40vh)}
.stack2.on{pointer-events:auto}
.cfglayer .pickstack{position:relative;left:auto;top:auto;transform:none;width:100%;aspect-ratio:16/9;pointer-events:auto;display:block}
.cfglayer .ps2{margin-top:calc(4 * 16px + 26px)}
.cfglayer #pickstack{margin-top:calc(9 * 16px + 26px)}
.pickcard{transform:scale(.28);opacity:0;transition:transform .75s cubic-bezier(.2,.7,.2,1),opacity .3s}
.pickstack.on .pickcard{transform:none;opacity:1}
.ps2 .pickcard{transform:none;opacity:1;cursor:pointer;background:#000}
.cfglayer .cfgpick{position:static;margin-top:14px;padding:0;background:transparent;opacity:1;transform:none;text-align:left}
.stack1 .cfgpick{display:flex;justify-content:flex-end;width:100%;text-align:right}
.cfglayer .cfgpick p{font-size:clamp(14px,1.15vw,17px);line-height:1.4;white-space:nowrap}
.stack2 .cfgpick p{white-space:normal}
.pickcard .capbar{display:none}
.pickcard .watch{left:14px;bottom:14px;height:40px;padding:0 16px 0 14px;font-size:13px}
.pc2 .soon{display:none}
.trust2,.stage,.tablist,.sechead{display:none}
.fcard{transform:translateY(calc(var(--row,1) * -16px))}
.drawer.has-open .fcard:not(.open),.ps2 .drawer.has-open .fcard:not(.open){transform:translateY(calc(-100% - 36px - var(--row,1) * 16px))}
.fcard.open,.ps2 .fcard.open{transform:translateY(calc(-100% - 36px))}
@media (max-width:720px){.cfglayer{display:flex;flex-direction:column}.cfgcol-r{align-items:flex-start}.trustlines,.stack2{display:none}.stack1{align-self:flex-start}.scrolly{height:300vh}}
.trustlines{opacity:calc(var(--rise,0) * var(--dimf,1))}
.stack1,.stack2{width:min(320px,36vh)}
.cfgrow,.trustlines .cfgrow{font-size:clamp(26px,3vw,44px)}
.cfgcol-r{gap:clamp(14px,2.4vh,26px)}
.cfglayer .cfgpick p{font-size:clamp(13px,1.05vw,15px)}
/* right stack: the open card rises just above its drawer; the other tabs stay put (no room above) */
.stack1 .drawer.has-open .fcard:not(.open){transform:translateY(calc(var(--row,1) * -16px))}
.stack1 .fcard.open{transform:translateY(calc(-100% - 36px))}

/* footer veil: solid top half, then a long gradual dissolve to the dome rim; clear inside the dome */
.foot .footfade{display:block;background:linear-gradient(180deg,rgba(246,244,238,1) 0%,rgba(246,244,238,1) 50%,rgba(246,244,238,0) 50%),radial-gradient(circle 68.6vw at 50% calc(100% - var(--band) + 68.6vw),rgba(246,244,238,0) 0%,rgba(246,244,238,0) 100%,rgba(246,244,238,.18) 103%,rgba(246,244,238,.42) 107%,rgba(246,244,238,.68) 111%,rgba(246,244,238,.88) 114%,rgba(246,244,238,1) 117%)}

/* ===== process: four steps, text left, isometric slab scenes right; layers and counters build as each step arrives ===== */
.process .sechead{display:flex;flex-direction:column;gap:14px;margin-bottom:clamp(40px,6vw,88px)}
.process .sechead .h2{font-size:clamp(30px,3.6vw,52px);max-width:16em}
.psteps{display:flex;flex-direction:column;gap:clamp(56px,8vw,120px)}
.pstep{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,72px);align-items:center}
.pstep-text{display:flex;flex-direction:column;gap:14px}
.pstep-h{font-family:var(--display);font-size:clamp(26px,2.6vw,38px);line-height:1.08;letter-spacing:-.01em;margin:0;font-weight:400}
.pstep-p{font-size:clamp(15px,1.15vw,17px);line-height:1.55;color:var(--fg-2);margin:0;max-width:34em}
.stepnums{display:flex;gap:28px;margin-top:10px;flex-wrap:wrap}
.stepnum{display:flex;align-items:baseline;gap:8px}
.stepnum em{font-family:var(--display);font-style:italic;font-size:clamp(28px,2.8vw,40px);line-height:1;font-variant-numeric:tabular-nums}
.stepnum span{font:400 13px/1.2 var(--font);color:var(--fg-3)}
.pstep-art{color:var(--fg);border:1px dashed var(--dash);border-radius:10px;padding:clamp(12px,2vw,28px);background:transparent}
.pstep-art svg{display:block;width:100%;height:auto}
.pstep .layer{opacity:0;transform:translateY(14px);transition:opacity .6s cubic-bezier(.2,.7,.2,1),transform .6s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i) * .22s)}
.pstep.on .layer{opacity:1;transform:none}
@media (max-width:720px){.step{grid-template-columns:1fr}.pstep-art{order:-1}}

/* ===== process v2: step texts scroll on the left, isometric slabs stack up on a sticky stage at right ===== */
.process-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,72px);align-items:start}
.ptexts{display:flex;flex-direction:column}
.ptext{min-height:62vh;display:flex;flex-direction:column;justify-content:center;gap:14px;opacity:.22;transition:opacity .5s}
.ptext.on{opacity:1}
.ptext .eyebrow{color:var(--accent)}
.pstage{position:sticky;top:calc(96px + 4vh);height:min(80vh,780px);overflow:visible}
.slab{position:absolute;left:50%;top:50%;width:min(320px,24vw);height:min(320px,24vw);transform-style:preserve-3d;transform:translate(-50%,-50%) translateY(var(--y,0px)) rotateX(60deg) rotateZ(-45deg);transition:transform .9s cubic-bezier(.2,.7,.2,1),opacity .6s;opacity:0;pointer-events:none}
.slab.in{opacity:1}
.slab .face{position:absolute;inset:0;background:var(--panel);border:1px solid var(--line);color:var(--fg);overflow:hidden}
.slab.paper .face{background:#fff;color:#121212;border-color:#d8d4ca}
.slab .face svg{position:absolute;inset:0;width:100%;height:100%}
.slab .side{position:absolute;background:linear-gradient(90deg,var(--accent),#9a2a37)}
.slab .side.r{left:100%;top:0;width:16px;height:100%;transform-origin:left center;transform:rotateY(-90deg)}
.slab .side.f{top:100%;left:0;width:100%;height:16px;transform-origin:center top;transform:rotateX(90deg)}
.slab-label{position:absolute;right:12px;bottom:12px;transform-origin:100% 100%;transform:rotate(-90deg) translateX(100%);font:600 clamp(26px,2.6vw,38px)/1 var(--mono);letter-spacing:.06em;color:var(--fg);white-space:nowrap}
.slab.paper .slab-label{color:#121212}
.process .sechead{margin-bottom:clamp(24px,4vw,56px)}
@media (max-width:720px){.process-grid{grid-template-columns:1fr}.pstage{display:none}.ptext{min-height:0;opacity:1;padding:24px 0}}
.slab-label{left:14px;right:auto;bottom:6px;transform:none;transform-origin:0 0}
.slab .side.r{display:none}
.slab .side.l{right:100%;left:auto;top:0;width:16px;height:100%;transform-origin:right center;transform:rotateY(90deg);background:linear-gradient(180deg,#9a2a37,var(--accent))}
.slab{top:55%}
.pstage{height:min(84vh,820px)}

/* ===== process v3: always black, four layers, live heading counter ===== */
.process{--bg:#0a0a0a;--panel:#161616;--panel-2:#1d1d1d;--line:#2c2c2c;--line-soft:#222;--fg:#f6f4ee;--fg-2:#cfcbc2;--fg-3:#8f8a80;--fg-4:#5a5750;--dash:#3a3a3a;background:#0a0a0a;color:#f6f4ee}
.process .h2{color:#f6f4ee}
.process .eyebrow{color:var(--fg-3)}
.process .ptext .eyebrow{color:#c9465a}
.process .pstep-p{color:var(--fg-2)}
.process .stepnum span{color:var(--fg-3)}
.ptext{transition:none}
.pstep-h .live{font-style:italic;font-variant-numeric:tabular-nums;display:inline-block;min-width:1.2em;text-align:right}
.slab .face{background:var(--panel);border-color:#333;color:#f6f4ee}
.slab .side{background:linear-gradient(90deg,#7a1f2b,#a8323f)}
.slab .side.l{background:linear-gradient(180deg,#a8323f,#7a1f2b)}
.slab-label{color:#f6f4ee}
.slab.paper .face{background:#fff;color:#121212}
.slab.paper .slab-label{color:#121212}
.process .sechead .h2{font-size:clamp(32px,4vw,58px)}

/* ===== process v4: locked header top-left, texts pin at centre, photographic faces ===== */
.process .wrap.section{padding-top:0;padding-bottom:0}
.process-grid{align-items:start}
.ptexts{position:relative;display:block;padding-top:calc(96px + 10vh)}
.phead{position:sticky;top:calc(96px + 10vh);z-index:2;display:flex;flex-direction:column;gap:14px;padding-bottom:4vh;background:linear-gradient(180deg,#0a0a0a 78%,rgba(10,10,10,0))}
.phead .h2{font-size:clamp(28px,3vw,44px);line-height:1.1}
.pblock{height:115vh;position:relative}
.pblock:first-of-type{margin-top:-6vh}
.pblock:last-of-type{height:95vh}
.ptext{position:sticky;top:46vh;min-height:0;opacity:0;transform:translateY(36px);transition:opacity .32s cubic-bezier(.2,.7,.2,1),transform .32s cubic-bezier(.2,.7,.2,1);padding:0}
.ptext.on{opacity:1!important;transform:none}
.ptext.out{opacity:0!important;transform:translateY(-28px)}
.pstage{position:sticky;top:calc(96px + 4vh);height:min(84vh,820px);margin-bottom:0}
.slab .face img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.slab .face svg{position:absolute;inset:0;width:100%;height:100%}
.slab .face::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 55%,rgba(0,0,0,.45) 100%);pointer-events:none}
.slab.paper .face::after{display:none}
.slab-label{z-index:2;text-shadow:0 1px 8px rgba(0,0,0,.6)}
.slab.paper .slab-label{text-shadow:none}
@media (max-width:720px){.ptexts{padding-top:40px}.phead{position:static}.pblock{height:auto;margin:0 0 32px}.ptext{position:static;opacity:1!important;transform:none!important}}

/* process header CTA; next panel continues the sentence at the same indentation */
.phead .pcta{margin-top:8px;align-self:flex-start;height:44px;padding:0 20px;font-size:14px;color:#fff}
.phead .h2{order:0}
.cfglead{display:flex;flex-direction:column;gap:14px;margin:0}
.cfglead .h2{font-size:clamp(28px,3vw,44px);line-height:1.1;color:var(--fg)}
.cfglead .who em{font-style:italic;display:inline-block;transition:opacity .26s,transform .26s}
.cfglead .who em.out{opacity:0;transform:translateY(-6px)}
.cfgcol.dim .cfglead{opacity:.12;transition:opacity .45s}
.cfglead{transition:opacity .45s}
.cfgcol-r{justify-content:flex-end}
.stack2{align-self:flex-start}

/* configs heading completes the story; stacks sit lower */
.cfglead .h2{font-size:clamp(26px,2.7vw,40px);line-height:1.12}
.cfglead .h2 .muted{color:var(--fg-3)}
.cfglayer{padding-bottom:0}
.cfgcol-r{justify-content:flex-end}
.stack1 .cfgpick[hidden]{display:none}

/* ===== trust grid: 2 columns x 3 rows, dashed hairlines like the proof grid ===== */
.whytrust .sechead{display:flex;flex-direction:column;gap:14px;margin-bottom:clamp(32px,4vw,56px)}
.tgrid{display:grid;grid-template-columns:1fr 1fr;border-top:1px dashed var(--dash);border-left:1px dashed var(--dash)}
.tcard{border-right:1px dashed var(--dash);border-bottom:1px dashed var(--dash);padding:clamp(24px,3vw,44px);display:flex;flex-direction:column;gap:14px;min-height:280px}
.tcard h3{font-family:var(--display);font-weight:400;font-size:clamp(24px,2.3vw,34px);line-height:1.1;letter-spacing:-.01em;margin:0}
.tcard p{margin:0;font-size:clamp(14px,1.1vw,16px);line-height:1.55;color:var(--fg-2);max-width:40em}
.tcard .eyebrow{color:var(--fg-3)}
.tcard .btn{margin-top:auto;align-self:flex-start;color:#fff}
.tcard.tvid{padding:0;background:#000}
.tcard.tvid .pickcard{position:absolute;inset:0;aspect-ratio:auto;transform:none;opacity:1;cursor:pointer;border:0;border-radius:0}
.tcard.tvid{position:relative}
.tcard.tvid .tv-cap{position:absolute;left:clamp(24px,3vw,44px);top:clamp(24px,3vw,44px);display:flex;flex-direction:column;gap:8px;color:#fff;z-index:2}
.tcard.tvid .tv-cap .eyebrow{color:rgba(255,255,255,.6)}
.tcard.tvid .tv-cap strong{font:600 22px/1.1 var(--font)}
.tcard.tvid .watch{left:clamp(24px,3vw,44px);bottom:clamp(24px,3vw,44px);height:42px;padding:0 18px 0 16px;font-size:14px}
@media (max-width:720px){.tgrid{grid-template-columns:1fr}.tcard{min-height:0}.tcard.tvid{min-height:260px}}

/* ===== trust cards, Endra style: rendered (non-functional) UI panel on top, centred title + text below ===== */
.whytrust .sechead{margin-bottom:clamp(36px,5vw,72px)}
.egrid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,1.6vw,24px)}
.ecard{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:clamp(28px,3.2vw,56px) clamp(24px,3vw,56px) clamp(32px,3.6vw,64px);display:flex;flex-direction:column;gap:clamp(28px,3vw,48px)}
.ecard-text{text-align:center;max-width:36em;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.ecard-text h3{font-family:var(--font);font-weight:500;font-size:clamp(22px,2vw,30px);line-height:1.15;letter-spacing:-.01em;margin:0;color:var(--fg)}
.ecard-text p{margin:0;font-size:clamp(15px,1.15vw,17px);line-height:1.55;color:var(--fg-2)}
.mock{background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:16px 18px;font:400 12.5px/1.35 var(--font);color:var(--fg);display:flex;flex-direction:column;gap:8px;user-select:none;cursor:default;min-height:260px}
.mock-head{display:flex;justify-content:space-between;align-items:center;font-size:13px;color:var(--fg);padding-bottom:10px;border-bottom:1px solid var(--line);margin-bottom:4px}
.mock-x{color:var(--fg-3);font-size:16px;line-height:1}
.mock-row,.mock-field{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,2fr) auto;gap:12px;align-items:center;padding:9px 10px;border:1px solid transparent;border-radius:8px;transition:background .2s,border-color .2s}
.mock-row.th{color:var(--fg-3);font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;padding-bottom:4px}
.mock-row:not(.th):hover,.mock-field:hover{background:var(--panel-2);border-color:var(--line)}
.mock-row.hl,.mock-field.hl{border-color:var(--fg-4)}
.mock:hover .mock-row.hl,.mock:hover .mock-field.hl{border-color:var(--fg);background:var(--panel-2)}
.mock-row.dim{opacity:.45}
.mock-row:has(.mock-who){grid-template-columns:minmax(0,.5fr) minmax(0,1.6fr) minmax(0,.9fr) auto}
.mock-row:has(.mock-badge):not(:has(.mock-who)){grid-template-columns:minmax(0,1.1fr) minmax(0,2fr) auto}
.mock .th,.mock .th + .mock-row,.mock .th ~ .mock-row{grid-template-columns:minmax(0,1.6fr) minmax(0,.9fr) minmax(0,.9fr) auto}
.mock-l{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-3)}
.mock-who{font-family:var(--mono);font-size:10.5px;color:var(--fg-2)}
.mock-badge{font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;padding:4px 8px;border-radius:999px;border:1px solid var(--line);color:var(--fg-2);white-space:nowrap;justify-self:end}
.mock-badge.ok{border-color:transparent;background:var(--fg);color:var(--bg)}
.mock-badge.warn{border-color:var(--accent);color:var(--accent)}
.mock-sep{height:1px;background:var(--line);margin:4px 0}
.mock-field{grid-template-columns:minmax(0,.9fr) minmax(0,2.4fr)}
.mock-foot{display:flex;gap:10px;align-items:center;margin-top:auto;padding-top:10px}
.mock-btn{display:inline-flex;align-items:center;height:32px;padding:0 14px;border-radius:999px;background:var(--fg);color:var(--bg);font-size:12.5px;font-weight:500}
.mock-btn.ghost{background:transparent;color:var(--fg);border:1px solid var(--line)}
.mock-note{font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;color:var(--fg-3)}
.mock-drop{border:1px dashed var(--dash);border-radius:10px;padding:22px 16px;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;color:var(--fg-2)}
.mock-seg{display:inline-flex;border:1px solid var(--line);border-radius:999px;overflow:hidden}
.mock-seg i{font-style:normal;padding:4px 10px;font-size:11px;color:var(--fg-3)}
.mock-seg i.on{background:var(--fg);color:var(--bg)}
.ecard .evid{position:relative;aspect-ratio:16/10;transform:none;opacity:1;border-radius:12px;overflow:hidden;cursor:pointer;background:#000;border:1px solid var(--line)}
.ecard .evid .tv-cap{position:absolute;left:18px;top:18px;display:flex;flex-direction:column;gap:6px;color:#fff;z-index:2}
.ecard .evid .tv-cap .eyebrow{color:rgba(255,255,255,.6)}
.ecard .evid .tv-cap strong{font:600 20px/1.1 var(--font)}
.ecard .evid .watch{left:18px;bottom:18px;height:40px;padding:0 16px 0 14px;font-size:13px}
.tgrid,.tcard{display:none}
.scrolly{height:360vh}
.cfgcol-l{justify-content:flex-end}
@media (max-width:720px){.egrid{grid-template-columns:1fr}.mock{min-height:0}}

/* ===== consistency pass: one pill spec, one Watch spec, one text-link style ===== */
.btn,.btn.solid,.nav .right .btn,.tile .tpill,.phead .pcta,.ecard .btn,.foot .btn{height:44px;padding:0 20px;font-size:14px;font-weight:500;border-radius:999px;gap:8px;line-height:1}
.btn.lg{height:52px;padding:0 26px;font-size:15px}
.pickcard .watch,.pc2 .watch,.ecard .evid .watch,.tcard.tvid .watch{left:14px;bottom:14px;height:42px;padding:0 18px 0 16px;font:500 14px/1 var(--font);border-radius:999px;gap:10px}
.pickcard .watch .tri{border-width:7px 0 7px 12px}
.menu .top{height:40px;padding:0 14px;font-size:14px;font-weight:500}
a.tl{color:inherit;text-decoration:underline;text-decoration-color:var(--fg-4);text-underline-offset:3px;transition:text-decoration-color .2s}
a.tl:hover{text-decoration-color:currentColor}
.ecard.wide{grid-column:1/-1}
.ecard.wide .evid{aspect-ratio:21/9}
.ecard.wide .ecard-text{max-width:40em}
.ecard .evid.photo{cursor:default}
.ecard .evid .pickimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(1) brightness(.75)}
.ecard .evid.photo .static{opacity:.22}
.ecard .evid .tv-cap.br{left:auto;top:auto;right:22px;bottom:20px;text-align:right;align-items:flex-end}
.ecard .evid .tv-cap.br strong{font-size:clamp(22px,2.2vw,32px)}
.tile .tpill{font-weight:500}

/* ===== type scale: one h3 and one body size for every card, step and FAQ ===== */
.pstep-h,.ecard-text h3,.tcard h3,.faq summary,.sec-card h3{font-family:var(--display);font-weight:400;font-size:clamp(24px,2.2vw,32px);line-height:1.12;letter-spacing:-.01em}
.pstep-p,.ecard-text p,.tcard p,.faq p,.sec-card p,.cfgpick p,.lead{font-size:clamp(15px,1.1vw,16px);line-height:1.55}
.ecard-text{gap:10px;text-align:left;margin:0;max-width:none}
.ecard-text h3{color:var(--fg)}
.ecard{gap:clamp(22px,2.4vw,36px)}
.ecard.bare{background:transparent;border:0;padding:0;gap:0}
.ecard.bare .evid{border:0;border-radius:18px}
.ecard .evid.photo .static{opacity:.26;image-rendering:pixelated}
.ecard .evid.photo .pickimg{filter:grayscale(1) brightness(.9) contrast(.9)}
.ecard .evid.photo .static{opacity:.2}
.ecard .evid.photo .soonpill{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:inline-flex;align-items:center;gap:14px;height:52px;padding:0 10px 0 22px;border-radius:999px;background:var(--bg);color:var(--fg);border:1px solid var(--line);z-index:2;white-space:nowrap}
.ecard .evid.photo .soonpill .eyebrow{color:var(--fg-3)}
.ecard .evid.photo .soonpill strong{display:inline-flex;align-items:center;height:36px;padding:0 16px;border-radius:999px;background:var(--fg);color:var(--bg);font:500 14px/1 var(--font)}

/* ===== trust cards v3: drawings and charts first ===== */
.chart,.chart-box svg{display:block;width:100%;height:auto;color:var(--fg)}
.chart-box{min-height:200px}
.chart .pt{cursor:help}
.chart .pt:hover circle{stroke:currentColor;stroke-width:2}
.ecard .chart,.ecard .chart-box,.ecard .sheet{background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:16px 18px}
.ecard .chart-box .tochart{font-family:var(--font)}
.sheet{position:relative;aspect-ratio:16/10;color:var(--fg);overflow:hidden}
.sheet::before{content:"";position:absolute;inset:10px;border:1px solid var(--line);pointer-events:none}
.sheet-plan{position:absolute;inset:22px 22px 60px 22px}
.sheet-plan svg{width:100%;height:100%;display:block}
.sheet-tb{position:absolute;left:22px;right:22px;bottom:18px;display:grid;grid-template-columns:1.3fr 1fr 1fr 1.2fr;border:1px solid var(--line);font:400 9.5px/1.2 var(--mono);letter-spacing:.04em;color:var(--fg-2)}
.sheet-tb span{padding:7px 8px;border-right:1px solid var(--line)}
.sheet-tb span:last-child{border-right:0;color:var(--fg)}
.sheet-stamp{position:absolute;right:34px;bottom:62px;width:54px;height:54px;border-radius:50%;background:var(--accent);display:flex;align-items:center;justify-content:center;box-shadow:inset 0 0 0 4px var(--accent),inset 0 0 0 5px rgba(255,255,255,.8);transform:rotate(-8deg)}
.sheet-stamp span{font:600 11px/1 var(--mono);color:#fff;letter-spacing:.1em}
.ecard .evid.photo .soonpill.small{top:auto;bottom:18px;transform:translateX(-50%);height:40px;padding:0 6px 0 16px}
.ecard .evid.photo .soonpill.small strong{height:28px;padding:0 12px;font-size:12.5px}
.ecard .evid.photo .pitch{position:absolute;max-width:62%;font-family:var(--display);font-size:clamp(26px,3.2vw,52px);line-height:1.05;letter-spacing:-.01em;color:rgba(255,255,255,.82);z-index:2;pointer-events:none}
.ecard .evid.photo .pitch.tl{left:clamp(18px,2.6vw,40px);top:clamp(18px,2.6vw,40px);text-align:left}
.ecard .evid.photo .pitch.br{right:clamp(18px,2.6vw,40px);bottom:clamp(60px,7vw,90px);text-align:right}
.ecard .evid.photo .pitch span{display:inline-block;opacity:0;transform:translateY(10px);transition:opacity .5s,transform .5s}
.ecard .evid.photo .pitch.on span{opacity:1;transform:none}
.ecard .evid.photo .pickimg{filter:grayscale(1) brightness(.6) contrast(.9)}

/* ===== trust cards: quieter panels, centred text on one baseline ===== */
.ecard{display:grid;grid-template-rows:auto 1fr;gap:clamp(22px,2.4vw,36px)}
.ecard .chart,.ecard .chart-box,.ecard .sheet,.ecard .mock{background:var(--bg);border-color:var(--line-soft);min-height:0;aspect-ratio:16/9;box-sizing:border-box;overflow:hidden}
.ecard .chart-box svg,.ecard .chart{height:100%}
.ecard .mock{aspect-ratio:16/9;display:flex}
.ecard-text{text-align:center;align-items:center;margin:0 auto;max-width:30em;align-self:start;gap:8px}
.ecard-text p{color:var(--fg-3)}
.mock-badge.ok{background:transparent;color:var(--fg-2);border-color:var(--line)}
.mock-btn{background:var(--panel-2);color:var(--fg);border:1px solid var(--line)}
.mock-seg i.on.soft{background:var(--panel-2);color:var(--fg)}
.sheet-stamp{background:var(--accent)}

/* ===== FAQ + Security, Endra layout ===== */
.h2.big{font-size:clamp(44px,6.4vw,96px);line-height:.98;letter-spacing:-.02em}
.faq2 .h2.big{margin-bottom:clamp(48px,7vw,110px)}
.faqcols{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(40px,6vw,96px);align-items:start}
.faq2 .faq{border:0;background:transparent}
.faq2 .faq details{border:0}
.faq2 .faq summary{justify-content:flex-start;gap:28px;padding:22px 0;font-family:var(--font);font-size:clamp(16px,1.3vw,20px);font-weight:400}
.faq2 .faq summary .pm{order:-1;width:auto;height:auto;flex:0 0 auto;border:0;color:var(--fg);width:14px;height:14px}
.faq2 .faq summary .pm::before,.faq2 .faq summary .pm::after{width:14px;height:1.5px}
.faq2 .faq .ans{padding:0 0 22px 42px;color:var(--fg-2);max-width:56ch}
.sec2-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:start}
.sec2 .lead{margin-top:28px;color:var(--fg-2);max-width:36em}
.certs{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:clamp(28px,3.4vw,48px)}
.certs li{display:flex;align-items:center;gap:22px;font-size:clamp(16px,1.3vw,20px);color:var(--fg)}
.certs svg{width:52px;height:52px;flex:0 0 52px;color:var(--fg)}
.badges,.badge-tile{display:none}
@media (max-width:720px){.faqcols,.sec2-grid{grid-template-columns:1fr}}
.ecard .evid.photo .pitch{font-size:clamp(34px,4.6vw,76px);line-height:1.02;max-width:70%;color:rgba(255,255,255,.9)}
.ecard .evid.photo .pitch span{transition:opacity .9s ease,transform .9s ease;transform:translateY(14px)}
.ecard .evid.photo .pickimg{filter:grayscale(1) brightness(.5) contrast(.9)}
.ecard.wide .evid{aspect-ratio:2/1}

/* ===== footer v2: dome render, masked to its own circle so the black surround is transparent ===== */
.foot{--band:29.27vw;padding-bottom:0}
.foot .footvid{position:relative;left:auto;right:auto;top:auto;bottom:auto;width:100%;height:auto;aspect-ratio:1920/562;max-height:none;min-height:0;margin:0;display:block;object-fit:fill;clip-path:none;z-index:0;
  -webkit-mask-image:radial-gradient(circle 70.6vw at 50% 71.375vw,#000 0,#000 calc(70.6vw - 10px),transparent 70.6vw);mask-image:radial-gradient(circle 70.6vw at 50% 71.375vw,#000 0,#000 calc(70.6vw - 10px),transparent 70.6vw)}
.foot .footfade,.foot .footblur{display:none}
.foot > .wrap{padding-bottom:0!important}
/* headings in FAQ and Security match the section headers above */
.h2.big{font-size:clamp(28px,3vw,44px);line-height:1.1;letter-spacing:-.01em}
.faq2 .h2.big{margin-bottom:clamp(32px,4vw,56px)}
.sec2 .lead{margin-top:16px}
.foot .footvid{filter:grayscale(1) brightness(.78) contrast(1.15);mix-blend-mode:normal}
.foot{display:flex;flex-direction:column}
.foot > .wrap{order:0}
.foot .footvid{order:10;margin-top:clamp(24px,4vh,48px)}
/* CTA band never changes; only the Book demo pill reacts */
.cta,.cta:hover{background-color:var(--accent)!important;transition:none}
.cta:hover .cta-btn{background:var(--bg);border-color:var(--bg);color:var(--fg)}
.cta .cta-btn:hover{background:var(--fg)!important;border-color:var(--fg)!important;color:var(--bg)!important}
.ecard .evid.photo .pitch span{display:inline;white-space:pre-wrap}

/* spacing: Secure by default sits closer to the CTA band */
#security.section{padding-bottom:clamp(32px,4vw,56px)}
#demo.section{padding-top:clamp(24px,3vw,40px)}

/* ===== mobile pass ===== */
@media (max-width:720px){
  .announce{padding:0 12px}
  .announce a{display:flex;max-width:100%;overflow:hidden;white-space:nowrap}
  .announce a > *{overflow:hidden;text-overflow:ellipsis}
  .ecard .evid.photo .pitch{font-size:clamp(22px,7.2vw,36px);max-width:78%;line-height:1.08}
  .ecard .evid.photo .pitch.br{bottom:clamp(56px,16vw,80px)}
  .ecard.wide .evid{aspect-ratio:4/3}
  .ecard .evid.photo .soonpill.small{height:34px;padding:0 4px 0 12px;bottom:12px}
  .ecard .evid.photo .soonpill.small .eyebrow{font-size:10px}
  .ecard .evid.photo .soonpill.small strong{height:26px;padding:0 10px;font-size:12px}
  .ecard{padding:20px 16px 26px}
  .mock{padding:12px;font-size:11.5px}
  .mock-row,.mock-field{gap:8px;padding:7px 6px}
  .cta{padding:40px 20px}
  .cta .h2{font-size:clamp(28px,8vw,40px)}
  .foot .footvid{-webkit-mask-image:none;mask-image:none;width:160vw;margin-left:-30vw;aspect-ratio:1920/562;
    -webkit-mask-image:radial-gradient(circle 112.96vw at 50% 114.2vw,#000 0,#000 calc(112.96vw - 8px),transparent 112.96vw);mask-image:radial-gradient(circle 112.96vw at 50% 114.2vw,#000 0,#000 calc(112.96vw - 8px),transparent 112.96vw)}
  .phead .h2{font-size:clamp(24px,6.4vw,32px)}
  .pstep-h{font-size:clamp(22px,6vw,28px)}
  .sechead .h2,.cfglead .h2,.h2.big{font-size:clamp(24px,6.4vw,32px)}
  .faq2 .faq summary{padding:16px 0;font-size:16px}
  .certs li{font-size:16px;gap:16px}
  .certs svg{width:40px;height:40px;flex-basis:40px}
}

/* tighter rows between the trust cards */
.egrid{gap:clamp(10px,1.1vw,16px)}
.ecard{padding:clamp(22px,2.4vw,40px) clamp(20px,2.4vw,40px) clamp(24px,2.6vw,44px);gap:clamp(18px,2vw,28px)}
.whytrust .sechead{margin-bottom:clamp(28px,3.6vw,52px)}

/* slab edges: neon red gradient instead of flat maroon */
.slab .side.f{background:linear-gradient(90deg,#5a1420 0%,#9a1f33 35%,#e23a52 75%,#ff7a8a 100%);box-shadow:0 0 22px rgba(255,90,110,.28)}
.slab .side.l{background:linear-gradient(180deg,#ff7a8a 0%,#e23a52 30%,#9a1f33 70%,#5a1420 100%);box-shadow:0 0 22px rgba(255,90,110,.28)}
.slab.paper .side.f{background:linear-gradient(90deg,#9a1f33 0%,#e23a52 50%,#ffb36b 100%)}
.slab.paper .side.l{background:linear-gradient(180deg,#ffb36b 0%,#e23a52 50%,#9a1f33 100%)}
/* slab edges sit under the face: no glow spilling onto the drawing, label clear of the edge */
.slab .side{box-shadow:none!important;backface-visibility:hidden}
.slab .side.f{transform:translateZ(-0.6px) rotateX(90deg)}
.slab .side.l{transform:translateZ(-0.6px) rotateY(90deg)}
.slab .face{transform:translateZ(0.6px)}
.slab-label{bottom:16px;left:18px}
.slab .side{backface-visibility:visible}
.slab .side.f{transform:rotateX(90deg)}
.slab .side.l{transform:rotateY(90deg)}
.slab .face{transform:none}
/* edges extruded BEHIND the face plane, so the face always draws on top of them */
.slab .side.f{transform:rotateX(-90deg)}
.slab .side.l{transform:rotateY(-90deg)}
.slab .face{z-index:2}
.slab .side{z-index:1}

/* ===== slab walls: black with white hairlines at rest; the newest AI layer gets an iridescent, moving wall ===== */
.slab .side{background:#0a0a0a!important;border:1px solid rgba(255,255,255,.7);box-sizing:border-box;overflow:hidden}
.slab .side::after{content:"";position:absolute;inset:-1px;opacity:0;transition:opacity .7s ease;
  background:linear-gradient(90deg,#7a1f2b 0%,#e02d4a 18%,#ff5a3c 34%,#ffd21f 52%,#7cff4a 68%,#19e68c 82%,#ff2d7a 100%);background-size:300% 100%;
  animation:irid 6s linear infinite}
.slab .side.l::after{background:linear-gradient(180deg,#7a1f2b 0%,#e02d4a 18%,#ff5a3c 34%,#ffd21f 52%,#7cff4a 68%,#19e68c 82%,#ff2d7a 100%);background-size:100% 300%;animation:iridv 6s linear infinite}
.slab.top .side::after{opacity:1}
.slab.top .side{border-color:transparent}
@keyframes irid{0%{background-position:0 0}100%{background-position:300% 0}}
@keyframes iridv{0%{background-position:0 0}100%{background-position:0 300%}}
.slab.paper .side.f,.slab.paper .side.l{background:#0a0a0a}
.trust-eyebrow{margin:0 0 18px;color:var(--fg-3)}
.whytrust .sechead{margin-bottom:clamp(20px,2.6vw,36px)}
/* snappier arrivals */
.slab{transition:transform .45s cubic-bezier(.2,.8,.2,1),opacity .3s}
.ptext{transition:opacity .2s cubic-bezier(.2,.7,.2,1),transform .2s cubic-bezier(.2,.7,.2,1)}
.slab .side::after{transition:opacity .4s ease}
/* one continuous iridescent flow across the corner where the two walls meet */
.slab .side.f::after{background:linear-gradient(90deg,#7a1f2b,#e02d4a,#ff5a3c,#ffd21f,#7cff4a,#19e68c,#ff2d7a,#7a1f2b);background-size:300% 100%;animation:iridf 7s linear infinite}
.slab .side.l::after{background:linear-gradient(0deg,#7a1f2b,#e02d4a,#ff5a3c,#ffd21f,#7cff4a,#19e68c,#ff2d7a,#7a1f2b);background-size:100% 300%;animation:iridl 7s linear infinite}
@keyframes iridf{0%{background-position:0 0}100%{background-position:300% 0}}
@keyframes iridl{0%{background-position:0 100%}100%{background-position:0 -200%}}
.slab-label{font-size:clamp(22px,2.2vw,32px)}

/* ===== trust cards: no boxes. image, heading, subtext. ===== */
.ecard{background:transparent;border:0;border-radius:0;padding:0 0 clamp(16px,2vw,28px)}
.ecard .chart,.ecard .chart-box,.ecard .sheet,.ecard .mock{background:transparent;border:0;border-radius:0;padding:0}
.egrid{gap:clamp(28px,4vw,64px) clamp(28px,4vw,64px)}
.ecard-text{text-align:left;align-items:flex-start;margin:0;max-width:none;gap:8px}
.ecard-text h3{text-align:left}
.ecard-text p{color:var(--fg-3)}
/* text inside the images matches the subtext: same family, size and colour */
.chart text,.chart-box svg text{font-family:var(--font)!important;font-size:15px!important;fill:var(--fg-3)!important;font-weight:400!important}
.sheet{border:0}
.sheet::before{display:none}
.sheet-tb{font-family:var(--font);font-size:12px;letter-spacing:0;text-transform:none;color:var(--fg-3)}
.sheet-tb span:last-child{color:var(--fg-3)}
.chart .pt{cursor:pointer}
.chart a.pt circle{transition:r .2s}
.chart a.pt:focus-visible circle{stroke:var(--fg);stroke-width:2}
/* story text: emphasis in the serif italic, lines break where written */
.ecard .evid.photo .pitch em{font-style:italic;color:#fff}
.ecard .evid.photo .pitch br{display:block}
@media (max-width:720px){.egrid{gap:40px}}
/* image text: the subtext style, scaled in SVG units (about 15px at card width) */
.chart text,.chart-box svg text{font-size:12px!important}
.sheet-tb{font-size:11px}

/* =====================================================================
   TYPE SCALE: four sizes, one spacing rhythm.
   display  : hero h1, CTA band h2                      --t-display
   heading  : every section h2 (serif)                  --t-h
   title    : h3s, step headings, FAQ questions, certs  --t-title
   body     : paragraphs, sublines, nav, buttons, links --t-body
   mono eyebrows stay at 12px / .14em.
   ===================================================================== */
:root{--t-display:clamp(40px,5.2vw,72px);--t-h:clamp(28px,3vw,44px);--t-title:clamp(19px,1.5vw,22px);--t-body:clamp(15px,1.1vw,16px);--sp-sec:clamp(72px,9vw,150px);--sp-head:clamp(28px,3.6vw,52px);--sp-row:clamp(16px,1.8vw,24px)}
.h1{font-size:var(--t-display)}
.cta .h2{font-size:var(--t-display)}
.h2,.h2.big,.sechead .h2,.cfglead .h2,.phead .h2,.process .sechead .h2,.trusthead{font-size:var(--t-h);line-height:1.1;letter-spacing:-.01em}
.pstep-h,.ecard-text h3,.tcard h3,.certs li,.faq2 .faq summary,.faq summary{font-family:var(--font);font-weight:400;font-size:var(--t-title);line-height:1.3;letter-spacing:0}
.pstep-h,.ecard-text h3{font-family:var(--display);font-size:clamp(24px,2.1vw,30px);line-height:1.15;letter-spacing:-.01em}
.pstep-p,.ecard-text p,.faq .ans,.lead,.sec2 .lead,.cfgpick p,.tile .lbl,.foot a,.menu .sub a,.announce span,.faq2 .faq summary,.certs li{font-size:var(--t-body);line-height:1.55}
.faq2 .faq summary,.certs li{font-size:var(--t-title);line-height:1.3}
.btn,.btn.solid,.nav .right .btn,.tile .tpill,.phead .pcta,.menu .top,.btn.lg,.cta .cta-btn{font-size:var(--t-body);font-weight:500}
.btn.lg{height:48px;padding:0 22px}
.tile .num{font-size:clamp(56px,7vw,104px)}
/* spacing rhythm */
.section{padding-block:var(--sp-sec)}
.sechead,.whytrust .sechead,.process .sechead{margin-bottom:var(--sp-head)}
.faq2 .h2.big{margin-bottom:var(--sp-head)}
.faq2 .faq summary{padding:var(--sp-row) 0}
.faq2 .faq .ans{padding:0 0 var(--sp-row) 42px}
.certs{gap:calc(var(--sp-row) * 2)}
.sec2 .lead{margin-top:var(--sp-row)}
.egrid{row-gap:calc(var(--sp-row) * 2.5)}
.ecard-text{gap:6px}
#security.section{padding-top:var(--sp-sec);padding-bottom:calc(var(--sp-sec) * .5)}
#demo.section{padding-top:calc(var(--sp-sec) * .4)}
.ptext{gap:var(--sp-row)}
.phead{gap:var(--sp-row)}
.phead .pcta{margin-top:0}
.menu .sub a,.menu .sub span,.menu .sub .name,.foot .cols a{font-size:var(--t-body)}
.h1,.cta .h2{font-size:var(--t-display)}
/* trust cards: dashed rounded border, centred text */
.ecard{border:1px dashed var(--dash);border-radius:16px;padding:clamp(20px,2.2vw,32px) clamp(20px,2.2vw,32px) clamp(24px,2.6vw,36px)}
.ecard.bare{border:0;padding:0}
.ecard-text{text-align:center;align-items:center;margin:0 auto;max-width:32em}
.ecard-text h3{text-align:center}
.egrid{row-gap:var(--sp-row);column-gap:var(--sp-row)}

/* ===== slab overlays: scroll-driven, 0..1 via --p; spill past the sheet on purpose ===== */
.slab .face{overflow:visible}
.slab .face img{clip-path:inset(0)}
.slab .anim{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:3}
.slab .anim .draw{stroke-dashoffset:calc(100 - 100 * min(1, var(--p,0) * 1.6));transition:stroke-dashoffset .1s linear}
.slab .anim .pin,.slab .anim .tag,.slab .anim .tick,.slab .anim .quote,.slab .anim .range,.slab .anim .gate,.slab .anim .bars > g{opacity:clamp(0,calc((var(--p,0) - var(--d,0)) * 8),1);transition:opacity .15s}
.slab .anim .pin{transform:translateY(calc(-28px * (1 - clamp(0,calc((var(--p,0) - var(--d,0)) * 8),1))))}
.slab .anim .tag,.slab .anim .quote,.slab .anim .gate{transform:translateX(calc(16px * (1 - clamp(0,calc((var(--p,0) - var(--d,0)) * 8),1))))}
.slab .anim .ghost{opacity:calc(1 - var(--p,0));transform:translate(calc(var(--dx) * (1 - var(--p,0))),calc(var(--dy) * (1 - var(--p,0))))}
.slab .anim .winner{opacity:clamp(0,calc((var(--p,0) - .75) * 6),1)}
.slab .anim .count,.slab .anim .countl{opacity:clamp(0,calc(var(--p,0) * 4),1)}
.slab .anim .bar{transform-origin:110px 50%;transform:scaleX(clamp(0,calc((var(--p,0) - var(--d,0)) * 3),1))}
.slab .anim .num{opacity:clamp(0,calc((var(--p,0) - .4) * 5),1)}
.slab .anim .stamp{transform-origin:236px 236px;transform:scale(calc(1 + 2.2 * (1 - clamp(0,calc((var(--p,0) - .5) * 5),1)))) rotate(-8deg);opacity:clamp(0,calc((var(--p,0) - .5) * 5),1)}

/* trust grid: cells touch, one dashed hairline between them, rounded outer frame */
.egrid{gap:0;border:1px dashed var(--dash);border-radius:18px;overflow:hidden}
.ecard{border:0;border-right:1px dashed var(--dash);border-bottom:1px dashed var(--dash);border-radius:0}
.ecard:nth-child(2n){border-right:0}
.ecard.wide,.ecard.bare{border-right:0;border-bottom:0;padding:0}
.ecard.bare .evid{border-radius:0}
.trust-eyebrow{display:none}

/* FAQ questions and security items: body size, dark gray, like card subtext */
.faq2 .faq summary,.certs li,.sec2 .lead{font-size:var(--t-body);line-height:1.5;color:var(--fg-2)}
.faq2 .faq summary .pm{color:var(--fg-2)}
.faq2 .faq .ans{color:var(--fg-3)}
.certs{gap:calc(var(--sp-row) * 1.4)}
.certs svg{width:44px;height:44px;flex-basis:44px;color:var(--fg-2)}
/* overlays live only while their layer is the active one; everything (incl. spill-outs) fades the moment the next layer lands */
.slab .anim{opacity:0;transition:opacity .35s ease}
.slab.top .anim,.slab[data-i="0"].in:not(.settled) .anim{opacity:1}
.slab.settled .anim{opacity:0!important}
.sheet-stamp{background:var(--fg);box-shadow:inset 0 0 0 4px var(--fg),inset 0 0 0 5px var(--bg)}
.sheet-stamp span{color:var(--bg)}
.chart a.pt circle{fill:currentColor}
.chart .pt:first-of-type circle{stroke:currentColor;stroke-width:2;fill:var(--bg)}
/* face clips its photo again; the overlay is a sibling of the face, free to spill */
.slab .face{overflow:hidden}
.slab .face img{clip-path:none}
.slab > .anim{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:3}
.slab .anim.mono,.slab .anim .mono{font-family:var(--mono)}
.slab .anim .serif{font-family:var(--display)}
/* brand pill inverts on hover */
.brand.pill{transition:background .2s}
.brand.pill:hover{background:var(--fg)}
.brand.pill .logo{transition:filter .2s}
.brand.pill:hover .logo{filter:invert(1)}

/* ===== mobile polish ===== */
@media (max-width:600px){
  .announce a{font-size:12px;gap:8px}
  .announce a .tag{display:none}
  .sheet-tb{grid-template-columns:1fr 1fr}
  .sheet-tb span:nth-child(2),.sheet-tb span:nth-child(3){display:none}
  .sheet-tb{font-size:10px}
  .sheet-stamp{width:44px;height:44px;right:22px;bottom:54px}
  .ecard-text h3{font-size:22px}
  .cta .lead{font-size:15px}
  .foot .cols{grid-template-columns:1fr 1fr;gap:24px}
  .egrid{border-radius:14px}
  .ecard .evid.photo .pitch{font-size:clamp(20px,6.4vw,30px);max-width:82%}
  .ecard .evid.photo .pitch.br{bottom:64px}
  .pstep-p{font-size:15px}
  .phead{position:static;background:none;padding-bottom:0}
  .ptexts{padding-top:24px}
}
@media (max-width:720px){
  .pstage{display:block;position:relative;top:auto;height:62vw;margin:8px 0 0}
  .slab{width:52vw;height:52vw;left:50%;top:50%}
  .process .ptexts{display:flex;flex-direction:column}
  .process .pstage{order:1}
  .process-grid{display:flex;flex-direction:column}
  .pblock{height:auto;margin:0 0 28px}
  .pblock:first-of-type{margin-top:0}
  .ptext{position:static;opacity:1!important;transform:none!important}
  .slab .anim{display:none}
}
@media (max-width:720px){
  .pstage{height:120vw;overflow:hidden;margin:16px 0 0}
  .slab{width:44vw;height:44vw;left:50%;top:62%;transform:translate(-50%,-50%) translateY(calc(var(--y,0px) * .55)) rotateX(60deg) rotateZ(-45deg)}
  .slab.in{opacity:1}
}
@media (max-width:720px){.pstage{width:100%;align-self:stretch;height:110vw}.slab{top:58%}}
@media (max-width:720px){.pstage{height:92vw}.slab{top:62%}}

/* ===== phone layout, pass 2 ===== */
.footimg{display:none}
@media (max-width:720px){
  :root{--annh:60px}
  .announce{height:auto;min-height:36px;padding:9px 14px;white-space:normal;line-height:1.3}
  .announce a{white-space:normal;text-align:center;display:inline;font-size:13px}
  .announce a .tag{display:none}
  .announce a .arr{display:none}
  .nav{top:calc(var(--annh) + 14px + env(safe-area-inset-top,0px))}
  body{padding-top:calc(var(--annh) + 110px + env(safe-area-inset-top,0px))}
  .hero-section{margin-top:calc(-1 * (var(--annh) + 110px) - env(safe-area-inset-top,0px))}
  /* hero: pre-rendered mobile loop, no blend tricks */
  .hero .vid{filter:none!important;mix-blend-mode:normal!important;transform:none!important;opacity:1!important}
  .hero{min-height:78vh}
  /* bench: 2x2, rest hidden */
  .grid6 .cell:nth-of-type(n+5){display:none}
  /* how it works: header + stack only */
  .process .ptext{display:none}
  .process .ptexts{padding-top:28px;padding-bottom:0}
  .phead{position:static;background:none;padding-bottom:0;gap:14px}
  .phead .h2{font-size:var(--t-h);line-height:1.1}
  .process .wrap.section{padding-bottom:40px}
  .pstage{height:96vw;margin:12px 0 0}
  .slab{width:46vw;height:46vw;top:60%}
  .slab-label{font-size:clamp(14px,3.6vw,18px);left:10px;bottom:10px}
  /* trust cards: natural heights, no overlap */
  .ecard{display:flex;flex-direction:column;gap:18px}
  .ecard .chart,.ecard .chart-box,.ecard .sheet,.ecard .mock{height:auto;aspect-ratio:auto}
  .ecard .chart{width:100%;height:auto}
  .ecard .chart-box svg{height:auto}
  .ecard .sheet{aspect-ratio:16/10}
  /* footer: still image instead of the video */
  .foot .footvid{display:none}
  .footimg{display:block;order:10;width:160vw;margin:24px 0 0 -30vw;aspect-ratio:1920/562;object-fit:fill;
    -webkit-mask-image:radial-gradient(circle 112.96vw at 50% 114.2vw,#000 0,#000 calc(112.96vw - 8px),transparent 112.96vw);mask-image:radial-gradient(circle 112.96vw at 50% 114.2vw,#000 0,#000 calc(112.96vw - 8px),transparent 112.96vw)}
}
/* charts: size from the viewBox, never from a percentage height (Safari) */
.ecard .chart{height:auto;aspect-ratio:16/9;width:100%}
.ecard .chart-box{height:auto;aspect-ratio:16/9}
.ecard .chart-box svg{height:auto}
@media (max-width:720px){.footimg{filter:grayscale(1) brightness(.78) contrast(1.15)}}
@media (max-width:720px){
  .process .pblock,.process .pblock:first-of-type,.process .pblock:last-of-type{display:none;height:auto;margin:0}
  .process .ptexts{padding-top:104px}
  .pstage{height:92vw;margin:8px 0 0}
  .slab{top:56%}
  .process .wrap.section{padding-bottom:24px}
}
@media (max-width:720px){.footimg{max-width:none;width:160vw;flex:0 0 auto}}
/* CTA pinned to the centre of the card image */
.cardmedia{position:relative}
.cardmedia .cardcta{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;white-space:nowrap;box-shadow:0 10px 30px rgba(0,0,0,.14)}
.cardmedia .cardcta.pale{background-color:var(--bg);background-image:none;color:var(--fg);border:1px solid var(--line)}
.cardmedia .cardcta.pale:hover{background-color:var(--fg);color:var(--bg);border-color:var(--fg)}
.cardmedia .cardcta:not(.pale){color:#fff}
/* mobile menu: scrolls inside itself, never taller than the screen */
.mobile[data-open="true"]{display:block;max-height:calc(100vh - var(--annh,36px) - 96px - env(safe-area-inset-top,0px));overflow:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.ecard .evid.photo .cardcta.soon{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:5;background-color:#f6f4ee;background-image:none;color:#121212;border:0;cursor:default;pointer-events:none;box-shadow:0 10px 30px rgba(0,0,0,.35)}
.ecard .evid.photo .soonpill{display:none}
.ecard .evid.photo .cardcta.soon{pointer-events:auto;cursor:default;display:inline-grid;place-items:center;overflow:hidden;transition:background .2s,color .2s}
.ecard .evid.photo .cardcta.soon .l1,.ecard .evid.photo .cardcta.soon .l2{grid-area:1/1;display:inline-flex;align-items:center;gap:8px;white-space:nowrap;transition:opacity .22s,transform .22s}
.ecard .evid.photo .cardcta.soon .l2{opacity:0;transform:translateY(8px)}
.ecard .evid.photo .cardcta.soon:hover,.ecard .evid.photo .cardcta.soon:focus-visible,.ecard .evid.photo .cardcta.soon.tapped{background-color:#121212;color:#f6f4ee}
.ecard .evid.photo .cardcta.soon:hover .l1,.ecard .evid.photo .cardcta.soon:focus-visible .l1,.ecard .evid.photo .cardcta.soon.tapped .l1{opacity:0;transform:translateY(-8px)}
.ecard .evid.photo .cardcta.soon:hover .l2,.ecard .evid.photo .cardcta.soon:focus-visible .l2,.ecard .evid.photo .cardcta.soon.tapped .l2{opacity:1;transform:none}
/* hero subline matches the big tile labels; announcement arrow has room to slide */
.hero .copy .lead,.tile.span2 .lbl{font-size:clamp(16px,1.25vw,18px)}
.announce a{overflow:visible;padding-right:6px}
.announce a .arr{flex:0 0 auto;display:inline-block}

/* =====================================================================
   M3 foundations pass
   ===================================================================== */
/* 1. interaction states: one focus ring everywhere, a pressed state on pills */
:focus{outline:none}
:focus-visible{outline:2px solid var(--fg);outline-offset:3px;border-radius:4px}
.btn:focus-visible,.pill:focus-visible,.menu .top:focus-visible,.watch:focus-visible,.cardcta:focus-visible,.tpill:focus-visible{outline-offset:3px;border-radius:999px}
.faq2 .faq summary:focus-visible{outline-offset:-2px;border-radius:8px}
.brand.pill:focus-visible,.burger:focus-visible,.theme:focus-visible{border-radius:999px}
.chart a.pt:focus-visible{outline:none}
.chart a.pt:focus-visible circle:not(.hit){stroke:var(--fg);stroke-width:3}
.btn:active,.tpill:active,.watch:active,.cardcta:active,.menu .top:active{transform:scale(.98)}
.cardmedia .cardcta:active{transform:translate(-50%,-50%) scale(.98)}
.faq2 .faq summary:hover{color:var(--fg)}
.faq2 .faq summary:hover .pm{color:var(--fg)}
.menu .top:hover{background:var(--panel-2)}
.chart a.pt:hover circle:not(.hit){stroke:var(--fg);stroke-width:2.5}
.chart a.pt .hit{pointer-events:all}

/* 2. touch targets: 48px pills, hit areas on small links */
.pill,.brand.pill,.burger{height:48px}
.menu .top{height:48px;padding:0 16px}
.menu .top.eye{width:48px;justify-content:center}
.btn,.btn.solid,.nav .right .btn,.tile .tpill,.phead .pcta,.ecard .btn,.foot .btn,.pickcard .watch,.cardcta{min-height:44px}
a.tl{display:inline-block;padding:10px 0;margin:-10px 0}
.announce a{min-height:36px;display:inline-flex;align-items:center}
.foot .cols a{display:block;padding:8px 0}
.menu .sub a,.dd a,.dd .row{min-height:44px}

/* 3. contrast */
.eyebrow{color:var(--fg-2)}
.process .ptext .eyebrow{color:var(--fg-2)}
.fine,.foot .fine{color:var(--fg-2);opacity:.85}
.announce a{font-size:var(--t-body)}
.announce a .tag{font-size:12px}

/* 4. motion: honour the reduced-motion preference everywhere */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .slab{transition:opacity .01ms!important}
  .slab .side::after{animation:none!important;opacity:0!important}
  .slab .side{border-color:rgba(255,255,255,.7)!important}
  .pickcard .static,.evid .static{display:none!important}
  .ecard .evid.photo .pitch span{opacity:1!important;transform:none!important;transition:none!important}
  .ptext{opacity:1!important;transform:none!important}
  .hero .vid{transform:none!important}
}

/* 5. typography roles: title role is one face and size */
.ecard-text h3,.pstep-h{font-family:var(--display);font-size:clamp(24px,2.1vw,30px)}
.faq2 .faq summary,.certs li{font-family:var(--font);font-size:var(--t-body)}

/* 6. adaptive: medium window class (tablet portrait, small laptops) */
@media (min-width:99990px){
  .egrid{grid-template-columns:1fr 1fr}
  .process-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .pstage{height:min(70vh,640px)}
  .slab{width:min(260px,30vw);height:min(260px,30vw)}
  .grid6{grid-template-columns:repeat(3,minmax(0,1fr))}
  .grid6 .tile.span2{grid-column:span 3}
  .faqcols{grid-template-columns:1fr}
  .sec2-grid{grid-template-columns:1fr}
  .foot .cols{grid-template-columns:repeat(2,1fr)}
}

/* 7. colour roles: red is the CTA colour only */
.process .ptext .eyebrow{color:var(--fg-3)}
.slab .anim .quote text:last-child,.slab .anim .tag text{fill:#f6f4ee}
.slab .anim [fill="#c9465a"]{fill:#f6f4ee!important}
.slab .anim .range path{stroke:#f6f4ee!important}
.slab .anim .pin circle{fill:#f6f4ee!important}
.slab .anim .winner rect{stroke:#f6f4ee!important}
.slab .anim .stamp circle:first-child{fill:#121212!important}

/* 8. structure: skip link */
.skip{position:absolute;left:16px;top:-60px;z-index:100;padding:12px 16px;border-radius:999px;background:var(--fg);color:var(--bg);font:500 14px/1 var(--font);transition:top .15s}
.skip:focus{top:calc(env(safe-area-inset-top,0px) + 8px)}

/* 9. shape scale: 8 / 16 / full */
.cta{border-radius:16px}
.mobile{border-radius:16px}
.dd{border-radius:16px}
.egrid{border-radius:16px}
.pickcard,.fcard,.fcard .fbody,.folder{border-radius:8px}
.slab .face{border-radius:0}
.pstage,.stage,.mock,.step-art,.pstep-art{border-radius:8px}
.tablist .tab,.tc-chips span,.mock-row,.mock-field{border-radius:8px}
.ecard .evid,.ecard.bare .evid{border-radius:16px}
/* contrast: secondary text one step darker; remaining tap targets to 44 */
.ecard-text p,.faq2 .faq .ans,.cfgpick p,.trust2sub,.fine,.foot .fine{color:var(--fg-2)}
.foot .cols a{padding:11px 0}
.foot .social{width:44px;height:44px}
.skip{min-height:44px;display:inline-flex;align-items:center}
.announce,.announce a{min-height:44px}
.chart a.pt .hit{r:30}
@media (max-width:720px){:root{--annh:64px}.chart a.pt .hit{r:56}}
.ecard-text p,.faq2 .faq .ans{color:#4d4a44}
.foot .brand{display:inline-flex;align-items:center;min-height:44px}

/* footer dome fades out toward the top; the Book-demo band overlaps the footer */
.foot .footfade{display:block;position:absolute;left:0;right:0;bottom:0;top:auto;height:auto;aspect-ratio:1920/562;min-height:0;max-height:none;z-index:2;pointer-events:none;background:linear-gradient(180deg,var(--bg) 0%,color-mix(in srgb,var(--bg) 70%,transparent) 28%,color-mix(in srgb,var(--bg) 30%,transparent) 55%,transparent 80%)}
#demo.section{position:relative;z-index:3;padding-bottom:0;margin-bottom:calc(-1 * clamp(40px,5vw,72px))}
.foot > .wrap{padding-top:calc(clamp(40px,5vw,72px) + 72px)!important}
@media (max-width:720px){.foot .footfade{left:-30vw;right:auto;width:160vw}}

/* ===== stability across widths ===== */
@media (min-width:99990px){
  .grid6{grid-template-columns:repeat(3,minmax(0,1fr))}
  .grid6 > .pA,.grid6 > .pB,.grid6 > .pC{grid-column:1 / span 3;grid-row:auto}
  .grid6 .cell{display:block}
  .grid6 .cell:nth-of-type(n+7){display:none}
  .tile.span2{min-height:260px}
}
@media (max-width:720px){
  .pstage{height:min(92vw,620px)}
  .slab{width:min(46vw,300px);height:min(46vw,300px)}
  .hero{min-height:min(78vh,720px)}
}
@media (max-width:720px){
  .grid6 .cell{display:block}
  .grid6 .cell:nth-of-type(n+5){display:none}
}

/* ===== footer: half a screen, content overlaid on the globe ===== */
.foot{position:relative;display:block;min-height:var(--foot-h,52vh);padding:0;overflow:hidden}
.foot .footvid,.foot .footimg{position:absolute;left:0;right:0;bottom:0;top:auto;width:100%;height:auto;aspect-ratio:1920/562;margin:0;z-index:0;order:0}
.foot .footfade{z-index:1}
.foot .foottags{z-index:2}
.foot > .wrap{position:relative;z-index:3;padding-top:calc(clamp(40px,5vw,72px) + 40px)!important;padding-bottom:28px!important;gap:28px!important;display:flex;flex-direction:column;justify-content:flex-start}
.foot .top{display:flex;justify-content:space-between;align-items:flex-start}
.foot .cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.foot .cols a{padding:5px 0}
.foot .bottom{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-top:auto}
.foot .fine{max-width:52em}
@media (max-width:720px){
  .foot{min-height:0}
  .foot .footvid{display:none}
  .foot .footimg{position:relative;display:block;width:160vw;margin:24px 0 0 -30vw;max-width:none}
  .foot .footfade{left:-30vw;right:auto;width:160vw}
  .foot > .wrap{padding-bottom:0!important}
}
/* footer: tighter content; stronger veil where the text sits */
.foot > .wrap{padding-top:calc(clamp(40px,5vw,72px) + 24px)!important;padding-bottom:22px!important;gap:20px!important}
.foot .cols a{padding:4px 0;font-size:15px}
.foot .cols h4{margin-bottom:6px}
.foot .brand .logo{width:30px;height:30px}
.foot .foot-meta{line-height:1.6}
.foot .footfade{top:0;bottom:0;height:auto;aspect-ratio:auto;background:linear-gradient(180deg,var(--bg) 0%,var(--bg) 46%,color-mix(in srgb,var(--bg) 72%,transparent) 70%,color-mix(in srgb,var(--bg) 25%,transparent) 88%,transparent 100%)}
@media (max-width:720px){
  .foot{display:flex;flex-direction:column}
  .foot > .wrap{order:0}
  .foot .footimg{order:10;position:relative;margin:16px 0 0 -30vw}
  .foot .footfade{top:auto;bottom:0;left:-30vw;right:auto;width:160vw;aspect-ratio:1920/562;background:linear-gradient(180deg,var(--bg) 0%,color-mix(in srgb,var(--bg) 60%,transparent) 30%,transparent 70%)}
}
.cta{padding:clamp(40px,5.5vw,80px) clamp(24px,5vw,64px);gap:20px}
.cta .lead{margin:0}
.foot > .wrap{padding-top:calc(clamp(40px,5vw,72px) + 16px)!important;gap:16px!important}
.foot .top{align-items:center}
.foot .top > div{flex-direction:row!important;align-items:center;gap:18px!important}

/* ===== one heading size across the page ===== */
:root{--t-display:clamp(34px,4.3vw,60px)}
.h1,.cta .h2,.h2,.h2.big,.sechead .h2,.cfglead .h2,.phead .h2,.process .sechead .h2,.ecard-text h3{font-family:var(--display);font-weight:400;font-size:var(--t-display);line-height:1.05;letter-spacing:-.015em}
.ecard-text h3{line-height:1.05}
.phead .h2{line-height:1.05}
.ecard .evid.photo .pitch{font-size:var(--t-display)}
/* phone: process texts come and go one by one, then the stack appears once */
@media (max-width:720px){
  .process .pblock,.process .pblock:first-of-type,.process .pblock:last-of-type{display:block;height:72vh;margin:0}
  .process .ptext{display:flex;position:sticky;top:38vh;opacity:0;transform:translateY(24px)}
  .process .ptext.on{opacity:1!important;transform:none}
  .process .ptext.out{opacity:0!important;transform:translateY(-18px)}
  .process .ptexts{padding-top:96px}
  .pstage{margin-top:-10vh}
  .faq2 .h2.big,.sec2 .h2.big,.sec2 .lead{text-align:center}
  .sec2 .lead{margin-left:auto;margin-right:auto}
  .certs{align-items:center}
  .faq2 .faq summary{justify-content:flex-start}
  .cfglead .h2{text-align:left}
}

/* step text sits below the locked header, whatever the header's height */
@media (min-width:721px){ .process .ptext{top:calc(var(--phead-b,46vh) + 28px)} .process .pblock{height:100vh} }
@media (min-width:721px){ .process .phead{background:linear-gradient(180deg,var(--bg) 0%,var(--bg) 90%,transparent 100%)} }
@media (min-width:721px) and (max-height:780px){ .process .phead{top:calc(80px + 4vh)} .process .ptext{top:calc(var(--phead-b,46vh) + 18px)} }

@media (max-width:720px){ .process .pblock,.process .pblock:first-of-type,.process .pblock:last-of-type{height:80vh} .process .ptext{top:30vh} }
@media (min-width:721px) and (max-height:780px){ .process .phead{top:calc(72px + 2vh);gap:10px} .process .ptext{top:calc(var(--phead-b,46vh) + 12px);gap:8px} .process .ptext p{font-size:14px;line-height:1.45} }

@media (max-width:720px){ .process .ptext:not(.on){opacity:0!important} .process .ptext.out{transform:translateY(-18px)!important} }
@media (min-width:721px) and (max-height:780px){ .process .phead{top:calc(92px + 2vh)} }
/* ===== breathing room on the sides of every inner panel ===== */
:root{--wrap:1120px;--gutter:clamp(20px,7vw,160px)}
.wrap{padding-left:max(var(--gutter),env(safe-area-inset-left,0px));padding-right:max(var(--gutter),env(safe-area-inset-right,0px))}
.nav .bar.wrap{padding-left:0;padding-right:0}
.mobile.wrap{padding-left:22px;padding-right:22px}
@media (max-width:720px){:root{--gutter:20px}}
@media (min-width:721px){ .process-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} .phead .h2{white-space:nowrap} }
.slab .anim .num{opacity:clamp(0,calc((var(--p,0) - var(--d,.4)) * 5),1)}
.slab .anim .num .big{font-family:var(--display)}
/* ===== footer: legal centred on top, columns centred, identity left / actions right ===== */
.foot .foot-legal{text-align:center;max-width:72ch;margin:0 auto}
.foot .cols{justify-items:center;text-align:center}
.foot .bottom{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-top:auto}
.foot .foot-id{display:flex;align-items:flex-end;gap:18px}
.foot .foot-id .brand{display:flex;align-items:flex-end;min-height:0}
.foot .foot-id .logo{width:58px;height:58px}
.foot .foot-meta{line-height:1.6;font-size:12px}
.foot .foot-actions{display:flex;align-items:center;gap:10px;margin-left:auto}
.foot .social-btn svg{width:15px;height:15px}
@media (max-width:720px){
  .foot .bottom{flex-direction:column;align-items:flex-start;gap:28px}
  .foot .foot-actions{margin-left:0}
  .foot .cols{justify-items:start;text-align:left}
  .foot .foot-legal{text-align:left;margin:0}
}
@media (max-width:720px){ .foot .cols{grid-template-columns:1fr 1fr;gap:20px 24px} }
.menu a.top{text-decoration:none;cursor:pointer}
/* footer columns: outer edges line up with the logo and the buttons, text centred within each column */
@media (min-width:721px){ .foot .cols{display:flex;justify-content:space-between;align-items:flex-start;gap:32px} .foot .cols > div{text-align:center;min-width:0} }
/* pre-footer CTA sits above the footer, never over it */
#demo.section{margin-bottom:0!important;z-index:auto}
.foot > .wrap{padding-top:clamp(40px,5vw,64px)!important}
/* footer panel begins right where the CTA band ends */
@media (min-width:721px){
  .foot > .wrap{padding-top:28px!important}
  .foot .footfade{background:linear-gradient(180deg,var(--bg) 0%,var(--bg) 18%,color-mix(in srgb,var(--bg) 72%,transparent) 46%,color-mix(in srgb,var(--bg) 25%,transparent) 76%,transparent 100%)}
  .foot .footimg,.foot .footvid{bottom:0}
}
/* room under the bottom row of the footer */
@media (min-width:721px){ .foot > .wrap{padding-bottom:72px!important} }
@media (max-width:720px){ .foot > .wrap{padding-bottom:56px!important} }
/* phone: the dome tucks up under the last row instead of sitting in its own band */
@media (max-width:720px){
  .foot > .wrap{position:relative;z-index:2}
  .foot .footimg{order:10;position:relative;z-index:0;margin-top:-150px;display:block}
  .foot .footfade{z-index:1}
}
/* soft rim on the dome */
@media (min-width:721px){
  .foot .footvid,.foot .footimg{-webkit-mask-image:radial-gradient(circle 70.6vw at 50% 71.375vw,#000 0,#000 calc(70.6vw - 110px),rgba(0,0,0,.55) calc(70.6vw - 50px),transparent 70.6vw);mask-image:radial-gradient(circle 70.6vw at 50% 71.375vw,#000 0,#000 calc(70.6vw - 110px),rgba(0,0,0,.55) calc(70.6vw - 50px),transparent 70.6vw)}
}
@media (max-width:720px){
  .foot .footvid,.foot .footimg{-webkit-mask-image:radial-gradient(circle 112.96vw at 50% 114.2vw,#000 0,#000 calc(112.96vw - 60px),transparent 112.96vw);mask-image:radial-gradient(circle 112.96vw at 50% 114.2vw,#000 0,#000 calc(112.96vw - 60px),transparent 112.96vw)}
}
/* hero credibility line + legal line at the very bottom of the footer */
.hero .copy .cred{margin:14px auto 0;max-width:62ch;font-size:clamp(13px,.95vw,15px);line-height:1.5;color:var(--fg-2);text-align:center}
.foot .foot-legal{order:99;margin:28px auto 0;max-width:92ch;text-align:center;font-size:12px;line-height:1.55;color:var(--fg-3)}
@media (max-width:720px){ .hero .copy .cred{font-size:13px;max-width:34ch} .foot .foot-legal{text-align:left;margin:20px 0 0} }
.foot .foot-legal{color:var(--fg-2);position:relative;z-index:3}
.proof-section .cred{margin:clamp(28px,3vw,44px) auto 0;text-align:center;font-size:var(--t-body);line-height:1.7;color:var(--fg-2)}
@media (max-width:720px){ .proof-section .cred{font-size:14px;line-height:1.6;margin-top:24px} }
/* team note: same type as the hero subline */
.proof-section .cred{font-size:clamp(16px,1.25vw,18px);line-height:1.22;color:var(--fg-2);max-width:none}
.proof-section .cred br+*{display:inline}
@media (max-width:720px){ .proof-section .cred{font-size:16px;line-height:1.22} }
.cred .xl{color:var(--fg);text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--fg) 35%,transparent);text-underline-offset:3px;white-space:nowrap}
.cred .xl:hover{text-decoration-color:var(--fg)}
.cred .xl .ne{display:inline-block;margin-left:2px;font-size:.8em;transform:translateY(-1px);transition:transform .15s}
.cred .xl:hover .ne{transform:translate(2px,-3px)}
.proof-section .cred{margin-top:clamp(36px,4vw,56px);margin-bottom:clamp(40px,6vw,96px)}
@media (min-width:721px){ .process .ptext{top:calc(var(--phead-b,46vh) + 52px)} .pstage{transition:top .3s ease} }
@media (min-width:721px) and (max-height:780px){ .process .ptext{top:calc(var(--phead-b,46vh) + 32px)} }
/* PE-stamped card: real plot plan sheet */
.sheet{aspect-ratio:1382/906;padding:0}
.sheet .sheet-img{position:absolute;inset:10px;width:calc(100% - 20px);height:calc(100% - 20px);object-fit:contain;display:block}
.sheet .sheet-stamp{right:7%;bottom:9%;width:11%;height:auto;aspect-ratio:1}
/* room after the last step before the next section; anchor offset for in-page links */
@media (min-width:721px){ .process > .wrap.section{padding-bottom:calc(var(--sp-sec,80px) + 22vh)} }
.anchor{display:block;position:relative;top:-120px;visibility:hidden;height:0}
@media (max-width:720px){ .foot .cols{grid-template-columns:1fr 1fr} }
.cfglead .h2{max-width:none;text-wrap:pretty}
.cfglead .h2 .muted{display:block}
/* gutters sit outside the content column, not inside it */
.wrap{max-width:calc(var(--wrap) + 2 * var(--gutter));box-sizing:border-box}
.nav .bar.wrap,.mobile.wrap{max-width:none}
/* scalloped PE seal */
.sheet-stamp{background:none!important;box-shadow:none!important;border-radius:0;width:13%;aspect-ratio:1;height:auto;right:6.5%;bottom:8%}
.sheet-stamp svg{width:100%;height:100%;display:block;overflow:visible}
.sheet-stamp .seal{fill:var(--accent)}
.sheet-stamp .ring{fill:none;stroke:#fff;stroke-opacity:.85;stroke-width:1.6}
.sheet-stamp .pe{font:600 17px/1 var(--mono);fill:#fff;letter-spacing:.08em}
.sheet-stamp .no{font:500 8.5px/1 var(--mono);fill:#fff;fill-opacity:.9}
/* customer video: text sits as close to the bottom edge as the top text does; card butts flush against the row above */
.ecard .evid.photo .pitch.br{bottom:clamp(18px,2.6vw,40px)!important}
.ecard.wide.bare .evid,.ecard.bare .evid{border-radius:0 0 16px 16px}
@media (min-width:721px){ .egrid > .ecard:nth-child(3),.egrid > .ecard:nth-child(4){border-bottom:0} }
@media (min-width:721px){ .process > .wrap.section{padding-bottom:calc(var(--sp-sec,80px) * .5 + 11vh)} }
/* trust cards: identical media box, identical text box, equal rows */
@media (min-width:721px){
  .egrid{grid-auto-rows:1fr}
  .ecard:not(.wide){display:flex;flex-direction:column;align-items:stretch}
  .ecard:not(.wide) .cardmedia,.ecard:not(.wide) > .chart{aspect-ratio:16/10;height:auto;width:100%;flex:0 0 auto}
  .ecard:not(.wide) .cardmedia > .chart,.ecard:not(.wide) .cardmedia > .sheet{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;padding:0}
  .ecard:not(.wide) .cardmedia > .chart{padding:8px 16px}
  .sheet{aspect-ratio:auto}
  .sheet .sheet-img{inset:0;width:100%;height:100%;object-fit:contain}
  .sheet .sheet-stamp{right:calc(50% - 50% * 1 + 7%);bottom:9%;width:12%}
  .ecard:not(.wide) .ecard-text{min-height:calc(2 * 1.05 * var(--t-display) + 3 * 1.5 * var(--t-body) + 6px);justify-content:flex-start}
}
@media (min-width:721px){ .sheet .sheet-stamp{right:21%;bottom:4%;width:11%} }
/* ===== compare slider (Free revalidation) ===== */
@property --x{syntax:'<percentage>';inherits:true;initial-value:50%}
.cmp{position:absolute;inset:0;overflow:hidden;border-radius:12px;background:#111;user-select:none;touch-action:pan-y;cursor:ew-resize}
.cmp img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.cmp .top{clip-path:inset(0 calc(100% - var(--x,50%)) 0 0)}
.cmp .cap{position:absolute;top:12px;font:500 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#cfcbc2;padding:7px 9px;border:1px solid rgba(255,255,255,.18);border-radius:6px;background:rgba(10,10,10,.55)}
.cmp .cap.l{left:12px}.cmp .cap.r{right:12px}
.cmp .line{position:absolute;top:0;bottom:0;left:var(--x,50%);width:1px;background:rgba(255,255,255,.85);transform:translateX(-.5px);pointer-events:none;box-shadow:0 0 0 1px rgba(0,0,0,.35)}
.cmp .knob{position:absolute;top:50%;left:var(--x,50%);width:44px;height:44px;border-radius:999px;background:#f6f4ee;color:#0a0a0a;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;gap:3px;box-shadow:0 6px 24px rgba(0,0,0,.45);transition:transform .15s,opacity .25s}
.cmp .knob svg{width:14px;height:14px}
.cmp.dragging .knob{transform:translate(-50%,-50%) scale(1.08)}
.cmp.spring{transition:--x .65s cubic-bezier(.2,1.4,.3,1)}
.cardmedia.has-cmp .cardcta{opacity:0;pointer-events:none;transform:translate(-50%,-50%) scale(.6);transition:transform .45s cubic-bezier(.2,1.4,.3,1),opacity .3s}
.cardmedia.has-cmp.done .cardcta{opacity:1;pointer-events:auto;transform:translate(-50%,-50%) scale(1)}
.cardmedia.has-cmp.done .cmp .knob{opacity:0}
.cardmedia.has-cmp.done .cmp{cursor:default}
/* ===== influence / cost curve (Warranted) ===== */
.chart.curve{color:var(--fg);overflow:visible}
.chart.curve .cmono{font-family:var(--mono);font-size:15px;letter-spacing:.08em;text-transform:uppercase;fill:var(--fg-3)}
.chart.curve .cann{font-family:var(--font);font-size:19px;fill:var(--fg)}
.chart.curve .cwin,.chart.curve .cnote text,.chart.curve .cbeat text{fill:var(--accent)}
.chart.curve .cnote line,.chart.curve .cbeat circle{stroke:var(--accent);fill:var(--accent)}
.chart.curve.candid .chump{fill:var(--accent);stroke:var(--accent)}
.chart.curve .cbeat text{font-size:14px}
@media (min-width:721px){ .ecard:not(.wide) .cardmedia > .chart.curve{padding:6px 10px 0} }
/* slider sits on paper, not on black */
.cmp{background:var(--bg)}
.cmp .cap{color:var(--fg-2);border-color:var(--line);background:color-mix(in srgb,var(--bg) 80%,transparent)}
.cmp .line{background:var(--fg);box-shadow:none}
.cmp .knob{background:var(--fg);color:var(--bg);box-shadow:0 6px 20px rgba(0,0,0,.18)}
/* slider labels set like the slab labels */
.cmp .cap{top:auto;bottom:auto;padding:0;border:0;background:none;font:600 clamp(18px,2vw,28px)/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--fg);pointer-events:none}
.cmp .cap.l{left:16px;top:14px}
.cmp .cap.r{right:16px;bottom:12px}
@media (max-width:720px){ .cmp .cap{font-size:16px} }
/* curve card: no tint, no annotation, no axis beat; just the curves and the moving effort */
.ecard .chart.curve .cwin,.ecard .chart.curve .cnote,.ecard .chart.curve .cbeat{display:none}
.ecard .chart.curve{cursor:pointer}
.chart.curve .ctick{font-size:13px;letter-spacing:.04em;text-transform:none}
.cmp .cap{line-height:1.02}
.cmp .cap.r{text-align:right}
/* backtest: nearest dot goes red while the cursor is over the chart */
.chart-link .pt .dot{transition:fill .15s,r .15s}
.chart-link .pt.hot .dot{fill:var(--accent)}
.chart-link .pt.hot line{stroke:var(--accent);stroke-opacity:.8}
/* PE seal: stamps down on hover */
@keyframes stampdown{0%{transform:rotate(-16deg) scale(2.1);opacity:0}55%{transform:rotate(-8deg) scale(.96);opacity:1}75%{transform:rotate(-8deg) scale(1.04)}100%{transform:rotate(-8deg) scale(1);opacity:1}}
.sheet .sheet-stamp{transform:rotate(-8deg);transform-origin:50% 50%}
.sheet .sheet-stamp.stamping{animation:stampdown .5s cubic-bezier(.2,.9,.2,1) both}
@media (prefers-reduced-motion:reduce){ .sheet .sheet-stamp.stamping{animation:none} }
.chart a.pt .hit{fill:transparent!important}
.chart-link a.pt:hover .hit,.chart-link a.pt:focus-visible .hit{r:30;stroke:none}
.chart-link .pt:first-of-type .dot{stroke:none;fill:currentColor}.chart-link .pt:first-of-type .hit{stroke:none}
/* DELIVER label on a black plate */
.slab.paper .slab-label{background:#121212;color:#f6f4ee;padding:4px 10px 3px;border-radius:3px}
/* symmetric breathing room: the black tail equals the next section's top padding */
@media (min-width:721px){ .process > .wrap.section{padding-bottom:var(--sp-sec)} }
/* slider labels follow the rhombus edges */
.cmp .cap{transform-origin:0 0}
.cmp .cap.l{left:9%;top:38%;transform:rotate(-30deg)}
.cmp .cap.r{right:auto;bottom:auto;left:62%;top:86%;transform:rotate(-30deg);text-align:right}
.cardmedia.has-cmp .cmp .knob{pointer-events:none}
.cardmedia.has-cmp.done .cmp .knob{opacity:0}
.cardmedia.has-cmp:not(.done) .cardcta{pointer-events:none}
@media (min-width:721px){ .process > .wrap.section{padding-bottom:calc(var(--sp-sec) - 40px)} }
.cmp .cap.r{left:50.5%;top:97%;right:auto;bottom:auto;transform-origin:0 100%;transform:translateY(-100%) rotate(-30deg);text-align:left}
.cmp .cap.l{left:10%;top:42%;transform-origin:0 0;transform:rotate(-30deg)}
/* slider: layers carry their own label; written in the plane of the pad */
.cmp{background:transparent}
.cmp .lay{position:absolute;inset:0}
.cmp .lay img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block;pointer-events:none}
.cmp .top{clip-path:none}
.cmp .lay.top{clip-path:inset(0 calc(100% - var(--x,50%)) 0 0)}
.cmp .cap{position:absolute;font:600 clamp(20px,2.3vw,32px)/.98 var(--mono);letter-spacing:.06em;color:var(--fg);white-space:nowrap}
.cmp .cap.l{left:12%;top:51%;right:auto;bottom:auto;transform-origin:0 0;transform:matrix(.866,-.5,.866,.5,0,0);text-align:left}
.cmp .cap.r{right:8%;bottom:46%;left:auto;top:auto;transform-origin:100% 100%;transform:matrix(.866,-.5,.866,.5,0,0);text-align:right}
/* charts in the two cards share one frame */
.ecard:not(.wide) .cardmedia > .chart,.ecard:not(.wide) .cardmedia > .chart.curve{padding:10px 14px}
/* varied dot sizes; the nearest grows a little */
.chart-link .pt.hot .dot{r:auto;transform:scale(1.18);transform-box:fill-box;transform-origin:center;transition:transform .15s,fill .15s}
/* two equal card rows; the video row takes only what it needs */
@media (min-width:721px){ .egrid{grid-auto-rows:auto;grid-template-rows:1fr 1fr auto} }
.tile.center{text-align:center;align-items:center;justify-content:center}
/* stamp: the old impression fades, a large one drops in and settles */
@keyframes stampdown{0%{transform:rotate(-8deg) scale(1);opacity:1}22%{transform:rotate(-8deg) scale(1);opacity:0}26%{transform:rotate(-18deg) scale(2.3);opacity:0}30%{opacity:.9}66%{transform:rotate(-8deg) scale(.95);opacity:1}82%{transform:rotate(-8deg) scale(1.04)}100%{transform:rotate(-8deg) scale(1);opacity:1}}
.sheet .sheet-stamp.stamping{animation:stampdown .75s cubic-bezier(.2,.9,.2,1) both}
.ecard{cursor:default}
/* full sheet in the PE card: landscape, seal over the title block */
@media (min-width:721px){ .sheet .sheet-stamp{right:9%;bottom:7%;width:10%} }
/* LinkedIn pill goes white on hover */
.foot .social-btn:hover,.foot .social-btn:focus-visible{background:#fff;color:#0a0a0a;border-color:#fff}
/* PE sheet fills the same frame as the backtest chart */
@media (min-width:721px){
  .sheet .sheet-img{inset:10px 14px;width:calc(100% - 28px);height:calc(100% - 20px);object-fit:contain}
  .sheet .sheet-stamp{right:7%;bottom:6%;width:10%}
}
/* slider labels on opaque plates; plant a touch lighter */
.cmp .cap{background:#121212;color:#f6f4ee;padding:6px 10px 5px;border-radius:3px;line-height:1.02}
.cmp .lay.top img{filter:brightness(1.18) contrast(.96)}
.cmp .cap{font-size:clamp(13px,1.45vw,20px);padding:5px 8px 4px}
.cmp .cap.l{left:16%;top:44%}
.cmp .cap.r{right:16%;bottom:48%}
/* ===== footer v3: no globe; the C&ID mark rests on the bottom edge ===== */
.foot{min-height:0!important;overflow:visible;background:var(--bg);display:flex;flex-direction:column}
.foot > .wrap{padding-top:clamp(40px,5vw,64px)!important;padding-bottom:24px!important;z-index:auto}
.foot .foot-id{align-items:flex-end}
.foot .foot-legal{margin-top:24px}
.foot .footmark{display:block;width:100%;height:clamp(140px,22vw,320px);margin-top:12px}
@media (max-width:720px){ .foot .footmark{height:32vw} }
/* CTA band: dot map behind the copy */
.cta{position:relative;overflow:hidden;isolation:isolate}
.cta .ctamap{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;z-index:0}
.cta > :not(.ctamap){position:relative;z-index:1}
.chart-link a.pt:hover .dot,.chart-link a.pt:focus-visible .dot{stroke:none;fill:var(--accent)}
.chart-link a.pt .hit{r:30}
.chart-link .pt .dot{stroke:none!important}
/* PE seal: absent at rest, stamped on while the cursor is in the card */
@keyframes stampon{0%{transform:rotate(-18deg) scale(2.4);opacity:0}35%{opacity:.95}68%{transform:rotate(-8deg) scale(.94);opacity:1}84%{transform:rotate(-8deg) scale(1.04)}100%{transform:rotate(-8deg) scale(1);opacity:1}}
.sheet .sheet-stamp{opacity:0;transform:rotate(-8deg) scale(1);transition:opacity .25s}
.sheet .sheet-stamp.stamping{opacity:1;animation:stampon .6s cubic-bezier(.2,.9,.2,1) both}
@media (prefers-reduced-motion:reduce){ .sheet .sheet-stamp.stamping{animation:none} }
/* ===== phone pass (Nov 2) ===== */
@media (max-width:720px){
  /* logo wall: an exact 2x2 of square cells under the three tiles, borders meeting cleanly */
  .grid6 > .pA,.grid6 > .pB,.grid6 > .pC{grid-row:auto}
  .grid6 .cell{display:flex;align-items:center;justify-content:center;aspect-ratio:1/1;height:auto;min-height:0;overflow:hidden;padding:20%;box-sizing:border-box}
  .grid6 .cell .flip{width:100%;height:100%;display:flex;align-items:center;justify-content:center}
  .grid6 .cell img{max-width:100%;max-height:100%;object-fit:contain;display:block}
  /* how it works: room under the CTA, and under the finished stack */
  .process .phead{margin-bottom:56px}
  .process > .wrap.section{padding-bottom:72px!important}
  /* trust cards: same build in every card — 16:10 picture, then title, then text */
  .egrid{grid-template-rows:repeat(4,1fr) auto}
  .ecard:not(.wide){display:flex;flex-direction:column;gap:18px}
  .ecard:not(.wide) .cardmedia{position:relative;width:100%;aspect-ratio:16/10;flex:0 0 auto}
  .ecard:not(.wide) .cardmedia > .chart,.ecard:not(.wide) .cardmedia > .sheet,.ecard:not(.wide) .cardmedia > .cmp{position:absolute;inset:0;width:100%;height:100%;padding:0;aspect-ratio:auto}
  .ecard:not(.wide) .cardmedia > .chart{padding:4px 6px}
  .sheet .sheet-img{inset:0;width:100%;height:100%;object-fit:contain}
  .ecard:not(.wide) .ecard-text{flex:1 1 auto}
  .cmp .cap{font-size:13px}
}
/* hero marker */
.h1 .hl{position:relative;display:inline-block;padding:0 .12em;margin:0 -.04em;z-index:0;transition:color .25s}
.h1 .hl::before{content:"";position:absolute;left:0;right:0;top:.1em;bottom:.02em;background:var(--accent);border-radius:.08em;transform-origin:0 50%;transform:scaleX(var(--hl,0));z-index:-1}
.h1 .hl.on{color:#f6f4ee}
/* the letters turn cream exactly where the marker has reached */
.h1 .hl{color:transparent;background:linear-gradient(90deg,#f6f4ee calc(var(--hl,0) * 100%),var(--fg) calc(var(--hl,0) * 100%));-webkit-background-clip:text;background-clip:text}
.h1 .hl.on{color:transparent}
.h1 .hl{color:inherit;background:none;-webkit-background-clip:border-box;background-clip:border-box}
.h1 .hl.on{color:inherit}
.h1 .hl .hlt{position:relative;z-index:1;color:transparent;background:linear-gradient(90deg,#f6f4ee calc(var(--hl,0) * 100%),var(--fg) calc(var(--hl,0) * 100%));-webkit-background-clip:text;background-clip:text}
/* hero marker: a touch more room now that it covers three words */
.h1 .hl{padding:0 .14em}
/* CONVERGE deck */
.slab .anim .deck .card{will-change:transform,opacity}
/* nav pill: hover fills edge to edge on the first and last items */
.menu.pill{padding:0;gap:2px}
.menu > li:first-child > .top{padding-left:26px}
.menu > li:last-child > .top{padding-right:22px;padding-left:18px}
/* eye toggle: a proper icon size, not the caret size */
.menu > li:last-child > .top.eye{width:56px;padding:0 4px 0 0;justify-content:center}
.menu .top.eye svg{width:20px;height:20px;opacity:.85}
/* locked menu items: greyed, not clickable, small lock */
.dd .row.locked,.mobile .row.locked,.foot .cols .locked{color:var(--fg-3);cursor:not-allowed;opacity:.6}
.dd .row.locked .name{color:inherit}
.dd .row.locked .lk,.mobile .row.locked .lk,.foot .cols .locked .lk{width:13px;height:13px;flex:0 0 13px}
.foot .cols .locked{display:flex;align-items:center;justify-content:center;gap:6px;padding:4px 0;font-size:15px}
@media (max-width:720px){ .foot .cols .locked{justify-content:flex-start} }
/* Security has a short top padding, so its link needs its own offset to clear the nav */
#security{scroll-margin-top:110px}
/* demo form */
.field.milestone .q{display:block;text-align:center;width:100%;margin-bottom:10px}
.field.milestone .chips{justify-content:center}
textarea.input{min-height:120px;resize:vertical;padding-top:12px;line-height:1.5;font:inherit}
textarea.input::placeholder{color:var(--fg-3)}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0}
[hidden]{display:none!important}
.field.milestone .q .qhint{display:block;margin-top:4px;font-size:12px;color:var(--fg-3)}
/* demo form card: inverted so it stands off the page (black on cream) */
.demo .card#form{--bg:#0a0a0a;--panel:#0a0a0a;--line:#2e2c29;--fg:#f6f4ee;--fg-2:#cfcbc2;--fg-3:#8f8a80;background:#0a0a0a;color:#f6f4ee;border-color:#0a0a0a;box-shadow:0 24px 60px rgba(0,0,0,.18)}
.demo .card#form .input{background:#161616;border-color:#2e2c29;color:#f6f4ee}
.demo .card#form .input::placeholder{color:#7d786f}
.demo .card#form .input:focus{border-color:#f6f4ee}
.demo .card#form .chip span{border-color:#3a3833;color:#cfcbc2}
.demo .card#form .chip input:checked + span{background:#f6f4ee;color:#0a0a0a;border-color:#f6f4ee}
.demo .card#form .done-state .check{background:#f6f4ee;color:#0a0a0a}
.demo .card#form .back{color:#cfcbc2}
/* Work with Candid: one column; the plant loop is the top of the form card */
.demo.demo1{grid-template-columns:1fr;max-width:720px;margin-left:auto;margin-right:auto;gap:28px}
.demo1 .demo-head{display:flex;flex-direction:column;gap:16px;text-align:center;align-items:center}
.demo1 .demo-head .h1{font-size:clamp(40px,5vw,68px)}
.demo1 .demo-head .lead{max-width:56ch}
.demo1 .card#form{overflow:hidden}
.demo1 .cardvid{position:relative;margin:calc(-1 * clamp(22px,3vw,36px)) calc(-1 * clamp(22px,3vw,36px)) clamp(22px,3vw,32px);aspect-ratio:16/8;background:#0a0a0a;overflow:hidden}
.demo1 .cardvid video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1) brightness(1.05);display:block}
.demo1 .cardvid::after{content:"";position:absolute;inset:auto 0 0 0;height:40%;background:linear-gradient(180deg,transparent,#0a0a0a)}
.demo1 .cardvid-label{position:absolute;left:clamp(22px,3vw,36px);bottom:12px;z-index:1;font:500 10.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#cfcbc2}
.demo1 .demo-mail{text-align:center}
.demo1 .demo-mail a{color:var(--fg-2)}
main#main > .back{display:flex;max-width:720px;margin-left:auto;margin-right:auto}
/* form: every question set the same way as First name / Work email; step tabs centred */
.demo1 #steps{justify-content:center;display:flex}
.field.milestone .q{display:block;text-align:left;width:auto;margin:0 0 8px;padding:0;font-size:14px;color:var(--fg-2);font-weight:400}
.field.milestone .q .qhint{display:inline;margin:0 0 0 4px;font-size:14px;color:var(--fg-3)}
.field.milestone .chips{justify-content:flex-start}
/* Back to home: white pill */
.nav .right .btn.homebtn{background:#fff;color:#121212;border-color:#fff;box-shadow:0 6px 20px rgba(0,0,0,.08)}
.nav .right .btn.homebtn:hover{background:#121212;color:#fff;border-color:#121212}

/* Work with Candid: earth video as the footer */
.earthfoot{background:#000;margin-top:clamp(16px,3vw,40px);line-height:0;overflow:hidden}
.earthfoot video{display:block;width:100%;max-width:1920px;margin:0 auto;aspect-ratio:1600/468;object-fit:cover;background:#000}
@media (max-width:720px){.earthfoot video{aspect-ratio:720/404}}

/* Work with Candid: the earth video is the base of the form card, buttons sit on it */
.demo1 .card#form{position:relative}
.demo1 .card-fine{text-align:center;margin:4px 0 0}
.demo1 .cardbase{position:relative;margin:clamp(18px,2.4vw,28px) calc(-1 * clamp(22px,3vw,36px)) calc(-1 * clamp(22px,3vw,36px));aspect-ratio:1280/376;line-height:0;border-radius:0 0 15px 15px;overflow:hidden}
.demo1 .cardbase video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.demo1 .cardcta{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);display:flex;justify-content:center;align-items:center;gap:10px;line-height:normal;z-index:1}
.demo1 .cardcta[hidden]{display:none!important}
.demo1 .cardcta .btn{box-shadow:0 8px 24px rgba(0,0,0,.28)}
.demo1 .cardcta .ghostbtn{background:rgba(10,10,10,.55);color:#f6f4ee;border-color:rgba(246,244,238,.35);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.demo1 .cardcta .ghostbtn:hover{background:rgba(10,10,10,.75)}
@media (max-width:720px){.demo1 .cardbase{aspect-ratio:720/404}.demo1 .cardcta{top:50%}}

.demo1 .cardcta .btn{font-size:16px;padding:16px 30px;height:auto}
@media (max-width:720px){.demo1 .cardcta .btn{font-size:15px;padding:14px 24px}}

.demo1 .cardbase video{opacity:.45}

.demo1 .lead.lead-lines{max-width:none;text-wrap:balance}
@media (min-width:721px){.demo1 .lead.lead-lines{white-space:nowrap}}
@media (max-width:1000px){.demo1 .lead.lead-lines{white-space:normal}}

.demo1 .lead.lead-lines span{display:block;text-wrap:balance}
@media (max-width:720px){.demo1 .lead.lead-lines span+span{margin-top:8px}}

.demo1 .lead.lead-lines span{text-wrap:wrap}
@media (min-width:1001px){.demo1 .lead.lead-lines span{white-space:nowrap;text-wrap:nowrap}}
@media (max-width:1000px){.demo1 .lead.lead-lines span{text-wrap:balance}}

/* Privacy policy: a panel that opens inside the form card */
.demo1 .pplink{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.demo1 .pplink:hover{color:var(--fg)}
.demo1 .pp{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;background:var(--bg);color:var(--fg);border-radius:inherit;animation:ppIn .22s ease-out}
.demo1 .pp[hidden]{display:none!important}
@keyframes ppIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.demo1 .pp-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:clamp(18px,2.4vw,26px) clamp(22px,3vw,36px) 14px;border-bottom:1px solid var(--line)}
.demo1 .pp-head h2{margin:0;font:400 clamp(24px,2.4vw,30px)/1.1 var(--display,"Instrument Serif",Georgia,serif);letter-spacing:-.01em}
.demo1 .pp-x{width:38px;height:38px;flex:none;display:grid;place-items:center;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--fg);cursor:pointer;transition:background .15s,color .15s}
.demo1 .pp-x:hover{background:var(--fg);color:var(--bg)}
.demo1 .pp-x svg{width:14px;height:14px}
.demo1 .pp-body{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:18px clamp(22px,3vw,36px) clamp(26px,3vw,40px);font-size:14px;line-height:1.6;color:var(--fg-2)}
.demo1 .pp-body:focus{outline:none}
.demo1 .pp-body h3{margin:22px 0 6px;font:500 11px/1.3 var(--mono,"Geist Mono",monospace);letter-spacing:.14em;text-transform:uppercase;color:var(--fg)}
.demo1 .pp-body p{margin:0 0 10px}
.demo1 .pp-body b{color:var(--fg);font-weight:500}
.demo1 .pp-body a{color:var(--fg);text-underline-offset:3px}
.demo1 .pp-date{font:500 11px/1 var(--mono,"Geist Mono",monospace);letter-spacing:.12em;text-transform:uppercase;color:var(--fg-3)}

/* media: no drag-out, no iOS long-press save sheet */
video,img,canvas{-webkit-user-drag:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}

/* Hero v10: full-colour light video, already graded to the page cream, shown as-is */
.hero .vid{filter:none!important;mix-blend-mode:normal!important}

/* Hero v10: lightest possible fade. Only the bottom edge blends into the page; a soft cream halo keeps the headline readable */
.hero .shade{background:linear-gradient(180deg,rgba(246,244,238,0) 62%,rgba(246,244,238,.32) 78%,rgba(246,244,238,1) 100%)}
.hero .copy .h1,.hero .copy .lead{text-shadow:0 0 18px rgba(246,244,238,.95),0 0 42px rgba(246,244,238,.85),0 0 4px rgba(246,244,238,.9)}
.hero .copy .h1 .hlt{text-shadow:none}
@media (max-width:720px){
  /* phone: show the whole visual as a band under the nav, text below on the page, no zoomed crop */
  .hero .vid{top:calc(var(--annh) + 70px + env(safe-area-inset-top,0px))!important;bottom:auto!important;height:auto!important;aspect-ratio:4/3;object-fit:cover;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 7%,#000 90%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 7%,#000 90%,transparent 100%)}
  .hero .shade{display:none}
}

@media (max-width:720px){
  /* phone: hero is exactly the video band plus the text under it */
  .hero{height:auto!important;min-height:0!important;padding-top:calc(var(--annh) + 70px + 75vw + env(safe-area-inset-top,0px))}
  .hero .copy{position:relative!important;inset:auto!important;padding:18px 20px 44px!important;justify-content:flex-start}
}

/* texture: semi-transparent grain painted over the colour, no blend mode needed (iOS Safari dropped the colour with multiply) */
.btn.solid,.nav .right .btn,.tile .tpill.go,.cta{background-blend-mode:normal!important}

/* Hero v10b: whole stack in view, no top fade, slow fade only toward the bottom */
.hero .vid{top:72px!important;height:calc(100% - 72px)!important;object-position:50% 0;transform-origin:50% 100%}
.hero .shade{background:linear-gradient(180deg,rgba(246,244,238,0) 55%,rgba(246,244,238,.25) 75%,rgba(246,244,238,.85) 94%,rgba(246,244,238,1) 100%)}
@media (max-width:720px){
  .hero .vid{top:calc(var(--annh) + 66px + env(safe-area-inset-top,0px))!important;height:auto!important;-webkit-mask-image:linear-gradient(180deg,#000 0,#000 52%,rgba(0,0,0,.55) 78%,transparent 100%);mask-image:linear-gradient(180deg,#000 0,#000 52%,rgba(0,0,0,.55) 78%,transparent 100%)}
  .hero .copy{margin-top:-17vw}
}

@media (min-width:721px){.hero .vid{top:104px!important;height:calc(100% - 104px)!important}}

/* Hero v10c: video runs to the top edge, nav buttons float over it */
@media (min-width:721px){.hero .vid{top:0!important;height:100%!important;object-position:50% 0}}
@media (max-width:720px){
  .hero .vid{top:calc(var(--annh) + env(safe-area-inset-top,0px))!important}
  .hero{padding-top:calc(var(--annh) + 75vw + env(safe-area-inset-top,0px))}
}

/* Work with Candid: the layers video (cream keyed out onto the card black) is the base of the form card */
.demo1 .cardbase{aspect-ratio:16/9!important}
.demo1 .cardbase video{opacity:.55}

/* Revalidation slider: line and knob turn Candid red while the card is hovered */
.ecard:has(#cmp-reval):hover .cmp .line{background:var(--accent);box-shadow:none}
.ecard:has(#cmp-reval):hover .cmp .knob{background:var(--accent);color:#fff;box-shadow:0 6px 20px rgba(122,31,43,.35)}
.cmp .line,.cmp .knob{transition:background-color .2s,color .2s,box-shadow .2s}