/* ==========================================================================
   bex+Co. · Franchise Opportunity
   Shell duplicated from pipeline.bexandcofranchise.com (Handoff 13 §1).
   Tokens are copied verbatim from that template's :root. Nothing re-picked.

   KEYFRAME BUDGET IS 2 AND IT IS GATED (bex brand pack, relay 1717/1832).
   This file declares exactly two: `fadein` and `shimmer` — the same two the
   template ships. Every other movement is a transition driven by a class
   that IntersectionObserver toggles. Do not add a third.

   ONE EASING CURVE: cubic-bezier(.2,.7,.2,1). Do not introduce a second.
   ========================================================================== */

/* ---------- self-hosted faces (no CDN: a meeting-room wifi hiccup must
     not change the typography mid-pitch) ---------- */
@font-face{font-family:"EB Garamond";src:url(fonts/EBGaramond-roman.woff2) format("woff2");
  font-weight:400 600;font-style:normal;font-display:swap}
@font-face{font-family:"EB Garamond";src:url(fonts/EBGaramond-italic.woff2) format("woff2");
  font-weight:400 600;font-style:italic;font-display:swap}
@font-face{font-family:"Lato";src:url(fonts/Lato-normal-400.woff2) format("woff2");
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Lato";src:url(fonts/Lato-normal-700.woff2) format("woff2");
  font-weight:700;font-style:normal;font-display:swap}

/* ---------- tokens · verbatim from the pipeline template ---------- */
:root{
  --primary:#0F4B4E;
  --secondary:#A7AFAD;
  --blush:#F7E7E5;
  --iris:#EAD6FF;
  --paper:#FAF7F4;
  --tone:#fff;
  --ink:#211F1E;
  --muted:#5f5d5b;
  --amber-ink:#7A4409;
  --amber-bg:#FBEBD8;
  --iridescent:linear-gradient(115deg,#F7DCE6 0%,#EAD6FF 30%,#D9E0FA 55%,#CFEDE0 78%,#F8E6D4 100%);
  --serif:"EB Garamond",Georgia,serif;
  --sans:"Lato",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);
  --rail:236px;
  --r-sm:8px; --r-card:18px; --r-panel:24px;
  --sh-sm:0 1px 2px rgba(15,46,48,.05),0 6px 18px rgba(15,46,48,.06);
  --sh-md:0 8px 22px rgba(15,46,48,.08),0 26px 56px rgba(15,46,48,.10);
  --sh-lg:0 34px 80px rgba(15,46,48,.18);
  --line:rgba(33,31,30,.12);
  --line-dk:rgba(250,247,244,.14);
  --cell-1:#E7F0EF; --cell-2:#C9DEDC; --cell-3:#9CC2BF; --cell-4:#78ADA9; --cell-5:#0F4B4E;

  /* --- added for this deck. Derived from the tokens above, never re-picked. --- */
  --primary-lift:#15646A;            /* one step up for chart contrast on ivory */
  --accent-ink:#0F4B4E;              /* brand as TEXT stays the deep value (canon 771) */
  --on-dark:#FAF7F4;
  --on-dark-dim:rgba(250,247,244,.72);
  --dur-hover:.2s;                   /* template-measured */
  --dur-card:.3s;
  --dur-reveal:.35s;                 /* nothing in the template exceeds .38s */
  --glow-x:50%; --glow-y:0%;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html.nav-locked{overflow:hidden}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:16px;line-height:1.55;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--primary);outline-offset:3px;border-radius:4px}

.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--primary);color:var(--paper);
  padding:12px 18px;border-radius:0 0 10px 0;font-weight:700;font-size:.75rem;letter-spacing:.14em;
  text-transform:uppercase;text-decoration:none}
.skip:focus{left:0}

/* ==================== app shell ==================== */
.shell{display:grid;grid-template-columns:var(--rail) 1fr;min-height:100vh}

.rail{
  background:linear-gradient(180deg,var(--primary) 0%,#0B3A3C 100%);
  color:var(--paper);position:sticky;top:0;height:100vh;
  display:flex;flex-direction:column;padding:26px 0 18px;z-index:50;
}
.rail :focus-visible{outline-color:var(--iris)}
.rail .logo{padding:0 24px 20px;border-bottom:1px solid var(--line-dk)}
/* The live template fakes a white wordmark with invert(1) brightness(1.7)
   because it did not know bex-wordmark-light.svg exists. It does — same
   geometry, fill #fffbfa. Use the real asset, drop the filter. */
.rail .logo img{height:24px;width:auto}
.rail .logo .tag{display:block;font-weight:700;font-size:.56rem;letter-spacing:.26em;
  text-transform:uppercase;color:rgba(250,247,244,.62);margin-top:10px}
.rail nav{padding:14px 12px;flex:1;overflow-y:auto}
.rail .grouplab{display:block;font-weight:700;font-size:.56rem;letter-spacing:.24em;
  text-transform:uppercase;color:rgba(250,247,244,.78);padding:14px 14px 6px}

.navbtn{
  display:flex;align-items:center;gap:11px;width:100%;text-align:left;
  background:none;border:none;color:rgba(250,247,244,.86);text-decoration:none;
  font-family:var(--sans);font-weight:700;font-size:.82rem;letter-spacing:.02em;
  padding:10px 14px;border-radius:12px;cursor:pointer;
  transition:background var(--dur-hover) var(--ease),color var(--dur-hover) var(--ease);
}
.navbtn:hover{background:rgba(250,247,244,.08);color:var(--paper)}
.navbtn[aria-current="page"]{background:rgba(250,247,244,.16);color:var(--paper)}
.navbtn .nidx{font-size:.62rem;font-weight:700;opacity:.6;min-width:16px;font-variant-numeric:tabular-nums}
.navbtn[aria-current="page"] .nidx{opacity:.95}

.rail .foot{padding:14px 22px 0;border-top:1px solid var(--line-dk)}
.rail .foot p{margin:0;font-size:.68rem;line-height:1.5;color:rgba(250,247,244,.66)}
.rail .foot b{color:var(--paper)}
.spark{color:var(--iris)}

/* ---------- main column ---------- */
.main{min-width:0;max-width:100%;padding:0 clamp(18px,3.4vw,44px) 40px}
.topbar{
  position:sticky;top:0;z-index:40;
  background:rgba(250,247,244,.9);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  margin:0 calc(clamp(18px,3.4vw,44px)*-1);padding:0 clamp(18px,3.4vw,44px);
  height:62px;display:flex;align-items:center;justify-content:space-between;gap:16px;
  border-bottom:1px solid var(--line);
}
.crumb{font-weight:700;font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.menu-toggle{display:none;align-items:center;gap:8px;background:none;border:1px solid var(--line);
  border-radius:999px;padding:7px 14px;font-family:var(--sans);font-weight:700;font-size:.62rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink);cursor:pointer;
  transition:background var(--dur-hover) var(--ease)}
.menu-toggle:hover{background:rgba(15,75,78,.06)}
.menu-toggle svg{width:15px;height:15px}
.scrim{display:none;position:fixed;inset:0;background:rgba(15,46,48,.4);z-index:45;
  opacity:0;pointer-events:none;transition:opacity var(--dur-reveal) var(--ease)}

.doc{max-width:1080px;margin:0 auto;padding-top:26px}
.page{animation:fadein .35s var(--ease)}
@keyframes fadein{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ==================== type ==================== */
.sec{margin:0 0 clamp(46px,6.5vw,80px)}
.sec:last-child{margin-bottom:0}

.kicker{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.kicker .knum{font-family:var(--serif);font-style:italic;font-size:1rem;color:var(--primary);opacity:.75}
.kicker .keyebrow{font-weight:700;font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:var(--primary)}
/* NOTE: the template's sibling deck carries a decorative dash after the eyebrow.
   DH canon 729 bans the eyebrow line/dash as an AI tell, so it is dropped here.
   The 01/02 index stays — it is pagination, not decoration. */

h1,h2,h3{font-family:var(--serif);font-weight:500;margin:0;letter-spacing:-.01em}
h1{font-size:clamp(2.1rem,4.4vw,3.5rem);line-height:1.06}
h2{font-size:clamp(1.5rem,2.6vw,2.2rem);line-height:1.14}
h3{font-size:1.15rem;line-height:1.25}
.it{font-style:italic}
h1 .it,h2 .it{color:var(--primary)}
.lead{font-size:clamp(1rem,1.35vw,1.16rem);line-height:1.62;color:var(--muted);max-width:62ch;margin:14px 0 0}
.sub{font-size:.95rem;color:var(--muted);max-width:64ch;margin:10px 0 0}

/* Stat lines must not widow (canon 729). */
.nowrap{white-space:nowrap}

/* ==================== hero ==================== */
.hero{position:relative;border-radius:var(--r-panel);overflow:hidden;
  background:linear-gradient(165deg,var(--primary) 0%,#0B3A3C 62%,#09312F 100%);
  color:var(--on-dark);padding:clamp(30px,4.6vw,58px) clamp(22px,3.4vw,52px);
  box-shadow:var(--sh-md)}
/* The cursor glow. A radial light that tracks the pointer — no keyframe,
   just two custom properties the JS writes. Off for touch and for PRM. */
.hero[data-glow]::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(600px circle at var(--glow-x) var(--glow-y),
    rgba(234,214,255,.20), rgba(234,214,255,.06) 38%, transparent 68%);
  transition:opacity var(--dur-card) var(--ease);
}
.hero > *{position:relative}
.hero h1{color:var(--on-dark)}
.hero h1 .it{color:var(--iris)}
.hero .lead{color:var(--on-dark-dim);max-width:56ch}
.hero .kicker .knum,.hero .kicker .keyebrow{color:var(--iris)}

/* ==================== KPI tiles ==================== */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:24px}
.kpis.three{grid-template-columns:repeat(3,1fr)}
.kpis.two{grid-template-columns:repeat(2,1fr)}
.kpi{background:var(--tone);border:1px solid var(--line);border-radius:var(--r-card);
  padding:18px 20px 15px;box-shadow:var(--sh-sm);
  transition:box-shadow var(--dur-card) var(--ease),transform var(--dur-card) var(--ease)}
.kpi:hover{box-shadow:var(--sh-md);transform:translateY(-2px)}
.kpi .n{font-family:var(--serif);font-weight:500;font-size:clamp(1.9rem,3vw,2.5rem);line-height:1;
  color:var(--primary);font-variant-numeric:tabular-nums}
.kpi .l{font-weight:700;font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);margin-top:8px}
.kpi .s{font-size:.74rem;color:var(--muted);margin-top:4px;line-height:1.4}
/* The signature tile. One per set. The eye lands here with no extra copy. */
.kpi.sig{background:var(--iridescent);background-size:200% 200%;
  animation:shimmer 16s var(--ease) infinite;border-color:transparent}
@keyframes shimmer{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
.kpi.sig .n{color:#0B3A3C}
.kpi.sig .l,.kpi.sig .s{color:rgba(33,31,30,.72)}

/* on dark */
.hero .kpis{margin-top:30px}
.hero .kpi{background:rgba(250,247,244,.07);border-color:rgba(250,247,244,.16);box-shadow:none}
.hero .kpi:hover{background:rgba(250,247,244,.11);transform:translateY(-2px);box-shadow:none}
.hero .kpi .n{color:var(--on-dark)}
.hero .kpi .l,.hero .kpi .s{color:var(--on-dark-dim)}
.hero .kpi.sig{background:var(--iridescent);background-size:200% 200%;border-color:transparent}
.hero .kpi.sig .n{color:#0B3A3C}
.hero .kpi.sig .l,.hero .kpi.sig .s{color:rgba(33,31,30,.72)}

/* ==================== cards / panels ==================== */
.card{background:var(--tone);border:1px solid var(--line);border-radius:var(--r-panel);
  box-shadow:var(--sh-sm);margin-top:22px;padding:clamp(20px,2.6vw,30px)}
.card-head{display:flex;align-items:baseline;justify-content:space-between;gap:14px;flex-wrap:wrap;
  margin-bottom:18px}
.card-head h2,.card-head h3{font-family:var(--serif);font-weight:500}
.card-head .note{font-size:.78rem;color:var(--muted)}

/* A card that carries the signature treatment, same job as .kpi.sig:
   one item in a set gets the iridescent ground so the eye lands there
   without any extra copy. */
.card.sig{background:var(--iridescent);background-size:200% 200%;
  animation:shimmer 16s var(--ease) infinite;border-color:transparent}
.card.sig .sub{color:rgba(33,31,30,.76)}
.card.sig .chip{background:rgba(11,58,60,.12);color:#0B3A3C}

.sigband{background:var(--iridescent);background-size:200% 200%;
  animation:shimmer 16s var(--ease) infinite;border-radius:var(--r-panel);
  padding:24px clamp(18px,2.4vw,32px) 26px;margin-top:22px}
.sigband h2,.sigband h3{color:#0B3A3C}
.sigband p{color:rgba(33,31,30,.76)}

.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}

.chip{display:inline-flex;align-items:center;gap:7px;font-weight:700;font-size:.58rem;
  letter-spacing:.16em;text-transform:uppercase;border-radius:999px;padding:5px 12px;
  background:rgba(15,75,78,.08);color:var(--primary)}
.chip.amber{background:var(--amber-bg);color:var(--amber-ink)}
.chiprow{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}

/* ==================== "what this means" ====================
   House rule: a number the presenter cannot explain out loud is a number
   that does not ship. Every stat gets plain English saying what it measures
   and why the reader should care. This is the presenter's script, on screen. */
/* Label sits ABOVE the text, and there is no left rule. Both were called out
   in review: the rule read as a blockquote and the inline label made the
   sentence start in a different place on every block. */
.means{margin-top:18px;padding:14px 16px;border-radius:var(--r-card);
  background:rgba(15,75,78,.05)}
.means .mlab{display:block;font-weight:700;font-size:.58rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--primary);margin-bottom:6px}
.means p{margin:0;font-size:.88rem;line-height:1.6;color:var(--ink)}
.means p b{color:var(--primary)}
.sigband .means{background:rgba(11,58,60,.07)}
.sigband .means .mlab{color:#0B3A3C}
.sigband .means p{color:rgba(33,31,30,.82)}

/* ---- notes that used to live INSIDE the hero ----
   Review call: the green hero holds the big statement and the big numbers,
   nothing else. The explanation and the sources drop out of the box and sit
   underneath it as quiet small text. */
/* The notes belong to the hero, so the section gap moves below THEM, not
   between the box and its own footnotes. */
.sec.hero{margin-bottom:0}
.hero-notes{max-width:1080px;margin:15px auto clamp(46px,6.5vw,80px);padding:0 2px}
.hero-notes .means{background:none;padding:0;margin-top:0}
.hero-notes .means .mlab{color:var(--muted)}
.hero-notes .means p{font-size:.8rem;line-height:1.6;color:var(--muted)}
.hero-notes .means p b{color:var(--ink);font-weight:700}
.hero-notes .srcline{margin-top:9px}
@media(max-width:520px){
  .means{padding:12px 14px}
}

/* ==================== the source line ====================
   Every number on this site carries one. It is the whole credibility play. */
.src{font-size:.7rem;line-height:1.5;color:var(--muted);margin-top:14px}
.src b{font-weight:700;color:var(--ink)}
.src a{color:var(--primary);text-decoration:underline;text-underline-offset:2px;
  text-decoration-thickness:1px;text-decoration-color:rgba(15,75,78,.35);
  transition:text-decoration-color var(--dur-hover) var(--ease)}
.src a:hover{text-decoration-color:var(--primary)}
.srcline{font-size:.66rem;color:var(--muted);margin-top:7px;letter-spacing:.01em}
/* on dark: .6 alpha measured 4.42:1, under the 4.5 floor. .78 clears it. */
.hero .srcline,.srcline.on-dark{color:rgba(250,247,244,.78)}

/* ==================== DATA VIZ ====================
   Hand-built SVG and CSS. No chart library, no default chart chrome.
   Everything is labelled directly. The six-feet-away test governs. */

/* --- comparison bars: label / track / value on one row --- */
/* The grid lives on .bars, and each .bar is display:contents, so every row
   shares ONE set of column widths. When each .bar was its own grid the label
   column sized to its own text, so a longer label pushed that row's track
   right and the bars stopped lining up. */
.bars{display:grid;grid-template-columns:minmax(96px,max-content) 1fr minmax(70px,auto);
  column-gap:14px;row-gap:14px;align-items:center}
.bar{display:contents}
.bar .blab{font-weight:700;font-size:.74rem;letter-spacing:.02em}
.bar .btrack{height:10px;border-radius:999px;background:rgba(15,75,78,.09);overflow:hidden}
.bar .bfill{display:block;height:100%;border-radius:999px;background:var(--primary);
  transform:scaleX(0);transform-origin:left center;
  transition:transform .55s var(--ease)}
.is-drawn .bar .bfill{transform:scaleX(1)}
.bar .bval{font-family:var(--serif);font-size:1.05rem;color:var(--primary);text-align:right;
  font-variant-numeric:tabular-nums}
.bar.muted .bfill{background:var(--secondary)}
.bar.muted .bval{color:var(--muted)}
/* stagger without a keyframe */
.bar:nth-child(2) .bfill{transition-delay:.07s}
.bar:nth-child(3) .bfill{transition-delay:.14s}
.bar:nth-child(4) .bfill{transition-delay:.21s}
.bar:nth-child(5) .bfill{transition-delay:.28s}
.bar:nth-child(6) .bfill{transition-delay:.35s}
/* page 02 charts the 7 open salons, so the ladder of delays needs two more
   rungs. Same .07s step, same curve, no new keyframe. */
.bar:nth-child(7) .bfill{transition-delay:.42s}
.bar:nth-child(8) .bfill{transition-delay:.49s}

/* --- the funnel ladder (metro pros → independents → the 20 you need) --- */
.ladder{display:flex;flex-direction:column;gap:12px}
.lrow{display:grid;grid-template-columns:64px 1fr;gap:16px;align-items:start;
  padding:16px 18px;border:1px solid var(--line);border-radius:var(--r-card);background:var(--tone)}
.lrow .lbadge{font-weight:700;font-size:.56rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--primary);background:rgba(15,75,78,.08);border-radius:999px;padding:4px 0;text-align:center}
.lrow .lnum{font-family:var(--serif);font-size:clamp(1.5rem,2.6vw,2.1rem);line-height:1.1;
  color:var(--primary);font-variant-numeric:tabular-nums}
.lrow .lnum em{font-style:italic}
.lrow .ltext{font-size:.82rem;color:var(--muted);margin-top:5px}
.lrow.final{background:var(--iridescent);background-size:200% 200%;
  animation:shimmer 16s var(--ease) infinite;border-color:transparent}
.lrow.final .lnum{color:#0B3A3C}
.lrow.final .ltext{color:rgba(33,31,30,.74)}
.lrow.final .lbadge{background:rgba(11,58,60,.12);color:#0B3A3C}

/* --- ripple map: the compounding city-by-city story --- */
.ripple{width:100%;height:auto;display:block}
.ripple .rwave{fill:none;stroke:var(--primary);opacity:0;
  transition:opacity .6s var(--ease),transform .8s var(--ease);
  transform-origin:center;transform:scale(.35)}
.ripple.is-drawn .rwave{opacity:.28;transform:scale(1)}
.ripple.is-drawn .rwave.w2{transition-delay:.12s;opacity:.18}
.ripple.is-drawn .rwave.w3{transition-delay:.24s;opacity:.10}
.ripple .rdot{fill:var(--primary);opacity:0;transition:opacity .4s var(--ease)}
.ripple.is-drawn .rdot{opacity:1}
.ripple .rdot.next{fill:none;stroke:var(--primary);stroke-width:2;stroke-dasharray:3 3}
.ripple .rlab{font-family:var(--sans);font-size:9px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;fill:var(--muted);opacity:0;transition:opacity .4s var(--ease)}
.ripple.is-drawn .rlab{opacity:1}
.ripple .rlink{stroke:var(--primary);stroke-width:1;opacity:.22;fill:none;
  transition:stroke-dashoffset .9s var(--ease)}
/* Map additions for page 03. The map is the page, so it has to survive a
   phone being passed across a table.
   .rland is the landmass itself, a quiet fill so the marks read as the data.
   .rlab at 9px scales to roughly 5px inside a 744-unit viewBox on a 390px
   screen, which is unreadable. Bumped to 11px, and below 820px the map keeps
   a floor width and scrolls sideways inside its .tblwrap parent instead of
   shrinking its own type into nothing. */
.ripple .rland{fill:var(--cell-1);stroke:rgba(15,75,78,.34);stroke-width:.7}
/* .terr is a proportional-area circle: one per state, sized by how many
   territories are signed there. Held back to a wash so the solid open-salon
   marker and the dashed target rings still read as the foreground. */
.ripple .rdot.terr{fill-opacity:.32;stroke:var(--primary);stroke-width:1;stroke-opacity:.72}
.ripple .rlab{font-size:11px}
.ripple .rlab.big{font-size:13px;fill:var(--primary)}
@media(max-width:820px){
  .ripple{min-width:640px}
}

/* --- line / trend paths --- */
[data-draw-line]{transition:stroke-dashoffset .9s var(--ease)}

/* --- heat cells, using the template's contrast-checked ramp --- */
.heat{display:flex;gap:4px;align-items:flex-end}
.heat .hc{flex:1;border-radius:var(--r-sm);min-height:8px;
  transform:scaleY(0);transform-origin:bottom;transition:transform .5s var(--ease)}
.is-drawn .heat .hc{transform:scaleY(1)}
.hc.c1{background:var(--cell-1)} .hc.c2{background:var(--cell-2)}
.hc.c3{background:var(--cell-3)} .hc.c4{background:var(--cell-4)}
.hc.c5{background:var(--cell-5)}

/* --- the honest table --- */
.tbl{width:100%;border-collapse:collapse;font-size:.84rem}
.tbl th,.tbl td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:top}
.tbl thead th{font-weight:700;font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);border-bottom:1px solid var(--line)}
.tbl tbody tr:last-child td{border-bottom:none}
.tbl .rowname{font-weight:700}
.tbl .rowsub{display:block;font-weight:400;font-size:.74rem;color:var(--muted);margin-top:2px}
.tbl tr.us{background:rgba(15,75,78,.05)}
.tbl tr.us .rowname{color:var(--primary)}
.tblwrap{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ==================== reveal ====================
   Transition-driven, not keyframe-driven. Budget stays at 2. */
.js [data-reveal]{opacity:0;transform:translateY(14px);
  transition:opacity var(--dur-reveal) var(--ease),transform var(--dur-reveal) var(--ease)}
.js [data-reveal].is-revealed{opacity:1;transform:none}

/* ==================== pager ==================== */
.pager{display:flex;justify-content:space-between;gap:14px;margin-top:clamp(40px,6vw,72px);
  padding-top:26px;border-top:1px solid var(--line)}
.pgbtn{display:inline-flex;flex-direction:column;gap:3px;text-decoration:none;
  padding:14px 20px;border:1px solid var(--line);border-radius:var(--r-card);background:var(--tone);
  min-width:0;max-width:47%;
  transition:transform var(--dur-hover) var(--ease),box-shadow var(--dur-hover) var(--ease),
    border-color var(--dur-hover) var(--ease)}
.pgbtn:hover{box-shadow:var(--sh-sm);border-color:rgba(15,75,78,.3)}
/* canon 745/762: in-flow actions get an arrow nudge, never an underline */
.pgbtn .pgdir{font-weight:700;font-size:.56rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.pgbtn .pgname{font-family:var(--serif);font-size:1.05rem;color:var(--primary);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pgbtn .arw{display:inline-block;transition:transform var(--dur-hover) var(--ease)}
.pgbtn.next{text-align:right;margin-left:auto}
.pgbtn.next:hover .arw{transform:translateX(3px)}
.pgbtn.prev:hover .arw{transform:translateX(-3px)}

/* ==================== footer / disclosure ==================== */
.disclosure{margin-top:34px;padding:16px 18px;border:1px solid var(--line);border-radius:var(--r-card);
  background:rgba(15,75,78,.03)}
.disclosure p{margin:0;font-size:.68rem;line-height:1.55;color:var(--muted)}
.disclosure b{color:var(--ink)}

/* ==================== responsive ==================== */
@media(max-width:1000px){
  .kpis{grid-template-columns:repeat(2,1fr)}
  .grid3{grid-template-columns:1fr 1fr}
}
@media(max-width:820px){
  .shell{grid-template-columns:1fr}
  .rail{position:fixed;left:0;top:0;bottom:0;width:min(300px,84vw);height:100vh;
    transform:translateX(-104%);transition:transform var(--dur-reveal) var(--ease);
    box-shadow:var(--sh-lg)}
  .rail.is-open{transform:none}
  .menu-toggle{display:inline-flex}
  .scrim{display:block}
  .rail.is-open ~ .scrim,html.nav-locked .scrim{opacity:1;pointer-events:auto}
  .grid2,.grid3{grid-template-columns:1fr}
  .kpis.three{grid-template-columns:repeat(2,1fr)}
  .lrow{grid-template-columns:52px 1fr;gap:12px}
  .bars{grid-template-columns:minmax(78px,max-content) 1fr minmax(58px,auto);column-gap:10px;row-gap:12px}
}
@media(max-width:520px){
  /* On a phone the clamp floor (2.1rem) let a long stat headline eat the
     whole first screen, pushing the numbers below the fold. The deck gets
     passed across a table, so the headline AND the first stat must land
     together. */
  h1{font-size:1.85rem;line-height:1.14}
  h2{font-size:1.4rem}
  .hero{padding:24px 20px 26px}
  .kpis,.kpis.three,.kpis.two{grid-template-columns:1fr 1fr}
  .kpi{padding:14px 15px 12px}
  .doc{padding-top:18px}
  .pgbtn{max-width:48%;padding:12px 14px}
  .pgbtn .pgname{font-size:.92rem}
  /* align-items:center is inherited from the desktop .bars rule. In a COLUMN
     flex container that centres each row at its own content width, so the
     tracks end up ragged. Stretch them. */
  .bars{display:flex;flex-direction:column;align-items:stretch;gap:16px}
  .bar{display:grid;grid-template-columns:1fr;gap:5px}
  .bar .bval{text-align:left}
}

/* ==================== print (a pitch gets printed) ==================== */
@media print{
  .rail,.topbar,.scrim,.menu-toggle,.pager{display:none!important}
  .shell{grid-template-columns:1fr}
  body{background:#fff}
  .card,.kpi{break-inside:avoid;box-shadow:none}
  .js [data-reveal]{opacity:1!important;transform:none!important}
}

/* ==================== reduced motion ====================
   The template's own global pattern, plus per-component opt-outs.
   PRM wins over everything, including the motion-on-by-default ruling. */
@media(prefers-reduced-motion:reduce){
  *{transition-duration:.01ms!important;animation-duration:.01ms!important;
    animation-iteration-count:1!important}
  .page{animation:none}
  .kpi.sig,.sigband,.lrow.final{animation:none}
  .hero[data-glow]::before{display:none}
  .js [data-reveal]{opacity:1;transform:none}
  .bar .bfill{transform:scaleX(1)}
  .heat .hc{transform:scaleY(1)}
  .ripple .rwave{opacity:.28;transform:scale(1)}
  .ripple .rdot,.ripple .rlab{opacity:1}
}