/* Fin on Salesforce — visual system.
   ==================================================================
   Rebuilt after GPT's visual gate returned NO-GO on the first attempt.

   The error being corrected: "The mistake was not avoiding glassmorphism.
   The mistake was removing almost every visual device that carried meaning,
   leaving typography too weak to carry the whole page by itself."

   The rule every non-text visual here must pass — it answers at least one of:
     · where is the request now?
     · which boundary did it cross?
     · which decision belongs to the customer?
     · how do we know this claim?
     · what did the real run show?
   Anything answering none of those is decoration and is not in this file.

   Three surfaces, because the page changes mode:
     paper  — orientation and explanation
     white  — the journey and accountability
     ink    — recorded evidence (a deliberate tonal inversion)
   ================================================================== */

@import url("/assets/base.fa21766b9a2bad3a.css");

:root{
  /* Sleek palette (slice 44b); names kept so the journey rules need no edits. */
  --paper:#f6f6f4; --paper-2:#efefec; --paper-3:#e6e6e3;
  --white:#ffffff; --white-2:#f6f6f4;
  --ink:#0f0f10; --ink-2:#2c2c30; --ink-3:#66666d;
  --rule:#ececea; --rule-2:#e0e0dd; --rule-3:#8b8b92;

  --teal:rgba(23,161,163,.3); --teal-2:rgba(23,161,163,.1); --teal-ink:#127c7d;
  --ochre:#8a5f10; --ochre-2:#8a5f101a;
  --sf:#0a5fa8;

  /* dark evidence surface */
  --dark:#0c0c0e; --dark-2:#161618; --dark-3:#222226;
  --dark-rule:#2e2e33; --dark-ink:#fafafa; --dark-ink-2:#d4d4d8; --dark-ink-3:#a1a1aa;
  --dark-teal:#5eead4; --dark-oxide:#d98b76;

  --sans:"Geist",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  --mono:"GeistMono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --grid:82rem;      /* ~1312px outer */
  --measure:43rem;   /* ~688px prose */
  --r:6px;

  /* hatching for customer-defined material. A 6px dot is not a visual system. */
  --hatch:repeating-linear-gradient(-45deg,var(--ochre-2),var(--ochre-2) 3px,transparent 3px,transparent 7px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--canvas);color:var(--ink);
  font-family:var(--sans);font-size:var(--fs-18);line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  font-variation-settings:"wght" 400;
}
.wrap{max-width:var(--grid);margin:0 auto;padding:0 var(--gutter)}

/* ---------- type system: six visibly distinct levels ---------- */
h1{
  font-size:var(--fs-56);line-height:var(--lh-display);letter-spacing:-.038em;
  font-variation-settings:"wght" 620;margin:0 0 .8rem;max-width:34ch;text-wrap:balance;
}
h2{
  font-size:var(--fs-36);line-height:var(--lh-display);letter-spacing:-.026em;
  font-variation-settings:"wght" 600;margin:0 0 .7rem;max-width:22ch;text-wrap:balance;
}
h3{font-size:var(--fs-22);line-height:var(--lh-heading);letter-spacing:-.018em;font-variation-settings:"wght" 600;margin:0 0 .5rem}
p{color:var(--ink-2);max-width:var(--measure);margin:0 0 1rem}
.lede{font-size:var(--fs-22);line-height:1.5;color:var(--ink-2);max-width:34rem;margin:0 0 2rem}
.eyebrow{margin:0 0 1.4rem}
/* Metadata is small but never faint. Hierarchy does not come from greying things out. */
.meta-label{display:block;margin-bottom:.3rem}
strong{font-variation-settings:"wght" 620;color:var(--ink)}

/* ---------- sectional cadence ---------- */
.band-paper{background:var(--paper)}
.band-white{background:var(--canvas);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.band-ink{background:var(--dark);color:var(--dark-ink);position:relative}
/* the Proofline visibly enters the evidence chapter */
.band-ink::before{content:"";position:absolute;left:50%;top:0;width:3px;height:3.4rem;
  background:linear-gradient(var(--rule-3),var(--dark-ink-3));
  transform:translateX(calc(-41rem + 8.5rem + 2rem))}
/* the terminal node: the request's record begins here */
.band-ink::after{content:"";position:absolute;left:50%;top:3.4rem;width:13px;height:13px;
  border-radius:50%;background:var(--dark);border:2px solid var(--dark-ink-3);
  transform:translateX(calc(-41rem + 8.5rem + 2rem - 5px))}
@media (max-width:70rem){.band-ink::before,.band-ink::after{display:none}}
.sec{padding:3rem 0}
.sec-head{max-width:var(--measure);margin-bottom:2.2rem}
#journey .eyebrow{margin-bottom:.5rem}
#journey .answer{margin-bottom:1.6rem;font-size:var(--fs-18)}
.sec-head p{margin:0}

/* ================= WIDGET-FIRST OPENING ================= */
.brief-hero{padding:2.8rem 0 4rem}
.brief-kicker{margin:0 0 1.15rem}
.brief-hero h1{
  font-family:var(--display);font-synthesis:none;font-size:var(--fs-56);font-weight:var(--display-weight);font-variation-settings:normal;line-height:1.06;letter-spacing:var(--display-track);
  max-width:34ch;margin:0;text-wrap:balance;
}
.brief-standfirst,.rt-flow,.answer,.fold-body > p,.defs .d,
.md-what,.md-exp,.md-owned,.limit,.scoping-coda p{
  font-size:var(--fs-18);line-height:var(--lh-body);max-width:68ch;
}
.journey{margin-top:2rem}
.route-intro{max-width:var(--grid)}
.route-chooser{border:0;margin:0 0 .9rem;padding:0;min-width:0}
.route-chooser legend{
  margin:0 0 .8rem;padding:0;font-size:var(--fs-22);line-height:1.2;
  letter-spacing:-.018em;font-variation-settings:"wght" 600;color:var(--ink);
}
.route-intro .routes{margin-bottom:.9rem}
.route-intro .rt-flow{display:block;margin:0;color:var(--ink-2)}
.route-status{
  margin:.7rem 0 0;max-width:68ch;padding-left:.85rem;border-left:2px solid var(--teal);
  font-size:var(--fs-13);line-height:var(--lh-small);color:var(--ink-3);
}
.opmap-title h2{max-width:none;margin:0}

@media (max-width:47.5rem){
  .brief-hero h1{font-size:var(--fs-36);max-width:17ch;margin-bottom:0}
  .sec{padding:2rem 0}
  .journey{margin-top:1.5rem}
}
@media (max-width:44rem){
  .brief-hero{padding:1.5rem 0 3.2rem}
  .brief-kicker{margin-bottom:.85rem}
  .route-chooser legend{margin-bottom:.5rem}
  .route-chooser{margin-bottom:.45rem}
  .route-intro .routes{margin-bottom:.45rem}
  .brief-hero .opmap-fig{margin-top:1.5rem}
}

/* ================= HERO — asymmetric 7 / 5 ================= */
.hero{padding:5.5rem 0 4rem}
.hero-grid{display:grid;grid-template-columns:7fr 5fr;gap:4.5rem;align-items:start}

/* the route anatomy: an answer, not an illustration */
.anatomy{border-left:1px solid var(--rule);padding-left:2.5rem}
.anatomy-h{font-size:var(--fs-13);letter-spacing:.06em;text-transform:uppercase;
  font-variation-settings:"wght" 560;color:var(--ink-3);margin:0 0 1.4rem}
.anat{list-style:none;margin:0;padding:0;position:relative}
.anat::before{content:"";position:absolute;left:5px;top:.7rem;bottom:.7rem;width:1px;background:var(--rule-2)}
.anat li{position:relative;padding:0 0 1.25rem 2.1rem;font-size:var(--fs-18);line-height:1.3;color:var(--ink-2)}
.anat li:last-child{padding-bottom:0}
.anat li::before{
  content:"";position:absolute;left:0;top:.42rem;width:11px;height:11px;border-radius:50%;
  background:var(--paper);border:1.5px solid var(--rule-3);
}
.anat li[data-sys="salesforce"]::before{border-color:var(--sf);background:var(--sf)}
.anat li[data-sys="fin"]::before{border-color:var(--ink);background:var(--ink)}
.anat li[data-sys="customer"]::before{border-color:var(--ink-3);background:var(--paper)}
.anat .sysname{display:block;font-size:var(--fs-13);letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:.12rem;font-variation-settings:"wght" 560}
/* the one policy gate in the sequence is the only non-circular node */
.anat li[data-gate]::before{border-radius:2px;transform:rotate(45deg);
  background:var(--paper);border-color:var(--ochre)}

/* ---------- the fork ---------- */
.q{
  font-size:var(--fs-36);line-height:1.2;letter-spacing:-.024em;
  font-variation-settings:"wght" 600;color:var(--ink);max-width:26ch;margin:2.6rem 0 1.6rem;
}









/* The state is stated, not implied by a tint. These are links between two
   documents, and the label now says so. */
.rstate{
  display:block;position:absolute;top:.6rem;right:.75rem;
  font-family:var(--sans);font-size:var(--fs-13);letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-3);
}


/* "both" is not a third route through which one request starts */
.both-strip{
  display:flex;gap:1.2rem;align-items:baseline;flex-wrap:wrap;max-width:64rem;
  margin:1.1rem 0 0;padding:1.1rem 1.7rem;border:1px solid var(--rule-2);border-radius:var(--r);
  background:var(--white);border-left:4px solid var(--ink);
  text-decoration:none;color:var(--ink-2);transition:border-color 120ms ease,background-color 120ms ease;
}
.both-strip:hover{background-color:var(--white-2);border-color:var(--rule-3)}
.both-strip b{font-variation-settings:"wght" 620;color:var(--ink);font-size:var(--fs-18)}
.both-strip span{font-size:var(--fs-15);flex:1;min-width:16rem}
.both-strip .go{font-size:var(--fs-13);color:var(--teal-ink);white-space:nowrap;font-variation-settings:"wght" 560}
.who{font-size:var(--fs-13);color:var(--ink-3);margin:1.4rem 0 0}
.who b{font-variation-settings:"wght" 400;color:var(--ink-2)}

/* ================= QUESTION INDEX — an editorial feature ================= */
.qlist{list-style:none;margin:0;padding:0;max-width:56rem;
  display:grid;grid-template-columns:1fr 1fr;gap:0 3rem}
.qlist li{border-bottom:1px solid var(--rule)}
.qlist a{
  display:grid;grid-template-columns:2.4rem 1fr auto;gap:1rem;align-items:baseline;
  padding:1.05rem .2rem;text-decoration:none;color:var(--ink);
  transition:color 120ms ease;
}
.qlist a:hover{color:var(--teal-ink)}
.qlist a:hover .qn{text-decoration:underline}
.qnum{font-family:var(--mono);font-size:var(--fs-11);color:var(--ink-3)}
.qn{font-size:var(--fs-18);line-height:1.32;letter-spacing:-.012em}
.qgo{font-size:var(--fs-13);color:var(--ink-3);white-space:nowrap}

/* the key. A sentence describing three treatments is not a legend. */
.legend{display:flex;gap:2rem;flex-wrap:wrap;margin:0 0 2.4rem;padding:1rem 0;
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.legend div{display:flex;align-items:center;gap:.7rem;font-size:var(--fs-13);color:var(--ink-2)}
.lsample{width:34px;height:14px;flex:none;position:relative}
.lsample::before{content:"";position:absolute;left:0;right:0;top:6px;height:3px}
.lsample::after{content:"";position:absolute;left:11px;top:1px;width:12px;height:12px;
  border-radius:50%;background:var(--white);border:2px solid var(--rule-3)}
.lsample[data-p="observed"]::before{background:var(--teal);opacity:.55}
.lsample[data-p="observed"]::after{background:var(--teal);border-color:var(--teal)}
.lsample[data-p="documented"]::before{background:repeating-linear-gradient(to right,var(--rule-3) 0 5px,transparent 5px 10px)}
.lsample[data-p="documented"]::after{border-color:var(--ink-2);box-shadow:none}
.lsample[data-p="illustrative"]::before{background:repeating-linear-gradient(to right,var(--ochre) 0 4px,transparent 4px 10px)}
.lsample[data-p="illustrative"]::after{border-color:var(--ochre);box-shadow:none}

/* ================= THE JOURNEY — three zones ================= */
.steps{list-style:none;margin:0;padding:0}
.step{
  display:grid;grid-template-columns:8.5rem minmax(0,44rem) minmax(0,21rem);
  gap:0 2.6rem;padding:2.1rem 0;border-top:1px solid var(--rule);position:relative;
}
.step:last-child{border-bottom:1px solid var(--rule)}

/* ---------- the Proofline: a real, continuous line ---------- */
.spine{position:relative;padding-right:1.6rem;grid-row:1 / -1}
/* the line itself — continuity of the customer request */
.spine::before{
  content:"";position:absolute;right:0;top:-2.4rem;bottom:-2.4rem;width:3px;
  background:var(--rule-3);
}
.step[data-ev="observed"] .spine::before{background:var(--teal);opacity:.55}
.step:first-child .spine::before{top:1.55rem}
.step:last-child .spine::before{bottom:auto;height:1.55rem;top:0}
/* segment treatment carries provenance */
.step[data-ev="documented"] .spine::before{
  background:repeating-linear-gradient(to bottom,var(--rule-2) 0 5px,transparent 5px 10px);
}
.step[data-ev="illustrative"] .spine::before{
  background:repeating-linear-gradient(to bottom,var(--ochre) 0 3px,transparent 3px 9px);opacity:.7;
}
/* the node */
.spine::after{
  content:"";position:absolute;right:-6px;top:1.35rem;width:14px;height:14px;border-radius:50%;
  background:var(--white);border:2px solid var(--rule-3);z-index:2;
  transition:border-color 120ms ease,background-color 120ms ease;
}
.step[data-ev="observed"] .spine::after{background:var(--teal);border-color:var(--teal)}
.step[data-ev="documented"] .spine::after{
  background:var(--white);border-color:var(--ink-2);box-shadow:none;
}
.step[data-ev="illustrative"] .spine::after{
  border-color:var(--ochre);background:var(--white);
  box-shadow:none;
}
.step[data-ev="illustrative"] .spine::before{
  background:repeating-linear-gradient(to bottom,var(--ochre) 0 4px,transparent 4px 10px);opacity:.85;
}
.step.open .spine::after,.step:target .spine::after{transform:scale(1.15)}

.snum{font-family:var(--mono);font-size:var(--fs-11);color:var(--ink-3);display:block;text-align:right}
.sys{
  display:block;text-align:right;margin-top:.4rem;
  font-size:var(--fs-13);letter-spacing:.05em;text-transform:uppercase;
  font-variation-settings:"wght" 600;color:var(--ink-2);
}
.step[data-sys="salesforce"] .sys{color:var(--sf)}
.step[data-sys="fin"] .sys{color:var(--ink)}
/* the handoff, placed directly across the line */
.handoff{
  display:inline-block;margin:.9rem 0 0;padding:.24rem .5rem;
  background:var(--white);border:1px solid var(--rule-2);border-radius:4px;
  font-size:var(--fs-13);line-height:1.35;color:var(--ink-2);
  font-variation-settings:"wght" 560;position:relative;z-index:3;
}
.spine{display:flex;flex-direction:column;align-items:flex-end}

/* ---------- narrative ---------- */
.main h3{margin-bottom:.7rem}
/* a step heading is an h2 for document structure, not for size */
.step-h{font-size:var(--fs-22);line-height:1.22;letter-spacing:-.018em;max-width:none;margin:0 0 .7rem;font-variation-settings:"wght" 600}
.what{font-size:var(--fs-18);color:var(--ink-2);margin:0 0 1rem;max-width:none}
.exp{margin:0;max-width:none;font-size:var(--fs-18);color:var(--ink-2)}
.exp .meta-label{margin-bottom:.15rem}

/* ---------- the decision: it should look like a decision ---------- */
.aside{align-self:start}
.owned{
  background:none;border-radius:0;padding:0 0 0 1.1rem;margin:0;
  max-width:none;font-size:var(--fs-18);line-height:1.5;color:var(--ink);
  border-left:2px solid var(--teal);
}
.owned .meta-label{color:var(--teal-ink);margin-bottom:.35rem}
.prov{
  display:flex;gap:.5rem;align-items:baseline;margin:1rem 0 0;
  font-family:var(--sans);font-size:var(--fs-13);line-height:1.4;color:var(--ink-3);
}
.prov .pmark{width:9px;height:9px;flex:none;position:relative;top:1px;border-radius:50%}

.more{
  cursor:pointer;color:var(--teal-ink);font-size:var(--fs-15);font-variation-settings:"wght" 500;
  display:flex;align-items:center;gap:.5rem;list-style:none;
  min-height:44px;padding:.6rem 0;   /* 44px tap target */
  transition:color 120ms ease;
}
.more::-webkit-details-marker{display:none}
.more:hover{text-decoration:underline}
.more:focus-visible{outline:2px solid var(--teal-ink);outline-offset:3px;border-radius:4px}
.chev{display:inline-block;transition:transform 120ms ease;font-size:var(--fs-13);flex:none}
.detail[open] > .more .chev{transform:rotate(90deg)}

/* expanded detail spans narrative + aside */
.detail{grid-column:2 / -1;min-width:0}
.detail .inner{padding-top:1.1rem;display:grid;grid-template-columns:1fr 1fr;gap:1.6rem;
  animation:reveal 160ms ease both}
@keyframes reveal{from{opacity:0}to{opacity:1}}
.evidence{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 1.4rem;
  font-family:var(--sans);font-size:var(--fs-13);line-height:1.55;
  background:var(--white);border:1px solid var(--rule);border-radius:var(--r);padding:.55rem 1.15rem;
  color:var(--ink-2);
}
.evidence > div{
  display:grid;grid-template-columns:1fr;gap:.1rem;align-content:start;
  padding:.55rem 0;border-bottom:1px solid var(--rule);
}
.evidence > div:nth-last-child(-n+2){border-bottom:0}
.evidence .k{color:var(--ink-3)}
.evidence .v{color:var(--ink)}
/* A limit is a module, not a footnote. GPT wanted the page to speak in three
   standard modules — the decision, the proof limit, and the thing to get in
   writing. The decision already had a treatment (.owned); this gives the proof
   limit the matching one, so a reader learns the vocabulary once and then
   recognises it anywhere on the page. */
.limit{
  font-size:var(--fs-18);line-height:1.55;color:var(--ink-2);margin:1.8rem 0 0;max-width:68ch;
  border-left:2px solid var(--rule-2);padding-left:1.1rem;
}
.band-ink .limit{border-left-color:var(--dark-rule)}
.limit .meta-label{color:var(--ink-3)}


/* ================= PART TWO — the folds =================
   Six sections became six disclosures. The content did not shrink; the page
   did. An evaluator gets the whole index of what implementation involves in
   one screen, then opens only what is a live question for them. The number and
   the one-line summary do the work that seven <h2>s used to do over 6,000px. */
.runsub{
  font-size:var(--fs-22);font-variation-settings:"wght" 600;letter-spacing:-.01em;
  margin:3rem 0 1.2rem;padding-top:2rem;border-top:1px solid var(--rule);max-width:66rem;
}
.sec-head + .runsub{margin-top:2.6rem}
.defs + .runsub{border-top:none;padding-top:0;margin-top:3.2rem}

.folds{border-top:1px solid var(--rule-2);max-width:76rem}
.fold{border-bottom:1px solid var(--rule)}
.fold > summary{
  display:grid;grid-template-columns:3.4rem 1fr 1.6rem;gap:1rem;align-items:start;
  padding:1.5rem 0;cursor:pointer;list-style:none;
  transition:background 140ms ease;
}
.fold > summary::-webkit-details-marker{display:none}
.fold > summary::marker{content:""}
.fold > summary:hover{background:var(--paper-2)}
.fold > summary:focus-visible{outline:2px solid var(--teal-ink);outline-offset:2px;border-radius:4px}
.fold-n{
  font-family:var(--mono);font-size:var(--fs-11);color:var(--ink-3);
  padding-left:.25rem;padding-top:.28rem;
}
.fold-h{display:block;min-width:0}
.fold-t{
  display:block;font-size:var(--fs-22);line-height:1.3;letter-spacing:-.015em;
  font-variation-settings:"wght" 600;color:var(--ink);
}
.fold-s{
  display:block;margin-top:.35rem;font-size:var(--fs-15);line-height:1.5;color:var(--ink-3);
  max-width:none;white-space:nowrap;
}
/* the chevron is drawn, not a glyph — no icon font, and it rotates on open */
.fold > summary::after{
  content:"";grid-column:3;justify-self:end;margin-top:.55rem;
  width:.62rem;height:.62rem;border-right:2px solid var(--rule-3);border-bottom:2px solid var(--rule-3);
  transform:rotate(45deg);transform-origin:center;
  transition:transform 180ms ease,border-color 180ms ease;
}
.fold[open] > summary::after{transform:rotate(-135deg);border-color:var(--teal)}
.fold[open] > summary .fold-t{color:var(--teal-ink)}
.fold[open] > summary{background:var(--paper-2)}
.fold-body{
  padding:.4rem 0 2.6rem 4.4rem;animation:foldin 200ms ease both;
}
.fold-body > p{max-width:var(--measure)}
.fold-sub{
  font-size:var(--fs-18);font-variation-settings:"wght" 600;
  margin:2.8rem 0 .9rem;padding-top:1.8rem;border-top:1px solid var(--rule);
}
@keyframes foldin{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .fold-body{animation:none}
  .fold > summary::after{transition:none}
}
@media (max-width:900px){
  .fold > summary{grid-template-columns:2.2rem 1fr 1.2rem;gap:.7rem;padding:1.15rem 0}
  .fold-t{font-size:var(--fs-18)}
  .fold-s{font-size:var(--fs-15);white-space:normal}
  .fold-body{padding-left:0;padding-bottom:2rem}
}

/* The five unanswered questions are not more rows of the same table. The page
   already uses ochre for "this one is yours, not the vendor's" — the same
   language the YOUR DECISION cards speak. An open commercial question is
   exactly that, so it inherits the colour rather than inventing one. */
.asks-lead{max-width:var(--measure);margin:0 0 1.8rem}
.asks{
  list-style:none;counter-reset:ask;margin:0;padding:0;max-width:none;
  display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;
}
.asks li{
  counter-increment:ask;position:relative;
  background:var(--white);border:1px solid var(--rule);border-top:2px solid var(--ochre);
  border-radius:var(--r);padding:1.15rem 1.2rem 1.2rem;
}
.asks li::before{
  content:"ask " counter(ask,decimal-leading-zero);
  display:block;font-family:var(--sans);font-size:var(--fs-13);letter-spacing:.06em;
  text-transform:uppercase;color:var(--ochre);margin-bottom:.5rem;
}
.ask-k{display:block;font-size:var(--fs-18);font-variation-settings:"wght" 620;margin-bottom:.35rem}
.ask-d{display:block;font-size:var(--fs-15);line-height:1.55;color:var(--ink-2)}
@media (max-width:1000px){.asks{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.asks{grid-template-columns:1fr}}

/* ================= EVIDENCE — the ink band ================= */
.band-ink h2,.band-ink h3{color:var(--dark-ink)}
.band-ink p{color:var(--dark-ink-2)}
.band-ink .eyebrow,.band-ink .meta-label{color:var(--dark-ink-3)}
.band-ink strong{color:var(--dark-ink)}

.exhibit{
  display:grid;grid-template-columns:5fr 7fr;gap:3rem;
  border:1px solid var(--dark-rule);border-radius:var(--r);
  padding:2rem 2.2rem;margin:0 0 1.6rem;background:var(--dark-2);
}
.exhibit.fail{background:var(--dark-3)}
.ex-id{font-family:var(--sans);font-size:var(--fs-18);color:var(--dark-ink);margin:0 0 .5rem}
.ex-meta{font-family:var(--sans);font-size:var(--fs-13);color:var(--dark-ink-3);line-height:1.7;margin:0 0 1.2rem}
.ex-state{
  font-family:var(--sans);font-size:var(--fs-13);letter-spacing:.13em;text-transform:uppercase;
  display:inline-block;padding:.25rem .6rem;border-radius:3px;
  border:1px solid var(--dark-teal);color:var(--dark-teal);
}
.exhibit.fail .ex-state{border-color:var(--dark-oxide);color:var(--dark-oxide)}
.ex-note{font-size:var(--fs-15);color:var(--dark-ink-2);margin:1.3rem 0 0;max-width:none}

.checks{list-style:none;margin:0;padding:0}
.checks li{
  display:grid;grid-template-columns:5rem 1fr;gap:1.1rem;align-items:baseline;
  padding:.6rem 0;border-bottom:1px solid var(--dark-rule);
}
.checks li:last-child{border-bottom:0}
.ct{font-family:var(--sans);font-size:var(--fs-13);color:var(--dark-ink-3);text-align:right}
.cl{font-size:var(--fs-15);line-height:1.5;color:var(--dark-ink-2)}
.cl code{font-family:var(--sans);font-size:var(--fs-13);color:var(--dark-ink)}
.cl strong{color:var(--dark-ink)}
.checks li[data-r="pass"] .ct{color:var(--dark-teal)}
/* a methodology row is not a result; it must not borrow the pass colour */
.checks li[data-r="check"] .ct{color:var(--dark-ink-3)}
.checks li[data-r="fail"] .ct{color:var(--dark-oxide)}

.dist{display:flex;gap:.5rem;margin:1.2rem 0 0;flex-wrap:wrap}
.dist span{
  font-family:var(--sans);font-size:var(--fs-13);padding:.5rem .8rem;border-radius:4px;
  border:1px solid var(--dark-rule);color:var(--dark-ink-2);background:var(--dark-2);
}
.dist span b{color:var(--dark-ink);font-variation-settings:"wght" 400}

/* ================= reconciliation / definitions ================= */
.four{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem;max-width:none}
.four > div{border-top:2px solid var(--ochre);padding:1.1rem 0 0}
.four h3{font-size:var(--fs-18);margin:0 0 .4rem}
.four p{font-size:var(--fs-15);margin:0;max-width:none;line-height:1.55}

.defs{max-width:66rem;margin:0}
.defs > div{
  display:grid;grid-template-columns:15rem 1fr;gap:2rem;padding:1rem 0;
  border-bottom:1px solid var(--rule);align-items:baseline;
}
.defs > div:first-child{border-top:1px solid var(--rule)}
.defs .t{font-size:var(--fs-18);font-variation-settings:"wght" 620;color:var(--ink)}
.defs .d{font-size:var(--fs-18);color:var(--ink-2);line-height:1.55}

/* ================= accountability ================= */
.acct{width:100%;border-collapse:separate;border-spacing:0;font-size:var(--fs-15);max-width:78rem}
.acct th{
  text-align:left;font-family:var(--sans);font-size:var(--fs-13);letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-3);font-variation-settings:"wght" 400;padding:0 1.1rem .8rem 0;
  border-bottom:1px solid var(--rule-2);
}
.acct td{padding:1rem 1.1rem 1rem 0;border-bottom:1px solid var(--rule);vertical-align:top;color:var(--ink-2)}
.acct td:first-child{color:var(--ink);font-variation-settings:"wght" 620;font-size:var(--fs-18)}
.acct .ev-req{font-family:var(--sans);font-size:var(--fs-13);color:var(--ink-2)}

/* ================= readiness ================= */
.check{display:grid;grid-template-columns:1fr 24rem;gap:3rem;align-items:start}
.qrow{
  display:grid;grid-template-columns:1fr auto;gap:1.4rem;align-items:center;
  padding:1.05rem 0;border-bottom:1px solid var(--rule);border-left:0;border-right:0;border-top:0;
  margin:0;min-width:0;
}
.qrow legend{float:left;width:100%;padding:0}
.qrow legend + *{clear:both}
.qt{font-size:var(--fs-18);line-height:1.4;color:var(--ink)}
.qt small{display:block;color:var(--ink-3);font-size:var(--fs-13);margin-top:.2rem;line-height:1.45}
.opts{display:flex;gap:.35rem;flex:none}
.opt{
  appearance:none;font:inherit;font-size:var(--fs-13);cursor:pointer;
  border:1px solid var(--rule-2);background:var(--white);color:var(--ink-3);
  border-radius:5px;padding:.4rem .8rem;min-height:44px;min-width:44px;transition:background 120ms ease,color 120ms ease,border-color 120ms ease;
}
.opt:hover{background:var(--paper-2);color:var(--ink-2)}
.opt[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}

.readout{background:var(--paper-2);border-radius:var(--r);padding:1.6rem 1.7rem;position:sticky;top:2rem}
.readout h3{font-size:var(--fs-18);margin:0 0 .6rem}
.readout p{font-size:var(--fs-15);margin:0 0 .8rem;max-width:none}
.readout ul{margin:.6rem 0 0;padding-left:1.15rem;font-size:var(--fs-15);color:var(--ink-2)}
.readout li{margin:.4rem 0}
.readout li .st{font-family:var(--sans);font-size:var(--fs-13);color:var(--ink-3);display:block}
.readout .note{font-size:var(--fs-13);color:var(--ink-3);margin:1rem 0 0}
.readout.none h3{color:var(--ink-3);font-variation-settings:"wght" 400;font-size:var(--fs-18)}
.readout .gate{border-left:2px solid var(--ink);padding-left:1rem;color:var(--ink);margin-bottom:1.1rem}
.copy{
  appearance:none;font:inherit;font-size:var(--fs-13);cursor:pointer;margin:1rem 0 0;
  border:1px solid var(--ink);background:var(--ink);color:var(--paper);border-radius:5px;
  padding:.5rem 1rem;min-height:44px;transition:opacity 120ms ease;
}
.copy:hover{opacity:.85}

/* ================= timeline ================= */
.times{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;max-width:none}
.time{border-top:2px solid var(--ink);padding:1.1rem 0 0}
.time h3{font-family:var(--sans);font-size:var(--fs-15);letter-spacing:.04em;text-transform:uppercase;
  color:var(--ink-3);font-variation-settings:"wght" 560;margin:0 0 .7rem}
.time .n{font-size:var(--fs-36);line-height:1;letter-spacing:-.03em;font-variation-settings:"wght" 620;display:block}
.time .u{font-family:var(--sans);font-size:var(--fs-13);color:var(--ink-3);display:block;margin-top:.4rem}
.time p{font-size:var(--fs-18);margin:1rem 0 0;max-width:none;line-height:1.55}

.note-src{font-size:var(--fs-15);color:var(--ink-3)}

button:focus-visible{outline:2px solid var(--teal-ink);outline-offset:3px;border-radius:4px}
.band-ink a:focus-visible{outline-color:var(--dark-teal)}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--paper);
  padding:.75rem 1.15rem;min-height:44px;display:flex;align-items:center;
  font-size:var(--fs-13);z-index:70;text-decoration:none}
.skip:focus{left:0}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important;animation:none!important}
}

/* ---------- 1100px: the third zone folds under the narrative ---------- */
@media (max-width:70rem){
  .hero-grid{grid-template-columns:1fr;gap:3rem}
  .anatomy{border-left:0;border-top:1px solid var(--rule);padding:2rem 0 0}
  .step{grid-template-columns:7rem minmax(0,1fr);gap:0 2rem}
  .aside{grid-column:2;margin-top:1.4rem}
  .detail{grid-column:2}
  .detail .inner{grid-template-columns:1fr}
  .four{grid-template-columns:1fr 1fr}
  .check{grid-template-columns:1fr;gap:2rem}
  .readout{position:static}
  .qlist{grid-template-columns:1fr;gap:0}
}

/* ---------- mobile: one ordered column, spine stays at the edge ---------- */
@media (max-width:44rem){
  body{font-size:var(--fs-18)}
  .hero{padding:3.5rem 0 3rem}
  
  .exhibit{grid-template-columns:1fr;gap:1.6rem;padding:1.4rem 1.3rem}
  .four{grid-template-columns:1fr}
  .times{grid-template-columns:1fr;gap:1.6rem}
  .defs > div{grid-template-columns:1fr;gap:.2rem}
  .step{grid-template-columns:2.2rem minmax(0,1fr);gap:0 1.1rem;padding:1.8rem 0}
  .spine{padding-right:.9rem}
  .snum,.sys{text-align:left}
  .sys{font-size:var(--fs-13);margin-top:.2rem}
  .handoff{display:none}
  .aside,.detail{grid-column:2}
  .checks li{grid-template-columns:3.4rem 1fr;gap:.8rem}
  .qrow{grid-template-columns:1fr;gap:.7rem;align-items:start}
  /* accountability stacks; a four-column pan severs decision from evidence */
  .acct{display:block}
  .acct thead,.acct thead th{position:absolute;width:1px;height:1px;overflow:hidden;
    clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;padding:0;border:0}
  .acct tbody,.acct tr,.acct td{display:block;width:100%}
  .acct tr{border:1px solid var(--rule-2);border-radius:var(--r);background:var(--white);
    margin:0 0 .8rem;padding:.5rem .2rem}
  .acct td{border-bottom:0;padding:.45rem 1rem}
  .acct td::before{content:attr(data-l);display:block;font-size:var(--fs-13);
    letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);margin-bottom:.15rem;
    font-variation-settings:"wght" 560}

  /* The key stacks rather than wrapping mid-sample, so a line style is never
     orphaned from the words that explain it. */
  .legend{flex-direction:column;gap:.7rem}
  .both-strip{flex-direction:column;gap:.5rem;padding:1rem 1.2rem}
  .both-strip span{min-width:0}
  /* the anatomy sits under the headline; it keeps its line and nodes */
  .anatomy{padding-top:1.6rem}
  .anat li{font-size:var(--fs-18);padding-bottom:1rem}
  /* provenance pills wrap onto their own line rather than splitting a sentence */
  .what .ptag,.exp .ptag{margin-top:.35rem}
}

@media print{
  /* The whole argument of this page is that every claim is sourced. On paper a
     link is invisible, so the reader gets the claim and loses the evidence.
     Print the target next to it. (Recipe from GOV.UK Frontend, MIT.) */
  .source-link[href^="http"]::after{
    content:" (" attr(href) ")";
    font-family:var(--sans);font-size:var(--fs-11);color:#444;
    word-break:break-all;font-variation-settings:"wght" 400;
  }
  /* in-page links have no useful target on paper */
  a[href^="#"]::after{content:none}
  body{background:#fff;font-size:var(--fs-18)}
  .detail{grid-template-rows:1fr!important}
  .band-ink,.band-ink .exhibit,.band-ink .exhibit.fail,.recon{background:#fff;color:#000}
  .band-ink h2,.band-ink h3,.band-ink strong,.ex-head,.ex-id{color:#000}
  .band-ink p,.cl,.ex-note,.ex-meta,.recon p,.checks .ct{color:#333}
  .exhibit{background:#fff;border-color:#bbb;break-inside:avoid}
  .step{break-inside:avoid}
  /* a heading orphaned from its table at the A4 page break */
  .sec-head,h2,h3{break-after:avoid}
  .acct,.defs,.four{break-before:avoid}
  .asks{grid-template-columns:1fr 1fr}
  .asks li{break-inside:avoid;background:#fff}
  /* Force every disclosure open on paper. Chrome hides a closed <details>
     through ::details-content with content-visibility:hidden, so overriding
     `display` on the children is not enough on its own — both are needed, and
     the JS beforeprint handler covers engines that honour neither. */
  .detail,.detail .inner,.fold,.fold-body{display:block!important;content-visibility:visible!important}
  .stage-detail,.faq,.faq-body,.stage-asks{display:block!important;content-visibility:visible!important}
  .fold::details-content,.stage-detail::details-content,.faq::details-content,.readiness-group::details-content{
    content-visibility:visible!important;block-size:auto!important;
    display:block!important;opacity:1!important;height:auto!important}
  .fold:not([open]) > *:not(summary),
  .stage-detail:not([open]) > *:not(summary),
  .faq:not([open]) > *:not(summary),
  .readiness-group:not([open]) > *:not(summary){display:block!important;visibility:visible!important}
  .fold-body{animation:none!important;padding-left:0}
  .fold > summary::after{display:none}
  .fold > summary{background:none!important;break-after:avoid}
  .detail::details-content{content-visibility:visible!important;block-size:auto!important;
    display:block!important;opacity:1!important;height:auto!important}
  .detail:not([open]) > *:not(summary){display:block!important;visibility:visible!important}
  .detail > .inner{padding-top:.4rem}
  .detail .more{color:#000;min-height:0;padding:.3rem 0}
  .detail .chev{display:none}
  .evidence{background:#fff;border-color:#ccc}
}


/* ---------- per-claim provenance ----------
   Attached to the sentence it qualifies, never once per step. Rendered as a
   distinct token rather than trailing prose: read as a sentence it looks like
   the writer forgot to finish a thought, and it must never be mistaken for
   part of the claim itself. */
.ptag{
  max-width:100%;
  display:inline-flex;align-items:baseline;gap:.4rem;
  font-size:var(--fs-13);line-height:1.35;letter-spacing:.01em;
  font-variation-settings:"wght" 560;
  padding:.24rem .5rem .26rem;border-radius:3px;
  font-family:var(--sans);font-size:var(--fs-13);
  border:1px solid var(--rule-2);background:var(--white);color:var(--ink-3);
  vertical-align:.08em;margin-left:.15rem;
}
.ptag .pmark{width:8px;height:8px;flex:none;border-radius:50%;background:var(--ink-3);
  position:relative;top:1px}
.ptag[data-p="observed"]{color:var(--teal-ink);border-color:color-mix(in srgb,var(--teal) 38%,transparent)}
.ptag[data-p="observed"] .pmark{background:var(--teal)}
.ptag[data-p="documented"]{color:var(--ink-2)}
.ptag[data-p="documented"] .pmark{background:transparent;box-shadow:none}
.ptag[data-p="illustrative"]{color:var(--ochre);border-color:color-mix(in srgb,var(--ochre) 38%,transparent)}
.ptag[data-p="illustrative"] .pmark{background:transparent;box-shadow:none}
/* inside the tinted decision block the pill sits on its own line */
.owned .ptag{display:inline-flex;margin-top:.6rem;margin-left:0;background:var(--white)}
.band-white .owned,.band-paper .owned{background:none}

/* A documented pill links to its primary source. A classification without a
   source is not evidence, it is filing. */
/* WCAG 2.5.8 exempts targets inline in a sentence, which the source links in
   the limit prose are. The pill is a distinct control, so it gets a comfortable
   target rather than relying on that exemption. */
a.ptag{text-decoration:none;padding-top:.45rem;padding-bottom:.45rem}
a.ptag:hover{border-color:var(--ink-2);text-decoration:underline;text-underline-offset:2px}
.limit a{color:var(--teal-ink)}

/* Evidence cards lead with a plain-language result; the run ID is metadata.
   A Support Ops reader should know what happened before meeting criterion names. */
.ex-head{font-size:var(--fs-22);line-height:1.25;letter-spacing:-.018em;color:var(--dark-ink);
  margin:0 0 .8rem;max-width:24ch}
.ex-id{font-family:var(--sans);font-size:var(--fs-13);color:var(--dark-ink-2)}
.exhibit .ex-meta{margin-bottom:1.1rem}

/* The later observation sits in its own strip. Inside the pass/fail list it
   would read as a retroactive pass, and the whole point is that it is not one:
   the recorded result stays failed at its cutoff. */
.recon{border:1px solid var(--dark-rule);border-left:3px solid var(--dark-ink-3);
  border-radius:var(--r);padding:1.2rem 1.4rem;margin:0 0 3rem;max-width:52rem;
  background:transparent}
.recon p{margin:0;color:var(--dark-ink-2)}
.recon .meta-label{color:var(--dark-ink-3)}
.checks li[data-r="fail"] .ct{color:var(--dark-oxide)}
.checks .cl code{color:var(--dark-ink-3);font-size:var(--fs-13);margin-left:.35rem}


/* ---------- narrow-width safety ----------
   Criterion identifiers like `outbound_email_attached_to_case` are single
   unbreakable tokens 31 characters long. In a ~110px column on a 390px screen
   they will push the page sideways, and a one-pixel horizontal scroll is the
   most obvious "this was never opened on a phone" signal there is. */
code,.evidence .k,.evidence .v,.ex-id,.checks .cl code{overflow-wrap:anywhere}
.evidence,.checks,.exhibit,.recon{min-width:0}
.main,.aside,.detail,.step{min-width:0}
/* nothing may create a horizontal scrollbar */
html,body{overflow-x:clip}

@media (max-width:44rem){
  /* the evidence rows stop being a two-column grid; 11rem of label leaves ~110px */
  .evidence{grid-template-columns:1fr}
  .evidence > div{grid-template-columns:1fr;gap:.1rem;padding-bottom:.45rem}
  .evidence > div:nth-last-child(-n+2){border-bottom:1px solid var(--rule)}
  .evidence > div:last-child{border-bottom:0}
  .evidence .k{font-size:var(--fs-13)}
  .checks li{grid-template-columns:1fr;gap:.15rem}
  .checks .ct{text-align:left}
  .ex-head{font-size:var(--fs-18);max-width:none}
  .recon{padding:1rem 1.1rem}
}

/* Independent-partner disclosure. Plain, findable, not buried in a footer rule —
   a page that names other companies throughout should say what it is. */
.disclosure{font-size:var(--fs-15);color:var(--ink-2);max-width:44rem;
  border-top:1px solid var(--rule);padding-top:1.2rem;margin-bottom:1.2rem}

/* One boundary statement for the whole route. Repeating it under every step made
   directly-checked claims feel as uncertain as the illustrative ones, and made
   the page's subject our evidence discipline rather than the reader's operation. */
.boundary{max-width:44rem;border-left:3px solid var(--rule-2);padding-left:1.1rem;
  font-size:var(--fs-15);color:var(--ink-2);margin:0 0 2rem}

/* Scope note. The page's credibility now rests partly on what it declines to
   answer: the stated trust-killer in real calls is our answer contradicting the
   Salesforce AE's, so the refusal has to be visible rather than implied. */
.scope{max-width:44rem;border-left:3px solid var(--ink);padding-left:1.2rem;
  margin:2.4rem 0 0;font-size:var(--fs-18)}
.scope-not{display:block;margin-top:.7rem;color:var(--ink-3);font-size:var(--fs-15)}

/* The diagram sat at the top of the right column while the selector it
   reflects sat at the bottom of the left — a diagonal relationship with 411px
   of dead space between them. Bottom-aligning puts them side by side, and
   moves the open space up beside the headline where it reads as air. */
@media (min-width:1000px){
  .anatomy{align-self:end}
}

/* The selector now sits beside the diagram it labels. A rail headed "selected
   request route" with its control 800px further down the page was asking the
   reader to trust a label with nothing visible behind it. */
.hero-grid 
.hero-grid 
.hero-grid 
.hero-grid 
.hero .q{font-size:var(--fs-22);line-height:1.25;max-width:26ch;margin:2.4rem 0 0;
  letter-spacing:-.012em;font-variation-settings:"wght" 600}
.hero .who{margin:.85rem 0 0}
@media (min-width:1100px){
  .hero-grid 
}

.q-note{
  max-width:44rem;margin:.6rem 0 0;font-size:var(--fs-15);line-height:1.5;color:var(--ink-3);
}
.both-line{margin:1rem 0 0;font-size:var(--fs-15)}
.both-line a{color:var(--teal-ink)}

/* Route context, in the sticky bar. GPT: "far more useful on a long page than a
   generic percentage-complete line" — a reader several sections down should
   never have to scroll up to find out which version they are reading. */
.pnav-route{
  margin:0 0 0 auto;display:flex;align-items:baseline;gap:.45rem;white-space:nowrap;
  font-size:var(--fs-13);flex:none;order:2;
}
.pnav-route.is-chooser-visible{visibility:hidden;pointer-events:none}
.rs-v{color:var(--ink);font-variation-settings:"wght" 550}
.rs-sep{color:var(--ink-3)}
.rs-a{color:var(--teal-ink);text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--teal) 40%,transparent)}
.rs-a:hover{border-bottom-color:var(--teal)}
.rs-a:focus-visible{outline:2px solid var(--teal-ink);outline-offset:3px;border-radius:3px}
@media (max-width:900px){.pnav-route{display:none}}

/* The answer, before the explanation. GPT's review put it best: a reader
   scanning only headings and these sentences should come away with the
   operating model, without reading a word of the detail beneath. That is what
   makes a long page skimmable rather than merely shorter. */
.answer{
  max-width:52rem;margin:0 0 1rem;
  font-size:var(--fs-18);line-height:1.45;font-variation-settings:"wght" 560;
  color:var(--ink);
}
.band-ink .answer{color:var(--dark-ink)}
.sec-head .answer + p{color:var(--ink-3);font-size:var(--fs-18)}
.band-ink .sec-head .answer + p{color:var(--dark-ink-3)}
@media (max-width:760px){.answer{font-size:var(--fs-18)}}

/* ================= STICKY SECTION NAV =================
   Added because the page is ~9,600px and gave a reader no way to answer
   "where am I, and how much is left?" — the one thing a long evaluation
   document owes someone skimming for their own question. It is navigation,
   not a CTA: every link goes further down this page and nowhere else. */
.pnav{
  position:sticky;top:0;z-index:50;
  background:var(--canvas);
  border-bottom:1px solid var(--rule);
}
.pnav-in{
  max-width:var(--grid);margin:0 auto;padding:0 2rem;
  height:4rem;min-height:4rem;display:grid;grid-template-columns:12.5rem minmax(0,1fr) auto;
  grid-template-rows:44px 20px;align-items:center;gap:0 2rem;
}
.pnav-brand{grid-column:1;grid-row:1 / -1}
.pnav .section-nav{grid-column:2;grid-row:1 / -1;min-width:0}
/* Slice 50: the primary links sit on the same centre line as the wordmark and the chapter
   links, exactly as the shared header does; the route chip tucks under the chapter links. */
.pnav .site-nav{grid-column:3;grid-row:1 / -1;align-self:center}
/* Once the route chooser has scrolled away, the chip takes the lower row under the primary links. */
.pnav-in:not(:has(.pnav-route.is-chooser-visible)) .site-nav{grid-row:1;align-self:end}
.pnav-route{grid-column:3;grid-row:2;align-self:start;margin:.15rem 0 0;text-align:right;font-size:var(--fs-13);line-height:var(--lh-small);white-space:nowrap}
.pnav-list{
  display:flex;align-items:center;gap:1.5rem;list-style:none;margin:0;padding:0;
  overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;
}
.pnav-list::-webkit-scrollbar{display:none}
.pnav-list a{
  display:flex;align-items:center;min-height:44px;padding:.2rem 0;white-space:nowrap;text-decoration:none;
  font-size:var(--fs-15);font-weight:500;font-variation-settings:"wght" 500;letter-spacing:-.005em;color:var(--ink-2);
  border-bottom:1px solid transparent;
  transition:color 140ms ease,border-color 140ms ease;
}
.pnav-list a:hover{color:var(--ink)}
.pnav-list a:focus-visible{outline:2px solid var(--teal-ink);outline-offset:3px;border-radius:3px}
/* match on the attribute, not a value — a previous version set aria-current="true"
   while the stylesheet looked for "page", and nothing ever highlighted */
.pnav-list a[aria-current]{color:var(--ink);border-bottom-color:var(--ink);
  font-variation-settings:"wght" 550}
.pnav-bar{height:2px;background:var(--rule)}
.pnav-fill{display:block;height:100%;width:var(--prog,0%);background:var(--teal);
  transition:width 90ms linear}
@media (max-width:760px){
  .pnav-in{
    height:auto;min-height:6.75rem;padding:0 var(--gutter);
    display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:minmax(64px,auto) 44px;
    gap:0 .5rem;align-items:center;
    -webkit-mask-image:none;mask-image:none;
  }
  .pnav-brand{grid-column:1;grid-row:1;justify-self:start}
  .pnav-route{display:none}
  .pnav .site-nav{grid-column:2;grid-row:1;align-self:center;display:flex;gap:.55rem;font-size:var(--fs-15)}
  .pnav-in:not(:has(.pnav-route.is-chooser-visible)) .site-nav{display:none}
  .pnav .section-nav{grid-column:1 / -1;grid-row:2;min-width:0}
  .pnav-route .rs-v,.pnav-route .rs-sep{display:none}
  .pnav-list{
    grid-column:1 / -1;grid-row:2;width:100%;display:grid;
    grid-template-columns:repeat(3,max-content);gap:.5rem;justify-content:space-between;
    min-width:0;overflow:visible;
  }
  .pnav-list li{min-width:0}
  .pnav-list li:nth-child(2){text-align:center}
  .pnav-list li:last-child{text-align:right}
  .pnav-list a{display:inline-flex;font-size:var(--fs-15);padding:.1rem 0}
}
@media (prefers-reduced-motion:reduce){.pnav-fill{transition:none}}
@media print{.pnav{display:none}}

/* ================= SYNTHESIS =================
   Four categories, given a readable 2x2 document layout rather than narrow
   dashboard columns. */
.synth{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2.4rem 2rem;max-width:none}
.sy{border-top:1px solid var(--rule);padding-top:1rem;min-width:0;display:flex;flex-direction:column}
.sy-h{margin:0 0 .9rem}
/* Each column asks for a different output. That was only stated in a paragraph
   underneath — prose doing work the layout should do. Now the header says it. */
.sy-do{
  display:block;margin-top:.3rem;
  font-family:var(--sans);font-size:var(--fs-13);letter-spacing:0;text-transform:none;
  line-height:1.4;color:var(--ink-2);font-variation-settings:"wght" 500;
}
.sy-ev{
  margin:0 0 1.1rem;padding:0;
  background:none;font-size:var(--fs-13);line-height:1.5;color:var(--ink-3);font-style:normal;
}
.band-white .sy-ev{background:none}
.sy ul{margin:0 0 1.1rem;padding:0;list-style:none;flex:1}
.sy-r{
  display:inline-block;font-family:var(--sans);font-size:var(--fs-13);letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-3);
  border:1px solid var(--rule);border-radius:3px;padding:.05rem .3rem;
  white-space:nowrap;position:relative;top:-1px;
}
.sy li{
  font-size:var(--fs-15);line-height:1.5;color:var(--ink-2);
  padding:.55rem 0 .55rem .95rem;position:relative;border-top:1px solid var(--rule);
}
.sy li:first-child{border-top:none;padding-top:0}
.sy li::before{
  content:"";position:absolute;left:0;top:1.15rem;
  width:4px;height:4px;border-radius:50%;background:var(--rule-3);
}
.sy li:first-child::before{top:.6rem}
.sy-known{border-top-color:var(--teal)}
.sy-known .sy-h{color:var(--teal-ink)}
.sy-known li::before{background:var(--teal)}
.sy-yours{border-top-color:var(--ochre)}
.sy-yours .sy-h{color:var(--ochre)}
.sy-yours li::before{background:var(--ochre)}
.sy-prove{border-top-color:var(--ink)}
.sy-prove .sy-h{color:var(--ink)}
.sy-prove li::before{background:var(--ink);border-radius:0}
.sy-ask{border-top-color:var(--ochre);border-top-style:dashed}
.sy-ask .sy-h{color:var(--ochre)}
.sy-ask li::before{background:none;border:1px solid var(--ochre)}
.brief-copy-control{
  display:grid;grid-template-columns:max-content minmax(0,1fr);align-items:center;
  gap:.55rem 1rem;margin-top:1.15rem
}
.brief-copy-control[hidden]{display:none}
.brief-copy-button{
  appearance:none;font:inherit;font-size:var(--fs-13);cursor:pointer;border:1px solid var(--ink);
  background:var(--ink);color:var(--paper);border-radius:4px;padding:.55rem 1rem;min-height:44px;
}
.brief-copy-button:hover{opacity:.85}
.brief-copy-helper{font-size:var(--fs-13);line-height:1.45;color:var(--ink-3);max-width:46rem}
.brief-copy-status{
  grid-column:1/-1;font-family:var(--sans);font-size:var(--fs-13);line-height:1.45;
  color:var(--teal-ink);min-height:1.45em
}
.last-reviewed{font-family:var(--mono);font-size:var(--fs-11);color:var(--ink-3)}
#synthlead{font-size:var(--fs-18);line-height:1.55;max-width:68ch}
.scoping-coda{max-width:var(--measure)}
.scoping-coda p{margin:0;padding:.72rem 0}
.scoping-coda .coda-send{margin-top:1.2rem;padding:1rem 0 0;border-top:2px solid var(--teal);color:var(--ink)}
@media (max-width:720px){
  .synth{grid-template-columns:1fr;gap:1.6rem}
  .brief-copy-control{grid-template-columns:minmax(0,1fr)}
  .brief-copy-button{justify-self:start}
  .brief-copy-status{grid-column:1}
}
@media print{.synth{grid-template-columns:1fr 1fr}.sy{break-inside:avoid}}

/* Route swap: the only motion on the page that is not a hover or a disclosure.
   It exists because switching route changes the operating model itself — the
   diagram, the questions, the steps and the takeaway all become different
   claims at once — and showing that they changed together is the point. */
@keyframes swap{
  from{opacity:0;transform:translateY(6px)}
  to{opacity:1;transform:none}
}
.swapped{animation:swap 260ms cubic-bezier(.2,.7,.3,1) both}
/* stagger, so the reader reads it as one model rearranging rather than a flash */
#anatomy.swapped{animation-delay:0ms}
#takeaway.swapped{animation-delay:40ms}
#qlist.swapped{animation-delay:70ms}
#steps.swapped{animation-delay:100ms}
@media (prefers-reduced-motion:reduce){
  .swapped{animation:none}
}

/* ================= THE OPERATING-MODEL MAP =================
   Generated as SVG from the same route data as everything else. It answers the
   one question the vertical rail could not: which system is holding the request
   at each moment, and where it crosses between them. Both crossings are where
   the implementation work and the reporting disagreements live, which is the
   page's argument — so the map states it rather than the prose alone.

   No inline styles anywhere in the SVG; everything is driven from here. */
.opmap{display:block;width:100%;height:auto;overflow:visible}

.m-band{fill:transparent}
.m-lane[data-sys="salesforce"] .m-band{fill:color-mix(in srgb,var(--sf) 2.5%,transparent)}
.m-lane[data-sys="fin"] .m-band{fill:color-mix(in srgb,var(--ink) 3.5%,transparent)}
.m-lane[data-unused] .m-band{fill:none}
.m-lane[data-unused] .m-lane-name{opacity:.35}

.m-lane-name{
  font-family:var(--sans);font-size:11px;letter-spacing:.07em;text-transform:uppercase;
  fill:var(--ink-3);text-anchor:end;dominant-baseline:middle;
}
.m-lane[data-sys="salesforce"] .m-lane-name{fill:var(--sf)}
.m-lane[data-sys="fin"] .m-lane-name{fill:var(--ink)}

/* the request itself */
/* Edge weight carries evidence, matching the labels used everywhere else:
   solid for what we observed in marked trial traffic, dashed for what Fin
   documents, dotted for what depends on your org. */
.m-wire{fill:none;stroke:var(--rule-3);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.m-wire[data-ev="observed"]{stroke:var(--teal)}
.m-wire[data-ev="documented"]{stroke:var(--rule-3);stroke-dasharray:6 4}
.m-wire[data-ev="illustrative"]{stroke:var(--ochre);stroke-dasharray:1.5 4}

.m-node[data-ev="observed"] .m-box{stroke-width:2}


.m-box{fill:var(--white);stroke:var(--rule-2);stroke-width:1}
.m-node[data-sys="salesforce"] .m-box{stroke:var(--sf)}
.m-node[data-sys="fin"] .m-box{stroke:var(--ink)}
/* The gate is the customer-controlled decision on the path — "your assignment
   rules decide whether Fin sees it at all" — so it takes the ochre that means
   exactly that, overriding its owning system's colour. */
.m-node[data-gate] .m-box{stroke:var(--ochre);stroke-dasharray:4 3}
.m-node[data-gate] .m-label{font-variation-settings:"wght" 600}
/* Evidence grade is readable off the box itself, not only off the wire into it.
   Two nodes were drawn identically while one was observed and the other was an
   illustration of a configurable choice. */
.m-node[data-ev="illustrative"] .m-box{stroke:var(--ochre);stroke-dasharray:1.5 3;stroke-width:1.25}
.m-node[data-ev="illustrative"] .m-label{fill:var(--ink-2)}
.m-node[data-ev="documented"] .m-box{stroke-dasharray:5 4}
.m-label{
  font-size:12.5px;fill:var(--ink);text-anchor:middle;dominant-baseline:middle;
  font-variation-settings:"wght" 560;
}

/* Reading state. The step you are reading is the one the map lights up — that
   is the only reason this moves at all. Everything else recedes rather than
   disappearing, so the whole model stays legible in a screenshot. */
.opmap[data-active] .m-node{transition:opacity 220ms ease}
.opmap[data-active] .m-node{opacity:.42}
.opmap[data-active] .m-node.on{opacity:1}
.opmap[data-active] .m-node.on .m-box{stroke-width:2}
@media (prefers-reduced-motion:reduce){
  .opmap[data-active] .m-node{transition:none}
}
/* with no JavaScript there is no active state at all, and the map simply shows
   the whole route — which is the correct resting picture anyway */

@media print{
  .m-band{fill:none}
  .m-box{fill:#fff;stroke:#666}
  .m-wire{stroke:#666}
    .m-label,.m-lane-name,  .opmap[data-active] .m-node{opacity:1}
}

/* The map needs the full grid, not the hero's right rail — six nodes in 490px
   put "Case created" and "Eligibility" on top of each other. */
.opmap-fig{margin:2.6rem 0 0;max-width:none}
.opmap-fig .anatomy-h{margin:0 0 .9rem}
.map-state{
  display:none;appearance:none;background:none;border:0;padding:0;color:var(--teal-ink);cursor:pointer;
  font:inherit;font-size:var(--fs-13);text-decoration:underline;text-underline-offset:.16em
}
.map-state[hidden]{display:none}
.map-state:hover{color:var(--ink)}
.map-state:focus-visible{outline:2px solid var(--teal-ink);outline-offset:3px}
.opmap-note{max-width:56rem;margin:1rem 0 0;font-size:var(--fs-15);color:var(--ink-2)}
.hero-aside{align-self:end}
.hero-aside .scope{margin:0}
@media (max-width:1000px){
  .hero-aside{margin-top:1.6rem}
}

/* On a phone the map squeezed to 93px tall and its labels rendered at about
   3px — technically present, actually unreadable. A wide diagram should scroll
   inside its own container rather than shrink below legibility; the page itself
   still never scrolls sideways. */
.opmap-scroll{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}
.opmap-scroll .opmap{min-width:58rem}
@media (max-width:760px){
  .opmap-scroll{
    margin-inline:-1.25rem;padding-inline:1.25rem;
    -webkit-mask-image:linear-gradient(to right,#000 92%,transparent 100%);
    mask-image:linear-gradient(to right,#000 92%,transparent 100%);
  }
  /* The map is wider than a phone, so say so. This hint used to hang off
     `.anatomy-h`, a caption element that was removed with an earlier
     restructure — the instruction had been silently absent ever since. It now
     rides the permanent instruction line, which cannot disappear. */
  .opmap-fig[data-map-expanded] .md-lead::after{
    content:" Scroll the map sideways to see the whole route.";
    color:var(--ink-3);
  }
}
@media print{
  .opmap-scroll{overflow:visible;margin-inline:0;padding-inline:0;mask-image:none}
  .opmap-scroll .opmap{min-width:0}
}


/* Phase labels along the top. They are the reason both routes can be read
   against each other: the same x-position means the same thing on both, and a
   route with an empty slot is telling you something — Messenger-first has no
   primary record and no eligibility gate before Fin acts. */
.m-lane-rule{stroke:var(--rule);stroke-width:1}
.m-lane[data-sys="customer"] .m-lane-rule{stroke:none}
.m-phase{
  font-family:var(--sans);font-size:10px;letter-spacing:.09em;text-transform:uppercase;
  fill:var(--ink-3);text-anchor:middle;opacity:.72;
}

/* The thin rail is where the durable record continues to exist, as distinct
   from the thick route, which is only where active handling is happening.
   Without it the map implied Salesforce stops being the system of record the
   moment Fin picks the Case up — the exact misunderstanding this page exists
   to correct. */
/* The rail says a record exists, not that anything travelled. It has to read as
   a different kind of mark from the evidence-bearing connectors, so it is
   thinner, fainter and sits on a much finer dash. */
.m-rail{stroke:var(--sf);stroke-width:16;opacity:.2;stroke-linecap:round}
.m-rail[data-sys="fin"]{stroke:var(--ink-3)}
.m-rail[data-sys="salesforce"]{stroke:var(--sf)}
.m-rail[data-sys="fin"]{stroke:var(--ink-3)}
.m-wire{stroke-width:2.25;stroke-linecap:round}
@media print{
  .m-lane-rule{stroke:var(--rule);stroke-width:1}
.m-lane[data-sys="customer"] .m-lane-rule{stroke:none}
.m-phase{fill:#555}
  .m-rail{stroke:#999}
}

/* ── The journey locator ──────────────────────────────────────────────────
   The map's second view. It pins while the six steps scroll past and marks the
   moment you are reading. This is the only motion on the page that is not a
   hover or a disclosure, and it earns it: the map is showing where the request
   is, which is the thing the step is describing. */

.locator{
  position:sticky;top:3.6rem;z-index:20;margin:0 0 2rem;max-width:none;
  background:var(--white);
  border:1px solid var(--rule);border-radius:4px;padding:.9rem 1rem .6rem;
}
.locator-h{display:flex;align-items:baseline;gap:.6rem;margin:0 0 .5rem;flex-wrap:wrap}
.locator-t{
  font-family:var(--sans);font-size:var(--fs-13);letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink-3);
}
.locator-now{font-size:var(--fs-13);color:var(--ink);font-variation-settings:"wght" 560}


/* Reading state. Everything recedes rather than disappearing, so the whole
   model stays legible in a screenshot of any single step. */
.opmap[data-active] .m-node{opacity:.34;transition:opacity 200ms ease}
.opmap[data-active] .m-node.on{opacity:1}
.opmap[data-active] .m-node.on .m-box{stroke-width:2.5}
.opmap[data-active] .m-wire{opacity:.5;transition:opacity 200ms ease}
@media (prefers-reduced-motion:reduce){
  .opmap[data-active] .m-node,.opmap[data-active] .m-wire{transition:none}
}
@media (max-width:900px){
  .locator{position:static}
}
@media print{
  .locator{position:static;background:none;border-color:#ccc;backdrop-filter:none}
  .opmap[data-active] .m-node,.opmap[data-active] .m-wire{opacity:1}
}

/* ── The coverage view ────────────────────────────────────────────────────
   The map's third view, and the one that costs us something to show. Same
   geometry, but each moment is drawn as what we actually know about it. On the
   Salesforce-first route only the first two moments are teal. On Messenger-first
   nothing is, because we have never run that path — and the map says so without
   a caveat having to carry it. */
.coverage{margin:0 0 2.6rem;max-width:none}
.coverage-h{
  font-family:var(--sans);font-size:var(--fs-13);letter-spacing:.07em;text-transform:uppercase;
  color:var(--dark-ink-3);margin:0 0 .8rem;
}
.coverage-key{display:flex;flex-wrap:wrap;gap:1.2rem;margin:.9rem 0 0;font-size:var(--fs-13)}
.ck{display:inline-flex;align-items:center;gap:.45rem;color:var(--dark-ink-2)}
.ck::before{content:"";width:16px;height:0;border-top-width:2.5px;border-top-style:solid}
.ck[data-ev="observed"]::before{border-color:var(--dark-teal)}
.ck[data-ev="documented"]::before{border-color:var(--dark-ink-3);border-top-style:dashed}
.ck[data-ev="illustrative"]::before{border-color:var(--ochre);border-top-style:dotted}

/* on the ink band the map inverts */
.band-ink .m-band{fill:var(--dark-2)}
.band-ink .m-lane[data-sys="fin"] .m-band{fill:var(--dark-3)}
.band-ink .m-lane-rule{stroke:var(--dark-rule)}
.band-ink .m-lane-name{fill:var(--dark-ink-3)}
.band-ink .m-lane[data-sys="fin"] .m-lane-name{fill:var(--dark-ink-2)}
.band-ink .m-lane[data-sys="salesforce"] .m-lane-name{fill:#7ab5e8}
.band-ink .m-node[data-sys="salesforce"] .m-box{stroke:#7ab5e8}
.band-ink .m-node[data-sys="fin"] .m-box{stroke:var(--dark-ink-2)}
.band-ink .m-rail{stroke:#7ab5e8}
.band-ink .m-wire{stroke:var(--dark-ink-3)}
.band-ink .m-rail{stroke:var(--dark-ink-3)}
.band-ink .m-box{fill:var(--dark-2);stroke:var(--dark-rule)}
.band-ink .m-label{fill:var(--dark-ink)}
.band-ink 
/* evidence state, stated in line treatment as well as colour so it survives
   greyscale printing */
.is-coverage .m-node[data-ev="observed"] .m-box{stroke:var(--dark-teal);stroke-width:2.5}
.is-coverage .m-node[data-ev="documented"] .m-box{stroke:var(--dark-ink-3);stroke-dasharray:5 4}
.is-coverage .m-node[data-ev="illustrative"] .m-box{stroke:var(--ochre);stroke-dasharray:1.5 3}
.is-coverage .m-node[data-ev="none"] .m-box{stroke:var(--dark-rule);opacity:.5}
.is-coverage .m-node[data-ev="none"] .m-label{opacity:.5}
@media print{
  .coverage-h,.ck{color:#333}
  .band-ink .m-band{fill:#f4f4f4}
  .band-ink .m-box{fill:#fff;stroke:#666}
  .band-ink .m-label,.band-ink .m-lane-name{fill:#000}
  .band-ink .m-wire,.band-ink .m-rail{stroke:#666}
}

/* ── Step hover on the map ────────────────────────────────────────────────
   Each moment is its own target. The cue is a shaded plate behind the node
   rather than a colour change, because every colour on this map already means
   something and hover must not borrow one. */
.m-node[data-step]{cursor:pointer}
/* No corner mark any more: every box opens its column's step, so a mark that
   said "this one is a control" distinguished nothing and was just noise. */
.m-node[data-step] .m-box{transition:fill 120ms ease,stroke-width 120ms ease}
.m-node[data-step]:hover .m-box,
.m-node[data-step]:focus-visible .m-box{fill:var(--paper-3);stroke-width:2.5}
/* the step the panel is currently showing stays marked after the pointer leaves */
.m-node[data-step].picked .m-box{fill:var(--paper-3);stroke-width:2.5}
.m-node[data-step]:focus{outline:none}
.m-node[data-step]:focus-visible .m-box{stroke:var(--teal)}
@media (prefers-reduced-motion:reduce){.m-node[data-step] .m-box{transition:none}}

.mapdetail{min-height:9.5rem;margin:1rem 0 0}
.md-hint{color:var(--ink-3)}
.md{max-width:60rem;animation:mdin 180ms ease both}
@keyframes mdin{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.md{animation:none}}
.md-title{font-size:var(--fs-22);margin:0 0 .85rem;letter-spacing:-.012em}
.md-what,.md-owned,.md-no-shot{
  margin:0 0 1rem;font-size:var(--fs-18);line-height:1.55;color:var(--ink-2)
}
.md-what .meta-label,.md-owned .meta-label{margin-bottom:.25rem;color:var(--ink)}
.md-owned{margin-top:1.15rem;border-left:2px solid var(--teal);padding-left:.9rem}
.md-no-shot{padding:.8rem .9rem;background:var(--white-2);border:1px solid var(--rule)}
.md-checked-copy{margin:0;max-width:54rem;color:var(--ink-2)}
.md .detail .inner{display:block}

/* ── The panel stack ──────────────────────────────────────────────────────
   Every step is rendered here. Without JavaScript this is an ordered document
   and the whole article is present; with JavaScript the map picks one and the
   button puts the document back. Nothing is hidden that cannot be reached. */

.mapdetail{position:relative}
/* The header bar: what the map does, and the document-mode control. It is
   always present, so the mechanism does not explain itself once and then hide
   the moment a step is picked. */
.md-bar{
  display:flex;gap:1.6rem;align-items:baseline;justify-content:space-between;
  margin:1rem 0 0;padding:0 0 .8rem;border-bottom:1px solid var(--rule);
}
.md-lead{margin:0;font-size:var(--fs-15);color:var(--ink-2);max-width:64rem}
.md-count{display:none}
.md-stack{display:flex;flex-direction:column;gap:2.4rem;margin:1.4rem 0 0}
.md-stack:not([data-single]) > .md + .md{border-top:1px solid var(--rule);padding-top:2.2rem}
@media screen and (min-width:721px){
  html.js .md-stack[data-single]{gap:0;margin-top:0}
  html.js .md-stack[data-single] > .md:not([data-selected]){display:none}
  html.js .md-stack[data-single] > .md[data-selected]{margin-top:1.4rem}
}
/* the summary steps aside once a step is picked — they answer the same question */
.mapdetail.has-pick > .opmap-note[data-default]{display:none}
.md .detail{margin-top:.9rem}

.md-all{
  flex:none;background:var(--white);border:1px solid var(--rule-2);border-radius:3px;
  padding:.4rem .85rem;cursor:pointer;color:var(--ink);
  font-family:var(--sans);font-size:var(--fs-13);letter-spacing:.04em;text-transform:uppercase;
  white-space:nowrap;
}
.md-all:hover{border-color:var(--teal);color:var(--teal-ink)}
.md-all:focus-visible{outline:2px solid var(--teal-ink);outline-offset:2px}
@media (max-width:720px){
  .md-bar{flex-direction:column;gap:.9rem;align-items:flex-start}
  .md-stack{gap:1.8rem}
}
@media screen and (max-width:720px){
  html.js .map-state{display:inline-block;margin-top:.75rem;min-height:44px;padding:.65rem 1rem;
    border:1px solid var(--teal);border-radius:var(--r);background:var(--paper-2);font-weight:600;text-decoration:none}
  html.js .opmap-fig:not([data-map-expanded]) .opmap-scroll{display:none}
  html.js .opmap-fig:not([data-map-expanded]) .md-bar{display:none}
  .md-all{display:none}
  /* Prerender carries desktop's `data-single` marker. Give that marker the
     same stacked treatment on phones that the runtime applies when it removes
     the marker, so enhancement changes state without changing geometry. */
  html.js .md-stack[data-single] > .md + .md{
    border-top:1px solid var(--rule);padding-top:2.2rem
  }
}

/* Print and no-JS both want the whole document, never one panel. */
@media print{
  .mapdetail{min-height:0}
  .md{animation:none}
  .md:not([data-has-shots]){break-inside:avoid}
  .md-all{display:none}
  html.js .opmap-fig:not([data-map-expanded]) .opmap-scroll{display:block}
  html.js .opmap-fig:not([data-map-expanded]) .md-bar{display:flex}
  html.js .md-stack[data-single] > .md:not([data-selected]){display:block}
  .mapdetail.has-pick > .opmap-note[data-default]{display:block}
}

/* ── Route toggle ─────────────────────────────────────────────────────────
   Two links, sized like a control rather than a decision. They were cards the
   size of the page's primary action, carrying three lines of explanation each
   — but the map below now says what each route does far better than the copy
   did, so the control only has to name them. */
.routes{display:inline-flex;align-items:center;gap:.2rem;margin:0;max-width:none;
  border:1px solid var(--rule-2);border-radius:3px;padding:.14rem;background:var(--white)}
.rt-label{
  font-family:var(--sans);font-size:var(--fs-13);letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-3);padding:0 .45rem 0 .35rem;
}
.rt{
  display:inline-flex;flex-direction:column;align-items:center;justify-content:center;
  min-height:44px;padding:.24rem .7rem;border-radius:2px;text-decoration:none;
  font-size:var(--fs-13);line-height:1.2;color:var(--ink-2);white-space:nowrap;
  transition:background 130ms ease,color 130ms ease;
}
.rt-channel{font-variation-settings:"wght" 600}
.rt-system{font-size:var(--fs-13);color:var(--ink-3);font-variation-settings:"wght" 400}
.rt:hover{background:var(--paper-2);color:var(--ink)}
.rt[aria-current]{background:var(--teal);color:var(--ink);font-variation-settings:"wght" 560}
.rt[aria-current] .rt-system{color:var(--ink-2)}
.rt:focus-visible{outline:2px solid var(--teal-ink);outline-offset:2px}

@media (prefers-reduced-motion:reduce){.rt{transition:none}}
@media (max-width:600px){
  .routes{flex-wrap:wrap}
  .rt-label{width:100%;padding:.2rem .35rem}
}
@media print{.routes{border:none;padding:0}.rt:not([aria-current]){display:none}}

/* The toggle is the widget's title. "Salesforce-first route — end to end" said
   the same thing the control already says, one line lower. */
.opmap-head{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin:0 0 1rem}
.opmap-head .who{font-size:var(--fs-13);color:var(--ink-3);margin:0}

/* The column captions answer the same question as the nodes. */
.m-phasebox{fill:transparent}
/* the column itself is the target; it tints only faintly, because the panel
   below is the real feedback and a strong column wash competes with the
   evidence colours on the boxes inside it */
.m-col{fill:transparent}
.m-phasehit[data-step]:hover .m-col,
.m-phasehit[data-step]:focus-visible .m-col{fill:var(--ink);fill-opacity:.035}
.m-phasehit[data-step].picked .m-col{fill:var(--ink);fill-opacity:.03}
/* wires must not intercept the column: a reader hovering a column should not
   get a different result depending on whether a line happens to pass under
   the pointer */
.m-wire,.m-rail{pointer-events:none}
.m-phasehit[data-step]{cursor:pointer}
.m-phasehit[data-step]:hover .m-phasebox,
.m-phasehit[data-step]:focus-visible .m-phasebox{fill:var(--paper-2)}
.m-phasehit[data-step]:hover .m-phase,
.m-phasehit[data-step].picked .m-phase{fill:var(--ink);opacity:1}
.m-phasehit[data-step].picked .m-phasebox{fill:var(--paper-2)}
.m-phasehit:focus{outline:none}
.m-phasehit:focus-visible .m-phasebox{stroke:var(--teal);stroke-width:1.5}

/* Switching route replaces every step, which destroys the node the browser was
   using as its scroll anchor — so Chrome re-anchored and threw the reader back
   near the top of the section. Nothing in our JavaScript was scrolling; it was
   scroll anchoring doing its job on content that had been swapped wholesale. */
#steps,#opmap,#mapdetail{overflow-anchor:none}

/* The route's caption, beside its control. It replaced a full paragraph that
   restated the map in prose and rewrote itself under the reader whenever they
   switched — the map is the picture, this is the one line under it. */
.rt-flow{
  font-size:var(--fs-13);line-height:var(--lh-small);color:var(--ink-2);max-width:68ch;
}
.opmap-head{align-items:flex-start}
@media (max-width:900px){
  .opmap-head{flex-direction:column;gap:.7rem}
}

/* ══════ IMPLEMENTATION FIGURES ══════════════════════════════════════════
   Two, not five. A reviewer's ruling, and the right one: five equally
   elaborate illustrations would be five decorated summaries and would weaken
   the meaning of the real diagram above.

   Neither uses the evidence palette. Teal, dashed grey and dotted ochre are
   assertions about the request journey we instrumented; borrowing them for a
   contractual boundary or a units argument would claim evidence these folds do
   not have. Meaning here is carried by containment, position and plain label,
   and both survive greyscale printing. */

/* ── No inheritance ──────────────────────────────────────────────────────
   The left side is one contained stack. The right side is deliberately NOT
   contained: four separate cards, because obtaining one does not answer the
   other three. The cards carry the item and the required action and nothing
   else — no status, no jurisdiction, no reassurance. We have not read these
   instruments and the picture must not imply we have. */
.noinh{
  display:grid;grid-template-columns:1fr auto 1.35fr;align-items:start;
  gap:0 1.6rem;margin:1.6rem 0 1.8rem;
}
/* both sides start on the same baseline; only the barrier centres between them */
.ni-bar{align-self:center}
.ni-t{
  margin:0 0 .6rem;font-family:var(--sans);font-size:var(--fs-13);
  letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);
}
.ni-stack{
  position:relative;border:1px solid var(--sf);border-radius:4px;
  background:var(--white);padding:1.15rem .95rem;
}
/* the stack reads as several instruments already in place, as one thing */
.ni-stack::before,.ni-stack::after{
  content:"";position:absolute;left:6px;right:-6px;height:100%;
  border:1px solid var(--rule-2);border-radius:4px;z-index:-1;
}
.ni-stack::before{top:5px}
.ni-stack::after{top:10px;opacity:.6}
.ni-stack span{font-variation-settings:"wght" 600;font-size:var(--fs-15)}

.ni-bar{display:flex;flex-direction:column;align-items:center;gap:.4rem;color:var(--ink-3)}
.ni-x{font-size:var(--fs-22);line-height:1;color:var(--ochre)}
.ni-xl{
  font-family:var(--sans);font-size:var(--fs-13);letter-spacing:.08em;
  text-transform:uppercase;white-space:nowrap;
}
.ni-cards{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:1fr 1fr;gap:.6rem;
}
.ni-cards li{
  border:1px solid var(--rule-2);border-radius:4px;background:var(--white);
  padding:.6rem .7rem;
}
.ni-n{display:block;font-variation-settings:"wght" 600;font-size:var(--fs-15)}
.ni-a{
  display:block;margin-top:.3rem;font-family:var(--sans);font-size:var(--fs-13);
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);
}
.ni-cap{
  margin:.6rem 0 0;font-family:var(--sans);font-size:var(--fs-13);
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);
}
.noinh figcaption{
  grid-column:1 / -1;margin:1.1rem 0 0;padding-top:.8rem;
  border-top:1px solid var(--rule);font-size:var(--fs-13);color:var(--ink-2);
}
@media (max-width:760px){
  .noinh{grid-template-columns:1fr;gap:1rem}
  .ni-bar{flex-direction:row;gap:.6rem}
}

/* ── Three time scales ───────────────────────────────────────────────────
   Ordinal, and it says so. We do not have durations, and bars drawn to scale
   would be false precision on a page whose whole argument is not overclaiming.
   Only the calendar track reaches the date marker. */
.tscale{margin:1.6rem 0 1.8rem}
.ts-note{
  margin:0 0 .7rem;font-family:var(--sans);font-size:var(--fs-13);
  letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);
}
/* the inset keeps the date marker and its label inside the figure — at flush
   right the label was clipped by the container edge */
.ts-grid{display:grid;grid-template-columns:auto 1fr;gap:.55rem 1.1rem;align-items:center;padding-right:.7rem}
.ts-k{font-size:var(--fs-13);color:var(--ink-2);white-space:nowrap}
.ts-track{
  position:relative;display:block;height:1.7rem;
  border-left:1px solid var(--rule-2);
}
.ts-bar{
  display:flex;align-items:center;height:100%;
  background:var(--paper-2);border:1px solid var(--rule-2);border-radius:0 4px 4px 0;
  border-left:none;padding:0 .6rem;
}
.ts-1{width:16%}
.ts-2{width:42%}
.ts-3{width:100%;background:var(--paper-3);border-color:var(--ink-3)}
.ts-u{
  font-family:var(--sans);font-size:var(--fs-13);letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink-2);
}
.ts-date{border-left:none}
/* the date marker sits at the end of the longest track, and only that track
   reaches it — which is the argument the prose was carrying alone */
.ts-date::before{
  content:"";position:absolute;right:0;top:-2.4rem;bottom:.5rem;
  border-left:1px dashed var(--ink-3);
}
.ts-dl{
  position:absolute;right:0;top:.1rem;
  font-family:var(--sans);font-size:var(--fs-13);letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink);
}
.tscale figcaption{
  margin:1.1rem 0 0;padding-top:.8rem;border-top:1px solid var(--rule);
  font-size:var(--fs-13);color:var(--ink-2);
}
@media (max-width:620px){
  .ts-grid{grid-template-columns:1fr;gap:.25rem}
  .ts-k{margin-top:.6rem}
}
@media print{.noinh,.tscale{break-inside:avoid}}


/* ── One view ─────────────────────────────────────────────────────────────
   The widget and the panel that explains it have to be readable together: a
   reader who hovers a column should not have to scroll to find out what it
   says. On a wide screen the map is given a share of the viewport height
   rather than a fixed one — it is vector, so it scales without going soft —
   and the surrounding spacing is tightened to match. */
@media (min-width:60rem){
  .opmap-fig{margin-top:1.2rem}
  .opmap-head{margin-bottom:.5rem}
  .md-bar{margin-top:.6rem;padding-bottom:.45rem}
  .md-lead{font-size:var(--fs-13);line-height:1.45}
  .mapdetail{min-height:0}
  html.js .md-stack[data-single] > .md[data-selected]{margin-top:.7rem}
  .md-title{margin-bottom:.35rem;font-size:var(--fs-18)}
  /* the panel's own rhythm, tightened so the tallest of them still lands
     inside the viewport alongside the map */
  .md-what{margin-bottom:.5rem}
  .md-owned{margin-top:.8rem}
  .md .detail{margin-top:1rem}
}

/* Short screens — laptops at 800 and below, where the browser's own chrome has
   already taken a third of the glass. The map yields first, because it is
   vector and survives scaling; the words do not yield at all. */
@media (min-width:60rem) and (max-height:52rem){
  .sec h1{font-size:var(--fs-36);margin-bottom:.2rem}
  /* Only here does the map scale, and only to about 90% — far enough to bring
     the explanation into view, not far enough to take the labels under 11px.
     Below that it stops being a fit and starts being an unreadable diagram
     making room for the text about it. */
  .opmap-scroll .opmap{
    min-width:0;height:16rem;width:auto;max-width:100%;margin-inline:auto;
  }
  .opmap-fig{margin-top:1.1rem}
  .md-bar{margin-top:.55rem;padding-bottom:.45rem}
  .md-lead{font-size:var(--fs-13)}
  html.js .md-stack[data-single] > .md[data-selected]{margin-top:.75rem}
  .md-title{font-size:var(--fs-18)}
  .md-what,.md-no-shot{font-size:var(--fs-15);line-height:1.5}
  .md-owned{font-size:var(--fs-13);margin-top:.55rem}
  .md .detail{margin-top:.7rem}
}


/* ── Journey screenshots ───────────────────────────────────────────────── */
.md-shots{width:min(100%,60rem);margin:1.15rem 0}
.journey-shot{width:100%;margin:0 0 1.25rem;break-inside:avoid}
.journey-shot img{
  display:block;width:auto;max-width:100%;height:auto;max-height:34rem;margin-inline:auto;border:1px solid var(--rule-2);border-radius:var(--r);
  background:var(--paper-2);
}
.journey-shot-caption{margin:.55rem 0 0;font-size:var(--fs-13);line-height:1.5;color:var(--ink-2)}
.journey-shot-view{display:block;width:max-content;max-width:100%;margin-top:.35rem;color:var(--teal-ink)}
@media print{
  .journey-shot{break-inside:avoid}
  .journey-shot-view{display:none}
}


/* Scoped delivery sequence: customer inputs and our work, before the detail. */
.delivery{margin:0 0 2.5rem}
.delivery > h3{font-size:var(--fs-22);margin:0 0 .75rem}
.delivery > p{max-width:68ch;color:var(--ink-2);margin:0 0 1.5rem}
.delivery-plan{list-style:none;counter-reset:delivery;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1.4rem;margin:0;padding:0}
.delivery-plan li{counter-increment:delivery;border-top:2px solid var(--teal);padding-top:.8rem;break-inside:avoid}
.delivery-plan li::before{content:counter(delivery,decimal-leading-zero);font-family:var(--mono);font-size:var(--fs-11);color:var(--teal-ink)}
.delivery-plan h4{font-size:var(--fs-18);line-height:1.3;margin:.55rem 0 .65rem}
.delivery-plan p{font-size:var(--fs-15);line-height:1.5;margin:0;color:var(--ink-2)}
#case-created .md-shots,#m-open .md-shots{max-width:30rem}

/* Slice 15 — implementation guidance. The primary reading path stays the five-stage
   plan and the four-part explainer; stage detail and the FAQs are disclosures so the
   page does not grow a second wall of prose. .prep and .parts reuse .defs rows, so the
   only new type here is the disclosure furniture. */
.prep,.parts{margin:0 0 2.5rem;max-width:76rem}
.prep > h3,.parts > h3{font-size:var(--fs-22);margin:0 0 .75rem}
.prep > p,.parts > p{max-width:68ch;color:var(--ink-2);margin:0 0 1.5rem}
.prep-note,.parts-example{
  margin:1.5rem 0 0;max-width:68ch;font-size:var(--fs-15);line-height:1.55;color:var(--ink-3);
  border-left:2px solid var(--rule-2);padding-left:1.25rem;
}

.stage-detail{margin:1.75rem 0 0;border-top:1px solid var(--rule);max-width:76rem}
.stage-detail > summary{
  padding:1rem 0;cursor:pointer;list-style:none;
  font-size:var(--fs-18);font-variation-settings:"wght" 620;color:var(--teal-ink);
  display:flex;align-items:center;gap:.6rem;
}
.stage-detail > summary::-webkit-details-marker{display:none}
.stage-detail > summary::marker{content:""}
.stage-detail > summary::before{
  content:"";flex:none;width:.55rem;height:.55rem;
  border-right:2px solid var(--rule-3);border-bottom:2px solid var(--rule-3);
  transform:rotate(-45deg);transition:transform 180ms ease,border-color 180ms ease;
}
.stage-detail[open] > summary::before{transform:rotate(45deg);border-color:var(--teal)}
.stage-detail > summary:focus-visible{outline:2px solid var(--teal-ink);outline-offset:2px;border-radius:4px}
.stage-asks{list-style:none;counter-reset:ask;margin:0 0 1.5rem;padding:0}
.stage-asks li{
  counter-increment:ask;display:grid;grid-template-columns:2.4rem minmax(0,1fr);
  column-gap:1rem;padding:1.1rem 0;border-top:1px solid var(--rule);
}
.stage-asks li::before{
  content:counter(ask,decimal-leading-zero);
  font-family:var(--mono);font-size:var(--fs-11);color:var(--ink-3);padding-top:.3rem;
}
.stage-asks h4{grid-column:2;margin:0 0 .4rem;font-size:var(--fs-18);line-height:1.3}
.stage-asks p{grid-column:2;margin:0;font-size:var(--fs-15);line-height:1.55;color:var(--ink-2);max-width:62ch}
.stage-asks p + p{margin-top:.35rem}
.sa-l{
  font-family:var(--sans);font-size:var(--fs-13);letter-spacing:.04em;text-transform:uppercase;
  color:var(--ink-3);margin-right:.5rem;
}

.faqs{margin:3rem 0 0;max-width:76rem}
.faqs > h3{font-size:var(--fs-22);margin:0 0 .75rem}
.faqs > p{max-width:68ch;color:var(--ink-2);margin:0 0 1.5rem}
.faq-list{border-top:1px solid var(--rule-2)}
.faq{border-bottom:1px solid var(--rule)}
.faq > summary{
  display:grid;grid-template-columns:minmax(0,1fr) 1.6rem;gap:1rem;align-items:start;
  padding:1.15rem 0;cursor:pointer;list-style:none;
  font-size:var(--fs-18);line-height:1.35;font-variation-settings:"wght" 600;color:var(--ink);
  transition:background 140ms ease;
}
.faq > summary::-webkit-details-marker{display:none}
.faq > summary::marker{content:""}
.faq > summary:hover{background:var(--paper-2)}
.faq > summary:focus-visible{outline:2px solid var(--teal-ink);outline-offset:2px;border-radius:4px}
.faq > summary::after{
  content:"";grid-column:2;justify-self:end;margin-top:.45rem;
  width:.58rem;height:.58rem;border-right:2px solid var(--rule-3);border-bottom:2px solid var(--rule-3);
  transform:rotate(45deg);transition:transform 180ms ease,border-color 180ms ease;
}
.faq[open] > summary::after{transform:rotate(-135deg);border-color:var(--teal)}
.faq[open] > summary{color:var(--teal-ink)}
.faq-body{padding:0 0 1.6rem}
.faq-body p{max-width:68ch;font-size:var(--fs-18);line-height:1.6;color:var(--ink-2);margin:0 0 .8rem}
.faq-body p:last-child{margin-bottom:0}

@media (max-width:600px){
  .stage-asks li{grid-template-columns:1fr}
  .stage-asks li::before{display:none}
  .stage-asks h4,.stage-asks p{grid-column:1}
  .sa-l{display:block;margin:0 0 .15rem}
}
@media print{
  .stage-detail,.faq{border-color:var(--rule)}
  .stage-detail > summary::before,.faq > summary::after{display:none}
  .stage-detail > summary,.faq > summary{background:none!important;break-after:avoid}
}

@media (max-width:1000px){.delivery-plan{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.delivery-plan{grid-template-columns:1fr;gap:1.25rem}}
@media print{.delivery-plan{grid-template-columns:repeat(2,minmax(0,1fr))}}




/* Slice 16: the timeline selects; the screen carries the explanation.
   Only activate the side-by-side layout once its controls are bound. */
.journey-timeline{display:none}
.md-placeholder{padding:.8rem .9rem;background:var(--white-2);border:1px solid var(--rule);color:var(--ink-2)}
@media screen{
  [data-walkthrough].opmap-fig{display:flex;flex-direction:column;gap:0}
  [data-walkthrough] .opmap-title{order:0}
  [data-walkthrough] .mapdetail{order:1;display:grid;grid-template-columns:minmax(10rem,13rem) minmax(0,1fr);column-gap:2.5rem;align-items:start;margin-top:.6rem}
  [data-walkthrough] .map-state{order:2;display:block!important;align-self:flex-start;margin:1.2rem 0 .8rem;min-height:44px}
  [data-walkthrough] .opmap-scroll{order:3;width:100%}
  html.js [data-walkthrough]:not([data-map-expanded]) .opmap-scroll{display:none}
  [data-walkthrough] .md-bar{grid-column:1 / -1;grid-row:2;border:0;padding:0;margin:1rem 0 0}
  html.js [data-walkthrough]:not([data-map-expanded]) .md-bar{display:none}
  [data-walkthrough] .md-all{display:none}
  [data-walkthrough] .md-stack{grid-column:2;grid-row:1;min-width:0;margin:0!important;gap:0}
  html.js [data-walkthrough] .md-stack[data-single] > .md:not([data-selected]){display:none}
  html.js [data-walkthrough] .md-stack[data-single] > .md[data-selected]{display:flex;flex-direction:column;margin:0;border:0;padding:0}
  [data-walkthrough] .md{max-width:none;animation:none}
  [data-walkthrough] .md-shots{order:-1;width:100%;max-width:none!important;margin:0 0 1.25rem}
  [data-walkthrough] .journey-shot{margin:0}
  [data-walkthrough] .journey-shot img{aspect-ratio:8 / 5;object-fit:contain;border-radius:4px;background:var(--white)}
  [data-walkthrough] .journey-shot-caption{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;font-size:var(--fs-13);line-height:1.4}
  [data-walkthrough] .journey-shot-view{flex-shrink:0;display:inline;margin:0}
  [data-walkthrough] .md-no-shot,[data-walkthrough] .md-placeholder{order:-1;aspect-ratio:8 / 5;box-sizing:border-box;margin:0 0 1.25rem;display:flex;align-items:center;justify-content:center;text-align:center;padding:clamp(1.25rem,5vw,5rem);font-size:var(--fs-18);line-height:1.6;border:1px solid var(--rule);border-radius:4px;background:var(--white-2)}
  [data-walkthrough] .md-title{font-size:var(--fs-22);line-height:1.35;margin:0 0 .45rem;max-width:48rem}
  [data-walkthrough] .md-what{font-size:var(--fs-18);line-height:1.55;max-width:48rem;margin:0}
  [data-walkthrough] .md-what .meta-label{display:none}
  [data-walkthrough] .md .detail{margin-top:.85rem}
  [data-walkthrough] .md-owned{margin:0 0 1rem;font-size:var(--fs-18)}
  [data-walkthrough] .journey-timeline{display:block;grid-column:1;grid-row:1;padding-top:.1rem}
  .journey-timeline ol{list-style:none;padding:0;margin:0;position:relative}
  .journey-timeline li{position:relative;margin:0;padding:0}
  .journey-timeline li:not(:last-child)::after{content:"";position:absolute;left:1rem;top:2.2rem;bottom:-.6rem;width:1px;background:var(--rule-2);pointer-events:none}
  .jt-step{position:relative;z-index:1;display:flex;align-items:center;gap:.7rem;min-height:3.7rem;padding:.4rem .4rem .4rem 0;color:var(--ink-2);font-size:var(--fs-15);line-height:1.35;text-decoration:none;border-radius:3px}
  .jt-number{flex-shrink:0;width:2rem;height:2rem;display:grid;place-items:center;background:var(--paper);border:1px solid var(--rule-2);border-radius:50%;font-family:var(--mono);font-size:var(--fs-11);color:var(--ink-2)}
  .jt-step[aria-current="step"]{color:var(--teal-ink);font-weight:600}
  .jt-step[aria-current="step"] .jt-number{background:var(--teal);border-color:var(--teal);color:var(--ink)}
  .jt-step:hover{color:var(--teal-ink)}
  .jt-step:focus-visible,.jt-paging button:focus-visible,.jt-mobile select:focus-visible{outline:2px solid var(--teal-ink);outline-offset:3px}
  .jt-context{font-size:var(--fs-13);line-height:1.5;color:var(--ink-2);margin:1.2rem 0 0}
  .jt-mobile{display:none}
  .jt-paging{display:flex;align-items:center;gap:.7rem;margin-top:1rem}
  .jt-paging button{width:2.75rem;height:2.75rem;border:1px solid var(--rule-2);border-radius:3px;background:var(--white);color:var(--teal-ink);font:inherit;font-size:var(--fs-22);cursor:pointer}
  .jt-paging button:disabled{opacity:.35;cursor:default}
  .jt-position{font-size:var(--fs-11);color:var(--ink-2);font-family:var(--mono)}
}
@media screen and (max-width:720px){
  [data-walkthrough] .mapdetail{display:block}
  [data-walkthrough] .journey-timeline{display:flex;align-items:center;gap:.65rem;flex-wrap:wrap;margin-bottom:1rem}
  .journey-timeline ol{display:none}
  .jt-mobile{display:flex;align-items:center;gap:.5rem;flex:1;min-width:0}
  .jt-mobile label{font-size:var(--fs-13);color:var(--ink-2)}
  .jt-mobile select{font:inherit;font-size:var(--fs-15);background:var(--white);color:var(--ink);border:1px solid var(--rule-2);border-radius:3px;min-height:44px;width:100%;min-width:0;padding:.5rem .4rem}
  .jt-paging{margin:0;gap:.35rem}
  .jt-position{display:none}
  .jt-context{order:3;flex-basis:100%;margin:0;font-size:var(--fs-13)}
  [data-walkthrough] .journey-shot-caption{display:block}
  [data-walkthrough] .journey-shot-view{display:inline-block;margin-left:.4rem}
  [data-walkthrough] .md-title{font-size:var(--fs-18)}
  [data-walkthrough] .md-no-shot,[data-walkthrough] .md-placeholder{font-size:var(--fs-18);padding:1.2rem}
}

/* Scott's compact walkthrough refinement: one route bar, full-height timeline,
   actual page context at its original aspect ratio. */
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.route-intro{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:2rem;row-gap:.65rem}
.route-intro .route-chooser,.route-intro .routes{margin:0}
.route-intro .rt-flow{font-size:var(--fs-13);line-height:var(--lh-small);max-width:none}
.brief-hero .opmap-fig{margin:1.1rem 0 0}
@media screen{
  [data-walkthrough] .mapdetail{grid-template-columns:15rem minmax(0,1fr);column-gap:2rem;align-items:stretch;margin-top:0}
  [data-walkthrough] .journey-timeline{display:flex;flex-direction:column;align-self:stretch;padding:0}
  .journey-timeline ol{display:flex;flex-direction:column;flex:1}
  .journey-timeline li{flex:1;min-height:4.8rem}
  .jt-step{align-items:flex-start;height:100%;box-sizing:border-box;padding:.5rem .35rem .8rem 0}
  .jt-number{margin-top:.1rem}
  .jt-copy{padding-top:.1rem}
  .jt-note{display:block;margin-top:.3rem;font-weight:400;font-size:var(--fs-13);line-height:1.45;color:var(--ink-2)}
  .journey-timeline li:not(:last-child)::after{top:2.6rem;bottom:-.6rem}
  .jt-context{margin-top:.6rem}
  [data-walkthrough] .journey-shot img{aspect-ratio:auto}
  [data-walkthrough] .route-status{order:2;max-width:none;margin:.8rem 0 0 calc(15rem + 2rem);padding:0;border:0;font-size:var(--fs-13);line-height:1.45}
  [data-walkthrough] .map-state{order:3;margin:.6rem 0 0 calc(15rem + 2rem);min-height:32px}
  [data-walkthrough] .opmap-scroll{order:4;margin-top:.6rem}
}
@media screen and (min-width:1000px){.route-intro .rt-flow{white-space:nowrap}}
@media screen and (max-width:999px){
  .route-intro{column-gap:1.2rem}
  [data-walkthrough] .mapdetail{grid-template-columns:12rem minmax(0,1fr);column-gap:1.5rem}
  [data-walkthrough] .route-status,[data-walkthrough] .map-state{margin-left:13.5rem}
}
@media screen and (max-width:720px){
  .route-intro{grid-template-columns:minmax(0,1fr)}
  .route-intro .rt-flow{font-size:var(--fs-13);min-height:2.8em}
  .brief-hero .opmap-fig{margin-top:.9rem}
  [data-walkthrough] .mapdetail{display:block}
  [data-walkthrough] .journey-timeline{flex-direction:row}
  .journey-timeline ol{display:none}
  [data-walkthrough] .route-status,[data-walkthrough] .map-state{margin-left:0}
}
/* Reserve the tallest panel so selecting a step never shifts the frame or rail. */
@media screen{
  html.js [data-walkthrough] .md-stack[data-single]{display:grid;align-items:start}
  html.js [data-walkthrough] .md-stack[data-single] > .md{
    grid-area:1 / 1;min-width:0;display:flex;flex-direction:column;
    margin:0;border:0;padding:0;visibility:hidden;pointer-events:none;
  }
  html.js [data-walkthrough] .md-stack[data-single] > .md:not([data-selected]){display:flex}
  html.js [data-walkthrough] .md-stack[data-single] > .md[data-selected]{visibility:visible;pointer-events:auto}
  .jt-step{font-weight:600}
}
/* One viewing frame across every paused step; source proportions stay intact. */
@media screen{
  [data-walkthrough] .journey-shot-frame{
    position:relative;width:100%;aspect-ratio:16 / 9;max-height:clamp(15rem,calc(100svh - 20rem),34rem);
    overflow:hidden;box-sizing:border-box;border:1px solid var(--rule-2);
    border-radius:4px;background:var(--white);
  }
  [data-walkthrough] .journey-shot-frame img{
    position:absolute;inset:0;display:block;width:100%;height:100%;
    max-width:none;max-height:none;margin:0;border:0;border-radius:0;
    object-fit:contain;object-position:center top;
  }
  [data-walkthrough] .journey-shot-caption{min-height:2.8em}
  [data-walkthrough] .journey-shot-source{white-space:nowrap}
}
@media screen and (min-width:721px) and (max-width:1199px){
  [data-walkthrough] .journey-shot-caption{min-height:5.6em}
  [data-walkthrough] .md-title{min-height:2.7em}
}

@media screen and (max-width:720px){
  [data-walkthrough] .journey-shot-caption{min-height:4.2em}
  [data-walkthrough] .md-title{min-height:2.7em}
}

/* Slice 18: one readable implementation table; route-specific preparation. */
.implementation-table{width:100%;border-collapse:collapse;table-layout:fixed;font-size:var(--fs-18);line-height:1.55;margin:1.5rem 0 2.5rem}
.implementation-table th,.implementation-table td{text-align:left;vertical-align:top;border-bottom:1px solid var(--rule);padding:1.1rem 1.2rem 1.1rem 0;overflow-wrap:break-word}
.implementation-table thead th{font-size:var(--fs-13);color:var(--ink-3);border-top:2px solid var(--teal);font-weight:600}
.implementation-table th:first-child{width:17%}
.implementation-table tbody th{color:var(--teal-ink);font-weight:600}
.setup{margin:0 0 2.5rem}
.setup h3,.reference-heading{font-size:var(--fs-22);margin:0 0 1rem}
.setup p{font-size:var(--fs-18);line-height:1.6;max-width:75ch;color:var(--ink-2)}
.handover-options{display:grid;grid-template-columns:1fr 1fr;gap:2rem;margin-bottom:1rem}
.handover-options>div{border-top:2px solid var(--teal);padding-top:1rem}
.handover-options h4{font-size:var(--fs-18);margin:0 0 .5rem}
.handover-options p{margin:0}
.reference-heading{margin-top:3rem}
.dependencies{padding-left:1.2rem;max-width:70ch}
.dependencies li{margin:.6rem 0}
@media(max-width:720px){
 .implementation-table{display:block}
 .implementation-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
 .implementation-table tbody,.implementation-table tr{display:block}
 .implementation-table tr{border-top:2px solid var(--teal);padding:.8rem 0;margin-bottom:1.3rem}
 .implementation-table th,.implementation-table td{display:block;width:auto!important;border:0;padding:.4rem 0}
 .implementation-table tbody th{font-size:var(--fs-18);margin-bottom:.35rem}
 .implementation-table td::before{content:attr(data-label);display:block;color:var(--ink-3);font-size:var(--fs-13);font-weight:600}
 .handover-options{grid-template-columns:1fr;gap:1.2rem}
}
@media print{.implementation-table tr{break-inside:avoid}.handover-options{grid-template-columns:1fr 1fr}}

/* Salesforce admin guide: numbered stages, one accountable owner per check. */
.readiness-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;margin-bottom:1rem}
.readiness-heading h2{margin-bottom:0}
.readiness-controls{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:.5rem;max-width:34rem}
.readiness-controls[hidden]{display:none}
.readiness-button{appearance:none;font:inherit;font-size:var(--fs-13);font-weight:500;cursor:pointer;border:1px solid var(--ink);border-radius:999px;padding:.55rem 1.1rem;min-height:44px}
.readiness-toggle{background:var(--white);color:var(--ink)}
.readiness-copy{background:var(--ink);color:var(--paper)}
.readiness-button:hover{opacity:.85}
.readiness-button:focus-visible{outline:2px solid var(--teal-ink);outline-offset:3px}
.readiness-copy-status{flex-basis:100%;font-size:var(--fs-13);line-height:var(--lh-small);color:var(--teal-ink);text-align:right;min-height:1.45em}
.setup .readiness-lead{margin:0 0 1rem;max-width:78ch}
.readiness-contents{display:flex;flex-wrap:wrap;gap:.35rem 1.1rem;margin:0 0 1.25rem;padding:.8rem 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.readiness-contents[hidden]{display:none}
.readiness-contents a{display:inline-flex;align-items:baseline;gap:.4rem;font-size:var(--fs-13);line-height:var(--lh-small)}
.readiness-contents-count{color:var(--ink-3);white-space:nowrap}
.readiness-group{border-top:1px solid var(--rule);padding:.65rem 0}
.readiness-group:last-child{border-bottom:1px solid var(--rule)}
.readiness-group>summary{display:flex;justify-content:space-between;align-items:center;gap:1rem;min-height:44px;font-size:var(--fs-18);font-weight:600;cursor:pointer;line-height:1.5;padding:.3rem 0;color:var(--ink)}
.readiness-chevron{flex:none;display:inline-grid;place-items:center;width:1.75rem;height:1.75rem;border-radius:999px;background:var(--paper);color:var(--ink)}
.readiness-chevron::before{content:"";width:.45rem;height:.45rem;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateX(-1px) rotate(-45deg);transition:transform .15s}
.readiness-group[open] .readiness-chevron::before{transform:translateY(-2px) rotate(45deg)}
.readiness-group>summary:hover .readiness-chevron{background:var(--paper-2)}
.readiness-stage-title{flex:1;min-width:0;margin:0;font:inherit;letter-spacing:inherit;color:inherit}
.readiness-count{flex:none;font-size:var(--fs-13);font-weight:400;color:var(--ink-3);margin-left:auto;text-align:right;white-space:nowrap}
.readiness-group>summary:focus-visible{outline:2px solid var(--teal-ink);outline-offset:4px}
.readiness-body{padding:.4rem 0 1rem;max-width:80ch}
.readiness-items{list-style:none;padding:0;margin:1rem 0 0}
.setup .readiness-subhead{margin:1.4rem 0 .2rem;padding-top:.8rem;border-top:2px solid var(--rule-2);font-size:var(--fs-15);line-height:var(--lh-heading);font-weight:600;color:var(--teal-ink)}
.readiness-items>li{display:grid;grid-template-columns:2.5rem minmax(0,1fr);column-gap:.8rem;padding:.8rem 0 .9rem;border-bottom:1px solid var(--rule);break-inside:avoid}
.readiness-items>li:last-child{border-bottom:0}
.readiness-no{grid-column:1;grid-row:1;font-family:var(--mono);font-size:var(--fs-11);line-height:1.8;color:var(--ink-3)}
.readiness-title-line{grid-column:2;display:flex;align-items:baseline;flex-wrap:wrap;gap:.45rem .75rem}
.readiness-items h4{flex:1 1 18rem;font:inherit;font-size:var(--fs-18);font-weight:600;color:var(--ink);margin:0}
.setup .readiness-owner{display:inline-flex;align-items:center;flex:none;font-size:var(--fs-13);line-height:var(--lh-small);color:var(--teal-ink);border:1px solid var(--rule-2);border-radius:999px;background:var(--paper);padding:.12rem .5rem;white-space:nowrap}
.readiness-items p,.readiness-check-detail{grid-column:2;margin:.3rem 0;overflow-wrap:anywhere}
.readiness-check-detail{margin-top:.2rem}
/* Slice 53: "Sources and details" was a 20px-high target; the padding makes it 44px without
   moving the text (the detail's top margin shrinks by the same amount). */
.readiness-check-detail>summary{cursor:pointer;color:var(--teal-ink);font-size:var(--fs-13);padding:.75rem 0}
.readiness-check-detail>p{margin-top:.6rem}
@media(max-width:720px){
 .readiness-heading{display:block}
 .readiness-controls{justify-content:flex-start;margin-top:.9rem;max-width:none}
 .readiness-copy-status{text-align:left}
 .readiness-contents{display:grid;grid-template-columns:1fr;gap:.45rem}
 .readiness-contents a{justify-content:space-between;gap:1rem}
 .readiness-body{padding-top:0}
 .readiness-items{margin-top:.25rem}
 .readiness-items>li{padding-top:.5rem}
}
@media print{
 .readiness-group>.readiness-body{display:block!important}
 .readiness-group{break-inside:auto}
 .readiness-items>li{break-inside:avoid}
 .readiness-group>summary{list-style-type:none}
 .readiness-group>summary::-webkit-details-marker{display:none}
 .readiness-group>summary::marker{content:""}
 .readiness-chevron{display:none}
}

/* Credits remain visible with the screenshot, including print. */
.journey-shot-source{color:var(--teal-ink);flex-shrink:0}
@media screen and (min-width:721px){
  [data-walkthrough] .journey-shot-caption > span{flex:1}
}
@media screen and (max-width:720px){.journey-shot-source{margin-left:.4rem}}

/* Storyboards share the same frame; real interfaces stay in optional detail. */
.journey-anchor{display:block;height:0}
.journey-reference{margin:1.25rem 0 0;padding-top:1rem;border-top:1px solid var(--rule)}
.journey-reference > a{display:inline-block;color:var(--teal-ink);margin-bottom:.75rem}
.journey-reference img{display:block;max-width:100%;width:auto;height:auto;max-height:30rem;object-fit:contain}
.journey-reference figcaption{font-size:var(--fs-13);margin-top:.5rem;color:var(--ink-2)}
@media print{.journey-reference{break-inside:avoid}.journey-reference img{max-height:18rem}}

@media screen and (max-width:720px){
  [data-walkthrough] .journey-shot-frame{aspect-ratio:10 / 11;max-height:none}
}

/* Product screens occupy one stable stage, with a short annotation outside the UI. */
.journey-shot-note{margin:0;padding:.65rem 1rem;font-size:var(--fs-15);line-height:1.35;color:var(--teal-ink);background:#f0f5f2;border-top:1px solid var(--rule-2);text-align:center}
.journey-shot-excerpt{display:none}
.journey-shot-excerpt-qualifier{display:none}
@media screen{
 [data-walkthrough] .journey-shot-frame{display:flex;flex-direction:column}
 [data-walkthrough] .journey-shot-media{position:relative;flex:1;min-height:0;display:flex;justify-content:center;align-items:center;overflow:hidden}
 [data-walkthrough] .journey-image-window{position:relative;width:100%;height:100%;overflow:hidden}
 [data-walkthrough] .journey-shot-frame img{object-position:center}
 [data-walkthrough] [data-presentation="email"] img{object-position:left top}
 [data-walkthrough] [data-presentation="messenger"] img{padding:14px;box-sizing:border-box}
 [data-walkthrough] [data-presentation="conversation"] .journey-image-window{height:100%;width:auto;aspect-ratio:425 / 440;max-width:100%}
 [data-walkthrough] [data-presentation="conversation"] img{width:376.470588%;height:auto;left:-251.764706%;top:-88.636364%;inset-inline-end:auto;bottom:auto;object-fit:fill}
 [data-walkthrough] .journey-shot-note{flex:none;min-height:3.5rem;box-sizing:border-box;display:flex;justify-content:center;align-items:center}
}
@media screen and (max-width:720px){
 [data-walkthrough] .journey-shot-caption{min-height:5.6em}
 [data-walkthrough] [data-presentation="email"] .journey-shot-media,
 [data-walkthrough] [data-presentation="reply"] .journey-shot-media{flex:0 0 40%}
 [data-walkthrough] .journey-shot-excerpt{display:block;flex:1;margin:0;padding:1rem;font-size:var(--fs-18);line-height:1.5;border:0;color:var(--ink)}
 .journey-shot-excerpt>span{display:block;font-size:var(--fs-13);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);margin-bottom:.5rem}
 [data-walkthrough] [data-presentation="case"] img,
 [data-walkthrough] [data-presentation="console"] img{object-fit:cover;object-position:left center}
}
@media print{
 .journey-shot-media,.journey-image-window{height:auto}
 .journey-shot-note{font-size:var(--fs-13)}
}
.journey-shot-frame .journey-shot-note{max-width:none;width:100%;margin:0;box-sizing:border-box}
.journey-shot-frame .journey-shot-excerpt{max-width:none}
@media screen and (min-width:721px){
 [data-walkthrough] [data-presentation="email"] .journey-shot-media{flex:0 0 50%}
 [data-walkthrough] [data-presentation="email"] .journey-shot-excerpt{display:block;flex:1;margin:0;padding:.8rem 1.4rem;font-size:var(--fs-18);line-height:1.45;border:0;color:var(--ink)}
 [data-walkthrough] [data-presentation="email"] .journey-shot-excerpt>span{display:block;font-size:var(--fs-13);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);margin-bottom:.3rem}
}
@media screen{
 [data-walkthrough] [data-presentation="reply"] .journey-image-window{height:100%;width:auto;aspect-ratio:1260 / 870;max-width:100%}
 [data-walkthrough] [data-presentation="reply"] img{width:120.793651%;height:auto;left:-10.31746%;top:-35.057471%;right:auto;bottom:auto;object-fit:fill}
}

/* Optional capability examples share the answer's stage and reserve their height. */
.journey-explore{display:none}
.journey-view{min-width:0}
@media screen{
  .journey-explore{min-height:3.5rem;box-sizing:border-box}
  html.js .journey-explore{display:flex;align-items:center;justify-content:space-between;gap:.75rem}
  .journey-explore>span{font-size:var(--fs-13);color:var(--ink-3)}
  .journey-explore [role="tablist"]{display:flex;gap:.2rem}
  .journey-explore button{font:inherit;font-size:var(--fs-13);padding:.5rem .7rem;min-height:36px;border:1px solid transparent;border-radius:4px;background:var(--white);color:var(--ink-2);cursor:pointer}
  .journey-explore button[aria-selected="true"]{background:var(--teal);color:var(--ink)}
  .journey-explore button:focus-visible{outline:2px solid var(--teal-ink);outline-offset:3px}
  html.js .journey-views{display:grid;align-items:start}
  html.js .journey-view{grid-area:1 / 1;visibility:hidden;pointer-events:none}
  html.js .journey-view[data-example-selected]{visibility:inherit;pointer-events:inherit}
  [data-walkthrough] [data-presentation="case"] img,
  [data-walkthrough] [data-presentation="console"] img{object-fit:contain;object-position:center}
}
@media screen and (max-width:720px){
  .journey-explore{min-height:5.5rem;flex-direction:column;align-items:flex-start!important;justify-content:center!important;gap:.25rem!important}
  .journey-explore button{min-height:40px;padding:.45rem .65rem}
  [data-walkthrough] [data-presentation="chat-answer"] .journey-shot-media{flex:0 0 43%}
  [data-walkthrough] [data-presentation="chat-answer"] .journey-shot-excerpt{font-size:var(--fs-15);padding:.6rem .8rem;line-height:1.35}
}
@media print{.journey-view+.journey-view{margin-top:1rem}.journey-explore{display:none}}
@media screen and (max-width:720px){
  [data-walkthrough] .journey-shot-frame{min-height:22rem}
  [data-walkthrough] .journey-shot-note{min-height:5.25rem}
  [data-walkthrough] [data-presentation="email"] .journey-shot-media,
  [data-walkthrough] [data-presentation="reply"] .journey-shot-media,
  [data-walkthrough] [data-presentation="chat-answer"] .journey-shot-media{flex:1;min-height:0}
  [data-walkthrough] .journey-shot-excerpt{flex:none}
}

/* A readable email scene, with the original capture available through View larger. */
.journey-email-card{box-sizing:border-box;width:min(88%,42rem);margin:auto;background:#fff;border:1px solid #deded8;border-radius:10px;box-shadow:none;text-align:left;overflow:hidden}
.journey-email-bar{display:flex;justify-content:space-between;padding:.75rem 1.5rem;background:#fafaf8;border-bottom:1px solid #e9e9e3;font-size:var(--fs-13);color:var(--ink-3)}
.journey-email-bar>span:first-child{font-weight:600;color:var(--ink-2)}
.journey-email-content{padding:1rem 1.5rem 1.25rem}
.journey-email-card .journey-email-to{margin:0;font-size:var(--fs-13);color:var(--ink-2)}
.journey-email-to>span{color:var(--ink-3);margin-right:.65rem}
.journey-email-card .journey-email-subject{margin:.8rem 0 1rem;font-size:var(--fs-22);line-height:1.25;font-weight:600;color:var(--ink)}
.journey-email-card .journey-email-body p{font-size:var(--fs-18);line-height:1.45;margin:0 0 .6rem;color:var(--ink);max-width:none}
.journey-email-card .journey-email-body p:last-child{margin-bottom:0}
[data-walkthrough] [data-presentation="email"].journey-shot-frame{background:#f2f3ef;border-color:#e3e4de;justify-content:center}
[data-presentation="email"]>.journey-shot-media,
[data-presentation="email"]>.journey-shot-excerpt,
[data-presentation="email"]>.journey-shot-note{display:none}
@media screen and (max-width:1199px){
 .journey-email-card{width:calc(100% - 24px);border-radius:7px;box-shadow:none}
 .journey-email-bar{padding:.55rem .85rem;font-size:var(--fs-13)}
 .journey-email-content{padding:.7rem .85rem .85rem}
 .journey-email-card .journey-email-to{font-size:var(--fs-13)}
 .journey-email-card .journey-email-subject{font-size:var(--fs-18);margin:.65rem 0;padding-bottom:.65rem}
 .journey-email-card .journey-email-body p{font-size:var(--fs-13);line-height:1.4;margin-bottom:.45rem}
}
@media print{.journey-email-card{width:100%;box-shadow:none;break-inside:avoid}}

@media screen{[data-walkthrough] .journey-shot-frame{min-height:22rem}}

/* Annotated scenes: keep the whole source visible and the timeline independent of selection. */
.journey-shot-visual{position:relative;min-width:0;min-height:0;display:flex;align-items:center;justify-content:center;overflow:hidden}
.journey-callouts{list-style:none;margin:0;padding:1.15rem 1.4rem;display:flex;gap:1.7rem;background:#fff;border-top:1px solid #dfe5df;text-align:left}
.journey-callouts li{flex:1;min-width:0;margin:0;padding:0;position:relative}
.journey-callouts li+li{border-left:1px solid #e2e8e2;padding-left:1.4rem}
.journey-callouts strong{display:block;font-size:var(--fs-15);line-height:1.3;font-weight:600;color:var(--teal-ink);margin:0 0 .4rem}
.journey-callouts li p{font-size:var(--fs-13);line-height:1.5;color:var(--ink-2);margin:0;max-width:40ch}
[data-annotated] .journey-shot-excerpt{display:none}
[data-presentation="email"] .journey-shot-media{display:none!important}
@media screen{
 [data-walkthrough] .journey-shot-frame[data-annotated]{display:grid;grid-template-rows:minmax(0,1fr) 7.5rem;height:clamp(30rem,46vw,37rem);min-height:30rem;max-height:none;aspect-ratio:auto;border:1px solid #dfe3db;border-radius:12px;background:linear-gradient(140deg,#f1f3ee,#fafaf6)}
 [data-walkthrough] [data-annotated] .journey-shot-visual{padding:1.15rem;box-sizing:border-box}
 [data-walkthrough] [data-annotated] .journey-shot-media{flex:1;height:100%;width:100%;min-height:0;display:flex}
 [data-walkthrough] [data-annotated] .journey-image-window{height:100%;width:100%;aspect-ratio:auto;max-width:100%}
 [data-walkthrough] [data-annotated] img{width:100%;height:100%;inset:0;object-fit:contain;object-position:center;max-height:100%}
 [data-walkthrough] [data-presentation="messenger"][data-annotated] .journey-image-window{max-width:15rem}
 [data-walkthrough] [data-presentation="messenger"] .journey-shot-visual{padding:1.3rem}
 [data-walkthrough] [data-presentation="diagram"] .journey-shot-visual{padding:.8rem}
 [data-walkthrough] [data-presentation="guidance"].journey-shot-frame{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);grid-template-rows:1fr}
 [data-presentation="guidance"] .journey-callouts{flex-direction:column;justify-content:center;border:0;background:transparent;gap:1.8rem;padding:2rem 2rem 2rem 0}
 [data-presentation="guidance"] .journey-callouts li{flex:0;padding:0;border:0}
 [data-presentation="guidance"] .journey-callouts strong{font-size:var(--fs-18)}
 [data-presentation="guidance"] .journey-callouts p{font-size:var(--fs-15)}
 [data-walkthrough] .journey-explore{min-height:2.8rem;justify-content:flex-end;gap:.4rem;margin-bottom:.45rem}
 .journey-explore>span{display:none}
 .journey-explore button{font-size:var(--fs-13);min-height:36px;padding:.4rem .65rem}
 [data-walkthrough] .journey-shot-caption{min-height:2.8em;font-size:var(--fs-13);padding-top:.65rem}
 [data-walkthrough] .md-title{min-height:2.7em}
 .journey-email-card{width:min(100%,37rem)}
 .journey-email-bar{padding:.5rem 1.2rem}
 .journey-email-content{padding:.8rem 1.2rem}
 .journey-email-card .journey-email-subject{font-size:var(--fs-18);margin:.6rem 0;padding-bottom:.6rem}
 .journey-email-card .journey-email-body p{font-size:var(--fs-13);line-height:1.4;margin-bottom:.45rem}
}
@media screen and (max-width:1000px){
 .journey-callouts{gap:.8rem;padding:1rem}
 .journey-callouts li+li{padding-left:.8rem}
 .journey-callouts strong{font-size:var(--fs-13)}
 .journey-callouts li p{font-size:var(--fs-13);line-height:1.4}
}
@media screen and (max-width:720px){
 [data-walkthrough] .journey-shot-frame[data-annotated]{height:32rem;min-height:32rem;grid-template-rows:19rem 13rem}
 [data-walkthrough] [data-annotated] .journey-shot-visual{padding:.7rem}
 .journey-callouts{flex-direction:column;gap:.7rem;padding:1rem 1.1rem;justify-content:center}
 .journey-callouts li{flex:0}
 .journey-callouts li+li{border:0;padding:0}
 .journey-callouts strong{font-size:var(--fs-13);margin-bottom:.15rem}
 .journey-callouts li p{font-size:var(--fs-13);max-width:none}
 [data-walkthrough] [data-presentation="guidance"].journey-shot-frame{grid-template-columns:1fr;grid-template-rows:19rem 13rem}
 [data-presentation="guidance"] .journey-callouts{border-top:1px solid #dfe5df;background:#fff;padding:1rem 1.1rem;gap:.8rem}
 [data-presentation="guidance"] .journey-callouts strong{font-size:var(--fs-13)}
 [data-presentation="guidance"] .journey-callouts p{font-size:var(--fs-13)}
 [data-walkthrough] .journey-explore{flex-direction:row;align-items:center!important;justify-content:flex-end!important;min-height:2.8rem}
 [data-walkthrough] .journey-shot-caption{min-height:4.2em}
}
@media print{
 .journey-shot-visual{display:block;overflow:visible}
 .journey-callouts{break-inside:avoid}
 .journey-shot-frame[data-annotated]{height:auto;overflow:visible}
 [data-presentation="email"] .journey-shot-excerpt{display:none}
}
/* The email card already contains the message; never repeat it beside the scene. */
[data-walkthrough] [data-annotated] .journey-shot-excerpt{display:none!important}
@media screen and (max-width:720px){
 [data-annotated] .journey-email-card{width:100%}
 [data-annotated] .journey-email-bar{padding:.4rem .75rem}
 [data-annotated] .journey-email-content{padding:.6rem .75rem}
 [data-annotated] .journey-email-subject{font-size:var(--fs-15);margin:.5rem 0;padding-bottom:.5rem}
 [data-annotated] .journey-email-body p{font-size:var(--fs-13);line-height:1.35;margin-bottom:.35rem}
}
@media screen and (min-width:721px) and (max-width:800px){
 [data-walkthrough] .journey-shot-frame[data-annotated]{grid-template-rows:minmax(0,1fr) 13rem}
 .journey-callouts{flex-direction:column;justify-content:center;gap:.65rem}
 .journey-callouts li{flex:0}
 .journey-callouts li+li{border:0;padding:0}
 .journey-callouts strong{margin-bottom:.15rem}
 .journey-callouts li p{max-width:none}
 [data-walkthrough] [data-presentation="guidance"].journey-shot-frame{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) 13rem}
 [data-presentation="guidance"] .journey-callouts{padding:1rem;border-top:1px solid #dfe5df;background:white;gap:.65rem}
 [data-presentation="guidance"] .journey-callouts strong{font-size:var(--fs-13)}
 [data-presentation="guidance"] .journey-callouts p{font-size:var(--fs-13)}
}

/* Compact gallery owns the complete reading area; no selected-step prose below it. */
.journey-summary{margin:0;padding:1.1rem 1.4rem;background:white;border-top:1px solid #dfe5df;font-size:var(--fs-15);line-height:1.5;color:var(--ink-2);max-width:none;box-sizing:border-box}
.journey-details-button,.journey-view-paging{display:none}
.journey-diagram{width:100%;max-width:35rem;text-align:center;color:var(--ink);margin:auto}
.journey-diagram-label{font-size:var(--fs-13);text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3);margin:0 0 .55rem}
.journey-diagram h4{font-size:var(--fs-22);font-weight:600;margin:0 0 1rem;line-height:1.3}
.journey-flow{display:flex;flex-direction:column;align-items:center}
.journey-flow-node{border:1px solid #cbdad3;border-radius:7px;padding:.65rem 1rem;background:white;color:var(--teal-ink);font-weight:600;font-size:var(--fs-15);min-width:14rem;max-width:100%;box-sizing:border-box}
.journey-flow-arrow{font-size:var(--fs-18);line-height:1.4;color:#7d998c}
.journey-flow-branches{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem;width:100%}
.journey-flow-branches p{font-size:var(--fs-13);margin:.15rem 0 .4rem}
.journey-flow-branches .journey-flow-node{min-width:0}
.journey-dialog{position:fixed;margin:0;padding:1.5rem;border:1px solid #dfe3db;border-radius:12px;box-sizing:border-box;overflow:auto;background:#fffdf8;color:var(--ink);max-width:none;max-height:none}
.journey-dialog::backdrop{background:#142d242c}
.journey-dialog h2{font-size:var(--fs-22);line-height:1.4;margin:0 5rem 1.5rem 0}
.journey-dialog p{font-size:var(--fs-15);line-height:1.6}
.journey-dialog-close{float:right;font:inherit;background:transparent;border:1px solid var(--rule-2);border-radius:5px;padding:.35rem .7rem;cursor:pointer;color:var(--teal-ink)}
.journey-dialog .inner{display:block;padding:0;border:0}
@media screen{
 html.js [data-walkthrough] .md-title{position:absolute;width:1px;height:1px;min-height:0;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
 html.js [data-walkthrough] .md-what,html.js [data-walkthrough] .md>.detail{display:none}
 /* Slice 25 review P1: the route status is the only polite route live region, so it stays in the
    accessibility tree — visually hidden, never display:none. */
 html.js [data-walkthrough] .route-status{position:absolute;width:1px;height:1px;min-height:0;padding:0;margin:-1px;border:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
 html.js [data-walkthrough] .map-state{display:none!important}
 html.js [data-walkthrough] .opmap-scroll{display:none}
 html.js [data-walkthrough] .journey-gallery{position:relative;height:clamp(26rem,calc(100svh - 13rem),38rem);border:1px solid #dfe3db;border-radius:12px;overflow:hidden;display:grid;grid-template-rows:3.4rem minmax(0,1fr);background:#f8f9f5;box-sizing:border-box}
 html.js [data-walkthrough] .journey-explore{min-height:0;margin:0;padding:0 1rem;justify-content:flex-start;align-items:center!important;border-bottom:1px solid #e1e6de;overflow-x:auto}
 html.js [data-walkthrough] .journey-explore [role="tablist"]{white-space:nowrap;gap:.2rem}
 html.js [data-walkthrough] .journey-explore button{font-size:var(--fs-13);min-height:36px;padding:.45rem .6rem}
 html.js [data-walkthrough] .journey-views{min-height:0;height:100%}
 html.js [data-walkthrough] .journey-view{min-height:0;height:100%}
 html.js [data-walkthrough] .journey-shot,html.js [data-walkthrough] .journey-explainer{margin:0;height:100%;display:grid;grid-template-rows:minmax(0,1fr) 3.2rem;min-height:0}
 html.js [data-walkthrough] .journey-shot-frame{height:100%;min-height:0;max-height:none;border:0;border-radius:0;aspect-ratio:auto;display:grid;grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) 7rem}
 html.js [data-walkthrough] .journey-shot-visual{padding:.9rem 3.1rem}
 html.js [data-walkthrough] .journey-summary{display:flex;align-items:center;padding:.8rem 1.25rem}
 html.js [data-walkthrough] .journey-shot-caption{min-height:0;height:100%;margin:0;padding:0 1.25rem;display:flex;align-items:center;justify-content:flex-start;gap:1rem;font-size:var(--fs-13);line-height:1.3;background:white;border-top:1px solid #edf0e9}
 html.js [data-walkthrough] .journey-shot-caption>span{display:none}
 html.js .journey-details-button{display:block;margin-left:auto;padding:.4rem 0;font:inherit;color:var(--teal-ink);background:var(--white);border:0;text-decoration:underline;cursor:pointer}
 html.js .journey-view-paging{display:block}
 .journey-view-paging button{position:absolute;top:40%;width:32px;height:40px;border:1px solid #ced8cf;border-radius:20px;background:#fff;color:var(--teal-ink);font-size:var(--fs-36);line-height:1;cursor:pointer;opacity:.75}
 .journey-view-paging button:hover,.journey-view-paging button:focus-visible{opacity:1;background:white}
 .journey-view-paging [data-view-direction="-1"]{left:8px}
 .journey-view-paging [data-view-direction="1"]{right:8px}
 html.js [data-walkthrough] .journey-explore{padding-right:6.5rem}
 html.js [data-walkthrough] .jt-context{font-size:var(--fs-13);line-height:1.4;margin:.6rem 0 0}
 html.js [data-walkthrough] .jt-paging{display:none}
 html.js [data-walkthrough] .journey-timeline li{min-height:4.3rem}
}
@media screen and (min-width:721px) and (max-width:1000px){
 html.js [data-walkthrough] .mapdetail{grid-template-columns:11rem minmax(0,1fr);column-gap:1.2rem}
 html.js [data-walkthrough] .journey-explore{padding:.3rem .6rem;align-items:flex-start!important}
 html.js [data-walkthrough] .journey-gallery{grid-template-rows:5.2rem minmax(0,1fr)}
 html.js [data-walkthrough] .journey-shot-frame{grid-template-rows:minmax(0,1fr) 9rem}
 html.js [data-walkthrough] .journey-summary{font-size:var(--fs-13)}
 html.js [data-walkthrough] .journey-shot-visual{padding:.65rem 2.7rem}
 .journey-diagram h4{font-size:var(--fs-18);margin-bottom:.6rem}
 .journey-flow-node{font-size:var(--fs-13);padding:.45rem .7rem;min-width:11rem}
}
@media screen and (max-width:720px){
 html.js [data-walkthrough] .journey-gallery{height:34rem;grid-template-rows:5.6rem minmax(0,1fr)}
 html.js [data-walkthrough] .journey-explore{padding:.5rem .5rem 2.5rem;align-items:flex-start!important;justify-content:flex-start!important}
 html.js [data-walkthrough] .journey-shot-frame{grid-template-rows:minmax(0,1fr) 9rem}
 html.js [data-walkthrough] .journey-shot-visual{padding:.7rem}
 html.js [data-walkthrough] .journey-summary{padding:.8rem 1rem;font-size:var(--fs-13)}
 html.js [data-walkthrough] .journey-shot-caption{padding:0 .8rem;font-size:var(--fs-13);gap:.8rem}
 html.js [data-walkthrough] .jt-paging{display:flex}
 html.js [data-walkthrough] .jt-context{display:none}
 .journey-view-paging button{top:3rem;height:32px;width:36px;border-radius:5px;font-size:var(--fs-22)}
 .journey-view-paging [data-view-direction="-1"]{left:auto;right:55px}
 .journey-view-paging [data-view-direction="1"]{right:10px}
 .journey-diagram h4{font-size:var(--fs-18);margin-bottom:.6rem}
 .journey-flow-node{font-size:var(--fs-13);padding:.4rem .65rem;min-width:11rem}
 .journey-flow-branches{gap:.5rem}
 .journey-flow-branches p{font-size:var(--fs-13)}
 .journey-flow-arrow{font-size:var(--fs-13)}
 .journey-diagram-label{font-size:var(--fs-13)}
}
@media print{.journey-dialog,.journey-details-button,.journey-view-paging{display:none!important}.journey-summary{font-size:var(--fs-15)}.journey-explainer{break-inside:avoid}}

@media screen{html.js [data-walkthrough] .md-shots{margin:0}}

@media screen and (max-width:720px){html.js [data-walkthrough] .journey-gallery{height:37rem}html.js [data-walkthrough] .journey-explore button{font-size:var(--fs-13);padding:.45rem .5rem}}
@media screen and (min-width:721px){html.js [data-walkthrough] .journey-gallery{min-height:34rem}}
@media screen and (min-width:721px) and (max-width:1000px){html.js [data-walkthrough] .journey-gallery{min-height:38rem}}

.jt-selected-title{display:none}
@media screen and (max-width:720px){html.js .jt-selected-title{display:flex;align-items:center;flex:0 0 100%;height:3rem;margin:0;font-size:var(--fs-18);font-weight:600;line-height:1.4}}

/* Image-led presentation: navigation belongs to the rail, media owns the stage. */
@media screen{
 html.js .journey{display:grid;grid-template-columns:minmax(0,1fr);--journey-rail:15rem;--journey-gap:2rem}
 html.js .journey>.wrap{grid-area:1/1;width:calc(100% - 4rem);max-width:none;padding-inline:0}
 html.js .journey>.route-intro{display:block;z-index:2;pointer-events:none;margin-top:0;align-self:start}
 html.js .route-intro .route-chooser,html.js .route-intro .rt-flow{width:var(--journey-rail);pointer-events:auto}
 html.js .route-intro .routes{display:flex;width:100%;box-sizing:border-box;padding:3px;gap:2px;border-color:#d9ddd4;border-radius:7px}
 html.js .route-intro .rt{flex:1;text-align:center;font-size:var(--fs-13);line-height:1.3;padding:.7rem .25rem;white-space:nowrap;border-radius:4px}
 html.js .route-intro .rt-flow{white-space:normal;font-size:var(--fs-13);line-height:1.5;margin:.7rem 0 0}
 html.js .brief-hero .opmap-fig{margin:0}
 html.js [data-walkthrough] .mapdetail{grid-template-columns:var(--journey-rail) minmax(0,1fr);column-gap:var(--journey-gap)}
 html.js [data-walkthrough] .journey-timeline{padding-top:calc(9rem + 52px);box-sizing:border-box;min-height:0}
 html.js [data-walkthrough] .jt-context{display:block;flex:0 0 9rem;box-sizing:border-box;margin:.75rem 0 0;font-size:var(--fs-13);line-height:1.5;max-width:none;color:var(--ink-2)}
 html.js [data-walkthrough] .journey-gallery{display:block;height:clamp(46rem,calc(100svh - 8rem),54rem);min-height:46rem;border:0;border-radius:10px;background:#f3f5f0}
 html.js [data-walkthrough] .journey-views,html.js [data-walkthrough] .journey-view,html.js [data-walkthrough] .journey-shot,html.js [data-walkthrough] .journey-explainer{height:100%;min-height:0}
 html.js [data-walkthrough] .journey-shot,html.js [data-walkthrough] .journey-explainer{display:block;position:relative}
 html.js [data-walkthrough] .journey-shot-frame{display:block;height:100%;min-height:0;background:transparent}
 html.js [data-walkthrough] .journey-shot-visual{height:100%;padding:3rem .75rem 2.75rem;box-sizing:border-box}
 html.js [data-walkthrough] [data-presentation="messenger"] .journey-image-window{max-width:100%;justify-content:center}
 html.js [data-walkthrough] .journey-summary{display:none}
 html.js [data-walkthrough] .journey-email-card{width:min(88%,45rem)}
 html.js [data-walkthrough] .journey-email-content{padding:1.5rem 2rem}
 html.js [data-walkthrough] .journey-email-card .journey-email-subject{font-size:var(--fs-22);margin:.8rem 0;padding-bottom:.8rem}
 html.js [data-walkthrough] .journey-email-card .journey-email-body p{font-size:var(--fs-18);line-height:1.55;margin-bottom:.7rem}
 html.js [data-walkthrough] .journey-explore{position:absolute;z-index:3;left:1rem;right:1rem;top:.45rem;height:2.25rem;min-height:0;padding:0;margin:0;border:0;background:none;overflow-x:auto;justify-content:center!important;align-items:center!important}
 html.js [data-walkthrough] .journey-explore [role="tablist"]{display:flex;gap:.3rem;white-space:nowrap}
 html.js [data-walkthrough] .journey-explore button{min-height:34px;padding:.25rem .65rem;font-size:var(--fs-13);font-weight:400;background:#f3f5f0;color:#5b655e;border:0;border-radius:20px;box-shadow:none}
 html.js [data-walkthrough] .journey-explore button[aria-selected="true"]{color:#075653;background:#fff;font-weight:600;box-shadow:none}
 html.js [data-walkthrough] .journey-shot-caption{position:absolute;bottom:.45rem;left:1rem;right:1rem;z-index:2;height:1.8rem;min-height:0;padding:0;margin:0;display:flex;border:0;background:transparent;gap:.8rem;font-size:var(--fs-13)}
 html.js [data-walkthrough] .journey-shot-caption a,html.js [data-walkthrough] .journey-details-button{padding:.35rem .2rem;border-radius:4px;background:#f3f5f0}
 html.js [data-walkthrough] .journey-view-paging button{position:absolute;z-index:4;top:50%;bottom:auto;transform:translateY(-50%);width:44px;height:56px;border:1px solid #ced8cf;border-radius:25px;background:#fff;box-shadow:none;color:#075653;font-size:var(--fs-36);opacity:0;transition:opacity .15s ease}
 html.js [data-walkthrough] .journey-view-paging [data-view-direction="-1"]{left:.7rem;right:auto}
 html.js [data-walkthrough] .journey-view-paging [data-view-direction="1"]{right:.7rem;left:auto}
 html.js [data-walkthrough] .md-shots:hover .journey-view-paging button,html.js [data-walkthrough] .md-shots:has(:focus-visible) .journey-view-paging button{opacity:.85}
 html.js [data-walkthrough] .journey-view-paging button:hover,html.js [data-walkthrough] .journey-view-paging button:focus-visible{opacity:1;background:white}
 .journey-explore button:focus-visible,.journey-view-paging button:focus-visible{outline:2px solid var(--teal-ink);outline-offset:2px}
}
@media screen and (min-width:721px) and (max-width:1000px){
 html.js .journey{--journey-rail:13rem;--journey-gap:1.2rem}
 html.js .journey>.wrap{width:calc(100% - 2.5rem)}
 html.js [data-walkthrough] .jt-context{flex-basis:10rem}
 html.js [data-walkthrough] .journey-explore{left:.4rem;right:.4rem}
 html.js [data-walkthrough] .journey-explore button{font-size:var(--fs-13);padding:.25rem .4rem}
}
@media screen and (max-width:720px){
 html.js .journey{display:block}
 html.js .journey>.wrap{width:calc(100% - 2.5rem)}
 html.js .journey>.route-intro{margin-bottom:1rem}
 html.js .route-intro .route-chooser,html.js .route-intro .rt-flow{width:100%}
 html.js .route-intro .rt-flow{min-height:0}
 html.js [data-walkthrough] .journey-timeline{padding:0;margin-bottom:.75rem}
 html.js [data-walkthrough] .jt-context{order:3;flex:0 0 100%;height:auto;min-height:0;margin:.25rem 0 .75rem;font-size:var(--fs-13);line-height:1.45}
 html.js [data-walkthrough] .journey-gallery{height:34rem;min-height:34rem}
 html.js [data-walkthrough] .journey-email-card{width:100%}
 html.js [data-walkthrough] .journey-email-content{padding:.8rem}
 html.js [data-walkthrough] .journey-email-card .journey-email-subject{font-size:var(--fs-18)}
 html.js [data-walkthrough] .journey-email-card .journey-email-body p{font-size:var(--fs-13);line-height:1.45;margin-bottom:.5rem}
 html.js [data-walkthrough] .journey-shot-visual{padding:2.8rem .5rem 2.5rem}
 html.js [data-walkthrough] .journey-explore{left:.3rem;right:.3rem;justify-content:center!important}
 html.js [data-walkthrough] .journey-explore button{font-size:var(--fs-13);padding:.25rem .45rem}
 html.js [data-walkthrough] .journey-shot-caption{left:.6rem;right:.6rem;font-size:var(--fs-13);gap:.6rem}
 html.js [data-walkthrough] .journey-view-paging button{width:36px;height:44px;font-size:var(--fs-36);opacity:.65}
}
@media (hover:none),(pointer:coarse){html.js [data-walkthrough] .journey-view-paging button{opacity:.7}}
@media (prefers-reduced-motion:reduce){html.js [data-walkthrough] .journey-view-paging button{transition:none}}

/* Final on purpose: later component rules must never make screen-only controls
   reappear in print. The footer remains part of the printed brief. */
@media print{
  .pnav,.opts,.copy,.md-all,.map-state,.brief-copy-control,.readiness-controls,.qlist,.more,.both-strip,.journey-shot-view{display:none}
  .brief-hero{padding:1.5rem 0 1rem}
  .foot{display:block}
}

/* Trim only the publisher asset's transparent gutters, preserving every conversation pixel. */
@media screen{
 html.js [data-walkthrough] [data-presentation="chat-answer"] .journey-shot-media{container-type:size}
 html.js [data-walkthrough] [data-presentation="chat-answer"] .journey-image-window{width:min(100%,74.908cqh);height:auto;aspect-ratio:1018 / 1359;max-height:100%;flex:none}
 html.js [data-walkthrough] [data-presentation="chat-answer"] img{width:196.4637%;height:110.1545%;max-width:none;max-height:none;left:-48.2318%;top:-10.1545%;right:auto;bottom:auto;object-fit:fill}
}
@media screen and (max-width:720px){
 html.js [data-walkthrough] .journey-view-paging button{top:3.5rem;transform:none}
}

/* Native captures retain their original composition inside the common stage. */
.journey-shot-frame[data-presentation="native"] .journey-shot-media,
.journey-shot-frame[data-presentation="native"] .journey-image-window { width:100%; height:100%; padding:0; background:transparent; }
html.js [data-walkthrough] [data-presentation="native"] .journey-image-window { display:flex; justify-content:center; align-items:center; }
html.js [data-walkthrough] [data-presentation="native"] .journey-image-window img { position:static; width:auto; height:auto; max-width:100%; max-height:100%; object-fit:contain; object-position:center; transform:none; }
@media (min-width:721px) and (max-height:650px) {
  html.js [data-walkthrough] .journey-gallery { height:38rem; min-height:38rem; }
}
/* Keep responsive picture sources inside the same native screenshot frame. */
html.js [data-walkthrough] [data-presentation="native"] .journey-image-window picture {
  display:flex; align-items:center; justify-content:center; width:100%; height:100%;
}

/* Compose original screenshots; the product UI remains unchanged. */
html.js [data-walkthrough] .journey-image-window:has(.journey-composition) { overflow:visible; container-type:size; }
.journey-composition { position:relative; width:min(100%,173cqh); max-width:1380px; aspect-ratio:1280 / 740; flex:none; container-type:inline-size; }
.journey-procedure-pane { position:absolute; left:2%; top:6%; width:69%; padding:2.2% 2%; background:#fff; border:1px solid #dddcd7; border-radius:14px; box-shadow:none; }
.journey-composition-heading { display:flex; flex-direction:column; gap:.5cqw; margin:0 0 2cqw; }
.journey-composition-heading span,.journey-response-label { color:#53736c; font-size:var(--fs-13); font-weight:500; letter-spacing:.06em; text-transform:uppercase; }
.journey-composition-heading strong { color:#172923; font-size:var(--fs-22); line-height:1.3; font-weight:600; }
.journey-procedure-crop { position:relative; width:95%; aspect-ratio:780 / 500; overflow:hidden; }
.journey-procedure-crop img,
html.js [data-walkthrough] [data-presentation="native"] .journey-procedure-crop img { position:absolute; width:246.154%; height:auto; max-width:none; max-height:none; left:-87.179%; top:-73%; }
.journey-response-pane { position:absolute; right:2%; top:6%; width:28.125%; }
.journey-response-label { display:block; margin:0 0 1cqw .4cqw; }
.journey-response-pane img,
html.js [data-walkthrough] [data-presentation="native"] .journey-response-pane img { display:block; width:100%; height:auto; max-width:none; max-height:none; border-radius:18px; box-shadow:none; }
.journey-composition-disclosure { display:none; }
.journey-procedure-pane[hidden] { display:none; }
.journey-composition-disclosure:focus-visible { outline:2px solid var(--teal-ink); outline-offset:3px; }
.journey-composition-connector { position:absolute; left:65%; top:90%; color:#316f63; font-size:var(--fs-36); }
@media screen and (max-width:720px) {
 html.js [data-walkthrough] .journey-image-window:has(.journey-composition) { display:block; overflow-x:auto; overflow-y:hidden; padding-top:2rem; box-sizing:border-box; }
 .journey-composition { width:800px; height:100%; max-width:none; aspect-ratio:auto; }
 .journey-procedure-pane { top:3%; }
 .journey-response-pane { top:3%; width:27%; }
}

/* Pointer annotation over the actual native hover state. */
html.js [data-walkthrough] .journey-image-window:has(.journey-pointer-shot) { container-type:size; }
.journey-pointer-shot { position:relative; width:min(100%,149cqh); aspect-ratio:990 / 664; flex:none; overflow:hidden; border-radius:14px; box-shadow:none; }
html.js [data-walkthrough] [data-presentation="native"] .journey-pointer-shot img { display:block; width:100%; height:auto; max-height:none; }
.journey-cursor { position:absolute; left:64.65%; top:75.3%; width:24px; height:30px; filter:drop-shadow(0 1px 1px #0003); pointer-events:none; }
@media screen and (max-width:720px) {
 html.js [data-walkthrough] .journey-image-window:has(.journey-pointer-shot) { justify-content:flex-start; overflow-x:auto; overflow-y:hidden; }
 .journey-pointer-shot { width:640px; }
}
@media screen and (max-width:720px) {
 html.js [data-walkthrough] .journey-explore { justify-content:safe center!important; scrollbar-width:none; }
 html.js [data-walkthrough] .journey-explore [role="tablist"] { flex-shrink:0; }
}

@media screen and (max-width:720px) { html.js [data-walkthrough] .journey-explore::-webkit-scrollbar { display:none; } }

/* Slice 21: the bounded stage follows the media; its caption remains in flow below. */
.journey-view-label-mobile,.journey-swipe-hint,.journey-static-qualifier{display:none}
@media screen{
 html.js [data-walkthrough] .md-shots{--journey-stage-height:clamp(32rem,calc(100svh - 16rem),40rem);position:relative;margin:0;padding:0}
 html.js [data-walkthrough] .journey-gallery{position:relative;display:grid;grid-template-rows:minmax(0,1fr);height:var(--journey-stage-height);min-height:0;border:0;border-radius:10px;overflow:hidden;background:#f3f5f0;box-sizing:border-box}
 html.js [data-walkthrough] .journey-gallery[data-multiple-views]{grid-template-rows:auto minmax(0,1fr)}
 html.js [data-walkthrough] .journey-explore{position:static;z-index:3;width:100%;height:auto;min-height:2.75rem;padding:.3rem 4rem .3rem .75rem;margin:0;border:0;border-bottom:1px solid #e1e6de;background:none;overflow:visible;box-sizing:border-box;display:flex;justify-content:center!important;align-items:center!important}
 html.js [data-walkthrough] .journey-explore [role="tablist"]{display:flex;justify-content:center;gap:.3rem;white-space:normal}
 html.js [data-walkthrough] .journey-explore button{min-height:34px;padding:.25rem .65rem;font-size:var(--fs-13);font-weight:400;background:#f3f5f0;color:#5b655e;border:0;border-radius:20px;box-shadow:none}
 html.js [data-walkthrough] .journey-explore button[aria-selected="true"]{color:#075653;background:#fff;font-weight:600;box-shadow:none}
 html.js [data-walkthrough] .journey-views,html.js [data-walkthrough] .journey-view,html.js [data-walkthrough] .journey-shot,html.js [data-walkthrough] .journey-explainer{height:100%;min-height:0}
 html.js [data-walkthrough] .journey-views{display:grid;align-items:stretch}
 html.js [data-walkthrough] .journey-view{grid-area:1/1;visibility:hidden;pointer-events:none}
 html.js [data-walkthrough] .journey-view[data-example-selected]{visibility:inherit;pointer-events:inherit}
 html.js [data-walkthrough] .journey-shot,html.js [data-walkthrough] .journey-explainer{display:block;position:relative;margin:0}
 html.js [data-walkthrough] .journey-shot-frame{display:block;height:100%;min-height:0;max-height:none;border:0;border-radius:0;aspect-ratio:auto;background:transparent}
 html.js [data-walkthrough] .journey-shot-visual{height:100%;padding:.65rem .75rem;box-sizing:border-box}
 html.js [data-walkthrough] .journey-shot-media,html.js [data-walkthrough] .journey-image-window{width:100%;height:100%;min-height:0;padding:0;background:transparent}
 html.js [data-walkthrough] .journey-image-window{position:relative;display:flex;justify-content:center;align-items:center;overflow:hidden}
 html.js [data-walkthrough] .journey-image-window picture{display:flex;align-items:center;justify-content:center;width:100%;height:100%}
 html.js [data-walkthrough] .journey-shot-frame img{position:static;width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;object-position:center;transform:none}
 html.js [data-walkthrough] .journey-summary{display:none}
 html.js [data-walkthrough] .journey-diagram{width:100%;max-width:52rem;margin:auto;text-align:center}
 html.js [data-walkthrough] .journey-flow-node{font-size:var(--fs-18)}
 html.js [data-walkthrough] .journey-flow-branches{gap:2rem}
 html.js [data-walkthrough] .journey-captions{display:grid;align-items:stretch}
 html.js [data-walkthrough] .journey-shot-caption{position:static;width:100%;min-height:3.25rem;height:auto;padding:.6rem .75rem;margin:0;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:.5rem 1rem;box-sizing:border-box;border:0;border-top:1px solid #e1e6de;background:white;color:var(--ink-2);font-size:var(--fs-13);line-height:1.35}
 html.js [data-walkthrough] .journey-shot-caption{grid-area:1/1;visibility:hidden;pointer-events:none}
 html.js [data-walkthrough] .journey-shot-caption[data-example-selected]{visibility:inherit;pointer-events:inherit}
 html.js [data-walkthrough] .journey-shot-caption>.journey-shot-qualifier{display:block;min-width:0}
 html.js [data-walkthrough] .journey-shot-caption>.journey-shot-actions{display:flex;align-items:center;justify-content:flex-end;gap:.45rem;white-space:nowrap}
 html.js [data-walkthrough] .journey-shot-caption[data-record-caption]{display:none}
 html.js [data-walkthrough] .journey-shot-caption[data-record-caption]>.journey-shot-qualifier{display:none}
 html.js [data-walkthrough] .journey-captions:has(>[data-record-caption][data-example-selected])>.journey-shot-caption:not([data-example-selected]){display:none}
 html.js [data-walkthrough] .journey-shot-caption a,html.js [data-walkthrough] .journey-details-button{padding:.25rem .1rem;border-radius:4px;background:#fff;font:inherit;font-size:var(--fs-13);line-height:1.35}
 html.js [data-walkthrough] .journey-details-button{margin:0;border:0;color:var(--teal-ink);cursor:pointer;text-decoration:underline;text-underline-offset:.15em}
 html.js [data-walkthrough] .md-shots>.journey-view-paging{display:block}
 html.js [data-walkthrough] .journey-view-count{position:absolute;z-index:4;top:1.375rem;right:.75rem;transform:translateY(-50%);font-size:var(--fs-13);line-height:var(--lh-small);color:var(--ink-3);font-variant-numeric:tabular-nums}
 html.js [data-walkthrough] .journey-view-paging button{position:absolute;z-index:4;top:calc(var(--journey-stage-height)/2);bottom:auto;transform:translateY(-50%);width:44px;height:56px;border:1px solid #ced8cf;border-radius:25px;background:#fff;box-shadow:none;color:#075653;font-size:var(--fs-36);line-height:1;cursor:pointer;opacity:0;transition:opacity .15s ease}
 html.js [data-walkthrough] .journey-view-paging [data-view-direction="-1"]{left:.7rem;right:auto}
 html.js [data-walkthrough] .journey-view-paging [data-view-direction="1"]{right:.7rem;left:auto}
 html.js [data-walkthrough] .journey-gallery:hover .journey-view-paging button,html.js [data-walkthrough] .journey-gallery:has(:focus-visible) .journey-view-paging button{opacity:.85}
 html.js [data-walkthrough] .journey-view-paging button:hover,html.js [data-walkthrough] .journey-view-paging button:focus-visible{opacity:1;background:white}
 .journey-explore button:focus-visible,.journey-view-paging button:focus-visible{outline:2px solid var(--teal-ink);outline-offset:2px}
 html.js [data-walkthrough] .journey-composition-wrap{position:relative;display:flex;width:min(100%,173cqh);max-width:1380px;max-height:100%;aspect-ratio:1280/740;flex:none}
 html.js [data-walkthrough] .journey-composition{width:100%;height:100%;max-width:none;aspect-ratio:auto}
 html.js [data-walkthrough] [data-presentation="native"] .journey-pointer-shot{display:flex;align-items:center;justify-content:center}
 html.js [data-walkthrough] [data-presentation="native"] .journey-pointer-shot img{width:auto;height:auto;max-width:100%;max-height:100%}
}
/* Slice 25 REVISE-1 (accepter tuning): the enlarged diagram scale only where the stage is tall
   enough to hold the tallest diagram; shorter desktop viewports keep the 52rem / 18px sizing. */
@media screen and (min-width:1001px) and (min-height:820px){
 html.js [data-walkthrough] .journey-diagram{max-width:56rem}
 html.js [data-walkthrough] .journey-flow{gap:.75rem}
 html.js [data-walkthrough] .journey-flow-node{padding:1.25rem 1.5rem;min-width:18rem}
 html.js [data-walkthrough] .journey-flow-arrow{font-size:var(--fs-22);line-height:1.7}
 html.js [data-walkthrough] .journey-diagram h4{font-size:var(--fs-22);margin-bottom:1.25rem}
 html.js [data-walkthrough] .journey-diagram-label{margin-bottom:.75rem}
}
@media screen and (min-width:721px) and (max-width:1000px){
 html.js [data-walkthrough] .md-shots{--journey-stage-height:clamp(30rem,calc(100svh - 14rem),36rem)}
 html.js [data-walkthrough] .journey-gallery{height:var(--journey-stage-height);min-height:0}
 html.js [data-walkthrough] .journey-explore button{padding:.25rem .45rem}
}
/* Slice 21 REVISE-1: selected media determines the stage height on phones. */
@media screen and (max-width:720px){
 html.js [data-walkthrough] .md-shots{--journey-stage-height:auto;display:grid}
 html.js [data-walkthrough] .journey-gallery{grid-area:1/1;height:auto;min-height:14rem;grid-template-rows:auto;overflow:visible}
 html.js [data-walkthrough] .journey-gallery[data-multiple-views]{grid-template-rows:auto auto}
 html.js [data-walkthrough] .journey-explore{padding:.3rem .25rem;overflow:visible}
 html.js [data-walkthrough] .journey-explore [role="tablist"]{width:100%;flex-wrap:wrap;justify-content:center;column-gap:.2rem;row-gap:.25rem;white-space:normal}
 html.js [data-walkthrough] .journey-explore button{min-height:32px;padding:.2rem .42rem;font-size:var(--fs-13);flex:0 0 auto}
 html.js [data-walkthrough] .journey-view-label-wide{display:none}
 html.js [data-walkthrough] .journey-view-label-mobile{display:inline}
 html.js [data-walkthrough] .journey-views,html.js [data-walkthrough] .journey-view,html.js [data-walkthrough] .journey-shot,html.js [data-walkthrough] .journey-explainer,html.js [data-walkthrough] .journey-shot-frame{height:auto;min-height:0}
 html.js [data-walkthrough] .journey-views{display:block}
 html.js [data-walkthrough] .journey-view{display:none}
 html.js [data-walkthrough] .journey-view[data-example-selected]{display:block;visibility:inherit;pointer-events:inherit}
 html.js [data-walkthrough] .journey-shot-visual{height:auto;padding:.35rem 0}
 html.js [data-walkthrough] .journey-shot-media,html.js [data-walkthrough] .journey-image-window,html.js [data-walkthrough] .journey-image-window picture{height:auto;min-height:0}
 html.js [data-walkthrough] .journey-image-window{overflow:visible}
 html.js [data-walkthrough] .journey-image-window picture{align-items:flex-start}
 html.js [data-walkthrough] .journey-shot-frame img,html.js [data-walkthrough] [data-presentation="native"] .journey-image-window img{width:100%;height:auto;max-width:100%;max-height:70svh;object-fit:contain;object-position:center}
 html.js [data-walkthrough] .journey-flow-node{font-size:var(--fs-15)}
 html.js [data-walkthrough] .journey-captions{grid-area:2/1}
 html.js [data-walkthrough] .journey-shot-caption{min-height:7rem;padding:.55rem .25rem .65rem;grid-template-columns:minmax(0,1fr) 8.5rem;grid-template-areas:"qualifier paging" "actions actions";gap:.35rem .5rem;font-size:var(--fs-13)}
 html.js [data-walkthrough] .journey-shot-caption>.journey-shot-qualifier{grid-area:qualifier}
 html.js [data-walkthrough] .journey-shot-caption>.journey-shot-actions{grid-area:actions;justify-content:flex-start;white-space:normal;flex-wrap:wrap}
 html.js [data-walkthrough] .journey-shot-caption[data-record-caption]{display:grid;min-height:4.25rem;grid-template-areas:"actions paging"}
 html.js [data-walkthrough] .md-shots>.journey-view-paging{grid-area:2/1;align-self:start;justify-self:end;z-index:4;display:flex;gap:.35rem;margin:.55rem .25rem 0 0}
 html.js [data-walkthrough] .journey-view-count{position:static;transform:none;align-self:center;flex:none;margin-right:.15rem}
 html.js [data-walkthrough] .journey-view-paging button{position:static;width:44px;height:44px;transform:none;border:1px solid #ced8cf;border-radius:22px;background:white;box-shadow:none;backdrop-filter:none;font-size:var(--fs-36);opacity:1;transition:none}
 html.js [data-walkthrough] .journey-image-window:has(.journey-pointer-shot){justify-content:center;overflow:visible}
 html.js [data-walkthrough] .journey-pointer-shot{width:100%;max-width:100%}
 html.js [data-walkthrough] .journey-image-window:has(.journey-composition){display:block;overflow:visible;padding:0;box-sizing:border-box}
 html.js [data-walkthrough] .journey-composition-wrap{display:block;width:100%;height:auto;max-width:100%;max-height:none;aspect-ratio:auto}
 html.js [data-walkthrough] .journey-composition{display:flex;flex-direction:column;align-items:stretch;gap:.75rem;width:100%;height:auto;min-height:0;max-width:100%;aspect-ratio:auto}
 html.js [data-walkthrough] .journey-procedure-pane,html.js [data-walkthrough] .journey-response-pane{position:relative;inset:auto;width:100%;min-width:0;box-sizing:border-box}
 html.js [data-walkthrough] .journey-response-pane{order:0}
 html.js [data-walkthrough] .journey-composition-disclosure{order:1;display:flex;align-items:center;justify-content:center;width:100%;min-height:44px;padding:.65rem 1rem;border:1px solid var(--rule-2);border-radius:4px;background:var(--white);color:var(--teal-ink);font:inherit;font-size:var(--fs-15);font-weight:600;cursor:pointer}
 html.js [data-walkthrough] .journey-procedure-pane{order:2;display:none}
 html.js [data-walkthrough] .journey-composition-disclosure[aria-expanded="true"]+.journey-procedure-pane{display:block}
 html.js [data-walkthrough] .journey-procedure-pane{padding:.8rem}
 html.js [data-walkthrough] .journey-composition-heading{gap:.25rem;margin:0 0 .65rem}
 html.js [data-walkthrough] .journey-composition-heading span,html.js [data-walkthrough] .journey-response-label{font-size:var(--fs-13)}
 html.js [data-walkthrough] .journey-composition-heading strong{font-size:var(--fs-18)}
 html.js [data-walkthrough] .journey-procedure-crop{width:100%}
 html.js [data-walkthrough] [data-presentation="native"] .journey-procedure-crop img{position:absolute;width:246.154%;height:auto;max-width:none;max-height:none;left:-87.179%;top:-73%}
 html.js [data-walkthrough] .journey-response-label{margin:0 0 .35rem}
 html.js [data-walkthrough] [data-presentation="native"] .journey-response-pane img{display:block;position:static;width:100%;height:auto;max-width:100%;max-height:none}
 html.js [data-walkthrough] .journey-composition-connector{display:none}
 html.js [data-walkthrough] .journey-swipe-hint{display:none!important}
}
@media (hover:none),(pointer:coarse){html.js [data-walkthrough] .journey-view-paging button{opacity:1}}
@media (prefers-reduced-motion:reduce){html.js [data-walkthrough] .journey-view-paging button{transition:none}}
@media print{
 .journey-views,.journey-view{display:block!important;visibility:visible!important;pointer-events:auto!important}
 .journey-captions{display:none!important}
 .journey-composition-disclosure{display:none!important}
 .journey-procedure-pane[hidden]{display:block!important}
 .journey-static-qualifier{display:block;margin:.35rem 0 0;font-size:var(--fs-15);line-height:1.4}
 .journey-view-label-mobile,.journey-swipe-hint{display:none!important}
}

/* Accepter fix (slice 21, REVISE-1 follow-up): on phones the composition and pointer-shot windows
   kept desktop size containment (container-type:size) inside an auto-height stage, which
   collapsed them to 0 px. Release containment and make the stacked panes static. */
@media screen and (max-width:720px){
 html.js [data-walkthrough] .journey-image-window:has(.journey-composition),html.js [data-walkthrough] .journey-image-window:has(.journey-pointer-shot),html.js [data-walkthrough] .journey-composition-wrap{container-type:normal;height:auto;min-height:0}
 html.js [data-walkthrough] .journey-procedure-pane,html.js [data-walkthrough] .journey-response-pane{position:static;width:100%;left:auto;right:auto;top:auto;padding:1rem;box-sizing:border-box}
 html.js [data-walkthrough] .journey-procedure-crop{width:100%}
 html.js [data-walkthrough] .journey-pointer-shot{width:100%;height:auto;aspect-ratio:990/664}
 html.js [data-walkthrough] [data-presentation="native"] .journey-pointer-shot img{width:100%;height:auto;max-height:none}
 html.js [data-walkthrough] .journey-pointer-shot .journey-cursor{left:41.67%;top:59.2%}
}

/* Slice 24: four screenshot transcriptions remain phone-only, selectable and
   visibly subordinate to the crop. The full capture remains available through
   the adjacent View larger action. */
@media screen and (max-width:720px){
 html.js [data-walkthrough] [data-presentation="native"] .journey-shot-visual:has(.journey-shot-excerpt){display:grid;grid-template-rows:auto auto;align-items:start;overflow:visible}
 html.js [data-walkthrough] [data-presentation="native"] .journey-shot-visual:has(.journey-shot-excerpt) .journey-shot-media{display:block;height:auto;min-height:0;overflow:visible}
 html.js [data-walkthrough] [data-presentation="native"] .journey-shot-visual:has(.journey-shot-excerpt) .journey-image-window{height:auto}
 html.js [data-walkthrough] [data-presentation="native"] .journey-shot-excerpt{display:block!important;margin:0;padding:.85rem .25rem .35rem;border:0;border-top:1px solid var(--rule);font-size:var(--fs-15);line-height:var(--lh-body);color:var(--ink)}
 html.js [data-walkthrough] [data-presentation="native"] .journey-shot-excerpt>span{display:block;margin-bottom:.35rem;font-size:var(--fs-13);line-height:var(--lh-small);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
 html.js [data-walkthrough] .journey-shot-visual:has(.journey-composition) .journey-shot-media{order:0}
 html.js [data-walkthrough] .journey-shot-visual:has(.journey-composition) .journey-shot-excerpt{order:-1;padding:.35rem .25rem .85rem;border-top:0;border-bottom:1px solid var(--rule)}
 html.js [data-walkthrough] .journey-shot-visual:has(.journey-composition) .journey-shot-excerpt-qualifier{display:block;margin:0 0 .6rem;font-size:var(--fs-13);line-height:var(--lh-small);color:var(--ink-2)}
 html.js [data-walkthrough] .journey-shot-caption[data-composition-caption]{min-height:4.25rem;grid-template-areas:"actions paging"}
 html.js [data-walkthrough] .journey-shot-caption[data-composition-caption]>.journey-shot-qualifier{display:none}
}

/* Readable transcription; only its selected view may expand the image stage. */
.case-record{--fs-18:1.125rem;width:100%;box-sizing:border-box;padding:24px;background:var(--white);color:var(--ink);line-height:1.5;text-align:left}
.case-record p,.case-record blockquote,.case-record h4,.case-record dl{margin:0}
.case-record .case-record-label,.case-record dt{font-size:var(--fs-13);color:var(--ink-3);font-weight:400}
.case-record .case-record-number{margin-top:8px;font-size:var(--fs-18)}
.case-record .case-record-subject{margin-top:2px;font-size:var(--fs-22);line-height:1.5;font-weight:620;font-variation-settings:"wght" 620}
.case-record .case-record-qualification{margin-top:12px;font-size:var(--fs-15);color:var(--ink-2)}
.case-record-columns{display:grid;grid-template-columns:minmax(0,55fr) minmax(0,45fr);gap:24px;margin-top:20px}
.case-record-followup{padding-left:24px;border-left:1px solid var(--rule)}
.case-record-metadata{display:flex;flex-wrap:wrap;gap:8px 18px;margin-bottom:20px!important}
.case-record-metadata>div{display:flex;align-items:baseline;gap:5px}
.case-record dd{margin:0;font-size:var(--fs-18)}
.case-record .case-record-description,.case-record .case-record-reply{padding:0;border:0;margin-top:6px;font-size:var(--fs-18);line-height:1.5}
.case-record .case-record-reply{padding:0;border:0;margin-bottom:18px}
.case-record .case-record-note{margin-top:6px;font-size:var(--fs-15)}
.case-record .case-record-next{margin-top:6px;font-size:var(--fs-18);font-weight:620;font-variation-settings:"wght" 620;color:var(--teal-ink)}
.case-record-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px 24px;margin-top:18px;padding-top:10px;border-top:1px solid var(--rule)}
.case-record-actions a,.case-record-actions .journey-details-button{font-size:var(--fs-15);line-height:1.5;color:var(--teal-ink);text-decoration:underline;text-underline-offset:3px}
.case-record-actions .journey-details-button{background:transparent;border:0;padding:0;cursor:pointer}
.journey-skip-reply{display:inline-flex;align-items:center;min-height:44px;margin-bottom:8px;pointer-events:auto;color:var(--teal-ink);font-size:var(--fs-15);text-decoration:underline;text-underline-offset:3px}
@media screen{
 html.js [data-walkthrough] [data-presentation="record"] .journey-shot-visual{display:block;height:auto;overflow:visible;padding:12px}
 html.js [data-walkthrough] .md[data-selected] .journey-gallery:has([data-example-selected] [data-presentation="record"]){height:auto;min-height:var(--journey-stage-height);grid-template-rows:auto auto}
 html.js [data-walkthrough] .md[data-selected] .journey-gallery:has([data-example-selected] [data-presentation="record"]) .journey-view:not([data-example-selected]){display:none}
 html.js [data-walkthrough] .md[data-selected] .journey-gallery:has([data-example-selected] [data-presentation="record"]) :is(.journey-views,.journey-view,.journey-shot,.journey-shot-frame){height:auto}
 html.js [data-walkthrough] .case-record-actions .journey-details-button{display:inline-block;font-size:var(--fs-15)}
}
@media screen and (max-width:720px){
 .case-record{padding:16px}
 .case-record-columns{grid-template-columns:minmax(0,1fr);gap:24px}
 .case-record-followup{padding-left:0;border-left:0;border-top:1px solid var(--rule);padding-top:20px}
 .case-record-actions a,.case-record-actions .journey-details-button{display:inline-flex;align-items:center;min-height:44px}
 html.js [data-walkthrough] [data-presentation="record"] .journey-shot-visual{padding:0}
 html.js [data-walkthrough] .md[data-selected] .journey-gallery:has([data-example-selected] [data-presentation="record"]){min-height:0}
}
@media print{.journey-skip-reply{display:none!important}.case-record{break-inside:avoid}.case-record-columns{grid-template-columns:55fr 45fr}}

/* ── First paint and the route paragraph (slice 43) ───────────────────────
   On desktop the walkthrough layout only exists once journey.js mounts, about
   40 ms after first paint. Painting the pre-mount arrangement (map + stacked
   panel) and then moving it cost 0.18 CLS. Keep the journey space reserved but
   unpainted until mount; a timed reveal covers a script that never mounts, and
   journey-nojs.css cancels all of this for readers without JavaScript. */
@media screen and (min-width:721px){
 html.js .opmap-fig:not([data-walkthrough]) .opmap-scroll,
 html.js .opmap-fig:not([data-walkthrough]) .md-bar{display:none}
 html.js .opmap-fig:not([data-walkthrough]) .mapdetail{visibility:hidden;height:clamp(46rem,calc(100svh - 8rem),54rem);overflow:hidden;animation:journey-reveal 0s linear 1.5s forwards}
 /* The route paragraph overlays the rail: reserve four lines so the longest
    route text (chat, with its two capture dates) never reaches step 01. */
 html.js .route-intro .rt-flow{min-height:6em}
 html.js [data-walkthrough] .journey-timeline{padding-top:calc(9rem + 52px + 3rem)}
}
@keyframes journey-reveal{to{visibility:visible;height:auto;overflow:visible}}

/* Journey header with the four-item navigation (slice 43): phones use the
   compact menu in the slot the two links used, under the same chooser rule. */
@media (max-width:760px){
  .pnav .site-nav{display:none!important}
  .pnav .site-menu{grid-column:2;grid-row:1;align-self:center;justify-self:end;display:block}
}
@media (min-width:1101px){.pnav .site-menu{display:none}}
/* Between phone and wide desktop the section tabs need the width: primary links move into the menu. */
@media (min-width:761px) and (max-width:1100px){
  .pnav .site-nav{display:none}
  .pnav .site-menu{display:block;grid-column:3;grid-row:1 / -1;align-self:center;justify-self:end}
}
@media (min-width:1101px) and (max-width:1180px){.pnav .site-nav .site-nav-utility{display:none}}
/* Slice 50: the shared dot field behind every page. */
/* The guide's opening band lets the field show through, like every other page's first fold. */
.brief-hero.band-white{background:transparent}
body{background-image:radial-gradient(circle,rgba(24,24,27,.14) 1px,transparent 1.4px);background-size:24px 24px;background-position:center top}