/* =============================================================
   SALES SHERPAS — INTERACTIVE TOOL SHELL
   scorecard.css  ·  production

   This stylesheet is the only file that changes when the tool is
   restyled. Every class below is written by the shell's JavaScript
   or sits in the static markup. Renaming a class breaks the tool.

   Geometry is taken from the Claude Design token reference
   (exports/token-reference.md). Two token sets, one breakpoint.

   Contents
     1. Fonts
     2. Reset and tokens
     3. Brand furniture
     4. Layout scaffold
     5. State A · intro
     6. State B · question
     7. State C · result
     8. State D · gate
     9. State E · breakdown
    10. Motion
    11. Accessibility
   ============================================================= */

/* ---------- 1. FONTS -------------------------------------------
   Medium 500 is already served site-wide from the 2024/07 upload.
   SemiBold 600 has never been registered on this site, so 600 has
   been rendering as synthetic bold. Both are declared here.
   ------------------------------------------------------------- */
@font-face{
  font-family:Brockmann; font-style:normal; font-weight:500; font-display:swap;
  src:url("/wp-content/uploads/2024/07/brockmann-medium-webfont.woff2") format("woff2"),
      url("/wp-content/uploads/2024/07/brockmann-medium-webfont.ttf") format("truetype");
}
@font-face{
  font-family:Brockmann; font-style:italic; font-weight:500; font-display:swap;
  src:url("fonts/Brockmann-MediumItalic.woff2") format("woff2");
}
@font-face{
  font-family:Brockmann; font-style:normal; font-weight:600; font-display:swap;
  src:url("fonts/Brockmann-SemiBold.woff2") format("woff2");
}

/* ---------- 2. RESET AND TOKENS ------------------------------- */
*,*::before,*::after{box-sizing:border-box;border-radius:0!important;box-shadow:none}

:root{
  /* the five master colours — nothing else is permitted */
  --rojo:#E55126;      /* Sherpa Red        */
  --morado:#C5BAD6;    /* Cold Purple       */
  --amarillo:#FDBE2D;  /* Impermeable Yellow*/
  --blanco:#EAE3DF;    /* Off White         */
  --verde:#213028;     /* Dark Green        */

  /* the two approved gradients, endpoints unaltered */
  /* the two approved gradients, transcribed from the signed-off shell
     (Founder-Led Sales Scorecard.dc.html, the file the PNGs were shot from).
     BOTH ARE 180deg. Fitting the pixel column of 18-full-result-page.png puts
     the Sherpa Red stop at y344.1 and Cold Purple at y748.0 on that export's
     748px header - 46% and 100% of its height - and the gate's stops at 0%
     and 100%. The fitted stops are the same at the left edge, the centre and
     the right edge, which is what proves the angle is vertical: at 178deg
     they would walk 19px across a 1096px box. The build carried 178deg until
     13 Aug 2026; that was a transcription error, not a design decision. */
  --grad-arrival:linear-gradient(180deg,var(--rojo) 0%,var(--rojo) 46%,var(--morado) 100%);
  --grad-descent:linear-gradient(180deg,var(--morado) 0%,var(--blanco) 100%);

  --ff:Brockmann,"Helvetica Neue",Helvetica,Arial,sans-serif;

  /* ---- mobile token set (authored first) ---- */
  --pageX:20px;   --railX:20px;   --furnY:22px;  --furnSize:10px; --logoW:104px;
  /* the four logo files are all 1894 x 686.28, ratio 2.7598. The build
     carried .38 as the ratio, which is 1.5px too tall at 104px and made
     the whole mobile band 1.5px deep. */
  --logoH:calc(var(--logoW) / 2.7598);
  --factDiv:2px 0 0 0;
  --bannerPadR:12px 20px;
  --seeingH:auto;   --watchH:auto;
  --stairBase:74px; --stairStep:39px;
  --ctaMotifHt:213px; --ctaMotifPull:-98px;
  --seeingPhoto:url("/wp-content/uploads/sales-sherpas-mountain.webp");
  --banner:var(--micro);
  --micro:11px;
  --introMin:680px; --introPadY:36px; --introPadB:28px; --introGap:28px;
  --introH1:40px;   --introMax:14ch;  --introMotifH:70px;
  --factCols:1fr;   --factPad:13px 20px; --fact:14px;
  --sub:17px;       --subMax:44ch;
  --quizCols:1fr;   --quizMin:600px; --quizY:18px; --quizYb:32px;
  --railYb:26px;    --railGap:22px;
  --qTop:26px;      --qMax:20ch;     --q:26px;
  --optGapTop:26px; --optMax:100%;   --optMin:62px; --keyCol:42px;
  --optPad:15px 14px; --opt:16px;
  --heroMin:580px;  --heroTop:44px;  --heroGap:22px;
  --pattern:46px;   --patternMax:12ch;
  --motifBand:240px; --motifSize:130%; --watchMotifH:110px;
  --bodyY:36px;     --bodyYb:40px;   --paraIndent:0; --echoGap:30px;
  --lead:18px;      --body:16px;     --h2:28px;     --h2Max:14ch;
  --panelY:40px;    --sectY:40px;
  --bannerPad:12px 20px; --bannerEnd:20px; --afterBanner:26px;
  --stairGap:6px;   --stairPad:10px; --stairLab:9.5px;
  --chip:10px;      --chipPad:5px 7px;
  --stepCols:1fr;   --stepGap:14px;  --stepGapY:34px; --stepHead:19px;
  --signalPad:18px; --arrow:26px;
  --watch:24px;     --good:26px;     --goodMax:20ch; --goodY:44px; --goodYb:56px;
  --ctaMin:208px;   --ctaTop:40px;
  --ctaMotifBand:140px; --ctaMotifW:442px; --ctaMotif:url("motifs/pressure-test-mobile-blocks-rojo.svg");
  --btnW:100%;      --btnJustify:center;
  --seeingW:100%;   --watchW:100%;
}

/* ---- desktop token set ----
   Single breakpoint at 760px. Below it there is no rail, so every
   rail-keyed colourway has to resolve against the field instead —
   see §3 and §6. The three tokens CD authored at 1096–1099px are
   fluid here so nothing clips between 760px and 1100px. */
@media (min-width:760px){
  :root{
    --pageX:56px;  --railX:40px;  --furnY:30px; --furnSize:11px; --logoW:150px;
    --factDiv:0 0 0 2px;
    --bannerPadR:15px 56px 15px 28px;
    --seeingH:502px;   --watchH:618px;
    --stairBase:96px;  --stairStep:54px;
    --ctaMotifHt:375px; --ctaMotifPull:-250px;
    /* the design set every banner tab at --micro, which reads too small at
       desktop width - client decision, 13 Aug */
    --banner:15px;
    --micro:12px;
    --introMin:720px; --introPadY:44px; --introPadB:48px; --introGap:40px;
    --introH1:84px;   --introMax:15ch;  --introMotifH:110px;
    --factCols:repeat(3,1fr); --factPad:20px 28px; --fact:17px;
    --sub:20px;       --subMax:46ch;
    --quizCols:330px 1fr; --quizMin:620px; --quizY:30px; --quizYb:44px;
    --railYb:40px;    --railGap:32px;
    --railW:330px;
    /* height of the rail foot: the ascent, the count and the note with
       their gaps. Read bottom-up: --railYb + two lines of the 13px note
       + 12px + the count + --railGap + the 6px ascent = 141.3px. It is
       both the reserved grid height and the offset the three are pinned
       at. If the note ever runs to a different number of lines, this is
       the one value to re-measure. */
    --railFootH:calc(6px + var(--railGap) + (var(--micro) * 1.35) + 12px + (13px * 1.35 * 2) + var(--railYb));
    --railFoot2:calc(var(--railFootH) - 6px - var(--railGap));
    --railFoot3:calc(var(--railFoot2) - (var(--micro) * 1.35) - 12px);
    --qTop:44px;      --qMax:21ch;     --q:40px;
    --optGapTop:36px; --optMax:640px;  --optMin:64px; --keyCol:56px;
    --optPad:18px 22px; --opt:17px;
    --heroMin:680px;  --heroTop:122px; --heroGap:32px;
    --pattern:min(104px,9.6vw); --patternMax:15ch;
    --motifBand:440px; --motifSize:contain; --watchMotifH:170px;
    --bodyY:64px;     --bodyYb:72px;   --paraIndent:20%; --echoGap:38px;
    --lead:21px;      --body:17px;     --h2:44px;      --h2Max:13ch;
    --panelY:64px;    --sectY:64px;
    --bannerPad:15px 28px 15px 56px; --bannerEnd:56px; --afterBanner:36px;
    --stairGap:14px;  --stairPad:16px; --stairLab:11px;
    --chip:12px;      --chipPad:7px 10px;
    --stepCols:280px 44px 1fr; --stepGap:24px; --stepGapY:40px; --stepHead:21px;
    --signalPad:26px; --arrow:32px;
    --watch:40px;     --good:44px;     --goodMax:18ch; --goodY:72px; --goodYb:88px;
    --ctaMin:403px;   --ctaTop:64px;
    --ctaMotifBand:200px; --ctaMotifW:100%; --ctaMotif:url("motifs/pressure-test-rojo.svg");
    --btnW:auto;      --btnJustify:space-between;
    --seeingW:100%;   --watchW:100%;
  }
}

html,body{margin:0;padding:0}
html{color:var(--verde);border-color:var(--verde)}
body{
  background:var(--blanco); color:var(--verde);
  font-family:var(--ff); font-weight:500; font-size:var(--body);
  line-height:1.35; -webkit-font-smoothing:antialiased;
}

/* ---------- 3. BRAND FURNITURE -------------------------------
   The logo and the website line are not in the markup, so they are
   painted as backgrounds on the state containers. The colourway is
   keyed to the field the mark actually lands on, which below 760px
   is the field rather than the rail. */
#intro,#quiz,.rhead,.gate,.cta{position:relative}

.site{
  position:absolute; top:var(--furnY); right:var(--pageX);
  font-size:var(--furnSize); font-weight:500; letter-spacing:.18em;
  text-decoration:none; color:inherit; z-index:4;
}
.mark{
  position:absolute; top:var(--furnY); left:var(--pageX);
  width:var(--logoW); height:var(--logoH); z-index:4;
  background-repeat:no-repeat; background-position:left top; background-size:contain;
  font-size:0; line-height:0; text-indent:-9999px; overflow:hidden;
}
/* colourways per field */
#intro > .mark{background-image:url("logos/SALESSHERPAS_LOGO_AMARILLO.svg")}
#intro > .site{color:var(--amarillo)}
/* the result header is Cold Purple ink on Sherpa Red, so its furniture is too */
.rhead > .mark{background-image:url("logos/SALESSHERPAS_LOGO_MORADO.svg")}
.rhead > .site{color:var(--morado)}
.cta > .mark{background-image:url("logos/SALESSHERPAS_LOGO_ROJO.svg")}
.cta > .site{color:var(--rojo)}

/* ---------- 4. LAYOUT SCAFFOLD -------------------------------
   The design is edge to edge, so the prototype's centred measure is
   removed and each state owns its own padding. */
.wrap{max-width:none;margin:0;padding:0}
.hidden{display:none!important}
h1,h2,h3,h4{margin:0;font-weight:500}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
strong{font-weight:600}

/* ---------- 5. STATE A · INTRO ------------------------------- */
/* The ascending-blocks motif is a background LAYER, not an injected
   element and not mix-blend-mode. background-blend-mode composites the
   layers against each other inside the element, so the blend cannot be
   isolated by a stacking context and never touches the type. The only
   colour declared is #E55126; the darker tone is derived by multiply,
   which is what the live homepage does. */
#intro{
  background:
    url("motifs/publico-rojo20.svg") no-repeat 100% 100%/61% auto,
    var(--rojo);
  background-blend-mode:multiply,normal;
  color:var(--amarillo);
  min-height:max(var(--introMin),100vh);
  min-height:max(var(--introMin),100svh);
  overflow:hidden;
  display:flex; flex-direction:column; justify-content:flex-end;
}
.hero{position:relative;padding:var(--introPadY) var(--pageX) var(--introPadB)}
/* In the design the logo sits in its own flex row and the headline block
   starts --introPadY below it. Here the logo is an absolutely positioned
   pseudo-element, so the hero has to reserve that row itself - otherwise a
   short window bottom-aligns the hero and the headline creeps up towards the
   mark, closing the gap above it while the gap below stays at --introGap. */
@media (min-width:760px){
  #intro{justify-content:flex-start}
  .hero{
    flex:1 1 auto; display:flex; flex-direction:column; align-items:stretch;
    padding-top:calc(var(--furnY) + var(--logoH) + var(--introPadY));
  }
  #intro .hero .sub{margin-bottom:auto}
  .hero .btn{align-self:flex-start}
}
.hero h1{
  font-size:var(--introH1); line-height:.98; letter-spacing:-.03em;
  max-width:var(--introMax); text-transform:none;
}
.hero .sub{
  margin:var(--introGap) 0 0; max-width:var(--subMax);
  font-size:var(--sub); line-height:1.4;
}
/* the three facts as a structural strip, ruled not spaced */
.meta{
  display:grid; grid-template-columns:var(--factCols);
  margin:var(--introGap) calc(var(--pageX) * -1) var(--introGap);
  border-top:2px solid var(--amarillo); border-bottom:2px solid var(--amarillo);
  font-size:var(--fact); letter-spacing:0; text-transform:none;
}
/* token factDiv: the rule between facts is a top border in the single mobile
   column and a left border in the three desktop columns. Carrying the left
   border into mobile drew a stray vertical rule down the strip. */
.meta > span{padding:var(--factPad);border:0 solid var(--amarillo);border-width:var(--factDiv)}
.meta > span:first-child{border-width:0;padding-left:var(--pageX)}

/* buttons ---------------------------------------------------- */
.btn{
  appearance:none;border:0;cursor:pointer;font-family:var(--ff);
  font-weight:600;font-size:17px;letter-spacing:.02em;
  padding:20px 34px;width:var(--btnW);
  display:inline-flex;align-items:center;gap:22px;justify-content:var(--btnJustify);
  background:var(--amarillo);color:var(--rojo);
  transition:background .2s ease-out,color .2s ease-out;
}
.btn::after{content:"→";font-weight:500;transition:transform .2s ease-out}
.btn:hover::after{transform:translateX(6px)}
.btn:hover{background:var(--morado);color:var(--rojo)}
.btn.ghost{background:transparent;color:var(--verde);border:2px solid var(--verde);font-weight:500}
.btn.ghost:hover{background:var(--verde);color:var(--blanco)}
.btn.ghost::after{content:none}

/* ---------- 6. STATE B · QUESTION ----------------------------
   The rail carries the mark, the ascent and the count. Below 760px it
   becomes a full-width band at the top, which is why every rail-keyed
   colourway is declared against the rail rather than the viewport —
   the band is the rail, so the logo colourway travels with it.

   Colour ascends once across the nine screens, in three blocks of
   three, mapped to POSITION not dimension. [data-block] is set by the
   shell from the question index.
     1 · q1-3  rail Cold Purple  · body Off White
     2 · q4-6  rail Dark Green   · body Cold Purple
     3 · q7-9  rail Cold Purple  · body Dark Green
   ------------------------------------------------------------- */
#quiz{
  min-height:max(var(--quizMin),100vh);
  min-height:max(var(--quizMin),100svh);
  display:grid;
  grid-template-columns:1fr;
  /* mobile: the band is rows 1-3, the slack sits at the bottom so the
     options stay directly under the question rather than being pushed
     down by a stretched question row */
  grid-template-rows:auto auto auto auto auto auto auto 1fr;
  align-content:start;
  transition:background-color .7s ease-out,color .7s ease-out;
}
#quiz::before{                      /* the rail / band field */
  content:""; grid-column:1; grid-row:1/4; align-self:stretch;
  background:var(--rail-bg);
  transition:background-color .7s ease-out;
}
.prog   {grid-column:1;grid-row:1}
.qcount {grid-column:1;grid-row:2}
#quiz .small{grid-column:1;grid-row:3}
/* row 4 is #quiz::after, the website line */
.qtext  {grid-column:1;grid-row:5}
.opts   {grid-column:1;grid-row:6}
.nav    {grid-column:1;grid-row:7}

@media (min-width:760px){
  #quiz{
    grid-template-columns:var(--railW) 1fr;
    /* row 1 is the website line, row 3 is the elastic one, and .nav sits in
       row 4 at the foot of the column - the design pins Back there with
       margin-top:auto. The rail foot is not in the grid at all; it is
       pinned to the window further down. */
    grid-template-rows:auto auto 1fr auto;
  }
  #quiz::before{grid-column:1;grid-row:1/-1}
  .qtext      {grid-column:2;grid-row:2;align-self:start}
  .opts       {grid-column:2;grid-row:3}
  .nav        {grid-column:2;grid-row:4;align-self:end}
}

/* promote the wrapper so the rail can claim two of its children */
#quiz > div:not(.prog):not(.qcount):not(.opts):not(.nav){display:contents}

/* ---- the three colour blocks ---- */
#quiz[data-block="1"]{--rail-bg:var(--morado);--field:var(--blanco);--ink:var(--verde);
                      --rail-ink:var(--verde);--logo:url("logos/SALESSHERPAS_LOGO_VERDE.svg")}
#quiz[data-block="2"]{--rail-bg:var(--verde);  --field:var(--morado);--ink:var(--verde);
                      --rail-ink:var(--morado);--logo:url("logos/SALESSHERPAS_LOGO_MORADO.svg")}
#quiz[data-block="3"]{--rail-bg:var(--morado);--field:var(--verde); --ink:var(--morado);
                      --rail-ink:var(--verde);--logo:url("logos/SALESSHERPAS_LOGO_VERDE.svg")}
#quiz{background:var(--field,var(--blanco));color:var(--ink,var(--verde))}

/* The website line sits at the top right. Below 760px there is no rail,
   so that position is INSIDE the band and the line has to take the rail's
   ink; above 760px the same position is on the body field and it takes
   the field's ink. Keying it to the field at both widths made it Cold
   Purple on Cold Purple at questions 7-9 on a phone. */
/* The website line is the first row of the QUESTION column in the design, not
   a mark pinned to the top of the state. On desktop that column starts at the
   top of #quiz, so the absolute position lands in the same place. Below 760px
   the band occupies the top, so the same absolute position put the line inside
   the band - which is also why it had to be keyed to --rail-ink to stay
   visible. It now sits under the band, on the field, as the export shows. */
#quiz > .site{
  position:static; grid-column:1; grid-row:4;
  margin:var(--quizY) var(--pageX) 0;
  text-align:right;
  color:var(--ink);
}
@media (min-width:760px){
  #quiz > .site{position:absolute;grid-area:auto;top:var(--furnY);right:var(--pageX);margin:0}
}
/* the mark sits in the rail, so it takes the rail's ink */
#quiz > .mark{left:var(--railX);background-image:var(--logo)}

/* the ascent — .tick as an occluder, the climb builds as they answer.
   Remaining ticks are the filled colour at 50%, as signed off. */
.prog{
  position:static;
  display:flex; align-items:flex-end; gap:4px; height:6px;
  /* the top margin reserves the mark's space at the head of the band;
     on desktop the mark sits at the top of the rail instead and the
     ascent drops to the foot of it. */
  margin:calc(var(--furnY) + var(--logoH) + 22px) var(--railX) var(--railGap);
  padding-top:0;
}
@media (min-width:760px){ .prog{margin-top:0} }
.tick{
  flex:1 1 0; min-width:0; height:6px;
  background:var(--blanco); opacity:.5;
  transition:opacity .25s ease-out;
}
@media (min-width:760px){ .tick{flex:0 0 24px} }
/* The design has the ticks as buttons back to an answered question. The shell
   renders them as divs, so the behaviour is added in the template; this is the
   affordance for the ones that are actually reachable. */
.tick.done,.tick.now{cursor:pointer}
.tick.done,.tick.now{opacity:1}

.qcount{
  margin:0 var(--railX) 12px;
  font-size:var(--micro); letter-spacing:.18em; text-transform:uppercase;
  color:var(--rail-ink);
}
#quiz .small{
  margin:0 var(--railX) var(--railYb)!important;
  font-size:13px; line-height:1.35; color:var(--rail-ink); max-width:34ch;
}

/* ---- the rail foot is pinned to the window, not to the page ----
   Questions 1, 4 and 6 wrap to six lines and push the page past the
   viewport on a short window. Keyed to the page, the ascent then lands
   32px lower on those three screens than on the other six. The reference
   below is the shorter of the page and the window, floored at the tool's
   own minimum, so all nine agree at every window height and slide 2 does
   not move. Long questions still scroll, so nothing becomes unreachable.
   Absolute positioning is not decoration here: it is what makes 100%
   resolve against #quiz instead of against the grid area. */
@media (min-width:760px){
  .prog,.qcount,#quiz .small{
    position:absolute; grid-area:auto;
    left:0; right:calc(100% - var(--railW));
  }
  .prog{
    top:calc(min(100%,max(var(--quizMin),100vh)) - var(--railFootH));
    top:calc(min(100%,max(var(--quizMin),100svh)) - var(--railFootH));
  }
  .qcount{
    top:calc(min(100%,max(var(--quizMin),100vh)) - var(--railFoot2));
    top:calc(min(100%,max(var(--quizMin),100svh)) - var(--railFoot2));
  }
  #quiz .small{
    top:calc(min(100%,max(var(--quizMin),100vh)) - var(--railFoot3));
    top:calc(min(100%,max(var(--quizMin),100svh)) - var(--railFoot3));
  }
  /* .prog is positioned now, so a pseudo-element on it would be keyed to
     .prog rather than to #quiz. The mark moves onto the rail field itself.
     All four logo files are 1894x686.28, so "var(--logoW) auto" paints the
     same box the contained pseudo-element did. */
}
/* line-height and tracking are transcribed from the design source, not
   approximated: the desktop export's question lines are 42.4px apart, which
   is 40 x 1.06, and the mobile export's are 27.6, which is 26 x 1.06. */
.qtext{
  margin:var(--qTop) var(--pageX) 0;
  font-size:var(--q); line-height:1.06; letter-spacing:-.03em;
  max-width:var(--qMax); color:var(--ink);
}
.opts{
  display:flex; flex-direction:column; gap:8px;
  margin:var(--optGapTop) var(--pageX) 0; max-width:var(--optMax);
}
.opt{
  display:grid; grid-template-columns:var(--keyCol) 1fr;
  align-items:stretch; width:100%; text-align:left;
  min-height:var(--optMin); padding:0;
  font-family:var(--ff); font-weight:500; font-size:var(--opt);
  background:transparent; color:var(--ink);
  border:2px solid var(--ink); cursor:pointer;
  transition:background-color .15s ease-out,color .15s ease-out;
}
.opt > span:last-child{padding:var(--optPad);line-height:1.25;align-self:center}
.key{
  display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:600;letter-spacing:.06em;
  border-right:2px solid var(--ink);
}
/* hover and selected swap to another approved surface from the same
   combination. No tint, no lift, no shadow. */
#quiz[data-block="1"] .opt:hover{background:var(--morado)}
#quiz[data-block="2"] .opt:hover{background:var(--blanco)}
#quiz[data-block="3"] .opt:hover{background:var(--morado);color:var(--verde)}
#quiz[data-block="3"] .opt:hover .key{border-right-color:var(--verde)}
/* In block 3 the selected surface and the hover surface are both Cold Purple,
   so hovering an answer already chosen gave no feedback. Off White is the
   same move block 2 already makes. */
#quiz[data-block="1"] .opt.sel:hover,
#quiz[data-block="2"] .opt.sel:hover,
#quiz[data-block="3"] .opt.sel:hover{color:var(--verde)}
#quiz[data-block="1"] .opt.sel:hover .key,
#quiz[data-block="2"] .opt.sel:hover .key,
#quiz[data-block="3"] .opt.sel:hover .key{border-right-color:var(--verde);color:var(--verde)}
#quiz[data-block="3"] .opt.sel:hover{background:var(--blanco)}
#quiz[data-block="3"] .opt.sel:hover .key{border-right-color:var(--verde);color:var(--verde)}
.opt.sel{background:var(--ink);color:var(--field)}
.opt.sel .key{border-right-color:var(--field);color:var(--field)}

.nav{margin:var(--optGapTop) var(--pageX) var(--quizYb)}
.back{
  background:none;border:0;cursor:pointer;font-family:var(--ff);font-weight:500;
  font-size:14px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);
  padding:8px 0;border-bottom:2px solid var(--ink);text-decoration:none;
}
.back::before{content:"\2190  "}

/* ---------- 7. STATE C · RESULT ------------------------------ */
.rhead{
  background:var(--grad-arrival); color:var(--morado);
  min-height:var(--heroMin); padding:var(--heroTop) var(--pageX) 0;
  display:flex; flex-direction:column; overflow:hidden;
  margin:0; width:auto;
}
/* The ribbon is its own padding, not --chipPad: the design sets 9px and
   t.pageX with a 1.25 line box, which gives 33px on desktop and 45px on
   mobile where the string wraps to two lines. Both match the exports.
   --chipPad is shared with the staircase chips and must not carry this. */
.rhead .band{
  align-self:flex-start; margin:var(--heroGap) 0 0;
  background:var(--amarillo); color:var(--rojo);
  font-size:var(--banner); font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  line-height:1.25; padding:9px var(--pageX);
  margin-left:calc(var(--pageX) * -1);
}
.rhead .looks{
  margin:var(--heroGap) 0 0; color:var(--morado);
  font-size:var(--micro); font-weight:600; letter-spacing:.24em; text-transform:uppercase;
}
.rhead h1{
  margin:12px 0 var(--heroGap); font-size:var(--pattern); line-height:.9;
  letter-spacing:-.045em; max-width:var(--patternMax);
  color:var(--morado); text-transform:none;
}
/* On desktop the clear band under the pattern name is --motif-pad and nothing
   else, so the h1 carries no bottom margin. Metrics are the design's:
   margin-top 14, line-height 1, tracking -.056em. */
@media (min-width:760px){
  .rhead h1{margin:14px 0 0; line-height:1; letter-spacing:-.056em}
}
/* The per-pattern silhouette is a background layer on .rhead, sized from
   the element rather than the viewport, with padding-bottom reserving a
   clear band so it can never reach the h1. --motif-pattern is set per
   result by a [data-pattern] rule below. */
.rhead{
  padding-bottom:var(--motifBand);
  background-image:var(--motif-pattern,none),var(--grad-arrival);
  background-repeat:var(--motif-repeat,no-repeat),no-repeat;
  background-position:left 0 bottom 0,0 0;
  background-size:var(--motifSize),cover;
}
/* The design does not reserve a flat band under the pattern name. The motif
   is its own element, full width, with the ARTWORK'S OWN ratio, so the
   reserved height is width/ar and the clear gap above it is a percentage of
   width that the design derives as max(2, 13.4 - 20/ar). A flat 440px band
   plus background-size:contain made the motif scale to the whole header, so
   on the taller patterns it climbed over the title. Both percentages resolve
   against width, so the header height comes out right at any viewport.
   Reproduces every one of the seven export heights to within a pixel:
   selective 931, sourced 883, closer 748, judgement 918, escalation 869,
   shadow 887, centred 873. Mobile is untouched - it still uses --motifBand. */
@media (min-width:760px){
  .rhead{
    padding-bottom:calc(var(--motif-pad) + (100% / var(--motif-ar)));
    background-size:calc(100% / var(--motif-rep,1)) auto,cover;
  }
}
.rhead[data-pattern="selective"]  {--motif-pattern:url("motifs/escalation-blocks-morado.svg");
                                   --motif-ar:2.6667; --motif-pad:5.90%}
.rhead[data-pattern="sourced"]    {--motif-pattern:url("motifs/Group-108-1-morado.svg");
                                   --motif-ar:3.1176; --motif-pad:6.99%}
.rhead[data-pattern="closer"]     {--motif-pattern:url("motifs/Group-108-morado.svg");
                                   --motif-ar:3.5142; --motif-pad:7.71%}
.rhead[data-pattern="judgement"]  {--motif-pattern:url("motifs/Group-66-morado.svg");
                                   --motif-ar:2.7769; --motif-pad:6.20%}
.rhead[data-pattern="escalation"] {--motif-pattern:url("motifs/Group-53-morado.svg");
                                   --motif-ar:2.3667; --motif-pad:4.95%}
.rhead[data-pattern="shadow"]     {--motif-pattern:url("motifs/enlace-morado.svg");
                                   --motif-ar:3.0769; --motif-pad:6.90%}
.rhead[data-pattern="centred"]    {--motif-pattern:url("motifs/shadow-bowties-morado.svg");
                                   --motif-ar:3.2345; --motif-pad:7.22%;
                                   --motif-rep:2; --motif-repeat:repeat-x}
.rbody{
  background:var(--rojo); color:var(--amarillo);
  padding:var(--bodyY) var(--pageX) var(--bodyYb);
}
/* The design indents the PARAGRAPHS by --paraIndent and leaves the echo quote
   at the left edge. Indenting the whole #ungated container carried the quote
   in with them. */
.rbody #ungated{margin-left:0}
.rbody #ungated > p{margin:0 0 18px var(--paraIndent);max-width:58ch;line-height:1.4}
.rbody p{max-width:60ch;font-size:var(--body);line-height:1.45;margin:0 0 18px}
/* .rbody is a Sherpa Red field, so the rule and the emphasised answer were
   Sherpa Red on Sherpa Red and invisible. The design sets both in yellow. */
.rbody #ungated > p.quote{
  border-left:5px solid var(--amarillo); padding:0 0 0 24px;
  margin:0 0 var(--echoGap); font-size:var(--lead); line-height:1.3; max-width:44ch;
}
.quote strong{color:var(--morado);font-weight:600}

/* ---------- 8. STATE D · GATE -------------------------------
   Start of the Cold Purple → Off White descent. */
/* The markup puts the consent row before the privacy line; the design has it
   the other way round with a 2px rule between them. Ordering it here rather
   than in the template keeps the shell's markup untouched. */
.gate{
  background:var(--grad-descent); color:var(--verde);
  padding:var(--panelY) var(--pageX);
  margin:0; width:auto;
  display:flex; flex-direction:column; align-items:stretch;
}
.gate .err{order:1}
.gate .small{order:2}
.gate .consent{order:3}
.gate h2{
  color:var(--verde); font-size:var(--h2); line-height:.98;
  letter-spacing:-.03em; max-width:var(--h2Max); text-transform:none;
}
/* --h2Max is 13ch, which is shared with the CTA heading; the gate heading runs
   on one line on desktop instead. Mobile keeps the measure. */
@media (min-width:760px){ .gate h2{max-width:none} }
.gate p{max-width:var(--subMax);margin-top:14px;font-size:var(--body);line-height:1.45}
.field{display:flex;gap:8px;flex-wrap:wrap;margin-top:26px;max-width:640px}
input[type=email]{
  font-family:var(--ff);font-weight:500;font-size:17px;padding:18px;
  border:2px solid var(--verde);background:var(--blanco);color:var(--verde);
  flex:1 1 280px;min-width:0;
}
input[type=email]::placeholder{color:var(--verde);opacity:1}
/* Dark Green field, Cold Purple ink, Sherpa Red on hover - as the export
   and the design source both have it. */
.gate .btn{background:var(--verde);color:var(--morado);width:auto;flex:0 0 auto}
.gate .btn:hover{background:var(--rojo);color:var(--morado)}
.consent{
  display:flex;gap:12px;align-items:flex-start;
  margin-top:28px;padding-top:24px;border-top:2px solid var(--verde);
  font-size:14px;line-height:1.4;max-width:52ch;cursor:pointer;
}
/* A native control paints its own corner radius and hairline border, which
   border-radius:0!important cannot reach. The design and the export both
   show a square: 2px Dark Green outline, filled Dark Green when checked. */
.consent input{
  appearance:none; -webkit-appearance:none;
  margin:2px 0 0;width:20px;height:20px;flex:0 0 auto;
  border:2px solid var(--verde); background:transparent;
  cursor:pointer; transition:background-color .12s linear;
}
.consent input:checked{background:var(--verde)}
.gate .small{margin-top:16px;font-size:13px;color:var(--verde);max-width:52ch}
.gate .small a{color:var(--verde);text-decoration:underline}
.gate .small a:hover{color:var(--rojo)}
.err{color:var(--rojo);font-size:14px;font-weight:600;margin-top:12px}

/* ---------- 9. STATE E · BREAKDOWN --------------------------
   Transcribed from the design source rather than approximated. Five sections,
   each with its own field, its own banner colourway and its own alignment;
   the banner tabs carry the section rhythm, the background does not.
   ------------------------------------------------------------- */
#unlocked{background:var(--grad-descent)}
.sect{padding:var(--sectY) 0 0;margin:0}
.sect > h3,.warn > h3{
  display:inline-block; margin:0 0 var(--afterBanner);
  background:var(--verde); color:var(--blanco);
  font-size:var(--banner); font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  padding:var(--bannerPad); border:0;
}
.sect > *:not(h3){padding:0 var(--pageX)}

/* ---- 9.1 what we are seeing · banner and copy to the right ---- */
.sect:has(#seeing){
  position:relative; overflow:hidden;
  padding:var(--sectY) 0;
  display:flex; flex-direction:column; align-items:flex-end;
  min-height:var(--seeingH);
}
/* The design lays a cover photograph across this section at 30% under a
   multiply blend. No such photograph has been delivered - the design was shot
   with a stand-in - so the hook is here and unset. Drop the image into
   scorecard/photos/ and set --seeingPhoto to switch it on. */
.sect:has(#seeing)::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:var(--seeingPhoto,none) no-repeat 50% 100%/cover;
  opacity:.3;
}
.sect:has(#seeing) > *{position:relative;z-index:1}
.sect:has(#seeing) > h3{
  color:var(--morado); padding:var(--bannerPadR); margin-bottom:0;
}
#seeing{
  align-self:stretch;
  padding:var(--afterBanner) var(--bannerEnd) 0 var(--pageX);
  display:flex; flex-direction:column; align-items:flex-end;
  margin-left:0; max-width:var(--seeingW);
}
#seeing p{margin:0 0 18px;width:100%;max-width:56ch;line-height:1.4;font-size:var(--body);padding:0}

/* ---- 9.2 the four readings · an ascending staircase on Off White ---- */
.sect:has(#bars){
  background:var(--blanco); color:var(--verde);
  padding:var(--bodyY) 0 var(--sectY);
}
.bars{
  display:grid; grid-auto-flow:column; grid-auto-columns:1fr;
  gap:var(--stairGap); align-items:stretch;
  padding:var(--afterBanner) var(--pageX) 0!important; margin:0;
}
.bar{display:flex;flex-direction:column;justify-content:flex-end}
.bar .track{
  display:block; width:100%; position:relative;
  /* --v is the 0-6 reading. The design's own step: 96px at zero, 36px a level
     on desktop; 74 and 26 on mobile. */
  height:calc(var(--stairBase) + (var(--v,0) * var(--stairStep)));
}
.bar:nth-child(1) .track{background:var(--morado)}
.bar:nth-child(2) .track{background:var(--amarillo)}
.bar:nth-child(3) .track{background:var(--rojo)}
.bar:nth-child(4) .track{background:var(--verde)}
.bar .fill{display:none}
.bar .strength{
  position:absolute; top:var(--stairPad); left:var(--stairPad);
  font-size:var(--chip); font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  padding:var(--chipPad); white-space:nowrap;
}
.bar:nth-child(1) .strength{background:var(--verde);color:var(--morado)}
.bar:nth-child(2) .strength{background:var(--rojo);color:var(--amarillo)}
.bar:nth-child(3) .strength{background:var(--amarillo);color:var(--rojo)}
.bar:nth-child(4) .strength{background:var(--morado);color:var(--verde)}
.bar .lab{
  order:3; margin-top:14px;
  font-size:var(--stairLab); line-height:1.2; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; color:var(--verde);
}
.sect:has(#bars) .small{margin:28px 0 0;font-size:13px;max-width:56ch;line-height:1.4}

/* ---- 9.3 the three areas · signal box, arrow, what to examine ---- */
.sect:has(#steps) > h3{color:var(--morado)}
#steps{padding:var(--afterBanner) var(--pageX) 0;display:flex;flex-direction:column;gap:var(--stepGapY)}
.step{
  display:grid; grid-template-columns:var(--stepCols);
  column-gap:var(--stepGap); row-gap:0; align-items:start; margin:0;
}
/* the markup has the label and the heading as siblings; two rows of one
   column with the same field reads as the design's single padded box */
.step .n{
  display:block; grid-column:1; grid-row:1; justify-self:stretch;
  background:var(--morado); color:var(--verde);
  font-size:var(--micro); font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  padding:var(--signalPad) var(--signalPad) 0; margin:0;
}
.step .n::before{content:"SIGNAL "}
.step h4{
  grid-column:1; grid-row:2; background:var(--morado); color:var(--verde);
  font-size:var(--stepHead); line-height:1.15; font-weight:600; letter-spacing:-.01em;
  padding:14px var(--signalPad) var(--signalPad); margin:0;
}
.step > p{
  grid-column:1; grid-row:3; margin:0;
  font-size:var(--body); line-height:1.4; color:var(--verde); max-width:52ch;
}
.step > p::before{
  content:"WHAT TO EXAMINE"; display:block; margin-bottom:14px;
  font-size:var(--micro); font-weight:600; letter-spacing:.14em; color:var(--verde);
}
@media (min-width:760px){
  .step > p{grid-column:3;grid-row:1/99}
  /* centre the group rather than letting the body column stretch */
  #steps{align-items:center}
  .step{grid-template-columns:280px 44px minmax(0,52ch)}
  .step::after{
    content:"\2192"; grid-column:2; grid-row:1/-1; align-self:center;
    font-size:var(--arrow); line-height:1; color:var(--verde); text-align:center;
  }
}

/* ---- 9.4 worth watching · the inversion ---- */
.warn{
  position:relative; overflow:hidden;
  margin-top:var(--sectY);
  background:var(--verde); color:var(--morado);
  padding:var(--panelY) 0 calc(var(--panelY) * 1.3);
  min-height:var(--watchH); max-width:var(--watchW);
}
.warn > h3{background:var(--morado);color:var(--verde);position:relative;z-index:1}
#watch{padding:var(--afterBanner) var(--pageX) 0;position:relative;z-index:1}
#watch p{
  margin:0 0 18px; max-width:var(--watchMax,36ch);
  font-size:var(--watch); line-height:1.15; font-weight:500; letter-spacing:-.02em;
  color:var(--morado);
}
.warn::after{
  content:""; position:absolute; left:0; right:0; bottom:0; z-index:0;
  height:auto; aspect-ratio:1728/263; min-height:var(--watchMotifH);
  pointer-events:none;
  background:url("motifs/Group-30-watch-morado10.svg") no-repeat center bottom/100% 100%;
}

/* ---- 9.5 what good looks like · banner and copy to the right ---- */
.sect:has(#good){
  padding:var(--goodY) 0 var(--goodYb);
  display:flex; flex-direction:column; align-items:flex-end;
}
.sect:has(#good) > h3{padding:var(--bannerPadR);margin-bottom:0;margin-left:auto;display:inline-block}
#good{
  align-self:stretch; max-width:none;
  padding:var(--afterBanner) var(--bannerEnd) 0 var(--pageX);
  display:flex; flex-direction:column; align-items:flex-end;
  margin-left:0;
}
#good p{
  margin:0; width:100%; max-width:var(--goodMax2,var(--goodMax));
  font-size:var(--good); line-height:1.05; font-weight:500; letter-spacing:-.04em;
}
@supports not selector(:has(*)){
  #unlocked .sect:last-of-type > h3{margin-left:auto;display:table;margin-right:0}
  #unlocked .sect:last-of-type{padding-top:var(--goodY);padding-bottom:var(--goodYb)}
}

@media (min-width:760px){
  /* the watch panel runs the full measure, --pageX either side */
  #watch p{--watchMax:none}
  /* the good paragraph reaches the centre line: --pageX and --bannerEnd are
     both 56px on desktop, so 50% of the padded box is exactly half the section */
  #good p{--goodMax2:50%}
}

/* ---- 9.6 the close · deliberately outside the descent ---- */
.cta{
  position:relative; overflow:hidden;
  background:var(--ctaMotif) no-repeat right 0 bottom 0/auto var(--ctaMotifHt),var(--amarillo);
  color:var(--rojo);
  min-height:var(--ctaMin);
  /* the logo sits in its own flex row in the design; here it is an absolutely
     positioned pseudo-element, so the padding has to reserve that row */
  padding:calc(var(--furnY) + var(--logoH) + var(--ctaTop)) var(--pageX)
          calc(var(--ctaMotifHt) + var(--ctaMotifPull));
  margin:0;
  display:flex; flex-direction:column;
}
.cta h2{
  color:var(--rojo); font-size:var(--h2); line-height:1;
  letter-spacing:-.045em; max-width:var(--h2Max); text-transform:none; margin:0;
}
.cta p{margin:24px 0 0;max-width:44ch;font-size:var(--lead);line-height:1.4;color:var(--rojo)}
.cta .btn{
  background:var(--rojo);color:var(--amarillo);margin-top:34px;
  align-self:flex-start;width:var(--btnW);
  font-size:18px;padding:22px 38px;gap:14px;justify-content:var(--btnJustify);
}
.cta .btn:hover{background:var(--morado);color:var(--rojo)}
.cta .btn::after{content:none}
.cta::before{background-image:url("logos/SALESSHERPAS_LOGO_ROJO.svg")}

/* ---- 9.7 start again ---- */
#unlocked > p:last-child{
  background:var(--blanco); padding:32px var(--pageX); margin:0;
  display:flex; align-items:center; justify-content:flex-start;
}
#unlocked > p:last-child .btn.ghost{
  font-size:14px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  padding:16px 28px; width:auto; justify-content:center;
}

/* ---------- 10. MOTION -------------------------------------
   State change swaps to another approved surface. No tint, no
   lift, no shadow, no ambient movement. */
#quiz,.opt,.btn,.tick{transition-timing-function:ease-out}
.qtext,.opts{animation:rise .55s ease-out both}
.opts .opt:nth-child(1){animation-delay:.06s}
.opts .opt:nth-child(2){animation-delay:.12s}
.opts .opt:nth-child(3){animation-delay:.18s}
.opts .opt:nth-child(4){animation-delay:.24s}
@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}

/* ---------- 11. ACCESSIBILITY ------------------------------ */
:focus-visible{outline:3px solid var(--verde);outline-offset:3px}
.rhead :focus-visible,#intro :focus-visible,.cta :focus-visible{outline-color:var(--verde)}
#quiz :focus-visible{outline-color:var(--verde)}
.dbg,.dbgtoggle{display:none!important}

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


/* ============================================================
   MOBILE PASS - 13 August 2026 (client review)
   Everything below is scoped to max-width:759px and cannot reach
   the desktop layout, which is signed off and must not move.
   ============================================================ */
@media (max-width:759px){

  /* Intro. The hero was bottom-anchored, which opens a large empty
     band under the mark on a tall phone. mobile/01-intro.png (371x680)
     puts the headline 36px below the mark, so the hero is top-anchored
     and reserves the mark's row the way the desktop rule already does. */
  #intro{justify-content:flex-start}
  #intro .hero{padding-top:calc(var(--furnY) + var(--logoH) + var(--introPadY))}
  /* The slide does not scroll, so the button is pinned to its foot and the
     copy stays at the top. .hero becomes the column that fills the slide. */
  #intro .hero{flex:1 1 auto;display:flex;flex-direction:column;padding-bottom:40.5px}
  #intro .hero > .btn{margin-top:auto}

  /* Intro motif at double size, bottom-anchored, free to run off the right. */
  #intro{background-size:122%,auto;background-position:0 100%,0 0}

  /* Quiz. The website line joins the mark at the top right, as on desktop.
     It sits on the Cold Purple band, so it takes the band's ink - green on
     every block - not --ink, which is Cold Purple on block 3 and would vanish. */
  #quiz > .site{
    position:absolute;grid-area:auto;
    top:var(--furnY);right:var(--pageX);left:auto;
    margin:0;text-align:right;color:var(--verde);
  }

  /* Result header. The mark is absolutely positioned here, so the 44px the
     design puts between the mark and the ribbon has to come out of padding,
     exactly as --heroTop 122px does on desktop. .band adds --heroGap on top
     of it, so the padding carries 44 less that. */
  .rhead{padding-top:calc(var(--furnY) + var(--logoH) + 44px - var(--heroGap))}
  .rhead h1{margin-top:14px;margin-bottom:0;line-height:1}

  /* Motif band. The design draws it in a 1098x504 box pulled 60px past the
     section foot, so the artwork is bottom-flush with the section and the
     clear reserve above it is 444px. background-size is that box's width
     times the per-pattern percentage, in absolute px, so the motif crops
     harder on a narrow phone rather than shrinking. */
  /* One artwork height for every pattern - 406px inside a 444px band, so
     the 38px of clear air under the title in mobile/13-result-founder-closer.png
     is reproduced on all seven. Width follows from the artwork's own ratio;
     the divide by --motif-rep gives the single tile width for the one
     pattern that repeats. */
  .rhead{
    padding-bottom:444px;
    --motifSize:calc(406px * var(--motif-ar) / var(--motif-rep,1)) auto;
  }

  /* Gate heading on one line, as it already is on desktop. */
  .gate h2{max-width:none}

  /* The website line takes the band's contrast ink. Block 2's band is Dark
     Green carrying a Cold Purple mark, so green on green disappears there. */
  #quiz[data-block="2"] > .site{color:var(--morado)}

  /* Staircase labels. Three of the four wrap to two lines and one does not,
     and .bar is a bottom-aligned column, so the odd one out pushed its own
     track down. Two lines are reserved for all four. */
  .bar .lab{min-height:22.8px;min-height:2lh}

  /* 'What to examine' takes the same 14px above it as below, and the arrow
     moves inline after the label - showArrowInline in the design source is
     true at this width and the separate arrow column is desktop only. */
  .step p::before{content:"WHAT TO EXAMINE  \2192";margin-top:18.2px}

  /* The gap under the last rule was 28px of box, but the gap above the first
     rule is measured from the paragraph's last ink row, which sits 6.7px above
     its line box. Screenshot profile: ink ends 353.3, rule starts 388.3 = 35.0;
     rule ends 530.5, button starts 558.8 = 28.3. Matching the visible pair. */
  #intro .meta{margin-bottom:34.7px}

  /* Strength chips centred on their column rather than inset from the left. */
  /* Chips centred on their column and all set to one width - 'Moderate' is
     the widest of the five labels at 73.9px, so every chip takes that. */
  .bar .strength{left:50%;right:auto;transform:translateX(-50%);text-align:center;width:73.9px}

  /* Two motifs sit low in the band because their tall end runs off to the
     right. Scanned each artwork's alpha at the rendered size to find the
     smallest shift that lifts the visible ink: Group-66 reaches the top of
     the band from -500px, Group-53 climbs from 202px down to ~70px at -520px.
     Scale is unchanged; both stay inside the artwork at 320-430 wide. */
  .rhead[data-pattern="judgement"]{background-position-x:-500px,0}
  .rhead[data-pattern="escalation"]{background-position-x:-520px,0}

  /* Banner headers. Three of the five carried 26px of their own margin on
     top of the 26px the block beneath already has. 'What good looks like'
     is the reference at 26 total; all five now match it. */
  #unlocked h3{margin-bottom:0}

  /* Pressure-test motif a shade deeper against the yellow field. Both motifs
     are the same #E55126; the intro's reads darker because it sits at 20%
     over red. At 20% over yellow it would wash out, so the depth comes from
     multiplying the layer against the field instead. */
  .cta{background-blend-mode:multiply,normal}
}


/* ============================================================
   Booking modal - the pressure-test CTA opens the calendar over
   a darkened field rather than in a new tab, matching the
   homepage contact section (Dark Green veil at 82%, white panel).
   ============================================================ */
.book-veil{
  position:fixed; inset:0; z-index:999999;
  display:flex; align-items:center; justify-content:center;
  /* Near-black rather than the homepage's Dark Green at 82%: the same veil
     over Sherpa Red reads green, so the value is darkened to hold here. */
  background:rgba(9,13,11,.9); padding:20px;
}
.book-veil[hidden]{display:none}
.book-panel{
  position:relative; background:#fff;
  width:100%; max-width:1020px; height:min(90vh,720px);
  box-shadow:0 24px 60px rgba(0,0,0,.35);
}
.book-close{                          /* as the homepage: 42px red disc, yellow cross */
  position:absolute; top:-16px; right:-16px; z-index:2;
  width:42px; height:42px; padding:0; border:0; cursor:pointer;
  border-radius:50%!important;        /* the reset in § 2 zeroes every radius */
  background:var(--rojo); color:var(--amarillo);
  font-size:24px; line-height:42px; font-family:inherit;
  transition:background-color .2s ease, color .2s ease;
}
.book-close:hover{background:var(--amarillo); color:var(--rojo)}   /* as the homepage */
.book-frame{width:100%;height:100%}
.book-frame iframe{width:100%;height:100%;border:0;display:block}
@media (max-width:759px){
  .book-veil{padding:12px}
  .book-panel{height:min(88vh,640px)}
  .book-close{top:-12px;right:-4px;width:34px;height:34px;font-size:19px;line-height:34px}
}


/* ============================================================
   Sub-360: the staircase, matched to the email
   ------------------------------------------------------------
   The four columns are grid `1fr`, whose automatic minimum is
   min-content, so each column was as wide as its longest
   unbreakable word - ORIGINATION at 73.95px, COMMERCIAL at
   74.89px. At 320 the four summed to 281.75 plus 18px of gaps
   against a 280px content box, so the last bar's right edge
   landed at 319.75 against the 300px inset and ran to the
   screen edge. It cleared on its own at 340 and above.

   The email already solves this at its own 320 with equal
   columns and an 8px label; the web now matches that
   behaviour. minmax(0,1fr) drops the min-content floor so the
   four tracks stay equal, the 8px label lets ORIGINATION
   (62.3px at 8px) sit inside a 65.5px column without breaking,
   and word-break is insurance for any future longer word.

   The page's own 20px inset is kept. The email's 15px is the
   email's page inset, not part of the staircase design.
   ============================================================ */
@media (max-width:359px){
  :root{--stairLab:8px}
  .bars{grid-auto-columns:minmax(0,1fr)}
  .bar .lab{word-break:break-word}
}


/* ============================================================
   Spanish: the two strings that live in CSS `content:` rather
   than in the markup, so they cannot come from copy.php.
   <html lang> is written by language_attributes(), which
   Polylang sets to es-ES on the Spanish page.

   The desktop rule carries no arrow - that is a separate
   .step::after in the min-width:760 block - while the mobile
   rule carries it inline, so the two are overridden separately
   and in that order.
   ============================================================ */
:lang(es) .step .n::before{content:"SEÑAL "}
:lang(es) .step > p::before{content:"QUÉ REVISAR"}
@media (max-width:759px){
  :lang(es) .step p::before{content:"QUÉ REVISAR \2192"}
}