@import url("assets/fonts/fonts.css");

/* ── TPS brand tokens ───────────────────────────────────────────────── */
:root{
  --green:#085D3C;          /* Society Green — Pantone 3435C */
  --green-deep:#05452C;     /* darker step, greens only */
  --support:#3A5C36;
  --ink:#2E3944;            /* Off Black — headings, 11.4:1 on paper */
  /* text colours are contrast-graded: every one clears WCAG AA (4.5:1)
     on BOTH --paper and --sand. --stone is decorative only, never text. */
  --body:#4E5763;           /* body copy      — 7.09:1 paper / 5.38:1 sand */
  --muted:#5C5750;          /* mono labels    — 6.93:1 paper / 5.26:1 sand */
  --stone:#8D8981;          /* hairlines/dividers ONLY — 3.37:1, fails as text */
  --paper:#FDFBF9;
  --sand:#F2EEE9;        /* was #E2DCD4 — read as grey, muddied all text */
  --sand-line:#DED7CE;
  --line:#E7E2DA;
  /* single-hue sequential ramp — never two greens as adjacent categories */
  --g1:#E4EDE8; --g2:#BFD5C9; --g3:#8FB8A5; --g4:#4E8A6D; --g5:#085D3C;
  --W:1920px; --H:1080px;
  --pad:104px;
}

*{box-sizing:border-box;margin:0;padding:0}
/* the stage is scaled with transform, which does not shrink its layout box,
   so the untransformed 1920px width spilled sideways at laptop widths. The
   painted (scaled) content is always inside the viewport, so clip the rest. */
html{background:#6E6A64;overflow-x:hidden}
body{
  background:#6E6A64;overflow-x:hidden;
  font-family:"Mulish",-apple-system,system-ui,sans-serif;
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  font-variant-numeric:tabular-nums;
}

/* ── slide frame ────────────────────────────────────────────────────── */
.deck{display:flex;flex-direction:column;align-items:center;gap:28px;padding:28px 0}
.slide{
  position:relative;width:var(--W);height:var(--H);
  background:var(--paper);color:var(--ink);
  overflow:hidden;flex:none;
  /* asymmetric: the takeaway strip already reads as bottom margin, so the frame
     does not need a full --pad below it. The reclaimed ~56px is what lets the
     enlarged body type fit without any slide spilling into the takeaway. */
  padding:84px var(--pad) 60px;
  display:flex;flex-direction:column;
}
.slide.green{background:var(--green);color:#fff}
.slide.sand{background:var(--sand)}

/* eyebrow / running head */
.eyebrow{
  font-family:"Space Mono",ui-monospace,monospace;
  font-size:14px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted);
}
.green .eyebrow{color:rgba(255,255,255,.80)}
.head{display:flex;justify-content:space-between;align-items:baseline;
  padding-bottom:16px;border-bottom:1px solid var(--line);margin-bottom:32px}
.green .head{border-bottom-color:rgba(255,255,255,.22)}

h1{font-size:104px;line-height:.97;font-weight:800;letter-spacing:-.035em;text-wrap:balance}
h2{font-size:58px;line-height:1.03;font-weight:800;letter-spacing:-.028em;text-wrap:balance}
h3{font-size:26px;line-height:1.18;font-weight:700;letter-spacing:-.01em}
p{font-size:21px;line-height:1.52;font-weight:400;color:var(--body);max-width:62ch}
.green p{color:rgba(255,255,255,.90)}
.lede{font-size:25px;line-height:1.45;font-weight:400;color:var(--ink)}
.green .lede{color:rgba(255,255,255,.94)}
strong{font-weight:700;color:var(--ink)}
.green strong{color:#fff}

/* takeaway strip pinned to the foot of every content slide */
.takeaway{
  /* the 26px top margin is a hard guard: body content can never sit flush
     against the takeaway rule, which is what made several slides look cramped */
  margin-top:auto;padding-top:18px;border-top:1px solid var(--line);
  display:flex;gap:18px;align-items:baseline;flex:none;
}
.body + .takeaway{margin-top:26px}
.green .takeaway{border-top-color:rgba(255,255,255,.22)}
.takeaway .tag{font-family:"Space Mono",monospace;font-size:13px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--green);white-space:nowrap;padding-top:4px}
.green .takeaway .tag{color:rgba(255,255,255,.82)}
.takeaway .txt{font-size:23px;font-weight:600;line-height:1.35;color:var(--ink);max-width:104ch}
.green .takeaway .txt{color:#fff}

/* ── generic pieces ─────────────────────────────────────────────────── */
.body{flex:1;min-height:0}
.grid{display:grid;gap:34px}
.rule{height:1px;background:var(--line)}

.stat{display:flex;flex-direction:column;gap:6px}
.stat .n{font-size:78px;line-height:.9;font-weight:800;letter-spacing:-.04em;color:var(--green)}
.green .stat .n{color:#fff}
.stat .l{font-size:18px;font-weight:600;color:var(--ink)}
.green .stat .l{color:rgba(255,255,255,.96)}
.stat .s{font-family:"Space Mono",monospace;font-size:13px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--muted)}
.green .stat .s{color:rgba(255,255,255,.80)}

.card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:28px 30px;
  display:flex;flex-direction:column;gap:12px}
.sand .card{background:#fff;border-color:var(--sand-line)}
.sand tbody tr,.sand thead th{border-color:var(--sand-line)}
.sand .rule,.sand .takeaway{border-color:var(--sand-line)}
.green .card{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.18)}
.card .k{font-family:"Space Mono",monospace;font-size:13px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--green)}
.green .card .k{color:rgba(255,255,255,.85)}
.card p{font-size:19px}

.phone{border-radius:22px;border:1px solid var(--line);background:#fff;
  box-shadow:0 18px 44px rgba(8,93,60,.10);overflow:hidden;display:block}
.phone img{display:block;width:100%;height:auto}
.shot{border-radius:12px;border:1px solid var(--line);overflow:hidden;background:#fff}
.shot img{display:block;width:100%;height:auto}
/* screenshot columns: crop from the top so the caption below always fits */
.shot.crop{flex:none}
.shot.crop img{height:398px;object-fit:cover;object-position:top}
.shot.crop.sm img{height:250px}

.logo-tps{height:44px}
.logo-or{height:30px}
.logo-gallop{height:22px}

table{border-collapse:collapse;width:100%}
th,td{text-align:left;padding:17px 20px;font-size:20px;color:var(--ink)}
thead th{font-family:"Space Mono",monospace;font-size:13px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);font-weight:400;padding-bottom:12px}
tbody tr{border-top:1px solid var(--line)}
td.num{font-weight:700;color:var(--green);text-align:right;font-size:22px}
td.first{font-weight:600}

.pill{display:inline-block;font-family:"Space Mono",monospace;font-size:13px;
  letter-spacing:.16em;text-transform:uppercase;padding:7px 14px;border-radius:999px;
  border:1px solid var(--line);color:var(--muted)}
.pill.on{background:var(--green);border-color:var(--green);color:#fff}
.pill.next{border-color:var(--green);color:var(--green)}
.pill.next-up{border-color:var(--green);color:var(--green);background:transparent}
/* on a green slide the green fill disappears — invert the whole pill set */
.green .pill{border-color:rgba(255,255,255,.45);color:rgba(255,255,255,.92)}
.green .pill.on{background:#fff;border-color:#fff;color:var(--green);font-weight:700}
.green .pill.next-up{background:transparent;border-color:rgba(255,255,255,.66);color:#fff}

/* body sets tabular-nums globally, which gives a decimal point a full digit
   slot — it spaced the big in-chart callouts ("5.5x") out oddly */
.chart text{font-family:"Space Mono",monospace;font-variant-numeric:normal}
.chart .lbl{font-family:"Mulish",sans-serif}

/* ── partnership-category slides ────────────────────────────────────────
   One layout, reused by every category so the tiers read as a set.      */
.blist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.blist li{position:relative;padding-left:26px;font-size:18px;line-height:1.42;color:var(--body)}
.blist li::before{content:"";position:absolute;left:2px;top:.6em;width:7px;height:7px;
  border-radius:50%;background:var(--green)}
.blist li strong{color:var(--ink);font-weight:700}
.green .blist li{color:rgba(255,255,255,.92)}
.green .blist li::before{background:#fff}
.green .blist li strong{color:#fff}
.blist.tight li{font-size:17.5px;gap:8px}

.colh{font-family:"Space Mono",monospace;font-size:14px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--green);display:block;margin-bottom:16px;
  padding-bottom:10px;border-bottom:1px solid var(--line)}
.green .colh{color:#fff;border-bottom-color:rgba(255,255,255,.3)}
.sand .colh{border-bottom-color:var(--sand-line)}

.cat-title{font-size:72px;line-height:.98;font-weight:800;letter-spacing:-.035em;color:var(--ink)}
.green .cat-title{color:#fff}

.termbar{margin-top:auto;display:flex;align-items:baseline;gap:52px;flex-wrap:wrap;
  border-top:2px solid var(--green);padding-top:20px}
.green .termbar{border-top-color:rgba(255,255,255,.55)}
.termbar .lbl{font-family:"Space Mono",monospace;font-size:14px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted);margin-right:12px}
.green .termbar .lbl{color:rgba(255,255,255,.84)}
.termbar .val{font-size:30px;font-weight:800;letter-spacing:-.02em;color:var(--green)}
.green .termbar .val{color:#fff}

/* the tier ladder on the categories overview */
.ladder .row{display:grid;grid-template-columns:.86fr 1.6fr auto;gap:38px;align-items:center;
  padding:21px 0;border-top:1px solid var(--line)}
.ladder .row:last-child{border-bottom:1px solid var(--line)}
.sand .ladder .row{border-top-color:var(--sand-line)}
.sand .ladder .row:last-child{border-bottom-color:var(--sand-line)}
.ladder .nm{font-size:27px;font-weight:800;letter-spacing:-.02em;color:var(--ink)}
.ladder .ds{font-size:18px;line-height:1.4;color:var(--body)}
.ladder .wt{display:flex;gap:8px}
.ladder .wt i{width:15px;height:15px;border-radius:50%;background:#CDD9D2;display:block}
.sand .ladder .wt i{background:#D8D0C6}
.ladder .wt i.on{background:var(--green)}
.ladder .row.soft .nm{color:var(--body);font-size:24px}

/* provenance line under any chart or figure */
.source{
  font-family:"Space Mono",monospace;font-size:13px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);margin-top:14px;display:block;
}
.green .source{color:rgba(255,255,255,.80)}

/* ── scroll reveal ──────────────────────────────────────────────────────
   Blocks are tagged + staggered by JS (--d). Motion is short and only ever
   opacity/transform, so it stays cheap and never blocks reading.        */
[data-anim]{
  opacity:0;transform:translateY(20px);
  transition:opacity .62s cubic-bezier(.22,.61,.36,1) var(--d,0ms),
             transform .62s cubic-bezier(.22,.61,.36,1) var(--d,0ms);
  will-change:opacity,transform;
}
.is-in [data-anim]{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  [data-anim]{opacity:1!important;transform:none!important;transition:none!important}
}
@media print{
  [data-anim]{opacity:1!important;transform:none!important;transition:none!important}
}

/* print → one slide per page */
@page{size:1920px 1080px;margin:0}
@media print{
  html,body{background:#fff}
  .deck{gap:0;padding:0}
  .slide{break-after:page;box-shadow:none}
  .slide:last-child{break-after:auto}
}

/* ── website mode: scale the fixed 1920×1080 stage to any viewport ───── */
.stage{transform-origin:top center}
.navbar{
  position:fixed;left:0;right:0;bottom:0;z-index:50;
  display:flex;align-items:center;justify-content:center;gap:18px;
  padding:12px;background:rgba(8,93,60,.94);backdrop-filter:blur(8px);
}
.navbar button{
  font-family:"Space Mono",monospace;font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  background:transparent;color:#fff;border:1px solid rgba(255,255,255,.4);
  border-radius:999px;padding:8px 16px;cursor:pointer;
}
.navbar button:hover{background:rgba(255,255,255,.14)}
.navbar button:focus-visible{outline:2px solid #fff;outline-offset:2px}
.navbar .count{font-family:"Space Mono",monospace;font-size:11px;letter-spacing:.18em;
  color:rgba(255,255,255,.85);min-width:70px;text-align:center}
.navbar a{font-family:"Space Mono",monospace;font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.5)}
.slide{scroll-margin-top:20px}
@media print{.navbar{display:none}.stage{transform:none !important;height:auto !important}}

/* ── responsive: reflow to a single readable column on small screens ── */
@media screen and (max-width:1000px){
  html,body{background:var(--paper)}
  .stage{transform:none !important;height:auto !important}
  .deck{gap:0;padding:0}
  .slide{
    width:100%;height:auto;min-height:0;padding:44px 22px 40px;
    display:block;overflow:visible;
  }
  .slide + .slide{border-top:1px solid var(--line)}
  .slide.green + .slide.green{border-top-color:rgba(255,255,255,.2)}
  /* full-bleed cover + closing slides use absolute positioning — unstack them */
  .slide[style*="padding:0"]{padding:44px 22px 40px !important}
  .slide[style*="padding:0"] > div{
    position:static !important;display:block !important;grid-template-columns:1fr !important}
  .slide[style*="padding:0"] > div > div{padding:0 !important;position:static !important}
  .slide[style*="padding:0"] img[style*="position:absolute"]{
    position:static !important;width:56% !important;max-width:220px;margin:18px 12px 0 0;
    display:inline-block;border-radius:16px !important;box-shadow:0 10px 26px rgba(0,0,0,.28) !important}
  .slide[style*="padding:0"] div[style*="background:rgba(8,93,60"]{display:none !important}
  .slide[style*="padding:0"] img[style*="object-fit:cover"]{
    position:static !important;width:100% !important;height:190px !important;
    object-fit:cover;border-radius:10px;margin-top:22px}

  /* every multi-column grid becomes one column */
  /* 1fr == minmax(auto,1fr): the track floor is the item min-content, so a
     long card or table kept the column wider than the phone. minmax(0,1fr)
     lets it actually shrink. */
  .grid,[style*="grid-template-columns"]{grid-template-columns:minmax(0,1fr) !important;gap:22px !important}
  [style*="display:grid"]{display:grid !important}
  [style*="border-left:1px solid"]{border-left:0 !important;padding-left:0 !important}
  [style*="padding-right:56px"]{padding-right:0 !important}
  [style*="padding:0 56px"]{padding:0 !important}
  [style*="margin-top:auto"]{margin-top:26px !important}

  h1{font-size:38px;line-height:1.05}
  h2{font-size:27px}
  h3{font-size:19px}
  p,.card p,.lede{font-size:15px !important;max-width:none}
  .lede{font-size:16px !important}
  .head{margin-bottom:24px;padding-bottom:12px}
  .eyebrow{font-size:10px}
  .stat .n{font-size:34px !important}
  .stat .l{font-size:14px}
  .card{padding:18px 18px}
  .takeaway{margin-top:24px;padding-top:16px;display:block}
  .takeaway .tag{display:block;margin-bottom:6px}
  .takeaway .txt{font-size:16px}
  .logo-tps{height:26px}.logo-or{height:19px}.logo-gallop{height:15px}
  .shot.crop img,.shot.crop.sm img{height:auto;max-height:420px}
  .shot{max-width:320px}
  table{display:block;overflow-x:auto}
  th,td{padding:11px 12px;font-size:14px;white-space:nowrap}
  td.num{font-size:15px}
  .chart{max-width:100%}
  .navbar{gap:10px;padding:10px 8px}
  .navbar button,.navbar a,.navbar .count{font-size:10px;padding:7px 11px}
  body{padding-bottom:56px}
}
@media screen and (max-width:1000px){
  /* the two hero slides read better with the copy first */
  .slide[style*="padding:0"] h1{margin-top:16px}
}
@media screen and (max-width:1000px){
  /* side-by-side footers must stack, not collide */
  [style*="justify-content:space-between"]{display:block !important}
  .head{display:flex !important}
  [style*="justify-content:space-between"] > div{margin-top:14px}
  .slide[style*="padding:0"] img[style*="position:absolute"]{width:74% !important;max-width:260px}
}

/* logos sit left, on the title line */
.headleft{display:inline-flex;align-items:center;gap:18px}
.headleft .eyebrow{white-space:nowrap}
@media screen and (max-width:1000px){
  .headleft{gap:10px}
  .headleft img{max-height:14px}
}
@media screen and (max-width:1000px){
  /* cover + closing lockups: keep both marks on one line */
  .slide[style*="padding:0"] img[alt="The Padel Society"]{height:26px !important}
  .slide[style*="padding:0"] img[alt="OpenRally"]{height:21px !important}
  .slide[style*="padding:0"] > div > div > div[style*="display:flex"]{gap:16px !important;flex-wrap:nowrap}
  .headleft img[alt="The Padel Society"]{height:14px !important}
  .headleft img[alt="OpenRally"]{height:11px !important}
}

/* ── mobile: the new components + hard containment ──────────────────────
   The deck previously pinned the layout viewport to 1920px, so none of the
   rules above ever ran on a phone. With device-width restored they do, and
   these cover the components added since (category slides, ladder, bullets)
   plus a blanket rule so nothing can push the page sideways.            */
@media screen and (max-width:1000px){
  /* blanket containment — no element may be wider than its column */
  .slide *{max-width:100%}
  .slide [style*="display:flex"]{flex-wrap:wrap}
  svg.chart,.chart{max-width:100%;height:auto}
  .shot,.phone{max-width:100%!important;width:100%!important}
  img{max-width:100%;height:auto}

  /* legibility floor: 10px eyebrows were unreadable on a phone */
  .eyebrow{font-size:12px;letter-spacing:.13em}
  .source{font-size:11.5px;letter-spacing:.07em;line-height:1.5}
  .headleft{flex-wrap:wrap;gap:8px}
  .pageno{white-space:nowrap}
  p.eyebrow{white-space:normal!important}

  /* partnership-category slides */
  .cat-title{font-size:34px;line-height:1.02}
  .colh{font-size:12px;margin-bottom:12px;padding-bottom:8px}
  .blist li{font-size:15.5px;padding-left:20px;line-height:1.45}
  .blist.tight li{font-size:15px}
  .blist li::before{width:6px;height:6px;top:.55em}
  .termbar{flex-direction:column;align-items:flex-start;gap:14px;padding-top:16px;margin-top:24px}
  .termbar .lbl{display:block;margin:0 0 2px}
  .termbar .val{font-size:22px}

  /* tier ladder */
  .ladder .row,.ladder .row.soft{grid-template-columns:1fr!important;gap:7px;padding:15px 0}
  .ladder .nm,.ladder .row.soft .nm{font-size:19px}
  .ladder .ds{font-size:15px}
  .ladder .wt i{width:12px;height:12px}

  /* closing slide */
  .slide h1{font-size:36px!important}
}

@media screen and (max-width:1000px){
  /* Root containment. .slide is width:100% of .deck, so a single wide child
     (the placement tables) stretched .deck and every other slide inherited
     that width. Pin the chain to the viewport and let tables scroll alone. */
  html,body{overflow-x:hidden;max-width:100%}
  .stage,.deck{width:100%;max-width:100vw}
  /* the base rule is overflow:hidden, which CLIPPED copy on a phone instead
     of reflowing it. On mobile the slide is auto-height, so let it show. */
  .slide{width:100%;max-width:100vw;overflow:visible}
  .slide table{display:block;width:100%;max-width:100%;overflow-x:auto;
    -webkit-overflow-scrolling:touch}
  /* two fixed-width app screenshots side by side cannot fit 390px — stack */
  .shot[style*="width:258px"]{width:100%!important;max-width:320px!important}
}

@media screen and (max-width:1000px){
  /* Inline font-size on a heading beats a stylesheet rule, so the desktop
     display sizes (52px, 46px, 62px…) survived into mobile and blew the
     column. These have to win. */
  .slide h1,.slide h1[style]{font-size:36px!important;line-height:1.04!important;max-width:none!important}
  .slide h2,.slide h2[style]{font-size:27px!important;line-height:1.1!important;max-width:none!important}
  .slide h3,.slide h3[style]{font-size:19px!important;line-height:1.2!important}
  .slide .cat-title{font-size:32px!important}
  .slide .stat .n,.slide .stat .n[style]{font-size:34px!important}
  .slide p[style],.slide span[style*="font-size"]{max-width:none}
  /* long words and URLs must break rather than push the column */
  .slide p,.slide li,.slide td,.slide h1,.slide h2,.slide h3,.slide .txt{
    overflow-wrap:anywhere}
}

@media screen and (max-width:1000px){
  /* Grid/flex items default to min-width:auto, so a wide table forced its
     track past the viewport and every sibling card inherited that width.
     min-width:0 lets the track actually shrink to the column. */
  .slide .body,.slide .grid > *,.slide [style*="display:grid"] > *,
  .slide [style*="display:flex"] > *,.slide .card,.slide .stat{min-width:0}
  .slide .card > *,.slide .body > *{min-width:0;max-width:100%}
}

@media screen and (max-width:1000px){
  /* the base rule pins .headleft .eyebrow to nowrap, which held the running
     head wider than the phone on the longer section names */
  .headleft .eyebrow{white-space:normal}
  .head{flex-wrap:wrap;gap:6px 12px;align-items:flex-start}
  .head .pageno{margin-left:auto}
}

/* ════════════════════════════════════════════════════════════════════════
   MOBILE, PROPERLY  (2026-08-19)
   The earlier mobile work stopped the page scrolling sideways, but three
   things still read as broken on a phone. This block fixes the causes, not
   the symptoms, and is deliberately last so it wins on equal specificity.
   ════════════════════════════════════════════════════════════════════════ */
@media screen and (max-width:1000px){

  /* 1 ── TABLES ─────────────────────────────────────────────────────────
     The old rule set `white-space:nowrap` on every th/td, which guarantees
     a table wider than the phone no matter how small the type gets — every
     table then became a horizontal scroller inside the slide. Let the text
     columns wrap and only the tick columns stay on one line. */
  .slide th,.slide td{white-space:normal}
  .slide table{display:table;width:100%;table-layout:fixed;overflow-x:visible}
  .slide th{font-size:11px;letter-spacing:.08em;padding:8px 6px 8px 0;vertical-align:bottom}
  .slide td{font-size:14px;line-height:1.35;padding:10px 6px 10px 0}
  .slide td.num{font-size:15px;white-space:nowrap;padding-right:0}
  /* tick columns: as narrow as a glyph needs, never wrapped */
  .slide td[style*="text-align:center"],.slide th[style*="text-align:center"]{
    white-space:nowrap;width:15%;padding:10px 2px;font-size:13px}
  .slide td[style*="text-align:center"] span{font-size:9px!important;padding:3px 6px!important;
    letter-spacing:.06em!important}
  /* the first column carries the placement name and needs the room */
  .slide th:first-child,.slide td:first-child{width:auto}

  /* 2 ── COVER + CLOSING SLIDE ──────────────────────────────────────────
     Three images stacked full-width made the cover ~1,300px of photography
     below the copy, and the partnership lockup ran off the edge because
     both of its eyebrows were pinned to `nowrap`. */
  .slide[style*="padding:0"] img[alt="Padel clubhouse, Bangkok"]{display:none!important}
  .slide[style*="padding:0"] img[style*="position:absolute"]{
    width:calc(50% - 7px)!important;max-width:190px!important;
    margin:0!important;vertical-align:top}
  .slide[style*="padding:0"] > div > div > div:last-child,
  .slide[style*="padding:0"] div[style*="overflow:hidden"]{
    display:flex!important;gap:14px;justify-content:flex-start;margin-top:26px}
  /* the partnership lockup: wrap instead of running off */
  .slide[style*="padding:0"] div[style*="flex-wrap:nowrap"]{
    flex-wrap:wrap!important;gap:8px 12px!important;align-items:center}
  .slide[style*="padding:0"] .eyebrow[style*="nowrap"]{white-space:normal!important}
  .slide[style*="padding:0"] .logo-gallop{margin:0 2px}

  /* 3 ── LONG PROVENANCE LINES ──────────────────────────────────────────
     `.source` sat beside a chart with a hard-coded right alignment and a
     <br>, which pushed it past the column on a phone. */
  .slide .source{text-align:left!important;margin-top:10px;max-width:100%;
    white-space:normal;word-break:normal}
  .slide .source br{display:none}

  /* 4 ── PACKAGE + LADDER SLIDES ───────────────────────────────────────
     The termbar and the tier ladder are the two components a buyer reads
     most closely; give them real spacing rather than the desktop rhythm. */
  .termbar{gap:16px!important}
  .ladder .row{padding:16px 0}
  .pill{font-size:11px;padding:6px 11px}
}

@media screen and (max-width:1000px){
  /* 5 ── the growth slide's provenance line ────────────────────────────
     It sits in a flex row beside the h2 with an inline `flex:none`, so it
     could not shrink and pushed 50px past the frame at every phone width. */
  .slide .source[style*="flex:none"]{flex:1 1 auto!important;min-width:0!important;
    text-align:left!important;margin:8px 0 0!important}
  .slide [style*="align-items:flex-end"][style*="space-between"]{flex-wrap:wrap!important}
}
@media screen and (max-width:700px){
  /* 6 ── placement tables: drop the supporting column ──────────────────
     Five columns cannot fit a phone without a horizontal scroller. "Reach
     today" is supporting evidence — the same figures are stated on the
     slides that introduce each placement — so it is the column to lose.
     What a buyer actually reads here is placement x tier. */
  .slide table.placements th:nth-child(2),
  .slide table.placements td:nth-child(2){display:none}
  .slide table.placements th:first-child,
  .slide table.placements td:first-child{width:52%}
  .slide table.placements td[style*="text-align:center"],
  .slide table.placements th[style*="text-align:center"]{width:16%}
}
@media screen and (max-width:460px){
  /* 7 ── smallest phones: the four-column community table ──────────────*/
  .slide td,.slide th{padding-left:0;padding-right:4px}
  .slide td{font-size:13px}
  .slide th{font-size:10px}
}

@media screen and (max-width:640px){
  /* 8 ── placement-table headers ───────────────────────────────────────
     MAIN / CATEGORY / ACTIVATION at 11px still ran into each other in a
     16% column. Let them wrap and drop the tracking. */
  .slide table.placements thead th{font-size:9px;letter-spacing:.02em;
    white-space:normal;word-break:normal;line-height:1.25;padding-bottom:6px}
  .slide table.placements td[style*="text-align:center"] span{
    font-size:8px!important;padding:3px 5px!important}
}

@media screen and (max-width:400px){
  /* 9 ── narrowest phones (iPhone SE / mini) — close the last few px ────*/
  .slide td{font-size:12.5px;padding:9px 3px 9px 0}
  .slide th{font-size:9.5px;padding-right:3px}
  .slide td.num{font-size:13px}
  .slide table.placements th:first-child,
  .slide table.placements td:first-child{width:46%}
  .slide table.placements td[style*="text-align:center"],
  .slide table.placements th[style*="text-align:center"]{width:18%}
}

/* the four package slides carry short lists and a termbar; centring the
   body keeps the composition in the frame instead of stacking it at the top */
.body.mid{display:flex;flex-direction:column;justify-content:center}
@media screen and (max-width:1000px){.body.mid{display:block}}

@media screen and (max-width:1000px){
  /* 10 ── the brand wall ────────────────────────────────────────────────
     The blanket "every grid becomes one column" rule turned seven logo
     tiles into seven full-width blocks. A logo wall reads as a wall. */
  .slide .brandwall{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:10px!important}
  .slide .brandwall > div{min-height:74px!important;padding:12px 10px!important}
  .slide .brandwall img{max-height:34px!important}
  .slide .brandwall span{font-size:12px!important}
}