/* ==========================================================================
   clearlyrun.com — design system
   Mobile-first: every base rule below targets a 375px phone. Desktop styles
   are added at min-width breakpoints, never the reverse. 68% of the audience
   arrives on iPhone, so the phone layout is the real layout.

   Breakpoints:  375 base · 480 large phone · 768 tablet · 1024 laptop · 1440 desktop
   ========================================================================== */

/* --- reset ---------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body, h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl, dd {
  margin: 0;
}

ul[class], ol[class] { list-style: none; padding: 0; }

img, picture, svg, video {
  display: block;
  max-width: 100%;
}

button, input, select, textarea { font: inherit; color: inherit; }

button { background: none; border: 0; cursor: pointer; }

a { color: inherit; }

/* --- tokens --------------------------------------------------------------- */

:root {
  /* colour */
  --page:      #F2F5F6;
  --surface:   #FFFFFF;
  --ink:       #2C3B42;
  --ink-2:     #51646E;
  --muted:     #7E8F96;
  --hairline:  #E2E8E9;
  --teal:      #587987;
  --teal-deep: #44606C;
  --coral:     #E7805B;
  --golden:    #F3BE3F;
  --golden-hl: rgba(243,190,63,0.5);   /* marker highlight, 50% so text stays crisp */

  /* type */
  --display: 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --body:    'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* rhythm — phone values; scaled up at breakpoints */
  --gutter:  20px;
  --section: 56px;
  --maxw:    1200px;

  /* the one radius used everywhere */
  --radius:   14px;
  --radius-s: 10px;
}

/* --- base typography ------------------------------------------------------ */

body {
  font-family: var(--body);
  font-size: 17px;          /* body goes UP on phone, not down */
  line-height: 1.55;
  color: var(--ink-2);
  background: var(--page);
  font-feature-settings: 'cv11', 'ss01';
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;       /* belt-and-braces against any stray wide child */
}

h1, h2, h3, h4 {
  font-family: var(--display);
  color: var(--ink);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.08;
  text-wrap: balance;
}

h1 { font-size: 36px; }
h2 { font-size: 26px; }
h3 { font-size: 20px; letter-spacing: -0.02em; line-height: 1.25; }

p { max-width: 38ch; }      /* ~38 characters per line on phone */

strong { color: var(--ink); font-weight: 600; }

/* --- utilities ------------------------------------------------------------ */

.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section); }
.section--surface { background: var(--surface); }
.section--page    { background: var(--page); }

.micro {
  font-family: var(--body);
  font-size: 10px;
  font-weight: 600;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--muted);
}

/* Keeps a hyphenated compound whole. Browsers treat "Senior-level" as two
   break opportunities, which strands "Senior-" at the end of a line. */
.nb { white-space: nowrap; }

/* Present to screen readers, absent on screen — for labels whose purpose is
   already obvious visually from the placeholder and surrounding copy. */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--ink);
  color: #fff;
  padding: 12px 18px;
  border-radius: 0 0 var(--radius-s) 0;
}
.skip-link:focus { left: 0; }

:focus-visible {
  outline: 3px solid var(--teal);
  outline-offset: 2px;
  border-radius: 4px;
}

/* --- the marker highlight — signature element ----------------------------- */

/* Painted as an animated background rather than an absolutely-positioned
   ::before. Two reasons, both mobile-driven:
     1. Headings wrap on a 375px screen. An absolute ::before is positioned
        against the element's box, so on a wrapped heading it draws ONE bar
        across the last line only. `box-decoration-break: clone` gives every
        line fragment its own bar, which is what a real marker does.
     2. A ::before at z-index -1 paints beneath the section's own background
        (negative z-index children paint before descendant block backgrounds),
        so the highlight silently disappears on any section with a fill.
   Same visual, correct on every line count and every background. */
.hl {
  font-style: normal;
  padding-inline: 0.1em;
  margin-inline: -0.1em;
  background-image: linear-gradient(var(--golden-hl), var(--golden-hl));
  background-repeat: no-repeat;
  background-position: 0 calc(100% - 0.05em);
  background-size: 0% 0.45em;
  transition: background-size 0.55s ease-out;
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
}

.hl.in { background-size: 100% 0.45em; }

/* --- scroll fade-in ------------------------------------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.reveal.in { opacity: 1; transform: none; }

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;          /* comfortably over the 44px floor */
  padding: 14px 26px;
  border-radius: var(--radius-s);
  font-family: var(--body);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
  text-align: center;
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.btn--primary {
  background: var(--teal);
  color: #fff;
  border: 1.5px solid var(--teal);
}

.btn--secondary {
  background: transparent;
  color: var(--teal-deep);
  border: 1.5px solid #C6D2D6;
}

/* Hover is a progressive nicety only — nothing depends on it, because hover
   does not exist on the phones most of this audience uses. */
@media (hover: hover) {
  .btn--primary:hover   { background: var(--teal-deep); border-color: var(--teal-deep); }
  .btn--secondary:hover { border-color: var(--teal); background: rgba(88,121,135,0.06); }
}

.btn:active { transform: translateY(1px); }

/* Full-width stacked buttons on phone */
.btn-row {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.btn-row .btn { width: 100%; }

/* --- announcement bar ----------------------------------------------------- */

.announce {
  background: var(--ink);
  color: #E8EEF0;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-inline: var(--gutter);
}

/* The link carries the height, not the bar — otherwise the tap target is only
   as tall as the 13px text sitting inside a 44px bar. Block, not flex: flex
   would make "Free", <b>…</b> and "→" separate flex items and eat the spaces
   between them. */
.announce__msg {
  display: block;
  min-height: 46px;
  padding-block: 15px;
  text-align: center;
  font-size: 13px;
  line-height: 1.35;
  letter-spacing: 0.01em;
  max-width: 34ch;           /* keeps every message inside two lines at 375px */
  margin: 0;
  text-decoration: none;
  transition: opacity 0.35s ease;
  color: var(--golden);      /* 6.8:1 on --ink */
}

.announce__msg[hidden] { display: none; }
.announce__msg.is-fading { opacity: 0; }

.announce__msg b { font-weight: 600; }

/* --- header --------------------------------------------------------------- */

.header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(242,245,246,0.88);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--hairline);
}

.header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 60px;
  gap: 12px;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  font-family: var(--display);
  font-weight: 800;
  font-size: 20px;
  letter-spacing: -0.02em;
  color: var(--ink);
  /* the logo is a link — keep it a legal tap target */
  min-height: 44px;
}

.logo svg { width: 26px; height: 26px; flex: none; }

/* Desktop nav — hidden on phone, shown from 1024px */
.nav-desktop { display: none; }

/* Hamburger */
.nav-toggle {
  width: 46px;
  height: 46px;
  margin-right: -10px;       /* optical alignment to the gutter */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-s);
  color: var(--ink);
}

.nav-toggle svg { width: 24px; height: 24px; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-open  { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }

/* Full-screen overlay menu. It starts below the header rather than at the
   viewport top: the header is sticky and sits above it, so `inset: 0` puts the
   first menu row underneath the logo bar. --nav-top is written by main.js from
   the header's real bottom edge, which changes once the announcement bar has
   scrolled away. The fallback covers announcement + bar at scroll 0. */
.nav-overlay {
  position: fixed;
  top: var(--nav-top, 108px);
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 39;
  background: var(--page);
  padding: 20px var(--gutter) 40px;
  overflow-y: auto;
  overscroll-behavior: contain;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
}

.nav-overlay.is-open {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.nav-overlay__list {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--hairline);
}

.nav-overlay__list a {
  display: flex;
  align-items: center;
  min-height: 62px;          /* large tappable rows */
  padding: 8px 4px;
  font-family: var(--display);
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--hairline);
}

.nav-overlay__list a[aria-current="page"] { color: var(--teal); }

.nav-overlay__cta { margin-top: 28px; }

body.nav-open { overflow: hidden; }

/* --- hero ----------------------------------------------------------------- */

/* Phone order is explicit and deliberate: label → headline → sub → CTAs →
   image. The screenshot sits BELOW the buttons so a visitor can act without
   scrolling past it. */
.hero {
  padding-top: 34px;
  padding-bottom: 28px;
  background: linear-gradient(180deg, var(--page) 0%, #EAF0F1 100%);
  /* The desktop screenshot is wider than its column and runs off the right of
     the page. `clip` rather than `hidden` so the horizontal overflow is cut at
     the viewport edge while the tilted image's shadow still breathes
     vertically — overflow:hidden would shave the top and bottom off it. */
  overflow-x: clip;
}

.hero__label { margin-bottom: 14px; }

.hero__title {
  font-size: 36px;
  margin-bottom: 16px;
}

/* Direct children only — the two headline lines. A descendant selector here
   also catches the inline .nb spans and turns them into full-width blocks. */
.hero__title > span { display: block; }

.hero__sub {
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 38ch;
  margin-bottom: 26px;
}

.hero__cta { margin-bottom: 30px; }

/* Phone: the planner's OWN responsive mobile layout, in a device frame. The
   desktop crop is deliberately not reused here — at 375px its 15px interface
   text is a grey smear. The frame is the wrapper; from 768px up the wrapper
   drops away entirely and the bare screenshot bleeds off the page instead. */
.hero__media {
  width: min(290px, 82%);
  margin-inline: auto;
  padding: 9px;
  background: var(--ink);
  border-radius: 34px;
  box-shadow: 0 22px 46px -20px rgba(44,59,66,0.45);
}

.hero__media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 26px;
}

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

.footer {
  background: var(--ink);
  color: #B9C7CC;
  padding-block: 44px 34px;
  font-size: 15px;
}

.footer a { color: #DCE5E8; text-decoration: none; }

@media (hover: hover) {
  .footer a:hover { color: #fff; text-decoration: underline; }
}

.footer__grid {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.footer__logo {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--display);
  font-weight: 800;
  font-size: 20px;
  letter-spacing: -0.02em;
  color: #fff;
  text-decoration: none;
  min-height: 44px;
}

.footer__logo svg { width: 26px; height: 26px; flex: none; }

.footer__tag {
  font-size: 15px;
  max-width: 34ch;
  margin-top: 2px;
  color: #93A5AB;
}

.footer__col h4 {
  font-family: var(--body);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: #7E8F96;
  margin-bottom: 6px;
}

.footer__col ul {
  display: flex;
  flex-direction: column;
  list-style: none;    /* these <ul>s carry no class, so the reset misses them */
  padding: 0;
}

.footer__col li a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;          /* generous tap spacing, stacked single column */
  min-width: 44px;           /* "Blog" is only 32px of text — pad the hit area */
}

.footer__base {
  margin-top: 32px;
  padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,0.12);
  font-size: 13px;
  color: #7E8F96;
}

/* ==========================================================================
   480px — large phone
   ========================================================================== */

@media (min-width: 480px) {
  :root { --gutter: 24px; --section: 64px; }

  h1 { font-size: 38px; }
  .hero__title { font-size: 38px; }

  /* Buttons sit side by side once there is room for both at a sane width */
  .btn-row { flex-direction: row; flex-wrap: wrap; }
  .btn-row .btn { width: auto; flex: 1 1 auto; }
}

/* ==========================================================================
   768px — tablet
   ========================================================================== */

@media (min-width: 768px) {
  :root { --gutter: 32px; --section: 80px; }

  h1 { font-size: 46px; }
  h2 { font-size: 32px; }
  h3 { font-size: 22px; }

  .micro { font-size: 11px; }

  p { max-width: 62ch; }

  .hero { padding-top: 52px; padding-bottom: 32px; }
  .hero__title { font-size: 46px; }
  .hero__sub { font-size: 18px; max-width: 46ch; }

  /* Tablet and up: no frame, no panel — the screenshot itself, running off the
     right edge of the page. Height drives the scale; width follows, so the
     interface stays at ~75-90% of its native size and reads as real UI rather
     than a thumbnail.
     Left flat rather than rotated -3deg: the bleed already supplies the
     movement, and a tilt reads as a misaligned image next to the hard vertical
     line where the page clips it. A tilt also drops the top-left corner, which
     breaks the top-alignment against the micro-label. */
  .hero__media {
    width: auto;
    margin-inline: 0;
    padding: 0;
    background: none;
    border-radius: 0;
    box-shadow: none;
  }

  /* Tablet: hero is still one column, so the screenshot runs from the container's
     left edge flush to the right edge of the viewport — the gutter's worth of
     extra width lands it exactly there, no clipping needed. */
  .hero__media img {
    width: calc(100% + var(--gutter));
    max-width: none;
    height: auto;
    /* Rounded and shadowed on the left edge only. The right edge is where the
       page cuts the image off, so a radius or shadow there would contradict the
       bleed — this way the left edge reads as a window lifted off the page and
       the right stays a clean cut. */
    border-radius: 14px 0 0 14px;
    box-shadow: -20px 0 44px -22px rgba(44,59,66,0.34),
                -3px 0 8px -4px rgba(44,59,66,0.10);
  }

  .footer__grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 40px;
  }
  /* Tablets are touch devices too — the 44px floor stays all the way up. */
}

/* ==========================================================================
   1024px — laptop. Nav goes horizontal, hero goes two-column.
   ========================================================================== */

@media (min-width: 1024px) {
  :root { --section: 96px; }

  body { font-size: 17px; }

  h1 { font-size: 60px; }
  h2 { font-size: 40px; }

  .nav-toggle  { display: none; }
  .nav-overlay { display: none; }

  .nav-desktop {
    display: flex;
    align-items: center;
    gap: 4px;
  }

  .nav-desktop a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 14px;
    border-radius: var(--radius-s);
    font-size: 16px;
    font-weight: 500;
    color: var(--ink-2);
    text-decoration: none;
    transition: color 0.16s ease, background-color 0.16s ease;
  }

  .nav-desktop a[aria-current="page"] { color: var(--ink); font-weight: 600; }

  @media (hover: hover) {
    .nav-desktop a:hover { color: var(--ink); background: rgba(88,121,135,0.07); }
  }

  .header__bar { min-height: 72px; }

  .hero {
    padding-top: 64px;
    padding-bottom: 24px;
  }

  /* The hero runs wider than the 1200 body grid so the headline can hold its
     two designed lines instead of collapsing to four. */
  .hero .container { max-width: 1320px; }

  .hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    /* Top-aligned, not centred: centring a tall image against a short copy
       block is what left the dead band under the CTAs. */
    align-items: start;
    gap: 64px;
  }

  /* Fluid, because the headline lives in a fixed share of the viewport rather
     than the full width. "Senior-level systems." is 10.15 × the font-size and
     must not wrap, so the size tracks the column: at 1024 the column allows
     ~47px, at 1320+ it allows ~62px. Capped at the 60px design size. */
  /* Two columns now, so the image is height-driven and overflows its column,
     clipped at the viewport edge by .hero's overflow-x: clip.
     The height sets the zoom: at ~68% of native, the visible strip is the
     sidebar plus two full board cards and the start of a third, two rows deep —
     the grid reads as a grid. Zooming in further makes the type crisper but
     shows only a card and a half, which hides the product's structure. */
  .hero__media {
    /* The image's top EDGE already sits on the micro-label, but the app's own
       topbar padding puts the first thing you actually see — the Clearly mark
       and "Willow & Pine" — about 26px lower, which lines it up with the
       headline instead. Lift the whole image so the visible chrome, not the
       empty edge, is what aligns. 26px is within 3px of correct across the
       whole 430-540px height range. */
    margin-top: -26px;
  }

  .hero__media img {
    width: auto;
    height: clamp(430px, 34vw, 540px);
  }

  .hero__title {
    font-size: clamp(44px, calc(5vw - 7px), 60px);
    margin-bottom: 20px;
  }
  .hero__sub   { font-size: 19px; max-width: 40ch; margin-bottom: 32px; }
  .hero__cta   { margin-bottom: 0; }
  .btn-row .btn { flex: 0 0 auto; }
}

/* ==========================================================================
   1440px — desktop
   ========================================================================== */

@media (min-width: 1440px) {
  :root { --section: 112px; }

  h1 { font-size: 72px; }   /* full-width h1s on the other pages */

  /* .hero__title stays on its clamp() — it is column-bound, not page-bound. */
  .hero__inner { gap: 72px; }
}

/* ==========================================================================
   COMPONENTS
   Base rules are the 375px layout. Unlike the layout primitives above, each
   component keeps its own breakpoints next to it — with this many small pieces
   it is far easier to read one component in one place than to chase it through
   four global blocks.
   ========================================================================== */

/* --- page hero (interior pages) ------------------------------------------- */

.phero {
  padding-top: 40px;
  padding-bottom: 40px;
  background: linear-gradient(180deg, var(--page) 0%, #EAF0F1 100%);
}

.phero .micro { margin-bottom: 14px; }
.phero h1 { margin-bottom: 16px; }
.phero__sub { font-size: 17px; max-width: 38ch; }

@media (min-width: 768px) {
  .phero { padding-top: 64px; padding-bottom: 56px; }
  .phero__sub { font-size: 19px; max-width: 56ch; }
}

/* --- section heading ------------------------------------------------------ */

.sec-head { margin-bottom: 32px; }
.sec-head .micro { margin-bottom: 12px; }
.sec-head h2 { margin-bottom: 14px; }
.sec-head p { font-size: 17px; }

@media (min-width: 768px) {
  .sec-head { margin-bottom: 48px; }
  .sec-head p { font-size: 18px; max-width: 58ch; }
}

/* --- grids ---------------------------------------------------------------- */

/* One column on a phone, two at tablet, four (or three) on a laptop. */
.grid { display: grid; gap: 30px; }

@media (min-width: 768px) {
  .grid { gap: 34px 32px; }
  .grid--4, .grid--3, .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid { gap: 40px 36px; }
}

.feature h3 { margin-bottom: 8px; }
.feature p { font-size: 16px; max-width: 34ch; line-height: 1.6; }

/* --- planner cards -------------------------------------------------------- */

/* 2x2 rather than a row of four: at row-of-four width the screenshot is a
   thumbnail again, and these crops exist precisely so the card shows one
   readable element. */
.pcard {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.pcard__shot {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-bottom: 1px solid var(--hairline);
}

.pcard__body { padding: 22px 20px 24px; display: flex; flex-direction: column; flex: 1; }
.pcard__body .micro { margin-bottom: 10px; }
.pcard__body h3 { margin-bottom: 8px; }
.pcard__promise { font-size: 16px; line-height: 1.6; max-width: 34ch; margin-bottom: 18px; }

.pcard__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: auto;
}

.pcard__price { font-family: var(--display); font-weight: 800; font-size: 20px; color: var(--ink); }

.pcard__link {
  font-weight: 600;
  font-size: 16px;
  color: var(--teal-deep);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* Opt-in: makes the whole card the tap target rather than just the link text.
   Only safe on a card with ONE link — the overlay covers the entire card, so
   on a card that also has a Buy button it would swallow that button's taps. */
.pcard__link--stretch::after { content: ""; position: absolute; inset: 0; }

@media (hover: hover) {
  .pcard:hover { border-color: #CBD8DC; box-shadow: 0 14px 34px -20px rgba(44,59,66,0.28); }
}

@media (min-width: 768px) {
  .pcard__body { padding: 26px 26px 28px; }
}

/* --- full-width image band ------------------------------------------------ */

.band-img { display: block; width: 100%; height: auto; }

/* --- spreadsheet comparison ----------------------------------------------- */

/* The designed comparison graphic is a dense 4:3 composite carrying a table, a
   dashboard screenshot and a tick strip. At 335px all three are a grey smear,
   so the phone gets the same argument as native text instead. The image also
   carries its own headline, which is why the section has no <h2> above it on
   desktop — two headlines saying the same thing read as a mistake. */
.vs-img { display: none; }

.vs-native h2 { margin-bottom: 20px; }

.vs-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 22px;
}

.vs-table th, .vs-table td {
  border-bottom: 1px solid var(--hairline);
  padding: 12px 4px;
  font-size: 15px;
  line-height: 1.45;
  vertical-align: middle;
}

.vs-table thead th {
  font-family: var(--body);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  padding-bottom: 8px;
}

.vs-table tbody th {
  text-align: left;
  font-weight: 400;
  color: var(--ink-2);
  padding-right: 10px;
}

.vs-table td {
  width: 56px;
  text-align: center;
  font-size: 17px;
  font-weight: 700;
  color: var(--teal);
}

.vs-table td.no { color: #B9C6CA; font-weight: 400; }

@media (min-width: 768px) {
  .vs-img    { display: block; }
  .vs-native { display: none; }
}

/* --- bundle band ---------------------------------------------------------- */

.bundle {
  background: var(--ink);
  color: #C7D4D8;
  text-align: center;
}

.bundle h2 { color: #fff; margin-bottom: 14px; }
.bundle p { margin-inline: auto; }

.bundle__prices {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 14px;
  margin: 22px 0 8px;
  /* The struck total and the price must never break onto two lines. */
  white-space: nowrap;
}

.bundle__was {
  font-family: var(--display);
  font-weight: 700;
  font-size: 21px;
  color: #8FA3AA;
  text-decoration: line-through;
  text-decoration-thickness: 2px;
}

.bundle__now {
  font-family: var(--display);
  font-weight: 800;
  font-size: 48px;
  letter-spacing: -0.03em;
  color: var(--golden);
  line-height: 1;
}

.bundle__save { font-size: 15px; color: #9FB2B8; margin-bottom: 26px; }
.bundle .btn-row { justify-content: center; }

@media (min-width: 480px) {
  .bundle .btn-row { flex-direction: row; }
  .bundle .btn-row .btn { flex: 0 0 auto; }
}

@media (min-width: 768px) {
  .bundle__was { font-size: 26px; }
  .bundle__now { font-size: 64px; }
}

/* --- comparison: table on desktop, stacked cards on phone ----------------- */

/* A horizontally scrolling table is the worst mobile pattern there is — half
   the columns are simply never seen. Below 768 the same data is re-rendered as
   one card per option with label/value rows. Both are in the DOM; exactly one
   is shown, and the hidden one is display:none so it is out of the a11y tree
   too rather than read twice. */
.cmp-table { display: none; }
.cmp-cards { display: grid; gap: 20px; }

.cmp-card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 22px 20px;
}

.cmp-card--best { border-color: var(--teal); border-width: 2px; }

.cmp-card h3 { margin-bottom: 4px; }
.cmp-card__price { font-family: var(--display); font-weight: 800; font-size: 28px; color: var(--ink); margin-bottom: 16px; }
.cmp-card__price small { font-family: var(--body); font-weight: 400; font-size: 14px; color: var(--muted); }

.cmp-card dl { display: grid; grid-template-columns: 1fr auto; gap: 10px 16px; margin: 0 0 20px; }
.cmp-card dt { font-size: 15px; color: var(--ink-2); }
.cmp-card dd { margin: 0; font-size: 15px; font-weight: 600; color: var(--ink); text-align: right; }

@media (min-width: 768px) {
  .cmp-cards { display: none; }

  .cmp-table {
    display: table;
    width: 100%;
    border-collapse: collapse;
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
    overflow: hidden;
  }

  .cmp-table th, .cmp-table td {
    padding: 16px 20px;
    text-align: left;
    border-bottom: 1px solid var(--hairline);
    font-size: 16px;
  }

  .cmp-table thead th {
    font-family: var(--display);
    font-weight: 800;
    font-size: 18px;
    color: var(--ink);
    background: #F7FAFA;
  }

  .cmp-table tbody th { font-weight: 400; color: var(--ink-2); }
  .cmp-table td { font-weight: 600; color: var(--ink); }
  .cmp-table tr:last-child th, .cmp-table tr:last-child td { border-bottom: 0; }
  .cmp-table .is-best { background: rgba(88,121,135,0.05); }
}

/* --- Kit form ------------------------------------------------------------- */

.kit {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 26px 20px;
}

.kit__form { display: flex; flex-direction: column; gap: 12px; }

.kit__form input[type="email"],
.kit__form input[type="text"] {
  width: 100%;
  /* 16px minimum, or iOS silently zooms the page on focus and the layout jumps. */
  font-size: 16px;
  line-height: 1.4;
  min-height: 52px;
  padding: 14px 16px;
  color: var(--ink);
  background: #fff;
  border: 1.5px solid #C6D2D6;
  border-radius: var(--radius-s);
  appearance: none;
}

.kit__form input::placeholder { color: var(--muted); }
.kit__form button { min-height: 52px; width: 100%; }
.kit__note { font-size: 14px; color: var(--muted); margin-top: 14px; }

@media (min-width: 600px) {
  .kit__form { flex-direction: row; }
  .kit__form input { flex: 1 1 auto; }
  .kit__form button { width: auto; flex: 0 0 auto; }
}

@media (min-width: 768px) {
  .kit { padding: 32px; }
}

/* --- checklist sheet ------------------------------------------------------ */

.sheet {
  border-radius: 6px;
  box-shadow: 0 26px 54px -26px rgba(44,59,66,0.42), 0 2px 8px rgba(44,59,66,0.08);
}

/* width:100% before max-width, not max-width alone: a bare `max-width: 400px`
   overrides the reset's `max-width: 100%` and the portrait sheet then renders
   400px wide inside a 335px column, pushing the whole page sideways at 375. */
.sheet--portrait {
  width: 100%;
  max-width: 400px;
  height: auto;
  margin-inline: auto;
}

/* --- prose (about, blog posts) -------------------------------------------- */

.prose { max-width: 68ch; }
.prose > * + * { margin-top: 1.1em; }
.prose p { max-width: none; font-size: 17px; line-height: 1.7; }
.prose h2 { margin-top: 1.7em; margin-bottom: 0.1em; }
.prose h3 { margin-top: 1.5em; margin-bottom: 0.1em; }
.prose ul { padding-left: 1.15em; margin-top: 0.6em; }
.prose li { margin-top: 0.45em; line-height: 1.65; }
.prose a { color: var(--teal-deep); text-decoration: underline; text-underline-offset: 2px; }

/* The one line that carries the argument, pulled out of the flow. */
.pullout {
  font-family: var(--display);
  font-weight: 800;
  font-size: 22px;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--ink);
  border-left: 3px solid var(--golden);
  padding: 4px 0 4px 20px;
  margin-block: 1.5em;
}

@media (min-width: 768px) {
  .pullout { font-size: 27px; padding-left: 26px; }
}

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

.posts { display: flex; flex-direction: column; }

.post-row {
  display: block;
  padding: 26px 0;
  border-bottom: 1px solid var(--hairline);
  text-decoration: none;
}

.posts .post-row:first-child { padding-top: 0; }
.post-row h2 { font-size: 24px; margin: 8px 0 8px; }
.post-row p { font-size: 16px; max-width: 60ch; }

@media (hover: hover) { .post-row:hover h2 { color: var(--teal-deep); } }
@media (min-width: 768px) { .post-row h2 { font-size: 28px; } }

.post-meta { font-size: 14px; color: var(--muted); }

/* --- misc ----------------------------------------------------------------- */

/* A link that is its own paragraph is navigation, not prose — so it gets the
   44px tap height that an inline link inside a sentence is exempt from. */
.link-block {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 600;
}

.center { text-align: center; }
.center p { margin-inline: auto; }
.stack-cta { margin-top: 32px; }

/* ==========================================================================
   Reduced motion — skip the animation entirely, never the content.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  /* Both effects must land in their finished state, not their initial one. */
  .reveal { opacity: 1; transform: none; }
  .hl { background-size: 100% 0.45em; }
}