/* Standard As-Builts. Hand-written; no build step. Fonts are OFL, served from /fonts. */

@font-face { font-family: "Barlow"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/barlow-400.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/barlow-500.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/barlow-600.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/barlow-condensed-600.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/barlow-condensed-700.woff2") format("woff2"); }
@font-face { font-family: "Lexend Peta"; font-style: normal; font-weight: 800; font-display: swap; src: url("/fonts/lexend-peta-800.woff2") format("woff2"); }

/* Local fallbacks scaled to Barlow's measured widths, so text wraps the same
   before and after the web fonts arrive and the page doesn't jump. The ratios
   come from the font files' advance widths; re-measure if a face changes. */
@font-face { font-family: "Barlow Fallback"; font-weight: 100 500; size-adjust: 96.6%; src: local("Arial"), local("ArialMT"), local("Helvetica Neue"), local("HelveticaNeue"), local("Roboto"), local("Liberation Sans"); }
@font-face { font-family: "Barlow Fallback"; font-weight: 600 900; size-adjust: 90.8%; src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Neue Bold"), local("HelveticaNeue-Bold"), local("Roboto Bold"), local("Liberation Sans Bold"); }
@font-face { font-family: "Barlow Fallback DejaVu"; font-weight: 100 500; size-adjust: 85.3%; src: local("DejaVu Sans"); }
@font-face { font-family: "Barlow Fallback DejaVu"; font-weight: 600 900; size-adjust: 76.9%; src: local("DejaVu Sans Bold"); }
@font-face { font-family: "Barlow Condensed Fallback"; font-weight: 100 900; size-adjust: 81.2%; src: local("Arial Narrow Bold"), local("ArialNarrow-Bold"), local("Liberation Sans Narrow Bold"); }
@font-face { font-family: "Barlow Condensed Fallback Wide"; font-weight: 100 900; size-adjust: 66.6%; src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Neue Bold"), local("HelveticaNeue-Bold"), local("Roboto Bold"), local("Liberation Sans Bold"); }
@font-face { font-family: "Barlow Condensed Fallback DejaVu Bold"; font-weight: 100 900; size-adjust: 60.2%; src: local("DejaVu Sans Bold"); }
@font-face { font-family: "Barlow Condensed Fallback DejaVu"; font-weight: 100 900; size-adjust: 66.8%; src: local("DejaVu Sans"); }

:root {
  --bond: #EEF1F5;
  --sheet: #FFFFFF;
  --navy: #00205B;
  --red: #BF0A30;
  --ink: #1A2335;
  --pencil: #566175;
  --rule: #C3CCDA;
  --tint: #F4F6FA;
  --display: "Lexend Peta", "Arial Black", "Helvetica Neue", sans-serif;
  --body: "Barlow", "Barlow Fallback", "Barlow Fallback DejaVu", "Helvetica Neue", Arial, sans-serif;
  --label: "Barlow Condensed", "Barlow Condensed Fallback", "Barlow Condensed Fallback Wide", "Barlow Condensed Fallback DejaVu Bold", "Barlow Condensed Fallback DejaVu", "Arial Narrow", sans-serif;
  --pad: clamp(1rem, 4vw, 3.5rem);
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  padding-inline: clamp(16px, 2.5vw, 32px);
  padding-block: clamp(16px, 2.5vw, 32px);
  background: var(--bond);
  color: var(--ink);
  font: 400 1.0625rem/1.6 var(--body);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--navy); }
:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }

/* ---------- the sheet ---------- */
.sheet {
  max-width: 78rem;
  margin-inline: auto;
  background: var(--sheet);
  border: 3px solid var(--navy);
  outline: 1px solid var(--navy);
  outline-offset: 5px;
}
.stripe {
  height: 18px;
  background: linear-gradient(var(--red) 0 7px, var(--sheet) 7px 11px, var(--navy) 11px 18px);
}

/* ---------- shared type ---------- */
.eyebrow {
  margin: 0;
  display: flex;
  align-items: center;
  gap: .75rem;
  font: 600 .875rem/1.2 var(--label);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--red);
}
.eyebrow::before { content: ""; width: 2.25rem; height: 2px; background: currentColor; flex: none; }
h1, h2 {
  margin: 0;
  font-family: var(--display);
  font-weight: 800;
  text-transform: uppercase;
  color: var(--navy);
  text-wrap: balance;
}
h1 { font-size: clamp(1.75rem, .9rem + 3.6vw, 4.1rem); line-height: 1.04; letter-spacing: -.02em; }
h2 { font-size: clamp(1.35rem, .95rem + 1.6vw, 2.2rem); line-height: 1.12; letter-spacing: -.015em; }
h3 {
  margin: 0;
  font: 700 1.2rem/1.25 var(--label);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--navy);
}
.stop { color: var(--red); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1.05rem 1.6rem;
  border: 0;
  background: var(--red);
  color: #FFFFFF;
  box-shadow: inset 0 0 0 3px var(--red), inset 0 0 0 4.5px #FFFFFF;
  font: 700 1rem/1 var(--label);
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s ease, box-shadow .15s ease;
}
.btn:hover { background: var(--navy); box-shadow: inset 0 0 0 3px var(--navy), inset 0 0 0 4.5px #FFFFFF; }
.btn-sm { padding: .8rem 1.1rem; font-size: .9rem; }
.textlink {
  font: 700 1rem/1 var(--label);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--navy);
  text-decoration: underline;
  text-decoration-color: var(--red);
  text-decoration-thickness: 2px;
  text-underline-offset: .4em;
}

/* ---------- masthead ---------- */
.masthead {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  padding: 1.1rem var(--pad);
}
.brand img { width: clamp(96px, 11vw, 128px); }
.masthead nav { margin-left: auto; }
.masthead ul { display: flex; flex-wrap: wrap; gap: .25rem 1.75rem; margin: 0; padding: 0; list-style: none; }
.masthead nav a {
  display: block;
  padding-block: .45rem;
  border-bottom: 2px solid transparent;
  font: 600 .95rem/1 var(--label);
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
}
.masthead nav a:hover { border-bottom-color: var(--red); }
@media (max-width: 760px) {
  .masthead nav { display: none; }
  .masthead .btn { margin-left: auto; }
}

/* ---------- hero ---------- */
.hero {
  padding: clamp(2rem, 5vw, 3.75rem) var(--pad) clamp(2.5rem, 5vw, 4.5rem);
  border-top: 1px solid var(--rule);
}
.hero-head { display: grid; gap: 1.1rem; }
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
  margin-top: clamp(1.75rem, 3vw, 2.75rem);
}
@media (max-width: 900px) { .hero-grid { grid-template-columns: minmax(0, 1fr); } }
.lede { margin: 0; max-width: 34rem; font-size: clamp(1.125rem, 1rem + .35vw, 1.3rem); line-height: 1.55; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; margin-top: 1.75rem; }
.specs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 2.25rem 0 0;
  border-top: 2px solid var(--navy);
  border-left: 1px solid var(--rule);
}
.specs > div { padding: .75rem 1rem .85rem; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.specs dt { font: 600 .78rem/1.2 var(--label); letter-spacing: .12em; text-transform: uppercase; color: var(--pencil); }
.specs dd { margin: .2rem 0 0; font-weight: 500; color: var(--navy); }
@media (max-width: 420px) { .specs { grid-template-columns: minmax(0, 1fr); } }

.plan { margin: 0; border: 1px solid var(--rule); background: var(--sheet); }
.plan canvas { display: block; width: 100%; max-width: 100%; aspect-ratio: 80 / 58; }
.plan figcaption {
  display: flex;
  align-items: center;
  gap: .9rem;
  padding: .75rem 1rem;
  border-top: 1px solid var(--rule);
}
.bubble {
  position: relative;
  flex: none;
  display: grid;
  grid-template-rows: 1fr 1fr;
  place-items: center;
  width: 3.1rem;
  height: 3.1rem;
  border: 2px solid var(--navy);
  border-radius: 50%;
  font: 700 .95rem/1 var(--label);
  color: var(--navy);
}
.bubble::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; background: var(--navy); }
.bubble span:first-child { align-self: end; padding-bottom: .2rem; }
.bubble span:last-child { align-self: start; padding-top: .25rem; font-size: .62rem; letter-spacing: .04em; }
.cap { display: grid; gap: .1rem; min-width: 0; }
.cap strong { font: 700 1rem/1.2 var(--label); letter-spacing: .08em; text-transform: uppercase; color: var(--navy); }
.cap span { font-size: .875rem; line-height: 1.35; color: var(--pencil); }
.replay {
  margin-left: auto;
  flex: none;
  padding: .45rem .7rem;
  border: 1px solid var(--rule);
  background: var(--sheet);
  color: var(--red);
  font: 600 .8rem/1 var(--label);
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
}
.replay:hover { border-color: var(--red); }
.replay:disabled { color: var(--pencil); border-color: var(--rule); cursor: default; }
@media (max-width: 520px) { .replay { display: none; } }

/* ---------- band ---------- */
.band {
  position: relative;
  padding: clamp(1.25rem, 3vw, 2rem) var(--pad) calc(clamp(1.25rem, 3vw, 2rem) + 14px);
  border-top: 7px solid var(--red);
  box-shadow: inset 0 4px 0 #FFFFFF;
  background: var(--navy);
  color: #FFFFFF;
}
.band p {
  margin: 0;
  font: 800 clamp(.95rem, .5rem + 1.5vw, 1.65rem)/1.3 var(--display);
  text-transform: uppercase;
  text-wrap: balance;
}
.band::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 12px;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .9) 0 2px, transparent 2px 60px) left bottom / 100% 12px no-repeat,
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .5) 0 1px, transparent 1px 12px) left bottom / 100% 6px no-repeat;
}

/* ---------- sections ---------- */
.zone { padding: clamp(3rem, 6vw, 5rem) var(--pad); border-top: 1px solid var(--rule); }
.band + .zone { border-top: 0; }
.zone-head { display: grid; gap: .9rem; max-width: 46rem; margin-bottom: clamp(1.75rem, 3vw, 2.5rem); }
.zone-head p:not(.eyebrow) { margin: 0; max-width: 40rem; }

/* sheet index */
.index { margin: 0; padding: 0; list-style: none; border-top: 2px solid var(--navy); }
.index li {
  display: grid;
  grid-template-columns: 6rem minmax(9rem, 15rem) minmax(0, 1fr);
  gap: .2rem 1.5rem;
  align-items: baseline;
  padding-block: 1rem;
  border-bottom: 1px solid var(--rule);
}
.index .index-head { padding-block: .55rem; }
.index-head span { font: 600 .78rem/1.2 var(--label); letter-spacing: .12em; text-transform: uppercase; color: var(--pencil); }
.index .no { font: 700 1.15rem/1.2 var(--label); letter-spacing: .06em; color: var(--red); font-variant-numeric: tabular-nums; }
.index .name { font-weight: 600; font-size: 1.125rem; line-height: 1.3; color: var(--navy); }
.index .desc { margin: 0; }
@media (max-width: 640px) {
  .index li { grid-template-columns: 4.5rem minmax(0, 1fr); }
  .index .desc { grid-column: 2; }
  .index .index-head { display: none; }
}
.index-note { margin: 1rem 0 0; font-size: .95rem; color: var(--pencil); }

.samples { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; margin-top: 2.5rem; }
@media (max-width: 640px) { .samples { grid-template-columns: minmax(0, 1fr); } }
.slot { margin: 0; }
.slot .frame {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 9;
  max-width: 100%;
  padding: 1rem;
  border: 1.5px dashed var(--pencil);
  background: repeating-linear-gradient(45deg, transparent 0 9px, #DCE2EC 9px 10px), var(--tint);
}
.slot .tag {
  padding: .55rem .85rem;
  border: 1px solid var(--navy);
  background: var(--sheet);
  font: 700 .85rem/1.35 var(--label);
  letter-spacing: .12em;
  text-transform: uppercase;
  text-align: center;
  color: var(--navy);
}
.slot .tag b { display: block; color: var(--red); font-weight: 700; }
.slot figcaption { margin-top: .6rem; font-size: .95rem; color: var(--pencil); }

/* process */
.steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2.5rem 1.75rem;
  margin: 0;
  padding: 1.4rem 0 0;
  list-style: none;
}
@media (max-width: 960px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .steps { grid-template-columns: minmax(0, 1fr); } }
.steps li { position: relative; display: grid; gap: .45rem; align-content: start; padding-top: 2.1rem; border-top: 1px dashed var(--pencil); }
.steps .num {
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: 2.7rem;
  height: 2.7rem;
  transform: translateY(-50%);
  border: 2px solid var(--navy);
  border-radius: 50%;
  background: var(--sheet);
  font: 700 1.2rem/1 var(--label);
  color: var(--navy);
}
.steps li:last-child .num { border-color: var(--red); background: var(--red); color: #FFFFFF; }
.steps p { margin: 0; }

/* clients */
.clients { margin: 0; max-width: 62rem; border-top: 2px solid var(--navy); }
.clients > div {
  display: grid;
  grid-template-columns: minmax(0, 17rem) minmax(0, 1fr);
  gap: .2rem 2rem;
  padding-block: 1.05rem;
  border-bottom: 1px solid var(--rule);
}
.clients dt { font: 700 1.1rem/1.35 var(--label); letter-spacing: .06em; text-transform: uppercase; color: var(--navy); }
.clients dd { margin: 0; }
@media (max-width: 640px) { .clients > div { grid-template-columns: minmax(0, 1fr); } }

/* quote */
.quote-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
@media (max-width: 960px) { .quote-grid { grid-template-columns: minmax(0, 1fr); } }
.quote-intro { display: grid; gap: .9rem; }
.quote-intro p:not(.eyebrow) { margin: 0; }
.quote-intro .alt { padding-top: .9rem; border-top: 1px solid var(--rule); font-size: .95rem; color: var(--pencil); }
.quote-intro .alt a { font-weight: 600; overflow-wrap: anywhere; }

.tb {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 1px;
  background: var(--rule);
  border: 2px solid var(--navy);
}
.cell {
  grid-column: span 3;
  display: flex;
  flex-direction: column;
  gap: .3rem;
  min-width: 0;
  padding: .6rem .85rem .7rem;
  background: var(--sheet);
}
.span-2 { grid-column: span 2; }
.span-6 { grid-column: 1 / -1; }
.cell:focus-within { background: var(--tint); box-shadow: inset 0 -3px 0 var(--red); }
.cell label, .cell .glabel {
  font: 600 .78rem/1.2 var(--label);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--pencil);
}
.cell input, .cell select, .cell textarea {
  width: 100%;
  min-width: 0;
  padding: .15rem 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: 500 1.0625rem/1.4 var(--body);
}
.cell input:focus-visible, .cell select:focus-visible, .cell textarea:focus-visible { outline: none; }
.cell textarea { resize: vertical; min-height: 5rem; }
.cell ::placeholder { color: var(--pencil); opacity: .75; }
.req { color: var(--red); }
.cell.submit-row {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  padding: 1rem .85rem;
}
.cell.submit-row:focus-within { background: var(--sheet); box-shadow: none; }
.status { margin: 0; font-size: .95rem; color: var(--pencil); max-width: 34rem; }
@media (max-width: 720px) { .tb > .cell { grid-column: 1 / -1; } }

/* ---------- scope tiers: base, more sheets, more detail ---------- */
/* Stacked bars count the layers of work; the newest layer is red. */
.depth { display: inline-flex; flex-direction: column-reverse; gap: 2px; flex: none; width: 1rem; }
.depth i { display: block; height: 3px; background: var(--navy); }
.depth i:last-child:not(:first-child) { background: var(--red); }

.index .group {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding-block: 1.5rem .55rem;
  border-bottom: 1px solid var(--navy);
  font: 700 .85rem/1.2 var(--label);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--navy);
}
.index .index-head + .group { padding-top: .9rem; }
.group-note { margin-left: auto; font-weight: 600; letter-spacing: .08em; color: var(--pencil); }

.layers { display: grid; gap: 1.1rem; margin: .45rem 0 .2rem; padding: 0; list-style: none; }
.layer { display: grid; gap: .5rem; }
.layer-head {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin: 0;
  font: 700 .8rem/1.2 var(--label);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--navy);
}
.included { padding: .22rem .45rem .18rem; background: var(--navy); color: #FFFFFF; font-size: .7rem; }
.opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16.5rem), 1fr)); gap: .5rem; }
.opts-tight { grid-template-columns: repeat(auto-fill, minmax(min(100%, 9.5rem), 1fr)); }
.cell .opt {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: .65rem;
  padding: .65rem .75rem;
  border: 1px solid var(--rule);
  background: var(--sheet);
  font: 400 1rem/1.3 var(--body);
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  cursor: pointer;
  transition: border-color .12s ease, background-color .12s ease;
}
.cell .opt:hover { border-color: var(--navy); }
.cell .opt input { position: absolute; top: .9rem; left: .9rem; width: 1px; height: 1px; margin: 0; padding: 0; opacity: 0; }
.cell .opt:has(input:checked), .cell .opt-locked { border-color: var(--navy); background: var(--tint); }
.cell .opt:has(input:focus-visible) { outline: 3px solid var(--red); outline-offset: 2px; }
.cell .opt-locked { cursor: default; }
.box {
  display: grid;
  place-items: center;
  width: 1.3rem;
  height: 1.3rem;
  border: 1.5px solid var(--navy);
  color: var(--navy);
  font: 700 1.1rem/1 var(--label);
}
.box::before { content: "+"; }
.opt input:checked + .box, .opt-locked .box { background: var(--navy); }
.opt input:checked + .box::before, .opt-locked .box::before {
  content: "";
  width: .32rem;
  height: .62rem;
  margin-top: -.15rem;
  border: solid #FFFFFF;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.opt-text strong { display: block; font-weight: 600; color: var(--navy); }
.opt-text span { display: block; margin-top: .1rem; font-size: .875rem; line-height: 1.35; color: var(--pencil); }
.opt-no { padding-top: .15rem; font: 700 .78rem/1 var(--label); letter-spacing: .06em; color: var(--red); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .cell .opt { transition: none; } }

/* ---------- title block ---------- */
.titleblock {
  display: grid;
  grid-template-columns: minmax(8rem, 11rem) minmax(0, 1.4fr) minmax(0, 1.1fr) minmax(0, .7fr);
  gap: 1px;
  background: var(--rule);
  border-top: 3px solid var(--navy);
}
.tbc { display: flex; flex-direction: column; gap: .25rem; min-width: 0; margin: 0; padding: 1rem 1.1rem; background: var(--sheet); }
.tbc .k { font: 600 .74rem/1.2 var(--label); letter-spacing: .14em; text-transform: uppercase; color: var(--pencil); }
.tbc .v { font-weight: 600; color: var(--navy); overflow-wrap: anywhere; }
.tbc .sub { font-size: .9rem; color: var(--pencil); }
.tb-logo { justify-content: center; }
.tb-logo img { width: 100%; max-width: 132px; }
.tb-note { display: block; grid-column: 1 / -1; font-size: .9rem; color: var(--pencil); }
.tb-note .k { display: block; margin-bottom: .3rem; }
@media (max-width: 860px) { .titleblock { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .titleblock { grid-template-columns: minmax(0, 1fr); } }

/* ---------- short pages: thank-you, 404 ---------- */
.notice { display: grid; gap: 1.1rem; max-width: 46rem; }
.notice p:not(.eyebrow) { margin: 0; font-size: clamp(1.0625rem, 1rem + .3vw, 1.2rem); }
.notice .actions { margin-top: .75rem; }

/* Spam trap: people never see it, bots fill it in. */
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

[hidden] { display: none !important; }

/* ---------- phones: denser, so a section fits a screen ---------- */
/* Inputs stay at 16px so iOS doesn't zoom on focus. */
@media (max-width: 640px) {
  :root { --pad: .9rem; }
  body { padding-inline: 12px; padding-block: 12px; font-size: .9375rem; line-height: 1.5; }
  .sheet { border-width: 2px; outline-offset: 3px; }
  .stripe { height: 12px; background: linear-gradient(var(--red) 0 5px, var(--sheet) 5px 7px, var(--navy) 7px 12px); }

  .masthead { padding-block: .55rem; }
  .brand img { width: 80px; }
  .btn { padding: .8rem 1.1rem; font-size: .88rem; }
  .btn-sm { padding: .6rem .8rem; font-size: .78rem; }
  .textlink { font-size: .88rem; }
  .eyebrow { gap: .5rem; font-size: .72rem; }
  .eyebrow::before { width: 1.25rem; }
  h1 { font-size: 1.5rem; }
  h2 { font-size: 1.12rem; }

  .hero { padding-block: 1.1rem 1.4rem; }
  .hero-head { gap: .5rem; }
  .hero-grid { gap: 1rem; margin-top: .9rem; }
  .lede { font-size: .95rem; line-height: 1.5; }
  .actions { gap: .6rem 1.1rem; margin-top: .9rem; }
  .specs { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 1rem; }
  .specs > div { padding: .4rem .6rem .45rem; }
  .specs dt { font-size: .66rem; }
  .specs dd { font-size: .88rem; line-height: 1.35; }
  .plan figcaption { gap: .55rem; padding: .45rem .6rem; }
  .bubble { width: 2.4rem; height: 2.4rem; font-size: .8rem; }
  .bubble span:last-child { font-size: .52rem; }
  .cap strong { font-size: .82rem; }
  .cap span { display: none; }

  .band { padding-block: .8rem calc(.8rem + 12px); border-top-width: 5px; }
  .band p { font-size: .78rem; }

  .zone { padding-block: 1.6rem; }
  .zone-head { gap: .45rem; margin-bottom: 1rem; }
  .zone-head p:not(.eyebrow) { font-size: .9rem; }

  .index li { grid-template-columns: 4rem minmax(0, 1fr); gap: .05rem .6rem; padding-block: .45rem; }
  .index .no { font-size: .9rem; }
  .index .name { font-size: .95rem; }
  .index .desc { font-size: .82rem; line-height: 1.4; color: var(--pencil); }
  .index .group { padding-block: .8rem .3rem; font-size: .72rem; }
  .index .index-head + .group { padding-top: .5rem; }
  .index-note { margin-top: .5rem; font-size: .82rem; }
  .samples { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; margin-top: 1rem; }
  .slot .frame { padding: .4rem; }
  .slot .tag { padding: .3rem .4rem; font-size: .58rem; }
  .slot figcaption { margin-top: .3rem; font-size: .74rem; line-height: 1.35; }

  .steps { gap: .9rem; padding-top: 0; }
  .steps li { grid-template-columns: 2rem minmax(0, 1fr); gap: .1rem .7rem; padding-top: .75rem; }
  .steps .num { position: static; grid-row: span 2; width: 2rem; height: 2rem; transform: none; font-size: .95rem; }
  .steps h3 { font-size: .95rem; }
  .steps p { font-size: .88rem; }

  .clients > div { gap: 0; padding-block: .5rem; }
  .clients dt { font-size: .88rem; }
  .clients dd { font-size: .88rem; }

  /* The heading already says "quote", and the email is right below in the footer. */
  #quote { padding-block: 1rem; }
  .quote-grid { gap: .7rem; }
  .quote-intro { gap: .4rem; }
  .quote-intro .eyebrow, .quote-intro .alt { display: none; }
  .quote-intro p:not(.eyebrow) { font-size: .86rem; line-height: 1.45; }

  /* The form keeps its two- and three-across rows on phones. */
  .tb > .cell { grid-column: span 3; }
  .tb > .span-2 { grid-column: span 2; }
  .tb > .span-6 { grid-column: 1 / -1; }
  .cell { gap: .1rem; padding: .35rem .55rem .4rem; }
  .cell label, .cell .glabel { font-size: .64rem; letter-spacing: .1em; }
  .cell input, .cell select, .cell textarea { font-size: 16px; padding-block: .05rem; }
  .cell textarea { height: 2.7rem; min-height: 2.7rem; }
  .layers { gap: .5rem; margin-top: .2rem; }
  .layer { gap: .25rem; }
  .layer-head { gap: .4rem; font-size: .64rem; }
  .included { padding: .12rem .3rem .1rem; font-size: .56rem; }
  .opts, .opts-tight { gap: .3rem; }
  .opts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .opts-tight { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cell .opt { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .4rem; padding: .4rem .45rem; }
  .opt-text span, .opt-no { display: none; }
  .opt-text strong { font-size: .82rem; line-height: 1.2; }
  .box { width: 1.05rem; height: 1.05rem; font-size: .9rem; }
  .opt input:checked + .box::before, .opt-locked .box::before { width: .26rem; height: .5rem; }
  .cell.submit-row { gap: .5rem; padding: .5rem .55rem; }
  .status { font-size: .78rem; }

  .titleblock { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tbc { padding: .55rem .7rem; }
  .tbc .v { font-size: .88rem; }
  .tbc .sub { font-size: .78rem; }
  .tb-logo img { max-width: 96px; }
  .tb-note { font-size: .74rem; line-height: 1.45; }
  .notice p:not(.eyebrow) { font-size: .95rem; }
}

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