/* ==========================================================================
   THE MANAGED DESK — v2 DESIGN LAYER
   --------------------------------------------------------------------------
   Loaded after tmd.css and home.css. Nothing in here redefines a token or a
   component from those files: it adds the layers this release brought with it
   — ambient light, scroll choreography, the scenario explorer, the diagrams,
   the film frame, the health check and the command palette.

   Two rules held throughout:
     1. Colour comes from the existing semantic tokens (--text, --surface,
        --on-deep, --accent, --ai-text). Adding a hex here means adding a
        theme bug, because every surface below exists in light AND dark.
     2. Anything that moves is opt-out. `prefers-reduced-motion` gets the
        finished state, not a slower animation.
   ========================================================================== */

/* ---------- 1. Layout: a wider measure for the cinematic sections -------- */
.wrap.full{max-width:1320px}
.section.wide .wrap{max-width:1320px}
.bleed{width:100vw;margin-left:calc(50% - 50vw)}
.secnum{
  font:600 11px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent);display:inline-flex;align-items:center;gap:10px;margin-bottom:14px
}
.secnum::after{content:"";flex:1;min-width:28px;height:1px;background:var(--border-strong)}
.section-head .secnum + .section-title{margin-top:0}

/* ---------- 2. Ambient light, grain and grid ---------------------------- */
.amb{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.amb i{
  position:absolute;display:block;border-radius:50%;filter:blur(60px);opacity:.5;
  background:radial-gradient(circle at 50% 50%,rgba(44,85,201,.55),rgba(44,85,201,0) 70%);
  animation:ambdrift 26s var(--ease) infinite alternate
}
.amb i:nth-child(1){width:46vw;height:46vw;left:-8vw;top:-12vw;animation-duration:30s}
.amb i:nth-child(2){width:38vw;height:38vw;right:-6vw;top:6vw;opacity:.42;
  background:radial-gradient(circle at 50% 50%,rgba(37,99,235,.5),rgba(37,99,235,0) 70%);animation-duration:34s}
.amb i:nth-child(3){width:30vw;height:30vw;left:36%;bottom:-16vw;opacity:.3;
  background:radial-gradient(circle at 50% 50%,rgba(245,178,26,.42),rgba(245,178,26,0) 70%);animation-duration:40s}
@keyframes ambdrift{
  from{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(3vw,2vw,0) scale(1.08)}
  to{transform:translate3d(-2vw,3vw,0) scale(.96)}
}
.grain::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.035;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E")
}
.gridlines{
  position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:linear-gradient(to right,var(--hero-grid) 1px,transparent 1px),
                   linear-gradient(to bottom,var(--hero-grid) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(120% 80% at 50% 0%,#000 25%,transparent 78%);
  -webkit-mask-image:radial-gradient(120% 80% at 50% 0%,#000 25%,transparent 78%)
}

/* ---------- 3. Hero v2 — editorial composition -------------------------- */
.hero2{position:relative;background:var(--bg-deep);color:var(--on-deep);overflow:hidden;
  padding-top:calc(var(--nav-h) + clamp(34px,5vw,64px));padding-bottom:clamp(48px,7vw,96px);isolation:isolate}
.hero2 .amb{opacity:.85}
.hero2 .wrap{position:relative;z-index:2}
.hero2 .signal{position:absolute;inset:0;width:100%;height:100%;z-index:1;opacity:.75;pointer-events:none}
.hero2 h1{
  font-size:clamp(40px,6.6vw,84px);line-height:.98;letter-spacing:-.045em;margin:0;
  color:var(--on-deep);text-wrap:balance;font-weight:800
}
.hero2 h1 .ln{display:block;overflow:hidden}
.hero2 h1 .ln > span{display:inline-block;transform:translateY(105%);
  animation:kinup .95s var(--ease) forwards;animation-delay:calc(var(--i,0) * 110ms)}
@keyframes kinup{to{transform:translateY(0)}}
.hero2 h1 .grad{
  background:linear-gradient(96deg,#8FAEFF 0%,#C9D8FF 42%,var(--gold) 108%);
  -webkit-background-clip:text;background-clip:text;color:transparent
}
.hero2 .lede{color:#D5DDF5;max-width:60ch;margin-top:var(--s5);font-size:clamp(15.5px,1.35vw,19px)}
.hero2 .kicker{
  display:inline-flex;align-items:center;gap:10px;font:600 11.5px/1 var(--mono);
  letter-spacing:.18em;text-transform:uppercase;color:#AFC0EE;
  border:1px solid var(--deep-border);background:var(--deep-surface);
  border-radius:var(--r-pill);padding:9px 15px
}
.hero2 .kicker .dotpulse{width:7px;height:7px;border-radius:50%;background:var(--gold);
  box-shadow:0 0 0 0 rgba(245,178,26,.7);animation:ping 2.4s var(--ease) infinite}
@keyframes ping{
  0%{box-shadow:0 0 0 0 rgba(245,178,26,.55)}
  70%{box-shadow:0 0 0 11px rgba(245,178,26,0)}
  100%{box-shadow:0 0 0 0 rgba(245,178,26,0)}
}
.hero2 .cta-row{margin-top:var(--s6)}
.hero2 .btn-primary{box-shadow:0 18px 46px -18px rgba(44,85,201,.9)}
.hero2 .btn-secondary{color:var(--on-deep);border-color:rgba(255,255,255,.34);background:rgba(255,255,255,.04);
  box-shadow:none;gap:10px}
.hero2 .btn-secondary:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.6)}
.hero2 .btn-secondary .play{
  width:22px;height:22px;border-radius:50%;background:rgba(255,255,255,.16);
  display:inline-grid;place-items:center;flex:none
}
.hero2 .btn-secondary .play svg{width:9px;height:9px;margin-left:1px}

/* the trust strip: facts, not a logo wall (we do not have customer logos to show) */
.trust{margin-top:clamp(30px,4vw,48px);border-top:1px solid var(--deep-border);padding-top:var(--s5)}
.trust ul{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:var(--s4)}
.trust li{display:flex;gap:11px;align-items:flex-start;font-size:13px;color:#C7D2EE;line-height:1.45}
.trust .ic{width:18px;height:18px;color:var(--brand-300);flex:none;margin-top:2px}
.trust b{color:#fff;display:block;font-size:13.5px;font-weight:600}
.trust span{color:#9BAAD2}

/* the hero product window keeps its own dark frame in both themes */
.hero2 .stage{position:relative;margin-top:clamp(34px,5vw,56px)}
.hero2 .stage::before{
  content:"";position:absolute;inset:-6% -4% -14%;z-index:-1;border-radius:36px;
  background:radial-gradient(60% 60% at 62% 30%,rgba(44,85,201,.42),transparent 70%),
             radial-gradient(45% 45% at 20% 78%,rgba(245,178,26,.16),transparent 70%)
}
.hero2 .app{box-shadow:0 60px 130px -50px rgba(0,0,0,.85),0 0 0 1px rgba(255,255,255,.07)}
.stage-badge{
  position:absolute;z-index:3;display:flex;align-items:center;gap:9px;
  background:rgba(9,18,44,.82);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(9px);
  border-radius:var(--r-pill);padding:8px 14px;font-size:11.5px;color:#DCE4F8;
  box-shadow:0 18px 40px -22px rgba(0,0,0,.9)
}
.stage-badge b{color:#fff;font-weight:600}
.stage-badge .sparkle{width:13px;height:13px;color:var(--gold)}
.stage-badge.is-ai{border-color:rgba(245,178,26,.42);background:rgba(48,34,4,.86)}
.stage-badge.b1{top:-18px;right:6%}
.stage-badge.b2{bottom:-16px;left:-2%}
@media (max-width:760px){.stage-badge.b2{display:none}.stage-badge.b1{top:-14px;right:2%}}

/* ---------- 4. Ticker — the capability line that keeps moving ----------- */
.ticker{
  position:relative;border-top:1px solid var(--border);border-bottom:1px solid var(--border);
  background:var(--surface-2);overflow:hidden;padding:14px 0
}
.ticker-track{display:flex;gap:var(--s7);width:max-content;animation:tick 46s linear infinite}
.ticker:hover .ticker-track{animation-play-state:paused}
.ticker span{
  font:600 12px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
  display:inline-flex;align-items:center;gap:12px;white-space:nowrap
}
.ticker span::after{content:"";width:5px;height:5px;border-radius:50%;background:var(--border-strong)}
.ticker span.ai{color:var(--ai-text)}
.ticker span.ai::after{background:var(--gold)}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- 5. Cards with a pointer-reactive edge (used sparingly) ------ */
.hot{position:relative}
.hot::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;
  transition:opacity .3s var(--ease);
  background:radial-gradient(320px 320px at var(--mx,50%) var(--my,0%),
             color-mix(in srgb,var(--accent) 16%,transparent),transparent 68%)
}
.hot:hover::before{opacity:1}
.tile{
  display:grid;gap:12px;align-content:start;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-l);padding:var(--s5);box-shadow:var(--sh-1);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease)
}
.tile:hover{transform:translateY(-3px);box-shadow:var(--sh-2);border-color:var(--border-strong)}
.tile .ic-lg{width:22px;height:22px;color:var(--accent)}
.tile h3{font-size:16.5px;letter-spacing:-.015em}
.tile p{font-size:14px;color:var(--muted);line-height:1.62}

/* ---------- 6. Signature band: the lifecycle theatre -------------------- */
.theatre{background:var(--bg-deep);color:var(--on-deep);position:relative;overflow:hidden}
.theatre .amb{opacity:.5}
.theatre .wrap{position:relative;z-index:2}
.theatre h2{color:var(--on-deep)}
.theatre .lede{color:#C9D3EF}
.theatre .grid2{
  display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:clamp(28px,4vw,64px);align-items:start
}
.tsteps{display:grid;gap:10px;margin-top:var(--s5)}
.tstep{
  display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start;text-align:left;
  background:rgba(255,255,255,.03);border:1px solid var(--deep-border);border-radius:var(--r-m);
  padding:13px 15px;color:var(--on-deep);cursor:pointer;width:100%;font:inherit;
  transition:background .25s var(--ease),border-color .25s var(--ease),transform .25s var(--ease)
}
.tstep:hover{background:rgba(255,255,255,.06)}
.tstep[aria-selected="true"]{
  background:linear-gradient(120deg,rgba(44,85,201,.34),rgba(44,85,201,.08));
  border-color:rgba(143,174,255,.5);transform:translateX(3px)
}
.tstep .n{
  font:700 11px/1 var(--mono);color:#9FB2E4;border:1px solid var(--deep-border);
  border-radius:6px;padding:6px 8px;letter-spacing:.06em
}
.tstep[aria-selected="true"] .n{color:var(--gold);border-color:rgba(245,178,26,.45)}
.tstep h3{font-size:15px;margin-bottom:5px;color:#fff}
.tstep p{font-size:12.5px;color:#B4C0E0;line-height:1.5;margin:0}
.tstep .meter{height:3px;border-radius:3px;background:rgba(255,255,255,.1);margin-top:10px;overflow:hidden}
.tstep .meter i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--brand-300),var(--gold));
  transition:width .8s var(--ease)}
.tstep[aria-selected="true"] .meter i{width:100%}
.tpanel{
  position:sticky;top:calc(var(--nav-h) + 22px);background:#0B1738;border:1px solid rgba(255,255,255,.11);
  border-radius:var(--r-xl);padding:var(--s5);box-shadow:0 50px 110px -46px rgba(0,0,0,.9);
  display:grid;gap:var(--s4);color:var(--text)
}
.tpanel .tp-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.tpanel .tp-head h3{color:#fff;font-size:15px}
.tpanel .tp-body{
  background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.09);border-radius:var(--r-m);
  padding:var(--s4);min-height:236px;display:grid;gap:10px;align-content:start;color:#E5EAF8
}
.tpanel .tp-body .row{display:flex;align-items:center;gap:10px;font-size:12.5px;color:#C5CFEA}
.tpanel .tp-body .row b{color:#fff;font-weight:600}
.tpanel .tp-body .k{font:600 12px/1.4 var(--mono);color:#9FB2E4}
.tpanel .tp-foot{display:flex;flex-wrap:wrap;gap:8px}
.tpanel .tp-foot span{
  font-size:11px;border:1px solid rgba(255,255,255,.14);border-radius:var(--r-pill);
  padding:5px 10px;color:#C3CEEA
}
.tpanel .tp-foot span.ai{color:var(--gold);border-color:rgba(245,178,26,.4)}
.tpanel .flash{animation:flash .7s var(--ease)}
@keyframes flash{0%{background:rgba(245,178,26,.22)}100%{background:transparent}}
.tpanel .tp-extra{border-top:1px solid rgba(255,255,255,.12);padding-top:var(--s4);display:grid;gap:12px}
.tpanel .tp-extra h3{color:#fff;font-size:14px;letter-spacing:-.01em}
.tpanel .tp-extra ul{display:grid;gap:9px}
.tpanel .tp-extra li{display:grid;grid-template-columns:auto 1fr;gap:10px;font-size:12.5px;
  color:#C5CFEA;line-height:1.55}
.tpanel .tp-extra .ic{width:14px;height:14px;color:var(--gold);margin-top:2px;flex:none}

/* ---------- 7. Scenario explorer --------------------------------------- */
.scex{display:grid;grid-template-columns:minmax(0,258px) minmax(0,1fr);gap:clamp(22px,3vw,40px);align-items:start}
.sclist{display:grid;gap:6px;position:sticky;top:calc(var(--nav-h) + 22px)}
.sclist button{
  display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center;text-align:left;width:100%;
  font:inherit;cursor:pointer;background:transparent;border:1px solid transparent;border-radius:var(--r-m);
  padding:11px 12px;color:var(--text);transition:background .22s var(--ease),border-color .22s var(--ease)
}
.sclist button:hover{background:var(--surface-2)}
.sclist button[aria-selected="true"]{
  background:var(--accent-soft);border-color:color-mix(in srgb,var(--accent) 34%,transparent)
}
.sclist .sn{font:700 10.5px/1 var(--mono);color:var(--accent);letter-spacing:.06em}
.sclist .st{font-size:13.5px;font-weight:600;line-height:1.3}
.sclist .sd{font-size:11.5px;color:var(--muted)}
.scview{display:grid;gap:var(--s5)}
.sc-hero{
  display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:var(--s5);align-items:center;
  border:1px solid var(--border);border-radius:var(--r-xl);padding:var(--s5);
  background:linear-gradient(160deg,var(--surface-3),var(--surface));overflow:hidden;position:relative
}
.sc-hero h2,.sc-hero h3{font-size:clamp(20px,2.4vw,27px);letter-spacing:-.025em;margin-bottom:10px}
.sc-hero .chip{font:600 10.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);display:block;margin-bottom:12px}
.motif{width:220px;height:190px;flex:none;opacity:.95}
.motif svg{width:100%;height:100%;overflow:visible}
.sc-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s5)}
.sc-box{border:1px solid var(--border);border-radius:var(--r-l);background:var(--surface);padding:var(--s5)}
.sc-box h3,.sc-box h4{font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);
  font-family:var(--mono);margin-bottom:14px}
.sc-box ul{display:grid;gap:10px}
.sc-box li{font-size:14px;color:var(--text);line-height:1.6;display:grid;grid-template-columns:auto 1fr;gap:10px}
.sc-box li .ic{width:16px;height:16px;color:var(--accent);margin-top:3px}
.sc-box li.warn .ic{color:var(--warn-text)}
.sc-story{border:1px solid var(--border);border-radius:var(--r-xl);padding:var(--s5);
  background:var(--surface-2);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s5)}
.sc-story h3,.sc-story h4{font-size:17px;margin-bottom:6px}
.sc-story .who{font:600 12px/1.5 var(--mono);color:var(--muted);margin-bottom:16px}
.sc-steps{counter-reset:s;display:grid;gap:12px}
.sc-steps li{counter-increment:s;display:grid;grid-template-columns:auto 1fr;gap:12px;font-size:13.5px;
  line-height:1.6;color:var(--text)}
.sc-steps li::before{
  content:counter(s,decimal-leading-zero);font:700 10.5px/22px var(--mono);color:var(--accent);
  width:24px;height:22px;text-align:center;border:1px solid var(--border-strong);border-radius:6px;flex:none
}
.sc-outcome{border-left:2px solid var(--gold);padding:12px 0 12px 16px;color:var(--text);font-size:14.5px}
.sc-start{display:grid;gap:10px}
.sc-feat{display:flex;flex-wrap:wrap;gap:8px}
.sc-feat a{font-size:12.5px;border:1px solid var(--border);border-radius:var(--r-pill);padding:7px 13px;
  color:var(--text);text-decoration:none;transition:border-color .2s var(--ease),color .2s var(--ease)}
.sc-feat a:hover{border-color:var(--accent);color:var(--accent)}
.sc-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s4);margin-top:var(--s7)}
.sc-card{
  position:relative;display:grid;gap:10px;align-content:start;text-decoration:none;color:inherit;
  border:1px solid var(--border);border-radius:var(--r-l);padding:var(--s5);background:var(--surface);
  overflow:hidden;transition:transform .3s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease)
}
.sc-card:hover{transform:translateY(-4px);border-color:var(--border-strong);box-shadow:var(--sh-2)}
.sc-card .mini-motif{position:absolute;right:-32px;top:-26px;width:150px;height:150px;opacity:.14}
.sc-card .chip{font:600 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.sc-card h3{font-size:16.5px;letter-spacing:-.02em}
.sc-card p{font-size:13.5px;color:var(--muted);line-height:1.6}
.sc-card .more{font:600 12.5px/1 var(--font);color:var(--accent);display:inline-flex;align-items:center;gap:7px}

/* ---------- 8. Diagram blocks ------------------------------------------ */
.dg{
  position:relative;border:1px solid rgba(255,255,255,.1);border-radius:var(--r-xl);
  background:linear-gradient(165deg,#0C1A40,#070F26);padding:clamp(18px,2.4vw,30px);
  color:#E8EDFA;overflow:hidden
}
.dg + .dg{margin-top:var(--s5)}
.dg-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:18px}
.dg-head h3{color:#fff;font-size:17px;letter-spacing:-.015em}
.dg-head p{color:#A9B7DC;font-size:13px;max-width:62ch;margin-top:6px;line-height:1.6}
.dg-legend{display:flex;flex-wrap:wrap;gap:14px;font:600 10.5px/1 var(--mono);letter-spacing:.08em;
  text-transform:uppercase;color:#9FB2E4;flex:none}
.dg-legend i{display:inline-flex;align-items:center;gap:7px}
.dg-legend i::before{content:"";width:9px;height:9px;border-radius:3px;background:var(--brand-500)}
.dg-legend i.gold::before{background:var(--gold)}
.dg-legend i.ghost::before{background:transparent;border:1px dashed rgba(255,255,255,.4)}
.dg svg{width:100%;height:auto;display:block;overflow:visible}
.dg .wire{stroke:#3C56A6;stroke-width:1.4;fill:none}
.dg .wire-dash{stroke:#5C6FA8;stroke-width:1.2;fill:none;stroke-dasharray:5 5}
.dg .wire-ai{stroke:var(--gold);stroke-width:1.6;fill:none;stroke-dasharray:6 6}
.dg .wire-gold{stroke:var(--gold);stroke-width:2.4;fill:none}
.dg .wire-refused{stroke:#E88A8A;stroke-width:1.8;fill:none;stroke-dasharray:5 5}
.dg .node{fill:#101F49;stroke:#3C56A6;stroke-width:1.2}
.dg .node-ai{fill:#241B05;stroke:rgba(245,178,26,.6);stroke-width:1.2}
.dg .node-wall{fill:rgba(214,69,69,.12);stroke:rgba(214,69,69,.65);stroke-width:1.2;stroke-dasharray:4 4}
.dg text{font:500 11px var(--font);fill:#C7D2EE}
.dg text.lbl{font:600 11.5px var(--font);fill:#fff}
.dg text.mono{font:600 10px var(--mono);fill:#9FB2E4;letter-spacing:.06em}
.dg text.gold{fill:var(--gold)}
.dg text.sm{font-size:9.5px;fill:#93A3CB}
/* path drawing — the builder sets --len from the real path length */
.dg [data-draw]{stroke-dasharray:var(--len,1000);stroke-dashoffset:var(--len,1000);
  transition:stroke-dashoffset 2.4s var(--ease)}
.dg.in [data-draw]{stroke-dashoffset:0}
.dg .pulse{opacity:0;transition:opacity .5s var(--ease) .2s}
.dg.in .pulse{opacity:1;animation:travel 4.2s linear infinite}
@keyframes travel{from{offset-distance:0%}to{offset-distance:100%}}

/* ---------- 9. Film frame ---------------------------------------------- */
.film{position:relative;border-radius:var(--r-xl);overflow:hidden;border:1px solid var(--border);
  background:#05101F;box-shadow:var(--sh-3)}
.film video{display:block;width:100%;height:auto;background:#05101F}
.film .film-poster{
  position:absolute;inset:0;display:grid;place-items:center;background-size:cover;background-position:center;
  transition:opacity .5s var(--ease);cursor:pointer
}
.film.is-playing .film-poster{opacity:0;pointer-events:none}
/* Once playback has started the poster is gone for good: a paused, scrolled-away
   video shows its own frame rather than a poster that lies about the state. */
.film .film-poster .playbtn{cursor:pointer}
.film .film-poster::before{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(6,14,36,.42),rgba(6,14,36,.82))}
.film .playbtn{
  position:relative;display:grid;place-items:center;width:82px;height:82px;border-radius:50%;border:0;
  background:var(--on-deep);color:var(--bg-deep);cursor:pointer;
  box-shadow:0 24px 60px -18px rgba(0,0,0,.85);transition:transform .3s var(--ease)
}
.film .playbtn:hover{transform:scale(1.06)}
.film .playbtn svg{width:26px;height:26px;margin-left:4px}
.film .playbtn .lbl{position:absolute;top:calc(100% + 14px);font:600 12px/1 var(--mono);letter-spacing:.14em;
  text-transform:uppercase;color:#DCE4F8;white-space:nowrap}
.film-meta{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--s4);margin-top:var(--s5)}
.film-meta div{border-top:1px solid var(--border);padding-top:12px}
.film-meta b{display:block;font:600 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;
  color:var(--accent);margin-bottom:8px}
.film-meta p{font-size:13px;color:var(--muted);line-height:1.6}
.film-note{font-size:12px;color:var(--subtle);margin-top:var(--s4)}

/* ---------- 10. Health check ------------------------------------------ */
.est{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(22px,3vw,44px);align-items:start}
.est-fields{display:grid;gap:var(--s5)}
.est-field label{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  font-size:13.5px;font-weight:600;color:var(--text)}
.est-field .val{font:700 15px/1 var(--mono);color:var(--accent)}
.est-field .help{font-size:12px;color:var(--muted);margin-top:4px;line-height:1.5}
.est-field input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:26px;background:transparent;margin-top:8px;cursor:pointer
}
.est-field input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:3px;background:var(--border-strong)}
.est-field input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:var(--accent);
  border:3px solid var(--surface);box-shadow:var(--sh-1);margin-top:-7px
}
.est-field input[type=range]::-moz-range-track{height:4px;border-radius:3px;background:var(--border-strong)}
.est-field input[type=range]::-moz-range-thumb{width:14px;height:14px;border:3px solid var(--surface);
  border-radius:50%;background:var(--accent)}
.est-field :focus-visible{outline:2px solid var(--focus);outline-offset:4px;border-radius:6px}
.est-out{position:sticky;top:calc(var(--nav-h) + 22px);display:grid;gap:var(--s4);
  background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-xl);padding:var(--s5)}
.est-out h3{font-size:15px}
.est-cells{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3)}
.est-cell{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-m);padding:13px 14px}
.est-cell b{display:block;font:700 clamp(20px,2.4vw,26px)/1 var(--mono);letter-spacing:-.02em;color:var(--text);
  font-variant-numeric:tabular-nums}
.est-cell.hi b{color:var(--accent)}
.est-cell span{display:block;font-size:11.5px;color:var(--muted);margin-top:7px;line-height:1.45}
.est-note{font-size:12px;color:var(--muted);line-height:1.6;border-top:1px solid var(--border);padding-top:12px}
.est-assump{display:grid;gap:6px;border:1px dashed var(--border-strong);border-radius:var(--r-m);
  padding:12px 14px;background:var(--surface)}
.est-assump b{font:600 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ai-text)}
.est-assump input[type=range]{margin-top:0}

/* ---------- 11. Checklist rows (the buyer's questions) ----------------- */
.checkrows{display:grid;gap:0;border-top:1px solid var(--border)}
.checkrow{border-bottom:1px solid var(--border);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(18px,3vw,40px);padding:clamp(20px,2.6vw,30px) 0}
.checkrow h3{font-size:clamp(16px,1.7vw,19px);letter-spacing:-.02em;display:flex;gap:12px}
.checkrow .qn{font:700 11px/22px var(--mono);color:var(--accent);width:26px;height:22px;flex:none;
  border:1px solid var(--border-strong);border-radius:6px;text-align:center}
.checkrow .ask{font-size:13px;color:var(--muted);margin-top:9px;line-height:1.62;padding-left:38px}
.checkrow .ours{font-size:14.5px;color:var(--text);line-height:1.65}
.checkrow .ours::before{content:"The Managed Desk";display:block;font:600 10.5px/1 var(--mono);
  letter-spacing:.13em;text-transform:uppercase;color:var(--accent);margin-bottom:9px}
.checkrow .caveat{margin-top:12px;font-size:12.5px;color:var(--warn-text);border-left:2px solid var(--amber);
  padding-left:12px;line-height:1.6}
.elsewhere{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4);margin-top:var(--s6)}
.elsewhere div{border:1px solid var(--border);border-radius:var(--r-l);padding:var(--s5);background:var(--surface-2)}
.elsewhere b{display:block;font-size:14px;margin-bottom:8px}
.elsewhere p{font-size:13px;color:var(--muted);line-height:1.6}

/* ---------- 12. Integrations ------------------------------------------- */
.int-group{margin-top:var(--s7)}
.int-items{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4);margin-top:var(--s4)}
.int{border:1px solid var(--border);border-radius:var(--r-l);padding:var(--s5);background:var(--surface);
  display:grid;gap:10px;align-content:start}
.int h4{font-size:15.5px;letter-spacing:-.015em;display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.int .st{font:600 10px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;border-radius:var(--r-pill);
  padding:5px 9px;border:1px solid var(--border-strong);color:var(--muted)}
.int .st.standard{color:var(--ok-text);border-color:color-mix(in srgb,var(--green) 42%,transparent)}
.int .st.onboarding{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 38%,transparent)}
.int .st.preview{color:var(--ai-text);border-color:color-mix(in srgb,var(--gold) 42%,transparent)}
.int p{font-size:13.5px;color:var(--muted);line-height:1.62}
.int-legend{display:flex;flex-wrap:wrap;gap:var(--s5);margin-top:var(--s4);font-size:12.5px;color:var(--muted)}
.int-legend b{color:var(--text)}

/* ---------- 13. Command palette ---------------------------------------- */
.cmdk{position:fixed;inset:0;z-index:120;display:none}
.cmdk.open{display:block}
.cmdk .scrim{position:absolute;inset:0;background:rgba(5,10,26,.62);backdrop-filter:blur(4px)}
.cmdk .panel{
  position:relative;margin:12vh auto 0;width:min(620px,calc(100vw - 32px));background:var(--surface);
  border:1px solid var(--border-strong);border-radius:var(--r-l);box-shadow:var(--sh-3);overflow:hidden;
  animation:cmdin .18s var(--ease)
}
@keyframes cmdin{from{opacity:0;transform:translateY(-8px) scale(.99)}to{opacity:1;transform:none}}
.cmdk input{
  width:100%;border:0;background:transparent;color:var(--text);font:500 16px/1 var(--font);
  padding:18px 20px;outline:none
}
.cmdk .res{max-height:52vh;overflow:auto;border-top:1px solid var(--border)}
.cmdk a{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:12px 18px;
  color:var(--text);text-decoration:none;border-bottom:1px solid var(--border)}
.cmdk a:last-child{border-bottom:0}
.cmdk a[aria-selected="true"],.cmdk a:hover{background:var(--accent-soft)}
.cmdk a .ic{width:16px;height:16px;color:var(--accent)}
.cmdk a small{font-size:12px;color:var(--muted)}
.cmdk a kbd{font:600 10px/1 var(--mono);border:1px solid var(--border-strong);border-radius:5px;padding:4px 6px;
  color:var(--muted)}
.cmdk .empty{padding:22px 20px;color:var(--muted);font-size:13.5px}
.cmdk-hint{
  display:inline-flex;align-items:center;gap:8px;font:600 11.5px/1 var(--mono);color:var(--muted);
  background:transparent;border:1px solid var(--border);border-radius:var(--r-pill);padding:7px 11px;
  cursor:pointer;font-family:var(--mono)
}
.cmdk-hint:hover{border-color:var(--accent);color:var(--accent)}
.cmdk-hint kbd{font-family:var(--mono);font-size:11px}

/* ---------- 14. Reading progress --------------------------------------- */
.progress{position:fixed;top:0;left:0;height:2px;width:0;background:linear-gradient(90deg,var(--brand-500),var(--gold));
  z-index:130;transition:width .1s linear;pointer-events:none}
.progress[data-static="1"]{display:none}

/* ---------- 15. Stats / numbers, mono treatment ------------------------ */
.stat b,.est-cell b,.kpi b{font-variant-numeric:tabular-nums}
.panel-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--border);
  border:1px solid var(--border);border-radius:var(--r-l);overflow:hidden;margin-top:var(--s6)}
.panel-grid > div{background:var(--surface);padding:var(--s5)}
.panel-grid b{display:block;font:700 12px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--accent-text);
  margin-bottom:10px}
.panel-grid p{font-size:13.5px;color:var(--muted);line-height:1.62}
.panel-grid p strong{color:var(--text)}

/* ---------- 16. Contrast, band and mobile corrections ------------------- */
/* --- 16a. A text-safe accent. --accent is tuned as a FILL (it carries white
   text on a button), so it is too dark to sit ON a dark surface: in the dark
   theme brand-500 on navy measures 2.4-2.9:1, and in the light theme
   brand-600 on the deep bands is 1.75:1. Anything that paints text uses
   --accent-text instead, which is resolved per theme. -------------------- */
:root[data-theme="light"]{--accent-text:var(--brand-600);--accent-on-deep:var(--brand-300)}
:root[data-theme="dark"]{--accent-text:var(--brand-300);--accent-on-deep:var(--brand-300)}
.secnum{color:var(--accent-text)}
.secnum::after{background:color-mix(in srgb,var(--accent-text) 45%,transparent)}
.sclist .sn,.sclist button[aria-selected="true"] .sn{color:var(--accent-text)}
.est-field .val,.est-cell.hi b,.checkrow .qn,.checkrow .qn{color:var(--accent-text)}
.sc-hero .chip,.sc-card .chip,.film-meta b{color:var(--accent-text)}
.int .st.onboarding{color:var(--accent-text)}
.est-assump b{color:var(--ai-text)}
/* Inside a deep band the accent is the light tint in BOTH themes. */
.hero2 .secnum,.theatre .secnum,.dg .secnum,.phead .secnum,
.deep .secnum,.theatre .sclist .sn{color:var(--accent-on-deep)}

/* --- 16b. Page head bands. The v1 reference only styled the homepage hero,
   so a dark page head on any other page left .btn-secondary (and anything
   else that sets its own colour) painting --text — navy on navy, 1:1. ---- */
.phead{position:relative;overflow:hidden;isolation:isolate;
  background:var(--bg-deep);color:var(--on-deep);
  padding-top:calc(var(--nav-h) + clamp(40px,6vw,84px));padding-bottom:clamp(40px,5vw,72px)}
.phead .amb{opacity:.8}
.phead > .wrap{position:relative;z-index:2}
.phead h1{color:var(--on-deep);font-size:clamp(34px,5vw,62px);letter-spacing:-.04em;
  line-height:1.03;margin-top:var(--s5);text-wrap:balance;font-weight:800}
.phead .lede,.phead p{color:#D5DDF5}
.phead .kicker{display:inline-flex;align-items:center;gap:10px;font:600 11.5px/1 var(--mono);
  letter-spacing:.18em;text-transform:uppercase;color:#AFC0EE;border:1px solid var(--deep-border);
  background:var(--deep-surface);border-radius:var(--r-pill);padding:9px 15px}
.phead .btn-secondary,.phead .btn-ghost{color:var(--on-deep);border-color:rgba(255,255,255,.34);
  background:rgba(255,255,255,.04);box-shadow:none}
.phead .btn-secondary:hover,.phead .btn-ghost:hover{background:rgba(255,255,255,.1);
  border-color:rgba(255,255,255,.6);color:var(--on-deep)}
.phead .smallprint,.phead .smallprint a{color:#9BAAD2}
.phead .breadcrumb{color:#A9B7DC}
.phead .breadcrumb a{color:#C7D2EE}

/* --- 16c. Text inside the deep bands. .sc-steps and .sc-box items set their
   own --text colour, which is navy in the light theme and therefore invisible
   on a deep navy panel. ------------------------------------------------ */
.theatre .sc-steps li,.theatre .sc-box li,.theatre .sc-story p,
.deep .sc-steps li,.deep .sc-box li{color:#DCE4F8}
.theatre .sc-box h3,.theatre .sc-story h3,.deep .sc-box h3{color:#fff}
.theatre .sc-steps li::before{border-color:rgba(255,255,255,.3);color:var(--accent-on-deep)}
.theatre .sc-box{background:rgba(255,255,255,.04);border-color:var(--deep-border)}
.theatre .sc-story{border-color:var(--deep-border)}

/* --- 16d. Mobile: two-column splits and the wide footer ---------------- */
/* Inline grid-template-columns in a page body cannot respond to a media query.
   The About page's record list was 82px wider than a 390px viewport because of
   exactly that; these classes are the fix, and .sc-box list children must also
   be allowed to shrink below their min-content width. */
.two-col{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(24px,3vw,48px);align-items:start}
.two-col.wide-left{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
.split-13{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}
@media (max-width:760px){
  .two-col,.two-col.wide-left,.split-13,.panel-grid.split-13{grid-template-columns:1fr}
}
.sc-box li > *{min-width:0}
.sc-box li span,.sc-card p,.int p,.tile p{overflow-wrap:anywhere}

/* --- 16e. Class-name collisions with the reference mock components ------ */
/* .row/.rows belong to the reference product mocks and carry their own light
   surface. Reused inside the theatre panel they painted a #F7F9FC block behind
   white text (measured 1.05:1). Keep the layout, remove the inherited surface. */
.tpanel .tp-body .row{background:transparent;border:0;border-radius:0;padding:0;box-shadow:none}
/* .btn-secondary sets its own colour (--text, i.e. navy in the light theme),
   so inside a deep band it disappeared. Both bands need the override, not just
   the homepage hero. */
.theatre .btn-secondary,.theatre .btn-ghost,
.deep .btn-secondary,.deep .btn-ghost{color:var(--on-deep);border-color:rgba(255,255,255,.34);
  background:rgba(255,255,255,.04);box-shadow:none}
.theatre .btn-secondary:hover,.theatre .btn-ghost:hover,
.deep .btn-secondary:hover,.deep .btn-ghost:hover{background:rgba(255,255,255,.1);
  border-color:rgba(255,255,255,.6);color:var(--on-deep)}
/* .elsewhere keeps a light surface: inside a deep band it needs the band's own
   surface and text colours. */
.theatre .elsewhere div,.deep .elsewhere div{background:rgba(255,255,255,.04);
  border-color:var(--deep-border)}
.theatre .elsewhere b,.deep .elsewhere b{color:var(--on-deep)}
.theatre .elsewhere p,.deep .elsewhere p{color:#C7D2EE}

/* --- 16f. The film's duration chip. Over a poster image the probe (and a
   reader) has nothing solid behind the label, so it gets its own surface. - */
.film .playbtn .lbl{background:rgba(6,14,36,.88);padding:7px 13px;border-radius:var(--r-pill);
  border:1px solid rgba(255,255,255,.16)}

/* --- 16g. The nav row. Seven items plus four actions is a wide row: at 1440px
   "Use cases" was wrapping onto two lines (a wrap does not overflow, so the QA
   probe cannot see it) and the whole bar looked uneven. Keep the links on one
   line and make room by retiring the in-bar search hint sooner. ----------- */
.nav-links{flex-wrap:nowrap}
.nav-links a{white-space:nowrap}
@media (max-width:1400px){
  .nav-actions .cmdk-hint{display:none}
}
@media (max-width:1250px){
  .nav-links{gap:14px}
  .nav-links a{font-size:13.5px}
}
@media (max-width:1120px){
  .nav-links{gap:11px}
  .nav-links a{font-size:13px}
}

/* --- 16h. Header / footer corrections for the wider footer -------------- */
.foot-grid{grid-template-columns:1.4fr repeat(4,minmax(0,1fr))}
@media (max-width:1120px){
  .nav-actions .btn-ghost{display:none}
}
@media (max-width:1080px){
  .foot-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s7)}
}

/* ---------- 17. Utility ------------------------------------------------ */
.stack-lg > * + *{margin-top:var(--s7)}
.eyebrow.mono{font-family:var(--mono);letter-spacing:.16em}
.mb0{margin-bottom:0}
.mt6{margin-top:var(--s6)}
.mt7{margin-top:var(--s7)}
.nowrap{white-space:nowrap}
.smallprint{font-size:12px;color:var(--subtle);line-height:1.6}

/* staggered reveal for children */
[data-stagger] > *{opacity:0;transform:translateY(18px)}
[data-stagger].in > *{opacity:1;transform:none;transition:opacity .7s var(--ease),transform .7s var(--ease)}
[data-stagger].in > *:nth-child(1){transition-delay:.04s}
[data-stagger].in > *:nth-child(2){transition-delay:.12s}
[data-stagger].in > *:nth-child(3){transition-delay:.2s}
[data-stagger].in > *:nth-child(4){transition-delay:.28s}
[data-stagger].in > *:nth-child(5){transition-delay:.36s}
[data-stagger].in > *:nth-child(6){transition-delay:.44s}
[data-stagger].in > *:nth-child(7){transition-delay:.52s}
[data-stagger].in > *:nth-child(8){transition-delay:.6s}

/* ---------- 17. Responsive -------------------------------------------- */
@media (max-width:1080px){
  .theatre .grid2{grid-template-columns:1fr}
  .tpanel{position:relative;top:0}
  .scex{grid-template-columns:1fr}
  .sclist{position:relative;top:0;grid-template-columns:repeat(2,minmax(0,1fr));display:grid}
  .sc-cards,.elsewhere,.panel-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .film-meta{grid-template-columns:repeat(3,minmax(0,1fr))}
  .trust ul{grid-template-columns:repeat(2,minmax(0,1fr))}
  .est{grid-template-columns:1fr}
  .est-out{position:relative;top:0}
  .sc-hero{grid-template-columns:1fr}
  .motif{width:100%;height:150px}
  .checkrow{grid-template-columns:1fr;gap:14px}
  .checkrow .ask{padding-left:0}
}
@media (max-width:760px){
  .hero2 h1{font-size:clamp(34px,9.6vw,46px)}
  .sc-grid,.sc-story,.int-items,.sc-cards,.elsewhere,.panel-grid{grid-template-columns:1fr}
  .sclist{grid-template-columns:1fr}
  .film-meta{grid-template-columns:repeat(2,minmax(0,1fr))}
  .est-cells{grid-template-columns:1fr}
  .ticker-track{animation-duration:70s}
}

/* ---------- 18. Motion opt-out ---------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .amb i,.ticker-track,.hero2 .kicker .dotpulse{animation:none!important}
  .hero2 h1 .ln > span{transform:none;animation:none}
  .dg [data-draw]{stroke-dashoffset:0;transition:none}
  .dg .pulse{opacity:1;animation:none!important}
  .reveal,[data-stagger] > *{opacity:1!important;transform:none!important}
  .hot::before{display:none}
}

/* ---------- 19. Header ribbon: slimmer, logo-led ------------------------ */
/* The ribbon carries the identifier, not a second navigation plane. At 56px
   with the tagline line hidden, the mark leads and the page starts sooner.
   Overridden here rather than in the shared reference so the design system
   itself stays untouched. */
:root{--nav-h:56px}
.nav .wrap{gap:var(--s4)}
.nav .brand{gap:10px}
.nav .brand-sub{display:none}
.nav .emblem{width:20px;height:30px}
.nav-links a{font-size:14px}
@media (max-width:680px){:root{--nav-h:52px}}

/* ---------- 20. Commitments band ---------------------------------------- */
/* Replaces the old "what we do not claim" warning box: the same space now
   carries the promises that go into the agreement. */
.commit-band{
  display:flex;gap:14px;align-items:flex-start;text-align:left;max-width:92ch;
  padding:var(--s5);border:1px solid var(--border-strong);border-radius:14px;
  background:color-mix(in srgb,var(--accent) 7%,transparent);
  font-size:15px;line-height:1.7
}
.commit-band .ic{flex:none;margin-top:3px;color:var(--accent)}

/* ---------- 21. Browse-along band --------------------------------------- */
/* Three onward links at the foot of every page: the thing that turns a set of
   pages into a site someone reads in one sitting. */
.explore-section{border-top:1px solid var(--border);padding-block:var(--s7) var(--s8)}
.explore-head{display:flex;align-items:center;gap:12px;margin-bottom:var(--s5)}
.explore-head .secnum{margin:0}
.explore-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4)}
.explore-card{
  position:relative;display:flex;flex-direction:column;gap:7px;
  padding:var(--s5) calc(var(--s5) + 22px) var(--s5) var(--s5);
  border:1px solid var(--border);border-radius:14px;background:var(--surface-2);
  color:var(--text);text-decoration:none;
  transition:transform var(--speed) var(--ease),border-color var(--speed) var(--ease),
             box-shadow var(--speed) var(--ease),background-color var(--speed) var(--ease)
}
.explore-card:hover{
  transform:translateY(-2px);border-color:var(--border-strong);background:var(--surface);
  box-shadow:0 12px 32px rgba(15,31,77,.09)
}
[data-theme="dark"] .explore-card:hover{box-shadow:0 12px 32px rgba(0,0,0,.38)}
.ec-label{font-weight:600;font-size:15.5px;line-height:1.3;letter-spacing:-.01em}
.ec-text{color:var(--muted);font-size:14px;line-height:1.6}
.explore-card .arw{
  position:absolute;right:var(--s5);top:calc(var(--s5) + 2px);color:var(--accent);
  transition:transform var(--speed) var(--ease)
}
.explore-card:hover .arw{transform:translateX(3px)}

/* ---------- 22. Global polish ------------------------------------------- */
::selection{background:color-mix(in srgb,var(--accent) 22%,transparent);color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:5px}
.section-title{letter-spacing:-.02em}
.eyebrow,.secnum{letter-spacing:.15em}
.card,.tile,.sc-box{
  transition:transform var(--speed) var(--ease),border-color var(--speed) var(--ease),
             box-shadow var(--speed) var(--ease)
}
.card:hover,.tile:hover{border-color:var(--border-strong);box-shadow:0 8px 24px rgba(15,31,77,.07)}
[data-theme="dark"] .card:hover,[data-theme="dark"] .tile:hover{box-shadow:0 8px 24px rgba(0,0,0,.3)}
.prose a,.lede a,.card p a,.fine a{
  text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px
}
@media (max-width:900px){.explore-grid{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){
  .explore-card:hover,.explore-card:hover .arw{transform:none}
}

/* ---------- 23. Trust strip --------------------------------------------- */
/* A rule-separated grid rather than six floating seals: it reads as evidence
   beside each claim, which is what a reviewer is looking for. */
.trust-band{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:1px;background:var(--border);border:1px solid var(--border);
  border-radius:14px;overflow:hidden
}
.trust-chip{background:var(--surface);padding:var(--s4) var(--s4) var(--s4)}
.trust-chip b{display:block;font-size:14px;line-height:1.35;letter-spacing:-.01em}
.trust-chip span{display:block;margin-top:4px;color:var(--muted);font-size:12.5px;line-height:1.55}
@media (max-width:680px){.trust-chip{padding:var(--s3) var(--s4)}}

/* Checklist text inherits the light-theme muted token unless the dark section
   overrides it, which rendered dark-on-dark (2.02:1) inside a .deep card. */
.deep .checklist span{color:var(--on-deep-muted)}
.deep .checklist b{color:var(--on-deep)}

/* ---------- 24. Directory listings ("Independently listed on") -----------
   Only rendered when content.LISTINGS holds a listing whose public page
   resolves. Deliberately text-first: no star ratings, no award artwork, no
   borrowed logos. A badge that implies a rating we have not earned is the
   cheap kind of credibility, and buyers check. ----------------------------- */
.listed{
  display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px;
  margin-top:26px;padding-top:22px;border-top:1px solid rgba(255,255,255,.14)
}
.listed-label{
  font:600 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--on-deep-muted)
}
.listed-list{display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin:0;padding:0}
.listed-chip{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 14px;border:1px solid rgba(255,255,255,.22);border-radius:999px;
  background:rgba(255,255,255,.07);color:var(--on-deep);
  font:600 13px/1 var(--sans,inherit);text-decoration:none;
  transition:border-color .18s var(--ease),background .18s var(--ease),transform .18s var(--ease)
}
.listed-chip:hover{border-color:rgba(255,255,255,.45);background:rgba(255,255,255,.12);transform:translateY(-1px)}
.listed-chip:focus-visible{outline:2px solid var(--ai-text,var(--accent));outline-offset:3px}
.listed-dot{width:7px;height:7px;border-radius:50%;background:var(--ai-text,var(--accent));flex:none}
@media (max-width:680px){.listed{gap:12px}.listed-chip{padding:7px 12px;font-size:12.5px}}
@media (prefers-reduced-motion:reduce){.listed-chip{transition:none}.listed-chip:hover{transform:none}}

/* Review CTA — a plain invitation, no rating claim attached to it. */
.listed-cta{
  display:inline-flex;align-items:center;gap:6px;margin-left:2px;
  color:var(--on-deep);font:600 13px/1 var(--sans,inherit);text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.30);padding-bottom:2px;
  transition:border-color .18s var(--ease),color .18s var(--ease)
}
.listed-cta:hover{border-color:var(--ai-text,var(--accent));color:var(--ai-text,var(--accent))}
.listed-cta:focus-visible{outline:2px solid var(--ai-text,var(--accent));outline-offset:3px;border-radius:2px}
.listed-cta-arrow{font-size:12px;line-height:1;transform:translateY(-1px)}
@media (max-width:680px){.listed-cta{font-size:12.5px}}
@media (prefers-reduced-motion:reduce){.listed-cta{transition:none}}

/* ---------- 25. Assurance position (certifications, including gaps) ------
   Sits inside a .deep section, so it uses the on-deep tokens. Status is
   carried by the label text ("Not held"), not by colour alone (WCAG 1.4.1);
   the tint is supplementary. ------------------------------------------------- */
.ass-block{margin-top:var(--s8);padding-top:var(--s6);border-top:1px solid var(--deep-border)}
.ass-head h3{color:var(--on-deep);font-size:20px;letter-spacing:-.01em}
.ass-head p{margin-top:8px;color:var(--on-deep-muted);font-size:14.5px;line-height:1.6;max-width:70ch}
.ass-rows{margin-top:var(--s5);display:grid;gap:1px;background:var(--deep-border);border:1px solid var(--deep-border);border-radius:14px;overflow:hidden}
.ass-row{display:grid;grid-template-columns:minmax(190px,.9fr) auto minmax(0,2.2fr);gap:var(--s4);align-items:start;background:var(--deep-surface);padding:14px 16px}
.ass-name{color:var(--on-deep);font-weight:600;font-size:14px;line-height:1.4}
.ass-status{font:600 10.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;padding:6px 9px;border-radius:999px;border:1px solid currentColor;white-space:nowrap;justify-self:start}
.ass-status.is-gap{color:var(--on-deep-muted)}
.ass-status.is-partial,.ass-status.is-held{color:var(--ai-text,var(--accent))}
.ass-note{margin:0;color:var(--on-deep-muted);font-size:13.5px;line-height:1.6}
.ass-link{color:var(--on-deep);text-decoration:underline;text-underline-offset:2px}
.ass-link:hover{color:var(--ai-text,var(--accent))}
.ass-foot{margin-top:var(--s4);color:var(--on-deep-muted);font-size:13.5px;line-height:1.6;max-width:70ch}
@media (max-width:760px){.ass-row{grid-template-columns:1fr;gap:8px}}

/* The trust band held six items at five-across, leaving a ragged final row.
   Eight items in four columns reads as a deliberate 2×4 block on desktop. */
@media (min-width:1100px){.trust-band{grid-template-columns:repeat(4,1fr)}}

/* ---------- 26. Product screenshots ------------------------------------ */
.shots{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:var(--s6)}
.shots figure{margin:0;border:1px solid var(--border);border-radius:16px;overflow:hidden;
  background:var(--surface);box-shadow:0 18px 40px -28px rgba(10,20,45,.55)}
/* the customer-facing shot runs the full width: forcing it into a half-column
   cropped half the screenshot away, which is worse than showing it smaller */
.shots .wide{grid-column:1/-1}
.shots img{display:block;width:100%;height:auto}
.shots figcaption{padding:12px 15px;font-size:13px;line-height:1.45;color:var(--muted);
  border-top:1px solid var(--border)}
.shots figcaption b{display:block;color:inherit;font-size:13.5px;margin-bottom:1px}
@media(max-width:880px){
  .shots{grid-template-columns:1fr}
}

/* ---------- 27. Grid composites are self-sufficient ------------------- */
/* .g2/.g3/.g4 only ever set grid-template-columns, so they depended on the
   .grid class for `display:grid`. Where the markup forgot it, the children
   became block-level full-width boxes that overlapped each other — the six
   capability cards were stacking on the homepage for exactly this reason.
   Declaring it here means the bug cannot come back from a missing class. */
.g2,.g3,.g4{display:grid;gap:var(--s4)}

.shot-hero{margin:var(--s6) 0 0;border:1px solid var(--border);border-radius:16px;overflow:hidden;
  background:var(--surface);box-shadow:0 24px 50px -34px rgba(10,20,45,.6)}
.shot-hero img{display:block;width:100%;height:auto}
.shot-hero figcaption{padding:12px 16px;font-size:13px;color:var(--muted);border-top:1px solid var(--border)}
.shot-hero figcaption b{color:inherit;font-size:13.5px;margin-right:8px}