/*
 * Supply Closet - the short-term rental site.
 *
 * Deliberately separate from styles.css. That file dresses the application,
 * which has to survive a dark store room, a cracked phone and a service
 * worker; this one dresses a page whose only job is the first ten seconds.
 * Keeping them apart means the marketing site can be designed without putting
 * the app's test suite at risk, and means a second vertical later becomes a
 * sibling stylesheet rather than a fork of this one.
 *
 * Light only, on purpose. A marketing page that commits to one palette and
 * tunes it properly beats two that are each half-tuned. The app keeps its
 * light/dark control, where someone actually works at night.
 */

/* ───────────────────────────────── tokens ──────────────────────────────── */

:root {
  /* Ground, in three warm steps. Bone is the page, sand is an alternating
     band, paper is reserved for things that must float above both. */
  --bone: #f8f5f0;
  --sand: #efe9df;
  --paper: #ffffff;

  /* Navy is the anchor: header, footer, the two dark bands. Three values,
     because one flat dark looks like a block and three reads as depth. */
  --navy: #101f34;
  --navy-deep: #0a1626;

  /* Ink. Near-black with a navy cast, never #000. */
  --ink: #10192a;
  --ink-2: #3c4a5e;
  --ink-3: #5f6a7a;   /* 5.04:1 on bone, 4.54:1 on sand. #6b7686 failed both. */

  /* Hairlines. These do most of the work and must stay quiet. */
  --rule: #e4ddd1;
  --rule-strong: #d2c7b5;
  --rule-dark: #24364f;

  /* One blue, two brightnesses: the deep one for light ground, the bright one
     for anything that has to read as clickable on navy. */
  --blue: #1d4f8c;
  --blue-hover: #163d6d;
  --blue-bright: #4a8fd9;
  --blue-soft: #e8eff8;
  --blue-line: #b9cfe6;

  /* Brass, used sparingly. Two values, because the tone that looks right as a
     border is nowhere near readable as 11px uppercase text: --brass measured
     3.21:1 on sand, well under the 4.5 it needs. --brass-ink is the text one
     at 5.04:1 on sand and 5.60:1 on bone. Never set type in --brass. */
  --brass: #a8783c;
  --brass-ink: #835a22;
  --brass-soft: #f3ebdd;
  --brass-line: #e0cfae;


  --mw: 1120px;
  --gutter: 24px;

  --fs-display: clamp(2.5rem, 1.5rem + 3.4vw, 4rem);
  --fs-h2: clamp(1.75rem, 1.2rem + 1.7vw, 2.4rem);
  --fs-h3: 1.0625rem;
  --fs-body: 1.0625rem;
  --fs-sm: 0.9375rem;
  --fs-xs: 0.8125rem;
  --fs-micro: 0.6875rem;

  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* Headings get a serif, and it is a deliberate choice rather than a default.
     Set in the OS UI font, this page looked like Segoe to one person and SF to
     the next, which is to say it had no typographic identity at all.

     Nothing is downloaded. A hosted webfont is a blocked request away from a
     layout shift, and this product's whole claim is that it works in a cupboard
     with no signal. Every face below ships with its platform: Iowan Old Style
     on Apple, Palatino Linotype or Book Antiqua on Windows, Georgia almost
     everywhere else. They are close enough in colour and width that the page
     holds its shape across all three. */
  --display: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;

  /* Tight. Rounded corners past about 10px are the whole template tell. */
  --r-xs: 2px;
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 10px;

  color-scheme: light;
}

/* ───────────────────────────────── base ────────────────────────────────── */

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Own the clearance under the sticky header rather than inheriting it from
     whatever padding a band happens to carry. The header is 64px; this leaves
     a deliberate 24px of air above whatever you jumped to. */
  scroll-padding-top: calc(88px + env(safe-area-inset-top));
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bone);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: 1.6;
  /* Numbers line up in columns without being monospaced everywhere. */
  font-variant-numeric: tabular-nums;
}

h1, h2, h3 { margin: 0; font-weight: 700; letter-spacing: -0.022em; line-height: 1.12; }
h1, .band h2, .statement { font-family: var(--display); font-weight: 600; }
/* A serif at display size needs less negative tracking than a UI sans does;
   at -0.03em Iowan and Palatino start colliding on round pairs. */
h1 { letter-spacing: -0.012em; }
p { margin: 0; }
a { color: inherit; }
img, svg { display: block; max-width: 100%; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 60;
  background: var(--navy); color: #fff;
  padding: 10px 16px; border-radius: var(--r-sm); font-size: var(--fs-sm);
}
.skip:focus { left: 16px; top: 16px; }

/* --blue-bright measured 2.80:1 against a sand band, under the 3:1 a focus
   indicator needs. This one clears 4.28:1 there and 4.75:1 on bone. */
:focus-visible { outline: 2px solid #2f6fb5; outline-offset: 2px; }

/* One column, one gutter, everywhere. Every band aligns to this, which is what
   stops a long page from drifting. */
.wrap {
  width: 100%;
  max-width: calc(var(--mw) + var(--gutter) * 2);
  margin-inline: auto;
  /* In landscape the cutout sits down one edge, so the gutter has to grow on
     that side or text runs under it. */
  padding-left: max(var(--gutter), env(safe-area-inset-left));
  padding-right: max(var(--gutter), env(safe-area-inset-right));
}
@media (min-width: 800px) { :root { --gutter: 32px; } }

/* ──────────────────────────────── buttons ─────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: inherit; font-size: var(--fs-sm); font-weight: 600;
  padding: 11px 18px; border-radius: var(--r-sm);
  border: 1px solid transparent; cursor: pointer; text-decoration: none;
  white-space: nowrap;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.btn-primary { background: var(--blue); border-color: var(--blue); color: #fff; }
.btn-primary:hover { background: var(--blue-hover); border-color: var(--blue-hover); }

.btn-outline { background: transparent; border-color: var(--rule-strong); color: var(--ink); }
.btn-outline:hover { border-color: var(--ink-3); background: var(--paper); }

/* On navy, the deep blue disappears into the ground behind it. */
.on-navy .btn-primary { background: var(--blue-bright); border-color: var(--blue-bright); color: #06101d; }
.on-navy .btn-primary:hover { background: #65a2e2; border-color: #65a2e2; }
.on-navy .btn-outline { border-color: var(--rule-dark); color: #fff; }
.on-navy .btn-outline:hover { border-color: #45658c; background: rgba(255,255,255,.06); }

.btn-sm { padding: 8px 14px; font-size: var(--fs-xs); }

/* Touch targets. 44px is the floor on both iOS and Android, and the header pair
   were 38-39px. Keyed to width rather than `pointer: coarse`, because the
   coarse query does not fire reliably in emulation and this layout is already
   width-driven: the disclosure only exists below 700px in the first place. */
@media (max-width: 699px) {
  .site-head .btn-sm { min-height: 44px; padding-inline: 16px; }
  .site-head .signin { padding-block: 12px; }
}

/* ───────────────────────────────── header ─────────────────────────────── */

.site-head {
  position: sticky; top: 0; z-index: 50;
  background: var(--navy);
  border-bottom: 1px solid var(--rule-dark);
  color: #fff;
  /* viewport-fit=cover means the page runs under the notch, so the bar has to
     pay for the status bar itself. constant() is the iOS 11.0-11.2 spelling and
     has to come first; later browsers ignore it and take env().

     The max() is the part that matters: env() resolves to 0 in some iOS
     configurations even when the clock and battery are painted over the page,
     and a bar that trusts it lands underneath them with nothing tappable. 24px
     is a floor, not a guess at any particular handset, and it costs a
     notchless phone a little air at the top rather than costing an iPhone its
     navigation. */
  padding-top: constant(safe-area-inset-top);
  padding-top: max(env(safe-area-inset-top), 44px);
}
.site-head .wrap {
  display: flex; align-items: center; gap: 28px;
  height: 64px;
}
/* The floor above already reserves the status bar, so the bar itself can be
   shorter on a phone and still land where an iOS navigation bar does. */
@media (max-width: 699px) { .site-head .wrap { height: 56px; gap: 12px; } }
.brand {
  display: flex; align-items: center; gap: 10px;
  font-size: 1rem; font-weight: 700; letter-spacing: -0.015em;
  text-decoration: none; color: #fff;
}
.brand img { border-radius: var(--r-xs); }
.brand:hover { color: #cfe0f2; }

.site-nav { display: none; gap: 26px; margin-right: auto; }
.site-nav a {
  font-size: var(--fs-sm); color: #a9bbd0; text-decoration: none;
  transition: color .15s ease;
}
.site-nav a:hover { color: #fff; }
/* Measured: the inline nav fits with 28px to spare at 700px, so it has no
   business disappearing at 860. Below 700 it moves into a disclosure rather
   than vanishing, which is what used to leave a phone with no way to reach
   Pricing or Sign in from the header at all. */
@media (min-width: 700px) {
  .site-nav { display: flex; }
  .menu { display: none; }
  .site-head { padding-top: env(safe-area-inset-top); }
}
@media (max-width: 699px) { .brand { margin-right: auto; } }

.menu { position: relative; }
.menu summary {
  list-style: none; cursor: pointer;
  display: grid; place-items: center;
  width: 44px; height: 44px; margin-right: -6px;
  border: 1px solid var(--rule-dark); border-radius: var(--r-sm);
  color: #fff;
}
.menu summary::-webkit-details-marker { display: none; }
.menu summary svg { width: 18px; height: 18px; }
.menu[open] summary { background: rgba(255, 255, 255, .08); }
.menu-panel {
  position: absolute; right: 0; top: calc(100% + 10px);
  min-width: 208px; padding: 8px;
  background: var(--navy); border: 1px solid var(--rule-dark);
  border-radius: var(--r-md);
  box-shadow: 0 16px 40px -12px rgba(0, 0, 0, .6);
  display: grid; gap: 2px;
}
.menu-panel a {
  padding: 10px 12px; border-radius: var(--r-sm);
  color: #c3d2e3; text-decoration: none; font-size: var(--fs-sm);
}
.menu-panel a:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.menu-panel hr { border: 0; border-top: 1px solid var(--rule-dark); margin: 6px 4px; }

.head-actions { display: flex; align-items: center; gap: 10px; }
.head-actions .signin { font-size: var(--fs-sm); color: #a9bbd0; text-decoration: none; }
.head-actions .signin:hover { color: #fff; }
@media (max-width: 520px) { .head-actions .signin { display: none; } }

/* ───────────────────────────────── bands ──────────────────────────────── */

.band { padding-block: 72px; }
@media (min-width: 800px) { .band { padding-block: 104px; } }

.band-sand { background: var(--sand); border-block: 1px solid var(--rule); }
.band-navy { background: var(--navy); color: #fff; }
.band-navy h2 { color: #fff; }

/* The section label. Small caps, brass, with its number in front. This is the
   spine of the page: it tells you where you are without another heading. */
.label {
  display: flex; align-items: center; gap: 10px;
  font-size: var(--fs-micro); font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--brass-ink); margin-bottom: 18px;
}
.label::before {
  content: attr(data-n);
  font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0;
  color: var(--brass-ink);
}
.label::after { content: ""; flex: 1; height: 1px; background: var(--brass-line); max-width: 64px; }
.band-navy .label { color: #c8a269; }
.band-navy .label::after { background: var(--rule-dark); }

.band h2 { font-size: var(--fs-h2); max-width: 20ch; }
.band-lede {
  margin-top: 16px; max-width: 58ch;
  font-size: 1.125rem; line-height: 1.6; color: var(--ink-2);
}
.band-navy .band-lede { color: #a9bbd0; }

/* ───────────────────────────────── hero ───────────────────────────────── */

.hero { padding-block: 56px 64px; }
/* Stacked by default with real air between the copy and the still. The grid
   below used to supply the only separation, so under 980px the shopping-list
   card sat flush against the fine print and read as attached to it. */
.hero .still { margin-top: 36px; }
@media (min-width: 980px) {
  .hero { padding-block: 88px 96px; }
  .hero .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 468px); gap: 64px; align-items: center; }
  .hero .still { margin-top: 0; }
}

.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--fs-xs); font-weight: 600; color: var(--brass-ink);
  background: var(--brass-soft); border: 1px solid var(--brass-line);
  border-radius: var(--r-sm); padding: 5px 10px; margin-bottom: 22px;
}
.hero h1 {
  font-size: var(--fs-display);
  letter-spacing: -0.012em; line-height: 1.06;
  max-width: 15ch;
}
.hero-lede {
  margin-top: 20px; max-width: 48ch;
  font-size: 1.1875rem; line-height: 1.58; color: var(--ink-2);
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.hero-actions .btn { padding: 13px 22px; font-size: var(--fs-body); }
.hero-fine { margin-top: 16px; font-size: var(--fs-sm); color: var(--ink-3); }

/* ──────────────────────────── product stills ──────────────────────────── */
/*
 * Every screenshot on this page is real markup styled to match the app, not a
 * picture. It stays sharp at any density, it is readable to a screen reader,
 * and it cannot drift out of date in the silent way an exported PNG does.
 */

.still {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(16, 31, 52, .04), 0 12px 32px -12px rgba(16, 31, 52, .18);
}
.still-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 13px 16px;
  background: var(--navy); color: #fff;
}
.still-bar strong { font-size: var(--fs-sm); font-weight: 650; }
.still-bar span { font-size: var(--fs-xs); color: #a9bbd0; }

.still-row {
  display: grid; grid-template-columns: 1fr auto; align-items: center;
  gap: 2px 16px; padding: 13px 16px;
  border-top: 1px solid var(--rule);
}
.still-row:first-of-type { border-top: 0; }
.still-row b { grid-column: 1; font-size: var(--fs-sm); font-weight: 600; }
.still-row small {
  grid-column: 1; font-size: var(--fs-xs); color: var(--ink-3);
  font-family: var(--mono); letter-spacing: -0.01em;
}
.tag {
  grid-column: 2; grid-row: 1 / span 2; justify-self: end;
  font-size: var(--fs-xs); font-weight: 700;
  padding: 4px 9px; border-radius: var(--r-xs); white-space: nowrap;
}
.tag-buy { background: var(--blue-soft); color: var(--blue); border: 1px solid var(--blue-line); }
.tag-ok { background: var(--sand); color: var(--ink-3); border: 1px solid var(--rule); }

.still-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px; border-top: 1px solid var(--rule);
  background: var(--sand);
  font-size: var(--fs-xs); color: var(--ink-3);
}
.still-foot b { color: var(--ink); font-weight: 650; white-space: nowrap; }

/* ──────────────────────────────── steps ───────────────────────────────── */

.steps {
  display: grid; gap: 1px; background: var(--rule);
  border: 1px solid var(--rule); border-radius: var(--r-lg); overflow: hidden;
  margin-top: 44px;
}
@media (min-width: 900px) { .steps { grid-template-columns: repeat(3, 1fr); } }
/* 28px above and nothing below put the separator hairline on the descenders
   of the last line. Symmetrical until the grid takes over. */
.step { background: var(--bone); padding: 28px 0; }
@media (min-width: 900px) { .step { padding: 28px 28px 8px; } .step:first-child { padding-left: 0; } .step:last-child { padding-right: 0; } }
.band-sand .steps { background: var(--rule-strong); border-color: var(--rule-strong); }
.band-sand .step { background: var(--sand); }
.step-n {
  font-family: var(--mono); font-size: var(--fs-xs); font-weight: 700;
  color: var(--blue); letter-spacing: 0;
}
.step h3 { margin-top: 10px; font-size: 1.1875rem; letter-spacing: -0.018em; }
.step p { margin-top: 10px; font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.6; max-width: 38ch; }

/* ──────────────────────────────── split ──────────────────────────────── */
/* A role, a sentence, and the screen that role actually sees. */

.split { display: grid; gap: 40px; margin-top: 44px; }
@media (min-width: 900px) { .split { grid-template-columns: repeat(2, 1fr); gap: 56px; } }
.split h3 { font-size: 1.1875rem; letter-spacing: -0.018em; }
.split > div > p { margin-top: 10px; font-size: var(--fs-sm); color: var(--ink-2); max-width: 42ch; }
.band-navy .split > div > p { color: #a9bbd0; }
.split ul { margin: 16px 0 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.split li {
  display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start;
  font-size: var(--fs-sm); color: var(--ink-2);
}
.band-navy .split li { color: #c3d2e3; }
.split li svg { width: 16px; height: 16px; margin-top: 4px; color: var(--blue); flex: none; }
.band-navy .split li svg { color: var(--blue-bright); }
.split .still { margin-top: 20px; }

/* ─────────────────────────────── feature grid ─────────────────────────── */

.grid {
  display: grid; gap: 1px; background: var(--rule);
  border: 1px solid var(--rule); border-radius: var(--r-lg); overflow: hidden;
  margin-top: 44px;
}
@media (min-width: 720px) { .grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .grid { grid-template-columns: repeat(3, 1fr); } }
.cell { background: var(--bone); padding: 26px 24px 28px; }
.band-sand .grid { background: var(--rule-strong); border-color: var(--rule-strong); }
.band-sand .cell { background: var(--sand); }
.cell svg { width: 20px; height: 20px; color: var(--blue); margin-bottom: 14px; }
/* --fs-h3 is 17px, identical to body, so these separated from their own
   paragraphs by weight alone. Matched to .step h3 and .split h3 instead. */
.cell h3 { font-size: 1.1875rem; letter-spacing: -0.018em; }
.cell p { margin-top: 8px; font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.6; }

/* ──────────────────────────────── quote ──────────────────────────────── */
/* Not a testimonial. A plain statement of what the product refuses to do,
   which is the only kind of claim worth putting this big. */

.statement {
  font-size: clamp(1.375rem, 1rem + 1.4vw, 2rem);
  font-weight: 600; letter-spacing: -0.022em; line-height: 1.35;
  max-width: 24ch;
}
.statement-note { margin-top: 20px; max-width: 46ch; color: #a9bbd0; font-size: var(--fs-sm); }

/* ─────────────────────────────── closing ─────────────────────────────── */

.closing h2 { max-width: 18ch; }
.closing .hero-actions { margin-top: 28px; }

/* ──────────────────────────────── footer ─────────────────────────────── */

.site-foot {
  background: var(--navy-deep); color: #8fa3bb;
  border-top: 1px solid var(--rule-dark);
  padding-top: 44px;
  padding-bottom: calc(40px + env(safe-area-inset-bottom));
  font-size: var(--fs-sm);
}
.foot-top {
  display: grid; gap: 28px;
  padding-bottom: 32px; border-bottom: 1px solid var(--rule-dark);
}
@media (min-width: 760px) { .foot-top { grid-template-columns: 1.4fr 1fr 1fr; gap: 48px; } }
/* display:flex in a grid cell stretched this to the full column, giving the
   link 286px of invisible hit area and an absurd focus ring. */
.foot-top .brand { color: #fff; margin-bottom: 12px; width: max-content; }
.foot-blurb { max-width: 34ch; font-size: var(--fs-sm); color: #8fa3bb; }
.foot-col ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.foot-col a { color: #c3d2e3; text-decoration: none; font-size: var(--fs-sm); }
.foot-col a:hover { color: #fff; text-decoration: underline; }
.foot-bottom {
  display: flex; flex-wrap: wrap; gap: 10px 20px; align-items: center;
  padding-top: 24px; font-size: var(--fs-xs); color: #6f8399;
}
.foot-bottom .spacer { flex: 1; }

/* ───────────────────────── additions after review ──────────────────────── */

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/*
 * Every section used to be a heading in a 420px column with roughly 700px of
 * nothing beside it, five times in a row, which is what made a 4,800px page
 * feel like a phone layout stretched wide. The heading and its opening
 * paragraph now share the measure.
 */
.band-head { display: grid; gap: 16px; }
@media (min-width: 1040px) {
  .band-head {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 72px; align-items: start;
  }
  .band-head .band-lede { margin-top: 0; padding-top: 6px; }
}
.band-head h2 { max-width: 22ch; }

/* figure carries the still so the description is a real caption rather than an
   aria-label on a generic div, which ARIA does not allow and screen readers do
   not reliably announce. */
.still-fig { margin: 0; }

/* The two role columns ended at different heights because one card had a
   footer bar and the other did not. Pinning the still to the bottom of each
   column lines them up whatever the copy above does. */
.split-col { display: flex; flex-direction: column; }
.split-col .still-fig { margin-top: auto; padding-top: 20px; }

.ledger-still { margin-top: 44px; max-width: 720px; }

/* The blue tag was carrying three unrelated meanings: a quantity to buy, a
   low-stock status, and a completed action. These two take the load off it. */
.tag-none { background: transparent; color: var(--ink-3); border: 1px dashed var(--rule-strong); }
.tag-plain { background: var(--sand); color: var(--ink); border: 1px solid var(--rule-strong); font-family: var(--mono); }
.band-navy .tag-plain { background: rgba(255,255,255,.07); color: #fff; border-color: var(--rule-dark); }
.band-navy .still { background: #16283f; border-color: var(--rule-dark); }
.band-navy .still-row { border-top-color: var(--rule-dark); }
.band-navy .still-row b { color: #fff; }
.band-navy .still-row small { color: #9bb0c9; }

.steps { list-style: none; padding: 0; }
.foot-col h3 {
  margin: 0 0 12px; font-size: var(--fs-micro); font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: #6f8399;
}

/* ─────────────────────────────── pricing page ──────────────────────────── */

.hero-narrow { padding-block: 56px 36px; }
.hero-narrow .wrap { display: block; }
.hero-narrow h1 { max-width: 20ch; }

.counter {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
  padding-bottom: 28px;
}
.counter label { font-size: var(--fs-sm); color: var(--ink-2); font-weight: 600; }
.counter-control {
  display: inline-flex; align-items: center;
  border: 1px solid var(--rule-strong); border-radius: var(--r-sm);
  background: var(--paper); overflow: hidden;
}
.counter-control button {
  appearance: none; border: 0; background: transparent; cursor: pointer;
  font: inherit; font-size: 1.125rem; line-height: 1; color: var(--ink);
  width: 40px; height: 40px;
}
.counter-control button:hover { background: var(--sand); }
.counter-control input {
  width: 56px; height: 40px; border: 0; border-inline: 1px solid var(--rule);
  background: transparent; text-align: center;
  font: inherit; font-weight: 650; color: var(--ink);
  -moz-appearance: textfield;
}
.counter-control input::-webkit-outer-spin-button,
.counter-control input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.billing-note {
  margin-bottom: 24px; padding: 12px 14px;
  background: var(--brass-soft); border: 1px solid var(--brass-line);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm); color: var(--brass-ink); max-width: 68ch;
}

.plan-grid { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: var(--r-lg); overflow: hidden; }
@media (min-width: 680px) { .plan-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .plan-grid { grid-template-columns: repeat(4, 1fr); } }

.plan { background: var(--paper); padding: 24px 22px 26px; display: flex; flex-direction: column; }
.plan.is-best { background: var(--blue-soft); }
.plan.is-out { background: var(--bone); }
.plan-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 26px; }
.plan-head h3 { font-size: 1.0625rem; letter-spacing: -0.012em; }
/* A small square marker, not a floating rounded pill. */
.plan-mark {
  font-size: var(--fs-micro); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--blue); background: var(--paper);
  border: 1px solid var(--blue-line); border-radius: var(--r-xs); padding: 3px 7px;
  white-space: nowrap;
}
.plan-price { margin-top: 16px; display: flex; align-items: baseline; gap: 6px; min-height: 42px; }
.plan-price strong { font-family: var(--display); font-size: 2.125rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1; }
.plan-price span { font-size: var(--fs-xs); color: var(--ink-3); }
.plan-out { font-size: var(--fs-xs); color: var(--ink-3); align-self: center; }
.plan-tag { margin-top: 10px; font-size: var(--fs-sm); color: var(--ink-2); min-height: 44px; }
.plan-features { margin: 18px 0 22px; padding: 0; list-style: none; display: grid; gap: 8px; }
.plan-features li {
  position: relative; padding-left: 18px;
  font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.5;
}
.plan-features li::before {
  content: ""; position: absolute; left: 0; top: 9px;
  width: 7px; height: 7px; border: 1px solid var(--blue-line); background: var(--blue-soft);
}
.plan .btn { margin-top: auto; width: 100%; }

.faq { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: var(--r-lg); overflow: hidden; margin-top: 44px; }
@media (min-width: 820px) { .faq { grid-template-columns: repeat(2, 1fr); } }
.faq > div { background: var(--bone); padding: 24px 22px; }
.faq h3 { font-size: 1.0625rem; letter-spacing: -0.012em; }
.faq p { margin-top: 9px; font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.6; }

/* ─────────────────────────────── legal prose ───────────────────────────── */

.prose { max-width: 68ch; padding-block: 56px 88px; }
.prose h1 { font-family: var(--display); font-size: clamp(2rem, 1.4rem + 1.8vw, 2.75rem); font-weight: 600; letter-spacing: -0.012em; }
.prose h2 {
  font-family: var(--display); font-weight: 600;
  font-size: 1.375rem; letter-spacing: -0.012em;
  margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--rule);
}
.prose p, .prose li { font-size: var(--fs-body); line-height: 1.68; color: var(--ink-2); }
.prose p { margin-top: 14px; }
.prose ul { margin: 14px 0 0; padding-left: 20px; display: grid; gap: 10px; }
.prose li::marker { color: var(--ink-3); }
.prose a { color: var(--blue); text-underline-offset: 2px; }
.prose strong { color: var(--ink); font-weight: 650; }
.prose code {
  font-family: var(--mono); font-size: 0.875em;
  background: var(--sand); border: 1px solid var(--rule);
  border-radius: var(--r-xs); padding: 1px 5px;
}
.prose-lede { margin-top: 16px; font-size: 1.125rem; color: var(--ink-2); max-width: 58ch; }
.prose-meta { margin-top: 10px; font-size: var(--fs-sm); color: var(--ink-3); }

/* ─────────────────────────── mobile action bar ─────────────────────────── */
/*
 * The top-right corner of a phone is the hardest place on the screen for a
 * thumb to reach and the most contested: the status bar, the camera cutout and
 * Safari's own tap-to-scroll-to-top all want the same pixels. Putting the one
 * button that matters there was the mistake behind "I cannot tap sign up".
 *
 * Below 700px the primary action moves out of the header and sits where a
 * thumb actually rests, and the header keeps only the brand and the menu.
 */

.mobile-cta { display: none; }

@media (max-width: 699px) {
  /* One primary action per screen. The header copy goes; the bar below owns it. */
  .site-head .head-actions .btn-primary { display: none; }

  .mobile-cta {
    display: flex; gap: 10px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
    padding-top: 10px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
    background: color-mix(in srgb, var(--bone) 94%, transparent);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--rule);
  }
  .mobile-cta .btn { flex: 1; min-height: 48px; font-size: var(--fs-body); }
  .mobile-cta .btn-outline { flex: 0 1 auto; padding-inline: 18px; background: var(--paper); }

  /* The bar is fixed, so the page needs room underneath it or it covers the
     last thing on the page, which is the footer. */
  body { padding-bottom: calc(68px + env(safe-area-inset-bottom)); }
}