/* V9: a lighter hero with the market board, the C path (#approach) beside the
   untouched V8 path (#system), frosted sheets and a small compare control.
   Loaded after v8.css. The #system block keeps every V8 rule. */

/* ---------------------------------------------------------- hero -- */
.v9 .hero__inner{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);column-gap:clamp(16px,2vw,40px);align-items:center;min-height:0;padding-top:clamp(18px,2.4vw,40px);padding-bottom:clamp(34px,4vw,64px)}
.v9 .hero__text{position:relative;z-index:2;min-width:0}
.v9 .hero__headline{font-size:clamp(2.75rem,5.2vw,5.1rem);line-height:1.03;letter-spacing:-.055em;margin:1.1rem 0 0;width:auto;max-width:none}
.v9 .hero__soft{font-size:.56em;font-weight:470;letter-spacing:-.035em;color:#41414D}
.v9 .hero__headline--direct{font-size:clamp(2.4rem,4.3vw,4.25rem)}
.v9 .hero__lede{font-size:clamp(1.0625rem,1.22vw,1.25rem);line-height:1.52;max-width:34rem;margin-top:1.35rem;color:#34343E;position:relative;z-index:3}
.v9 .hero__actions{margin:1.6rem 0 1.9rem;max-width:none}
.v9 .hero__proof{margin-top:0;padding-bottom:0;gap:clamp(22px,3.2vw,55px);max-width:none}
.v9 .hero-art{position:relative;top:auto;right:auto;left:auto;width:calc(100% + var(--pad) * .6);height:auto;aspect-ratio:4/3;margin:0 calc(var(--pad) * -.6) 0 0;z-index:1;align-self:center}
.v9 .hero-art:before{inset:24% 8% 6% 4%;opacity:.5}
.v9 .hero-engine{position:absolute;inset:0;width:100%;height:100%}
.hero-tags{position:absolute;inset:0;pointer-events:none;z-index:2}
.hero-tag{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,calc(-100% - .55rem));font:560 .75rem/1 Archivo,Arial,sans-serif;letter-spacing:.01em;color:#0E1116;background:rgba(255,253,250,.92);padding:.45rem .72rem;border-radius:99px;box-shadow:inset 0 0 0 1px rgba(14,17,22,.1),0 6px 16px -10px rgba(14,17,22,.45);white-space:nowrap}
.hero-tag:after{content:'';position:absolute;left:50%;top:100%;width:1px;height:.55rem;background:rgba(14,17,22,.35)}
.hero-tag[data-anchor=pipeline]{background:#FBEFD2;box-shadow:inset 0 0 0 1px #ECD08A,0 6px 16px -10px rgba(14,17,22,.45)}

@media(max-width:1099px){
  .v9 .hero__inner{grid-template-columns:minmax(0,1fr) minmax(0,.92fr)}
  .v9 .hero__headline{font-size:clamp(2.5rem,5.6vw,3.9rem)}
  .v9 .hero__headline--direct{font-size:clamp(2.2rem,4.6vw,3.3rem)}
  .v9 .hero__lede{font-size:1rem}
}
@media(max-width:860px){
  .v9 .hero__inner{grid-template-columns:minmax(0,1fr);row-gap:8px}
  .v9 .hero__headline{font-size:clamp(2.4rem,7.4vw,3.6rem)}
  .v9 .hero-art{width:min(100%,620px);margin:0 auto;justify-self:center}
}
@media(max-width:760px){
  .v9 .hero__inner{padding-top:22px;padding-bottom:30px}
  .v9 .hero__headline{font-size:clamp(2.05rem,9.6vw,3rem);line-height:1.06;margin-top:1rem}
  .v9 .hero__soft{font-size:.6em}
  .v9 .hero__headline--direct{font-size:clamp(1.9rem,8.4vw,2.6rem)}
  .v9 .hero__lede{font-size:.97rem;line-height:1.55;margin-top:1.05rem}
  .v9 .hero__actions{margin:1.25rem 0 1.4rem}
  .v9 .hero-art{width:calc(100% + var(--pad) * 2 - 8px);margin:4px calc(var(--pad) * -1 + 4px) 0}
  .hero-tag{font-size:.66rem;padding:.36rem .55rem}
}

/* ---------------------------------------------------------- frosted sheets -- */
.v9 .approach{background:var(--sheet)}
.v9 .sheet:not(.system){--sheet-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 2px 6px -2px rgba(14,17,22,.08),16px 30px 64px -38px rgba(14,17,22,.34);box-shadow:var(--sheet-shadow)}
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))) and ((mask-composite:intersect) or (-webkit-mask-composite:source-in)){
  /* V9 round 2: the frost is drawn by a masked ::before so its opacity follows
     zones instead of one radial wash. Text columns stay at 96 %; the outer band
     of every sheet (inside the container padding, never under text) drops to
     about 40 %, so objects crossing an edge read through it. One blur level,
     light enough that shapes stay legible. */
  html[data-surface=frost] .v9 .sheet:not(.system){--fx-band:calc(var(--pad) * .8);--fx-top:clamp(36px,4.4vw,72px);--fx-et:.4;--fx-eb:.4;--fx-es:.42;--fx-col:1;--fx-col-end:0%;background:transparent;-webkit-backdrop-filter:blur(8px) saturate(1.06);backdrop-filter:blur(8px) saturate(1.06)}
  html[data-surface=frost] .v9 .sheet:not(.system):before{content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;background:rgba(255,253,250,.96);
    -webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,var(--fx-es)) 0,#000 var(--fx-band),#000 calc(100% - var(--fx-band)),rgba(0,0,0,var(--fx-es)) 100%),linear-gradient(180deg,rgba(0,0,0,var(--fx-et)) 0,#000 var(--fx-top),#000 calc(100% - var(--fx-top)),rgba(0,0,0,var(--fx-eb)) 100%);
    -webkit-mask-composite:source-in;
    mask-image:linear-gradient(90deg,rgba(0,0,0,var(--fx-es)) 0,#000 var(--fx-band),#000 calc(100% - var(--fx-band)),rgba(0,0,0,var(--fx-es)) 100%),linear-gradient(180deg,rgba(0,0,0,var(--fx-et)) 0,#000 var(--fx-top),#000 calc(100% - var(--fx-top)),rgba(0,0,0,var(--fx-eb)) 100%);
    mask-composite:intersect}
  html[data-surface=frost] .v9 .contact:before{background:rgba(252,224,1,.97)}
  /* the about and collab sheets meet without a gap: no transmissive seam */
  html[data-surface=frost] .v9 .about{--fx-eb:1}
  html[data-surface=frost] .v9 .collab.sheet--bottom{--fx-et:1}
  /* #approach, wide screens: the diagram column lets the scene through (about
     60 %); the questions column and the section head stay protected. */
  @media(min-width:1100px){
    html[data-surface=frost] .v9 .sheet.approach:before{
      -webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,var(--fx-es)) 0,rgba(0,0,0,.58) var(--fx-band),rgba(0,0,0,.58) 46%,#000 53%,#000 calc(100% - var(--fx-band)),rgba(0,0,0,var(--fx-es)) 100%),linear-gradient(180deg,rgba(0,0,0,var(--fx-et)) 0,#000 var(--fx-top),#000 calc(100% - var(--fx-top)),rgba(0,0,0,var(--fx-eb)) 100%);
      mask-image:linear-gradient(90deg,rgba(0,0,0,var(--fx-es)) 0,rgba(0,0,0,.58) var(--fx-band),rgba(0,0,0,.58) 46%,#000 53%,#000 calc(100% - var(--fx-band)),rgba(0,0,0,var(--fx-es)) 100%),linear-gradient(180deg,rgba(0,0,0,var(--fx-et)) 0,#000 var(--fx-top),#000 calc(100% - var(--fx-top)),rgba(0,0,0,var(--fx-eb)) 100%)}
    html[data-surface=frost] .v9 .approach:after{content:'';position:absolute;z-index:-1;pointer-events:none;top:var(--fx-top);left:var(--fx-band);right:var(--fx-band);height:calc(var(--c-head-h,28rem) - var(--fx-top));background:linear-gradient(180deg,rgba(255,253,250,.96) 0,rgba(255,253,250,.96) calc(100% - 70px),rgba(255,253,250,0) 100%)}
    html[data-surface=frost] .v9 .c-figure{background:rgba(250,248,240,.2);box-shadow:inset 0 0 0 1px rgba(14,17,22,.09)}
  }
}
/* diagram labels keep a paper halo when the scene shows through */
.c-map text{paint-order:stroke fill;stroke:rgba(255,253,250,.88);stroke-width:3.5px;stroke-linejoin:round}
@media(prefers-reduced-transparency:reduce){
  html[data-surface] .v9 .sheet:not(.system):not(.contact){background:var(--sheet);-webkit-backdrop-filter:none;backdrop-filter:none}
  html[data-surface] .v9 .contact{background:#FCE001;-webkit-backdrop-filter:none;backdrop-filter:none}
  html[data-surface] .v9 .sheet:not(.system):before,html[data-surface] .v9 .approach:after{display:none}
}

/* ---------------------------------------------------------- preview tags -- */
.c-preview{display:flex;flex-wrap:wrap;align-items:center;gap:.55rem 1rem;margin:0 0 2.2rem;font:500 .75rem/1.3 IBM,monospace;color:#5A5A66}
.c-preview__tag{background:#0E1116;color:#FFFEFA;border-radius:99px;padding:.4rem .8rem}
.c-preview--ref .c-preview__tag{background:#E4E3DC;color:#0E1116}
.c-preview a{text-decoration:underline;text-underline-offset:3px;padding:.3rem 0}
.c-preview a:hover{color:#C98A00}

/* ---------------------------------------------------------- the C path -- */
.v9 .approach{padding:clamp(56px,6.4vw,100px) 0 clamp(44px,5vw,84px)}
.c-head{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);column-gap:clamp(28px,4vw,72px);align-items:end;margin-bottom:clamp(36px,4.5vw,72px)}
.c-head .section__eyebrow{grid-column:1/-1}
.c-head .section__heading{margin-top:1.25rem;font-size:clamp(2.4rem,4.4vw,4.1rem)}
.c-intro{font-size:1.0625rem;line-height:1.65;color:#484854;max-width:33rem;padding-bottom:.35rem}
.c-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(32px,5vw,96px);align-items:start}
.c-figure{margin:0;position:sticky;top:calc(var(--nav-h) + 3vh);padding:clamp(12px,1.6vw,26px);border-radius:32px;background:rgba(244,242,235,.6);box-shadow:inset 0 0 0 1px rgba(14,17,22,.06)}
.c-map{display:block;width:100%;height:auto;max-height:calc(100vh - var(--nav-h) - 9vh);overflow:visible}
.c-map [data-st]:not([data-st="0"]){opacity:0;visibility:hidden}
.c-cap{font-family:IBM,monospace;letter-spacing:.08em;text-transform:uppercase;fill:#5A5A66}
.c-acts{list-style:none;margin:0;padding:0}
.c-act{position:relative;min-height:min(72vh,680px);display:flex;flex-direction:column;justify-content:center;padding:clamp(28px,3.4vw,52px) 0;border-top:1px solid rgba(14,17,22,.1)}
.c-act:first-child{border-top:0;padding-top:0;min-height:min(62vh,580px);justify-content:flex-start}
.c-act:last-child{padding-bottom:0}
.c-act__fig{display:none}
.c-act__tag{display:flex;align-items:center;gap:.7rem;font:500 .75rem/1 IBM,monospace;letter-spacing:.06em;text-transform:uppercase;color:#5A5A66}
.c-act__num{display:inline-grid;place-items:center;width:2.25rem;height:2.25rem;border-radius:50%;background:#F3F0E8;box-shadow:inset 0 0 0 2px #C98A00;color:#0E1116;letter-spacing:0;transition:background .3s var(--ease),box-shadow .3s var(--ease)}
.c-act[data-active] .c-act__num{background:#EBA800;box-shadow:inset 0 0 0 2px #C98A00}
.c-act__q{font-size:clamp(1.85rem,2.7vw,2.75rem);font-weight:500;line-height:1.08;letter-spacing:-.04em;margin:1rem 0 1.1rem;max-width:30rem}
.c-act__text{font-size:1rem;line-height:1.68;color:#3F3F4A;max-width:34rem}
.c-act__list{list-style:none;padding:0;margin:1.3rem 0 0;display:grid;gap:.6rem}
.c-act__list li{position:relative;padding-left:1.35rem;font-size:.875rem;line-height:1.5}
.c-act__list li:before{content:'';position:absolute;left:0;top:.38em;width:.62rem;height:.62rem;border-radius:50%;background:#8A8A98}
.c-act__list--two{grid-template-columns:1fr 1fr;column-gap:1.6rem;max-width:36rem}
.c-split{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem;margin-top:1.4rem;max-width:36rem}
.c-split h4{font-size:.8125rem;font-weight:600;letter-spacing:.02em;margin:0;padding-bottom:.55rem;border-bottom:2px solid #C98A00}
.c-split>div:last-child h4{border-color:#EBA800}
.c-split .c-act__list{margin-top:.85rem}
.c-note{margin-top:1.4rem;padding:1rem 1.2rem;border-radius:18px;background:#FBF5E6;box-shadow:inset 0 0 0 1px #F1E4C2;font-size:.9375rem;line-height:1.6;max-width:34rem}
.c-marks{list-style:none;display:flex;flex-wrap:wrap;gap:.6rem;padding:0;margin:1.5rem 0 0}
.c-marks li{width:2.75rem;height:2.75rem;display:grid;place-items:center;border-radius:14px;background:#FFFEFA;box-shadow:inset 0 0 0 1px rgba(14,17,22,.08),0 6px 14px -10px rgba(14,17,22,.4)}
.c-marks img{width:1.6rem;height:1.6rem;object-fit:contain}
.c-marks li.is-missing img{display:none}
.c-marks li.is-missing:after{content:attr(data-letter);font:600 .9rem/1 Archivo,Arial,sans-serif;color:#C98A00}
.c-loop{display:inline-flex;align-items:center;gap:.55rem;align-self:flex-start;margin-top:1.6rem;padding:.3rem 0;font-size:.875rem;font-weight:550;text-decoration:underline;text-underline-offset:4px;color:#6D5310}
.c-loop:before{content:'↺';font-size:1.15rem;line-height:1}
.c-loop:hover{color:#0E1116}

/* static copies: narrow screens and reduced motion */
.c-scroll .c-act__fig{display:none}
.approach.c-static .c-figure{display:none}
.approach.c-static .c-body{grid-template-columns:minmax(0,1fr)}
.approach.c-static .c-act{min-height:0;justify-content:flex-start}
.approach.c-static .c-act__fig{display:block;margin:0 0 1.4rem;padding:clamp(10px,2.4vw,22px);border-radius:26px;background:rgba(244,242,235,.6);box-shadow:inset 0 0 0 1px rgba(14,17,22,.06);max-width:560px}
.c-act__fig svg{display:block;width:100%;height:auto}
.c-clone text{font-size:17px}.c-clone .c-cap{font-size:14px}.c-clone .c-lab-s text{font-size:14px}
@media(min-width:1100px){
  .approach.c-static .c-act{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);column-gap:clamp(32px,5vw,90px);align-items:start;padding:clamp(32px,3.4vw,52px) 0}
  .approach.c-static .c-act__fig{grid-column:1;grid-row:1/span 8;margin:0}
  .approach.c-static .c-act>:not(.c-act__fig){grid-column:2}
  .approach.c-static .c-act:first-child{padding-top:0}
}
@media(max-width:1099px){
  .c-head{grid-template-columns:minmax(0,1fr)}
  .c-intro{margin-top:1.2rem}
  .c-body{grid-template-columns:minmax(0,1fr)}
  .c-figure{position:static;max-width:560px;margin-bottom:2rem}
  .c-act{min-height:0}
}
@media(max-width:760px){
  .c-preview{margin-bottom:1.6rem;font-size:.6875rem}
  .c-head .section__heading{font-size:clamp(1.9rem,8.4vw,2.4rem);line-height:1.08}
  .c-intro{font-size:.9375rem}
  .c-act{padding:1.8rem 0 2.2rem}
  .c-act__q{font-size:clamp(1.55rem,7vw,1.95rem)}
  .c-act__text{font-size:.9375rem}
  .c-act__list--two,.c-split{grid-template-columns:minmax(0,1fr)}
  .c-split{gap:1.1rem}
  .approach.c-static .c-act__fig{margin-inline:calc(var(--pad) * -.5)}
  .c-clone text{font-size:18px}.c-clone .c-cap{font-size:14.5px}.c-clone .c-lab-s text{font-size:15px}
}

/* ---------------------------------------------------------- compare control -- */
.v9-compare{position:fixed;left:max(12px,env(safe-area-inset-left));bottom:max(12px,env(safe-area-inset-bottom));z-index:40;display:flex;align-items:center;gap:.25rem;padding:.25rem;border-radius:99px;background:rgba(14,17,22,.9);color:#FFFEFA;font:500 .72rem/1 Archivo,Arial,sans-serif;box-shadow:0 10px 26px -12px rgba(14,17,22,.6)}
.v9-compare__label{padding:0 .45rem 0 .65rem;color:#D8D6CB}
.v9-compare a{display:inline-flex;align-items:center;min-height:2.25rem;padding:0 .8rem;border-radius:99px;background:rgba(255,255,255,.1);transition:background .2s}
.v9-compare a:hover{background:rgba(255,255,255,.2)}
.v9-compare a[aria-current]{background:#EBA800;color:#0E1116}
.v9-compare a:focus-visible{outline:2px solid #EBA800;outline-offset:2px}
@media(max-width:760px){.v9-compare{font-size:.66rem}.v9-compare__label{display:none}.v9-compare a{min-height:2.1rem;padding:0 .65rem}}
@media print{.v9-compare{display:none}}

/* ---------------------------------------------------------- far plane -- */
.space__far .far-contours path{stroke-width:1.2}
.space__far .far-contours--low{opacity:.8}

@media(prefers-reduced-motion:reduce){.c-act__num{transition:none}}

/* Local comparison links stay in flow, so they never cover text or diagrams. */
.v9-compare{position:relative;left:auto;bottom:auto;width:max-content;max-width:calc(100% - 32px);margin:var(--gap) auto 24px;z-index:2}