/* ── Replit migration page. Brand tokens come from styles.css.
      Structure follows the homepage: big Title case section word, short unboxed copy,
      hairline rules, chips, and very few borders. Mobile first. ── */
.rm { --gap: clamp(14px, 3.4vw, 22px); }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); }

.sec { padding: 56px 0; }
.sec--lime { background: var(--lime); color: var(--navy); }
.sec--tight { padding-top: 0; }

/* ── every button control on this page carries the same 8px radius. styles.css gives
      .btn--lime and .btn--navy one but leaves .btn--outline square, which is why the
      outline buttons clashed. rm.css is page scoped, so this corrects only this page. ── */
.btn--outline { border-radius: 8px; padding: 17px 32px; }
.pb__nav button, .units__replay { border-radius: 8px; }

/* ── the answer block, set like a standfirst: label left, text in a real measure ── */
.answer { padding: 0 0 34px; }
.answer__in { border-top: 1px solid var(--rule); padding: 22px 0 0; display: grid;
  gap: 6px 34px; grid-template-columns: 1fr; }
.answer__k { font-weight: 900; font-size: 11px; letter-spacing: .16em; color: var(--lime);
  text-transform: uppercase; line-height: 1.5; }
.answer__t { max-width: 74ch; display: grid; gap: 13px; }
.answer__body { font-size: clamp(14px, 3.6vw, 15.5px); line-height: 1.62;
  color: rgba(255,255,255,.72); margin: 0; }
@media (min-width: 760px) { .answer__in { grid-template-columns: 90px 1fr; } }

/* ── floating WhatsApp, stacked directly above the chat launcher and matching it.
      No number in the markup: script.js resolves .wabtn[data-c] from /api/contact. ── */
.wafloat { position: fixed; right: clamp(16px, 3vw, 32px);
  bottom: calc(clamp(16px, 3vw, 32px) + 72px); z-index: 60; width: 58px; height: 58px;
  display: grid; place-items: center; cursor: pointer; border-radius: 10px; border: 0;
  background: var(--navy); color: var(--lime);
  box-shadow: 0 12px 30px rgba(23,23,43,.35), 0 0 0 1px rgba(245,255,171,.30);
  transition: transform .2s cubic-bezier(.16,1,.3,1), background .25s ease, color .25s ease; }
.wafloat:hover { background: var(--lime); color: var(--navy); transform: translateY(-2px); }
.wafloat:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .wafloat { transition: none; } }

/* ── contact columns: the global footer right-aligns these, which reads as centred
      once the row wraps. On this page they belong on the left, under the heading. ── */
.footer__cols { justify-content: flex-start; }
.fcol { align-items: flex-start; text-align: left; }

/* ── hero: one cinematic panoramic behind everything. The particle canvas is hidden
      here because streaks over a photograph read as noise, and the photograph now does
      the work the particles were doing. The left of the plate is deliberately dark so
      the lime headline keeps contrast without a scrim across the whole frame. ── */
.hero-block .hero__particles { display: none; }
.hero-block {
  background-image:
    linear-gradient(90deg, rgba(5,5,16,.94) 0%, rgba(5,5,16,.86) 22%, rgba(5,5,16,.42) 48%, rgba(5,5,16,0) 72%),
    linear-gradient(180deg, rgba(5,5,16,.55) 0%, rgba(5,5,16,0) 30%, rgba(5,5,16,.18) 100%),
    url("/assets/rm-hero-pano.jpg?b=3");
  background-size: cover, cover, cover;
  background-position: center, center, 82% center;
  background-repeat: no-repeat;
}
@supports (background-image: image-set(url("x.webp") type("image/webp"))) {
  .hero-block { background-image:
    linear-gradient(90deg, rgba(5,5,16,.94) 0%, rgba(5,5,16,.86) 22%, rgba(5,5,16,.42) 48%, rgba(5,5,16,0) 72%),
    linear-gradient(180deg, rgba(5,5,16,.55) 0%, rgba(5,5,16,0) 30%, rgba(5,5,16,.18) 100%),
    image-set(url("/assets/rm-hero-pano.webp?b=3") type("image/webp"),
              url("/assets/rm-hero-pano.jpg?b=3") type("image/jpeg")); }
}
@media (max-width: 900px) {
  /* the aisle crops to nothing on a phone, so hold the lit right side where the
     invoice is, and deepen the wash so the headline still reads. */
  .hero-block { background-position: center, center, 74% center;
    background-image:
      linear-gradient(180deg, rgba(5,5,16,.86) 0%, rgba(5,5,16,.58) 42%, rgba(5,5,16,.92) 100%),
      linear-gradient(180deg, rgba(5,5,16,.22), rgba(5,5,16,.22)),
      url("/assets/rm-hero-pano.jpg?b=3"); }
}
.hero__cta { max-width: 52ch; }

/* ── hero: a touch more compact than the homepage's, and REPLIT called out as an
      inverted block. The homepage rule keeps each line on one line and scales the type
      down instead of wrapping, so the override keeps white-space: nowrap intact. ── */
.hero__title { font-size: clamp(34px, 6.8vw, 96px); line-height: .92; letter-spacing: -.032em; }
.hero__title .hl { background: var(--lime); color: var(--navy); padding: 0 .1em .04em;
  margin: 0 -.02em; display: inline-block; }
@media (max-width: 820px) {
  /* Measured ceiling is 8.97vw, set by the nowrap line "REPLIT OR LOVABLE.".
     8.4vw keeps about 4% in hand for the two highlight spans, whose .1em of
     side padding a text measurement does not see. */
  .hero__title { font-size: clamp(30px, 8.4vw, 56px); line-height: .98; }
}

/* ── the hero console: the job, ticking through, in the column that used to be empty ── */
.hc { border: 1px solid rgba(255,255,255,.14); background: rgba(8,8,20,.55);
  backdrop-filter: none; max-width: 460px; }
.hc__bar { display: flex; align-items: center; gap: 5px; padding: 11px 15px;
  border-bottom: 1px solid rgba(255,255,255,.12); }
.hc__bar i { width: 5px; height: 5px; border-radius: 50%; background: rgba(255,255,255,.24); }
.hc__bar i:first-child { background: var(--lime); }
.hc__bar span { margin-left: 7px; font-size: 10px; letter-spacing: .16em; font-weight: 700;
  text-transform: uppercase; color: rgba(255,255,255,.45); }
.hc__body { padding: 6px 15px 8px; }
.hc__row { display: grid; grid-template-columns: 16px 1fr; gap: 10px; align-items: start;
  padding: 8px 0; opacity: 0; transform: translateY(6px); }
.hc.on .hc__row { animation: hcin .4s cubic-bezier(.2,.85,.3,1) forwards;
  animation-delay: calc(var(--i) * 320ms + 500ms); }
@keyframes hcin { to { opacity: 1; transform: none; } }
.hc__t { width: 16px; height: 16px; color: var(--lime); margin-top: 2px; flex: none; }
.hc__l { display: block; font-weight: 500; font-size: 13.5px; line-height: 1.3;
  color: rgba(255,255,255,.92); }
.hc__l b { font-weight: 900; }
.hc__row em { display: block; font-style: normal; font-size: 11.5px; line-height: 1.35;
  color: rgba(255,255,255,.45); margin-top: 2px; }
.hc__foot { display: flex; align-items: baseline; justify-content: space-between;
  padding: 12px 15px 13px; border-top: 1px solid rgba(255,255,255,.12); opacity: 0;
  transition: opacity .5s ease; }
.hc.on .hc__foot { opacity: 1; transition-delay: 2.6s; }
.hc__foot span { font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  font-weight: 700; color: rgba(255,255,255,.45); }
.hc__foot b { font-weight: 900; font-size: 17px; color: var(--lime); letter-spacing: -.02em; }
@media (max-width: 820px) { .hc { max-width: none; margin-bottom: 26px; } }
@media (prefers-reduced-motion: reduce) {
  .hc__row { opacity: 1; transform: none; }
  .hc.on .hc__row { animation: none; }
  .hc__foot { opacity: 1; }
}

/* ── the section header: /0N, one huge word, one short line ── */
.big { margin-bottom: 34px; max-width: 54ch; }
.big__w { font-weight: 900; letter-spacing: -.035em; line-height: .92;
  font-size: clamp(52px, 15vw, 118px); margin: 8px 0 0; }
.big__lead { margin-top: 16px; font-size: clamp(15px, 4vw, 17.5px); line-height: 1.5;
  color: var(--muted); }

/* ── mobile headline scale ───────────────────────────────────────────────────
   These wrap, so the constraint is the widest WORD, and none of them is close
   to it: at 360px "The bill" tops out at 92px and "Price" at 130px. They are
   set to what reads as a display heading on a phone, not to the maximum, which
   would put a 100px word on a 360px screen. */
@media (max-width: 820px) {
  .big__w { font-size: clamp(46px, 21vw, 92px); }
  .big { margin-bottom: 26px; }
  .leadform__title { font-size: clamp(34px, 10.5vw, 52px); line-height: 1.02; }
}
.sec--lime .big__lead { color: var(--muted-dark); }
.sec--lime .num { color: var(--navy); opacity: .5; }

/* ── hairline divider carrying a label and a note ── */
.rule { display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  border-top: 1px solid var(--rule); padding-top: 14px; margin-top: 40px;
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; }
.rule__n { font-weight: 500; color: var(--muted); letter-spacing: .04em; text-transform: none;
  text-align: right; }
.sec--lime .rule { border-top-color: rgba(23,23,43,.22); }
.sec--lime .rule__n { color: var(--muted-dark); }

/* ── answer block, small and out of the way ── */

/* ── section 01: one grid, two phases.
      Phase 1 fills every square black, to the Replit bill. Phase 2 leaves ALL of that black
      in place and lands the proportional amount of green on top of it, one square in 198,
      while the total above is struck through and the $10 arrives beside it. Nothing is
      taken away, which is the honest version: the black is what was actually spent. ── */
.units__head { display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }
.units__read { min-width: 0; }
.units__row { display: flex; align-items: baseline; flex-wrap: wrap;
  gap: 4px clamp(12px, 3vw, 30px); min-width: 0; }
.units__row--k { margin-top: 10px; }

.units__n { position: relative; font-weight: 900; letter-spacing: -.05em; line-height: .9;
  font-size: clamp(30px, 9vw, 78px); font-variant-numeric: tabular-nums;
  transition: opacity .5s ease; }
/* the strike is drawn, not a text-decoration, so it can animate across */
.units__n::after { content: ""; position: absolute; left: -3%; width: 106%; top: 50%;
  height: clamp(4px, .7vw, 6px); background: currentColor; transform: scaleX(0);
  transform-origin: left; transition: transform .55s cubic-bezier(.2,.8,.3,1) .15s; }
.units.p2 .units__n { opacity: .42; }
.units.p2 .units__n::after { transform: scaleX(1); }

.units__n--own { color: #2f7d32; opacity: 0; transform: translateX(-14px);
  transition: opacity .45s ease .85s, transform .45s cubic-bezier(.2,.8,.3,1) .85s; }
.units__n--own::after { display: none; }
.units.p2 .units__n--own { opacity: 1; transform: none; }

.units__k { font-size: 11.5px; letter-spacing: .13em; text-transform: uppercase;
  font-weight: 700; color: rgba(23,23,43,.6); }
.units__k--own { color: #2f7d32; opacity: 0; transition: opacity .45s ease .85s; }
.units.p2 .units__k--own { opacity: 1; }
.units.p2 .units__k:not(.units__k--own) { opacity: .45; }

.units__replay { background: transparent; border: 1px solid rgba(23,23,43,.4);
  color: var(--navy); font: inherit; font-size: 11px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; padding: 10px 16px; cursor: pointer; white-space: nowrap; }
.units__replay:hover { background: var(--navy); color: var(--lime); border-color: var(--navy); }

.units__grid { display: grid; gap: clamp(3px, .85vw, 6px);
  grid-template-columns: repeat(auto-fill, minmax(clamp(13px, 2.9vw, 26px), 1fr)); }
.u { display: block; aspect-ratio: 1; border: 1px solid rgba(23,23,43,.16);
  background: transparent; }

/* phase 1: fills black, in reading order, and STAYS black */
.units.p1 .u, .units.p2 .u { animation: ufill .26s ease forwards;
  animation-delay: calc(var(--i) * 5ms); }
@keyframes ufill { to { background: var(--navy); border-color: var(--navy); } }

/* phase 2: a green wave runs backward through the field and empties it. --r is
   the reverse index, so the last square drains first and the wave arrives at the
   one square that survives. Each square flashes green on its way out, which is
   the money leaving rather than the money being painted over. */
.units.p2 .u { animation: udrain .52s cubic-bezier(.4, 0, .2, 1) forwards;
  animation-delay: calc(var(--r) * 3.4ms); }
@keyframes udrain {
  0%   { background: var(--navy); border-color: var(--navy); transform: scale(1); }
  30%  { background: #2f7d32; border-color: #2f7d32; transform: scale(1.14); }
  100% { background: transparent; border-color: rgba(23,23,43,.16); transform: scale(1); }
}

/* the one square that stays. Same delay, so it lands as the wave reaches it. */
.units.p2 .u--own { animation: uown .6s cubic-bezier(.2,.9,.3,1) forwards;
  animation-delay: calc(var(--r) * 3.4ms); }
@keyframes uown {
  0%   { background: var(--navy); border-color: var(--navy); transform: scale(1); }
  45%  { background: #2f7d32; border-color: #2f7d32; transform: scale(1.7); }
  100% { background: #2f7d32; border-color: #2f7d32; transform: scale(1); }
}

.tw__note { margin-top: 30px; font-size: 13.5px; line-height: 1.55; color: var(--muted-dark);
  max-width: 68ch; }
.sec:not(.sec--lime) .tw__note { color: var(--muted); }

.also { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 24px; }
.alsolink { font-size: 13.5px; color: var(--muted-dark); }
.alsolink b { font-weight: 900; color: var(--navy); }
.alsolink:hover { color: var(--navy); }

@media (prefers-reduced-motion: reduce) {
  .units.p1 .u, .units.p2 .u, .units.p2 .u--own { animation-duration: .01ms; animation-delay: 0ms; }
  .units__n::after, .units__n--own, .units__k--own { transition: none; }
}

/* ── the case study block, lifted from the homepage's Google Ads section:
      a small marked eyebrow, a medium headline, an icon bullet list, then a row of
      device panels. ── */
.case { max-width: 62ch; margin-bottom: clamp(28px, 5vw, 44px); }
.case__eb { display: flex; align-items: center; gap: 9px; font-size: 11px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: rgba(23,23,43,.55); }
.case__h { font-weight: 900; letter-spacing: -.03em; line-height: 1.04; margin: 14px 0 0;
  font-size: clamp(28px, 7vw, 50px); }
.case__l { list-style: none; margin: 22px 0 0; display: grid; gap: 11px; }
.case__l li { display: grid; grid-template-columns: auto 1fr; gap: 11px; align-items: start;
  font-size: clamp(14px, 3.7vw, 15.5px); line-height: 1.45; color: var(--muted-dark); }
.st { width: 11px; height: 11px; flex: none; fill: currentColor; display: block;
  margin-top: .32em; opacity: .75; }
.case__eb .st { margin-top: 0; width: 10px; height: 10px; opacity: 1; }

.case--dark .case__eb { color: var(--muted); }
.case--dark .case__eb .st { color: var(--lime); }
.case--dark .case__l li { color: var(--muted); }
.case--dark .case__l .st { color: var(--lime); opacity: 1; }

/* ── the three device panels. Same treatment as the homepage's Google Ads console
      (.gcon / .gpan): a shared perspective, each panel tilted in 3D, big soft shadow, and
      the whole set flattens on hover. Rows stagger in and the totals count up. ── */
.dev3 { display: grid; gap: var(--gap); grid-template-columns: 1fr; }

.dp { margin: 0; position: relative; background: #0d0d1c; color: var(--white);
  border: 1px solid rgba(255,255,255,.09); border-radius: 16px; overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: 0 40px 80px -30px rgba(23,23,43,.55), 0 0 0 1px rgba(255,255,255,.04);
  transform-style: preserve-3d; transition: transform .55s cubic-bezier(.22,.8,.3,1);
  will-change: transform; }

.dp__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 13px 16px; border-bottom: 1px solid rgba(255,255,255,.1); }
.dp__bar span { font-size: 11.5px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; }
.dp__tag { font-style: normal; font-size: 9.5px; font-weight: 900; letter-spacing: .12em;
  text-transform: uppercase; padding: 4px 8px; border-radius: 5px;
  background: rgba(255,255,255,.1); color: rgba(255,255,255,.6); white-space: nowrap; }
.dp__tag--ok { background: var(--lime); color: var(--navy); }

.dp__body { padding: 4px 16px; flex: 1; }
.dp__row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 11px 0; border-bottom: 1px solid rgba(255,255,255,.07); }
.dp__row:last-child { border-bottom: 0; }
.dp__row span { font-size: 13.5px; color: rgba(255,255,255,.82); }
.dp__row b { flex: none; font-weight: 900; font-size: 13px; font-variant-numeric: tabular-nums; }
.dp__row b.ok, .dp__foot b.ok { color: var(--lime); }
.dp__row--sum { border-top: 1px solid rgba(255,255,255,.2); margin-top: 4px; padding-top: 13px; }
.dp__row--sum span { font-weight: 900; color: var(--white); }

.dp__foot { display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 15px 16px 16px; border-top: 1px solid rgba(255,255,255,.2); }
.dp__foot > span { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  font-weight: 700; color: rgba(255,255,255,.5); }
.dp__foot b { font-weight: 900; letter-spacing: -.03em; font-size: clamp(22px, 6vw, 30px);
  font-variant-numeric: tabular-nums; }
.dp__foot--big b { font-size: clamp(15px, 4vw, 19px); }

/* rows fly in once the console scrolls into view */
.dev3 .dp__row { opacity: 0; transform: translateY(9px); }
.dev3.on .dp__row { animation: dprow .38s cubic-bezier(.2,.85,.3,1) forwards;
  animation-delay: calc(var(--i, 0) * 90ms + 220ms); }
@keyframes dprow { to { opacity: 1; transform: none; } }

@media (min-width: 900px) {
  .dev3 { grid-template-columns: 1.2fr 1.2fr .95fr; gap: clamp(18px, 2.4vw, 40px);
    align-items: center; perspective: 2400px; perspective-origin: 50% 42%; }
  .dp--a { transform: rotateY(13deg) rotateX(4deg); }
  .dp--b { transform: rotateX(6deg) scale(1.03); z-index: 3; }
  .dp--c { transform: rotateY(-15deg) rotateX(4deg); }
  .dev3:hover .dp { transform: rotateY(0) rotateX(0) scale(1) !important; }
}
@media (prefers-reduced-motion: reduce) {
  .dev3 .dp__row { opacity: 1; transform: none; }
  .dev3.on .dp__row { animation: none; }
  .dp { transition: none; }
}

/* ── price ── */
.prices { display: grid; gap: var(--gap); grid-template-columns: 1fr; }
.pcard { border: 1px solid var(--rule); padding: 26px 20px; display: flex; flex-direction: column; }
.pcard--ghost { border-style: dashed; }
.pcard__k { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700;
  color: var(--muted); }
.pcard__p { font-weight: 900; letter-spacing: -.04em; line-height: .95; margin: 12px 0 2px;
  font-size: clamp(44px, 13vw, 62px); color: var(--lime); }
.pcard--ghost .pcard__p { color: var(--white); }
.plus { font-size: .42em; letter-spacing: 0; }
.pcard__u { font-size: 12.5px; color: var(--muted); }
.pcard__list { list-style: none; margin: 20px 0 24px; display: grid; }
.pcard__list li { font-size: 14.5px; line-height: 1.4; padding: 11px 0;
  border-bottom: 1px solid var(--rule); }
.pcard__list li:last-child { border-bottom: 0; }
.pcard .btn { margin-top: auto; align-self: flex-start; margin-left: 0; }

/* ── the playbook stepper ── */
.pb__rail { display: flex; gap: 6px; overflow-x: auto; -webkit-overflow-scrolling: touch;
  padding-bottom: 10px; margin-bottom: 20px; scrollbar-width: none; }
.pb__rail::-webkit-scrollbar { display: none; }
.pb__tab { flex: 0 0 auto; background: transparent; border: 1px solid rgba(23,23,43,.28);
  color: rgba(23,23,43,.7); font: inherit; font-weight: 900; font-size: 12px;
  letter-spacing: .04em; padding: 10px 14px; cursor: pointer; white-space: nowrap; }
.pb__tab[aria-selected="true"] { background: var(--navy); color: var(--white); border-color: var(--navy); }
.pb__tab:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; }
.pb__stage { background: var(--navy); color: var(--white); padding: 26px 20px; }
.pb__panel[hidden] { display: none; }
.pb__art { max-width: 120px; margin: 0 auto 18px; color: rgba(255,255,255,.5); }
.pb__n { font-weight: 900; font-size: 11px; letter-spacing: .12em; color: var(--lime); }
.pb__t { font-weight: 900; font-size: clamp(21px, 6vw, 30px); letter-spacing: -.02em;
  line-height: 1.1; margin: 9px 0 10px; }
.pb__b { font-size: 15px; line-height: 1.5; color: var(--muted); }
.pb__you { margin-top: 16px; border-left: 3px solid var(--lime); padding: 2px 0 2px 13px;
  font-size: 13.5px; font-weight: 700; line-height: 1.4; }
.pb__nav { display: flex; gap: 9px; align-items: center; margin-top: 22px;
  border-top: 1px solid var(--rule); padding-top: 18px; }
.pb__nav button { background: transparent; border: 1px solid var(--rule); color: var(--white);
  font: inherit; font-weight: 700; font-size: 11.5px; letter-spacing: .08em;
  text-transform: uppercase; padding: 11px 16px; cursor: pointer; }
.pb__nav button:hover:not(:disabled) { background: var(--lime); color: var(--navy); border-color: var(--lime); }
.pb__nav button:disabled { opacity: .3; cursor: default; }
.pb__count { margin-left: auto; font-size: 11.5px; color: var(--muted); }

/* ── the provider table. Two column stack on a phone, a real table from 760px, with
      the money right aligned on its own tabular baseline. ── */
.pvtable { margin-top: 4px; }
.pv { display: grid; align-items: center; gap: 2px 16px;
  grid-template-columns: 30px 1fr auto;
  grid-template-areas: "mark name cost" "spec spec cost";
  padding: 18px 0; border-bottom: 1px solid var(--rule); text-decoration: none; }
.pv:first-of-type { border-top: 1px solid var(--rule); }
.pv--head { display: none; }
.pv:hover .pv__n { color: var(--lime); }

.pv__m { grid-area: mark; display: flex; align-items: center; }
.pv__m svg { width: 24px; height: 24px; fill: currentColor; opacity: .9; }
.pv__wm { font-weight: 900; font-size: 11px; letter-spacing: .06em; opacity: .9; }
.pv__n { grid-area: name; font-weight: 900; font-size: 16px; letter-spacing: -.01em;
  transition: color .15s ease; }
.pv__p { display: none; }
.pv__s { grid-area: spec; font-size: 12.5px; color: var(--muted); padding-left: 46px; }
.pv__c { grid-area: cost; font-weight: 900; font-size: clamp(20px, 5.4vw, 26px);
  letter-spacing: -.03em; color: var(--lime); font-variant-numeric: tabular-nums;
  white-space: nowrap; text-align: right; }
.pv__c em { font-style: normal; font-size: .46em; letter-spacing: .06em; color: var(--muted);
  margin-left: 2px; }

.pvnote { font-size: 11.5px; line-height: 1.6; color: var(--muted); margin: 20px 0 0;
  max-width: 74ch; }

@media (min-width: 760px) {
  .pv { grid-template-columns: 38px 168px 150px 1fr 110px;
        grid-template-areas: "mark name plan spec cost"; gap: 24px; padding: 17px 0; }
  .pv__p { display: block; grid-area: plan; font-size: 13px; color: var(--muted); }
  .pv__s { padding-left: 0; }
  .pv--head { display: grid; border: 0; padding: 0 0 12px; }
  .pv--head span { font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
    font-weight: 700; color: var(--muted); }
  .pv--head .pv__c { color: var(--muted); font-size: 10px; letter-spacing: .14em; }
  .pv--head .pv__s { display: block; }
  .pv__m svg { width: 26px; height: 26px; }
}

/* ── the written answers under the standfirst. Set as secondary reading, so they add
      depth for search and assistants without competing with the sections above. ── */
.reads { margin: 30px 0 34px; }
.fold__h { font-weight: 900; font-size: clamp(15px, 4.2vw, 18px); letter-spacing: -.01em;
  line-height: 1.3; margin: 0; }
.rd { max-width: 74ch; }
.rd p { font-size: clamp(14px, 3.6vw, 15.5px); line-height: 1.65;
  color: rgba(255,255,255,.7); margin: 0 0 11px; }
.rd p:last-child { margin-bottom: 0; }

.rel { display: grid; margin: 0 0 34px; border-top: 1px solid var(--rule); }
.rel__i { display: flex; align-items: baseline; justify-content: space-between; gap: 20px;
  padding: 17px 0; border-bottom: 1px solid var(--rule); }
.rel__t { font-weight: 900; font-size: clamp(15px, 4.2vw, 17px); letter-spacing: -.01em;
  line-height: 1.25; }
.rel__k { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); white-space: nowrap; }
.rel__i:hover .rel__t, .rel__i:hover .rel__k { color: var(--lime); }

@media (min-width: 900px) { .reads { grid-template-columns: 1fr 1fr; gap: 40px 56px; } }

/* ── the collapsed reference material ── */
.fold { border-top: 1px solid var(--rule); }
.fold:last-of-type { border-bottom: 1px solid var(--rule); }
.fold > summary { cursor: pointer; list-style: none; padding: 20px 0; display: flex;
  justify-content: space-between; align-items: center; gap: 14px;
  font-weight: 900; font-size: clamp(15px, 4.2vw, 18px); letter-spacing: -.01em; }
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary::after { content: "+"; color: var(--lime); font-size: 20px; line-height: 1; }
.fold[open] > summary::after { content: "\2212"; }
.fold__b { padding-bottom: 26px; }
.moves { width: 100%; border-collapse: collapse; font-size: 14px; }
.moves th, .moves td { text-align: left; padding: 12px 12px 12px 0; vertical-align: top;
  border-bottom: 1px solid var(--rule); }
.moves thead th { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); font-weight: 700; }
.moves tbody th { font-weight: 700; width: 24%; }
.moves td:last-child { color: var(--muted); line-height: 1.45; }
.stats { display: grid; }
.stat { display: block; padding: 18px 0; border-bottom: 1px solid var(--rule); }
.stat b { display: block; font-weight: 900; letter-spacing: -.03em; color: var(--lime);
  line-height: 1; font-size: clamp(26px, 7vw, 32px); }
.stat span { display: block; font-size: 13px; color: rgba(255,255,255,.8); margin-top: 7px;
  line-height: 1.4; }
.stat em { display: block; font-style: normal; font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); margin-top: 7px; }

.deep { margin-top: 18px; border-top: 1px solid var(--rule); }
.deep > summary { cursor: pointer; list-style: none; padding: 13px 0 0; font-size: 11px;
  font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--lime);
  display: flex; align-items: center; gap: 8px; }
.deep > summary::-webkit-details-marker { display: none; }
.deep > summary::after { content: "+"; font-size: 15px; }
.deep[open] > summary::after { content: "\2212"; }
.deep__b { font-size: 14px; line-height: 1.6; color: var(--muted); padding: 12px 0 4px;
  max-width: 74ch; }

.note { font-size: 13px; line-height: 1.55; color: var(--muted-dark); margin-top: 22px;
  max-width: 62ch; }
.sec:not(.sec--lime) .note { color: var(--muted); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ── scale up ── */
@media (min-width: 700px) {
  .sec { padding: 80px 0; }

  .prices { grid-template-columns: repeat(3, 1fr); }
  .logos { grid-template-columns: repeat(6, 1fr); gap: 20px; }
  .verdict { grid-template-columns: repeat(3, 1fr); gap: 22px; }
  .calc { padding: 32px 30px; }
  .pb__stage { padding: 38px; }
  .pb__panel { display: grid; grid-template-columns: 160px 1fr; gap: 40px; align-items: center; }
  .pb__art { margin: 0; max-width: 160px; }
  .big { margin-bottom: 44px; }
}
@media (min-width: 1000px) {
  .sec { padding: 96px 0; }
  .calcgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 46px; align-items: start; }
  .pb__panel { grid-template-columns: 200px 1fr; gap: 52px; }
  .pb__art { max-width: 200px; }
  .stats { grid-template-columns: repeat(2, 1fr); column-gap: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .bar__fill { transition: none; }
}

/* touch targets. Measured on a real 390px viewport: the playbook tabs were
   39px, its Back and Next 40px, the three evidence links 19px. 44px is the
   published minimum. Keyed on pointer:coarse so it follows the input device. */
@media (pointer: coarse) {
  /* 58px each plus margin is 74px of every line that lands near the bottom of
     the viewport. 46px still clears the 44px minimum. */
  /* .chat is the whole widget and becomes a full panel when opened, so only the
     collapsed bubble is sized here. */
  .chat__toggle { width: 46px; height: 46px; }
  .chat__toggle svg { width: 20px; height: 20px; }
  .wafloat { width: 46px; height: 46px;
             bottom: calc(clamp(16px, 3vw, 32px) + 60px); }
  .wafloat svg { width: 20px; height: 20px; }
  .pb__tab { min-height: 44px; padding-top: 11px; padding-bottom: 11px; }
  .pb__nav button { min-height: 44px; }
  .alsolink { min-height: 44px; display: flex; align-items: center; }
}