/* Closer — marketing site.

   The page is a sales call and the reader is the prospect: every persuasive
   move is named in the margin as it is made, which is exactly what the
   product's study mode does. Objections are set as signs so the whole call
   reads in ten seconds before a word of prose is read.

   Self-contained on purpose — this package ships without the product bundle
   and without a framework. Two small behaviours live in landing.js; everything
   here works with JavaScript off, which is the point for search. */

:root {
  --paper:    #F4F5F7;
  --raised:   #FFFFFF;
  --ink:      #0D1117;
  --ink-2:    #49525F;
  --ink-3:    #7A8492;
  --mark:     #1B45D8;
  --mark-bg:  #E8EDFD;
  --mark-fg:  #FFFFFF;
  /* the warm end of the conviction gauge. Cold-to-warm is how salespeople
     already talk about a buyer, so the meter borrows the vocabulary. */
  --warm:     #D9821A;
  --rule:     #DCE0E7;
  --sign-bg:  #0D1117;
  --sign-fg:  #F4F5F7;
  --sign-dim: #8B96A5;

  --f-sans: "Avenir Next", Avenir, "Segoe UI", system-ui, -apple-system, sans-serif;
  --f-text: Charter, "Bitstream Charter", "Iowan Old Style", "Palatino Linotype", ui-serif, Georgia, serif;

  --mark-w: 15rem;
  --gap: 3rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #0C1016; --raised: #141A22;
    --ink: #ECEFF3;   --ink-2: #A0AAB8; --ink-3: #6C7686;
    --mark: #7E9CFF;  --mark-bg: #16203E; --mark-fg: #0C1016;
    --warm: #F2B04A;
    --rule: #222A35;
    --sign-bg: #ECEFF3; --sign-fg: #0C1016; --sign-dim: #5C6675;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-sans);
  line-height: 1.5;
  overflow-x: hidden;
}

a { color: var(--mark); }

.wrap { max-width: 66rem; margin: 0 auto; padding: 0 2rem 6rem; }

/* ------------------------------------------------------------- sticky bar -- */
.bar {
  position: sticky; top: 0; z-index: 20;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  margin: 0 -2rem;
  padding: .85rem 2rem;
}
.bar-in {
  max-width: 66rem; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
}
.wordmark {
  font-size: 1.02rem; font-weight: 600; letter-spacing: -.02em;
  color: var(--ink); text-decoration: none;
}

.gauge { display: flex; align-items: center; gap: .75rem; }
.gauge-label, .gauge-state {
  font-size: .72rem; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-3);
}
.gauge-state { min-width: 6.5em; transition: color .4s ease; }
.bars { display: flex; align-items: flex-end; gap: 3px; height: 18px; }
/* transform and opacity are written per-frame by landing.js so a bar can sit
   part-lit as the reading moves — no transition here, or it would lag behind */
.bars i {
  display: block; width: 9px; height: 18px;
  background: var(--rule);
  transform-origin: bottom; transform: scaleY(.58);
  transition: background .3s ease;
}
/* --conv (0–1, set by landing.js) walks the lit bars from cobalt to warm as the
   buyer opens up. The plain declaration first is the fallback: a browser that
   can't parse calc() inside color-mix drops the second line and keeps cobalt. */
.bars i.on {
  transform: scaleY(1);
  background: var(--mark);
  background: color-mix(in oklab, var(--mark), var(--warm) calc(var(--conv, 0) * 100%));
}
/* The highest lit bar breathes once the reading settles, so the gauge looks
   live rather than parked. Brightness, not opacity — opacity is JS's. */
.bars i.lead { animation: breathe 2.6s ease-in-out infinite; }
@keyframes breathe {
  0%, 100% { filter: brightness(1); }
  50%      { filter: brightness(1.5); }
}
.gauge-num {
  font-size: 1rem; font-weight: 600;
  font-variant-numeric: tabular-nums;
  min-width: 1.2ch;
  color: var(--mark);
  color: color-mix(in oklab, var(--mark), var(--warm) calc(var(--conv, 0) * 100%));
}
.gauge-num.tick { animation: tick .34s cubic-bezier(.2,.8,.3,1); }
@keyframes tick {
  0%   { transform: translateY(-.32em); opacity: .35; }
  100% { transform: none; opacity: 1; }
}
.bar-nav { display: flex; align-items: center; gap: 1.5rem; }
.bar-link { font-size: .92rem; text-decoration: none; color: var(--ink-2); }
.bar-link:hover { color: var(--ink); }
.bar-link:focus-visible { outline: 2px solid var(--mark); outline-offset: 4px; }

/* The hero CTA scrolls away; this one takes its place in the sticky bar so the
   next step is never off-screen. Hidden until the hero button leaves the
   viewport — two identical CTAs on screen at once is just noise. */
.bar-cta {
  display: inline-block;
  font-size: .88rem; font-weight: 600;
  color: var(--mark-fg); background: var(--mark);
  padding: .5rem 1rem; text-decoration: none;
  white-space: nowrap;
  opacity: 0; transform: translateY(-.4rem) scale(.96);
  /* visibility, not just opacity: while it is away it must be untabbable and
     invisible to a screen reader, not merely transparent */
  visibility: hidden; pointer-events: none;
  transition: opacity .28s ease,
              transform .28s cubic-bezier(.2,.8,.3,1),
              visibility 0s linear .28s;
}
.bar-cta.show {
  opacity: 1; transform: none;
  visibility: visible; pointer-events: auto;
  transition-delay: 0s;
}
.bar-cta:hover { filter: brightness(1.08); }
.bar-cta:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* the gauge yields to the CTA on narrow screens rather than crowding it */
@media (max-width: 900px) {
  .bar-cta.show ~ .gauge, .gauge:has(~ .bar-cta.show) { display: none; }
}

/* ------------------------------------------------------------------ grid --- */
/* One block = one move in the call: the body, and the technique named beside
   it. Collapsing --mark-w to 0 is "take the answer key away". */
.move {
  display: grid;
  grid-template-columns: minmax(0, 40rem) var(--mark-w);
  column-gap: var(--gap);
  align-items: start;
  transition: grid-template-columns .42s cubic-bezier(.3,.7,.3,1) .06s;
}
.sign { grid-column: 1 / -1; }
.body-col { grid-column: 1; min-width: 0; }
.note {
  grid-column: 2; min-width: 0;
  overflow: hidden;
  transition: height 0s linear 0s;    /* comes back instantly on the way in */
}
/* The inner block keeps its full width while the column closes, so the text is
   clipped instead of re-wrapping into a zero-wide column. Re-wrapping made the
   grid row grow taller and shoved everything below it down the page. */
.note-in {
  width: var(--mark-w);
  transition: opacity .22s ease, transform .34s cubic-bezier(.3,.7,.3,1);
}
/* Order matters, and it is what makes this read as one gesture: the note fades
   and slides out first, the column closes behind it, and the row only gives up
   its height once both have finished. */
.bare .note-in { opacity: 0; transform: translateX(1.2rem); }
.bare .move { grid-template-columns: minmax(0, 40rem) 0rem; }
.bare .note { height: 0; transition: height 0s linear .36s; }

.chip {
  display: inline-block;
  background: var(--mark); color: var(--mark-fg);
  font-size: .74rem; font-weight: 600;
  letter-spacing: .07em; text-transform: uppercase;
  padding: .35rem .6rem; margin-bottom: .8rem;
  white-space: nowrap;
}
.note p { margin: 0; font-size: .9rem; line-height: 1.55; color: var(--ink-2); }

/* ------------------------------------------------------------------ hero --- */
.hero { padding: 5rem 0 0; }
.h1 {
  margin: 0;
  font-size: clamp(2.9rem, 7.4vw, 5.6rem);
  font-weight: 600; letter-spacing: -.038em; line-height: .94;
}
.h1 em { font-style: normal; color: var(--mark); }
.lede {
  margin: 1.5rem 0 0;
  font-family: var(--f-text);
  font-size: clamp(1.15rem, 1.9vw, 1.38rem);
  line-height: 1.55; color: var(--ink-2); max-width: 36ch;
}
.lede b { color: var(--ink); font-weight: 600; }

.toggle-row {
  margin-top: 2.6rem; padding: 1rem 0;
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
}
/* A real switch, not a button whose label flips. The state is the point — you
   are turning the answer key on and off — and a switch says that without
   needing the word to change underneath your cursor. */
.toggle {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--f-sans); font-size: .88rem; font-weight: 600;
  color: var(--ink-2); background: none; border: 0; padding: .35rem 0;
  cursor: pointer;
}
.toggle-track {
  position: relative;
  width: 2.4rem; height: 1.35rem;
  border-radius: 1rem;
  background: var(--rule);
  transition: background .28s cubic-bezier(.3,.7,.3,1);
  flex: none;
}
.toggle-knob {
  position: absolute; top: .2rem; left: .2rem;
  width: .95rem; height: .95rem;
  border-radius: 50%;
  background: var(--paper);
  transition: transform .28s cubic-bezier(.3,.7,.3,1);
}
.toggle[aria-checked="true"] .toggle-track { background: var(--mark); }
.toggle[aria-checked="true"] .toggle-knob { transform: translateX(1.05rem); }
.toggle[aria-checked="true"] { color: var(--ink); }
.toggle:focus-visible { outline: 2px solid var(--mark); outline-offset: 3px; }
.toggle-hint { font-size: .88rem; color: var(--ink-3); max-width: 52ch; }
/* No JS, no toggle — the annotations are the page, so they stay. */
.no-js .toggle { display: none; }

/* -------------------------------------------------------- sign (objection) -- */
.call { padding-top: 3.5rem; }
.move + .move { margin-top: 5rem; }

.sign {
  background: var(--sign-bg); color: var(--sign-fg);
  padding: 1.5rem 1.8rem 1.9rem;
  margin-bottom: 2rem;
  text-decoration: none;
  display: block;
}
a.sign { display: flex; flex-direction: column; }
a.sign:hover { filter: brightness(1.15); }
a.sign:focus-visible { outline: 3px solid var(--mark); outline-offset: 3px; }

.sign-go {
  align-self: flex-end;
  margin-top: 1.4rem;
  display: inline-flex; align-items: center; gap: .55rem;
  font-size: .78rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--sign-dim);
  border-bottom: 1px solid transparent;
  padding-bottom: .15rem;
  transition: color .2s ease, border-color .2s ease;
}
.sign-arrow {
  display: inline-block;
  transition: transform .25s cubic-bezier(.2,.8,.3,1);
}
a.sign:hover .sign-go, a.sign:focus-visible .sign-go {
  color: var(--sign-fg);
  border-bottom-color: var(--sign-fg);
}
a.sign:hover .sign-arrow { transform: translateX(.35rem); }
.sign-tag {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1.5rem; flex-wrap: wrap;
  font-size: .72rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  margin-bottom: 1.1rem;
}
.sign-cat { color: var(--sign-fg); }
.sign-count {
  color: var(--sign-dim); letter-spacing: .06em;
  font-variant-numeric: tabular-nums;
}
.said {
  margin: 0;
  font-size: clamp(1.8rem, 4.3vw, 3.1rem);
  font-weight: 600; letter-spacing: -.032em; line-height: 1.08;
  text-wrap: balance;
}

/* --------------------------------------------------------------- answers --- */
.answer {
  margin: 0;
  font-family: var(--f-text);
  font-size: 1.12rem; line-height: 1.68; color: var(--ink-2);
}
.answer.lead {
  font-size: clamp(1.28rem, 2.1vw, 1.5rem);
  line-height: 1.5; color: var(--ink);
}
.answer + .answer { margin-top: 1.05rem; }
.answer b { color: var(--ink); font-weight: 600; }

.sums { margin: 1.8rem 0 0; }
.sum {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1.5rem; padding: .6rem 0;
  border-bottom: 1px solid var(--rule);
  font-size: .98rem; color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.sum b { font-weight: 600; color: var(--ink); }
.figure {
  margin-top: 1.6rem;
  display: flex; align-items: baseline; gap: .9rem; flex-wrap: wrap;
}
.figure-n {
  font-size: clamp(2.6rem, 6vw, 4rem);
  font-weight: 600; letter-spacing: -.04em; line-height: 1;
  color: var(--mark); font-variant-numeric: tabular-nums;
}
.figure-t { font-size: 1rem; color: var(--ink-2); max-width: 18ch; }

/* ----------------------------------------------------------------- close --- */
.close { padding-top: 5.5rem; }
.close-line {
  margin: 0;
  font-size: clamp(1.5rem, 2.9vw, 2.15rem);
  font-weight: 600; letter-spacing: -.028em; line-height: 1.18;
  max-width: 24ch; text-wrap: balance;
}
.cta-row {
  margin-top: 1.8rem;
  display: flex; align-items: center; gap: 1.15rem; flex-wrap: wrap;
}
.cta {
  display: inline-block;
  font-size: 1rem; font-weight: 600;
  color: var(--mark-fg); background: var(--mark);
  border: 0; padding: .9rem 1.5rem;
  text-decoration: none; cursor: pointer;
}
.cta:hover { filter: brightness(1.08); }
.cta:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.cta-note { font-size: .93rem; color: var(--ink-3); }

.kicker {
  margin: 3rem 0 0; padding-top: 1.8rem;
  border-top: 1px solid var(--rule);
  font-family: var(--f-text);
  font-size: 1.12rem; line-height: 1.68; color: var(--ink-2); max-width: 46ch;
}
.kicker b { color: var(--ink); font-weight: 600; }

.foot {
  margin-top: 4.5rem; padding-top: 1.3rem;
  border-top: 1px solid var(--rule);
  display: flex; gap: 1.4rem; flex-wrap: wrap;
  font-size: .88rem; color: var(--ink-3);
}
.foot a { color: var(--ink-3); text-decoration: none; }
.foot a:hover { color: var(--ink); }

/* ------------------------------------------------------------ /business/ --- */
/* The home page puts ONE conviction gauge in the bar, for one call. This page
   sells to someone who runs eight of them, so the gauge becomes a wall: one
   mark per objection in the library, ninety-one of them on screen at once.
   Same vocabulary, one altitude up — and it is a real count, not a decoration,
   which is why the number is printed beside every row. */
.floor { padding-top: 5rem; max-width: 46rem; }
.floor-h2 {
  margin: 0 0 1.2rem;
  font-size: clamp(1.6rem, 3.4vw, 2.4rem);
  font-weight: 600; letter-spacing: -.03em; line-height: 1.08;
  max-width: 20ch; text-wrap: balance;
}
.floor-list {
  list-style: none; margin: 2.2rem 0 0; padding: 0;
  border-top: 1px solid var(--rule);
}
.floor-row {
  display: grid;
  grid-template-columns: 10.5rem minmax(0, 1fr) 2.2rem;
  align-items: center; gap: .4rem 1.4rem;
  padding: .75rem 0;
  border-bottom: 1px solid var(--rule);
  text-decoration: none; color: var(--ink-2);
}
.floor-cat {
  font-size: .95rem; font-weight: 600; letter-spacing: -.01em;
  border-bottom: 1px solid transparent; padding-bottom: 1px;
}
.floor-row:hover { color: var(--ink); }
.floor-row:hover .floor-cat { border-bottom-color: var(--ink); }
.floor-row:focus-visible { outline: 2px solid var(--mark); outline-offset: 3px; }
.floor-marks { display: flex; align-items: flex-end; gap: 3px; flex-wrap: wrap; }
.floor-marks i { display: block; width: 7px; height: 18px; background: var(--mark); flex: none; }
.floor-n {
  text-align: right; font-size: .95rem; font-weight: 600;
  color: var(--ink); font-variant-numeric: tabular-nums;
}
.floor-total {
  display: flex; justify-content: space-between; gap: 1rem;
  margin: 0; padding-top: .9rem;
  font-size: .78rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3);
}
.floor-total b { color: var(--ink); font-variant-numeric: tabular-nums; }

/* The two columns of the truth about Teams: what is in the product, and what
   is not. Solid border for shipped, dashed for not — the difference has to be
   legible before a word is read, because this is the section that decides
   whether the rest of the page is believed. */
.ledger {
  margin-top: 2.4rem;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.2rem; align-items: start;
}
.ledger-col {
  border: 1px solid var(--rule); background: var(--raised);
  padding: 1.4rem 1.5rem 1.5rem;
}
.ledger-col.soon { background: none; border-style: dashed; }
.ledger-h {
  margin: 0 0 .4rem;
  font-size: .72rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--mark);
}
.ledger-col.soon .ledger-h { color: var(--ink-3); }
.ledger ul { margin: 0; padding: 0; list-style: none; }
/* Both columns are set in the same ink deliberately. Greying out the right one
   would say "coming soon, don't read it" — the whole point of printing it is
   that a buyer reads it as carefully as the left. The dashed border and the
   heading carry the difference. */
.ledger li {
  font-size: .93rem; line-height: 1.5; color: var(--ink-2);
  padding: .6rem 0; border-top: 1px solid var(--rule);
}
.ledger-after { margin-top: 1.6rem; max-width: 40rem; }

.pilot { margin-top: 5rem; }
.pilot-h2 {
  margin: 0 0 1.2rem;
  font-size: clamp(1.5rem, 2.9vw, 2.15rem);
  font-weight: 600; letter-spacing: -.028em; line-height: 1.14;
  max-width: 22ch; text-wrap: balance;
}

@media (max-width: 760px) {
  .ledger { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
  .floor-row { grid-template-columns: minmax(0, 1fr) auto; }
  .floor-cat { grid-column: 1; grid-row: 1; }
  .floor-n { grid-column: 2; grid-row: 1; }
  .floor-marks { grid-column: 1 / -1; grid-row: 2; }
}

/* ------------------------------------------------------- objection pages --- */
/* The long-tail surface: one page per objection category. Same visual system,
   read as a reference article rather than a pitch. */
.crumb {
  padding-top: 2.5rem;
  font-size: .88rem; color: var(--ink-3);
}
.crumb a { color: var(--ink-3); text-decoration: none; }
.crumb a:hover { color: var(--ink); }

.obj-head { padding-top: 1.5rem; }
.obj-h1 {
  margin: 0 0 1.2rem;
  font-size: clamp(2rem, 4.6vw, 3.2rem);
  font-weight: 600; letter-spacing: -.035em; line-height: 1.02;
  max-width: 22ch; text-wrap: balance;
}

.prose { max-width: 40rem; }
.prose h2 {
  margin: 3.2rem 0 1rem;
  font-size: clamp(1.35rem, 2.4vw, 1.7rem);
  font-weight: 600; letter-spacing: -.025em; line-height: 1.2;
}
.prose p {
  margin: 0 0 1.05rem;
  font-family: var(--f-text);
  font-size: 1.12rem; line-height: 1.68; color: var(--ink-2);
}
.prose p b { color: var(--ink); font-weight: 600; }
.prose ul { margin: 0 0 1.05rem; padding-left: 1.2rem; }
.prose li {
  font-family: var(--f-text);
  font-size: 1.12rem; line-height: 1.68; color: var(--ink-2);
  margin-bottom: .5rem;
}

/* a worked exchange: what they said, what works, why */
.exchange {
  margin: 1.6rem 0 2rem;
  border-left: 3px solid var(--mark);
  padding-left: 1.3rem;
}
.exchange-role {
  display: block;
  font-size: .72rem; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-3);
  margin-bottom: .4rem;
}
.exchange-line {
  margin: 0 0 1.3rem;
  font-family: var(--f-text);
  font-size: 1.2rem; line-height: 1.55; color: var(--ink);
}
.exchange-line:last-child { margin-bottom: 0; }

.dont {
  margin: 1.6rem 0 2rem;
  border-left: 3px solid var(--rule);
  padding-left: 1.3rem;
}
.dont .exchange-role { color: var(--ink-3); }

/* the index of all nine */
.obj-grid {
  margin-top: 2.5rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: 1rem;
}
.obj-card {
  display: flex; flex-direction: column; gap: .7rem;
  background: var(--sign-bg); color: var(--sign-fg);
  padding: 1.3rem 1.4rem 1.5rem;
  text-decoration: none;
}
.obj-card:hover { filter: brightness(1.15); }
.obj-card:focus-visible { outline: 3px solid var(--mark); outline-offset: 3px; }
.obj-card-tag {
  display: flex; justify-content: space-between; gap: 1rem;
  font-size: .7rem; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase;
}
.obj-card-tag .n { color: var(--sign-dim); font-variant-numeric: tabular-nums; }
.obj-card-line {
  margin: 0;
  font-size: 1.28rem; font-weight: 600;
  letter-spacing: -.025em; line-height: 1.2;
}

/* --------------------------------------------------------------- responsive */
@media (max-width: 1000px) {
  .move, .bare .move { grid-template-columns: minmax(0, 1fr); }
  .note {
    grid-column: 1; margin-top: 1.4rem;
    padding-left: 1rem; border-left: 3px solid var(--mark);
    max-width: 44ch;
  }
  .note-in { width: auto; }
  .bare .note { display: none; }
}

@media (max-width: 640px) {
  .wrap { padding: 0 1.15rem 4.5rem; }
  .bar { margin: 0 -1.15rem; padding: .75rem 1.15rem; }
  .gauge-label, .gauge-state { display: none; }
  .bars { height: 15px; }
  .bars i { width: 7px; height: 15px; }
  .hero { padding-top: 3rem; }
  .sign { padding: 1.2rem 1.2rem 1.4rem; }
  .move + .move { margin-top: 3.5rem; }
  .lede { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition-duration: .001ms !important;
    animation-duration: .001ms !important;
  }
}

/* ------------------------------------------------------------------ consent */
/* Reject is exactly as easy and as prominent as accept — one click each, same
   size, same weight. A banner where "accept" is a button and "reject" is a
   grey link is not consent, it is a toll booth, and it fails under both
   PIPEDA and GDPR. Nothing non-essential runs until a choice is recorded. */
.consent {
  position: fixed; inset: auto 0 0 0; z-index: 60;
  background: var(--raised);
  border-top: 1px solid var(--rule);
  box-shadow: 0 -12px 40px -20px rgba(0,0,0,.35);
  padding: 1.4rem 2rem 1.5rem;
  transform: translateY(110%);
  transition: transform .4s cubic-bezier(.3,.7,.3,1);
}
.consent.show { transform: none; }
.consent-in {
  max-width: 66rem; margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: 1.5rem 2.5rem; align-items: end;
}
.consent-title { margin: 0 0 .5rem; font-size: 1rem; font-weight: 600; }
.consent-copy {
  margin: 0; font-size: .92rem; line-height: 1.6;
  color: var(--ink-2); max-width: 58ch;
}
.consent-copy a { color: var(--mark); }
.consent-actions { display: flex; gap: .7rem; flex-wrap: wrap; align-items: center; }
.consent-btn {
  font-family: var(--f-sans); font-size: .9rem; font-weight: 600;
  padding: .7rem 1.2rem; border: 1px solid var(--mark);
  background: none; color: var(--mark); cursor: pointer; white-space: nowrap;
}
.consent-btn.primary { background: var(--mark); color: var(--mark-fg); }
.consent-btn:hover { filter: brightness(1.06); }
.consent-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.consent-more {
  background: none; border: 0; padding: .7rem 0; cursor: pointer;
  font-family: var(--f-sans); font-size: .9rem; color: var(--ink-3);
  text-decoration: underline; text-underline-offset: 3px;
}
.consent-more:hover { color: var(--ink); }

.consent-detail { display: none; grid-column: 1 / -1; padding-top: .4rem; }
.consent-detail.open { display: block; }
.consent-purpose {
  display: flex; gap: .8rem; align-items: flex-start;
  padding: .8rem 0; border-top: 1px solid var(--rule);
}
.consent-purpose input { margin-top: .25rem; width: 1rem; height: 1rem; accent-color: var(--mark); }
.consent-purpose b { display: block; font-size: .92rem; font-weight: 600; }
.consent-purpose span { font-size: .88rem; color: var(--ink-2); line-height: 1.55; }

@media (max-width: 760px) {
  .consent { padding: 1.1rem 1.15rem 1.3rem; }
  .consent-in { grid-template-columns: minmax(0, 1fr); gap: 1.1rem; }
  .consent-actions { width: 100%; }
  .consent-btn { flex: 1 1 8rem; text-align: center; }
}

.foot-link {
  font-family: var(--f-sans); font-size: .88rem;
  color: var(--ink-3); background: none; border: 0; padding: 0;
  cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
}
.foot-link:hover { color: var(--ink); }
.foot-link:focus-visible { outline: 2px solid var(--mark); outline-offset: 3px; }

/* ---------------------------------------------------------------- pricing */
.plans {
  margin-top: 3rem;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem;
  align-items: start;
}
.plan {
  position: relative;
  border: 1px solid var(--rule); background: var(--raised);
  padding: 1.8rem 1.6rem 1.9rem;
  display: flex; flex-direction: column; gap: .5rem;
}
.plan.best { border-color: var(--mark); box-shadow: 0 0 0 1px var(--mark); }
.plan-flag {
  position: absolute; top: -.7rem; left: 1.5rem;
  background: var(--mark); color: var(--mark-fg);
  font-size: .68rem; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; padding: .25rem .6rem;
}
.plan-name { margin: 0; font-size: 1.05rem; font-weight: 600; letter-spacing: -.01em; }
.plan-price { margin: .2rem 0 0; display: flex; align-items: baseline; gap: .35rem; }
.plan-price b {
  font-size: 2.6rem; font-weight: 600; letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
}
.plan-price span { font-size: .95rem; color: var(--ink-3); }
/* the number the buyer actually cares about — not the credit count */
.plan-reps { margin: 0 0 .4rem; font-size: 1rem; color: var(--mark); }
.plan-reps b { font-weight: 600; }
.plan-list { margin: .4rem 0 1.2rem; padding: 0; list-style: none; }
.plan-list li {
  font-size: .93rem; line-height: 1.5; color: var(--ink-2);
  padding: .45rem 0; border-top: 1px solid var(--rule);
}
.plan-cta { margin-top: auto; text-align: center; }

@media (max-width: 860px) {
  .plans { grid-template-columns: 1fr; }
  .plan-flag { left: 1.2rem; }
}