/* Quay Seven — quayseven.com
   Copyright © 2026 Quay Seven (Pty) Ltd. All rights reserved.
   Every design value is a custom property in :root below. Change the look there. */

:root {
  /* Colour */
  --color-page: #FCFBF9;
  --color-ink: #121110;            /* headings, links, button borders, focus rings */
  --color-text: #45413C;           /* body text and the examples' notes */
  --color-small: #55514B;          /* footer and company line */
  --color-placeholder: #6F6A62;
  --color-field: #FFFFFF;
  --color-field-border: #858077;
  --color-rule: #DEDBD3;
  --color-accent: #C8372D;         /* headings' full stops and the examples' markers */
  --color-on-accent: #FFFFFF;
  --color-toggle-off: #6F6A63;
  --color-toggle-sep: #B5B0A8;
  --color-frame: #FFFFFF;
  --frame-edge: 0 0 0 1px rgba(18, 17, 16, .12);   /* the hairline round each example */

  /* Fonts */
  --font-serif: 'Fraunces', Georgia, serif;
  --font-sans: 'Geist', 'Helvetica Neue', Arial, sans-serif;

  /* Fraunces settings: its soft, "wonky" shapes switched off everywhere */
  --fraunces-axes: 'SOFT' 0, 'WONK' 0;   /* the font files are fixed at these values (03/11/2026); to change them, rebuild the files with the full axes */
  --fraunces-hero-opsz: 72;
  --fraunces-note-opsz: 36;

  /* Weights */
  --weight-heading: 350;           /* hero and section headings */
  --weight-wordmark: 500;
  --weight-wordmark-stop: 600;     /* the wordmark’s red full stop, set larger than the headings’ on purpose */
  --weight-title: 400;             /* list and step titles */
  --weight-note: 300;
  --weight-marker: 500;            /* note numbers and marker digits */
  --weight-medium: 500;            /* buttons, labels, toggle */

  /* Type scale */
  --text-hero: clamp(48px, 7.4vw, 96px);
  --text-h2: clamp(36px, 4.2vw, 52px);
  --text-wordmark: 26px;
  --text-wordmark-stop: 1.2em;
  --text-title: 25px;
  --text-lead: 19px;               /* hero and section paragraphs */
  --text-body: 17px;               /* list and step text, notes, the form (questions, fields, Send), hero button */
  --text-small: 15px;              /* menu and menu button, toggle, field errors, company line, footer */

  --leading-hero: 1.02;
  --leading-h2: 1.05;
  --leading-title: 1.2;
  --leading-note: 1.35;
  --leading-field: 1.5;
  --leading-body: 1.55;
  --leading-lead: 1.6;

  --tracking-hero: -0.025em;
  --tracking-h2: -0.02em;
  --tracking-wordmark: -0.01em;

  --measure: 34em;                 /* paragraphs and the form */
  --measure-hero-heading: 11em;
  --measure-questions: 20em;
  --measure-company: 40em;
  --measure-form: 544px;

  /* Spacing */
  --page-max: 1200px;
  --page-gutter: 40px;
  --header-height: 92px;
  --header-gap: 24px;
  --nav-gap: 32px;
  --hero-top: 120px;               /* header to hero headline, on every screen */
  --hero-copy-top: 40px;
  --hero-copy-gap: 14px;
  --hero-action-top: 44px;
  --example-top: 112px;            /* copy to its example: closer than the next section, so they read as a pair */
  --section-top: 160px;            /* example to the next section */
  --columns-gap: 80px;
  --columns-row-gap: 32px;
  --paragraph-gap: 16px;
  --list-top: 48px;
  --list-gap: 36px 48px;
  --item-gap: 6px;
  --step-number: 40px;
  --step-number-gap: 8px;
  --steps-gap: 36px;
  --form-top: 48px;
  --form-gap: 28px;
  --form-pair-gap: 28px 24px;
  --field-label-gap: 8px;
  --company-top: 160px;
  --doc-section-gap: 48px;         /* text pages: before each subheading */
  --anchor-gap: 64px;              /* window top to a heading reached by a link */
  --company-padding: 40px;
  --footer-padding: 40px 0 64px;
  --footer-gap: 16px 40px;
  --dot-gap: 7px;                  /* either side of every middle dot */

  /* Examples */
  --notes-column: 232px;
  --notes-gap: 40px;
  --note-width: 216px;
  --toggle-bottom: 8px;
  --example-d-max: 912px;
  --example-d-frame: 640px;

  /* The headline's edit (sizes in em scale with the headline; times in ms, read by site.js) */
  --caret-width: .3em;
  --caret-drop: .06em;             /* apex below the baseline */
  --caret-stroke: 3.5;             /* in hundredths of an em */
  --hero-edit-hold: 700;           /* page load to the caret */
  --hero-edit-draw: 260;           /* the caret's stroke */
  --hero-edit-open: 520;           /* "need" moves aside */
  --hero-edit-in: 420;             /* "may not" comes in */
  --hero-edit-red: 700;            /* "may not" stays red this long */
  --hero-edit-settle: 700;         /* red to near-black */
  --hero-edit-stop: 400;           /* the full stop, near-black to red, as "may not" settles */
  --hero-edit-ease: cubic-bezier(.65, 0, .35, 1);

  /* Radii */
  --radius-frame: 3px;
  --radius-control: 4px;           /* buttons and form fields */

  /* Buttons */
  --button-height: 50px;           /* the hero's button, the size of the form's Send (04/11/2026) */
  --button-padding: 22px;
  --button-sm-height: 40px;
  --button-sm-padding: 16px;
  --button-form-padding: 22px;
  --field-height: 50px;
  --field-padding: 12px 14px;
}

@font-face {
  font-family: 'Fraunces';
  src: url('../fonts/fraunces.woff2') format('woff2');
  font-weight: 300 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Fraunces';
  src: url('../fonts/fraunces-italic.woff2') format('woff2');
  font-weight: 300 600;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Geist';
  src: url('../fonts/geist.woff2') format('woff2');
  font-weight: 300 600;
  font-style: normal;
  font-display: swap;
}

/* ---------- Base ---------- */

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

body {
  margin: 0;
  min-height: 100vh;
  background: var(--color-page);
  color: var(--color-ink);
  font-family: var(--font-sans);
}
a { color: var(--color-ink); }
a:hover { color: var(--color-text); }
a:focus-visible { outline: 2px solid var(--color-ink); outline-offset: 2px; border-radius: var(--radius-control); }

.serif {
  font-family: var(--font-serif);
  font-variation-settings: var(--fraunces-axes);
}
.stop { color: var(--color-accent); }

.text-link {
  color: var(--color-ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

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

/* ---------- Button ---------- */

.cta-btn {
  display: inline-flex;
  align-items: center;
  min-height: var(--button-height);
  padding: 0 var(--button-padding);
  border: 1px solid var(--color-ink);
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--color-ink);
  font: inherit;
  font-size: var(--text-body);
  font-weight: var(--weight-medium);
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.cta-btn:hover,
.cta-btn:focus-visible { background: var(--color-ink); color: var(--color-page); }
.cta-btn:focus-visible { outline: 2px solid var(--color-ink); outline-offset: 3px; }
.cta-btn.cta-sm { min-height: var(--button-sm-height); padding: 0 var(--button-sm-padding); font-size: var(--text-small); }
.cta-btn.cta-form { min-height: var(--field-height); padding: 0 var(--button-form-padding); font-size: var(--text-body); }

/* ---------- Header ---------- */

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--header-gap);
  height: var(--header-height);
}
.wordmark {
  color: var(--color-ink);
  text-decoration: none;
  font-size: var(--text-wordmark);
  font-weight: var(--weight-wordmark);
  letter-spacing: var(--tracking-wordmark);
}
.wordmark .stop {
  font-size: var(--text-wordmark-stop);
  font-weight: var(--weight-wordmark-stop);
  line-height: 0;                  /* keeps the header line as it was */
}
.site-nav {
  display: flex;
  align-items: center;
  gap: var(--nav-gap);
  font-size: var(--text-small);
}
.site-nav-links { display: flex; gap: var(--nav-gap); }
.site-nav-links a { color: var(--color-ink); text-decoration: none; }

/* ---------- Hero ---------- */

.hero {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--hero-top) 0 0;
}
.hero h1 {
  margin: 0;
  max-width: var(--measure-hero-heading);
  font-size: var(--text-hero);
  font-weight: var(--weight-heading);
  line-height: var(--leading-hero);
  letter-spacing: var(--tracking-hero);
  text-wrap: balance;
  font-variation-settings: var(--fraunces-axes), 'opsz' var(--fraunces-hero-opsz);
  position: relative;
}

/* The headline's edit: the page opens on "You need a new website.", a red caret marks the gap,
   "need" moves aside and "may not" comes in, red, then settles to near-black. Nothing reflows:
   "may not" keeps its place in the line while hidden, and "need" is drawn back over it. */
.hero-ins, .hero-need { display: inline-block; }
.hero-br { display: none; }             /* the headline's line breaks on phones */
.hero-caret {
  display: inline-block;
  position: relative;
  width: 0;
  height: 0;
  vertical-align: baseline;
}
.hero-caret svg {
  display: none;
  position: absolute;
  left: calc(var(--caret-x, .12em) - var(--caret-width) / 2);
  top: var(--caret-drop);
  width: var(--caret-width);
  height: calc(var(--caret-width) * 2 / 3);
  overflow: visible;
}
.hero-caret path {
  fill: none;
  stroke: var(--color-accent);
  stroke-width: var(--caret-stroke);
  stroke-linejoin: miter;
  stroke-linecap: butt;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.hero-edit .hero-caret svg { display: block; }
.hero-edit .hero-ins { opacity: 0; color: var(--color-accent); }
.hero-edit .hero h1 .stop { color: var(--color-ink); }
/* Until site.js measures it: the width of "may not " in the hero's Fraunces, measured at 96px */
.hero-edit .hero-need { transform: translateX(-3.406em); }

.hero-copy {
  display: flex;
  flex-direction: column;
  gap: var(--hero-copy-gap);
  max-width: var(--measure);
  margin-top: var(--hero-copy-top);
}
.hero-action { display: flex; margin-top: var(--hero-action-top); }

.lead {
  font-size: var(--text-lead);
  line-height: var(--leading-lead);
  color: var(--color-text);
}
.lead p { margin: 0; text-wrap: pretty; }

/* ---------- Copy sections: heading left, text right ---------- */

.columns {
  display: flex;
  flex-wrap: wrap;
  gap: var(--columns-row-gap) var(--columns-gap);
  padding: var(--section-top) 0 0;
}
.columns h2 { flex: 1 1 320px; }
.columns-body { flex: 1 1 560px; min-width: 0; }
.columns-body .lead {
  display: flex;
  flex-direction: column;
  gap: var(--paragraph-gap);
  max-width: var(--measure);
}

h2.serif {
  margin: 0;
  font-size: var(--text-h2);
  font-weight: var(--weight-heading);
  line-height: var(--leading-h2);
  letter-spacing: var(--tracking-h2);
}

.aspects {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
  gap: var(--list-gap);
  margin: var(--list-top) 0 0;
  padding: 0;
  list-style: none;
}
.aspects li { display: flex; flex-direction: column; gap: var(--item-gap); }

.title {
  font-size: var(--text-title);
  font-weight: var(--weight-title);
  line-height: var(--leading-title);
}
.small-text {
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--color-text);
  text-wrap: pretty;               /* no single word alone on a last line */
}
.nowrap { white-space: nowrap; }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }  /* read by screen readers only */

/* ---------- Examples ---------- */

.example { margin: var(--example-top) 0 0; }
/* D sits right, so its frame ends where B's does and its notes share B's column */
.example-d { max-width: var(--example-d-max); margin: var(--example-top) 0 0 auto; }

.toggle { display: flex; align-items: center; width: fit-content; margin: 0 0 var(--toggle-bottom) 0; }
.example-notes-left .toggle { margin-left: calc(var(--notes-column) + var(--notes-gap)); }
.toggle-btn {
  min-height: 44px;
  margin: 0;
  padding: 0 7px;
  border: 0;
  background: none;
  color: var(--color-toggle-off);
  font-family: inherit;
  font-size: var(--text-small);
  font-weight: var(--weight-medium);
  line-height: 1;
  cursor: pointer;
}
.toggle-btn:first-child { padding-left: 0; }
.toggle-btn[aria-pressed="true"] { color: var(--color-ink); cursor: default; }
.toggle-btn[aria-pressed="false"]:hover {
  color: var(--color-ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.toggle-btn:focus-visible { outline: 2px solid var(--color-ink); outline-offset: 2px; border-radius: var(--radius-control); }
.toggle-sep { color: var(--color-toggle-sep); font-size: var(--text-small); line-height: 1; }

.example-grid {
  position: relative;
  display: grid;
  column-gap: var(--notes-gap);
}
.example-notes-left .example-grid { grid-template-columns: var(--notes-column) minmax(0, 1fr); }
.example-notes-right .example-grid { grid-template-columns: minmax(0, 1fr) var(--notes-column); }
.example-d .example-grid { grid-template-columns: minmax(0, var(--example-d-frame)) var(--notes-column); }

.example-frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-frame);
  background: var(--color-frame);
  box-shadow: var(--frame-edge);
}
/* The example page, drawn at 980px wide and scaled to the frame by site.js */
.example-page {
  position: relative;
  width: 980px;
  transform-origin: 0 0;
  pointer-events: none;
}
.example-page iframe {
  display: block;
  width: 980px;
  height: 100%;
  border: 0;
}
.markers {
  position: absolute;
  inset: 0;
  z-index: 5;
  overflow: visible;
  pointer-events: none;
}
.markers circle { fill: var(--color-accent); }
.markers text {
  fill: var(--color-on-accent);
  text-anchor: middle;
  font-family: var(--font-serif);
  font-weight: var(--weight-marker);
  font-variation-settings: var(--fraunces-axes);
}

.markers-phone { display: none; }      /* the phone layout's markers */
.pin { opacity: 0; transform: scale(.85); transition: opacity .2s ease, transform .25s cubic-bezier(.2, .7, .3, 1); }
.pin.on { opacity: 1; transform: none; }

.notes { position: absolute; inset: 0; pointer-events: none; }
.note {
  position: absolute;
  width: var(--note-width);
  margin: 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--text-body);
  font-weight: var(--weight-note);
  font-variation-settings: var(--fraunces-axes), 'opsz' var(--fraunces-note-opsz);
  line-height: var(--leading-note);
  color: var(--color-text);
  text-wrap: balance;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity .35s ease, transform .35s ease;
}
.note.on { opacity: 1; transform: none; transition-delay: .25s; }
.note[hidden] { display: none; }
.note-num { position: absolute; right: 100%; margin-right: .3em; font-style: normal; font-weight: var(--weight-marker); color: var(--color-accent); }  /* hangs outside, so every line starts on one edge */
.example-notes-left .note { left: 0; }
.example-notes-right .note { left: calc(100% - var(--note-width)); }

/* Toggling after the first play: straight to the end state; the browser crossfades */
.instant .pin, .note.instant { transition: none !important; animation: none !important; }
::view-transition-old(root),
::view-transition-new(root) { animation-duration: .15s; }

/* ---------- How it works ---------- */

.hiw {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 8fr);
  grid-template-rows: auto auto auto auto;
  column-gap: var(--columns-gap);
  row-gap: var(--steps-gap);
  padding: var(--section-top) 0 0;
  /* Links to the section land with its heading this far from the top of the window, not its top spacing */
  scroll-margin-top: calc(var(--anchor-gap) - var(--section-top));
}
.hiw h2 { grid-column: 1; grid-row: 1; align-self: start; }
.hiw-steps {
  grid-column: 2;
  grid-row: 1 / span 3;
  display: grid;
  grid-template-rows: subgrid;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* The numbers hang outside the column, so the titles start on its edge */
.hiw-steps li {
  margin-left: calc(-1 * (var(--step-number) + var(--step-number-gap)));
  display: grid;
  grid-template-columns: var(--step-number) minmax(0, 1fr);
  column-gap: var(--step-number-gap);
  row-gap: var(--item-gap);
}
.hiw-steps .step-num { color: var(--color-text); }
.hiw-steps .small-text { grid-column: 2; }

/* The Questions line, on step 3's row; it spans into the form's row so its length doesn't push the form down */
.questions {
  grid-column: 1;
  grid-row: 3 / span 2;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: var(--item-gap);
  max-width: var(--measure-questions);
}
.questions p { margin: 0; }
.questions .small-text { text-wrap: pretty; }

.hiw-form {
  grid-column: 2;
  grid-row: 4;
  padding-top: var(--form-top);
  border-top: 1px solid var(--color-rule);
}

/* ---------- Form ---------- */

.enquiry { display: flex; flex-direction: column; gap: var(--form-gap); max-width: var(--measure-form); margin: 0; }
.enquiry[hidden] { display: none; }
.form-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--form-pair-gap); }
.form-field { display: flex; flex-direction: column; gap: var(--field-label-gap); }
.form-field label { font-size: var(--text-body); }   /* the questions at the size of what's typed (04/11/2026) */
.field {
  box-sizing: border-box;
  width: 100%;
  min-height: var(--field-height);
  padding: var(--field-padding);
  border: 1px solid var(--color-field-border);
  border-radius: var(--radius-control);
  background: var(--color-field);
  color: var(--color-ink);
  font: inherit;
  font-size: var(--text-body);
}
/* The text boxes grow with what's typed (where supported) instead of showing the browser's resize grip;
   elsewhere they scroll. Their resting height is four and three lines, as before. */
textarea.field { line-height: var(--leading-field); resize: none; field-sizing: content; }
.field-matters { min-height: calc(4lh + 26px); }
.field-look { min-height: calc(3lh + 26px); }
.field::placeholder { color: var(--color-placeholder); opacity: 1; }
/* Focus: the field's own border turns near-black and 2px thick (no separate ring) */
.field:focus { outline: none; border-color: var(--color-ink); box-shadow: inset 0 0 0 1px var(--color-ink); }
.field[aria-invalid="true"] { border-color: var(--color-accent); }
.field[aria-invalid="true"]:focus { box-shadow: inset 0 0 0 1px var(--color-accent); }
.field-error, .form-failed { margin: 0; font-size: var(--text-small); color: var(--color-accent); }
.form-failed { font-size: var(--text-body); line-height: var(--leading-body); }  /* a full sentence, so the form's own size */
/* The honeypot: off-screen, out of the tab order and hidden from screen readers */
.form-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-send { display: flex; margin-top: 4px; }
.cta-btn[aria-disabled="true"] { opacity: .5; cursor: progress; }
.form-sent:focus { outline: none; }
.form-sent {
  margin: 0;
  font-size: var(--text-lead);
  line-height: var(--leading-lead);
  color: var(--color-ink);
  text-wrap: pretty;
}

/* ---------- Text pages (privacy, PAIA, legal): heading left, text right, as the homepage's sections ---------- */

.doc { padding-top: var(--hero-top); }
.doc h1 {
  flex: 1 1 320px;
  margin: 0;
  font-size: var(--text-h2);
  font-weight: var(--weight-heading);
  line-height: var(--leading-h2);
  letter-spacing: var(--tracking-h2);
}
.doc-body {
  max-width: var(--measure);
  min-width: 0;
  overflow-wrap: break-word;       /* a long address breaks rather than pushing the page wider than the screen */
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--color-text);
}
.doc-body h2 {
  margin: var(--doc-section-gap) 0 var(--paragraph-gap);
  font-size: var(--text-title);
  font-weight: var(--weight-title);
  line-height: var(--leading-title);
  letter-spacing: normal;
  color: var(--color-ink);
}
.doc-body > :first-child { margin-top: 0; }
.doc-body p { margin: 0 0 var(--paragraph-gap); text-wrap: pretty; }
.doc-body ul { margin: 0 0 var(--paragraph-gap); padding-left: 1.2em; }
.doc-body li + li { margin-top: var(--item-gap); }
.doc-body .doc-details { padding-left: 0; list-style: none; }
.doc-label { color: var(--color-ink); font-weight: var(--weight-medium); }
.qa { border-top: 1px solid var(--color-rule); }
.qa:last-child { border-bottom: 1px solid var(--color-rule); }
.qa[id] { scroll-margin-top: 0; }  /* a question reached by a link lands at the very top of the window, with nothing above it */
.qa summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 20px 0;
  list-style: none;
  cursor: pointer;
}
.qa summary::-webkit-details-marker { display: none; }
.doc-body .qa h2 { margin: 0; }
.qa summary:hover h2 { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.qa summary:focus-visible { outline: 2px solid var(--color-ink); outline-offset: 2px; border-radius: var(--radius-control); }
.qa summary::after {               /* a thin plus that becomes a minus when the answer is open */
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  background:
    linear-gradient(var(--color-ink), var(--color-ink)) center / 14px 1.5px no-repeat,
    linear-gradient(var(--color-ink), var(--color-ink)) center / 1.5px 14px no-repeat;
}
.qa[open] summary::after { background: linear-gradient(var(--color-ink), var(--color-ink)) center / 14px 1.5px no-repeat; }
.qa-answer { padding: 0 38px 24px 0; }
.qa-answer > :last-child { margin-bottom: 0; }
@media (prefers-reduced-motion: no-preference) {
  .qa[open] .qa-answer { animation: qa-open .2s ease; }
}
@keyframes qa-open { from { opacity: 0; } }
.site-footer a[aria-current="page"] { color: var(--color-small); }

/* ---------- Company line and footer ---------- */

.company {
  margin-top: var(--company-top);
  padding-top: var(--company-padding);
  border-top: 1px solid var(--color-rule);
}
.company p {
  max-width: var(--measure-company);
  margin: 0;
  font-size: var(--text-small);
  line-height: var(--leading-lead);
  color: var(--color-small);
  text-wrap: balance;
}
.site-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--footer-gap);
  padding: var(--footer-padding);
  font-size: var(--text-small);
  line-height: var(--leading-lead);
  color: var(--color-small);
}
.site-footer a { color: var(--color-ink); text-decoration: none; }
.footer-info { display: flex; flex-direction: column; gap: 4px; }
.footer-line { display: flex; flex-wrap: wrap; gap: 0 var(--dot-gap); }
.footer-nav { display: flex; flex-wrap: wrap; gap: 4px var(--dot-gap); }

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .cta-btn, .pin, .note { transition: none !important; animation: none !important; }
}

/* ---------- Narrow screens (phones refine these below) ---------- */

@media (max-width: 860px) {
  .form-pair { grid-template-columns: minmax(0, 1fr); }
  .hiw { grid-template-columns: minmax(0, 1fr); row-gap: 32px; }
  .hiw > * { grid-column: auto !important; grid-row: auto !important; }
  .hiw-steps { display: flex; flex-direction: column; gap: 36px; }
  .hiw-steps li { margin-left: 0; }
  .hiw-form { margin-top: 8px; }
  .site-nav-links { display: none; }
  .example .example-grid { grid-template-columns: minmax(0, 1fr); }
  .example-spacer { display: none; }
  .notes { position: static; display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
  .example .note { position: relative; left: auto; width: auto; }
  .example .toggle { margin-left: 0; }
}

/* ---------- Phones (up to 600px; tablets and narrow windows use the rules above) ---------- */

@media (max-width: 600px) {
  :root {
    --page-gutter: 24px;
    --header-height: 76px;
    --text-hero: clamp(44px, 14.5vw, 60px);
    --text-lead: 18px;
    --hero-top: 64px;
    --hero-copy-top: 28px;
    --hero-action-top: 32px;
    --example-top: 56px;
    --section-top: 72px;
    --columns-row-gap: 24px;
    --list-top: 36px;
    --list-gap: 28px;
    --steps-gap: 28px;
    --form-top: 32px;
    --form-gap: 24px;
    --form-pair-gap: 24px;
    --button-height: 48px;           /* the hero's button */
    --field-height: 48px;            /* the form's fields */
    --company-top: 96px;
    --company-padding: 24px;
    --footer-padding: 24px 0 48px;
    --anchor-gap: 32px;
    --doc-section-gap: 40px;
  }

  /* Header: the wordmark and the button each on one line */
  .wordmark, .site-nav .cta-btn { white-space: nowrap; }
  .cta-btn.cta-sm { padding: 0 12px; }

  /* Headline: "You may not / need a new / website." The edit plays in these lines: "need" stays put,
     the caret marks the space after "You" and "may not" comes in there. */
  .hero h1 { max-width: none; text-wrap: wrap; }
  .hero-br { display: inline; }
  .hero-edit .hero-need { transform: none; }

  /* How it works: each number beside its title, the text beneath on the same left edge */
  .hiw { row-gap: var(--steps-gap); }
  .hiw-steps { gap: var(--steps-gap); }
  .hiw-steps li { grid-template-columns: auto minmax(0, 1fr); column-gap: .3em; }
  .hiw-steps .small-text { grid-column: 1 / -1; }
  .hiw-form { margin-top: 0; }
  /* "Any questions?" after the form, so step 3 leads straight into it, as on desktop where it sits beside step 3 */
  .questions { order: 1; margin-top: 16px; }

  /* Examples: the example page's phone layout, its own markers, and the notes listed beneath the frame */
  .markers:not(.markers-phone) { display: none; }
  .markers-phone { display: block; }
  .notes { gap: 20px; margin-top: 20px; }
  .example .note { padding-left: 1.15em; text-wrap: balance; }
  .example .note-num { right: auto; left: 0; margin-right: 0; }  /* the number on the content's edge, the text beside it */

  /* Footer: the company's details one to a line, without the dots */
  .footer-line { flex-direction: column; }
  .footer-line > [aria-hidden] { display: none; }
  /* Footer, grouped by purpose: what can be tapped (the email, Common questions, then the three legal pages
     on one line), and after a gap, the company's details in two lines */
  .site-footer { flex-direction: column; align-items: flex-start; gap: 0; }
  .footer-info { display: contents; }
  .footer-info > a { order: 1; }
  .footer-nav { order: 2; margin-top: 6px; gap: 6px var(--dot-gap); }
  .footer-nav > :first-child { flex-basis: 100%; }
  .footer-nav > :nth-child(2) { display: none; }
  .footer-line { order: 3; margin-top: 24px; }
  /* A field brought into view (by focus or an error) keeps its label above it and its error below */
  .field { scroll-margin: 72px 0 56px; }
  .form-sent { scroll-margin-top: 96px; }
}
/* The smallest phones: the menu button gives way to the wordmark (the hero's button is just below) */
@media (max-width: 359px) {
  .site-nav .cta-btn { display: none; }
}