/* ============================================================
   Self-hosted type. SIL Open Font License 1.1, both families; the licences
   travel with the files in fonts/ because OFL requires it.

   Served from our own origin rather than Google's, so reading this site
   contacts nobody but us. The privacy page makes that claim and this is what
   makes it true. Latin and latin-ext only: the cyrillic, greek and vietnamese
   subsets would roughly triple the download for glyphs this site never sets.
   ============================================================ */
@font-face {
  font-family: 'Anonymous Pro';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/anonymous-pro-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Anonymous Pro';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/anonymous-pro-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/bricolage-grotesque-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/bricolage-grotesque-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============================================================
   i-ops.dev v2 — black ground, one red, two typefaces.
   Local only. Nothing here replaces the live site until Ashwinth says so.

   Type: Bricolage Grotesque Regular carries every word.
         Anonymous Pro Regular carries every number, label and marker.
   The split is the point. A figure set in mono reads as measured rather than
   written, which is the difference this company sells.
   ============================================================ */

:root {
  --ink: #ffffff;
  --ink-2: #a7a7a7;
  --ink-3: #6b6b6b;
  --ground: #000000;
  --ground-2: #0a0a0a;
  --line: #262626;
  --line-2: #3a3a3a;
  --red: #ff2d20;

  --sans: "Bricolage Grotesque", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: "Anonymous Pro", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Fluid rather than fixed. Unchanged up to roughly a 1480px window, then it
     grows with the screen and stops at 1480 so an ultrawide gets a wider grid
     instead of two enormous empty margins. Line length is capped separately on
     the text itself, so widening the page never widens a paragraph. */
  --page: clamp(1180px, 58vw + 320px, 1480px);
  --gutter: 32px;

  /* Buttons are pills; inputs take a softer radius so the two read as one
     system. The hairline grid and the panels stay square, because the
     structure is what the geometry is doing and rounding it would blur it. */
  --radius-btn: 999px;
  --radius-field: 12px;
  --tap: 46px;

  --step--1: clamp(0.82rem, 0.79rem + 0.15vw, 0.9rem);
  --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.09rem);
  --step-1: clamp(1.2rem, 1.1rem + 0.5vw, 1.45rem);
  --step-2: clamp(1.6rem, 1.35rem + 1.2vw, 2.3rem);
  /* The upper bounds sit high enough that the scale keeps climbing past a
     1378px window rather than freezing there. Nothing below that point moves. */
  --step-3: clamp(2.1rem, 1.6rem + 2.4vw, 4.15rem);
  --step-4: clamp(2.6rem, 1.8rem + 3.6vw, 5.9rem);
}

:root {
  /* Without this, every native control the page does not draw itself renders
     light on a black page: the select on the partner form, scrollbars, date
     pickers, and the browser's own autofill styling. One line, and it is the
     difference between a dark site and a dark site with white holes in it. */
  color-scheme: dark;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 400;
  font-size: var(--step-0);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}

img { max-width: 100%; }
a { color: inherit; }

::selection { background: var(--red); color: #fff; }

:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }

.wrap { width: 100%; max-width: var(--page); margin: 0 auto; padding: 0 var(--gutter); }

/* ---------- numerals ----------------------------------------------------- */
/* Everything numeric, every label, every marker. Tabular so columns line up. */
.num, .mono, .marker, .label, .stat-figure, .metric {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-weight: 400;
}

/* ---------- section scaffold --------------------------------------------- */
.section { position: relative; padding: clamp(72px, 9vw, 132px) 0; border-top: 1px solid var(--line); }
.section:first-of-type { border-top: 0; }

.section-head { position: relative; display: flex; align-items: flex-start; justify-content: space-between; gap: 32px; }

.marker { font-size: var(--step--1); color: var(--ink-3); letter-spacing: 0.04em; white-space: nowrap; padding-top: 0.6em; }

.label {
  font-size: var(--step--1);
  color: var(--ink-3);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  display: block;
  margin-bottom: 18px;
}

h1, h2, h3 { font-weight: 400; margin: 0; text-wrap: balance; letter-spacing: -0.02em; }
h1 { font-size: var(--step-4); line-height: 1.02; }
h2 { font-size: var(--step-3); line-height: 1.06; }
h3 { font-size: var(--step-1); line-height: 1.25; letter-spacing: -0.01em; }

.lede { font-size: var(--step-1); line-height: 1.45; color: var(--ink-2); max-width: 62ch; margin: 24px 0 0; }
p { margin: 16px 0 0; max-width: 68ch; }
.muted { color: var(--ink-2); }
.dim { color: var(--ink-3); }
.red { color: var(--red); }

/* ---------- nav ---------------------------------------------------------- */
.nav {
  position: sticky; top: 0; z-index: 60;
  background: rgba(0,0,0,0.82);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}
.nav.scrolled { border-bottom-color: var(--line); }
.nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 66px; }
.brand { font-size: var(--step-0); letter-spacing: -0.01em; text-decoration: none; }
.nav-links { display: flex; align-items: center; gap: 28px; }
.nav-links a { font-size: var(--step--1); color: var(--ink-2); text-decoration: none; transition: color 0.15s ease; }

/* Every other item lights red instead of white. The nav is identical on every
   page for this reason: the pattern is positional, so a page that dropped a
   link would recolour a different set and the detail would stop being a detail.
   Even positions are Governance, What it does, Partner. */
.nav-links a:hover,
.nav-links a:focus-visible { color: var(--ink); }
.nav-links a:nth-child(even):hover,
.nav-links a:nth-child(even):focus-visible { color: var(--red); }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--sans); font-size: var(--step--1);
  padding: 11px 22px; border-radius: var(--radius-btn);
  min-height: var(--tap);
  text-decoration: none; cursor: pointer; border: 1px solid var(--ink);
  background: var(--ink); color: var(--ground);
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.btn:hover { background: transparent; color: var(--ink); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn-ghost:hover { background: transparent; border-color: var(--ink); color: var(--ink); }
.btn-lg { padding: 15px 30px; font-size: var(--step-0); min-height: 54px; }

.burger { display: none; background: none; border: 0; color: var(--ink); padding: 11px; cursor: pointer; min-width: 44px; min-height: 44px; align-items: center; justify-content: center; }
.mobile-menu { display: none; }

/* ---------- hero --------------------------------------------------------- */
.hero { padding: clamp(64px, 11vw, 148px) 0 clamp(56px, 7vw, 96px); }
.hero h1 { max-width: 20ch; }
.hero .lede { margin-top: 28px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 40px; }

/* ---------- the check widget --------------------------------------------- */
.check {
  margin-top: clamp(48px, 6vw, 84px);
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--ground-2);
  overflow: hidden;
}
.check-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 18px; border-bottom: 1px solid var(--line);
  font-family: var(--mono); font-size: var(--step--1); color: var(--ink-3);
}
.check-task { color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.check-body { padding: clamp(22px, 3vw, 34px) clamp(18px, 3vw, 34px) clamp(26px, 3.5vw, 38px); min-height: 268px; }

.check-steps { display: flex; gap: 0; border-bottom: 1px solid var(--line); margin: 0 0 26px; padding: 0; list-style: none; }
.check-steps li { flex: 1; }
.check-steps button {
  width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
  font-family: var(--mono); font-size: var(--step--1); color: var(--ink-3);
  padding: 0 0 12px; border-bottom: 1px solid transparent; margin-bottom: -1px;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.check-steps button:hover { color: var(--ink-2); }
.check-steps button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--red); }

.check-panel { animation: fade 0.32s ease both; }
@keyframes fade { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .check-panel { animation: none; } }

.check-claim { font-size: var(--step-2); line-height: 1.14; letter-spacing: -0.02em; max-width: 24ch; }
.check-note { color: var(--ink-2); margin-top: 18px; max-width: 58ch; }

.ledger { list-style: none; margin: 22px 0 0; padding: 0; border-top: 1px solid var(--line); }
.ledger li {
  display: flex; align-items: baseline; gap: 16px;
  padding: 11px 0; border-bottom: 1px solid var(--line);
  font-family: var(--mono); font-size: var(--step--1);
}
.ledger .k { color: var(--ink-3); min-width: 12ch; }
.ledger .v { color: var(--ink-2); }
.ledger .v.miss { color: var(--red); }

/* ---------- two-column comparison (the deck's shape) --------------------- */
.pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); margin-top: clamp(36px, 5vw, 64px); }
.pair > div { border-top: 1px solid var(--line); padding-top: 22px; }
.pair h3 { margin-bottom: 8px; }

.stat-figure { font-size: var(--step-3); line-height: 1; color: var(--red); display: block; margin: 6px 0 10px; letter-spacing: -0.01em; }

.points { list-style: none; margin: 18px 0 0; padding: 0; }
.points li { position: relative; padding-left: 26px; margin-top: 12px; color: var(--ink-2); max-width: 56ch; }
.points li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 10px; height: 1px; background: var(--line-2); }

/* ---------- numbered rows (how it works) --------------------------------- */
.rows { margin-top: clamp(32px, 4vw, 56px); border-top: 1px solid var(--line); }
.row {
  display: grid; grid-template-columns: 5ch 1fr 1.15fr; gap: clamp(18px, 3vw, 48px);
  padding: clamp(22px, 3vw, 34px) 0; border-bottom: 1px solid var(--line);
  align-items: start;
}
.row .n { font-family: var(--mono); font-size: var(--step--1); color: var(--ink-3); padding-top: 0.42em; }
.row p { margin: 0; color: var(--ink-2); }

/* ---------- feature grid ------------------------------------------------- */
.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); margin-top: clamp(32px, 4vw, 56px); }
.cell { background: var(--ground); padding: clamp(24px, 3vw, 36px); }
.cell .label { margin-bottom: 14px; }
.cell p { margin-top: 10px; color: var(--ink-2); font-size: var(--step--1); line-height: 1.6; }

/* ---------- forms -------------------------------------------------------- */
.field { display: block; margin-top: 20px; }
.field > span { display: block; font-family: var(--mono); font-size: var(--step--1); color: var(--ink-3); margin-bottom: 8px; }
.field input, .field textarea, .field select {
  width: 100%; background: var(--ground-2); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius-field);
  font-family: var(--sans); font-size: var(--step-0); padding: 13px 15px;
  min-height: var(--tap);
}
.field textarea { min-height: 108px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--ink-2); }

/* Chrome paints autofilled fields with its own background and ignores the one
   we set, so a filled form goes pale blue on a black page. The inset shadow is
   the only reliable way to cover it. */
.field input:-webkit-autofill,
.field input:-webkit-autofill:hover,
.field input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--ink);
  -webkit-box-shadow: 0 0 0 1000px var(--ground-2) inset;
  box-shadow: 0 0 0 1000px var(--ground-2) inset;
  caret-color: var(--ink);
}

/* Safari renders a select's own arrow in its own colours. Ours, drawn as a
   background, keeps the control looking like the inputs beside it. */
.field select {
  -webkit-appearance: none; appearance: none;
  padding-right: 42px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23a7a7a7' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='m1 1.5 5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 12px 8px;
}
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Notice at collection. Sits under the submit button because that is where the
   information is actually handed over, which is more use to a reader than a
   banner on a page that sets no cookies. */
.collect-note {
  margin-top: 18px; max-width: 56ch;
  color: var(--ink-3); font-size: var(--step--1); line-height: 1.55;
}
.collect-note a { color: var(--ink-2); }
.collect-note a:hover { color: var(--ink); }

.form-status { font-family: var(--mono); font-size: var(--step--1); margin-top: 18px; color: var(--ink-2); }

/* Shown only when the visitor is not on a Mac. It is a statement of fact about
   the file, not a warning, so it is bordered rather than coloured. */
.platform-notice {
  margin: 0 0 26px; padding: 14px 16px; max-width: 56ch;
  border: 1px solid var(--line-2); border-left: 2px solid var(--red);
  border-radius: 10px; color: var(--ink-2); font-size: var(--step--1);
}
.form-status.is-error { color: var(--red); }
.form-status.is-success { color: var(--ink); }

/* ---------- the block field ---------------------------------------------
   Sits beside the early access form. Sticky on desktop so it stays with the
   reader down a long form; a short banner above the form on a phone, where a
   tall decorative panel would just push the fields off the screen.
   ---------------------------------------------------------------------- */
/* `is-single` collapses the two-column early access layout while the block
   field is halted, so the form is not stranded in a narrow left column with
   an empty gap beside it. */
.access-grid.is-single { display: block; }
.access-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.78fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.field-panel { position: sticky; top: 100px; }
.field-canvas {
  width: 100%; height: min(560px, 62vh);
  border: 1px solid var(--line); border-radius: 16px;
  background: var(--ground-2); overflow: hidden;
  touch-action: pan-y;            /* the page still scrolls over it on a phone */
}
.field-canvas canvas { display: block; }

/* ---------- legal page ---------------------------------------------------
   These lived inline in the old privacy and terms pages. Those are redirects
   now, so the rules live here or nowhere.
   ---------------------------------------------------------------------- */
.legal { max-width: 74ch; margin-top: 8px; }
.legal h3 {
  font-size: var(--step-1); margin-top: 44px; color: var(--ink);
}
.legal h3::before {
  content: ""; display: block; width: 28px; height: 1px;
  background: var(--line-2); margin-bottom: 16px;
}
.legal h3:first-of-type { margin-top: 34px; }
.legal p { color: var(--ink-2); margin-top: 14px; }
.legal ul { margin: 14px 0 0; padding-left: 20px; color: var(--ink-2); }
.legal li { margin-top: 9px; }
.legal a { color: var(--ink); }
.legal strong { color: var(--ink); font-weight: 400; box-shadow: inset 0 -1px 0 var(--line-2); }
.legal .lede { color: var(--ink-2); }

.toc { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 34px; }
.toc a {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 11px 18px; min-height: 44px;
  border: 1px solid var(--line); border-radius: 999px;
  color: var(--ink-2); text-decoration: none; font-size: var(--step--1);
  transition: color 0.15s ease, border-color 0.15s ease;
}
.toc a:hover { color: var(--ink); border-color: var(--line-2); }
.toc .mono { color: var(--ink-3); }

/* ---------- footer ------------------------------------------------------- */
.footer { border-top: 1px solid var(--line); padding: 56px 0 72px; }
.footer-inner { display: flex; flex-wrap: wrap; gap: 32px; justify-content: space-between; }
.footer a { color: var(--ink-3); text-decoration: none; font-size: var(--step--1); }
.footer a:hover { color: var(--ink); }
.footer-links { display: flex; flex-wrap: wrap; gap: 22px; }

/* GitHub, LinkedIn and mail. The mail mark is an envelope rather than Gmail's
   own logo, because that logo is Google's and we do not get to wear it. */
.social { display: flex; gap: 8px; margin-top: 18px; }
.social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; margin-left: -11px;
  border-radius: 999px; color: var(--ink-3);
  transition: color 0.15s ease, background 0.15s ease;
}
.social a:first-child { margin-left: -11px; }
.social a:hover { color: var(--ink); background: var(--ground-2); }

/* ---------- reveal ------------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* ---------- responsive --------------------------------------------------- */
/* Tablet and small laptop. Three columns get cramped before they get narrow,
   so the grid steps 3 -> 2 -> 1 rather than falling straight to one column and
   leaving half a tablet empty. */
@media (max-width: 1000px) {
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  .row { grid-template-columns: 4ch minmax(0, 1fr); }
  .row p { grid-column: 2; }
  .marker { display: none; }
}

/* ---------- phone -------------------------------------------------------
   Most of the traffic is here. Everything below was measured at 375px wide
   rather than guessed: no rule in this block exists because it sounded right.
   ---------------------------------------------------------------------- */
@media (max-width: 720px) {
  .pair { grid-template-columns: 1fr; }
  .grid { grid-template-columns: 1fr; }

  :root {
    --gutter: 20px;
    /* The desktop clamp floors at 2.6rem, which sets a 42px headline in a
       311px column and spends the whole first screen on four lines of title.
       The phone gets its own ceiling. */
    --step-4: clamp(2rem, 1.5rem + 3.4vw, 2.45rem);
    --step-3: clamp(1.72rem, 1.3rem + 2.4vw, 2.1rem);
    --step-2: clamp(1.38rem, 1.15rem + 1.4vw, 1.7rem);
    --step-1: clamp(1.08rem, 1rem + 0.5vw, 1.2rem);
  }

  /* brand left, then the call to action and the burger together on the right.
     With .nav-links hidden, space-between strands the button mid-bar. */
  .nav-links { display: none; }
  .nav-inner > .btn { margin-left: auto; padding: 9px 16px; min-height: 44px; }
  .burger { display: inline-flex; margin-left: 2px; }
  .brand { padding: 10px 0; }

  body.menu-open { overflow: hidden; }
  body.menu-open .mobile-menu { display: block; }
  .mobile-menu { position: fixed; inset: 66px 0 0; background: var(--ground); z-index: 55; padding: 12px var(--gutter) 32px; border-top: 1px solid var(--line); overflow-y: auto; }
  .mobile-menu a { display: block; padding: 18px 0; text-decoration: none; border-bottom: 1px solid var(--line); font-size: var(--step-1); transition: color 0.15s ease; }
  .mobile-menu a:hover, .mobile-menu a:focus-visible { color: var(--ink); }
  .mobile-menu a:nth-child(even):hover,
  .mobile-menu a:nth-child(even):focus-visible { color: var(--red); }

  /* Two buttons of different widths stacked left read as a mistake. */
  .hero-actions { flex-direction: column; align-items: stretch; gap: 12px; margin-top: 32px; }
  .hero-actions .btn { width: 100%; }
  .hero { padding-top: 44px; }
  .hero .lede, .lede { font-size: var(--step-0); margin-top: 20px; }

  /* Tabs become rows, and each row is a 48px target. */
  .check-steps { flex-direction: column; border-bottom: 0; margin-bottom: 20px; }
  .check-steps button { padding: 14px 0; min-height: 48px; border-bottom: 1px solid var(--line); margin-bottom: 0; }
  .check-steps button[aria-selected="true"] { border-bottom-color: var(--red); }
  .check-body { padding: 20px 18px 26px; min-height: 0; }
  /* Stacked, and the task wraps. It was one nowrap line with an ellipsis, so a
     phone showed "summarise the Q3 renewal position for e\2026" and the reader
     never learned what the task actually was, which is the whole setup for the
     three panels underneath it. */
  .check-bar { flex-direction: column; align-items: flex-start; gap: 6px; padding: 13px 16px; }
  .check-task {
    font-size: 0.8rem; line-height: 1.5;
    white-space: normal; overflow: visible; text-overflow: clip;
  }

  /* A 12ch label column against a 375px screen leaves the value no room. */
  .ledger .k { min-width: 9.5ch; }
  .ledger li { gap: 10px; font-size: 0.86rem; padding: 12px 0; }

  .section { padding: 56px 0; }
  .pair { gap: 32px; margin-top: 30px; }
  .points li { margin-top: 10px; }

  /* Footer links were 20px tall. Thumbs are not 20px. */
  .footer { padding: 44px 0 56px; }
  .footer-inner { gap: 24px; }
  .footer-links { flex-direction: column; gap: 0; width: 100%; }
  .footer-links a { display: block; padding: 13px 0; border-bottom: 1px solid var(--line); }

  .field { margin-top: 16px; }
  form .btn { width: 100%; }

  /* One column, and the field goes ABOVE the form as a short banner. A 560px
     decorative panel between the heading and the first input would cost the
     reader a whole screen of scrolling to reach the thing they came for. */
  .access-grid { grid-template-columns: 1fr; gap: 28px; }
  .field-panel { position: static; order: -1; }
  .field-canvas { height: 150px; border-radius: 14px; }
}

@media (max-width: 380px) {
  /* iPhone SE and the narrow end of Android. */
  :root { --gutter: 16px; }
  .nav-inner > .btn { padding: 9px 13px; font-size: 0.78rem; }
}