/* Diagnostic Desk - approved 2026-08-27 */
:root{
  --ground:#f4f7fa;--sheet:#fff;--navy:#0b1f33;--body:#344a5f;--faint:#71869a;
  --blue:#1769e0;--blue-hi:#4c9bff;--blue-pale:#e8f1fb;--rule:#c7d4e2;
  --exception:#c4562d;--dark-rule:#334c64;
  --serif:"Newsreader",Georgia,serif;--sans:"IBM Plex Sans",system-ui,sans-serif;
  --mono:"IBM Plex Mono",Consolas,monospace;--wrap:min(1180px,calc(100vw - 48px));
  --measure:66ch;--ease:cubic-bezier(.22,1,.36,1);--mast:58px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--ground)}
body{margin:0;background:var(--ground);color:var(--navy);font-family:var(--sans);font-size:16px;line-height:1.55;text-rendering:optimizeLegibility}
body,button,input,textarea{font-family:var(--sans)}
img,canvas{display:block;max-width:100%}
a{color:var(--blue);text-underline-offset:.18em;text-decoration-thickness:1px}
a:hover{color:#0c4fb5}
button,a,input,textarea{border-radius:0}
:focus-visible{outline:3px solid var(--blue-hi);outline-offset:3px}
[hidden]{display:none!important}
.wrap{width:var(--wrap);margin-inline:auto}
p{max-width:var(--measure);margin:0 0 1.1rem}
h1,h2,h3{font-family:var(--serif);font-weight:600;letter-spacing:-.045em;text-wrap:balance}
h2{font-size:clamp(2.8rem,5.5vw,5.5rem);line-height:.92;margin:0 0 1.7rem;max-width:12ch}
h3{font-size:clamp(1.8rem,3vw,3.2rem);line-height:1;margin:0 0 1rem}
h4{font:500 .69rem/1.2 var(--mono);letter-spacing:.1em;text-transform:uppercase;margin:0 0 .8rem;color:var(--blue)}
strong{font-weight:600}

.skip{position:fixed;z-index:200;top:8px;left:8px;transform:translateY(-150%);background:var(--navy);color:#fff;padding:.75rem 1rem;font:500 .75rem/1 var(--mono)}
.skip:focus{transform:none}

/* Masthead */
.masthead{height:var(--mast);position:sticky;top:0;z-index:80;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:2rem;padding:0 24px;background:rgba(244,247,250,.93);border-bottom:1px solid var(--rule);backdrop-filter:blur(18px)}
.wordmark{font:600 .78rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;text-decoration:none;color:var(--navy)}
.mast-nav{display:flex;justify-content:center;gap:clamp(.8rem,2.5vw,2.2rem)}
.mast-nav a{font:500 .65rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;text-decoration:none;color:var(--faint);position:relative;padding-block:22px}
.mast-nav a:after{content:"";position:absolute;left:0;right:100%;bottom:13px;height:2px;background:var(--blue);transition:right .35s var(--ease)}
.mast-nav a:hover,.mast-nav a.is-here{color:var(--navy)}
.mast-nav a.is-here:after{right:0}
.masthead-meta{font:500 .61rem/1 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--faint);white-space:nowrap}
.masthead-in{display:contents}
.rail{position:absolute;left:0;right:0;bottom:-1px;height:2px;overflow:hidden}
.rail span{display:block;width:100%;height:100%;background:var(--blue);transform:scaleX(0);transform-origin:left}

/* ── Hero: The Latent Field ──────────────────────────────────────────────
   A dark band at the top of a light-paper site. The dark ground is not a mood
   choice: the scene's whole argument is rods catching the key light as they
   align, and a specular highlight cannot read on #f4f7fa. Everything below the
   hero stays on the paper ground.
   The copy paints first and never depends on the canvas. */
.hero{position:relative;min-height:calc(100svh - var(--mast));overflow:hidden;isolation:isolate;
  background:#050b13;
  background-image:
    radial-gradient(120% 90% at 18% 8%, #12314f 0%, #0a1a2b 45%, rgba(5,11,19,0) 70%),
    radial-gradient(90% 70% at 88% 96%, #0c2740 0%, rgba(5,11,19,0) 65%);
  border-bottom:1px solid var(--navy)}
#field{position:absolute;inset:0;width:100%;height:100%;z-index:0;opacity:0;transition:opacity 1.1s ease .1s}
#field.live{opacity:1}
/* Keeps the copy readable wherever the sweep happens to be. */
.hero-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(70% 80% at 8% 44%, rgba(4,9,16,.93) 0%, rgba(4,9,16,.72) 34%, rgba(4,9,16,0) 66%)}
.hero-copy{position:relative;z-index:2;pointer-events:none;width:var(--wrap);margin-inline:auto;
  min-height:calc(100svh - var(--mast));display:flex;flex-direction:column;justify-content:center;
  padding:64px 0 84px}
.hero-eyebrow{font:500 .72rem/1.25 var(--mono);letter-spacing:.19em;text-transform:uppercase;
  color:var(--blue-hi);margin:0 0 22px}
.hero h1{font-family:var(--serif);font-weight:600;margin:0;color:#eaf2fb;
  font-size:clamp(2.55rem,6.1vw,5.05rem);line-height:.99;letter-spacing:-.021em;max-width:15ch}
.hero h1 em{font-style:normal;color:var(--blue-hi)}
.hero-sub{margin:26px 0 0;font-size:clamp(1.05rem,1.55vw,1.3rem);line-height:1.5;color:#eaf2fb;max-width:33ch}
.hero-third{margin:14px 0 0;font-size:clamp(.95rem,1.25vw,1.06rem);line-height:1.6;color:#a8bed4;max-width:42ch}
.hero-acts{display:flex;flex-wrap:wrap;gap:12px;margin:40px 0 0;pointer-events:auto}
.hero-btn{font:500 .94rem/1 var(--sans);text-decoration:none;padding:14px 22px;
  transition:transform .18s var(--ease),background .18s var(--ease),border-color .18s var(--ease)}
.hero-btn-a{background:var(--blue);color:#fff;border:1px solid var(--blue)}
.hero-btn-a:hover{background:#1f78f5;color:#fff;transform:translateY(-1px)}
.hero-btn-b{color:#eaf2fb;border:1px solid #24425f;background:rgba(11,31,51,.4)}
.hero-btn-b:hover{color:#fff;border-color:var(--blue-hi);transform:translateY(-1px)}
.hero-hint{position:absolute;left:0;bottom:34px;font:500 .66rem/1 var(--mono);letter-spacing:.15em;
  text-transform:uppercase;color:#6e88a3;display:flex;align-items:center;gap:9px;margin:0}
.hero-hint i{display:block;width:26px;height:1px;background:#6e88a3}
/* The light sticky bar would read as an unmotivated seam on the dark band, so it
   inverts while the hero owns the viewport. Class is set by js/latent-field.js.
   Opaque, not translucent: the masthead sits in normal flow ABOVE the hero, so
   its backdrop at scroll 0 is the light page ground, and any alpha bleeds that
   ground through and turns the bar grey. */
.at-hero .masthead{background:#050b13;border-bottom-color:#1d3b56;backdrop-filter:none}
.at-hero .wordmark{color:#eaf2fb}
.at-hero .mast-nav a{color:#8ea7c0}
.at-hero .mast-nav a:hover,.at-hero .mast-nav a.is-here{color:#fff}
.at-hero .masthead-meta{color:#6e88a3}
@media (max-width:900px){
  /* Vertical on portrait, and lighter than it was: at .92/.62 the scrim buried
     the field and the hero read as an empty dark box on a phone. */
  .hero-scrim{background:linear-gradient(180deg, rgba(4,9,16,.86) 0%, rgba(4,9,16,.44) 38%, rgba(4,9,16,.1) 62%, rgba(4,9,16,.6) 100%)}
  .hero-copy{padding-inline:0}
}
@media (prefers-reduced-motion:reduce){
  #field{transition:none}.hero-btn{transition:none}
}

/* ── Argument blocks 01 and 02 ───────────────────────────────────────────
   Each symptom is one line and stops. Two columns on desktop, because six
   items in a single column is a tall strip the eye reads downward and gives up
   on; across, it is a block you scan. */
.symptoms{list-style:none;margin:0 0 2.2rem;padding:0;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:clamp(1.5rem,4vw,3.5rem);
  border-top:1px solid var(--rule);max-width:none}
.symptoms li{padding:1.15rem 0;border-bottom:1px solid var(--rule);
  font-size:clamp(1.02rem,1.45vw,1.3rem);line-height:1.3;color:var(--navy);
  font-weight:400;max-width:30ch}
.sec-out{font:500 .78rem/1.4 var(--mono);letter-spacing:.06em;
  text-transform:uppercase;color:var(--blue);max-width:44ch;margin:0}

/* ── Closing CTA ─────────────────────────────────────────────────────────
   Explicit grid placement, because the default stacked flow left the whole
   right half of the band empty and put three items into a two-column grid,
   which orphans the third and leaves a hole under it.

   Composition: number | headline + ask | email, then a three-up row of the
   disqualifying lines across the full width. Two-up above, three-up below. */
#contact .wrap{align-items:start}
#contact .sec-no{grid-column:1/2;grid-row:1}
#contact>.wrap>h2{grid-column:2/8;grid-row:1;margin-bottom:1.2rem}
#contact>.wrap>.sec-intro{grid-column:2/8;grid-row:2;margin-bottom:0;max-width:44ch}
/* The email is a peer of the headline, not a footnote below it.
   Id-scoped because the generic `.band>.wrap>*:not(...)` rule that sets 2/12
   outranks a bare class and was winning. */
#contact>.wrap>.close-act{grid-column:8/13;grid-row:1/span 2;align-self:end;margin:0}
.close-act .big-link{margin:0 0 .7rem}
.close-act .fineprint{font-size:.82rem;line-height:1.5;max-width:32ch;margin:0}
#contact>.wrap>.close-no{grid-column:2/13;grid-row:3;margin-top:clamp(2.5rem,5vw,4rem);
  border-top:1px solid rgba(255,255,255,.28);padding-top:1.5rem;max-width:none}
.close-no .mass-k{color:#fff!important;opacity:.72;margin-bottom:1.1rem!important}
/* Three items, three columns: one clean row, no orphan. */
.close-no .nope{grid-template-columns:repeat(3,minmax(0,1fr))}
.band-accent .nope{border-top-color:rgba(255,255,255,.28)}
.band-accent .nope li{border-bottom-color:rgba(255,255,255,.22);color:#e7f0ff;max-width:34ch}
.band-accent .nope li strong{color:#fff}
.band-accent .nope li:before{color:#ffd9c8}
.close-no>.fineprint{margin-top:1.4rem;opacity:.8;font-size:.85rem}

/* No intermediate two-column step: three items in two columns orphans the third
   and leaves a hole, which is the defect this recomposition exists to remove.
   Three across holds until the mobile breakpoint, then one. */
@media (max-width:900px){
  #contact>.wrap>h2,#contact>.wrap>.sec-intro,
  #contact>.wrap>.close-act,#contact>.wrap>.close-no{
    grid-column:1/-1;grid-row:auto}
  #contact>.wrap>.close-act{margin:1.8rem 0 0}
  #contact>.wrap>.close-no{margin-top:2rem}
  .close-no .nope{grid-template-columns:1fr}
}

/* Two-column treatment for the limits list is defined with its marker further
   down, next to .nope, along with its own mobile override. */

@media (max-width:900px){
  .symptoms{grid-template-columns:1fr;column-gap:0}
  .symptoms li{max-width:none}
}

/* Three ordered stages. The rule and the FIRST/THEN/ONLY THEN labels carry the
   one-way ordering, which is the argument itself. */
.order-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:0;
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  margin:0 0 2.2rem}
.order-step{padding:2rem 2rem 2.2rem;border-right:1px solid var(--rule)}
.order-step:last-child{border-right:0}
.order-step h3{font-size:clamp(1.35rem,1.9vw,1.75rem);line-height:1.08;
  margin:0 0 .8rem;max-width:15ch}
.order-step p{font-size:.95rem;line-height:1.5;color:var(--body);margin:0}
.order-step .step-no{margin:0 0 1rem}

/* ── Two Masses band ─────────────────────────────────────────────────────
   A dark beat between two light sections. Dark is required, not decorative: the
   contrast between the two bodies is carried by specular light on their
   surfaces, which cannot read on the paper ground. Copy sits below the masses
   rather than beside them, because side-by-side is what made this fight the
   headline when it was tried as a hero. */
.masses{position:relative;isolation:isolate;overflow:hidden;
  padding:clamp(4rem,9vh,7rem) 0 clamp(3rem,6vh,5rem);
  border-block:1px solid var(--navy);
  background:#050b13;
  background-image:
    radial-gradient(110% 80% at 50% 4%, #102a44 0%, #0a1a2b 46%, rgba(5,11,19,0) 72%),
    radial-gradient(80% 60% at 82% 98%, #0c2740 0%, rgba(5,11,19,0) 62%)}
#masses-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0;
  opacity:0;transition:opacity 1s ease .1s}
#masses-canvas.live{opacity:1}
/* The masses occupy the upper half; this keeps the copy legible no matter where
   the ambient orbit carries them. */
.masses:after{content:"";position:absolute;inset:auto 0 0 0;height:62%;z-index:1;
  pointer-events:none;
  background:linear-gradient(180deg, rgba(5,11,19,0) 0%, rgba(5,11,19,.72) 46%, rgba(5,11,19,.94) 100%)}
.masses-copy{position:relative;z-index:2;pointer-events:none;
  min-height:clamp(420px,58vh,600px);display:flex;flex-direction:column;justify-content:flex-end}
.masses .sec-no{color:var(--blue-hi);width:4rem}
.masses .sec-no:before{background:#1d3b56}
.masses h2{color:#eaf2fb;max-width:20ch;margin:0 0 1.6rem;
  font-size:clamp(2.2rem,4.4vw,3.8rem);line-height:.98}
.masses-legend{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(1.5rem,4vw,4rem);max-width:56rem;margin:0 0 1.6rem}
.mass-note p{margin:0;max-width:26ch;font-size:.94rem;line-height:1.5;color:#a8bed4}
.mass-k{font:500 .66rem/1.3 var(--mono)!important;letter-spacing:.11em;
  text-transform:uppercase;color:var(--blue-hi)!important;margin-bottom:.5rem!important}
.masses .sec-out{color:#eaf2fb;font-size:1.02rem;letter-spacing:0;text-transform:none;
  font-family:var(--sans);font-weight:500}
/* The band is dark, so the masthead inverts over it too. */
@media (max-width:900px){
  .masses{padding-top:clamp(3rem,7vh,5rem)}
  .masses-copy{min-height:clamp(340px,50vh,430px)}
  .masses-legend{grid-template-columns:1fr;gap:1.1rem}
}
@media (prefers-reduced-motion:reduce){
  #masses-canvas{transition:none}
}

/* ── Process cards ───────────────────────────────────────────────────────
   Three cards in a row. Collapsed they show only the letter, the title and a
   hint. The card itself becomes the expanded panel (see js/process-cards.js),
   so the geometry transition below is the whole effect: no separate dialog
   fades in over the top. */
.proc-row{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--rule);border:1px solid var(--rule);margin:0 0 1.6rem}
.proc{position:relative;background:var(--sheet);padding:1.6rem 1.5rem 3.2rem;
  cursor:pointer;overflow:hidden;
  transition:background .22s var(--ease),box-shadow .22s var(--ease)}
.proc:hover{background:#fff;box-shadow:inset 0 0 0 1px var(--blue)}
.proc:focus-visible{outline:3px solid var(--blue-hi);outline-offset:-3px}
.proc h3{font-size:clamp(1.2rem,1.6vw,1.5rem);line-height:1.15;margin:0;max-width:20ch}
.proc-tag{display:block;color:var(--blue);font:500 .7rem/1 var(--mono);
  letter-spacing:.1em;margin-bottom:.9rem}
.proc-hint{position:absolute;left:1.5rem;bottom:1.5rem;margin:0;
  font:500 .64rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;
  color:var(--faint);transition:color .22s var(--ease)}
.proc:hover .proc-hint{color:var(--blue)}
/* Collapsed cards hide the trace entirely. Height is animated on open, so the
   body must already be in the DOM and laid out, not display:none. */
.proc .proc-body{opacity:0;visibility:hidden;height:0;overflow:hidden}

/* Expanded: the same element, pinned to viewport coordinates. */
.proc.is-pinned{position:fixed;z-index:120;margin:0;overflow:auto;
  padding:2.4rem 2.6rem 2.8rem;box-shadow:0 30px 90px rgba(6,20,34,.34);
  transition:left .46s var(--ease),top .46s var(--ease),
             width .46s var(--ease),height .46s var(--ease),
             padding .46s var(--ease),box-shadow .46s var(--ease)}
.proc.is-pinned.no-anim{transition:none}
.proc.is-pinned .proc-hint{opacity:0}
.proc.is-pinned h3{max-width:28ch;font-size:clamp(1.5rem,2.4vw,2.2rem)}
.proc.is-open .proc-body{opacity:1;visibility:visible;height:auto;
  transition:opacity .3s var(--ease) .22s}
.proc.is-pinned .proc-body dl{margin:1.4rem 0 0;max-width:62ch}
.proc.is-pinned .proc-body dt{font:500 .68rem/1 var(--mono);letter-spacing:.09em;
  text-transform:uppercase;color:var(--blue);margin:1.6rem 0 .45rem}
.proc.is-pinned .proc-body dd{margin:0;font-size:.94rem;line-height:1.6;color:var(--body)}

.proc-ghost{background:var(--sheet)}
.proc-backdrop{position:fixed;inset:0;z-index:110;background:rgba(6,20,34,.5);
  backdrop-filter:blur(3px);animation:proc-fade .3s var(--ease)}
@keyframes proc-fade{from{opacity:0}to{opacity:1}}
.proc-close{position:absolute;top:1rem;right:1rem;z-index:2;width:2.4rem;height:2.4rem;
  border:1px solid var(--rule);background:var(--sheet);color:var(--navy);
  font-size:1.4rem;line-height:1;cursor:pointer;display:grid;place-items:center}
.proc-close:hover{border-color:var(--blue);color:var(--blue)}
body.proc-locked{overflow:hidden}

@media (max-width:900px){
  .proc-row{grid-template-columns:1fr}
  .proc{padding:1.3rem 1.2rem 2.8rem}
  .proc.is-pinned{padding:2rem 1.4rem 2.2rem}
}
@media (prefers-reduced-motion:reduce){
  .proc,.proc.is-pinned,.proc-hint{transition:none}
  .proc-backdrop{animation:none}
}

/* Opt-in depth. Long-form bodies are behind a disclosure so the default scroll
   stays inside a 90-second budget while the person doing real due diligence can
   still read every word. Native <details> so it works with no JS. */
.td-more{margin:0}
.td-more>summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:.55rem;
  font:500 .68rem/1 var(--mono);letter-spacing:.09em;text-transform:uppercase;
  color:var(--blue);padding:.7rem 0}
.td-more>summary::-webkit-details-marker{display:none}
.td-more>summary:before{content:"+";font-size:1rem;line-height:1;width:1em;text-align:center}
.td-more[open]>summary:before{content:"\2212"}
.td-more>summary:hover{color:var(--navy)}
.td-more>summary:focus-visible{outline:3px solid var(--blue-hi);outline-offset:3px}
.td-more[open]>summary{margin-bottom:.6rem}

@media (max-width:900px){
  .order-steps{grid-template-columns:1fr}
  .order-step{border-right:0;border-bottom:1px solid var(--rule);padding:1.6rem 0}
  .order-step:last-child{border-bottom:0}
}

/* First viewport: proposition / live question / document system */
.diagnostic-desk{min-height:calc(100vh - var(--mast));display:grid;grid-template-columns:34% 32% 34%;border-bottom:1px solid var(--navy);background:var(--ground);isolation:isolate}
.desk-intro{padding:34px clamp(24px,3vw,54px) 34px;display:flex;flex-direction:column;border-right:1px solid var(--navy);position:relative;z-index:4}
.desk-brand{display:flex;justify-content:space-between;gap:1rem;font:500 .61rem/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase}
.eyebrow{font:500 .62rem/1.25 var(--mono);letter-spacing:.11em;text-transform:uppercase;color:var(--blue);margin:clamp(2rem,7vh,5rem) 0 1rem}
.desk-intro h2{font-size:clamp(3rem,5vw,5.15rem);line-height:.9;max-width:8.2ch;margin:auto 0 1.6rem}
.desk-intro h2 span{color:var(--blue)}
.lede{font-size:1rem;line-height:1.5;max-width:35ch;color:var(--body);margin-bottom:1.35rem}
.promise{font:500 .66rem/1.55 var(--mono);color:var(--body);max-width:48ch;margin-bottom:1.3rem}
.promise strong{color:var(--navy)}
.quiet-link{align-self:flex-start;color:var(--faint);font:500 .65rem/1.3 var(--mono);text-decoration:none;border-bottom:1px solid var(--rule);padding-bottom:3px}
.quiet-link:hover{color:var(--blue);border-color:var(--blue)}

.desk-question{padding:30px clamp(20px,2.5vw,44px) 24px;display:grid;grid-template-rows:auto auto 1fr;min-width:0;background:rgba(255,255,255,.82);border-right:1px solid var(--rule);position:relative;z-index:3;backdrop-filter:blur(12px)}
.desk-status{padding-bottom:14px;border-bottom:1px solid var(--rule)}
.desk-status>div:first-child{display:flex;justify-content:space-between;gap:1rem;font:500 .58rem/1.3 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--faint)}
.desk-status strong{color:var(--blue);text-align:right}
.dx-meter{height:3px;background:var(--rule);margin-top:12px;overflow:hidden}
.dx-meter span{display:block;width:0;height:100%;background:var(--blue);transition:width .65s var(--ease)}
.desk-question-intro{padding:24px 0 12px;border-bottom:1px solid var(--rule)}
.desk-question-intro h2{font-size:clamp(1.8rem,2.8vw,2.75rem);line-height:1;max-width:12ch;margin:10px 0 9px}
.desk-question-intro p:last-child{font-size:.76rem;line-height:1.45;color:var(--body);margin:0;max-width:39ch}
.question-step{font:500 .59rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--blue);margin:0}
.notice{padding:1rem;border:1px solid var(--blue);background:var(--blue-pale);font-size:.8rem}
.dx{min-height:0;display:flex;flex-direction:column}
.q{border:0;padding:clamp(22px,4vh,42px) 0 0;margin:0;min-width:0}
.q legend{font:600 clamp(1.8rem,2.7vw,2.65rem)/1 var(--serif);letter-spacing:-.035em;max-width:12ch;margin:0 0 1.7rem;padding:0;color:var(--navy)}
.q-no{display:inline-grid;place-items:center;width:2.1rem;height:2.1rem;margin-right:.6rem;background:var(--blue);color:#fff;vertical-align:.12em;font:500 .66rem/1 var(--mono);letter-spacing:0}
.q label{display:flex;align-items:center;gap:.75rem;border-top:1px solid var(--rule);padding:.7rem .2rem;cursor:pointer;font-size:.8rem;line-height:1.3;transition:padding .22s var(--ease),background .22s,color .22s}
.q label:last-of-type{border-bottom:1px solid var(--rule)}
.q label:hover{padding-left:.7rem;background:var(--blue-pale);color:var(--blue)}
.q input{appearance:none;width:15px;height:15px;border:1px solid var(--navy);border-radius:50%;margin:0;flex:none;display:grid;place-items:center}
.q input:after{content:"";width:7px;height:7px;border-radius:50%;background:var(--blue);transform:scale(0);transition:transform .18s var(--ease)}
.q input:checked{border-color:var(--blue)}
.q input:checked:after{transform:scale(1)}
.q input:focus-visible{outline:2px solid var(--blue-hi);outline-offset:3px}
.js .dx .q{display:none}
.js .dx .q.is-active{display:block;animation:question-in .5s var(--ease) both}
@keyframes question-in{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.dx-foot{margin-top:auto;padding-top:14px;display:flex;align-items:center;justify-content:space-between;gap:1rem}
.dx-status{font:500 .59rem/1.35 var(--mono);color:var(--faint);margin:0;text-align:right}
.dx-status.done{color:var(--blue)}
.dx-back{border:0;background:transparent;color:var(--faint);padding:.3rem 0;font:500 .61rem/1 var(--mono);cursor:pointer}
.dx-back:hover:not(:disabled){color:var(--blue)}
.dx-back:disabled{opacity:.3;cursor:default}

.desk-scene{position:relative;overflow:hidden;min-width:0;background:radial-gradient(circle at 55% 42%,#fff 0,#edf4fb 58%,#e4edf6 100%)}
.desk-scene:after{content:"";position:absolute;z-index:1;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(11,31,51,.045) 0 1px,transparent 1px 34px)}
#paper-scene{position:absolute;inset:0;width:100%;height:100%;z-index:0;opacity:0;transition:opacity .65s}
#paper-scene.ready{opacity:1}
.scene-head{position:absolute;z-index:2;left:24px;right:24px;top:30px;display:flex;justify-content:space-between;gap:1rem;padding-bottom:14px;border-bottom:1px solid rgba(11,31,51,.22);font:500 .57rem/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--body)}
.scene-head strong{color:var(--blue);animation:status-breathe 2.8s ease-in-out infinite}
@keyframes status-breathe{50%{opacity:.55}}
.telemetry{position:absolute;z-index:2;left:24px;bottom:30px;display:grid;gap:8px;font:500 .55rem/1.2 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--body)}
.telemetry span{display:flex;align-items:center;gap:8px;animation:telemetry-in .45s var(--ease) both}
.telemetry span:nth-child(2){animation-delay:.07s}.telemetry span:nth-child(3){animation-delay:.14s}
.telemetry span:before{content:"";width:5px;height:5px;border-radius:50%;background:var(--blue-hi);box-shadow:0 0 0 3px rgba(76,155,255,.14);animation:dot-pulse 2.2s ease-in-out infinite}
@keyframes telemetry-in{from{opacity:0;transform:translateX(-8px)}}
@keyframes dot-pulse{50%{box-shadow:0 0 0 7px rgba(76,155,255,0)}}
.lane-labels{position:absolute;z-index:2;left:16px;right:16px;top:24%;display:none;grid-template-columns:repeat(3,1fr);text-align:center;color:var(--blue);font:500 .51rem/1 var(--mono);letter-spacing:.07em;text-transform:uppercase}
.desk-scene[data-phase="route"] .lane-labels{display:grid}
.desk-cta{position:absolute;z-index:4;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:34px 30px 46px;background:linear-gradient(180deg,transparent 10%,rgba(244,247,250,.9) 56%,var(--ground) 74%);opacity:0;transform:translateY(28px);pointer-events:none;transition:opacity .75s var(--ease),transform .75s var(--ease)}
.desk-cta.show{opacity:1;transform:none;pointer-events:auto}
.desk-cta .eyebrow{margin:0 0 .8rem}
.desk-cta h2{font-size:clamp(2.4rem,3.8vw,4.1rem);max-width:8ch;margin-bottom:1rem}
.desk-cta p{font-size:.84rem;line-height:1.5;color:var(--body);max-width:31ch}

/* Shared actions */
.btn{display:inline-block;border:1px solid var(--blue);background:var(--blue);color:#fff;padding:1rem 1.2rem;text-decoration:none;font:500 .68rem/1 var(--mono);letter-spacing:.07em;text-transform:uppercase;cursor:pointer;transition:transform .2s var(--ease),background .2s}
.btn:hover{color:#fff;background:#0c4fb5;transform:translateY(-2px)}
.btn-alt{background:transparent;color:var(--blue)}
.btn-alt:hover{color:#fff}
.cta-row{display:flex;align-items:center;flex-wrap:wrap;gap:.8rem;margin:1.5rem 0}

/* Lower-page editorial system */
.band{position:relative;padding:clamp(5rem,9vw,9rem) 0;border-bottom:1px solid var(--rule);background:var(--ground)}
.band-tint{background:#edf3f8}
.band-read{background:var(--navy);color:#fff}
.band-accent{background:var(--blue);color:#fff}
.band .wrap{display:grid;grid-template-columns:repeat(12,1fr);gap:0 24px}
.band .sec-no{grid-column:1/2}.band> .wrap>h2,.band> .wrap>.sec-intro{grid-column:2/9}
.band> .wrap>*:not(.sec-no):not(h2):not(.sec-intro){grid-column:2/12}
.lay-left> .wrap>h2,.lay-left> .wrap>.sec-intro{grid-column:2/9}
.lay-left> .wrap>*:not(.sec-no):not(h2):not(.sec-intro){grid-column:2/12}
.lay-right> .wrap>h2,.lay-right> .wrap>.sec-intro{grid-column:6/12}
.lay-right> .wrap>*:not(.sec-no):not(h2):not(.sec-intro){grid-column:5/12}
.lay-center> .wrap>h2,.lay-center> .wrap>.sec-intro{grid-column:3/11}
.lay-center> .wrap>*:not(.sec-no):not(h2):not(.sec-intro){grid-column:3/11}
.lay-full> .wrap>h2,.lay-full> .wrap>.sec-intro{grid-column:2/10}
.sec-no{--rule-draw:100%;font:500 .62rem/1 var(--mono);letter-spacing:.12em;color:var(--blue);padding-top:.7rem;margin:0;position:relative}
.sec-no:before,.sec-no:after{content:"";position:absolute;left:0;top:0;height:2px}.sec-no:before{width:100%;background:var(--rule)}.sec-no:after{width:var(--rule-draw);background:var(--blue)}
.sec-intro{color:var(--body);font-size:1.1rem;line-height:1.6;margin-bottom:3rem}
.band-read .sec-intro,.band-read p{color:#bdcad5}.band-read h2,.band-read h3{color:#fff}.band-read h4{color:var(--blue-hi)}.band-read .sec-no{color:var(--blue-hi)}
.band-accent h2,.band-accent h3,.band-accent h4{color:#fff}.band-accent .sec-intro,.band-accent p{color:#e7f0ff}.band-accent a{color:#fff}.band-accent .sec-no{color:#fff}

/* Read */
.verdict{padding:clamp(2rem,4vw,4rem) 0;border-top:1px solid var(--dark-rule)}
.verdict-kicker{font:500 .64rem/1 var(--mono);letter-spacing:.11em;text-transform:uppercase;color:var(--blue-hi)!important}
.verdict h3{font-size:clamp(3.8rem,7vw,7.5rem);max-width:9ch;color:#fff;margin:1.2rem 0 2rem}
.verdict-what{font-size:1.25rem;line-height:1.55;max-width:58ch!important}
.verdict-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--dark-rule);margin-top:3rem}
.verdict-grid>div{background:var(--navy);padding:2rem}
.verdict-grid p{font-size:.92rem;line-height:1.55;margin:0}
.sums{margin-top:4rem;padding:2.5rem;background:#102b45;border:1px solid var(--dark-rule)}
.calc{width:100%;border-collapse:collapse;margin:1.5rem 0 1rem;font-size:.82rem}
.calc th,.calc td{text-align:left;padding:.75rem;border-bottom:1px solid var(--dark-rule)}
.calc td{text-align:right;font-family:var(--mono);color:#fff}
.calc-total th,.calc-total td{border-top:2px solid var(--blue-hi);font-weight:600;color:#fff}
.caveat{font-size:.74rem!important;color:#9eb0bf!important}
.secondary{margin-top:2rem;border-top:1px solid var(--dark-rule);padding-top:2rem}.secondary li{margin-bottom:1rem;color:#bdcad5}

/* Handoff */
.what-next{border-top:1px solid rgba(255,255,255,.45);border-bottom:1px solid rgba(255,255,255,.45);padding:2rem 0;margin:2rem 0}
.what-next ol{counter-reset:next;display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;margin:0;padding:0;list-style:none}
.what-next li{font-size:.85rem;line-height:1.55}.what-next li:before{counter-increment:next;content:"0" counter(next);display:block;font:500 .65rem/1 var(--mono);margin-bottom:.8rem;color:#fff}
.ta-label{display:block;font:500 .65rem/1 var(--mono);text-transform:uppercase;letter-spacing:.08em;margin:2rem 0 .7rem}
textarea{width:100%;padding:1.2rem;border:1px solid rgba(255,255,255,.55);background:#0f5dcc;color:#fff;font:400 .8rem/1.55 var(--mono);resize:vertical}
.copy-ok{font:500 .65rem/1.4 var(--mono)}

/* Teardowns */
/* The teardowns are now a compact list of three titles with opt-in bodies, not
   three chapters. The old two-column sticky layout left acres of dead space to
   the right of a collapsed disclosure. */
.td{--wipe:100%;position:relative;padding:1.6rem 0;border-top:1px solid var(--rule);
  display:block}
.td:before{content:"";position:absolute;left:0;top:-1px;width:var(--wipe);height:2px;background:var(--blue)}
.td h3{position:static;font-size:clamp(1.45rem,2.1vw,1.95rem);line-height:1.1;
  max-width:26ch;margin:0 0 .2rem}
.td-no{display:inline;color:var(--blue);font:500 .7rem/1 var(--mono);letter-spacing:.1em;margin-right:.6rem}
/* Bodies only get prose width once opened. */
.td-more dl{margin:.4rem 0 .6rem;max-width:66ch}
.td-more dt{font:500 .68rem/1 var(--mono);letter-spacing:.09em;text-transform:uppercase;
  color:var(--blue);margin:1.3rem 0 .45rem}
.td-more dd{margin:0;font-size:.92rem;line-height:1.6;color:var(--body)}
.td dl{margin:0}.td dt{font:500 .64rem/1 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--blue);margin:0 0 .6rem}.td dd{margin:0 0 2.3rem;color:var(--body);max-width:67ch}

/* Method, pricing, anti-market, FAQ */
.steps{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.step{padding:2rem;border-right:1px solid var(--rule)}.step:last-child{border:0}.step h3{font-size:2rem}.step p{font-size:.86rem;color:var(--body)}
.step-no{font:500 .6rem/1 var(--mono)!important;letter-spacing:.1em;text-transform:uppercase;color:var(--blue)!important}
.prices{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--rule)}
.price{padding:2.4rem}.price+ .price{border-left:1px solid var(--rule)}
.price-label{font:500 .62rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--blue)}
.price-fig{font:600 clamp(2.4rem,4vw,4.8rem)/.9 var(--serif);letter-spacing:-.04em;color:var(--navy)}
.price-note{font-size:.86rem;color:var(--body)}
.mock{color:var(--exception);border-bottom:1px solid var(--exception)}
/* Five short lines across two columns: as a single column it was a tall strip
   the eye reads downward. The marker is a real multiplication sign. */
.nope{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule);
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:clamp(1.5rem,4vw,3.5rem)}
.nope li{padding:1.15rem 0 1.15rem 2.2rem;border-bottom:1px solid var(--rule);
  position:relative;color:var(--body);font-size:.9rem;line-height:1.5;max-width:40ch}
.nope li strong{display:block;color:var(--navy);font-size:1.02rem;
  font-weight:600;line-height:1.25;margin-bottom:.25rem}
.nope li:before{content:"\00D7";position:absolute;left:0;top:1rem;
  font:600 1.5rem/1 var(--serif);color:var(--exception)}
/* This override must follow the grid above: the shared mobile rule earlier in
   the file loses on source order. */
@media (max-width:900px){
  .nope{grid-template-columns:1fr;column-gap:0}
  .nope li{max-width:none}
}
.faq{margin:0}.faq>div{display:grid;grid-template-columns:35% 1fr;gap:3rem;padding:1.6rem 0;border-top:1px solid var(--rule)}.faq dt{font-weight:600}.faq dd{margin:0;color:var(--body)}

/* Contact and footer */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:rgba(255,255,255,.4);border:1px solid rgba(255,255,255,.45)}
.contact-grid>div{padding:2rem;background:var(--blue)}
.big-link{font:600 clamp(1.5rem,3vw,3rem)/1 var(--serif);letter-spacing:-.03em}.big-link a{text-decoration:none}
.fineprint{font-size:.72rem;line-height:1.55;color:var(--faint)}
.foot{background:var(--navy);color:#fff;padding:3rem 0}.foot-in{display:grid;grid-template-columns:1fr 1.5fr 1.5fr;gap:2rem}.foot p{margin:0}.foot .fineprint{color:#94a8b9}

/* Additive reveal layer */
html.motion [data-reveal]{opacity:0;transform:translateY(18px)}
html.motion .split .w{display:inline-block;opacity:0;transform:translateY(.7em)}

@media(max-width:1080px){
  .diagnostic-desk{grid-template-columns:39% 61%;grid-template-rows:auto minmax(540px,65vh)}
  .desk-intro{grid-row:1/3}.desk-question{border-right:0}.desk-scene{grid-column:2;grid-row:2;border-top:1px solid var(--rule)}
  .desk-intro h2{font-size:clamp(3.4rem,6vw,5rem)}
  .masthead-meta{display:none}
  .band .wrap{grid-template-columns:repeat(10,1fr)}
  .band .sec-no{grid-column:1/2}.band> .wrap>h2,.band> .wrap>.sec-intro{grid-column:2/9}.band> .wrap>*:not(.sec-no):not(h2):not(.sec-intro){grid-column:2/10}
  .lay-right> .wrap>h2,.lay-right> .wrap>.sec-intro{grid-column:4/10}.lay-right> .wrap>*:not(.sec-no):not(h2):not(.sec-intro){grid-column:3/10}
}
@media(max-width:720px){
  :root{--wrap:calc(100vw - 36px);--mast:52px}
  .masthead{grid-template-columns:auto 1fr;padding-inline:18px}.mast-nav{justify-content:flex-end;gap:1rem}.mast-nav a:nth-child(2),.mast-nav a:nth-child(3),.mast-nav a:nth-child(4){display:none}
  .diagnostic-desk{display:block}.desk-intro{min-height:calc(100vh - var(--mast));padding:28px 18px;border-right:0;border-bottom:1px solid var(--navy)}.desk-intro h2{font-size:clamp(3.4rem,15vw,5rem)}
  .desk-question{min-height:90vh;padding:26px 18px 22px;border-right:0;border-bottom:1px solid var(--rule)}.desk-question-intro h2{font-size:2rem}.q legend{font-size:1.8rem}.q label{font-size:.82rem;padding-block:.78rem}
  .desk-scene{height:78vh}.scene-head{top:22px}.telemetry{bottom:24px}.desk-cta{padding-inline:24px}
  .band{padding:5rem 0}.band .wrap{display:block}.sec-no{display:block;width:4rem;margin-bottom:2rem}.sec-intro{font-size:1rem}.band h2{font-size:3.6rem}
  .verdict h3{font-size:4rem}.verdict-grid,.steps,.prices,.what-next ol,.contact-grid,.foot-in{grid-template-columns:1fr}.verdict-grid>div{padding:1.4rem}.sums{padding:1.2rem}.calc th,.calc td{padding:.7rem .35rem}
  .td{display:block;padding:3rem 0}.td h3{position:static;margin-bottom:2.5rem}.step{border-right:0;border-bottom:1px solid var(--rule)}.price+ .price{border-left:0;border-top:1px solid var(--rule)}.faq>div{display:block}.faq dt{margin-bottom:.7rem}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}*{animation:none!important;transition:none!important}.masthead{backdrop-filter:none}.desk-scene{min-height:430px}.telemetry{display:none}
}
@media print{.masthead,.desk-scene,.skip{display:none!important}.diagnostic-desk{display:block}.desk-intro,.desk-question{border:0;min-height:0}.js .dx .q{display:block}.band{break-inside:avoid;padding:2rem 0}.foot{background:#fff;color:#000}}


/* Dual-path diagnostic and enquiry branch chrome */
.branch-choice{border:0;margin:0;padding:clamp(22px,4vh,38px) 0 8px;min-width:0}
.branch-choice legend{font:600 clamp(1.75rem,2.6vw,2.5rem)/1 var(--serif);letter-spacing:-.035em;max-width:13ch;margin:0 0 1.4rem;padding:0;color:var(--navy)}
.branch-choice label{position:relative;display:grid;grid-template-columns:18px 1fr;align-items:center;gap:.8rem;padding:1rem .85rem;border:1px solid var(--rule);background:rgba(255,255,255,.68);cursor:pointer;font-size:.79rem;line-height:1.35;transition:border-color .2s var(--ease),background .2s var(--ease),transform .2s var(--ease)}
.branch-choice label+label{margin-top:8px}
/* The <small> is inline by default, so the description ran straight on from the
   bold label with no gap ("...or formsCapture, extract..."). */
.branch-choice label>span{display:block}
.branch-choice label small{display:block;margin-top:.25rem;color:var(--body);font-size:.74rem;line-height:1.4}
.branch-choice label:hover{border-color:var(--blue);background:var(--blue-pale);transform:translateX(3px)}
.branch-choice input{appearance:none;width:17px;height:17px;margin:0;border:1px solid var(--navy);border-radius:50%;display:grid;place-items:center}
.branch-choice input:after{content:"";width:9px;height:9px;border-radius:50%;background:var(--blue);transform:scale(0);transition:transform .18s var(--ease)}
.branch-choice input:checked{border-color:var(--blue)}
.branch-choice input:checked:after{transform:scale(1)}
.branch-choice label:has(input:checked){border-color:var(--blue);background:var(--blue-pale);color:var(--blue)}
.branch-choice input:focus-visible{outline:2px solid var(--blue-hi);outline-offset:4px}
#branch-help{margin:.85rem 0 0;color:var(--faint);font:500 .58rem/1.45 var(--mono)}

#paper-scene,#enquiry-scene{position:absolute;inset:0;width:100%;height:100%;z-index:0;opacity:0;transition:opacity .65s var(--ease);pointer-events:none}
#paper-scene.ready,#enquiry-scene.ready{opacity:0}
.diagnostic-desk:has(#dx[data-active-branch="documents"]) #paper-scene.ready,
.diagnostic-desk:has(#dx[data-active-branch="enquiries"]) #enquiry-scene.ready{opacity:1}
.diagnostic-desk:has(#dx[data-active-branch="enquiries"]) .desk-scene{background:
  radial-gradient(ellipse at 19% 48%,rgba(76,155,255,.18) 0,rgba(76,155,255,.07) 34%,transparent 57%),
  linear-gradient(102deg,#e4eef8 0,#edf5fc 46%,#f8fafb 53%,#fffaf2 100%);
  box-shadow:inset 0 0 80px rgba(11,31,51,.06)}
.diagnostic-desk:has(#dx[data-active-branch="enquiries"]) #enquiry-scene{filter:saturate(1.12) contrast(1.04)}
.diagnostic-desk:has(#dx[data-active-branch="enquiries"]) .document-lane-labels{display:none}
.diagnostic-desk:has(#dx[data-active-branch="enquiries"]) .scene-head{background:linear-gradient(90deg,rgba(237,245,252,.78),rgba(255,250,242,.72));padding:10px 12px 13px;left:16px;right:16px;top:20px;border-bottom-color:rgba(11,31,51,.16);backdrop-filter:blur(7px)}
.diagnostic-desk:has(#dx[data-active-branch="enquiries"]) .telemetry{padding:10px 12px;background:rgba(255,255,255,.68);border-left:1px solid rgba(23,105,224,.34);backdrop-filter:blur(7px)}

.lead-ticket{position:absolute;z-index:4;right:24px;bottom:28px;width:min(300px,calc(100% - 48px));padding:18px 20px 20px;border:1px solid rgba(196,86,45,.38);border-top:3px solid var(--exception);background:rgba(255,252,247,.97);box-shadow:0 22px 58px rgba(11,31,51,.18),0 2px 8px rgba(11,31,51,.08);opacity:0;transform:translateY(18px) scale(.98);transform-origin:100% 100%;pointer-events:none;transition:opacity .55s var(--ease),transform .55s var(--ease)}
.lead-ticket .eyebrow{display:block;margin:0 0 .55rem;font-size:.54rem;color:var(--exception)}
.lead-ticket strong{display:block;font:600 1.35rem/1.05 var(--serif);letter-spacing:-.025em;color:var(--navy);margin-bottom:.6rem}
.lead-ticket span:last-child{display:block;color:var(--body);font:500 .56rem/1.55 var(--mono)}
.lead-ticket.is-visible{opacity:1;transform:none;pointer-events:auto}
.diagnostic-desk:has(#dx[data-active-branch="enquiries"]):has(#enquiry-scene.ready:not([data-reduced])) #enquiry-lead-ticket{width:1px;height:1px;padding:0;margin:-1px;border:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;box-shadow:none}

@media(max-width:1080px){
  .branch-choice{padding-top:20px}.branch-choice legend{font-size:1.8rem}
}
@media(max-width:720px){
  .branch-choice label{font-size:.82rem;padding:1rem .8rem}
  .lead-ticket{right:18px;bottom:22px;width:calc(100% - 36px)}
}
@media(prefers-reduced-motion:reduce){
  #paper-scene{display:none!important}
  #enquiry-scene[data-reduced]{display:none!important}
  .desk-scene{background:linear-gradient(145deg,#f8fbfe,#e8f1fb)}
  .lead-ticket.is-visible{opacity:1;transform:none}
}