/* Quick Throttle landing page
   Same palette as before, orange on warm paper, but the weight is gone. The
   page used to be 1px of ink around every box with a hard offset shadow under
   it, which read as a stack of blocks rather than as one page. Borders are
   hairlines now, shadows are soft, corners are rounded, and the space between
   things does the separating instead of a line. */

:root {
  --ink:      #22201E;
  --ink-soft: #3A3733;
  --orange:   #E65C22;
  --orange-d: #C94A15;
  --paper:    #FFFFFF;
  --mist:     #EDEAE4;   /* the page behind the card */
  --mist-2:   #F4F1EB;   /* panels sitting on the card */
  --muted:    #736E66;
  --line:     rgba(34, 32, 30, .12);
  --line-2:   rgba(34, 32, 30, .07);

  /* One centred column, so the shell is the reading column rather than a
     column plus a sidebar. 1040 leaves about 890px of content between the
     gutters on a big monitor, which is roughly what the text column measured
     when the buy box still took 430px off the right. Everything inside keeps
     the size it had; the page around it got narrower. --gutter is the padding
     inside the card, which grows with the window. */
  --shell:  clamp(900px, 88vw, 1040px);
  --narrow: clamp(820px, 64vw, 940px);
  --gutter: clamp(30px, 3.6vw, 54px);
  --measure: 72ch;

  --r:    18px;
  --r-md: 12px;
  --r-sm: 9px;

  --shadow:    0 1px 2px rgba(34, 32, 30, .05), 0 10px 30px -12px rgba(34, 32, 30, .18);
  --shadow-sm: 0 1px 2px rgba(34, 32, 30, .06), 0 4px 12px -6px rgba(34, 32, 30, .18);
  --shadow-lg: 0 2px 4px rgba(34, 32, 30, .04), 0 24px 60px -24px rgba(34, 32, 30, .28);

  /* Montserrat does the work. The serif turns up twice on the whole page. */
  --serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --sans:  Montserrat, "Segoe UI", system-ui, -apple-system, sans-serif;
  --logo:  var(--sans);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--mist);
  color: var(--ink-soft);
  font: 400 17px/1.75 var(--sans);
  letter-spacing: -0.004em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }

a { color: var(--ink); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--orange); }

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--ink); color: #fff; padding: 10px 16px;
  border-radius: var(--r-sm); z-index: 100;
}
.skip:focus { left: 8px; top: 8px; color: #fff; }

:where(a, button):focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
}

/* ---------- top bar ---------- */

/* It used to be a solid ink slab pinned over paper. Frosted glass instead, so
   the page reads as one surface scrolling under one thin rule. */
.topbar {
  position: sticky; top: 0; z-index: 40;
  background: rgba(237, 234, 228, .82);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease, background .2s ease;
}
.topbar.scrolled {
  border-bottom-color: var(--line);
  background: rgba(237, 234, 228, .92);
}
.topbar-in {
  max-width: var(--shell); margin: 0 auto;
  padding: 14px 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.brand-tile {
  display: inline-flex; align-items: center; gap: 10px;
  font: 700 18px/1 var(--logo);
  color: var(--ink); letter-spacing: -0.02em;
}
/* On the blog the tile is a link home. It loses the underline so it reads as
   the logo it is rather than as body copy. */
a.brand-tile { text-decoration: none; }
a.brand-tile:hover { color: var(--ink); }
a.brand-tile:hover .blob { transform: rotate(45deg) scale(1.12); }

.blob {
  width: 18px; height: 18px; background: var(--orange);
  border-radius: 50% 50% 50% 4px;
  transform: rotate(45deg);
  transition: transform .18s ease;
}
.topbar-buy {
  display: flex; align-items: center; gap: 14px;
  opacity: 0; visibility: hidden;
  transform: translateY(-4px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.topbar.scrolled .topbar-buy { opacity: 1; visibility: visible; transform: none; }
/* The price and the label sit in their own flex box so the 14px gap in
   .topbar-buy stays between the price block and the button, and the two words
   ride 7px off the number instead. Baseline alignment, so the 13px label lines
   up with the bottom of the 16px price rather than its middle. */
.topbar-cost { display: flex; align-items: baseline; gap: 7px; }
.topbar-price { color: var(--ink); font-weight: 600; font-size: 16px; }
.topbar-note { color: var(--muted); font-weight: 500; font-size: 13px; letter-spacing: -0.01em; }
/* The price it goes to, struck through beside the one it is now. Muted and a
   size down, so the bar still reads as one number with a footnote on it. */
.topbar-was { color: var(--muted); font-weight: 500; font-size: 13px; text-decoration-thickness: 1px; }

/* ---------- buttons ---------- */

.btn {
  display: inline-block; text-align: center; text-decoration: none;
  font: 600 16px/1 var(--sans);
  letter-spacing: -0.01em;
  padding: 14px 24px;
  border: 0;
  border-radius: 999px;
  background: var(--paper); color: var(--ink);
  box-shadow: var(--shadow-sm);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
.btn:active { transform: translateY(0); box-shadow: var(--shadow-sm); }

.btn-buy {
  background: var(--orange); color: #fff;
  box-shadow: 0 1px 2px rgba(34, 32, 30, .08), 0 8px 20px -8px rgba(230, 92, 34, .65);
}
.btn-buy:hover {
  background: var(--orange-d); color: #fff;
  box-shadow: 0 2px 4px rgba(34, 32, 30, .08), 0 14px 28px -10px rgba(230, 92, 34, .7);
}
.btn-sm { padding: 10px 18px; font-size: 14.5px; }
.btn-lg { display: block; width: 100%; padding: 18px 24px; font-size: 18px; font-weight: 700; }

/* ---------- shell ---------- */

.wrap { max-width: var(--shell); margin: 0 auto; padding: 32px 24px 88px; }

.card {
  background: var(--paper);
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  box-shadow: var(--shadow-lg);
}

/* The rounding lives on the picture rather than on the card. overflow:hidden
   up there would clip the hero neatly and quietly stop the buy box sticking,
   because a sticky element only sticks inside its nearest scrolling ancestor.
   Nothing else in the card carries a background of its own, so the bottom
   corners take care of themselves. */
.cover {
  margin: 0;
  background: var(--mist-2);
  border-radius: var(--r) var(--r) 0 0;
  overflow: hidden;
}
/* ---------- hero ---------- */

/* Four full width slides on one rail, moved by transform, with a copy of the
   last one in front and a copy of the first behind. A turn off either end
   keeps going the same way instead of rewinding.

   pan-y leaves the up and down scroll to the browser and hands the sideways
   drags to the script, which is what makes it swipeable without trapping the
   page under a thumb.

   The slides are set in text now rather than flattened into a JPEG, so every
   size on them is a fraction of the rail's width. Naming .hero as an inline
   size container is what gives them a width to measure against. */
.hero {
  position: relative;
  overflow: hidden;
  touch-action: pan-y;
  cursor: grab;
  container-type: inline-size;
  background: #EFEFEF;
}
.hero:active { cursor: grabbing; }

.hero-track {
  display: flex;
  transition: transform .65s cubic-bezier(.4, 0, .2, 1);
  will-change: transform;
}
/* Used for the silent jump off a copy onto the slide it copies, and to let
   the rail follow a finger with no easing in the way. */
.hero-track.jump { transition: none; }

/* A slide is live text on a flat #EFEFEF field with one screenshot bleeding
   off the bottom right corner, rebuilt from the four artwork boards. Every
   number below is the measurement off those boards, in board pixels on a
   1920 x 854 canvas, so --u is one of those pixels: 1920 of them is the width
   of the rail whatever the rail is actually showing at. cqw needs the
   container, which is .hero. */
.hslide {
  --u: calc(100cqw / 1920);
  position: relative;
  flex: 0 0 100%;
  aspect-ratio: 1920 / 854;
  background: #EFEFEF;
  color: #000;
  font-family: var(--serif);
  font-weight: 400;
  /* The headline is set to not wrap, so a fallback serif on a cold load must
     run off the end of its own slide rather than onto the next one. */
  overflow: hidden;
  -webkit-user-drag: none;
}
/* A drag has to move the rail, not select the copy on it. Only while a drag
   is actually running, though: the rest of the time the headline is the line
   somebody wants to quote, so it has to stay selectable. */
.hero.grabbing .hslide {
  user-select: none;
}
/* The one accent the boards use, and the one italic. */
.hslide .r  { color: #FF3333; }
.hslide .it { font-style: italic; }

/* The picture sits flush into the bottom right corner at its own 1007px
   width, which is 52.45% of the board. Only the corner that shows is
   rounded. */
.hs-shot {
  position: absolute;
  left: 47.5521%;
  bottom: 0;
  width: 52.4479%;
  height: auto;
  border-top-left-radius: calc(36 * var(--u));
  pointer-events: none;
}

/* Headline, subhead and list are placed off the board rather than stacked,
   because the boards pin each one to a baseline of its own. A `top` here is
   the line box top that puts the first baseline where the artwork has it:
   Instrument Serif carries 0.99em over the baseline and 0.31em under it, so
   baseline = top + line-height / 2 + 0.34 * font-size. */
.hs-title,
.hs-sub,
.hs-list {
  position: absolute;
  margin: 0;
  left: calc(75.5 * var(--u));
  right: 0;
}

.hs-title {
  top: calc(56.2 * var(--u));
  font-size: calc(149.5 * var(--u));
  line-height: calc(164 * var(--u));
  letter-spacing: -0.0403em;
}
.hs-title .hs-line { display: block; white-space: nowrap; }

/* Board one runs a little larger and a shade looser than the other three. */
.hslide-1 .hs-title {
  top: calc(60.5 * var(--u));
  font-size: calc(154.3 * var(--u));
  letter-spacing: -0.0366em;
}

.hs-sub {
  top: calc(234.2 * var(--u));
  font-size: calc(68.4 * var(--u));
  line-height: calc(75 * var(--u));
  letter-spacing: -0.0427em;
  white-space: nowrap;
}

/* The bullets keep one 56px rhythm all the way down, and the nested run on
   board two sits on the same rhythm, so the markers are placed off the line
   box rather than centred in it. */
.hs-list,
.hs-sublist {
  list-style: none;
  padding: 0;
}
.hs-list {
  left: calc(144 * var(--u));
  top: calc(468.5 * var(--u));
  font-size: calc(39.7 * var(--u));
  line-height: calc(56 * var(--u));
  letter-spacing: -0.0338em;
}
.hs-list > li {
  position: relative;
  padding-left: calc(33.2 * var(--u));
}
.hs-list > li::before {
  content: "";
  position: absolute;
  left: 0; top: calc(23.5 * var(--u));
  width: calc(13 * var(--u)); height: calc(13 * var(--u));
  border-radius: 50%;
  background: #000;
}

/* The nested run starts 68 board pixels in from the outer markers, and it
   sits inside a list item that is already padded 33.2 of them across. */
.hs-sublist { margin: 0 0 0 calc(34.8 * var(--u)); }
.hs-sublist > li {
  position: relative;
  padding-left: calc(34.2 * var(--u));
}
.hs-sublist > li::before {
  content: "";
  position: absolute;
  left: 0; top: calc(22.5 * var(--u));
  width: calc(15 * var(--u)); height: calc(15 * var(--u));
  border: calc(2 * var(--u)) solid #000;
  border-radius: 50%;
  background: none;
}

/* Over the picture, top right, on a frosted pill so the dots read against
   whatever slide is under them without an outline around each one. */
.hero-dots {
  position: absolute; right: 18px; top: 16px; z-index: 2;
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.hero-dots .dot { width: 7px; height: 7px; border: 0; background: rgba(34, 32, 30, .3); }
.hero-dots .dot[aria-current="true"] { background: var(--orange); }

/* Centred, because the column under it is centred too. The price row lives
   here now that there is no sidebar holding it above the fold. */
.head {
  padding: clamp(32px, 3.4vw, 44px) var(--gutter) clamp(34px, 3.4vw, 42px);
  border-bottom: 1px solid var(--line-2);
  text-align: center;
}
h1 {
  margin: 0 0 14px;
  color: var(--ink);
  font: 700 clamp(30px, 4vw, 48px)/1.1 var(--sans);
  letter-spacing: -0.032em;
}
/* Instrument Serif ships at 400 only, so this half sits lighter than the
   Montserrat before it whether we ask it to or not. 1.06em puts the two back on
   the same optical size, since a serif at a matched point size reads smaller,
   and the tight tracking the sans wants is too tight for it. */
.h1-serif {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.06em;
  letter-spacing: -0.012em;
}
.summary {
  margin: 0 auto;
  max-width: 60ch;
  font-size: 18px; line-height: 1.65;
  color: var(--muted);
}

.head-cta {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap;
  gap: 10px 20px;
  margin-top: clamp(24px, 2.4vw, 32px);
}
.head-price { font: 400 44px/1 var(--serif); letter-spacing: -0.03em; color: var(--ink); }
.btn-hero { padding: 16px 32px; font-size: 17px; font-weight: 700; }
.head-note { font-size: 14.5px; color: var(--muted); }
.launch-note { margin: 14px 0 0; font-size: 16px; font-weight: 600; }
.ph-badge { display: inline-block; margin-top: 20px; line-height: 0; }
.ph-badge img { display: block; width: 250px; height: 54px; }

/* ---------- one column ---------- */

/* The buy box used to be a sticky 430px sidebar on the right. The price sits
   in the head, in the topbar once you scroll past it, on the mobile bar, and
   in its own band above the FAQ, so nothing is lost by giving the content the
   whole width of the card. */
.desc {
  padding: 0 var(--gutter) clamp(38px, 3.8vw, 52px);
  min-width: 0;
}
.desc > *:first-child { margin-top: 0; }

/* ---------- bands ---------- */

/* One band says one thing. A hairline and a lot of air do the separating, so
   nothing needs a box around it. */
.band { padding: clamp(44px, 4.4vw, 64px) 0; border-top: 1px solid var(--line-2); }
.band-first { border-top: 0; }
.band > *:first-child { margin-top: 0; }
.band > *:last-child { margin-bottom: 0; }
.band:last-child { padding-bottom: 0; }

/* The header of a band is centred and short. Everything under it goes back to
   being left aligned, because that is what long copy and grids want. */
.band-head {
  max-width: 62ch;
  margin: 0 auto clamp(26px, 2.6vw, 36px);
  text-align: center;
}
.band-head > *:last-child { margin-bottom: 0; }
.desc .band-head p { max-width: none; }
.desc .band-head .lede { margin: 0 auto 18px; }

.band-kicker {
  margin: 0 0 12px;
  font: 600 11.5px/1 var(--sans);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--orange);
}
.desc .band-title {
  margin: 0 0 14px;
  color: var(--ink);
  font: 700 clamp(25px, 2.9vw, 32px)/1.2 var(--sans);
  letter-spacing: -0.03em;
}

/* ---------- three things it makes ---------- */

.steps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.step-card {
  padding: 22px 22px 24px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  background: var(--mist-2);
}
.desc .step-card h3 {
  margin: 0 0 8px;
  color: var(--ink);
  font: 700 17px/1.3 var(--sans);
  letter-spacing: -0.02em;
}
.desc .step-card p { margin: 0; max-width: none; font-size: 15px; line-height: 1.6; color: var(--muted); }

.points {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 30px;
  margin: 28px 0 0;
}
.desc .point h3 {
  margin: 0 0 6px;
  color: var(--ink);
  font: 700 16.5px/1.35 var(--sans);
  letter-spacing: -0.02em;
}
.desc .point p { margin: 0; max-width: none; font-size: 15px; line-height: 1.6; color: var(--muted); }
/* Hanging dot, so a line that wraps lines up under the first word rather than
   under the bullet. */
.point-list { list-style: none; margin: 0; padding: 0; }
.point-list li {
  position: relative;
  padding: 0 0 0 18px;
  margin: 0 0 8px;
  font: 400 15px/1.6 var(--sans);
  color: var(--muted);
}
.point-list li:last-child { margin-bottom: 0; }
.point-list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 10px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--orange);
}

/* One of the two places the serif is allowed. */
.lede {
  font: 400 clamp(28px, 3.3vw, 38px)/1.26 var(--serif);
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 26px;
  max-width: 26ch;
}
.desc h2 {
  margin: 56px 0 12px;
  color: var(--ink);
  font: 700 21px/1.35 var(--sans);
  letter-spacing: -0.024em;
}
.desc p { margin: 0 0 18px; max-width: var(--measure); }

.ticks { list-style: none; padding: 0; margin: 0 0 20px; max-width: var(--measure); }
.ticks li { position: relative; padding-left: 30px; margin-bottom: 12px; }
.ticks li::before {
  content: ""; position: absolute; left: 2px; top: 10px;
  width: 11px; height: 6px;
  border-left: 2px solid var(--orange);
  border-bottom: 2px solid var(--orange);
  transform: rotate(-45deg);
}

.callout {
  border-left: 3px solid var(--orange);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  background: var(--mist-2);
  padding: 16px 20px;
  font-weight: 500;
}
.scarce {
  display: inline-block;
  padding: 7px 16px;
  border-radius: 999px;
  background: rgba(230, 92, 34, .1);
  font-weight: 600; font-size: 15px;
  color: var(--orange-d);
}

/* The counter under the pill. A live dot and one sentence, quieter than the
   pill above it, because the pill is the offer and this is only the proof that
   somebody already took it. */
.claimed {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin: 10px 0 0;
  font-weight: 500; font-size: 14px;
  color: var(--muted);
}
.claimed-dot {
  position: relative;
  width: 8px; height: 8px; border-radius: 50%;
  background: #1F9D55;
  box-shadow: 0 0 0 3px rgba(31, 157, 85, .16);
  flex: none;
}
/* A live dot: a ring swells out of it and fades, every two seconds. */
.claimed-dot::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: 50%;
  background: #1F9D55;
  animation: claimed-pulse 2s ease-out infinite;
}
@keyframes claimed-pulse {
  0%   { transform: scale(1);   opacity: .55; }
  80%  { transform: scale(3.2); opacity: 0; }
  100% { transform: scale(3.2); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .claimed-dot::after { animation: none; opacity: 0; }
}
.vid-lede { font-weight: 500; color: var(--ink); }

/* ---------- price comparison ---------- */

/* Three narrow columns fit a phone on their own. The wrapper is insurance for
   the day a tool turns up with a longer name than ReelFarm, and it carries the
   frame now so the table itself can be hairlines between rows. */
.compare-wrap {
  overflow-x: auto;
  margin: 0 auto 10px;
  max-width: min(100%, 720px);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--paper);
}

.compare {
  width: 100%;
  border-collapse: collapse;
  font-size: 15.5px;
}
.compare th,
.compare td {
  text-align: left;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line-2);
}
/* Headers may wrap on a phone. A price splitting across two lines may not. */
.compare td { white-space: nowrap; }
.compare tbody tr:last-child th,
.compare tbody tr:last-child td { border-bottom: 0; }

.compare thead th {
  font: 600 11.5px/1.4 var(--sans);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
  background: transparent;
}
.compare tbody th { font-weight: 600; color: var(--ink); white-space: nowrap; }

/* The one row anybody is meant to remember. A tint and an orange rail down the
   side carry as far as the solid block did, without turning a quarter of the
   table into a colour swatch. */
.compare .us { background: rgba(230, 92, 34, .08); }
.compare .us th,
.compare .us td { font-weight: 700; color: var(--orange-d); }
.compare .us th { box-shadow: inset 3px 0 0 var(--orange); }

.compare-note { font-size: 13.5px; line-height: 1.6; color: var(--muted); margin: 0 0 20px; }
/* The footnote under the centred table follows the table rather than the
   left edge of a column that is no longer there. */
.desc .compare-wrap + .compare-note {
  max-width: min(100%, 720px);
  margin: 0 auto;
  text-align: center;
}

/* ---------- capability comparison ---------- */

/* Five columns don't fit a phone, so the wrapper scrolls and the row labels
   stay pinned on the left while the tools slide under them. Quick Throttle is
   the first tool column, so it is on screen before anybody scrolls.
   border-collapse is separate so the orange column can have round ends. */
.caps-wrap {
  max-width: min(100%, 880px);
  padding: 14px 14px 10px;
  border-color: var(--line-2);
  border-radius: var(--r);
  box-shadow: var(--shadow);
}
.caps { min-width: 640px; border-collapse: separate; border-spacing: 0; }
.caps th, .caps td { text-align: center; vertical-align: middle; padding: 13px 16px; }

.caps thead th {
  padding: 14px 16px 16px;
  border-bottom: 1px solid var(--line);
  font: 600 14.5px/1.3 var(--sans);
  letter-spacing: -0.01em; text-transform: none;
  color: var(--ink);
  vertical-align: bottom;
}
.caps thead th:first-child {
  font: 600 11px/1.3 var(--sans);
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--muted);
  text-align: left;
}

.caps tbody th {
  text-align: left; font-weight: 500; color: var(--ink-soft);
  white-space: normal; min-width: 200px;
}
.caps th:first-child {
  position: sticky; left: 0; z-index: 1;
  background: var(--paper);
}
.caps tbody tr:not(.caps-group):hover th,
.caps tbody tr:not(.caps-group):hover td:not(.caps-us) { background: var(--mist-2); }

/* Every yes is the same orange, whoever has it. Partly and no fade to grey. */
.caps svg { width: 22px; height: 22px; display: block; margin: 0 auto; color: var(--orange); }
.caps svg[aria-label="Partly"] { color: #C4BEB4; }
.caps svg[aria-label="No"] { color: #DDD8CF; }

/* The Quick Throttle column: a faint warm lane with a hairline edge. The
   orange ticks do the pointing; the lane only holds them together. */
.caps .caps-us {
  --lane: rgba(230, 92, 34, .22);
  background: rgba(230, 92, 34, .03);
  box-shadow: inset 1px 0 0 var(--lane), inset -1px 0 0 var(--lane);
}
.caps .caps-us svg { color: var(--orange); }
.caps .caps-us svg[aria-label="No"] { color: #DDD8CF; }
.caps thead .caps-us {
  color: var(--orange-d); font-weight: 700;
  border-radius: 14px 14px 0 0;
  box-shadow: inset 1px 0 0 var(--lane), inset -1px 0 0 var(--lane), inset 0 1px 0 var(--lane);
}
.caps tbody tr:last-child .caps-us {
  border-radius: 0 0 14px 14px;
  box-shadow: inset 1px 0 0 var(--lane), inset -1px 0 0 var(--lane), inset 0 -1px 0 var(--lane);
}
.caps-badge {
  display: block; width: max-content;
  margin: 0 auto 7px; padding: 4px 9px;
  border-radius: 999px;
  background: rgba(230, 92, 34, .1);
  color: var(--orange-d);
  font: 700 10px/1 var(--sans);
  letter-spacing: 0.1em; text-transform: uppercase;
}

/* Section labels inside the table. The Quick Throttle cell stays in the row
   so the orange lane runs unbroken from top to bottom. */
.caps .caps-group th,
.caps .caps-group td { padding-top: 26px; padding-bottom: 9px; }
.caps .caps-group th {
  font: 700 11px/1.4 var(--sans);
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink);
}
.caps .caps-group th::before {
  content: ""; display: inline-block;
  width: 6px; height: 6px; margin: 0 9px 2px 0;
  border-radius: 50%; background: var(--orange);
}

.caps-price th { font-weight: 600; color: var(--ink); }
/* Every price reads the same, ours included. The column already says which
   one is ours. */
.caps .caps-price td { font-weight: 400; font-size: 15.5px; color: var(--ink-soft); }

/* Except the year total, which is the row the whole table is for. A warm band
   across it, ours in orange and theirs in heavy ink. */
.caps .caps-total th,
.caps .caps-total td,
.caps tbody tr.caps-total:hover th,
.caps tbody tr.caps-total:hover td:not(.caps-us) { background: #FCEBDD; }
.caps .caps-total th { font-weight: 700; color: var(--ink); }
.caps .caps-total td { font-weight: 700; font-size: 17px; color: var(--ink); }
.caps .caps-total td.caps-us { background: #F9D9C2; color: var(--orange-d); font-size: 20px; }

/* .desc p caps every paragraph at the reading measure and pins it left, so
   both lines under the table say .desc too, to centre under it. */
.desc .caps-legend {
  display: flex; justify-content: center; flex-wrap: wrap; gap: 8px;
  max-width: none;
  margin: 18px auto 10px; font-size: 13px; font-weight: 500; color: var(--ink-soft);
}
.caps-legend span {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px 5px 7px;
  border: 1px solid var(--line-2); border-radius: 999px;
  background: var(--paper);
}
.caps-legend svg { width: 16px; height: 16px; color: #C4BEB4; }
.caps-legend svg.is-us { color: var(--orange); }
.caps-legend span:last-child svg { color: #DDD8CF; }
.desc .caps-note { max-width: min(100%, 720px); margin: 0 auto; text-align: center; }

/* ---------- free tools ---------- */

/* One card, full width of the panel. Mute and Add Audio were beside it until
   the heading was narrowed to the one tool that comes out of the app. */
.free {
  margin: 44px 0 0;
  padding: 26px 28px 24px;
  background: var(--mist-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
}

.desc .free h2 { margin: 0 0 16px; font-size: 19px; }

.free-tool {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 16px 18px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  background: var(--paper);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease;
}
.free-tool:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.free-tool:active { transform: translateY(0); box-shadow: var(--shadow-sm); }

/* The section holds more than one card now. Neither the cards nor the notes
   carry a margin of their own, so the spacing lives here rather than on
   either, and a single-card section is untouched by both rules. */
.free-tool + .free-tool { margin-top: 12px; }
.free-note + .free-tool { margin-top: 18px; }

.free-lead { padding: 18px 20px; }
.free-lead .free-name { font-size: 17px; }
.free-lead .free-what { font-size: 14.5px; }

.free-name {
  font: 700 15.5px/1.2 var(--sans);
  letter-spacing: -0.01em;
  color: var(--orange);
  text-decoration: none;
}
.free-what { font-size: 14px; line-height: 1.55; color: var(--muted); }

.desc .free .free-note { margin: 16px 0 0; font-size: 13.5px; color: var(--muted); }

/* ---------- FAQ ---------- */

/* The licence line, the running costs, the requirements and the guarantee
   were four headings in the middle of the page, read by nobody until they
   were nearly buying. They fold away here instead, under the price. Native
   <details>, so it costs no JavaScript and it is open to Ctrl+F. */
.faq { max-width: 820px; margin: 0 auto; border-top: 1px solid var(--line-2); }
.q { border-bottom: 1px solid var(--line-2); }
.q summary {
  position: relative;
  padding: 18px 46px 18px 0;
  list-style: none;
  cursor: pointer;
  color: var(--ink);
  font: 600 16.5px/1.5 var(--sans);
  letter-spacing: -0.015em;
  transition: color .15s ease;
}
.q summary::-webkit-details-marker { display: none; }
.q summary:hover { color: var(--orange); }
.q summary:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; border-radius: var(--r-sm); }

/* A plus that turns into a minus. Two bars, one of them rotated, so the
   marker costs nothing to load and matches the orange everywhere else. */
.q summary::before,
.q summary::after {
  content: "";
  position: absolute; right: 8px; top: 50%;
  width: 13px; height: 2px;
  border-radius: 2px;
  background: var(--orange);
  transition: transform .2s ease, opacity .2s ease;
}
.q summary::before { transform: translateY(-50%); }
.q summary::after { transform: translateY(-50%) rotate(90deg); }
.q[open] summary::after { transform: translateY(-50%) rotate(0deg); opacity: 0; }

.desc .q .a { padding: 0 46px 20px 0; }
.desc .q .a p { margin: 0 0 12px; max-width: 68ch; font-size: 16px; }
.desc .q .a p:last-child { margin-bottom: 0; }

/* ---------- proof ---------- */

/* The one dark thing on a page of paper. It used to be thrown forward by a
   hard orange offset, which is the loudest a box can be. It holds its own on
   colour alone. Every screenshot inside is Instagram in dark mode, so they
   land on the box instead of being pasted onto it. */
.proof {
  margin: 44px 0;
  padding: 32px 34px 26px;
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--r);
  box-shadow: 0 20px 50px -24px rgba(34, 32, 30, .55);
}

/* Scoped past .desc p, which would otherwise take the colour and the spacing
   off it for being the more specific selector. */
.desc .proof .proof-kicker,
.proof-kicker {
  margin: 0 0 10px;
  font: 600 11.5px/1 var(--sans);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--orange);
}

/* .post is the blog column, which carries the same box under the opening
   figure. Its own h2 and p rules would otherwise put ink-coloured type on the
   dark box. */
.desc .proof h2,
.post .proof h2 {
  margin: 0 0 14px;
  font-size: clamp(24px, 3.2vw, 30px);
  letter-spacing: -0.03em;
  color: #fff;
}

.desc .proof p,
.post .proof p { color: rgba(255, 255, 255, .74); max-width: 68ch; }

.desc .proof .compare-note,
.post .proof .compare-note { color: rgba(255, 255, 255, .45); margin-bottom: 0; }

/* Phone screenshots, so these are tall and narrow where the strip above is
   16:9. Three and a bit fit the column, which is what says it scrolls. */
.proof-strip {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding: 4px 4px 10px;
  margin: 22px -4px 10px;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.proof-strip::-webkit-scrollbar { display: none; }

/* The last card is only half in view, which says "scroll" to some people and
   nothing to others. The arrow says it to everyone, and steps a screenful. */
.proof-wrap { position: relative; }
.gal-btn.proof-next { top: 50%; right: -12px; }
.proof-strip:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }

.proof-shot {
  flex: 0 0 190px;
  display: block; padding: 0; margin: 0;
  scroll-snap-align: start;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--r-sm);
  overflow: hidden;
  background: #000;
  cursor: zoom-in;
  transition: transform .18s ease, border-color .18s ease;
}
.proof-shot img { display: block; width: 100%; height: auto; }
.proof-shot:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 255, 255, .42);
}
.proof-shot:active { transform: translateY(-1px); }

/* ---------- screenshot gallery ---------- */

/* A swipe strip, not a grid. Every headline is burned into the picture, so a
   shot has to be near full width of the column to stay readable. The sliver of
   the next one showing is what says it slides. */
.gallery { position: relative; margin: 22px 0 10px; }

.shots {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  /* Room for the hover lift and the shadow, which sit outside the box. */
  padding: 6px 6px 12px;
  margin: -6px -6px -12px;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.shots::-webkit-scrollbar { display: none; }
.shots:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }

.shot {
  flex: 0 0 calc(100% - 46px);
  display: block; padding: 0; margin: 0;
  scroll-snap-align: start;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--ink);
  box-shadow: var(--shadow-sm);
  cursor: zoom-in;
  transition: transform .18s ease, box-shadow .18s ease;
}
.shot img { width: 100%; height: auto; aspect-ratio: 16 / 9; }
.shot:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.shot:active { transform: translateY(-1px); }

.gal-btn {
  position: absolute; top: calc(50% - 16px);
  display: flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; padding: 0;
  transform: translateY(-50%);
  border: 1px solid var(--line);
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--ink);
  font: 400 22px/1 var(--sans);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: background .15s ease, color .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.gal-btn:hover { background: var(--orange); color: #fff; box-shadow: var(--shadow); }
/* Nothing left that way. Dimmed rather than removed, so nothing jumps. */
.gal-btn[disabled] { opacity: .25; pointer-events: none; }
.gal-prev { left: -16px; }
.gal-next { right: -16px; }

.dots { display: flex; justify-content: center; gap: 8px; margin-top: 18px; }
.dot {
  width: 7px; height: 7px; padding: 0;
  border: 0;
  background: rgba(34, 32, 30, .2);
  border-radius: 50%;
  cursor: pointer;
  transition: background .15s ease, transform .15s ease;
}
.dot:hover { background: rgba(34, 32, 30, .4); }
.dot[aria-current="true"] { background: var(--orange); transform: scale(1.3); }

/* ---------- what comes out ---------- */

/* Real decks, on paper rather than in a dark box, because these are the
   finished posts themselves and already carry their own colour.

   One deck is one card. A deck is a post, and a post is swiped, so the card
   holds the whole thing behind its own counter, arrows and dots rather than
   laying two slides out side by side as if they were separate pictures. */
.examples { margin: 44px 0; }
.example-card { margin: 0; }

.deck-frame {
  position: relative;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--mist-2);
  box-shadow: var(--shadow-sm);
}

/* Native overflow scrolling does the swiping, the same way the screenshot
   strip does, so a thumb, a trackpad and the arrows all land in one place. */
.deck-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.deck-track::-webkit-scrollbar { display: none; }
.deck-track:focus-visible { outline: 2px solid var(--orange); outline-offset: -2px; }

.example-shot {
  flex: 0 0 100%;
  scroll-snap-align: center;
  display: block; padding: 0; margin: 0;
  border: 0;
  background: var(--mist-2);
  cursor: zoom-in;
}
.example-shot img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }

/* Everything below sits over the picture rather than under it, so the card
   stays the height of the slide and reads as a post. */
.deck-count {
  position: absolute; top: 9px; right: 9px;
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(24, 22, 21, .74);
  color: #fff;
  font: 600 11px/1.35 var(--sans);
  pointer-events: none;
}
/* The script writes the number. Without it there is nothing to say. */
.deck-count:empty { display: none; }

.deck-arrow {
  position: absolute; top: 50%;
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; padding: 0;
  transform: translateY(-50%);
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .93);
  color: var(--ink);
  font: 400 17px/1 var(--sans);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  opacity: 0;
  transition: opacity .15s ease, background .15s ease, color .15s ease;
}
.deck-prev { left: 8px; }
.deck-next { right: 8px; }
/* Only where a pointer can actually hover, so a tap on a touchscreen does not
   latch them on and leave them sitting over the picture. Keyboard focus shows
   them anywhere. */
@media (hover: hover) {
  .deck-frame:hover .deck-arrow { opacity: 1; }
}
.deck-frame:focus-within .deck-arrow { opacity: 1; }
.deck-arrow:not([disabled]):hover { background: var(--orange); color: #fff; }
/* Nothing that way. It stays in place and keeps taking the click rather than
   letting it fall through to the slide and open the lightbox by accident. */
.deck-frame:hover .deck-arrow[disabled],
.deck-frame:focus-within .deck-arrow[disabled],
.deck-arrow[disabled] { opacity: 0; cursor: default; }

/* The strip itself takes no clicks, so the gaps between the dots leave the
   picture underneath them clickable. */
.deck-dots {
  position: absolute; left: 0; right: 0; bottom: 10px;
  display: flex; justify-content: center; gap: 5px;
  pointer-events: none;
}
.deck-dot {
  width: 6px; height: 6px; padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .55);
  box-shadow: 0 0 3px rgba(0, 0, 0, .45);
  cursor: pointer;
  pointer-events: auto;
  transition: background .15s ease, transform .15s ease;
}
.deck-dot[aria-current="true"] { background: #fff; transform: scale(1.3); }

/* A label under the deck, not a headline. Small enough that the slides stay
   the thing being looked at. */
.example-card figcaption strong {
  display: block;
  margin-top: 9px;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--muted);
  letter-spacing: 0;
}

/* A few words of one caption, lit up. The cheap version of the effect: a warm
   gradient clipped to the glyphs and slid sideways, so it costs one property
   animation on four words. No blur, no blend modes, no library. A browser
   without background-clip:text never enters the @supports block and keeps solid
   ink, rather than painting the words transparent and losing them. */
.grad-text { color: var(--ink); }

@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .grad-text {
    background: linear-gradient(100deg, #E65C22, #C9401A, #E8A33D, #A6428C, #E65C22);
    background-size: 220% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    animation: grad-drift 7s ease-in-out infinite alternate;
  }
}

@keyframes grad-drift {
  from { background-position: 0% 50%; }
  to { background-position: 100% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .grad-text { animation: none; }
}

/* Two a row, not as many as fit. Six decks come out as three tidy rows, and a
   slide is big enough to read the words burned into it without opening it.
   minmax(0, 1fr) rather than 1fr, so a wide picture can't push a column past
   its share. Under 900px this is overridden and the phone packs them again. */
.example-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px 20px;
}

.compare-note.examples-note { margin-top: 22px; }

/* Scoped past .desc p, which is the more specific selector and was quietly
   eating this margin before the page was rebuilt. */
/* The decks and the videos used to run together with one paragraph between
   them, so the six 4:5 cards and the six 9:16 players read as one long grid.
   Each half now gets a named label, and .group-split draws the rule that says
   a new one has started. The label is left aligned against the grid under it,
   unlike .band-head, which is centred. */
.group-head {
  margin: 0 0 20px;
  text-align: left;
}
.group-head h3 {
  margin: 0 0 6px;
  color: var(--ink);
  font: 700 clamp(19px, 2.1vw, 23px)/1.3 var(--sans);
  letter-spacing: -0.025em;
}
.desc .group-head p {
  margin: 0;
  max-width: 62ch;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--muted);
}
.group-split {
  margin-top: clamp(40px, 4vw, 56px);
  padding-top: clamp(30px, 3vw, 40px);
  border-top: 1px solid var(--line-2);
}

/* Three across, because a 9:16 post at a third of the column is still tall enough
   to read the burned-in line without opening it. minmax(0, 1fr) for the same reason
   the deck grid uses it: a player can't push its column past its share. Under 900px
   this drops to two and stays there, which lands each player at about the same width
   as a deck card on the same screen. */
.video-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin: 18px 0 10px;
}

/* preload="none" plus a real poster, so a page view costs six JPEGs (227KB the lot)
   and not a byte of the 32MB of MP4 behind them. Nothing downloads until somebody
   presses play. The hook and demo clip is 1080x2400 rather than 9:16, so it letterboxes
   inside this frame; the black background is what those bars land on, which is why it
   is set here rather than left to the browser. */
.post-video {
  display: block;
  width: 100%;
  aspect-ratio: 9 / 16;
  border-radius: var(--r-md);
  background: #000;
  box-shadow: var(--shadow-sm);
}

/* ---------- lightbox ---------- */

.lightbox {
  position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center;
  padding: 28px;
  background: rgba(24, 22, 21, .86);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.lightbox[hidden] { display: none; }
.lightbox-in { position: relative; width: min(1280px, 100%); }
.lightbox-in img {
  width: 100%; height: auto; aspect-ratio: 16 / 9;
  border-radius: var(--r-md);
  background: var(--ink);
  box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .6);
}
/* A phone screenshot in a 16:9 frame is mostly empty frame. The proof shots
   get their own shape, narrow enough that the whole thing fits the height. */
.lightbox.tall .lightbox-in { width: min(calc((100vh - 120px) * 0.45), 100%); }
.lightbox.tall .lightbox-in img { aspect-ratio: 620 / 1378; }
/* A slide is 4:5, which is neither of the other two shapes. */
.lightbox.deck .lightbox-in { width: min(calc((100vh - 120px) * 0.8), 100%); }
.lightbox.deck .lightbox-in img { aspect-ratio: 4 / 5; }

.lb-count {
  margin: 14px 0 0; text-align: center;
  font-size: 13.5px; font-weight: 500; letter-spacing: .02em;
  color: rgba(255, 255, 255, .6);
}
.lb-btn {
  position: absolute;
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .94); color: var(--ink);
  font: 400 24px/1 var(--sans);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: background .15s ease, color .15s ease;
}
.lb-btn:hover { background: var(--orange); color: #fff; }
.lb-close { top: -16px; right: -16px; font-size: 26px; }
.lb-prev { left: -16px; top: 50%; transform: translateY(-50%); }
.lb-next { right: -16px; top: 50%; transform: translateY(-50%); }

/* ---------- offer popup ---------- */

/* Same surround as the lightbox, with the buy box's card on top. Above the
   top bar and the phone buy bar, below the lightbox it never opens over. */
.offer {
  position: fixed; inset: 0; z-index: 55;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  background: rgba(24, 22, 21, .72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: offer-fade .2s ease-out;
}
.offer[hidden] { display: none; }
.offer-in {
  position: relative;
  width: min(560px, 100%);
  background: var(--paper);
  border-radius: var(--r);
  box-shadow: var(--shadow-lg);
  padding: clamp(34px, 5vw, 48px) clamp(22px, 5vw, 48px) clamp(18px, 3vw, 26px);
  text-align: center;
}
.offer-x {
  position: absolute; top: 12px; right: 12px;
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; padding: 0;
  border: 0; border-radius: 50%;
  background: none; color: var(--muted);
  font: 400 26px/1 var(--sans);
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.offer-x:hover { background: var(--mist-2); color: var(--ink); }
/* The number is the whole pitch, so it gets the serif at poster size. */
.offer-title {
  margin: 0;
  font: 400 clamp(64px, 16vw, 104px)/.95 var(--serif);
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--orange);
}
.offer-kicker {
  margin: 12px 0 0;
  font-size: 12px; font-weight: 600; line-height: 1.2;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--muted);
}
.offer-note {
  max-width: 400px; margin: 20px auto 28px;
  font-size: 16px; line-height: 1.65; color: var(--ink-soft);
}
.offer-note s { color: var(--muted); text-decoration-thickness: 1px; }
.offer-yes { padding: 20px 24px; }
.offer-no {
  display: block; width: 100%; margin: 12px 0 0; padding: 12px 8px;
  border: 0; background: none; cursor: pointer;
  font: 500 12px/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted);
}
.offer-no:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* The full price beside the offer in the buy box. */
.price-was { font-size: .5em; color: var(--muted); text-decoration-thickness: 1px; margin-left: 4px; }

@keyframes offer-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .offer { animation: none; } }

/* ---------- videos ---------- */

/* Two in one row. They were full width and stacked, which took a whole screen
   each for a video most people never press. At half of a 890px column a
   player is about 435px wide, which is still bigger than YouTube's own
   embed minimum and leaves the title bar readable. */
.videos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin: 18px 0 0;
}
.yt {
  display: block; width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: var(--r-md);
  background: #000;
  box-shadow: var(--shadow);
}

/* ---------- buy box ---------- */

/* A centred block in the flow, not a sticky column. It is narrower than the
   text around it on purpose, so the eye lands on it. */
.buy { max-width: 560px; margin: clamp(30px, 3vw, 42px) auto 0; text-align: center; }
.buy-box {
  background: var(--mist-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
  padding: clamp(26px, 3vw, 36px) clamp(22px, 2.6vw, 34px);
}
/* The other one. */
.price { font: 400 56px/1 var(--serif); letter-spacing: -0.03em; color: var(--ink); }
.price-note { margin: 6px 0 22px; font-size: 14.5px; color: var(--muted); }
.desc .buy-box .ticks { margin: 26px 0 0; max-width: none; text-align: left; }
.desc .buy-box .launch-note { margin: -6px 0 22px; max-width: none; font-size: 15px; }
.buy .scarce { margin: 20px 0 0; }
.details { margin: 26px 0 0; border-top: 1px solid var(--line); text-align: left; }
.details > div { padding: 14px 0; border-bottom: 1px solid var(--line-2); }
.details > div:last-child { border-bottom: 0; padding-bottom: 0; }
.details dt {
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .1em;
  color: var(--muted); margin-bottom: 5px;
}
.details dd { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--ink); }

/* Scoped under .desc because .desc p is (0,1,1) and was beating the bare
   .refund rule, so the top margin never applied and this line sat right under
   the last row of the list. Left aligned to match that list, since .buy centres
   everything by default. */
.desc .refund {
  margin: 24px 0 0;
  text-align: left;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--muted);
}

.tt {
  position: relative;
  cursor: help;
}
.tt-bubble {
  position: absolute;
  left: 0;
  bottom: calc(100% + 12px);
  z-index: 20;
  width: 260px;
  padding: 14px 16px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow);
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity .15s ease, transform .15s ease;
  pointer-events: none;
}
.tt-bubble::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 18px;
  width: 10px;
  height: 10px;
  background: var(--paper);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  transform: translateY(-6px) rotate(45deg);
}
.tt:hover .tt-bubble,
.tt:focus .tt-bubble,
.tt:focus-visible .tt-bubble {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
@media (max-width: 480px) {
  .tt-bubble { width: 220px; }
}

/* ---------- footer ---------- */

.foot { margin-top: 36px; padding: 0 4px; font-size: 14.5px; line-height: 1.7; color: var(--muted); }
.foot p { margin: 0 0 8px; max-width: 74ch; }
.foot strong { color: var(--ink); }

/* ---------- mobile buy bar ---------- */

.mobile-bar {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
  background: rgba(255, 255, 255, .9);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-top: 1px solid var(--line);
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  align-items: center; justify-content: space-between; gap: 14px;
}
.mobile-price { color: var(--ink); font-weight: 700; font-size: 19px; }

/* ---------- narrow ---------- */

@media (max-width: 900px) {
  body { font-size: 16.5px; }
  .desc { padding: 0 22px 34px; }
  .band { padding: 38px 0; }
  .band-head { margin-bottom: 24px; }
  .steps { grid-template-columns: 1fr; gap: 14px; }
  .points { grid-template-columns: 1fr; gap: 22px; }
  /* Two 16:9 players side by side on a phone are about 150px wide each, which
     is smaller than YouTube's own controls. They stack again down here. */
  .videos { grid-template-columns: 1fr; gap: 14px; }
  .buy { margin-top: 28px; }
  .head { padding: 28px 22px 26px; }
  .head-price { font-size: 38px; }
  .head-cta { gap: 10px 16px; }
  .q summary { font-size: 16px; padding-right: 38px; }
  .desc .q .a { padding-right: 0; }
  .wrap { padding: 20px 14px 104px; }
  .card { border-radius: var(--r-md); }
  .cover { border-radius: var(--r-md) var(--r-md) 0 0; }
  .topbar-in { padding: 12px 18px; }
  .mobile-bar { display: flex; }
  .topbar-buy { display: none; }
  .desc h2 { margin-top: 42px; font-size: 20px; }
  .lede { max-width: none; }
  /* Thumb does the work here, so the arrows only get in the way. */
  .gal-btn { display: none; }
  .shot { flex-basis: calc(100% - 34px); }
  .compare { font-size: 14px; }
  .compare th, .compare td { padding: 11px 13px; }
  .caps { min-width: 560px; }
  .caps th, .caps td { padding: 11px 12px; }
  .caps tbody th { min-width: 136px; }
  .caps-wrap { padding: 8px 8px 6px; }
  .free { padding: 20px 18px 18px; }
  .proof { margin: 34px 0; padding: 24px 20px 20px; border-radius: var(--r-md); }
  .proof-shot { flex-basis: 150px; }
  /* Kept on a phone, unlike the other arrows: this one is the only sign the
     strip goes on. */
  .gal-btn.proof-next { display: flex; right: -8px; width: 38px; height: 38px; }
  /* Thumb does the work on the decks too. */
  .deck-arrow { display: none; }
  .example-grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
  .video-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .hero-dots { right: 12px; top: 12px; gap: 7px; padding: 6px 9px; }
  .lightbox { padding: 16px; }
  .lb-close { top: -12px; right: -12px; }
  .lb-prev { left: 6px; }
  .lb-next { right: 6px; }

  /* The boards are a 1920 wide two column layout. Held to that shape on a
     phone the bullets come out at seven pixels, so down here the slide stops
     being a board and becomes a column: copy at a size a thumb can read, then
     the screenshot under it, still running off the bottom right corner. The
     rail takes the height of the tallest slide, so each picture is pushed to
     the bottom of its own slide and they all end level. */
  .hslide {
    aspect-ratio: auto;
    display: flex;
    flex-direction: column;
    /* Clear of the dots pill, which is pinned to this corner and cannot flow
       with the copy, so the headline gets the whole width under it. */
    padding-top: 44px;
  }
  .hs-title,
  .hs-sub,
  .hs-list { position: static; left: auto; right: auto; }

  .hs-title,
  .hslide-1 .hs-title {
    padding: 0 20px;
    font-size: clamp(27px, 7.4vw, 44px);
    line-height: 1.06;
    letter-spacing: -0.035em;
  }
  .hs-title .hs-line { white-space: normal; }

  .hs-sub {
    padding: 7px 20px 0;
    font-size: clamp(17px, 4.2vw, 24px);
    line-height: 1.2;
    letter-spacing: -0.03em;
    white-space: normal;
  }

  .hs-list {
    margin: 15px 0 18px;
    padding: 0 20px 0 38px;
    font-size: clamp(13px, 3.4vw, 16px);
    line-height: 1.55;
    letter-spacing: -0.015em;
  }
  .hs-list > li,
  .hs-sublist > li { padding-left: 0; }
  .hs-list > li::before {
    left: -17px; top: .62em;
    width: 6px; height: 6px;
  }
  .hs-sublist { margin: 0 0 0 19px; }
  .hs-sublist > li::before {
    left: -17px; top: .58em;
    width: 7px; height: 7px;
    border-width: 1.5px;
  }

  .hs-shot {
    position: static;
    width: calc(100% - 20px);
    margin: auto 0 0 20px;
    border-top-left-radius: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html, .shots, .deck-track { scroll-behavior: auto; }
  .hero-track { transition: none; }
  * { transition: none !important; }
}

/* ---------- blog ---------- */

/* The sales page is one wide card with a buy column beside it. A post has no
   buy column, so the shell narrows instead of leaving 430px of nothing. It
   still follows the screen, just on a shorter leash. */
.wrap-narrow { max-width: var(--narrow); }

/* The top bar on a post has nothing to reveal on scroll, since there is no
   .head for the observer in main.js to watch. It carries .scrolled in the
   markup so the price and the button are there from the first pixel. */

.post { padding: clamp(34px, 3.6vw, 48px) var(--gutter) clamp(38px, 3.8vw, 52px); }
.post > *:first-child { margin-top: 0; }

.post-head { padding: clamp(32px, 3.4vw, 44px) var(--gutter) 30px; border-bottom: 1px solid var(--line-2); }
.post-head h1 { margin: 0 0 16px; }

.post-meta {
  margin: 0;
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}
.post-meta a { color: var(--muted); }

.post p { margin: 0 0 18px; max-width: var(--measure); }

/* Same scale as .desc h2 on the sales page, with the number sitting in the
   margin so the five steps read as a list without being one. */
.post h2 {
  margin: 48px 0 14px;
  color: var(--ink);
  font: 700 23px/1.32 var(--sans);
  letter-spacing: -0.025em;
}
.post h2 .step { color: var(--orange); margin-right: 10px; }

.post ol, .post ul { max-width: var(--measure); padding-left: 22px; margin: 0 0 20px; }
.post li { margin-bottom: 10px; }

/* The questions at the foot of a post, one <h3> each, answered in the
   paragraph under it. Plain headings rather than <details>, so the answer is
   on the page for anything that reads it without clicking. */
.post h3 {
  margin: 30px 0 8px;
  max-width: var(--measure);
  color: var(--ink);
  font: 600 18px/1.4 var(--sans);
  letter-spacing: -0.015em;
}

/* A comparison, when a post has one. Wrapped so a wide table scrolls inside
   the column on a phone instead of pushing the page sideways. */
.post .table-wrap { max-width: var(--measure); margin: 24px 0 28px; overflow-x: auto; }
.post table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.5; }
.post th, .post td { padding: 10px 12px; border-bottom: 1px solid var(--line-2); text-align: left; vertical-align: top; }
.post th { color: var(--ink); font-weight: 600; background: var(--mist-2); }

.post .lede { max-width: 26ch; }

/* A screenshot is evidence here, so it keeps a frame, a soft one. */
.fig { margin: 28px 0 30px; max-width: min(100%, 860px); }
.fig img {
  width: 100%; height: auto;
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  box-shadow: var(--shadow);
  background: var(--ink);
}
.fig figcaption {
  margin-top: 14px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
}

/* A portrait phone grab blown up to the column width is a screen and a half
   tall and printed past its own pixels (1.jpg is 480 wide, 2.jpg 576). Cap the
   picture, not the figure, so the caption still runs at the text width. */
.fig-tall img { display: block; max-width: min(100%, 330px); }

/* Two phone screenshots side by side on a desktop, stacked on a phone. */
.fig-pair { display: grid; gap: 18px; grid-template-columns: 1fr 1fr; align-items: start; }
.fig-pair img { box-shadow: var(--shadow-sm); }

.post .callout { margin: 30px 0; max-width: var(--measure); }

/* A prompt you are meant to take away, so it is a slab with a button rather
   than a quote. The text is a <pre>, so the line breaks a prompt depends on
   survive both the reading and the copy. */
.promptbox {
  margin: 26px 0 30px;
  max-width: var(--measure);
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  background: var(--mist-2);
  overflow: hidden;
}
.promptbox-top {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 12px 14px 12px 18px;
  border-bottom: 1px solid var(--line-2);
}
.promptbox-label {
  margin: 0;
  font: 600 13px/1 var(--sans);
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--muted);
}
.copy-btn {
  flex: none;
  padding: 8px 16px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: var(--paper); color: var(--ink);
  font: 600 13.5px/1 var(--sans);
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.copy-btn:hover { border-color: var(--orange); color: var(--orange-d); }
.copy-btn.is-done { background: var(--orange); border-color: var(--orange); color: #fff; }
.promptbox-text {
  margin: 0;
  padding: 18px;
  /* Wrapped, not scrolled sideways: the reader has to be able to see the whole
     line to know what to put in the brackets. */
  white-space: pre-wrap;
  word-break: break-word;
  font: 400 14.5px/1.65 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--ink);
}

@media (max-width: 560px) {
  .promptbox-top { padding: 10px 10px 10px 14px; }
  .promptbox-label { font-size: 12px; }
  .promptbox-text { padding: 14px; font-size: 13.5px; }
}

.post-end {
  margin: 48px 0 0;
  padding: 26px 28px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  background: var(--mist-2);
  max-width: var(--measure);
}
.post-end h2 { margin: 0 0 10px; font-size: 20px; }
.post-end p { margin: 0 0 16px; }
.post-end p:last-child { margin-bottom: 0; }

/* ---------- blog index ---------- */

.post-list { list-style: none; margin: 0; padding: 0; }
.post-list li { border-bottom: 1px solid var(--line-2); padding: 26px 0; }
.post-list li:first-child { padding-top: 0; }
.post-list li:last-child { border-bottom: 0; padding-bottom: 0; }

.post-list h2 {
  margin: 8px 0 8px;
  font: 700 22px/1.32 var(--sans);
  letter-spacing: -0.025em;
}
.post-list h2 a { text-decoration: none; }
.post-list h2 a:hover { color: var(--orange); }
.post-list p { margin: 0; color: var(--muted); max-width: var(--measure); }

@media (max-width: 900px) {
  .post { padding: 28px 22px 34px; }
  .post-head { padding: 28px 22px 22px; }
  .post h2 { margin-top: 38px; font-size: 21px; }
  .post-end { padding: 20px 20px; }
  .fig-pair { grid-template-columns: 1fr; }
}