/* Design tokens. One edit here recolours the whole site.
   Navy on white: no black, no orange, no gradients. Depth is 1px borders and
   the pale surface, nothing else. */
:root {
  /* Ground */
  --bg: #FFFFFF;
  --surface: #F6F8FB;
  --line: #E3E8EF;
  --line-strong: #D5DCE6;

  /* The one accent. Primary buttons, logo mark, active states, progress. */
  --accent: #1B4079;
  --accent-deep: #0F2444;
  --accent-soft: #35598F;
  --tint: #E9EEF6;

  /* Text */
  --heading: #16294A;
  --body: #1B2B45;
  --muted: #5C6B80;
  --muted-2: #6B7A8C;
  --link: #16355F;
  --link-hover: #0E2648;

  /* The second colour. Carries "watched", "published", "ours" - the states
     that are good news but are not the primary action. */
  --accent-2: #3E7A5E;
  /* Text on the wash needs to be a shade deeper to clear 4.5:1. */
  --accent-2-ink: #35694F;
  --accent-2-wash: #E4EFE9;

  /* Neutrals */
  --grey-mid: #7A8899;
  --grey-light: #C3CCD9;
  --grey-pale: #E3EAF3;

  /* Type */
  --font-head: "Instrument Serif", Georgia, serif;
  --font-body: "Inter", system-ui, sans-serif;

  /* Older names, kept so the per-page <style> blocks and existing rules keep
     working. They are aliases now, not a second palette. */
  --navy: var(--accent);
  --navy-2: var(--accent-soft);
  --blue: var(--accent);
  --blue-dark: var(--accent-deep);
  --blue-wash: var(--tint);
  --amber: var(--grey-mid);
  --amber-wash: var(--tint);
  --grey-1: var(--surface);
  --grey-2: var(--line);
  --grey-3: var(--muted);
  --ink: var(--body);
  --white: #FFFFFF;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--white); color: var(--ink); }
body { font-family: var(--font-body); font-size: 17px; line-height: 1.5; }
h1, h2, h3 { font-family: var(--font-head); font-weight: 400; letter-spacing: -0.01em;
  color: var(--heading); line-height: 1.1; margin: 0 0 .3em; }
a { color: var(--link); }
a:hover { color: var(--link-hover); }
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; }

header { border-bottom: 1px solid var(--grey-2); }
header .wrap { display: flex; align-items: center; justify-content: space-between; height: 72px; }
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.logo svg { width: 30px; height: 30px; display: block; flex: none; }
.logo span { font-family: var(--font-head); font-weight: 400; font-size: 23px; color: var(--heading); }
nav a { margin-left: 24px; text-decoration: none; color: var(--muted); font-weight: 500;
  display: inline-flex; align-items: center; min-height: 44px; }
nav a:hover { color: var(--accent); }
nav a.btn { color: var(--white); }

.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px;
  background: var(--accent); color: var(--white); padding: 11px 22px; border-radius: 8px;
  text-decoration: none; font-weight: 600; font-size: 15px; border: 1px solid var(--accent);
  cursor: pointer; font-family: var(--font-body); }
.btn:hover { background: var(--accent-deep); border-color: var(--accent-deep); color: var(--white); }
.btn:disabled { opacity: .6; cursor: default; }
.btn.ghost { background: var(--white); color: var(--accent); border: 1px solid var(--line-strong); }
.btn.ghost:hover { background: var(--surface); color: var(--accent-deep); border-color: var(--line-strong); }

section { padding: 44px 0; }
.card { border: 1px solid var(--line); border-radius: 12px; padding: 18px 20px; background: var(--white); }
.note { font-size: 15px; margin-top: 12px; min-height: 1.5em; color: var(--link); }
.note.bad { color: #b42318; }
.meta { color: var(--muted); font-size: 15px; }
footer { border-top: 1px solid var(--line); padding: 20px 0; color: var(--muted); font-size: 15px; }

/* Auth pages */
.panel { max-width: 430px; margin: 56px auto; }
.panel .card { padding: 30px; }
.panel h1 { font-size: 28px; }
.panel label { display: block; font-size: 15px; font-weight: 600; color: var(--heading); margin: 16px 0 6px; }
.panel input { width: 100%; height: 48px; padding: 0 14px; border: 1px solid var(--line-strong);
  border-radius: 8px; font: inherit; background: var(--white); color: var(--body); }
.panel input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.panel .btn { width: 100%; margin-top: 20px; }
.panel .swap { text-align: center; margin-top: 18px; font-size: 15px; color: var(--muted); }
.hidden { display: none; }

/* Account page */
.account { max-width: 1080px; margin: 32px auto 56px; }
.account h1 { font-size: clamp(28px, 3.2vw, 38px); margin-bottom: .25em; }
.account .who { color: var(--muted); font-size: 15px; margin: 0 0 20px; }
.account .card { padding: 22px 24px; }
.account .card + .card { margin-top: 16px; }
.account .card > h3 { margin: 10px 0 6px; font-size: 20px; }
.account .card > p { margin: 8px 0; }
.account .card > p:last-child { margin-bottom: 0; }
.account ol { padding-left: 0; margin: 10px 0 0; list-style: none; counter-reset: step; }
.account ol li { counter-increment: step; position: relative; padding: 0 0 12px 40px; }
.account ol li:last-child { padding-bottom: 0; }
.account ol li::before {
  content: counter(step); position: absolute; left: 0; top: 1px;
  width: 26px; height: 26px; border-radius: 50%; background: var(--tint); color: var(--accent);
  display: grid; place-items: center; font-weight: 700; font-size: 14px;
}

/* Two columns once there is room, so wide screens are not mostly empty.

   These were grid columns, which lock cards into rows: a row is as tall as its
   tallest card and the shorter one leaves a hole under it. Measured at 1440px,
   that was 662px of empty column, 583px of it in the one row where "How a link
   looks to a viewer" (655px) sat beside "Account keys" (72px).

   Column flow instead. The cards are independent of one another -- nothing
   reads across a row -- so there is no reason for one to wait on the height of
   another, and the browser balances the two columns itself.

   Column one takes a prefix of the source order, so source order caps how well
   the two can balance: with the brand card third, the best split available was
   700 against 1327 and the flow saved almost nothing. It leads the markup now,
   which lets the split land at 974 against 982. That also puts the same card
   first on a phone, where the cards simply stack, as it is first on a wide
   screen -- the page reads the same way at both sizes. */
@media (min-width: 1000px) {
  .account { columns: 2; column-gap: 18px; }
  .account > h1, .account > .who { column-span: all; }
  .account > .card { break-inside: avoid; margin: 0 0 18px; }
  .account > .card + .card { margin-top: 0; }
  .account > .card:last-child { margin-bottom: 0; }
}

code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .92em; background: var(--surface); border: 1px solid var(--line); border-radius: 4px; padding: 1px 5px; }
.tag { display: inline-block; background: var(--tint); color: var(--accent); border-radius: 999px;
  padding: 2px 11px; font-size: 14px; font-weight: 600; }

@media (max-width: 640px) {
  .tour-body { flex-direction: column; gap: 14px; }
  .tour-nav { width: 100%; }
  .tour-nav .btn { flex: 1; }
}

/* Landing page */
.hero { padding: 44px 0 36px; background: var(--white); }
.hero h1 { font-size: clamp(32px, 4vw, 46px); max-width: 880px; }
.hero p { font-size: 18px; line-height: 1.5; color: var(--muted); max-width: 660px; margin: 0 0 18px; }
.hero .ctas a { margin-right: 12px; margin-bottom: 10px; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; }
.grid .card h3 { font-size: 21px; }
.grid .card p { margin: 0; color: var(--muted); }
.steps { counter-reset: s; list-style: none; padding: 0; margin: 0; }
.steps li { counter-increment: s; position: relative; padding: 0 0 14px 52px; }
.steps li::before { content: "0" counter(s); position: absolute; left: 0; top: -4px;
  font-family: var(--font-head); font-size: 26px; color: var(--accent); }
.steps strong { color: var(--heading); font-weight: 600; }
.sample { background: var(--surface); }
.agenda { border: 1px solid var(--line); border-radius: 12px; background: var(--white); overflow: hidden; }
.agenda .row { display: grid; grid-template-columns: 90px 1fr 1.4fr; gap: 16px; padding: 14px 20px; border-top: 1px solid var(--grey-2); }
.agenda .row:first-child { border-top: 0; background: var(--accent); color: var(--white); font-weight: 600; }
.agenda .t { color: var(--muted); }
.agenda .row:first-child .t { color: var(--white); }
.signup { text-align: center; }
.signup p { color: var(--muted); }
form.inline { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 20px; }
form.inline input[type=email] { height: 48px; padding: 0 14px; border: 1px solid var(--line-strong);
  border-radius: 8px; font: inherit; min-width: 280px; }

@media (max-width: 640px) {
  .agenda .row { grid-template-columns: 64px 1fr; }
  .agenda .row span:last-child { grid-column: 2; }
  form.inline input[type=email] { min-width: 0; width: 100%; }
}

/* ---------------------------------------------------------------------------
   Marketing pages (home, pricing, FAQ, about, free sample)
   --------------------------------------------------------------------------- */

.hero .trust { font-size: 15px; color: var(--grey-3); margin: 12px 0 0; }
.hero .ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.hero .ctas a { margin: 0; }

.lede { font-size: 18px; color: var(--muted); max-width: 820px; }
.section-head { max-width: 840px; margin-bottom: 18px; }
.section-head h2 { font-size: clamp(24px, 2.4vw, 30px); }
.section-head p { margin: 0; color: var(--muted); font-size: 17px; }
.tint { background: var(--surface); }
section.tight { padding: 32px 0; }

/* Problem list */
.pains { list-style: none; padding: 0; margin: 0 0 18px; display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.pains li { border-left: 3px solid var(--grey-light); padding: 2px 0 2px 16px; }
.pains strong { display: block; color: var(--heading); font-weight: 600; }
.pains span { color: var(--muted); }
.turn { border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: 12px;
  background: var(--surface); padding: 16px 20px; max-width: 900px; }
.turn p { margin: 0; font-size: 17px; }
.turn p + p { margin-top: 10px; }

/* Feature and audience lists */
.feature-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
/* auto-fit collapses tracks it cannot fill, which handles a grid with fewer
   cards than columns. It does not help when there are more: five cards in the
   four columns 1152px allows is a row of four and then a row of one, with
   three empty slots beside it costing the height of a card. Five and six both
   sit better in three columns -- 3+2 with one slot empty, or 3+3 with none.
   Measured at 1440px, 148px off /audit and 153px off the homepage.

   A browser without :has() keeps the four-column rows, which is what it does
   today, so there is nothing to fall back from. */
@media (min-width: 900px) {
  .feature-grid:has(> :nth-child(5):last-child),
  .feature-grid:has(> :nth-child(6):last-child) { grid-template-columns: repeat(3, 1fr); }
}
.feature-grid .card h3 { font-size: 19px; margin-bottom: 6px; }
.feature-grid .card p { margin: 0; color: var(--muted); }
.ticks { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.ticks li { position: relative; padding-left: 30px; color: var(--body); }
.ticks li::before { content: ""; position: absolute; left: 0; top: .45em; width: 16px; height: 9px;
  border-left: 3px solid var(--accent); border-bottom: 3px solid var(--accent); transform: rotate(-45deg); }

/* Comparison and pricing tables */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.compare { border-collapse: collapse; width: 100%; min-width: 680px; background: var(--white);
  border: 1px solid var(--grey-2); border-radius: 10px; overflow: hidden; }
table.compare th, table.compare td { text-align: left; padding: 14px 18px; border-top: 1px solid var(--grey-2);
  font-size: 16px; vertical-align: top; }
table.compare thead th { background: var(--surface); color: var(--heading); border-top: 0; font-weight: 600;
  font-family: var(--font-body); font-size: 13px; letter-spacing: .09em; text-transform: uppercase; }
table.compare thead th.us { background: var(--accent); color: var(--white); }
table.compare tbody th { font-weight: 500; color: var(--heading); width: 34%; }
table.compare td.us { background: var(--tint); font-weight: 600; color: var(--accent); }
table.compare td.na { color: var(--muted); }

/* Pricing */
.plans { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); align-items: start; }
.plan { border: 1px solid var(--grey-2); border-radius: 12px; padding: 20px; background: var(--white); }
.plan.featured { border: 2px solid var(--accent); }
.plan h3 { font-size: 23px; margin-bottom: 4px; }
.plan .for { color: var(--muted); font-size: 15px; margin: 0 0 12px; min-height: 3em; }
.plan .price { font-family: var(--font-head); font-size: 38px; color: var(--heading); line-height: 1.1; }
.plan .price small { display: block; font-family: var(--font-body); font-size: 12px;
  font-weight: 600; color: var(--muted); letter-spacing: .09em; text-transform: uppercase; margin-bottom: 4px; }
.plan .price + .price { margin-top: 14px; }
.plan ul { list-style: none; padding: 0; margin: 14px 0 16px; display: grid; gap: 8px; }
.plan ul li { font-size: 16px; color: var(--body); position: relative; padding-left: 24px; }
.plan ul li::before { content: ""; position: absolute; left: 0; top: .45em; width: 13px; height: 7px;
  border-left: 3px solid var(--accent); border-bottom: 3px solid var(--accent); transform: rotate(-45deg); }
.plan ul li.off { color: var(--muted-2); padding-left: 24px; }
.plan ul li.off::before { border-color: var(--grey-light); }
.plan .btn { width: 100%; text-align: center; }
.price-notes { display: grid; gap: 14px; margin-top: 18px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.price-notes .card { padding: 18px 20px; }
.price-notes .card strong { display: block; color: var(--heading); margin-bottom: 4px; }
.price-notes .card p { margin: 0; color: var(--muted); font-size: 15px; }
.price-notes .card.warranty { border-color: var(--line-strong); background: var(--surface); }
.price-notes .card.warranty p { color: var(--muted); }

/* FAQ */
.faq { max-width: none; }
.faq details { border: 1px solid var(--grey-2); border-radius: 10px; background: var(--white); padding: 0; }
.faq details + details { margin-top: 12px; }
.faq summary { cursor: pointer; list-style: none; padding: 13px 18px; font-weight: 600; color: var(--heading);
  font-size: 17px; display: flex; justify-content: space-between; gap: 16px; align-items: center; min-height: 44px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 22px; color: var(--accent); line-height: 1; flex-shrink: 0; }
.faq details[open] summary::after { content: "\2212"; }
.faq details[open] summary { border-bottom: 1px solid var(--grey-2); }
.faq .answer { padding: 0 18px 16px; margin: 0; color: var(--body); }

/* About */
.about { max-width: 920px; }
.about p { font-size: 17px; color: var(--body); }
.principles { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.principles li { border-left: 3px solid var(--accent); padding-left: 16px; }
.principles strong { display: block; color: var(--heading); font-weight: 600; }
.principles span { color: var(--muted); }

/* Sample request form */
.form-card { max-width: 680px; }
.field { margin-top: 18px; }
.field > label { display: block; font-size: 15px; font-weight: 600; margin-bottom: 6px; color: var(--heading); }
.field input, .field select { width: 100%; padding: 0 14px; border: 1px solid var(--line-strong);
  border-radius: 8px; font: inherit; min-height: 48px; background: var(--white); color: var(--body); }
.field input:focus, .field select:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.field .help { font-size: 14px; color: var(--muted); margin: 6px 0 0; }
.field-row { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.form-card .btn { margin-top: 24px; }
.form-note { font-size: 15px; color: var(--muted); margin: 14px 0 0; }
.form-msg { margin: 18px 0 0; padding: 14px 16px; border-radius: 9px; font-size: 16px; }
.form-msg.ok { background: var(--accent-2-wash); color: var(--accent-2-ink); }
.form-msg.bad { background: #fdecec; color: #a11b1b; }

/* Footer */
footer .foot { display: flex; flex-wrap: wrap; gap: 10px 26px; justify-content: space-between; align-items: center; }
footer nav.foot-links { display: flex; flex-wrap: wrap; gap: 6px 18px; }
footer nav.foot-links a { margin: 0; text-decoration: none; color: var(--muted); min-height: 44px;
  display: inline-flex; align-items: center; }
footer nav.foot-links a:hover { color: var(--accent); }
footer .copy { width: 100%; color: var(--muted-2); font-size: 14px; margin-top: 4px; }

@media (max-width: 760px) {
  section { padding: 30px 0; }
  section.tight { padding: 24px 0; }
  .hero { padding: 26px 0 24px; }
  .wrap { padding: 0 16px; }
  .section-head { margin-bottom: 14px; }
}

/* Phone density.
   Every grid on this site is one column at 375px, so a card's padding and the
   gap under it are paid once per card down the whole page rather than once per
   row. Measured on the home page: 30-odd cards, and the chrome around them was
   costing about a screen and a half of scrolling on its own. The type is left
   alone -- this takes the space between things, not the things. */
@media (max-width: 760px) {
  .card { padding: 14px 16px; }
  .feature-grid { gap: 10px; }
  .step-cards, .principles { gap: 12px; }
  /* Not a gap: these panes are divided by a border, not by space. */
  .versions-grid > div { padding: 16px 18px; }
  .section-head p, .lede { font-size: 17px; }
  .panel.ladder, .panel.versions { margin-top: 20px; }
  .ladder-head, .versions-head { padding: 16px 18px; }
  .ladder-foot { padding: 16px 18px; }
}

/* The header carries a button plus four links on the marketing pages, which is
   more than fits beside the logo on a small laptop. Let it wrap instead of
   pushing the button off the edge. */
header .wrap { flex-wrap: wrap; height: auto; min-height: 72px; padding-top: 12px; padding-bottom: 12px; row-gap: 10px; }
header nav { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 22px; }
header nav a { margin-left: 0; }

@media (max-width: 760px) {
  /* The matched height only matters when the plans sit side by side. */
  .plan .for { min-height: 0; }
}

.how-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 18px 0 0; }

/* Hero: the walkthrough sits beside the headline, above the fold. */
.hero { padding: 40px 0 34px; }
.hero-grid { display: grid; gap: 24px; align-items: center; }
.hero-copy h1 { font-size: clamp(32px, 3.8vw, 52px); line-height: 1.04; }
.hero-copy p { max-width: 560px; }
.hero-tour { display: block; position: relative; border-radius: 12px; overflow: hidden;
  background: var(--surface); text-decoration: none; border: 1px solid var(--line); }
.hero-tour img { display: block; width: 100%; height: auto; }
.hero-tour .play { position: absolute; left: 50%; top: 44%; width: 68px; height: 68px; margin: -34px 0 0 -34px;
  border-radius: 50%; background: var(--white); border: 1px solid var(--line);
  transition: transform .18s ease; }
.hero-tour .play::after { content: ""; position: absolute; left: 27px; top: 21px;
  border-left: 22px solid var(--accent); border-top: 13px solid transparent; border-bottom: 13px solid transparent; }
.hero-tour:hover .play, .hero-tour:focus-visible .play { transform: scale(1.08); }
.hero-tour:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.hero-tour .cap { display: block; padding: 12px 16px; background: var(--surface); color: var(--muted);
  font-size: 14px; border-top: 1px solid var(--line); }

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

/* The walkthrough deck is built for a desktop screen; say so on a phone. */
.small-screen-note { display: none; }
@media (max-width: 760px) {
  .hero-tour .cap { padding-bottom: 4px; }
  .small-screen-note { display: block; padding-top: 0; color: var(--muted); }
}

/* ---------------------------------------------------------------------------
   The menu on a phone.

   Five links plus the trial button do not fit beside the logo -- measured, it
   wants 420px of a 390px screen -- so below the breakpoint they fold behind a
   menu button and drop down as a list under the header.

   What used to happen here was `nav a:not(.btn) { display: none }`, which hid
   every link on the page: the header's, the footer's seven, and the lone "Sign
   out" and "Back to site" on the account and login pages. A phone had no
   navigation at all. The footer's links wrap on their own and never needed
   hiding, so nothing below touches them. */
.nav-toggle { display: none; }

@media (max-width: 640px) {
  /* Only once the script that opens it has run. Without it the links stay in
     the header and stack, which is plain but reachable. */
  .has-js-nav .nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-right: -8px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--accent);
    cursor: pointer;
  }
  .has-js-nav .nav-toggle:hover { background: var(--surface); }
  .has-js-nav .nav-toggle:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
  .has-js-nav .nav-toggle svg {
    width: 26px; height: 26px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
  }
  /* The button says which of the two it is, so the icon follows it rather than
     being told separately. */
  .has-js-nav .nav-toggle .i-close { display: none; }
  .has-js-nav .nav-toggle[aria-expanded="true"] .i-open { display: none; }
  .has-js-nav .nav-toggle[aria-expanded="true"] .i-close { display: block; }

  .has-js-nav header nav#site-nav { display: none; }
  .has-js-nav header nav#site-nav[data-open="true"] {
    /* Its own row under the logo, in the flow, so it pushes the page down
       rather than floating over the first thing someone came to read. */
    display: flex;
    flex-basis: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    /* Out to the header's edges, past the wrap's gutter. */
    margin: 8px -20px -12px;
    border-top: 1px solid var(--grey-2);
  }
  .has-js-nav header nav#site-nav[data-open="true"] a {
    padding: 15px 20px;
    border-bottom: 1px solid var(--grey-2);
    text-decoration: none;
  }
  .has-js-nav header nav#site-nav[data-open="true"] a.btn {
    margin: 14px 20px 18px;
    border-bottom: 0;
    text-align: center;
  }
}

/* For the label on an icon button: read out, not drawn. */
.sr {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}


/* ---------------------------------------------------------------------------
   Redesign: navy on white.
   Pieces the agreed design adds on top of the structure that was already here.
   --------------------------------------------------------------------------- */

/* Section labels: the small uppercase line above a heading. */
.label { font-family: var(--font-body); font-weight: 600; font-size: 13px;
  text-transform: uppercase; letter-spacing: .09em; color: var(--muted); margin: 0 0 10px; }

/* The hero headline sets one word in italic, the way the canvas does. */
.hero-copy h1 em { font-style: italic; }

/* Proof strip: a thin line of customer names under the hero. */
.proof { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  background: var(--surface); padding: 18px 0; }
.proof .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 32px; }
.proof .label { margin: 0; }
.proof span.name { font-weight: 600; font-size: 15px; color: var(--muted-2); }

/* Numbered step cards, 01/02/03 in the serif. */
.step-cards { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.step-cards .card { display: flex; flex-direction: column; gap: 8px; }
.step-cards .n { font-family: var(--font-head); font-size: 30px; color: var(--accent); line-height: 1; }
.step-cards h3 { font-size: 21px; margin: 0; }
.step-cards p { margin: 0; color: var(--muted); font-size: 16px; }

/* Per-viewer watch bars. The empty one is the point of the section. */
.watch-bars { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
.watch-bars li { display: grid; gap: 6px; }
.watch-bars .who { display: flex; justify-content: space-between; gap: 12px;
  font-size: 15px; color: var(--body); }
.watch-bars .who b { font-weight: 600; }
.watch-bars .who .pct { color: var(--muted); font-variant-numeric: tabular-nums; }
.watch-bars .track { height: 10px; border-radius: 999px; background: var(--grey-pale);
  border: 1px solid var(--line); overflow: hidden; }
.watch-bars .fill { display: block; height: 100%; background: var(--accent); }
.watch-bars .fill.grey { background: var(--grey-mid); }
.watch-bars .fill.none { width: 0; }
.watch-note { margin: 18px 0 0; font-size: 16px; color: var(--heading); font-weight: 500; }

/* Deck thumbnails in the hero card: the two deep accent variants, flat. */
.deck-chip { width: 44px; height: 32px; border-radius: 5px; flex: none; background: var(--accent); }
.deck-chip.deep { background: var(--accent-deep); }
.deck-chip.soft { background: var(--accent-2); }

/* A plain browser-chrome frame. No shadow: the border carries it. */
.chrome { border: 1px solid var(--line); border-radius: 12px; background: var(--white);
  overflow: hidden; }
.chrome .bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px;
  background: var(--surface); border-bottom: 1px solid var(--line); }
.chrome .bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--grey-light); }
.chrome .bar .addr { flex: 1; margin-left: 10px; height: 22px; border-radius: 5px;
  background: var(--white); border: 1px solid var(--line); }
.chrome ul { list-style: none; margin: 0; padding: 6px 0; }
.chrome li { display: flex; align-items: center; gap: 12px; padding: 12px 16px; }
.chrome li + li { border-top: 1px solid var(--line); }
.chrome li .t { flex: 1; min-width: 0; }
.chrome li .t b { display: block; font-weight: 600; font-size: 15px; color: var(--heading); }
.chrome li .t span { font-size: 13px; color: var(--muted); }
.chrome li .state { font-size: 13px; font-weight: 600; color: var(--accent); white-space: nowrap; }
.chrome li .state.off { color: var(--muted-2); font-weight: 500; }

/* Marked plan. */
.plan .most { display: inline-block; margin-bottom: 10px; padding: 3px 10px; border-radius: 999px;
  background: var(--accent); color: var(--white); font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .09em; }

/* The sign-in card.
   It was 880px because it was once two columns -- a summary beside the form --
   and the summary went. The width stayed, so an email box was 762px for an
   address that is thirty characters long, and the eye had to travel the width
   of the screen between the label and the far end of a field. A sign-in form
   is two short answers; it wants a measure, not a page.
   31rem, taken from the 30rem the reset and join screens already set on
   .panel, plus a rem for the padding this card carries and those panels do
   not. The four screens that ask somebody for a password are now the same
   shape rather than one of them being twice the width of the others. */
.auth { max-width: 31rem; margin: 48px auto 64px; }
.auth .card { padding: 0; overflow: hidden; }
.auth-grid { display: grid; }
.auth-form { padding: 28px; }
.auth-form h1 { font-size: 30px; margin-bottom: .3em; }
.auth-form label { display: block; font-size: 15px; font-weight: 600; color: var(--heading);
  margin: 16px 0 6px; }
/* The sign-in form hides the company field by class; that has to win over the
   label rule above, which is a class more specific. */
.auth-form .hidden, .panel .hidden { display: none; }
.auth-form input { width: 100%; height: 48px; padding: 0 14px; border: 1px solid var(--line-strong);
  border-radius: 8px; font: inherit; background: var(--white); color: var(--body); }
.auth-form input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
/* Show/hide sits inside the password field. The padding on the input is what
   keeps a long password from running under the button; the button is not a
   .btn because a second full-width button next to "Sign in" would read as a
   second way to submit. */
.auth-pw { position: relative; }
/* block, or the line box leaves a descender's worth of space under the input
   and the button centres itself against the wrapper instead of the field. */
.auth-pw input { display: block; padding-right: 4.6rem; }
.auth-pw button { position: absolute; right: 1px; top: 1px; bottom: 1px; width: 4.4rem;
  border: 0; border-radius: 0 7px 7px 0; background: transparent; cursor: pointer;
  font: inherit; font-size: 14px; font-weight: 600; color: var(--accent); }
.auth-pw button:hover { color: var(--accent-deep); text-decoration: underline; }
.auth-pw button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.auth-form .btn { width: 100%; margin-top: 22px; }
.auth-form .swap { text-align: center; margin: 18px 0 0; font-size: 15px; color: var(--muted); }

@media (min-width: 820px) {
  .auth-form { padding: 34px; }
}

/* Nothing on the site may scroll sideways on a phone. */
html, body { overflow-x: hidden; }
img, svg, table { max-width: 100%; }

@media (max-width: 420px) {
  .wrap { padding: 0 16px; }
}

/* ---------------------------------------------------------------------------
   Home page: the story above the fold

   The tour is the hero now, not a link beside it, so the copy is centred over
   it and the frame runs the full column width.
   --------------------------------------------------------------------------- */

.hero-stack { display: grid; justify-items: center; text-align: center; gap: 16px; }
.hero-col, .hero-media { display: grid; justify-items: inherit; gap: 14px; min-width: 0; }

/* Above 1000px the headline and the tour sit side by side. Stacked, the two of
   them alone were taller than the viewport, so the strip under the hero never
   showed without a scroll. */
/* Stacked, the tour belongs straight under the lede -- it is the thing people
   came to watch, and the trial button reads better after it. The two wrappers
   that make the desktop columns drop out of the box model here so their
   children can be ordered as one list again. */
@media (max-width: 999px) {
  .hero-col, .hero-media { display: contents; }
  .hero-stack .hero-tour.wide { order: 2; }
  .hero-stack .tour-cap { order: 3; }
  /* Above the video, not below it. Measured at 375x812 with the video first,
     the trial button started at y=794 -- past the fold on a phone, so somebody
     scanning the site on a train saw no way in until they scrolled. The video
     is the proof and it is still right there; it just stops standing between
     the sentence and the button. */
  .hero-stack .ctas { order: 1; }
  .hero-stack .trust { order: 4; }
}

@media (min-width: 1000px) {
  .hero-stack { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    column-gap: 44px; align-items: center; justify-items: start; text-align: left; }
  .hero-stack h1 { max-width: 12em; }
  .hero-stack .hero-lede { font-size: 18px; }
  .hero-tour.wide { max-width: none; margin-top: 0; }
}
.hero-stack h1 { max-width: 15em; margin: 0; }
.hero-eyebrow { display: inline-block; margin: 0; padding: 7px 14px; border-radius: 999px;
  background: var(--tint); color: var(--link); font-size: 13px; font-weight: 600;
  letter-spacing: .05em; text-transform: uppercase; max-width: none; }
.hero-eyebrow.alt { background: var(--accent-2-wash); color: var(--accent-2-ink); }
/* At 375px the pill wraps to three lines -- 95px of uppercase above the
   headline, before the page has said anything. */
@media (max-width: 760px) {
  .hero-eyebrow { font-size: 11px; padding: 5px 11px; letter-spacing: .04em; }
  .hero .hero-lede { font-size: 18px; }
}
.hero .hero-lede { font-size: 20px; max-width: 42em; margin: 0; }
.hero-tour.wide { width: 100%; max-width: 900px; margin-top: 10px; }
.hero-tour .chip { position: absolute; top: 14px; right: 14px; background: var(--accent-deep);
  color: var(--white); font-size: 12px; font-weight: 600; padding: 5px 10px; border-radius: 6px; }
.hero .tour-cap { font-size: 14px; color: var(--muted-2); margin: 0; max-width: 46em; }

/* The one-line trust strip under the fold. */
.strip { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  background: var(--surface); padding: 18px 0; }
.strip .label { margin: 0; text-align: center; }

/* Two queues, one expert: sales waits, and so does marketing. */
.queues { border: 1px solid var(--line); border-radius: 12px; background: var(--white);
  overflow: hidden; margin: 0 0 28px; }
.queues-head { padding: 20px 24px; border-bottom: 1px solid var(--line); text-align: center; }
.queues-head h3 { font-size: 25px; margin: 0 0 6px; }
.queues-head p { margin: 0 auto; color: var(--muted); font-size: 16px; max-width: 54em; }
.queues-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.queue { padding: 22px 24px; }
.queue + .queue { border-left: 1px solid var(--line); }
.queue.alt { background: var(--surface); }
.queue .label { margin-bottom: 12px; }
.queue.alt .label { color: var(--accent-2-ink); }
.queue ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; }
.queue li { display: flex; justify-content: space-between; gap: 14px; font-size: 15px;
  border-bottom: 1px solid var(--line); padding-bottom: 9px; }
.queue li:last-child { border-bottom: 0; padding-bottom: 0; }
.queue li em { font-style: normal; font-size: 13px; color: var(--muted-2); white-space: nowrap; }

/* Before and after, side by side. */
.ba { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.ba .card.after { border: 2px solid var(--accent-2); }
.ba .card ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.ba .card li { color: var(--muted); font-size: 16px; }
.ba .card.after li { color: var(--body); }
.label.alt { color: var(--accent-2-ink); }

/* ---------------------------------------------------------------------------
   Home page: the marketing section

   Marketing is half the argument, so it gets the same weight as the sales
   sections: what we cut, the shelf it lands on, the webinar ladder, and the two
   versions that make a customer demo publishable.
   --------------------------------------------------------------------------- */

.mkt { display: grid; gap: 32px; align-items: start; }
@media (min-width: 900px) { .mkt { grid-template-columns: 1.3fr 1fr; } }
.mkt-lede { font-size: 18px; margin: 0 0 20px; }
.mkt-list { list-style: none; padding: 0; margin: 0 0 24px; display: grid; gap: 18px; }
.mkt-list h3 { font-size: 20px; margin: 0 0 4px; }
.mkt-list p { margin: 0; color: var(--muted); font-size: 16px; }

/* The shorts shelf. These used to be four coloured rectangles standing in for
   clips, which left the one part of the page that claims we cut vertical video
   showing no video at all. They are now three real shorts cut from our own
   walkthrough. On a phone the shelf swipes rather than stacks: three 9:16
   frames down a 375px column is most of a screen each, and a sideways shelf is
   both shorter and the gesture somebody arriving from a phone already has. */
.shelf { padding: 0; overflow: hidden; }
.shelf-head { display: flex; align-items: baseline; gap: 10px; padding: 14px 18px;
  border-bottom: 1px solid var(--line); }
.shelf-head h3 { font-size: 20px; margin: 0; }
.shelf-head span { font-size: 12px; font-weight: 600; color: var(--muted-2); }
.shelf-grid { list-style: none; margin: 0; padding: 16px; display: grid; gap: 14px;
  grid-template-columns: repeat(3, minmax(0, 1fr)); }
.shelf-grid li { border: 1px solid var(--line); border-radius: 10px; overflow: hidden;
  background: var(--accent-deep); }
.shelf-grid .clip { display: block; width: 100%; aspect-ratio: 9 / 16;
  object-fit: cover; background: var(--accent-deep); }
.shelf-grid .cap { display: block; padding: 8px 10px; font-size: 11px; font-weight: 600;
  color: var(--muted-2); background: var(--white); }
@media (max-width: 760px) {
  .shelf-grid { display: flex; gap: 10px; padding: 14px;
    overflow-x: auto; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .shelf-grid::-webkit-scrollbar { display: none; }
  /* Wide enough to read the burned-in caption, narrow enough that the next
     clip shows at the edge -- which is the only thing that tells a thumb
     there is more than one. */
  .shelf-grid li { flex: 0 0 62%; scroll-snap-align: center; }
}
.shelf-note { margin: 0; padding: 0 18px 16px; font-size: 13px; color: var(--muted-2); }

/* 45:00 to 5:00 to three 0:30s. The middle rung is the one that earns views. */
.panel.ladder, .panel.versions { max-width: none; margin: 32px 0 0; border: 1px solid var(--line);
  border-radius: 12px; background: var(--white); overflow: hidden; }
.ladder-head, .versions-head { padding: 22px 24px; border-bottom: 1px solid var(--line); }
.ladder-head h3, .versions-head h3 { font-size: 25px; margin: 0 0 6px; }
.ladder-head p, .versions-head p { margin: 0; color: var(--muted); font-size: 16px; }
.rungs { display: grid; gap: 18px; padding: 24px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
/* The three rungs are one sequence -- 45:00, then 5:00, then 0:30 x3 -- and a
   sequence stacked down a phone is three screens of scrolling to compare three
   things. Sideways they stay next to each other, which is the comparison the
   section is making, and the middle rung is the one it wants you to land on. */
@media (max-width: 760px) {
  .rungs { display: flex; gap: 12px; padding: 16px;
    overflow-x: auto; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .rungs::-webkit-scrollbar { display: none; }
  .rungs .rung { flex: 0 0 78%; scroll-snap-align: center; padding: 16px; }
}
.rung { border: 1px solid var(--line); border-radius: 12px; padding: 20px; background: var(--surface); }
.rung.pick { border: 2px solid var(--accent-2); background: var(--white); }
.rung .t { display: block; font-family: var(--font-head); font-size: 30px; color: var(--muted-2);
  line-height: 1.1; margin-bottom: 8px; }
.rung.pick .t { color: var(--accent-2-ink); }
.rung h4 { margin: 0 0 6px; font-size: 16px; font-weight: 700; color: var(--heading); }
.rung p { margin: 0 0 12px; font-size: 15px; color: var(--muted); }
.rung .where { font-size: 13px; font-weight: 600; color: var(--muted-2); }
.rung.pick .where { color: var(--accent-2-ink); }
.ladder-foot { display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center;
  padding: 20px 24px; border-top: 1px solid var(--line); background: var(--surface); }
.ladder-foot p { margin: 0; flex: 999 1 420px; font-size: 16px; }
.ladder-foot .btn { flex: 1 1 220px; text-align: center; }

.versions-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.versions-grid > div { padding: 22px 24px; }
.versions-grid > div + div { border-left: 1px solid var(--line); }
.versions-grid > div:last-child { background: var(--surface); }
.versions-grid p { margin: 0; font-size: 15px; }
.versions-grid .label { margin-bottom: 8px; }

/* The second accent carries marketing, the way it carries "watched" and
   "published" elsewhere: good news that is not the primary action. */
.btn.alt { background: var(--accent-2); border-color: var(--accent-2); }
.btn.alt:hover { background: var(--accent-2-ink); border-color: var(--accent-2-ink); }
.btn.ghost.alt { background: var(--white); color: var(--accent-2-ink); border-color: var(--line-strong); }
.btn.ghost.alt:hover { background: var(--accent-2-wash); color: var(--accent-2-ink); }
nav a.nav-alt { color: var(--accent-2-ink); font-weight: 600; }
nav a.nav-alt:hover { color: var(--accent-2); }

/* ---------------------------------------------------------------------------
   Pricing: the anchor above the plans, and the add-on beside them
   --------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
   The free audit page

   The form is the point of the page, so it sits beside the headline rather
   than under the argument, and the sample report carries the proof.
   --------------------------------------------------------------------------- */

.audit-hero { display: grid; gap: 36px; align-items: start; }
@media (min-width: 960px) { .audit-hero { grid-template-columns: 1.1fr 1fr; } }
.audit-copy h1 { margin: 14px 0 0; }
.audit-copy .hero-lede { margin: 18px 0 22px; }
.audit-copy .ticks { grid-template-columns: 1fr; gap: 12px; }
.hero .form-card { max-width: none; }
.hero .form-card h2 { font-size: 25px; margin: 0; }
.field .opt { font-weight: 400; color: var(--muted); }

.report { padding: 0; overflow: hidden; }
.report-head { padding: 18px 24px; border-bottom: 1px solid var(--line); display: flex;
  flex-wrap: wrap; gap: 8px 20px; align-items: baseline; justify-content: space-between; }
.report-head h3 { font-size: 23px; margin: 0; }
.report-head .label { display: inline; margin: 0 0 0 10px; }
.report-head .meta { margin: 0; font-size: 13px; }
.tiles { list-style: none; margin: 0; padding: 0; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); border-bottom: 1px solid var(--line); }
.tiles li { padding: 18px 24px; display: grid; gap: 4px; }
.tiles li + li { border-left: 1px solid var(--line); }
.tiles .v { font-family: var(--font-head); font-size: 30px; color: var(--heading); line-height: 1; }
.tiles .v.flag { color: #B04A3A; }
.tiles .v.good { color: var(--accent-2-ink); }
.tiles .k { font-size: 14px; color: var(--muted); }

table.inventory { border-collapse: collapse; width: 100%; min-width: 760px; background: var(--white); }
table.inventory th, table.inventory td { text-align: left; padding: 14px 24px; font-size: 15px;
  border-top: 1px solid var(--line); vertical-align: top; color: var(--muted); }
table.inventory thead th { border-top: 0; background: var(--surface); color: var(--muted);
  font-family: var(--font-body); font-size: 12px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; }
table.inventory tbody th { font-weight: 500; color: var(--body); }
table.inventory .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
table.inventory td.bad { color: #B04A3A; font-weight: 600; }
table.inventory td.do { color: var(--heading); font-weight: 600; }
table.inventory tbody tr:nth-child(even) th, table.inventory tbody tr:nth-child(even) td {
  background: var(--surface); }
.long { display: inline-block; font-size: 10px; font-weight: 700; color: #B04A3A;
  border: 1px solid #B04A3A; border-radius: 3px; padding: 0 4px; margin-right: 9px;
  vertical-align: 1px; letter-spacing: .04em; }
.report-foot { margin: 0; padding: 20px 24px; border-top: 1px solid var(--line);
  background: var(--surface); font-size: 15px; }
.report-foot strong { color: var(--heading); }

@media (max-width: 640px) {
  .queue + .queue, .versions-grid > div + div, .tiles li + li { border-left: 0; border-top: 1px solid var(--line); }
}

/* ---------------------------------------------------------------------------
   The free offer

   They replace the price cards, so they inherit the plan card's shape and lose
   its price type. Sales keeps the primary colour, marketing the second one, and
   neither is marked "most picked": they are two doors, not two tiers.
   --------------------------------------------------------------------------- */

.offers:has(> .offer:only-child) { max-width: 560px; }
.offers { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  align-items: start; }
.offer { border: 1px solid var(--line); border-top: 4px solid var(--accent); border-radius: 12px;
  padding: 28px 26px; background: var(--white); display: flex; flex-direction: column; }
.offer.alt { border-top-color: var(--accent-2); background: var(--surface); }
.offer .label { margin: 0 0 10px; }
.offer h2 { font-size: 27px; margin: 0 0 8px; }
.offer .lede { font-size: 17px; color: var(--muted); max-width: none; margin: 0 0 18px; }
.offer ul { list-style: none; padding: 0; margin: 0 0 20px; display: grid; gap: 11px; }
.offer ul li { font-size: 16px; position: relative; padding-left: 26px; }
.offer ul li::before { content: ""; position: absolute; left: 0; top: .45em; width: 14px; height: 7px;
  border-left: 3px solid var(--accent); border-bottom: 3px solid var(--accent); transform: rotate(-45deg); }
.offer.alt ul li::before { border-color: var(--accent-2); }
.offer .need { font-size: 15px; color: var(--muted); border-top: 1px solid var(--line);
  padding-top: 16px; margin: auto 0 20px; }
.offer .need strong { color: var(--heading); }
.offer .btn { align-self: flex-start; }

/* The fit note: who an offer is for, said before the button rather than in a
   reply two days later. Set quieter than the list it follows. */
.offer .fit, .audit-copy .fit { font-size: 15px; color: var(--muted); margin: 0 0 16px; }
.offer .fit strong, .audit-copy .fit strong { color: var(--heading); }

/* /pricing, first screen.

   The single offer was a 560px card in a 1080px wrap, so the whole right
   half of the screen was empty while the card ran 76px past the fold --
   somebody reading the list had to scroll to find out there was a button
   under it. The card now fills the wrap and puts the list beside the copy,
   which is where the empty half went. Measured at 1440x820: 816px to 557px.

   Scoped like .doors-page rather than rewritten into .offer, because that
   block is shaped for two cards side by side and this is the one-card case. */
.pricing-page { padding-top: 44px; }
.pricing-page .section-head { margin-bottom: 20px; }
.pricing-page .offers:has(> .offer:only-child) { max-width: none; grid-template-columns: minmax(0, 1fr); }
.pricing-page .offer:only-child {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 44px; align-items: start; }
.pricing-page .offer:only-child > * { grid-column: 1; }
.pricing-page .offer:only-child ul { grid-column: 2; grid-row: 1 / span 20; margin: 0; }
/* In the flex card align-self held the button to its own width; in a grid
   that axis is the block one, so it is justify-self that does it here. */
.pricing-page .offer:only-child .btn { justify-self: start; }
/* The flex spacer this had no longer has a column to push against. */
.pricing-page .offer:only-child .need { margin: 0 0 18px; }

/* One column again as soon as the two would be too narrow to read. */
@media (max-width: 860px) {
  .pricing-page .offer:only-child { grid-template-columns: minmax(0, 1fr); }
  .pricing-page .offer:only-child ul { grid-column: 1; grid-row: auto; margin: 0 0 20px; }
}
.audit-copy .fit { margin-top: 18px; }

/* The two doors on /sample. Side by side where there is room, stacked on a
   phone, and the same height so neither reads as the afterthought. */
.doors { display: grid; gap: 18px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 860px) { .doors { grid-template-columns: 1fr 1fr; } }
.door h2 { margin: 0 0 6px; font-size: 1.2rem; }
.door-list { list-style: none; margin: 16px 0 0; padding: 0; }
.door-list li { margin-bottom: 14px; }
.door-list .meta { display: block; margin-top: 4px; }

/* /sample runs tighter than the rest of the site.

   It is the page a reply to a cold email lands on, and the only page where
   the fold is the whole argument: somebody who has to scroll to find the
   button is somebody deciding whether to bother. Measured at 1440x820, the
   button sat at 704px with the two doors side by side, and at 916px before
   that -- below the fold on any laptop once the browser chrome is taken off.

   Scoped to this page rather than loosened globally: every other page uses
   the 72px section rhythm and none of them is making this argument. */
.doors-page { padding-top: 32px; }
.doors-page .section-head { margin-bottom: 18px; }
.doors-page .section-head p { font-size: 16px; }
.doors-page .field { margin-top: 14px; }
.doors-page .field .help { font-size: 13.5px; margin-top: 4px; }
.doors-page .form-card .btn { margin-top: 18px; }
.doors-page .form-note { font-size: 13.5px; margin-top: 10px; }

/* ---------------------------------------------------------------------------
   Width instead of height.

   Several blocks were a single narrow column -- the FAQ, the audience ticks,
   the long body copy -- which read fine but spent the right half of a desktop
   screen on nothing and pushed everything else past the fold. On a wide screen
   they run in two columns; below 820px they fall back to one, where a single
   column is the right answer anyway.
   --------------------------------------------------------------------------- */
@media (min-width: 820px) {
  .faq { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
  .faq details + details { margin-top: 0; }
  .about p, .about .lede { max-width: 72ch; }
}

/* Two stacked paragraphs of intro above a heading is the commonest reason the
   next section starts below the fold. Pull the gap in. */
.section-head p + p { margin-top: 8px; }
section > .wrap > .section-head:first-child { margin-top: 0; }