/* ==========================================================================
   PDC, the Proposal Design Company
   Direction: bold conversion page. Loud type, saturated blocks, hard contrast.

   Colour rule (Von Restorff): coral appears on BUTTONS ONLY, nowhere else,
   so the action is always the single loudest thing on any given screen.
   Gold carries emphasis, ink and cream carry everything else.
   ========================================================================== */

:root {
  --ink:      #141B34;
  --ink-2:    #1F2A4D;
  --ink-3:    #38456E;

  --coral:    #FF4F3D;   /* buttons only */
  --coral-dk: #DE3624;

  --gold:     #FFC531;
  --gold-dk:  #C8930E;

  --cream:    #FFF4E8;
  --cream-2:  #FFE7D0;
  --white:    #FFFFFF;

  /* semantic, flipped by .on-ink */
  --bg:       var(--cream);
  --fg:       var(--ink);
  --fg-soft:  #5A6380;
  --fg-faint: #8B93AB;
  --rule:     rgba(20,27,52,.16);
  --panel:    var(--white);

  --display: 'Archivo Black', 'Helvetica Neue', Impact, sans-serif;
  --body: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, Consolas, monospace;

  --wrap: 1180px;
}

.on-ink {
  --bg:       var(--ink);
  --fg:       var(--cream);
  --fg-soft:  #A9B2CC;
  --fg-faint: #6E7899;
  --rule:     rgba(255,244,232,.18);
  --panel:    var(--ink-2);
  background: var(--bg);
  color: var(--fg);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--t-sm);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; cursor: pointer; }
code { font-family: var(--mono); font-size: .88em; }

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: -.028em;
  line-height: .96;
  margin: 0 0 .4em;
  text-wrap: balance;
  color: var(--fg);
}
h1 { font-size: clamp(2.7rem, 7.4vw, 5.6rem); }
h2 { font-size: var(--t-3xl); }
h3 { font-size: var(--t-xl); letter-spacing: -.02em; }
h4 { font-family: var(--body); font-weight: 700; margin: 0 0 .35em; color: var(--fg); }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 22px; }
.narrow { max-width: 820px; }
section { padding-block: clamp(52px, 6.4vw, 96px); background: var(--bg); position: relative; }

/* ---------- shared ---------- */
.kicker {
  display: inline-block;
  font-family: var(--body); font-size: var(--t-2xs); font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink); background: var(--gold);
  padding: 6px 12px; margin-bottom: 20px;
}
.on-ink .kicker { background: var(--gold); color: var(--ink); }

.lede { font-size: var(--t-lg); color: var(--fg-soft); max-width: 60ch; line-height: 1.55; }
.sec-head { max-width: 800px; margin-bottom: clamp(32px, 4vw, 52px); }
.sec-head.center { margin-inline: auto; text-align: center; }
.sec-head.center .lede { margin-inline: auto; }

mark { background: var(--gold); color: var(--ink); padding: 0 .12em; }

/* chunky buttons with a hard offset shadow */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 17px 30px;
  border: 2.5px solid var(--ink);
  background: var(--white); color: var(--ink);
  font-family: var(--body); font-weight: 700; font-size: var(--t-sm);
  text-decoration: none;
  box-shadow: 4px 4px 0 var(--ink);
  transition: transform .12s, box-shadow .12s, background .12s;
}
.btn:hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--ink); }
.btn:active { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--ink); }
.btn-primary { background: var(--coral); color: var(--white); }
.btn-primary:hover { background: var(--coral-dk); }
.btn-gold { background: var(--gold); color: var(--ink); }
.btn-lg { padding: 20px 36px; font-size: var(--t-sm); }
.btn-block { width: 100%; }
.on-ink .btn { border-color: var(--cream); box-shadow: 4px 4px 0 var(--cream); }
.on-ink .btn:hover { box-shadow: 2px 2px 0 var(--cream); }
.on-ink .btn:not(.btn-primary):not(.btn-gold) { background: transparent; color: var(--cream); }

.pill {
  display: inline-block;
  font-family: var(--body); font-size: var(--t-2xs); font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  padding: 5px 10px; border: 2px solid var(--ink); color: var(--ink);
}
.on-ink .pill { border-color: var(--rule); color: var(--fg-soft); }
.pill-gold { background: var(--gold); border-color: var(--gold); }

/* ==========================================================================
   NAV
   ========================================================================== */
.nav { position: sticky; top: 0; z-index: 90; background: var(--ink); border-bottom: 3px solid var(--gold); }
.nav-in { display: flex; align-items: center; gap: 26px; height: 66px; }
.brand { display: flex; align-items: baseline; gap: 9px; text-decoration: none; color: var(--cream); margin-right: auto; }
.brand-name { font-family: var(--display); font-size: var(--t-lg); letter-spacing: -.03em; }
.brand-name span { color: var(--gold); }
.brand-ref { font-family: var(--body); font-size: var(--t-2xs); letter-spacing: .06em; text-transform: uppercase; color: #6E7899; }
.nav-links { display: flex; gap: 24px; }
.nav-links a { text-decoration: none; color: #A9B2CC; font-size: var(--t-sm); font-weight: 600; transition: color .14s; }
.nav-links a:hover, .nav-links a.is-active { color: var(--gold); }
.nav .btn { padding: 10px 18px; font-size: var(--t-xs); box-shadow: 3px 3px 0 var(--gold); border-color: var(--gold); }
.nav .btn:hover { box-shadow: 1px 1px 0 var(--gold); }
@media (max-width: 900px) { .nav-links { display: none; } .nav-in { gap: 12px; } }
@media (max-width: 520px) { .brand-ref { display: none; } .nav .btn { padding: 9px 13px; font-size: var(--t-2xs); white-space: nowrap; } .nav-in { height: 58px; } }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero { background: var(--cream); padding-block: clamp(42px, 5vw, 76px) clamp(46px, 5.4vw, 80px); overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: clamp(30px, 3.6vw, 56px); align-items: start; }
@media (max-width: 980px) { .hero-grid { grid-template-columns: 1fr; gap: 36px; } }
.hero h1 { margin-bottom: .26em; }
.hero-sub { font-size: var(--t-lg); color: var(--fg-soft); max-width: 42ch; }
.hero-sub strong { color: var(--ink); font-weight: 700; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 13px; margin-top: 28px; }

.assure { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 20px; }
.assure span {
  font-family: var(--body); font-size: var(--t-2xs); font-weight: 600;
  color: var(--fg-soft); display: inline-flex; align-items: center; gap: 6px;
}
.assure span::before { content: "✓"; color: var(--gold-dk); font-weight: 700; }
.on-ink .assure span::before { color: var(--gold); }

/* big stat row */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(120px,100%), 1fr)); gap: 18px; margin-top: 30px; padding-top: 24px; border-top: 3px solid var(--ink); }
.stats div { min-width: 0; }
.stats dt { font-family: var(--body); font-size: var(--t-2xs); letter-spacing: .06em; text-transform: uppercase; color: var(--fg-faint); margin-bottom: 4px; }
.stats dd { margin: 0; font-family: var(--display); font-size: var(--t-xl); letter-spacing: -.03em; color: var(--ink); font-variant-numeric: tabular-nums; }

/* quickstart card */
.card {
  background: var(--white);
  border: 3px solid var(--ink);
  box-shadow: 8px 8px 0 var(--ink);
  padding: clamp(20px, 2.4vw, 28px);
  min-width: 0;
}
.card-head {
  font-family: var(--body); font-size: var(--t-2xs); font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--ink);
  margin: 0 0 14px; padding-bottom: 12px; border-bottom: 2px solid var(--ink);
}
.card .field { margin-bottom: 13px; }
.card-foot { margin-top: 13px; font-family: var(--body); font-size: var(--t-2xs); color: var(--fg-faint); text-align: center; }
.card-foot b { color: var(--ink); }

/* ==========================================================================
   LEAD MAGNET
   ========================================================================== */
.magnet { background: var(--gold); padding-block: clamp(44px, 5.4vw, 74px); }
.magnet-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(28px, 3.6vw, 52px); align-items: center; }
@media (max-width: 900px) { .magnet-grid { grid-template-columns: 1fr; gap: 30px; } }
.magnet h2 { color: var(--ink); font-size: var(--t-3xl); }
.magnet .kicker { background: var(--ink); color: var(--gold); }
.magnet p { color: #4A3C14; }
.magnet-list { list-style: none; padding: 0; margin: 20px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(190px,100%), 1fr)); gap: 7px 20px; }
.magnet-list li {
  display: grid; grid-template-columns: 18px minmax(0,1fr); gap: 8px;
  font-size: var(--t-xs); font-weight: 600; color: var(--ink); min-width: 0;
}
.magnet-list li::before { content: "→"; font-weight: 700; }

.grab { background: var(--ink); border: 3px solid var(--ink); box-shadow: 8px 8px 0 rgba(20,27,52,.28); padding: clamp(20px, 2.4vw, 28px); min-width: 0; }
.grab h3 { color: var(--cream); font-size: var(--t-lg); margin-bottom: .4em; }
.grab p { color: #A9B2CC; font-size: var(--t-xs); margin-bottom: 16px; }
.grab .field label { color: var(--cream); }
.grab-note { margin-top: 12px; font-family: var(--body); font-size: var(--t-2xs); color: #6E7899; text-align: center; }

/* ==========================================================================
   PROBLEM
   ========================================================================== */
.beats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px,100%), 1fr)); gap: 0; border: 3px solid var(--ink); }
.beat { padding: 28px 26px; border-right: 3px solid var(--ink); min-width: 0; }
.beat:last-child { border-right: 0; }
@media (max-width: 860px) { .beat { border-right: 0; border-bottom: 3px solid var(--ink); } .beat:last-child { border-bottom: 0; } }
.beat-time { font-family: var(--mono); font-size: var(--t-2xs); font-weight: 700; letter-spacing: .08em; color: var(--gold-dk); margin-bottom: 14px; font-variant-numeric: tabular-nums; }
.beat h3 { font-size: var(--t-lg); margin-bottom: .35em; }
.beat p { font-size: var(--t-sm); color: var(--fg-soft); margin: 0; }

.shout {
  margin-top: clamp(32px, 4vw, 52px);
  background: var(--ink); color: var(--cream);
  padding: clamp(28px, 3.6vw, 48px);
  text-align: center;
}
.shout p {
  font-family: var(--display); font-size: var(--t-2xl);
  line-height: 1.1; letter-spacing: -.028em; margin: 0 auto; max-width: 20em;
}
.shout mark { background: var(--gold); }

/* ==========================================================================
   PROOF
   ========================================================================== */
.split { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: clamp(28px, 3.6vw, 52px); align-items: start; }
@media (max-width: 880px) { .split { grid-template-columns: 1fr; gap: 32px; } }
.split > * { min-width: 0; }

.ba {
  position: relative; aspect-ratio: 600 / 685; overflow: hidden;
  background: #fff; border: 3px solid var(--cream);
  user-select: none; touch-action: pan-y; --pos: 50%;
}
.ba-pane { position: absolute; inset: 0; overflow: hidden; }
.ba-pane img { position: absolute; width: 200%; height: auto; top: -4.38%; max-width: none; pointer-events: none; }
.ba-after img { left: -100%; }
.ba-before img { left: 0; }
.ba-before { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.ba-handle { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 3px; margin-left: -1.5px; background: var(--gold); cursor: ew-resize; z-index: 4; }
.ba-knob {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 38px; height: 38px; background: var(--gold); color: var(--ink);
  display: grid; place-items: center; font-weight: 700; font-size: var(--t-xs);
  border: 2px solid var(--ink);
}
.ba-tab {
  position: absolute; top: 0; z-index: 5;
  font-family: var(--body); font-size: var(--t-2xs); font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; padding: 6px 10px; pointer-events: none;
}
.ba-tab-b { left: 0; background: var(--ink); color: var(--cream); }
.ba-tab-a { right: 0; background: var(--gold); color: var(--ink); }
.ba-cap { margin-top: 12px; font-family: var(--body); font-size: var(--t-2xs); letter-spacing: .04em; color: var(--fg-faint); text-transform: uppercase; }
.ba-cap b { color: var(--gold); }

.gains { display: grid; gap: 0; border: 3px solid var(--rule); }
.gain { padding: 22px 24px; border-bottom: 3px solid var(--rule); }
.gain:last-child { border-bottom: 0; }
.gain h3 { font-size: var(--t-lg); margin-bottom: .3em; }
.gain p { font-size: var(--t-sm); color: var(--fg-soft); margin: 0; }

/* ==========================================================================
   PRICING — subscription first
   ========================================================================== */
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px,100%), 1fr)); gap: 24px; }
.plan {
  background: var(--white); border: 3px solid var(--ink);
  box-shadow: 8px 8px 0 var(--ink);
  padding: clamp(24px, 2.8vw, 34px);
  display: flex; flex-direction: column; min-width: 0;
  position: relative;
}
.plan.is-best { background: var(--ink); color: var(--cream); box-shadow: 8px 8px 0 var(--gold); }
.plan.is-best h3, .plan.is-best .plan-price { color: var(--cream); }
.plan.is-best .plan-for, .plan.is-best li { color: #A9B2CC; }
.plan-flag {
  position: absolute; top: -17px; left: clamp(24px, 2.8vw, 34px);
  background: var(--gold); color: var(--ink); border: 2.5px solid var(--ink);
  font-family: var(--body); font-size: var(--t-2xs); font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; padding: 5px 11px;
}
.plan h3 { font-size: var(--t-xl); margin-bottom: .25em; }
.plan-for { font-size: var(--t-xs); color: var(--fg-soft); margin-bottom: 18px; }
.plan-price { font-family: var(--display); font-size: var(--t-3xl); letter-spacing: -.04em; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.plan-price small { display: block; font-family: var(--body); font-size: var(--t-xs); font-weight: 600; color: var(--fg-faint); margin-top: 7px; letter-spacing: 0; }
.plan ul { list-style: none; padding: 0; margin: 20px 0 24px; display: grid; gap: 10px; min-width: 0; }
.plan li { display: grid; grid-template-columns: 17px minmax(0,1fr); gap: 9px; font-size: var(--t-sm); color: var(--fg-soft); min-width: 0; overflow-wrap: anywhere; }
.plan li::before { content: "✓"; color: var(--gold-dk); font-weight: 700; }
.plan.is-best li::before { color: var(--gold); }
.plan .btn { margin-top: auto; }

/* one-off projects, deliberately secondary */
.oneoff { margin-top: clamp(34px, 4vw, 52px); border: 3px solid var(--rule); padding: clamp(22px, 2.6vw, 30px); }
.oneoff h3 { font-size: var(--t-lg); margin-bottom: .3em; }
.oneoff > p { font-size: var(--t-sm); color: var(--fg-soft); max-width: 62ch; }
.bands { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px,100%), 1fr)); gap: 18px; margin-top: 20px; }
.band { border-top: 3px solid var(--ink); padding-top: 13px; min-width: 0; }
.band b { display: block; font-family: var(--display); font-size: var(--t-lg); letter-spacing: -.03em; margin-bottom: 3px; font-variant-numeric: tabular-nums; }
.band span { display: block; font-size: var(--t-xs); color: var(--fg-soft); }
.band em { display: block; font-family: var(--body); font-size: var(--t-2xs); font-style: normal; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-faint); margin-top: 6px; }

/* ==========================================================================
   WORK
   ========================================================================== */
.work-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px,100%), 1fr)); gap: 26px; }
.wcard { display: flex; flex-direction: column; min-width: 0; }
.wcard-img { background: #fff; border: 3px solid var(--rule); overflow: hidden; }
.wcard-img img { width: 100%; height: auto; }
.wcard-body { padding-top: 14px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.wcard h3 { font-size: var(--t-lg); margin: 0; }
.wcard p { font-size: var(--t-sm); color: var(--fg-soft); margin: 0; }
.wcard-tags { display: flex; flex-wrap: wrap; gap: 7px; }
.wcard-meta { margin-top: auto; padding-top: 10px; font-family: var(--body); font-size: var(--t-2xs); letter-spacing: .08em; text-transform: uppercase; color: var(--fg-faint); }

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq-list { max-width: 840px; border-top: 3px solid var(--rule); }
details.qa { border-bottom: 3px solid var(--rule); }
details.qa summary {
  cursor: pointer; list-style: none; padding: 20px 44px 20px 0;
  font-family: var(--display); font-size: var(--t-lg);
  letter-spacing: -.02em; position: relative; color: var(--fg);
}
details.qa summary::-webkit-details-marker { display: none; }
details.qa summary::after {
  content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  font-family: var(--body); font-size: var(--t-xl); color: var(--gold-dk); line-height: 1;
}
.on-ink details.qa summary::after { color: var(--gold); }
details.qa[open] summary::after { content: "–"; }
details.qa .qa-a { padding: 0 20px 22px 0; color: var(--fg-soft); font-size: var(--t-sm); line-height: 1.6; max-width: 70ch; }

/* ==========================================================================
   FINAL + FOOTER
   ========================================================================== */
.final { text-align: center; }
.final h2 { font-size: var(--t-display); max-width: 15em; margin-inline: auto; }
.final .lede { margin-inline: auto; }
.final-cta { display: flex; justify-content: center; flex-wrap: wrap; gap: 13px; margin-top: 28px; }
.final .assure { justify-content: center; }

.foot { background: var(--ink); color: #A9B2CC; padding-block: 48px 28px; }
.foot-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 32px; margin-bottom: 32px; }
@media (max-width: 720px) { .foot-grid { grid-template-columns: 1fr 1fr; } .foot-brand { grid-column: 1 / -1; } }
.foot-brand p { font-size: var(--t-xs); margin-top: 12px; max-width: 34ch; }
.foot h5 { font-family: var(--body); font-size: var(--t-2xs); letter-spacing: .06em; text-transform: uppercase; color: #6E7899; margin: 0 0 13px; font-weight: 700; }
.foot ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; min-width: 0; }
.foot li { min-width: 0; }
.foot a { color: #A9B2CC; text-decoration: none; font-size: var(--t-xs); }
.foot a:hover { color: var(--gold); }
.foot-bot { border-top: 1px solid rgba(255,244,232,.16); padding-top: 20px; display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; font-family: var(--body); font-size: var(--t-2xs); color: #6E7899; }

/* ==========================================================================
   PAGE HEAD + WORK PAGE
   ========================================================================== */
.page-head { background: var(--ink); color: var(--cream); padding-block: clamp(46px, 5.6vw, 82px); }
.page-head h1 { color: var(--cream); }
.page-head .lede { color: #A9B2CC; }

.filters { display: flex; flex-wrap: wrap; gap: 0; margin-bottom: 30px; border: 3px solid var(--ink); width: fit-content; max-width: 100%; }
.filter {
  background: transparent; border: 0; border-right: 3px solid var(--ink);
  padding: 11px 18px; font-family: var(--body); font-size: var(--t-2xs); font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink);
}
.filter:last-child { border-right: 0; }
.filter:hover { background: var(--cream-2); }
.filter.on { background: var(--ink); color: var(--gold); }

.gal-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(330px,100%), 1fr)); gap: 30px; }
.gitem { display: flex; flex-direction: column; min-width: 0; }
.gitem.hide { display: none; }
.gitem-img { background: #fff; border: 3px solid var(--ink); }
.gitem-img img { width: 100%; height: auto; }
.gitem-body { padding-top: 14px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.gitem h3 { font-size: var(--t-lg); margin: 0; }
.gitem p { font-size: var(--t-sm); color: var(--fg-soft); margin: 0; }
.gitem-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: auto; padding-top: 10px; }

/* ==========================================================================
   FORMS
   ========================================================================== */
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field label { font-size: var(--t-xs); font-weight: 700; color: var(--fg); }
.field .hint { font-size: var(--t-2xs); color: var(--fg-soft); font-weight: 400; }
/* a group of choices styled like one field: the legend reads as its label */
/* an offer: the regular price crossed out, and a small Halloween tag */
.was { text-decoration: line-through; text-decoration-thickness: 2px; opacity: .55; font-weight: inherit; }
.promo-tag { display: table; margin: 8px 0 0; padding: 3px 8px; background: #FF7A1A; color: #0D1117; font-family: var(--body); font-size: var(--t-2xs); font-weight: 700; letter-spacing: 0; line-height: 1.35; }
.promo-tag:empty { display: none; }
.card-quote .promo-tag { margin: 6px auto 0; }
.calc-out .promo-tag { align-self: flex-start; margin: 6px 0 2px; }
.kind-pick { border: 0; padding: 0; margin: 0; }
/* Send a draft, arriving from the homepage: the head start, said plainly */
.wz-carried { margin: 0 0 14px; padding: 10px 12px; background: var(--gold); color: var(--ink); font-size: var(--t-xs); font-weight: 700; line-height: 1.4; }
.kind-pick legend { padding: 0; margin-bottom: 6px; font-size: var(--t-xs); font-weight: 700; color: var(--fg); }
.kind-pick .opts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.kind-pick .opt span { text-align: center; padding: 9px 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 460px) { .kind-pick .opts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.field input[type=text], .field input[type=email], .field input[type=url],
.field input[type=datetime-local], .field input[type=number], .field textarea {
  font: inherit; font-family: var(--body); font-size: var(--t-sm);
  padding: 12px 13px; border: 2.5px solid var(--ink); background: var(--white); color: var(--ink);
  width: 100%; min-width: 0; max-width: 100%;
}
.field textarea { resize: vertical; min-height: 96px; line-height: 1.55; }
.field :is(input, textarea):focus { outline: none; box-shadow: inset 0 0 0 2px var(--gold); }
.grab .field input { border-color: var(--cream); }

.drop {
  border: 2.5px dashed var(--ink); background: var(--cream);
  padding: 26px 20px; text-align: center; cursor: pointer;
  transition: background .14s;
}
.drop:hover, .drop.over { background: var(--cream-2); }
.drop.has { border-style: solid; background: var(--cream-2); }
.drop input[type=file] { display: none; }
.drop-ico { width: 30px; height: 30px; margin: 0 auto 10px; stroke: var(--ink); fill: none; stroke-width: 1.9; }
.drop-t { font-family: var(--display); font-size: var(--t-sm); letter-spacing: -.02em; margin-bottom: 4px; }
.drop-s { font-size: var(--t-xs); color: var(--fg-soft); }
.drop.compact { padding: 20px 16px; margin-bottom: 13px; }
.drop-files { margin-top: 12px; display: grid; gap: 6px; text-align: left; }
.drop-file { display: flex; align-items: center; gap: 9px; font-family: var(--body); font-size: var(--t-2xs); background: var(--white); border: 2px solid var(--ink); padding: 8px 11px; min-width: 0; }
.drop-file span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drop-file b { margin-left: auto; color: var(--fg-soft); flex: none; }

.radio-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(146px,100%), 1fr)); gap: 10px; }
.rcard { position: relative; min-width: 0; }
.rcard input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.rcard span { display: block; padding: 13px 14px; border: 2.5px solid var(--ink); background: var(--white); font-size: var(--t-xs); font-weight: 700; cursor: pointer; }
.rcard small { display: block; font-weight: 400; font-size: var(--t-2xs); color: var(--fg-soft); margin-top: 2px; }
.rcard input:checked + span { background: var(--gold); }

.swatches { display: flex; flex-wrap: wrap; gap: 12px; }
.swatch-row { display: flex; align-items: center; gap: 8px; }
.swatch input[type=color] { -webkit-appearance: none; appearance: none; width: 46px; height: 44px; padding: 0; border: 2.5px solid var(--ink); background: none; cursor: pointer; }
.swatch input[type=color]::-webkit-color-swatch-wrapper { padding: 3px; }
.swatch input[type=color]::-webkit-color-swatch { border: 0; }
.swatch input[type=text] { width: 104px; font-family: var(--body); font-size: var(--t-xs); text-transform: uppercase; }

.frow { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-bottom: 15px; }
.frow.one { grid-template-columns: 1fr; }
@media (max-width: 620px) { .frow { grid-template-columns: 1fr; } }
.fieldset { border: 0; padding: 0; margin: 0 0 28px; }
.fieldset legend { font-family: var(--body); font-size: var(--t-2xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); padding: 0; margin-bottom: 15px; width: 100%; padding-bottom: 9px; border-bottom: 2.5px solid var(--ink); }

.more { border: 2.5px dashed var(--ink); margin-bottom: 22px; }
.more > summary { padding: 14px 16px; cursor: pointer; list-style: none; font-size: var(--t-xs); font-weight: 700; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.more > summary::-webkit-details-marker { display: none; }
.more > summary::after { content: "+"; font-family: var(--body); font-size: var(--t-lg); color: var(--gold-dk); }
.more[open] > summary::after { content: "–"; }
.more > summary small { font-weight: 400; color: var(--fg-soft); font-size: var(--t-xs); }
.more-in { padding: 4px 16px 18px; }

.urgency { display: flex; gap: 11px; align-items: flex-start; background: var(--gold); border: 2.5px solid var(--ink); padding: 14px 16px; margin-bottom: 22px; }
.urgency svg { flex: none; width: 19px; height: 19px; stroke: var(--ink); fill: none; stroke-width: 2.2; margin-top: 2px; }
.urgency p { margin: 0; font-size: var(--t-xs); color: var(--ink); }

.form-status { margin-top: 16px; font-size: var(--t-xs); padding: 13px 15px; display: none; border: 2.5px solid var(--ink); }
.form-status.ok { display: block; background: var(--gold); color: var(--ink); }
.form-status.err { display: block; background: var(--coral); color: var(--white); border-color: var(--coral-dk); }

.intake-grid { display: grid; grid-template-columns: minmax(0,1.4fr) minmax(0,.78fr); gap: clamp(26px,3.6vw,48px); align-items: start; }
@media (max-width: 940px) { .intake-grid { grid-template-columns: 1fr; } }
.intake-grid > * { min-width: 0; }
.form-card { background: var(--white); border: 3px solid var(--ink); box-shadow: 8px 8px 0 var(--ink); padding: clamp(22px,3vw,36px); min-width: 0; }
.rail { display: grid; gap: 22px; position: sticky; top: 88px; min-width: 0; }
@media (max-width: 940px) { .rail { position: static; } }
.rail-card { border-top: 4px solid var(--ink); padding-top: 16px; min-width: 0; }
.rail-card h4 { font-family: var(--display); font-weight: 400; font-size: var(--t-sm); letter-spacing: -.02em; margin: 0 0 12px; }
.rail-card ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 11px; min-width: 0; }
.rail-card li { display: grid; grid-template-columns: 22px minmax(0,1fr); gap: 10px; font-size: var(--t-xs); color: var(--fg-soft); min-width: 0; overflow-wrap: anywhere; }
.rail-card li b { color: var(--ink); }
.rail-card.plain li { grid-template-columns: 1fr; }
.rail-num { font-family: var(--mono); font-size: var(--t-2xs); font-weight: 700; color: var(--gold-dk); padding-top: 2px; }

/* ==========================================================================
   a11y + narrow
   ========================================================================== */
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.skip { position: absolute; left: -9999px; top: 0; z-index: 200; background: var(--coral); color: #fff; padding: 12px 18px; font-weight: 700; text-decoration: none; }
.skip:focus { left: 0; }
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

@media (max-width: 600px) {
  .btn { white-space: normal; text-align: center; }
  .btn-lg { padding: 16px 20px; font-size: var(--t-sm); }
  .hero-cta, .final-cta { flex-direction: column; align-items: stretch; }
  .hero-cta .btn, .final-cta .btn { width: 100%; }
  .filters { width: 100%; }
  .filter { flex: 1 1 auto; text-align: center; }
  .card, .plan, .grab, .form-card { box-shadow: 5px 5px 0 var(--ink); }
  .plan.is-best { box-shadow: 5px 5px 0 var(--gold); }
}
@media (max-width: 380px) {
  body { font-size: var(--t-sm); }
  .wrap { padding-inline: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* Anchor jumps landed under the sticky nav, cutting off each section's label. */
section[id], [id] { scroll-margin-top: 86px; }

/* ==========================================================================
   PROOF GALLERY + LIGHTBOX
   Every piece is clickable. The lightbox carries the hire CTA, because the
   moment someone has just enlarged a finished proposal is the moment they
   are most persuaded.
   ========================================================================== */
.shots { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(262px, 100%), 1fr)); gap: 18px; }
.shot {
  padding: 0; margin: 0; width: 100%; text-align: left;
  background: var(--ink-2); border: 3px solid rgba(255,244,232,.2);
  cursor: zoom-in; display: flex; flex-direction: column; min-width: 0;
  position: relative; overflow: hidden;
  transition: border-color .14s, transform .14s;
}
.shot:hover, .shot:focus-visible { border-color: var(--gold); transform: translateY(-3px); }
.shot-img { background: #fff; overflow: hidden; }
.shot-img img { width: 100%; height: 178px; object-fit: cover; object-position: top center; display: block; }
.shot[data-tall="1"] .shot-img img { object-position: top center; }
.shot-cap { padding: 12px 14px; }
.shot-cap b { display: block; font-size: var(--t-sm); font-weight: 700; color: var(--cream); line-height: 1.3; }
.shot-cap span { display: block; font-family: var(--body); font-size: var(--t-2xs); letter-spacing: .08em; text-transform: uppercase; color: #6E7899; margin-top: 5px; }
.shot-zoom {
  position: absolute; top: 10px; right: 10px;
  background: var(--gold); color: var(--ink);
  font-family: var(--body); font-size: var(--t-2xs); font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  padding: 4px 8px; opacity: 0; transition: opacity .14s;
}
.shot:hover .shot-zoom, .shot:focus-visible .shot-zoom { opacity: 1; }

/* lightbox */
.lb { border: 0; padding: 0; background: transparent; max-width: 96vw; max-height: 96vh; overflow: visible; }
.lb::backdrop { background: rgba(8,11,24,.93); }
.lb-inner { background: var(--cream); border: 3px solid var(--ink); display: flex; flex-direction: column; max-height: 94vh; }
.lb-stage { background: #fff; overflow: auto; display: grid; place-items: center; }
.lb-stage img { max-width: 100%; max-height: 74vh; width: auto; height: auto; display: block; }
.lb-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 16px 18px; border-top: 3px solid var(--ink); flex-wrap: wrap; background: var(--cream);
}
.lb-meta { min-width: 0; flex: 1 1 260px; }
.lb-meta b { display: block; font-family: var(--display); font-size: var(--t-lg); letter-spacing: -.02em; color: var(--ink); }
.lb-meta span { display: block; font-size: var(--t-xs); color: var(--fg-soft); margin-top: 3px; }
.lb-bar .btn { flex: none; }
.lb-close {
  position: absolute; top: -17px; right: -17px; z-index: 5;
  width: 40px; height: 40px; padding: 0;
  background: var(--coral); color: #fff;
  border: 3px solid var(--ink); font-size: var(--t-lg); font-weight: 700; line-height: 1;
}
.lb-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 54px; padding: 0; z-index: 5;
  background: var(--gold); color: var(--ink); border: 3px solid var(--ink);
  font-size: var(--t-lg); font-weight: 700; line-height: 1;
}
.lb-prev { left: -19px; }
.lb-next { right: -19px; }
.lb-count { font-family: var(--body); font-size: var(--t-2xs); letter-spacing: .06em; color: var(--fg-faint); }

@media (max-width: 620px) {
  .lb-close { top: -15px; right: -8px; width: 36px; height: 36px; }
  .lb-nav { width: 36px; height: 46px; }
  .lb-prev { left: -8px; }
  .lb-next { right: -8px; }
  .lb-bar .btn { width: 100%; }
  .lb-stage img { max-height: 58vh; }
}

/* Work card image becomes the lightbox trigger. Proof and Selected Work are
   now a single section, so every piece is both the evidence and the sample. */
button.wcard-img {
  padding: 0; margin: 0; width: 100%; display: block;
  cursor: zoom-in; position: relative; text-align: left;
  border: 3px solid var(--rule); background: #fff;
  transition: border-color .14s, transform .14s;
}
button.wcard-img:hover, button.wcard-img:focus-visible { border-color: var(--gold); transform: translateY(-3px); }
button.wcard-img img { width: 100%; height: auto; display: block; }

/* The viewer controls were positioned outside the dialog box, which pushed
   them past the viewport edge on narrow screens. They sit inside now, over
   the image, with a shadow so they stay readable against any artwork. */
.lb { max-width: 92vw; }
.lb-close { top: 10px; right: 10px; box-shadow: 0 3px 12px rgba(8,11,24,.5); }
.lb-prev { left: 10px; box-shadow: 0 3px 12px rgba(8,11,24,.5); }
.lb-next { right: 10px; box-shadow: 0 3px 12px rgba(8,11,24,.5); }
@media (max-width: 620px) {
  .lb-close { top: 8px; right: 8px; }
  .lb-prev { left: 6px; }
  .lb-next { right: 6px; }
}

/* ==========================================================================
   NAV DROPDOWN (store-style menu bar)
   ========================================================================== */
.nav-links { align-items: center; }
.has-menu { position: relative; }
.menu-btn {
  background: none; border: 0; padding: 4px 0;
  color: #A9B2CC; font-family: var(--body); font-size: var(--t-sm); font-weight: 600;
  display: inline-flex; align-items: center; gap: 6px;
}
.menu-btn::after { content: "▾"; font-size: var(--t-2xs); }
.menu-btn:hover, .has-menu[data-open="1"] .menu-btn { color: var(--gold); }
.menu-panel {
  position: absolute; top: calc(100% + 14px); left: -18px; z-index: 95;
  background: var(--cream); border: 3px solid var(--ink);
  box-shadow: 8px 8px 0 rgba(8,11,24,.4);
  padding: 16px; min-width: 300px; display: none;
}
.has-menu[data-open="1"] .menu-panel { display: block; }
.menu-panel h6 {
  font-family: var(--body); font-size: var(--t-2xs); font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--fg-faint);
  margin: 0 0 9px;
}
.menu-panel ul { list-style: none; padding: 0; margin: 0 0 14px; display: grid; gap: 2px; }
.menu-panel li a {
  display: block; padding: 7px 9px; text-decoration: none;
  color: var(--ink); font-size: var(--t-xs); font-weight: 600;
}
.menu-panel li a:hover { background: var(--gold); }
.menu-panel li a small { display: block; font-weight: 400; font-size: var(--t-2xs); color: var(--fg-soft); }
.menu-panel li a:hover small { color: #4A3C14; }
.menu-foot { border-top: 2px solid var(--ink); padding-top: 12px; }
.menu-foot .btn { width: 100%; padding: 11px 16px; font-size: var(--t-xs); box-shadow: 3px 3px 0 var(--ink); }
@media (max-width: 900px) { .has-menu { display: none; } }

/* ==========================================================================
   TEMPLATE STORE
   ========================================================================== */
.store-bar {
  display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between;
  padding-bottom: 20px; margin-bottom: 26px; border-bottom: 3px solid var(--ink);
}
.store-count { font-family: var(--body); font-size: var(--t-2xs); letter-spacing: .08em; text-transform: uppercase; color: var(--fg-soft); }
.store-count b { color: var(--ink); }

.tgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr)); gap: 22px; }
.tcard {
  background: var(--white); border: 3px solid var(--ink);
  display: flex; flex-direction: column; min-width: 0;
  transition: transform .14s, box-shadow .14s;
}
.tcard:hover { transform: translateY(-4px); box-shadow: 6px 6px 0 var(--ink); }
.tcard.hide { display: none; }
.tcard-art {
  position: relative; background: var(--cream); border-bottom: 3px solid var(--ink);
  aspect-ratio: 4 / 3; display: grid; place-items: center; overflow: hidden; padding: 14px;
}
.tcard-art img { width: 100%; height: 100%; object-fit: contain; }
.tcard-art svg { width: 100%; height: 100%; }
.tcard-badge {
  position: absolute; top: 0; left: 0;
  font-family: var(--body); font-size: var(--t-2xs); font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  padding: 5px 9px; background: var(--gold); color: var(--ink);
}
.tcard-badge.is-soon { background: var(--ink); color: var(--cream); }
.tcard-body { padding: 15px 16px 17px; display: flex; flex-direction: column; gap: 7px; flex: 1; }
.tcard h3 { font-size: var(--t-sm); margin: 0; letter-spacing: -.02em; }
.tcard p { font-size: var(--t-xs); color: var(--fg-soft); margin: 0; line-height: 1.45; }
.tcard-meta {
  margin-top: auto; padding-top: 11px; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font-family: var(--body); font-size: var(--t-2xs); letter-spacing: .08em; text-transform: uppercase; color: var(--fg-faint);
}
.tcard-price { font-family: var(--display); font-size: var(--t-sm); color: var(--ink); letter-spacing: -.02em; }

/* schematic colors, so the drawn previews sit in the brand */
.sch-bg { fill: var(--cream); }
.sch-ink { fill: #141B34; }
.sch-mid { fill: #38456E; }
.sch-gold { fill: #CDF546; }
.sch-line { stroke: #141B34; stroke-width: 2.5; fill: none; }
.sch-thin { stroke: #38456E; stroke-width: 1.8; fill: none; }

/* store CTA strip */
.store-cta {
  margin-top: clamp(34px, 4vw, 52px);
  background: var(--ink); color: var(--cream);
  padding: clamp(26px, 3.4vw, 42px);
  display: flex; flex-wrap: wrap; gap: 20px; align-items: center; justify-content: space-between;
}
.store-cta h3 { color: var(--cream); font-size: var(--t-xl); margin: 0 0 .3em; }
.store-cta p { color: #A9B2CC; font-size: var(--t-sm); margin: 0; max-width: 52ch; }
.store-cta .btn { flex: none; }

/* Placeholder tile for catalog entries with no cover image yet. Deliberately
   plain: it states what is missing rather than faking artwork. */
.tcard-art.is-empty { background: repeating-linear-gradient(135deg, var(--cream), var(--cream) 10px, var(--cream-2) 10px, var(--cream-2) 20px); }
.tcard-art.is-empty span {
  font-family: var(--body); font-size: var(--t-2xs); font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--fg-faint);
  background: var(--cream); border: 2px solid var(--rule); padding: 7px 11px; text-align: center;
}
.tcard-actions { display: flex; gap: 8px; margin-top: 12px; }
.tcard-actions .btn { flex: 1; padding: 11px 14px; font-size: var(--t-xs); box-shadow: 3px 3px 0 var(--ink); }
.tcard-actions .btn:hover { box-shadow: 1px 1px 0 var(--ink); }

/* email gate */
.gate { border: 0; padding: 0; background: transparent; max-width: 92vw; }
.gate::backdrop { background: rgba(8,11,24,.93); }
.gate-inner { background: var(--cream); border: 3px solid var(--ink); padding: clamp(22px,3vw,32px); width: min(440px, 92vw); position: relative; }
.gate h3 { font-size: var(--t-xl); margin-bottom: .3em; }
.gate p { font-size: var(--t-xs); color: var(--fg-soft); margin-bottom: 18px; }
.gate-close { position: absolute; top: -17px; right: -17px; width: 40px; height: 40px; padding: 0; background: var(--coral); color: #fff; border: 3px solid var(--ink); font-size: var(--t-lg); font-weight: 700; }
.gate-done { display: none; }
.gate.is-done .gate-form { display: none; }
.gate.is-done .gate-done { display: block; }
.gate-note { margin-top: 12px; font-family: var(--body); font-size: var(--t-2xs); color: var(--fg-faint); text-align: center; }
@media (max-width: 620px) { .gate-close { top: -15px; right: -8px; width: 36px; height: 36px; } }

/* ==========================================================================
   ATTACHMENT SLOTS
   The draft is the one required file. Brand guidelines, logos and reference
   material are separate labeled slots, collapsed by default so the hero form
   stays short for someone who only wants to send the document.
   ========================================================================== */
.slots { border: 2px dashed var(--ink); margin-bottom: 13px; background: var(--cream); }
.slots > summary {
  padding: 10px 12px; cursor: pointer; list-style: none;
  font-size: var(--t-xs); font-weight: 700; color: var(--ink);
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.slots > summary::-webkit-details-marker { display: none; }
.slots > summary::after { content: "+"; font-family: var(--body); font-size: var(--t-sm); color: var(--gold-dk); }
.slots[open] > summary::after { content: "–"; }
.slots > summary small { font-family: var(--body); font-size: var(--t-2xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-faint); }
.slots-in { padding: 0 10px 10px; display: grid; gap: 8px; }

.slot {
  display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 7px 10px; align-items: center;
  background: var(--white); border: 2px solid var(--ink); padding: 9px 11px; min-width: 0;
}
.slot-label { font-size: var(--t-xs); font-weight: 700; color: var(--ink); min-width: 0; }
.slot-label small { display: block; font-weight: 400; font-size: var(--t-2xs); color: var(--fg-soft); margin-top: 1px; }
.slot input[type=file] { display: none; }
.slot-btn {
  font-family: var(--body); font-size: var(--t-2xs); font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  background: var(--gold); color: var(--ink); border: 2px solid var(--ink);
  padding: 6px 11px; cursor: pointer; white-space: nowrap;
}
.slot-btn:hover { background: var(--ink); color: var(--gold); }
.slot-file {
  grid-column: 1 / -1; min-width: 0;
  font-family: var(--body); font-size: var(--t-2xs); color: var(--fg-soft);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.slot.has { border-color: var(--gold-dk); }
.slot.has .slot-file { color: var(--ink); }
.slot.has .slot-btn { background: var(--ink); color: var(--gold); }

/* ==========================================================================
   MAGNET PREVIEW TILES
   Showing four of the templates converts better than listing ten names.
   ========================================================================== */
.mini-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(118px,100%), 1fr)); gap: 12px; margin-top: 22px; }
.mini { background: var(--white); border: 2.5px solid var(--ink); min-width: 0; }
.mini-art { aspect-ratio: 4/3; background: var(--cream); border-bottom: 2.5px solid var(--ink); display: grid; place-items: center; overflow: hidden; padding: 8px; }
.mini-art img { width: 100%; height: 100%; object-fit: contain; }
.mini-art.is-empty { background: repeating-linear-gradient(135deg, var(--cream), var(--cream) 8px, var(--cream-2) 8px, var(--cream-2) 16px); }
.mini b { display: block; padding: 8px 9px; font-size: var(--t-2xs); font-weight: 700; color: var(--ink); line-height: 1.25; }
.mini-more {
  display: flex; align-items: center; justify-content: center; text-align: center;
  background: var(--ink); color: var(--gold); text-decoration: none;
  font-family: var(--body); font-size: var(--t-2xs); font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; padding: 12px 10px;
  border: 2.5px solid var(--ink);
}
.mini-more:hover { background: var(--gold); color: var(--ink); }

/* grab form gains a delivered state, matching the store gate */
.grab-done { display: none; }
.grab.is-done .grab-form { display: none; }
.grab.is-done .grab-done { display: block; }
.grab-done h3 { color: var(--cream); }
.grab-done p { color: #A9B2CC; }

/* ==========================================================================
   STICKY ACTION BAR
   Appears once the hero scrolls away, so both the high-intent and the free
   path stay one tap away through the whole page.
   ========================================================================== */
.stickybar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 88;
  background: var(--ink); border-top: 3px solid var(--gold);
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
  display: flex; gap: 10px; align-items: center;
  transform: translateY(105%); transition: transform .22s ease;
}
.stickybar.show { transform: translateY(0); }
.stickybar-txt { flex: 1; min-width: 0; color: var(--cream); font-size: var(--t-xs); font-weight: 700; line-height: 1.25; }
.stickybar-txt small { display: block; font-family: var(--body); font-size: var(--t-2xs); font-weight: 600; color: #A9B2CC; letter-spacing: .06em; }
.stickybar .btn { flex: none; padding: 11px 16px; font-size: var(--t-xs); box-shadow: 3px 3px 0 var(--gold); border-color: var(--gold); }
.stickybar .btn:hover { box-shadow: 1px 1px 0 var(--gold); }
@media (min-width: 861px) { .stickybar-txt { font-size: var(--t-sm); } }
@media (max-width: 560px) { .stickybar-txt { display: none; } .stickybar .btn { flex: 1; } }
@media (prefers-reduced-motion: reduce) { .stickybar { transition: none; } }

/* Client logos. These went missing in the bold rewrite; they are the only
   social proof above the fold, so they come back under the hero grid. */
.trust { margin-top: clamp(26px, 3vw, 40px); padding-top: 22px; border-top: 3px solid var(--ink); }
.trust-lab {
  font-family: var(--body); font-size: var(--t-2xs); font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--fg-faint); margin: 0 0 14px;
}
.trust-row { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(18px, 3.4vw, 40px); }
.trust-row img { height: 26px; width: auto; opacity: .62; filter: grayscale(1); transition: opacity .15s; }
.trust-row img:hover { opacity: 1; filter: none; }
@media (max-width: 480px) { .trust-row img { height: 21px; } }

/* ==========================================================================
   THE PLAN  (three steps)
   StoryBrand's point: a customer needs to see the path before they commit.
   This went missing in the bold rewrite and is the thing that lowers risk.
   ========================================================================== */
.steps3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px,100%), 1fr)); gap: 0; border: 3px solid var(--ink); }
.step3 { padding: 26px 24px; border-right: 3px solid var(--ink); min-width: 0; }
.step3:last-child { border-right: 0; }
@media (max-width: 820px) { .step3 { border-right: 0; border-bottom: 3px solid var(--ink); } .step3:last-child { border-bottom: 0; } }
.step3-n {
  font-family: var(--display); font-size: var(--t-2xl); line-height: 1;
  color: var(--gold-dk); letter-spacing: -.04em; display: block; margin-bottom: 10px;
}
.step3 h3 { font-size: var(--t-lg); margin-bottom: .3em; }
.step3 p { font-size: var(--t-sm); color: var(--fg-soft); margin: 0; }
.oneliner { font-size: var(--t-lg); color: var(--fg-soft); max-width: 58ch; }
.oneliner b { color: var(--ink); font-weight: 700; }

/* ==========================================================================
   QUOTE ESTIMATOR
   The one thing a visitor will actually play with. It also answers the first
   objection (what does this cost) and pre-qualifies the lead before the form.
   ========================================================================== */
.calc { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 0; border: 3px solid var(--ink); background: var(--white); margin-bottom: clamp(30px, 3.6vw, 46px); }
@media (max-width: 860px) { .calc { grid-template-columns: 1fr; } }
.calc-in { padding: clamp(22px, 2.6vw, 32px); border-right: 3px solid var(--ink); min-width: 0; }
@media (max-width: 860px) { .calc-in { border-right: 0; border-bottom: 3px solid var(--ink); } }
.calc-row { margin-bottom: 20px; }
.calc-row:last-child { margin-bottom: 0; }
.calc-lab {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  font-size: var(--t-xs); font-weight: 700; color: var(--ink); margin-bottom: 9px;
}
.calc-lab output { font-family: var(--body); font-size: var(--t-xs); font-weight: 700; color: var(--gold-dk); font-variant-numeric: tabular-nums; }

.opts { display: flex; flex-wrap: wrap; gap: 7px; }
.opt { position: relative; }
.opt input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.opt span {
  display: block; padding: 9px 13px; cursor: pointer;
  border: 2.5px solid var(--ink); background: var(--white);
  font-size: var(--t-xs); font-weight: 700; color: var(--ink);
  transition: background .12s;
}
.opt input:checked + span { background: var(--gold); }
.opt input:focus-visible + span { outline: 3px solid var(--gold); outline-offset: 2px; }

input[type=range].calc-range {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 10px; background: var(--cream-2);
  border: 2.5px solid var(--ink); padding: 0; cursor: pointer;
}
input[type=range].calc-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 24px; height: 24px; background: var(--coral);
  border: 2.5px solid var(--ink); cursor: grab; margin-top: -2px;
}
input[type=range].calc-range::-moz-range-thumb {
  width: 20px; height: 20px; background: var(--coral);
  border: 2.5px solid var(--ink); border-radius: 0; cursor: grab;
}

.calc-out {
  padding: clamp(22px, 2.6vw, 32px); background: var(--ink); color: var(--cream);
  display: flex; flex-direction: column; min-width: 0;
}
.calc-out-lab { font-family: var(--body); font-size: var(--t-2xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #6E7899; margin: 0 0 8px; }
.calc-price {
  font-family: var(--display); font-size: var(--t-3xl); line-height: 1;
  letter-spacing: -.04em; color: var(--gold); font-variant-numeric: tabular-nums; margin: 0;
}
.calc-turn { font-size: var(--t-sm); font-weight: 700; color: var(--cream); margin: 12px 0 0; }
.calc-note { font-size: var(--t-xs); color: #A9B2CC; margin: 6px 0 0; line-height: 1.45; }
.calc-rush { display: none; font-family: var(--body); font-size: var(--t-2xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; background: var(--gold); color: var(--ink); padding: 5px 9px; align-self: flex-start; margin-top: 12px; }
.calc-rush.on { display: inline-block; }
.calc-out .btn { margin-top: auto; }
.calc-foot { font-family: var(--body); font-size: var(--t-2xs); color: #6E7899; margin: 12px 0 0; text-align: center; }

/* The panel sits 14px below the button, and that gap was un-hoverable, so the
   menu closed the moment the pointer moved toward it. This bridges the gap. */
.menu-panel::before { content: ""; position: absolute; top: -17px; left: 0; right: 0; height: 17px; }

/* ==========================================================================
   ACCESSIBILITY CORRECTIONS
   A site that sells Section 508 compliance has to pass itself. Every value
   below was computed against WCAG 2.1 AA, not picked by eye.

     --gold-text  #8A6410 on cream  = 4.99:1  (was #C8930E at 2.75:1)
     --fg-faint   #63687A on cream  = 5.04:1  (was #8B93AB at 2.82:1)
     --ink-faint  #8B94B3 on ink    = 5.54:1  (was #6E7899 at 4.01:1)
   ========================================================================== */
:root {
  --gold-text: #8A6410;
  --fg-faint:  #63687A;
}
.on-ink { --fg-faint: #8B94B3; }

/* gold-on-light text roles move to the darkened token */
.assure span::before,
.step3-n,
.calc-lab output,
.more > summary::after,
.rail-num,
.mini-more:hover { color: var(--gold-text); }

/* .on-ink .pill set grey text while .pill-gold set a gold ground: 1.34:1.
   The gold variant now states its own colour so the cascade cannot strand it. */
.pill-gold,
.on-ink .pill-gold { background: var(--gold); border-color: var(--gold); color: var(--ink); }

.calc-out-lab, .grab-note, .calc-foot { color: var(--fg-faint); }

/* WCAG 2.5.8: interactive targets need 24px minimum in both directions */
.nav-links a, .foot a, .menu-panel li a {
  display: inline-flex; align-items: center; min-height: 24px;
}
.foot ul { gap: 4px; }

/* ==========================================================================
   FAQ, rebuilt
   The old list was hairlines and plus signs, which read as fine print under
   a page this loud. Each question is now a block that visibly opens.
   ========================================================================== */
.faq-list { max-width: 860px; border: 0; display: grid; gap: 12px; }
details.qa {
  border: 3px solid var(--ink); background: var(--white); border-bottom: 3px solid var(--ink);
  transition: background .14s;
}
details.qa:hover { background: var(--cream); }
details.qa[open] { background: var(--cream); box-shadow: 6px 6px 0 var(--ink); }
details.qa summary {
  padding: 20px 56px 20px 22px;
  font-family: var(--display); font-size: var(--t-lg);
  letter-spacing: -.02em; line-height: 1.25; color: var(--ink);
}
details.qa summary::after {
  content: "+"; right: 18px;
  width: 30px; height: 30px; display: grid; place-items: center;
  background: var(--gold); color: var(--ink); border: 2.5px solid var(--ink);
  font-family: var(--body); font-size: var(--t-lg); font-weight: 700; line-height: 1;
}
details.qa[open] summary::after { content: "–"; background: var(--coral); color: #fff; }
details.qa .qa-a {
  padding: 0 22px 22px; color: var(--fg-soft); font-size: var(--t-sm); line-height: 1.62;
  max-width: 68ch; border-top: 2px solid var(--rule); margin: 0 22px 0; padding-left: 0; padding-right: 0;
}
details.qa .qa-a { padding-top: 16px; }

/* ==========================================================================
   MOTION
   Two small things only, and neither hides content at rest: the desk-open dot
   breathes, and the estimated price flicks when the number actually changes.
   ========================================================================== */
.dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--coral); margin-right: 8px; vertical-align: baseline;
  animation: breathe 2.6s ease-in-out infinite;
}
@keyframes breathe { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

.calc-price { transition: transform .16s ease; }
.calc-price.bump { animation: bump .28s ease; }
@keyframes bump { 0% { transform: scale(1); } 40% { transform: scale(1.045); } 100% { transform: scale(1); } }

@media (prefers-reduced-motion: reduce) {
  .dot { animation: none; }
  .calc-price.bump { animation: none; }
}

/* the live dot inherits its surrounding colour, so it reads on gold or ink */
.dot { background: currentColor; }

/* logo mark: a page with a folded corner, a headline bar and two body lines */
.brand-mark { width: 26px; height: 26px; flex: none; display: block; }
.brand { gap: 10px; }

/* ==========================================================================
   CONTRAST, ROUND TWO
   1. White on #FF4F3D measured 3.26:1, and the CTA is the one element that
      must not fail. #DE3624 gives 4.61:1 and keeps the colour recognisably
      the same. Hover deepens to #B82A1A at 6.25:1.
   2. Panels painted with the ink background kept the light token set, so
      faint text was dark-on-dark. They now adopt the dark tokens.
   ========================================================================== */
:root { --coral: #DE3624; --coral-dk: #B82A1A; }

.calc-out, .grab, .plan.is-best, .store-cta, .stickybar, .foot, .page-head {
  --fg-soft:  #A9B2CC;
  --fg-faint: #8B94B3;
  --rule:     rgba(255,244,232,.18);
}
.calc-out-lab, .grab-note, .calc-foot, .calc-note { color: var(--fg-faint); }
.calc-note { color: var(--fg-soft); }

/* the footer bottom line hardcoded #6E7899, which bypassed the token at 3.89:1 */
.foot-bot { color: var(--fg-faint); }
.foot h5 { color: var(--fg-faint); }

/* ==========================================================================
   MARKET FIGURES
   Industry numbers, attributed as industry numbers. They reframe the price:
   design is a rounding error against what a bid already costs to produce.
   ========================================================================== */
.figs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(190px,100%), 1fr)); gap: 0; border: 3px solid var(--ink); margin-top: clamp(28px, 3.4vw, 44px); }
.fig { padding: 24px 22px; border-right: 3px solid var(--ink); min-width: 0; }
.fig:last-child { border-right: 0; }
@media (max-width: 780px) { .fig { border-right: 0; border-bottom: 3px solid var(--ink); } .fig:last-child { border-bottom: 0; } }
.fig b {
  display: block; font-family: var(--display); font-size: var(--t-2xl);
  line-height: 1; letter-spacing: -.04em; color: var(--ink); font-variant-numeric: tabular-nums; margin-bottom: 10px;
}
.fig span { display: block; font-size: var(--t-xs); color: var(--fg-soft); line-height: 1.45; }
.figs-note {
  margin-top: 12px; font-family: var(--body); font-size: var(--t-2xs);
  letter-spacing: .06em; color: var(--fg-faint);
}

/* entry-price reassurance, so a small firm does not bounce off the retainers */
.floor {
  margin-top: 20px; border-left: 5px solid var(--gold); background: var(--white);
  border-top: 3px solid var(--ink); border-right: 3px solid var(--ink); border-bottom: 3px solid var(--ink);
  padding: 18px 20px;
}
.floor b { font-family: var(--display); font-size: var(--t-sm); display: block; margin-bottom: 4px; }
.floor p { font-size: var(--t-xs); color: var(--fg-soft); margin: 0; max-width: 66ch; }

/* Below ~400px the mark, wordmark and CTA together exceed the bar. */
@media (max-width: 400px) {
  .brand { gap: 7px; }
  .brand-mark { width: 21px; height: 21px; }
  .brand-name { font-size: var(--t-sm); }
  .nav-in { gap: 8px; height: 54px; }
  .nav .btn { padding: 8px 10px; font-size: var(--t-2xs); }
}

/* ==========================================================================
   CRAFT PASS
   Three things read as template-made, and all three are fixed here.

   1. Uniform weight. Every card carried the same 3px border and 4px offset
      shadow, which flattens hierarchy and is the clearest tell of generated
      design. Weight is now spent by role: the hero card, the chosen plan and
      an open question earn the lift. Everything else steps back to a hairline.
   2. The gold was #FFC531, a highlighter yellow. #E3A72C is brass, which is
      what the research means by gold signalling excellence rather than alarm.
   3. The mark was a page with a folded corner, the default file icon on every
      operating system. Replaced with a seal.
   ========================================================================== */
:root { --gold: #E3A72C; --gold-dk: #A9761A; }

/* secondary surfaces step back */
.tcard, .sub, .oneoff, .beat, .step3, .fig, .mini, .slot, .rcard span, .opt span,
.gitem-img, .wcard-img, .filters, .filter, .tcard-art, .mini-art {
  border-width: 2px;
}
.beats, .steps3, .figs, .plans, .tiers, .calc, .rates { border-width: 2px; }
.tcard:hover { box-shadow: 4px 4px 0 var(--ink); }

/* lift is reserved for the three elements that lead */
.card { box-shadow: 8px 8px 0 var(--ink); }
.plan { box-shadow: none; border-width: 2px; }
.plan.is-best { box-shadow: 8px 8px 0 var(--gold); border-width: 3px; }
.grab { box-shadow: 6px 6px 0 rgba(20,27,52,.22); }
.form-card { box-shadow: 6px 6px 0 var(--ink); }
details.qa { border-width: 2px; box-shadow: none; }
details.qa[open] { border-width: 3px; box-shadow: 5px 5px 0 var(--ink); }

/* buttons: the primary action keeps its lift, the rest are quieter */
.btn { border-width: 2px; box-shadow: 3px 3px 0 var(--ink); }
.btn-primary { border-width: 2.5px; box-shadow: 4px 4px 0 var(--ink); }
.btn:hover { box-shadow: 1px 1px 0 var(--ink); }
.btn-primary:hover { box-shadow: 2px 2px 0 var(--ink); }

/* ==========================================================================
   BRAND MARK — a seal
   Seals have signified authority for centuries, which is the opposite of
   trend-bound, and they belong in a world of stamps, signatures and cover
   pages. The W is cut as two rising chevrons, so the mark also reads upward.
   ========================================================================== */
.brand-mark { width: 28px; height: 28px; }
@media (max-width: 400px) { .brand-mark { width: 23px; height: 23px; } }

/* ==========================================================================
   VIGIL
   The desk works overnight, so the desk has a night bird. Used twice, drawn
   geometrically rather than cartooned, so it never undercuts the seriousness
   of the thing being sold.
   ========================================================================== */
.vigil { width: 76px; height: 76px; flex: none; }
.vigil-block { display: flex; gap: 20px; align-items: center; justify-content: center; flex-wrap: wrap; margin-top: 30px; padding-top: 26px; border-top: 2px solid var(--rule); }
.vigil-say { text-align: left; max-width: 34ch; min-width: 0; }
.vigil-say b { display: block; font-family: var(--display); font-size: var(--t-sm); color: var(--cream); letter-spacing: -.02em; margin-bottom: 4px; }
.vigil-say p { font-size: var(--t-xs); color: var(--fg-soft); margin: 0; line-height: 1.5; }
@media (max-width: 520px) { .vigil-block { flex-direction: column; text-align: center; } .vigil-say { text-align: center; } }

/* ==========================================================================
   TYPE SCALE + IDENTITY
   The page measured 36 distinct font sizes and 29 letter-spacings. Seven of
   those sizes sat within 1.4px of each other, which is not a decision, it is
   the residue of writing each rule alone. Everything below collapses onto an
   eight-step scale and three letter-spacings.

   Display moves to Libre Caslon. Caslon is the lineage of American official
   documents, and a serif display is the one thing the generated-bold-landing
   -page look never reaches for.
   ========================================================================== */
:root {
  /* scale, base 17px */
  /* ONE scale for the whole site (2026-09-25). Seven text sizes, and the
     three biggest scale down on small screens. Use these tokens, never a
     raw number: a new size needs a reason good enough to add a step here. */
  --t-2xs: .75rem;     /* 12  tiny labels, badges, the footer line */
  --t-xs:  .875rem;    /* 14  small print, meta, kickers, help text */
  --t-sm:  1rem;       /* 16  body, buttons, form labels and inputs */
  --t-md:  1rem;       /* 16  (same as sm, kept for old rules) */
  --t-lg:  1.1875rem;  /* 19  intro lines, card titles */
  --t-xl:  clamp(1.1875rem, 1.8vw, 1.5rem);/* 19-24  small headings, prices */
  --t-2xl: clamp(1.625rem, 2.6vw, 2rem);    /* 26-32  big numbers */
  --t-3xl: clamp(2rem, 3.4vw, 2.5rem);      /* 32-40  section headings */
  --t-display: clamp(2.5rem, 5.6vw, 3.9rem);/* 40-62  page titles */

  --ls-tight: -.022em;
  --ls-flat: 0;
  --ls-wide: .13em;

  --display: 'Libre Caslon Display', 'Libre Caslon Text', Georgia, serif;

  /* printed-document palette */
  --ink:      #141A22;
  --ink-2:    #1F2833;
  --ink-3:    #3D4A5C;
  --coral:    #8C2F2A;   /* oxblood, white on it = 8.38:1 */
  --coral-dk: #6E211D;
  --gold:     #A07A3C;   /* brass */
  --gold-dk:  #7D5E28;
  --gold-text:#7D5E28;   /* 5.48:1 on bone */
  --cream:    #F7F3EA;
  --cream-2:  #EDE6D8;
  --fg-soft:  #4E5766;
  --fg-faint: #616A78;
}
.on-ink, .calc-out, .grab, .plan.is-best, .store-cta, .stickybar, .foot, .page-head {
  --fg-soft: #B3BCCB; --fg-faint: #8D97A8;
}

/* display face, one tracking, one weight */
h1, h2, h3, .brand-name, .plan-price, .calc-price, .step3-n, .fig b, .band b,
.rate-amt, .tier-range, .sub-price, .drop-t, .offer-price, .rail-card h4,
.vigil-say b, .floor b, .mini-more, details.qa summary, .tcard h3, .wcard h3,
.gitem h3, .stats dd, .plan h3, .tier-name, .rate-name, .sub-name {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: var(--ls-tight);
}

/* the eight steps, applied */
h1 { font-size: clamp(2.5rem, 5.6vw, 3.9rem); line-height: 1.02; }
h2 { font-size: var(--t-3xl); line-height: 1.06; }
h3, .plan h3 { font-size: var(--t-xl); line-height: 1.14; }
body { font-size: var(--t-md); }

.lede, .oneliner, .hero-sub { font-size: var(--t-lg); line-height: 1.5; letter-spacing: var(--ls-flat); }

.beat p, .step3 p, .fig span, .gain p, .note p, .wcard p, .gitem p, .tcard p,
.plan-for, .tier-for, .rate-desc, .rate-what, .sub p, .oneoff > p, .floor p,
.qa-a, .vigil-say p, .rail-card li, .drop-s, .magnet p:not(.lede), .grab p,
.store-cta p, .price-note, .field label, .rcard span, .opt span, .slot-label,
.calc-note, .foot-brand p, .foot a, .mini b, .slot-file, .magnet-list li {
  font-size: var(--t-sm); letter-spacing: var(--ls-flat);
}

.wcard-meta, .gitem-tags, .tcard-meta, .band em, .grab-note, .calc-foot,
.figs-note, .ba-cap, .store-count, .plan-price small, .sub-price small,
.rate-amt small, .tier-unit, .offer-terms, .card-foot, .field .hint,
.rcard small, .slot-label small, .menu-panel li a small, .foot-bot span {
  font-size: var(--t-xs);
}

/* labels in sans capitals with light tracking; the mono is kept only for
   step numbers and clock times (Akul found mono capitals hard to read) */
.kicker, .pill, .filter, .menu-panel h6, .foot h5, .trust-lab, .calc-out-lab,
.tcard-badge, .plan-flag, .ba-tab, .slot-btn, .fieldset legend, .brand-ref,
.stats dt, .calc-lab output {
  font-family: var(--body); letter-spacing: .06em; text-transform: uppercase;
}
.rail-num, .beat-time, .step3-n { font-family: var(--mono); letter-spacing: var(--ls-wide); }
.kicker, .pill, .menu-panel h6, .foot h5, .trust-lab, .calc-out-lab,
.tcard-badge, .plan-flag, .ba-tab, .slot-btn, .brand-ref, .stats dt {
  font-size: var(--t-2xs);
}
.filter, .fieldset legend, .beat-time, .calc-lab output, .rail-num { font-size: var(--t-xs); }

/* display numerals stay in the display face, not the mono */
.step3-n { font-family: var(--display); letter-spacing: var(--ls-tight); text-transform: none; font-size: var(--t-2xl); }
.stats dd { font-size: var(--t-xl); }
.plan-price, .calc-price { font-size: var(--t-3xl); }
.fig b, .band b, .rate-amt, .tier-range, .sub-price { font-size: var(--t-xl); }

.btn { font-size: var(--t-sm); letter-spacing: var(--ls-flat); }
.btn-lg { font-size: var(--t-md); }
.nav .btn { font-size: var(--t-xs); }
.nav-links a, .menu-btn { font-size: var(--t-sm); }
.menu-panel li a { font-size: var(--t-sm); }
details.qa summary { font-size: var(--t-lg); }

/* ==========================================================================
   SCALE CLEANUP
   1. Brass at #A07A3C measured 4.45:1 against ink, a hair under AA. #A67F40
      lifts it to 4.79:1 without changing the colour perceptibly.
   2. Card titles kept their own sizes because `.beat h3` outranks a bare `h3`.
      They are named here and split across two steps by role: card titles read
      at lede size, section headings at the step above.
   ========================================================================== */
:root { --gold: #A67F40; }

.wcard h3, .gitem h3, .tcard h3, .beat h3, .gain h3, .note h3, .step3 h3,
.mini b, .vigil-say b, .floor b, .rail-card h4, .drop-t {
  font-size: var(--t-lg); line-height: 1.2;
}
.grab h3, .oneoff h3, .store-cta h3, .gate h3, .plan h3,
.tier-name, .rate-name, .sub-name {
  font-size: var(--t-xl); line-height: 1.14;
}
.shot-zoom, .card-head, .mini-more, .tcard-badge, .grab-note, .calc-foot,
.figs-note, .store-count, .foot-bot span, .field .hint, .rcard small,
.slot-label small, .menu-panel li a small, .drop-file, .lb-count {
  font-size: var(--t-2xs);
}
.offer-price small, .plan-price small, .sub-price small, .rate-amt small,
.tier-unit, .stats dt, .calc-out-lab { font-size: var(--t-2xs); }
.punch p, .shout p { font-size: var(--t-2xl); line-height: 1.16; }

/* ==========================================================================
   CHROMA
   The oxblood/brass pass bought sophistication by draining saturation, and a
   low-chroma palette reads as dull however well it is set. The structure was
   never the problem, so the bones stay and the accents get their chroma back:
   a vivid scarlet that still belongs to stamps and red-team markup, and a
   bright amber against a warmer, brighter paper.

     white on #C62B1C  = 5.58:1
     ink   on #E8A317  = 8.04:1
     #7D5E28 on paper  = 5.6:1
   ========================================================================== */
:root {
  --cream:    #FCF8EF;
  --cream-2:  #F4EBD8;
  --coral:    #C62B1C;
  --coral-dk: #9E1F13;
  --gold:     #E8A317;
  --gold-dk:  #8A6410;
  --gold-text:#7D5E28;
  --ink:      #121820;
  --ink-2:    #1C2530;
  --ink-3:    #3A4655;
}

/* ==========================================================================
   GRID SHRINK GUARDS
   Lost in the bold rewrite. Grid and flex children default to min-width:auto,
   so a datetime input's fixed intrinsic width pushed the hero column 26px
   wider than its container and pulled the headline under the scrollbar.
   ========================================================================== */
.hero-grid > *, .split > *, .magnet-grid > *, .intake-grid > *, .calc > *,
.plans > *, .tiers > *, .steps3 > *, .beats > *, .figs > *, .subs > * { min-width: 0; }
.card, .grab, .form-card, .calc-in, .calc-out, .plan, .tier, .sub { min-width: 0; }
.field input, .field textarea, .field select { min-width: 0; max-width: 100%; }
.hero h1, .hero-sub { overflow-wrap: break-word; }

/* ==========================================================================
   2026 PALETTE — cool, vivid, flat
   Cream is on every list of AI-generated clusters, and warm beige plus a
   serif reads as heritage, not new. Ground moves to a cool near-white, the
   accent to an electric cobalt, and the highlight to a lime that nothing in
   the generated-design world reaches for.

     white on #2348F0 = 6.37:1
     ink   on #CDF546 = 14.98:1
     ink   on #F4F6F8 = 17.6:1
     #1B3BC7 on white = 7.78:1
   ========================================================================== */
:root {
  --cream:    #F4F6F8;   /* cool paper, no yellow */
  --cream-2:  #E7ECF1;
  --white:    #FFFFFF;
  --ink:      #0D1117;
  --ink-2:    #161C26;
  --ink-3:    #38445A;

  --coral:    #2348F0;   /* cobalt, CTA only */
  --coral-dk: #1637C4;
  --gold:     #CDF546;   /* lime highlight */
  --gold-dk:  #1B3BC7;
  --gold-text:#1B3BC7;

  --fg-soft:  #4A5568;
  --fg-faint: #5C6779;

  /* one family for everything (2026-09-25): headings are Public Sans 700.
     Bricolage never loaded (its font request was invalid), so this is how
     the site has always looked. */
  --display: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
}
.on-ink, .calc-out, .grab, .plan.is-best, .store-cta, .stickybar, .foot, .page-head {
  --fg-soft: #AEB9CC; --fg-faint: #8D99AE;
}

/* the display face is a contemporary variable grotesque, set tight and heavy */
h1, h2, h3, .brand-name, .plan-price, .calc-price, .step3-n, .fig b, .band b,
.rate-amt, .tier-range, .sub-price, .drop-t, .offer-price, .rail-card h4,
.vigil-say b, .floor b, .mini-more, details.qa summary, .tcard h3, .wcard h3,
.gitem h3, .stats dd, .plan h3, .tier-name, .rate-name, .sub-name {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -.03em;
  font-variation-settings: 'wdth' 100, 'opsz' 40;
}

/* the pulsing live dot is the most recognisable generated-site tell there is */
.dot { display: none; }

/* the mark was a circle inside a language of hard rectangles */
.brand-mark { width: 30px; height: 30px; border-radius: 0; }
@media (max-width: 400px) { .brand-mark { width: 25px; height: 25px; } }

/* lime highlight behind the headline word, squared off */
.hero h1 mark, mark { background: var(--gold); color: var(--ink); padding: 0 .1em; }

/* #2348F0 carried a violet cast, and blue-into-purple is the most flagged
   generated-design signature there is. #0B5FFF is a true electric blue with
   no red in it. White on it measures 5.17:1. */
:root { --coral: #0B5FFF; --coral-dk: #0A4AC8; --gold-dk: #0A3FA8; --gold-text: #0A3FA8; }

/* ==========================================================================
   SHARE LOOP
   The pack is the viral asset, not cash. A proposal manager forwards a useful
   template to a colleague because it makes them look useful, which is exactly
   the motivation the B2B referral research identifies. Every downloader enters
   the same loop, so it compounds instead of running as a campaign.
   ========================================================================== */
.share { background: var(--ink); color: var(--cream); }
.share h2 { color: var(--cream); }
.share-grid { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,1fr); gap: clamp(28px,3.6vw,52px); align-items: center; }
@media (max-width: 880px) { .share-grid { grid-template-columns: 1fr; gap: 30px; } }
.share-grid > * { min-width: 0; }

.loop { display: grid; gap: 0; border: 2px solid rgba(244,246,248,.22); margin-top: 24px; }
.loop-step { display: grid; grid-template-columns: 34px minmax(0,1fr); gap: 14px; padding: 16px 18px; border-bottom: 2px solid rgba(244,246,248,.22); align-items: start; }
.loop-step:last-child { border-bottom: 0; }
.loop-n {
  font-family: var(--mono); font-size: var(--t-2xs); font-weight: 700;
  letter-spacing: var(--ls-wide); color: var(--ink); background: var(--gold);
  display: grid; place-items: center; height: 24px;
}
.loop-step b { display: block; font-size: var(--t-sm); font-weight: 700; color: var(--cream); margin-bottom: 3px; }
.loop-step span { display: block; font-size: var(--t-xs); color: var(--fg-soft); line-height: 1.5; }

.linkbox { background: var(--ink-2); border: 2px solid var(--gold); padding: 20px; }
.linkbox p { font-size: var(--t-xs); color: var(--fg-soft); margin: 0 0 12px; }
.linkrow { display: flex; gap: 0; border: 2px solid var(--cream); }
.linkrow input {
  flex: 1; min-width: 0; border: 0; background: var(--cream); color: var(--ink);
  font-family: var(--body); font-size: var(--t-xs); padding: 11px 12px;
  text-overflow: ellipsis;
}
.linkrow input:focus { outline: none; }
.linkrow button {
  flex: none; border: 0; border-left: 2px solid var(--ink);
  background: var(--gold); color: var(--ink);
  font-family: var(--body); font-size: var(--t-2xs); font-weight: 700;
  letter-spacing: var(--ls-wide); text-transform: uppercase; padding: 11px 15px;
}
.linkrow button.done { background: var(--cream); }
.unlock {
  margin-top: 14px; padding-top: 14px; border-top: 2px solid rgba(244,246,248,.22);
  font-size: var(--t-xs); color: var(--fg-soft);
}
.unlock b { color: var(--gold); }

.partner {
  margin-top: clamp(26px,3vw,38px); border-left: 4px solid var(--gold);
  padding: 16px 20px; background: var(--ink-2);
}
.partner b { display: block; font-size: var(--t-sm); color: var(--cream); margin-bottom: 4px; }
.partner p { font-size: var(--t-xs); color: var(--fg-soft); margin: 0; max-width: 64ch; }

/* Ami: a pixel short on a 256x112 canvas. ami.js sets the width in whole
   device pixels so every pixel stays square; pixelated keeps the edges hard. */
.ami-block { margin-top: 34px; padding-top: 30px; border-top: 2px solid var(--rule); }
.ami-scene { max-width: 1100px; margin: 0 auto 16px; display: flex; justify-content: center; }
.ami-scene canvas {
  display: block; max-width: calc(100% - 6px); height: auto; margin: 3px;
  background: var(--ink); box-shadow: 0 0 0 3px #26324A;
  image-rendering: crisp-edges; image-rendering: pixelated;
}

.ami-track {
  list-style: none; max-width: 1100px; margin: 0 auto; padding: 12px 0 0;
  border-top: 2px solid rgba(244,246,248,.16);
  display: grid; grid-template-columns: 1fr auto auto; gap: 6px 28px; text-align: left;
}
.ami-track li {
  display: flex; gap: 10px; align-items: baseline; min-width: 0;
  font-family: var(--body); font-size: var(--t-2xs); font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: var(--fg-soft);
}
.ami-track b { color: var(--cream); font-family: var(--mono); font-weight: 700; letter-spacing: 0; font-size: var(--t-xs); }
.ami-track .is-hit b { color: var(--gold); }
@media (max-width: 560px) { .ami-track { grid-template-columns: 1fr; } }

.ami-say { max-width: 58ch; margin: 24px auto 0; }
.ami-say b { display: block; font-family: var(--display); font-size: var(--t-lg); color: var(--cream); letter-spacing: -.02em; margin-bottom: 6px; }
.ami-say p { color: var(--fg-soft); font-size: var(--t-sm); margin: 0; line-height: 1.55; }

/* .share paints an ink ground but was not in the dark-token group, so its
   body copy inherited the light-mode grey at 2.51:1. */
.share, .linkbox, .partner, .loop {
  --fg-soft: #AEB9CC;
  --fg-faint: #8D99AE;
}
.share .lede { color: var(--fg-soft); }

/* .loop-step span sets the soft grey and outranks .loop-n, which is a span
   too, so the step numbers rendered grey-on-lime at 1.58:1. */
.loop-step .loop-n { color: var(--ink); }

/* payout table: the number has to be the loudest thing in the block */
.payout { margin-top: 18px; padding-top: 16px; border-top: 2px solid rgba(244,246,248,.22); }
.payout-lab { font-family: var(--body); font-size: var(--t-2xs); font-weight: 700; letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--fg-faint); margin: 0 0 10px; }
.payout-row { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 8px 0; border-bottom: 1px solid rgba(244,246,248,.14); }
.payout-row:last-child { border-bottom: 0; }
.payout-row span { font-size: var(--t-xs); color: var(--fg-soft); min-width: 0; }
.payout-row b { font-family: var(--display); font-size: var(--t-lg); color: var(--cream); letter-spacing: -.03em; font-variant-numeric: tabular-nums; flex: none; }
.payout-row.is-top b { color: var(--gold); font-size: var(--t-xl); }
.fineprint { margin-top: 16px; font-size: var(--t-xs); color: var(--fg-faint); max-width: 62ch; }
.share .lede b { color: var(--gold); }
.share .fineprint b { color: var(--cream); font-weight: 700; }

/* .linkrow input:focus drops the outline, so the row carries it instead.
   Without this a keyboard user cannot see the field, a 2.4.7 failure. */
.linkrow:focus-within { outline: 3px solid var(--gold); outline-offset: 3px; }
.linkrow input::placeholder { color: #5C6779; opacity: 1; }
.linkrow button:focus-visible { outline: 3px solid var(--ink); outline-offset: -5px; }

/* refer.html: the share block is the page head there, so it carries the h1 */
.share h1 { color: var(--cream); font-size: clamp(2.2rem, 4.6vw, 3.4rem); }

.ways { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px,100%),1fr)); gap: clamp(18px,2.4vw,28px); }
.way { border: 2px solid var(--ink); padding: clamp(22px,2.6vw,32px); min-width: 0; background: var(--white); }
.way-to {
  display: inline-block; margin: 0 0 14px; padding: 5px 10px;
  font-family: var(--body); font-size: var(--t-2xs); font-weight: 700;
  letter-spacing: var(--ls-wide); text-transform: uppercase;
  background: var(--gold); color: var(--ink);
}
.way h3 { margin: 0 0 8px; }
.way > p:not(.way-to) { color: var(--fg-soft); font-size: var(--t-sm); margin: 0 0 16px; }
.way ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; border-top: 2px solid var(--ink); padding-top: 14px; }
.way li { display: grid; grid-template-columns: 16px minmax(0,1fr); gap: 8px; font-size: var(--t-sm); color: var(--ink); min-width: 0; }
.way li::before { content: "+"; font-family: var(--body); font-weight: 700; color: var(--coral); }
.grab-note a { color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* referral link: email first, so every link is someone we can pay */
.ref-mail {
  display: inline-block; margin-top: 12px;
  font-size: var(--t-xs); font-weight: 700; color: var(--gold);
  text-decoration: underline; text-underline-offset: 3px;
}
.ref-status { font-size: var(--t-xs); margin: 10px 0 0; min-height: 0; }
.ref-status:empty { display: none; }
.ref-status.err { color: #FFB4A8; }
.linkbox .ref-status.note { color: var(--fg-faint); }

.payterms { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 6px; }
.payterms li {
  display: grid; grid-template-columns: 14px minmax(0,1fr); gap: 8px;
  font-size: var(--t-xs); color: var(--fg-soft); min-width: 0;
}
.payterms li::before { content: "+"; font-family: var(--body); font-weight: 700; color: var(--gold); }

/* capability list: what we produce, stated plainly. Its absence was the first
   thing a proposal director would notice, because it is their first question. */
.caps-wrap { margin-bottom: clamp(30px, 3.6vw, 46px); }
.caps-lab { font-family: var(--body); font-size: var(--t-2xs); font-weight: 700; letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--fg-faint); margin: 0 0 14px; }
.caps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px,100%),1fr)); gap: 0 28px; border-top: 2px solid var(--ink); }
.caps li { display: block; position: relative; padding: 12px 0 12px 30px; border-bottom: 1px solid var(--rule); min-width: 0; font-size: var(--t-sm); }
.caps li::before { content: attr(data-n); position: absolute; left: 0; top: 15px; font-family: var(--mono); font-size: var(--t-2xs); font-weight: 700; color: var(--gold-text); letter-spacing: var(--ls-wide); }
.caps b { font-weight: 700; color: var(--ink); }
.caps span { color: var(--fg-soft); }

/* ==========================================================================
   FAQ, BALANCED
   The list used to stop at 860px with its answers capped at 68ch, leaving a
   dead third of the page on the right and a second gap inside every open
   card. Now the heading holds the left column, the questions fill the right,
   and each answer runs the width of its card. One border weight throughout,
   so opening a question no longer nudges the text by a pixel.
   ========================================================================== */
.faq-grid {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: clamp(28px, 5vw, 72px); align-items: start;
}
.faq-side { position: sticky; top: 104px; }
.faq-side .sec-head { margin-bottom: 18px; }
.faq-note { color: var(--fg-soft); font-size: var(--t-sm); line-height: 1.55; max-width: 40ch; margin: 0 0 20px; }
.faq-list { max-width: none; }
details.qa, details.qa[open] { border-width: 2px; }
details.qa .qa-a { max-width: none; margin: 0 22px; padding: 16px 42px 22px 0; }
@media (max-width: 880px) {
  .faq-grid { grid-template-columns: minmax(0, 1fr); }
  .faq-side { position: static; }
  details.qa .qa-a { padding-right: 0; }
}

/* ==========================================================================
   LESS SCROLL
   The page ran to 9,200px at 1440 wide. Same content, reorganised: the first
   two screens answer what, how, how much and why, and every section after
   that holds one row of detail. Copy is set to land in one or two lines at
   desktop instead of wrapping inside narrow measure caps.
   ========================================================================== */
.glance, #work, #pricing, #faq, .final { padding-block: clamp(44px, 5vw, 72px); }

/* hero: tighter, one screen at 1440x900 */
.hero { padding-block: clamp(30px, 3.4vw, 50px) clamp(30px, 3.4vw, 46px); }
.hero-sub { max-width: 34em; }
.hero-cta { margin-top: 22px; }
.hero .card { padding: 18px 22px; }
.hero .card-head { margin-bottom: 12px; padding-bottom: 10px; }
.hero .drop.compact { padding: 14px 16px; margin-bottom: 11px; }
.hero .drop-ico { width: 24px; height: 24px; margin-bottom: 6px; }
.hero .card .field { margin-bottom: 10px; }
.hero .slots { margin-bottom: 11px; }
.trust { margin-top: 26px; padding-top: 16px; }

/* a heading row: title left, one line of context right */
.head-row {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 14px clamp(28px, 4vw, 64px); align-items: end; margin-bottom: clamp(22px, 2.6vw, 34px);
}
.head-row h2 { margin: 0; }
.head-row .lede { margin: 0; max-width: none; }
.head-row .lede a { color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 880px) { .head-row { grid-template-columns: minmax(0, 1fr); align-items: start; } }

/* the whole picture: one spec sheet, five cells */
.glance { background: var(--cream); }
.glance-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 2px solid var(--ink); background: var(--white);
}
.gl { padding: clamp(18px, 2vw, 26px); min-width: 0; border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); }
.gl-what { grid-column: span 2; }
.gl-how, .gl-deal { border-right: 0; }
.gl-cost, .gl-why, .gl-deal { border-bottom: 0; }
.gl-lab {
  font-family: var(--body); font-size: var(--t-2xs); font-weight: 700; letter-spacing: var(--ls-wide);
  text-transform: uppercase; color: var(--fg-faint); margin: 0 0 12px;
}
.gl-caps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 28px; }
.gl-caps li, .gl-steps li { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.gl-caps b, .gl-steps b { font-size: var(--t-sm); color: var(--ink); }
.gl-caps span, .gl-steps span { font-size: var(--t-xs); color: var(--fg-soft); }
.gl-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 13px; counter-reset: step; }
.gl-steps li { position: relative; padding-left: 36px; counter-increment: step; }
.gl-steps li::before {
  content: "0" counter(step); position: absolute; left: 0; top: 1px;
  font-family: var(--mono); font-size: var(--t-2xs); font-weight: 700;
  background: var(--gold); color: var(--ink); padding: 3px 5px;
}
.gl-big { font-family: var(--display); font-size: var(--t-2xl); letter-spacing: -.03em; line-height: 1; color: var(--ink); margin: 0 0 10px; }
.gl p:not(.gl-lab):not(.gl-big) { font-size: var(--t-sm); color: var(--fg-soft); margin: 0; }
.gl-link { display: inline-block; margin-top: 12px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.gl-cost { background: var(--ink); }
.gl-cost .gl-lab { color: #8D99AE; }
.gl-cost .gl-big, .gl-cost .gl-link { color: var(--gold); }
.gl-cost p:not(.gl-lab):not(.gl-big) { color: #AEB9CC; }
.gl-why { background: var(--gold); }
.gl-why .gl-lab { color: #2E3A0A; }
.gl-why p:not(.gl-lab):not(.gl-big) { color: var(--ink); }
.gl-promises { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.gl-promises li { position: relative; padding-left: 22px; font-size: var(--t-sm); font-weight: 600; color: var(--ink); }
/* a drawn tick, so the stylesheet stays plain ASCII */
.gl-promises li::before {
  content: ""; position: absolute; left: 4px; top: .28em; width: 5px; height: 10px;
  border: solid var(--coral); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg);
}
@media (max-width: 880px) {
  .glance-grid { grid-template-columns: minmax(0, 1fr); }
  .gl-what { grid-column: auto; }
  .gl, .gl-cost, .gl-why { border-right: 0; border-bottom: 2px solid var(--ink); }
  .gl-deal { border-bottom: 0; }
}
@media (max-width: 560px) { .gl-caps { grid-template-columns: minmax(0, 1fr); } }

/* the free pack: one strip, not a section */
.strip { padding-block: clamp(28px, 3.2vw, 40px); }
.strip-grid {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .7fr) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 44px); align-items: center;
}
.strip-copy h2 { font-size: var(--t-3xl); margin: 10px 0 6px; }
.strip-copy p { margin: 0; font-size: var(--t-sm); }
.strip-art { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.strip-art img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border: 2px solid var(--ink); background: var(--white); }
.grab-inline { padding: 16px 18px; }
.grab-inline label { display: block; font-size: var(--t-xs); font-weight: 700; color: var(--cream); margin-bottom: 8px; }
.grab-row { display: flex; min-width: 0; }
.grab-row input {
  flex: 1; min-width: 0; border: 2px solid var(--cream); border-right: 0; background: var(--white);
  color: var(--ink); font: inherit; font-size: var(--t-sm); padding: 10px 12px;
}
.grab-row input:focus { outline: 3px solid var(--gold); outline-offset: 2px; }
.grab-row .btn { flex: none; box-shadow: none; }
.grab-inline .grab-note { margin: 10px 0 0; text-align: left; }
.grab-inline .grab-note a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.grab-inline .grab-done p { margin-bottom: 12px; }
@media (max-width: 980px) {
  .strip-grid { grid-template-columns: minmax(0, 1fr); }
  .strip-art { display: none; }
}

/* work: one row of four, the rest on work.html */
.work-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 22px); }
/* the whole spread, never cropped: every piece here is a 16:9 spread, and
   contain keeps any other shape whole too (Akul, 2026-09-25) */
.work-row .wcard-img img { aspect-ratio: 16 / 9; object-fit: contain; object-position: center; }
.work-row .wcard-body { padding-top: 10px; gap: 4px; }
.work-row .wcard h3 { font-size: var(--t-sm); }
/* a small capital tag, not body text (".wcard p" would make it 16px) */
.work-row .wcard-meta { margin-top: 0; padding-top: 0; font-size: var(--t-2xs); font-weight: 600; letter-spacing: .06em; }
@media (max-width: 980px) { .work-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .work-row { grid-template-columns: minmax(0, 1fr); } }

/* pricing: two tabs instead of one long stack */
.ptabs { display: inline-flex; justify-self: end; border: 2px solid var(--ink); background: var(--white); }
.ptab {
  font-family: var(--body); font-size: var(--t-sm); font-weight: 700; color: var(--ink);
  background: transparent; border: 0; padding: 10px 18px; cursor: pointer;
}
.ptab + .ptab { border-left: 2px solid var(--ink); }
.ptab[aria-selected="true"] { background: var(--ink); color: var(--cream); }
.ptab:focus-visible { outline: 3px solid var(--coral); outline-offset: 2px; }
@media (max-width: 880px) { .ptabs { justify-self: start; } }
#pricing .calc { margin-bottom: 18px; }
#pricing .calc-row { margin-bottom: 16px; }
.bands-slim { margin-top: 0; }
.floor-line { margin: 16px 0 0; font-size: var(--t-sm); color: var(--fg-soft); }
.floor-line b { color: var(--ink); }

/* FAQ: same two columns, less air per question */
#faq .faq-list { gap: 8px; }
#faq details.qa summary { padding-top: 15px; padding-bottom: 15px; }

/* closing: the call to action and Ami side by side */
.final-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(28px, 4vw, 64px); align-items: center; text-align: left;
}
.final-grid h2 { font-size: var(--t-display); margin-inline: 0; }
.final-grid .lede { margin-inline: 0; }
.final-grid .final-cta, .final-grid .assure { justify-content: flex-start; }
.final-grid .ami-block { margin-top: 0; padding-top: 0; border-top: 0; }
.final-grid .ami-say { margin: 16px 0 0; max-width: none; }
@media (max-width: 980px) { .final-grid { grid-template-columns: minmax(0, 1fr); } }

/* hero headline on two lines: a wider text column, a slightly smaller face */
/* desktop only: below 981px the hero stacks, as the base rule says */
@media (min-width: 981px) { .hero-grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); } }
.hero h1 { font-size: clamp(2.5rem, 3.6vw, 3.15rem); }
.faq-note { max-width: none; }

/* the Ami timeline in the narrower closing column: labels drop under their times when tight */
.final-grid .ami-track { grid-template-columns: repeat(3, auto); justify-content: space-between; column-gap: 16px; }
.final-grid .ami-track li { flex-wrap: wrap; column-gap: 8px; row-gap: 2px; }

/* hero balance: the client logos anchor the bottom of the text column, so it
   ends where the quote card ends instead of leaving a dead block beside it */
.hero .assure { margin-bottom: 28px; }
.hero .trust { margin-top: 0; padding-top: 16px; border-top-width: 2px; }
@media (min-width: 981px) {
  .hero-grid { align-items: stretch; }
  .hero-grid > div:first-child { display: flex; flex-direction: column; }
  .hero .trust { margin-top: auto; }
}
.hero .drop.compact { padding: 12px 16px; }
.hero .drop-ico { width: 22px; height: 22px; margin-bottom: 4px; }
.hero .drop-t { margin-bottom: 2px; }
.hero .card-foot { margin-top: 10px; }

/* client logos: several are white artwork made for dark grounds, so on the
   light hero every mark is shown as one ink silhouette, in an even 3 x 2 */
.hero .trust-row {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px 28px; align-items: center;
}
.hero .trust-row img {
  width: 100%; max-width: 150px; height: 28px;
  object-fit: contain; object-position: left center;
  filter: brightness(0); opacity: .62;
}
.hero .trust-row img:hover { filter: brightness(0); opacity: .9; }
/* Smoky Hill's mark is portrait, so it gets a little more height to read */
.hero .trust-row img[src*="smockyhills-mark"] { height: 38px; }

/* ==========================================================================
   LABELS THAT READ
   Kickers and block labels were bold monospace capitals with wide tracking,
   the hardest way to set 12px type: capitals remove word shapes, tracking
   pulls the letters apart, and a monospace gives every letter the same
   width. Kickers are now sentence case in the body face at 14px. Block
   labels keep capitals for structure, in the sans, a size up, with about
   half the tracking.
   ========================================================================== */
.kicker {
  font-family: var(--body); font-size: var(--t-xs); font-weight: 600;
  letter-spacing: .005em; text-transform: none; line-height: 1.35;
  padding: 5px 12px;
}
/* the hero text column is a flex column now; the kicker stays a chip */
.hero-grid > div:first-child > .kicker { align-self: flex-start; }
.gl-lab, .trust-lab, .card-head, .calc-out-lab, .payout-lab, .caps-lab,
.foot h5, .menu-panel h6 {
  font-family: var(--body); font-weight: 700; font-size: var(--t-2xs);
  letter-spacing: .06em; text-transform: uppercase;
}
/* the small print that sat in the same typewriter style: guarantees, the
   quote note, the logo tagline and the optional tag, all into the sans.
   The mono stays only where it earns it: step numbers like 01, 02, 03. */
.assure span { font-family: var(--body); font-size: var(--t-xs); font-weight: 600; letter-spacing: 0; text-transform: none; }
.card-foot { font-family: var(--body); font-size: var(--t-xs); letter-spacing: 0; }
.brand-ref { font-family: var(--body); font-size: var(--t-2xs); font-weight: 600; letter-spacing: .08em; }
.slots > summary small { font-family: var(--body); font-size: var(--t-2xs); font-weight: 700; letter-spacing: .06em; }
.brand-ref { color: #8D99AE; }  /* was #6E7899 at 4.33:1 on the nav; now clears 4.5 */

/* ==========================================================================
   AUDIT FIXES
   ========================================================================== */
/* Footer and intake-rail headings were h5 and h4 straight after an h2 or h3,
   which breaks the outline screen readers navigate by. They are h2 now,
   styled exactly as before. */
.foot h2.foot-h {
  font-family: var(--body); font-size: var(--t-2xs); font-weight: 700; letter-spacing: .06em;
  line-height: 1.55; text-transform: uppercase; color: #8D99AE; margin: 0 0 13px;
}
.rail-card h2.rail-h {
  font-family: var(--display); font-size: var(--t-lg); font-weight: 700; letter-spacing: -.03em;
  line-height: 1.2; text-transform: none; color: var(--ink); margin: 0 0 12px;
}

/* The focus ring was lime everywhere: about 1.2:1 on the light sections, so a
   keyboard user could not see where they were. Blue on light (5:1), lime kept
   on the dark sections where it is the high-contrast choice. */
:focus-visible { outline: 3px solid var(--coral); outline-offset: 2px; }
.nav :focus-visible, .on-ink :focus-visible, .foot :focus-visible, .share :focus-visible,
.grab :focus-visible, .calc-out :focus-visible, .stickybar :focus-visible,
.gl-cost :focus-visible, .page-head :focus-visible, .lb :focus-visible { outline-color: var(--gold); }
.field :is(input, textarea):focus { box-shadow: inset 0 0 0 2px var(--coral); }
.opt input:focus-visible + span { outline-color: var(--coral); }
.calc-out .btn:focus-visible { outline-color: var(--gold); }

/* the slider thumb matches the 24px minimum target in every browser */
input[type=range].calc-range::-moz-range-thumb { width: 24px; height: 24px; }

/* ==========================================================================
   ONE MONTHLY PLAN: the plan card beside the rules that keep it workable
   ========================================================================== */
.plan-terms { background: var(--white); }
.pterms { margin: 4px 0 24px; padding: 0; }
.pterms > div {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding: 12px 0; border-top: 1px solid rgba(13,17,23,.14);
}
.pterms > div:last-child { border-bottom: 1px solid rgba(13,17,23,.14); }
.pterms dt { font-size: var(--t-sm); color: var(--fg-soft); min-width: 0; }
.pterms dd { margin: 0; font-weight: 700; color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; }
.plan-terms .btn { white-space: normal; }
.plan .plan-price { margin-bottom: 0; }

/* ==========================================================================
   HOLD YOUR DATE: booking ahead, full width under the pricing panes
   ========================================================================== */
.hold {
  margin-top: 28px; padding: clamp(20px, 2.4vw, 28px);
  border: 2px solid var(--ink); background: var(--white);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: 16px 32px; align-items: end;
}
.hold-copy h3 { margin: 0 0 6px; }
.hold-copy p { margin: 0; font-size: var(--t-sm); color: var(--fg-soft); }
.hold-fields { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.3fr) auto; gap: 12px; align-items: end; }
.hold .field input[type=date], .hold .field input[type=email] {
  font: inherit; font-family: var(--body); font-size: var(--t-sm);
  padding: 11px 12px; border: 2px solid var(--ink); background: var(--white); color: var(--ink);
  width: 100%; min-width: 0; max-width: 100%; height: 48px;
}
.hold .btn { height: 48px; box-shadow: none; white-space: nowrap; }
.hold .form-status { grid-column: 1 / -1; margin-top: 0; }
@media (max-width: 980px) {
  .hold { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .hold-fields { grid-template-columns: minmax(0, 1fr); }
  .hold .btn { width: 100%; }
}
/* the flag now carries the founding-spots message, so it has to read at a glance */
.plan .plan-flag { font-family: var(--body); font-size: var(--t-xs); font-weight: 700; letter-spacing: 0; text-transform: none; padding: 5px 12px; }
/* monthly spots meter in the hold bar: ink squares are booked, lime are open */
.spots { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin-top: 14px; }
.spots[hidden] { display: none; }
.spots-row { display: flex; gap: 4px; }
.spots-row i { width: 16px; height: 16px; background: var(--gold); border: 2px solid var(--ink); }
.spots-row i.is-taken { background: var(--ink); }
.spots b { font-size: var(--t-sm); color: var(--ink); }

/* ==========================================================================
   NAV v2: service links first, one Templates menu, a Menu button on phones
   ========================================================================== */
/* the free pack leads the Templates menu instead of being a second,
   same-sounding top-level link */
.nav-links .menu-free {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 10px; align-items: center;
  padding: 10px 12px; margin: 0 0 14px; background: var(--gold); color: var(--ink);
  border: 2px solid var(--ink); text-decoration: none;
}
.nav-links .menu-free:hover { color: var(--ink); box-shadow: 3px 3px 0 var(--ink); }
.menu-free b { font-size: var(--t-sm); }
.menu-free small { grid-column: 2; font-size: var(--t-2xs); font-weight: 400; color: #2A3140; }
.menu-tag { grid-row: span 2; background: var(--ink); color: var(--gold); font-size: var(--t-2xs); font-weight: 700; padding: 4px 8px; }
/* hovering a paid item turned its text lime on a lime background */
.nav-links .menu-panel li a:hover { color: var(--ink); }
.menu-btn.is-active { color: var(--gold); }

.nav-toggle { display: none; }
.nav-bars, .nav-bars::before, .nav-bars::after { display: block; width: 16px; height: 2px; background: currentColor; }
.nav-bars { position: relative; }
.nav-bars::before, .nav-bars::after { content: ""; position: absolute; left: 0; }
.nav-bars::before { top: -5px; }
.nav-bars::after { top: 5px; }
.nav[data-nav-open="1"] .nav-bars { background: transparent; }
.nav[data-nav-open="1"] .nav-bars::before { top: 0; transform: rotate(45deg); }
.nav[data-nav-open="1"] .nav-bars::after { top: 0; transform: rotate(-45deg); }

@media (max-width: 900px) {
  .nav-toggle {
    display: inline-flex; align-items: center; gap: 9px; min-height: 40px; padding: 7px 12px;
    background: none; border: 2px solid #3A4358; color: var(--cream);
    font-family: var(--body); font-size: var(--t-xs); font-weight: 600; cursor: pointer;
  }
  .nav[data-nav-open="1"] .nav-toggle { border-color: var(--gold); color: var(--gold); }
  .nav[data-nav-open="1"] .nav-links {
    display: flex; flex-direction: column; align-items: stretch; gap: 0;
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--ink); border-bottom: 3px solid var(--gold);
    padding: 6px 16px 18px; max-height: calc(100vh - 60px); overflow-y: auto;
  }
  .nav[data-nav-open="1"] .nav-links > a,
  .nav[data-nav-open="1"] .menu-btn {
    display: flex; align-items: center; justify-content: space-between; width: 100%;
    min-height: 52px; padding: 0; font-size: var(--t-sm); color: var(--cream);
    border-bottom: 1px solid #262D3C;
  }
  .nav[data-nav-open="1"] .nav-links > a.is-active,
  .nav[data-nav-open="1"] .menu-btn.is-active { color: var(--gold); }
  .nav[data-nav-open="1"] .has-menu { display: block; }
  .nav[data-nav-open="1"] .menu-panel { position: static; min-width: 0; box-shadow: none; margin: 12px 0 4px; }
  .nav[data-nav-open="1"] .menu-panel::before { display: none; }
}
@media (max-width: 400px) {
  .nav-toggle { padding: 6px 9px; font-size: var(--t-2xs); gap: 7px; }
}
.plan.is-best li a { color: var(--gold); text-underline-offset: 3px; }
/* an accessibility rule made these links inline-flex rows, so each
   description ran into its title ("Proposal shellsFederal, state...") */
.nav-links .menu-panel li a { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 8px 10px; }
/* the nav's pale link colour was bleeding into the lime button */
.nav-links .menu-foot .btn, .nav-links .menu-foot .btn:hover { color: var(--ink); justify-content: center; }

/* ==========================================================================
   PRICING FIXES: readable labels in the per-project tab, room for the date
   ========================================================================== */
/* mono capitals were the one label style Akul found hard to read */
.calc-lab output, .band em, .calc-foot {
  font-family: var(--body); letter-spacing: 0; text-transform: none; font-style: normal;
}
.calc-lab output { font-size: var(--t-xs); font-weight: 700; }
.band em { font-size: var(--t-xs); font-weight: 600; color: var(--fg-soft); }
.calc-foot { font-size: var(--t-xs); color: #8D99AE; }
/* the date field was cut to "dd-mm-yyy" at tablet widths */
@media (min-width: 601px) { .hold-fields { grid-template-columns: minmax(150px, .9fr) minmax(0, 1.3fr) auto; } }
@media (max-width: 1100px) and (min-width: 601px) {
  .hold { grid-template-columns: minmax(0, 1fr); }
}
/* the sticky bar's small line and the rush tag were the last mono labels */
.stickybar-txt small, .calc-rush { font-family: var(--body); letter-spacing: 0; text-transform: none; }
.stickybar-txt small { font-size: var(--t-xs); font-weight: 400; }
.calc-rush { font-size: var(--t-xs); }

/* Ami mark: a 16 x 16 pixel drawing, so it renders at 32px (two screen
   pixels per art pixel) at every width; odd sizes would smear the pixels */
.brand-mark, .brand .brand-mark { width: 32px; height: 32px; align-self: center; image-rendering: pixelated; }
.brand { align-items: center; }
.brand-name, .brand-ref { line-height: 1; }

/* ==========================================================================
   HERO LOGO RAIL: two lanes of client logos running side by side, the top
   one drifting left and the bottom one right. Each track holds its logos
   twice and slides by exactly half its width, so the loop never jumps.
   Spacing is padding on each logo (not flex gap) to keep that half exact.
   ========================================================================== */
.logo-rail {
  display: grid; gap: 6px; overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
}
.rail-row { overflow: hidden; }
.rail-track { display: flex; width: max-content; }
.rail-track .dl { padding-right: 44px; }
.logo-rail:hover .rail-track { animation-play-state: paused; }
@media (prefers-reduced-motion: no-preference) {
  .rail-left .rail-track { animation: rail-left 26s linear infinite; }
  .rail-right .rail-track { animation: rail-right 32s linear infinite; }
}
@keyframes rail-left { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes rail-right { from { transform: translateX(-50%); } to { transform: translateX(0); } }

/* placeholder wordmarks: one ink colour, varied type and marks, so the wall
   reads like several real companies rather than one font repeated */
.dl {
  display: flex; align-items: center; gap: 9px; height: 44px; min-width: 0;
  color: var(--ink); opacity: .6; white-space: nowrap; overflow: hidden;
  font-family: var(--display); font-weight: 700; font-size: var(--t-sm); letter-spacing: -.02em;
}
.dl i { flex: none; width: 18px; height: 18px; background: currentColor; }
.dl-b { font-family: var(--body); font-weight: 700; font-size: var(--t-2xs); letter-spacing: .06em; text-transform: uppercase; }
.dl-b i { clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.dl-c { font-weight: 600; font-size: var(--t-sm); }
.dl-c i { background: none; border: 3.5px solid currentColor; border-radius: 50%; }
.dl-d { font-weight: 700; text-transform: lowercase; font-size: var(--t-lg); letter-spacing: -.03em; }
.dl-d i { width: 14px; height: 14px; margin: 0 2px; transform: rotate(45deg); }
.dl-e { font-family: var(--body); font-weight: 700; font-size: var(--t-sm); letter-spacing: -.01em; }
.dl-e i { background: linear-gradient(currentColor 0 0) top / 100% 6px no-repeat, linear-gradient(currentColor 0 0) bottom left / 60% 6px no-repeat; }
.dl-f { font-family: var(--body); font-weight: 400; font-size: var(--t-xs); letter-spacing: .08em; text-transform: uppercase; }
.dl-f i { clip-path: polygon(35% 0, 100% 0, 65% 100%, 0 100%); }
@media (max-width: 600px) {
  .rail-track .dl { padding-right: 32px; }
  .dl { font-size: var(--t-xs); } .dl-b { font-size: var(--t-2xs); } .dl-e, .dl-f { font-size: var(--t-xs); }
}

/* ==========================================================================
   HERO TITLE: words rise in, then "document" gets a highlighter swipe and
   "losing it." a red-pen underline, like a reviewer marking up a draft.
   Plays once on load; with reduced motion everything is simply there.
   ========================================================================== */
.hero-title .pen { position: relative; white-space: nowrap; }
.pen-line { position: absolute; left: -1%; bottom: -.16em; width: 102%; height: .24em; overflow: visible; pointer-events: none; }
.pen-line path { fill: none; stroke: #FF5A3C; stroke-width: 3.5; stroke-linecap: round; vector-effect: non-scaling-stroke; }
@media (prefers-reduced-motion: no-preference) {
  .hero-title .w { display: inline-block; animation: w-rise .7s cubic-bezier(.2, .75, .2, 1) both; animation-delay: calc(var(--i) * 70ms + 100ms); }
  /* .hero h1 mark set a solid lime background and outranked this rule */
  .hero h1.hero-title mark {
    background-color: transparent; background-image: linear-gradient(var(--gold), var(--gold));
    background-repeat: no-repeat; background-size: 0% 100%;
    animation: hl-swipe .5s cubic-bezier(.65, 0, .35, 1) 1s forwards;
  }
  .pen-line path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: pen-draw .55s ease-out 1.5s forwards; }
}
@keyframes w-rise { from { opacity: 0; transform: translateY(.5em); } to { opacity: 1; transform: none; } }
@keyframes hl-swipe { to { background-size: 100% 100%; } }
@keyframes pen-draw { to { stroke-dashoffset: 0; } }
/* the lanes' max-content tracks were widening the hero column (and the
   whole page) on phones: the rail must never size itself from its content */
.hero-grid > * { min-width: 0; }
.logo-rail { width: 100%; min-width: 0; contain: inline-size; }
/* very narrow phones: the Menu button keeps only its icon so the logo,
   Menu and "Send a draft" still fit on one bar */
@media (max-width: 360px) {
  .nav-toggle { padding: 6px 9px; min-height: 36px; }
  .nav-toggle-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .nav-in { gap: 6px; }
  .nav .btn { padding: 8px 9px; font-size: var(--t-2xs); }
  .brand-name { font-size: var(--t-sm); }
}


/* ==========================================================================
   AMI IN THE SUCCESS STATES: every "got it" moment shows the courier
   ========================================================================== */
.form-status.ok {
  padding-left: 62px; min-height: 48px;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2022%22%20shape-rendering%3D%22crispEdges%22%3E%3Crect%20x%3D%224%22%20y%3D%220%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%236E7899%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%222%22%20width%3D%224%22%20height%3D%222%22%20fill%3D%22%236E7899%22%2F%3E%3Crect%20x%3D%2222%22%20y%3D%222%22%20width%3D%226%22%20height%3D%222%22%20fill%3D%22%235E6B45%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%224%22%20width%3D%226%22%20height%3D%222%22%20fill%3D%22%236E7899%22%2F%3E%3Crect%20x%3D%2220%22%20y%3D%224%22%20width%3D%2210%22%20height%3D%222%22%20fill%3D%22%235E6B45%22%2F%3E%3Crect%20x%3D%226%22%20y%3D%226%22%20width%3D%226%22%20height%3D%222%22%20fill%3D%22%236E7899%22%2F%3E%3Crect%20x%3D%2218%22%20y%3D%226%22%20width%3D%2214%22%20height%3D%222%22%20fill%3D%22%230D1117%22%2F%3E%3Crect%20x%3D%226%22%20y%3D%228%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%236E7899%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%228%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%230D1117%22%2F%3E%3Crect%20x%3D%2210%22%20y%3D%228%22%20width%3D%224%22%20height%3D%222%22%20fill%3D%22%236E7899%22%2F%3E%3Crect%20x%3D%2220%22%20y%3D%228%22%20width%3D%228%22%20height%3D%222%22%20fill%3D%22%23AEB9CC%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%2210%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%236E7899%22%2F%3E%3Crect%20x%3D%2210%22%20y%3D%2210%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%230D1117%22%2F%3E%3Crect%20x%3D%2212%22%20y%3D%2210%22%20width%3D%224%22%20height%3D%222%22%20fill%3D%22%236E7899%22%2F%3E%3Crect%20x%3D%2218%22%20y%3D%2210%22%20width%3D%224%22%20height%3D%222%22%20fill%3D%22%23AEB9CC%22%2F%3E%3Crect%20x%3D%2222%22%20y%3D%2210%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%230D1117%22%2F%3E%3Crect%20x%3D%2224%22%20y%3D%2210%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23AEB9CC%22%2F%3E%3Crect%20x%3D%2226%22%20y%3D%2210%22%20width%3D%224%22%20height%3D%222%22%20fill%3D%22%230D1117%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%2212%22%20width%3D%224%22%20height%3D%222%22%20fill%3D%22%236E7899%22%2F%3E%3Crect%20x%3D%2212%22%20y%3D%2212%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%230D1117%22%2F%3E%3Crect%20x%3D%2214%22%20y%3D%2212%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%236E7899%22%2F%3E%3Crect%20x%3D%2216%22%20y%3D%2212%22%20width%3D%2210%22%20height%3D%222%22%20fill%3D%22%23AEB9CC%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%2214%22%20width%3D%224%22%20height%3D%222%22%20fill%3D%22%230D1117%22%2F%3E%3Crect%20x%3D%2210%22%20y%3D%2214%22%20width%3D%224%22%20height%3D%222%22%20fill%3D%22%236E7899%22%2F%3E%3Crect%20x%3D%2214%22%20y%3D%2214%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23AEB9CC%22%2F%3E%3Crect%20x%3D%2216%22%20y%3D%2214%22%20width%3D%228%22%20height%3D%222%22%20fill%3D%22%23CDF546%22%2F%3E%3Crect%20x%3D%2224%22%20y%3D%2214%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23AEB9CC%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%2216%22%20width%3D%224%22%20height%3D%222%22%20fill%3D%22%230D1117%22%2F%3E%3Crect%20x%3D%226%22%20y%3D%2216%22%20width%3D%226%22%20height%3D%222%22%20fill%3D%22%236E7899%22%2F%3E%3Crect%20x%3D%2212%22%20y%3D%2216%22%20width%3D%2212%22%20height%3D%222%22%20fill%3D%22%23AEB9CC%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%2218%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%230D1117%22%2F%3E%3Crect%20x%3D%226%22%20y%3D%2218%22%20width%3D%224%22%20height%3D%222%22%20fill%3D%22%236E7899%22%2F%3E%3Crect%20x%3D%2210%22%20y%3D%2218%22%20width%3D%226%22%20height%3D%222%22%20fill%3D%22%23AEB9CC%22%2F%3E%3Crect%20x%3D%2216%22%20y%3D%2218%22%20width%3D%228%22%20height%3D%222%22%20fill%3D%22%23F4F6F8%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%2220%22%20width%3D%226%22%20height%3D%222%22%20fill%3D%22%23AEB9CC%22%2F%3E%3Crect%20x%3D%2214%22%20y%3D%2220%22%20width%3D%228%22%20height%3D%222%22%20fill%3D%22%23F4F6F8%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat; background-position: 14px center; background-size: 32px 22px;
}
.grab-done h3::before, .gate-done h3::before {
  content: ""; display: inline-block; width: 32px; height: 22px; margin-right: 10px; vertical-align: -2px;
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2022%22%20shape-rendering%3D%22crispEdges%22%3E%3Crect%20x%3D%224%22%20y%3D%220%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%236E7899%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%222%22%20width%3D%224%22%20height%3D%222%22%20fill%3D%22%236E7899%22%2F%3E%3Crect%20x%3D%2222%22%20y%3D%222%22%20width%3D%226%22%20height%3D%222%22%20fill%3D%22%235E6B45%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%224%22%20width%3D%226%22%20height%3D%222%22%20fill%3D%22%236E7899%22%2F%3E%3Crect%20x%3D%2220%22%20y%3D%224%22%20width%3D%2210%22%20height%3D%222%22%20fill%3D%22%235E6B45%22%2F%3E%3Crect%20x%3D%226%22%20y%3D%226%22%20width%3D%226%22%20height%3D%222%22%20fill%3D%22%236E7899%22%2F%3E%3Crect%20x%3D%2218%22%20y%3D%226%22%20width%3D%2214%22%20height%3D%222%22%20fill%3D%22%230D1117%22%2F%3E%3Crect%20x%3D%226%22%20y%3D%228%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%236E7899%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%228%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%230D1117%22%2F%3E%3Crect%20x%3D%2210%22%20y%3D%228%22%20width%3D%224%22%20height%3D%222%22%20fill%3D%22%236E7899%22%2F%3E%3Crect%20x%3D%2220%22%20y%3D%228%22%20width%3D%228%22%20height%3D%222%22%20fill%3D%22%23AEB9CC%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%2210%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%236E7899%22%2F%3E%3Crect%20x%3D%2210%22%20y%3D%2210%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%230D1117%22%2F%3E%3Crect%20x%3D%2212%22%20y%3D%2210%22%20width%3D%224%22%20height%3D%222%22%20fill%3D%22%236E7899%22%2F%3E%3Crect%20x%3D%2218%22%20y%3D%2210%22%20width%3D%224%22%20height%3D%222%22%20fill%3D%22%23AEB9CC%22%2F%3E%3Crect%20x%3D%2222%22%20y%3D%2210%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%230D1117%22%2F%3E%3Crect%20x%3D%2224%22%20y%3D%2210%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23AEB9CC%22%2F%3E%3Crect%20x%3D%2226%22%20y%3D%2210%22%20width%3D%224%22%20height%3D%222%22%20fill%3D%22%230D1117%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%2212%22%20width%3D%224%22%20height%3D%222%22%20fill%3D%22%236E7899%22%2F%3E%3Crect%20x%3D%2212%22%20y%3D%2212%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%230D1117%22%2F%3E%3Crect%20x%3D%2214%22%20y%3D%2212%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%236E7899%22%2F%3E%3Crect%20x%3D%2216%22%20y%3D%2212%22%20width%3D%2210%22%20height%3D%222%22%20fill%3D%22%23AEB9CC%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%2214%22%20width%3D%224%22%20height%3D%222%22%20fill%3D%22%230D1117%22%2F%3E%3Crect%20x%3D%2210%22%20y%3D%2214%22%20width%3D%224%22%20height%3D%222%22%20fill%3D%22%236E7899%22%2F%3E%3Crect%20x%3D%2214%22%20y%3D%2214%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23AEB9CC%22%2F%3E%3Crect%20x%3D%2216%22%20y%3D%2214%22%20width%3D%228%22%20height%3D%222%22%20fill%3D%22%23CDF546%22%2F%3E%3Crect%20x%3D%2224%22%20y%3D%2214%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23AEB9CC%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%2216%22%20width%3D%224%22%20height%3D%222%22%20fill%3D%22%230D1117%22%2F%3E%3Crect%20x%3D%226%22%20y%3D%2216%22%20width%3D%226%22%20height%3D%222%22%20fill%3D%22%236E7899%22%2F%3E%3Crect%20x%3D%2212%22%20y%3D%2216%22%20width%3D%2212%22%20height%3D%222%22%20fill%3D%22%23AEB9CC%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%2218%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%230D1117%22%2F%3E%3Crect%20x%3D%226%22%20y%3D%2218%22%20width%3D%224%22%20height%3D%222%22%20fill%3D%22%236E7899%22%2F%3E%3Crect%20x%3D%2210%22%20y%3D%2218%22%20width%3D%226%22%20height%3D%222%22%20fill%3D%22%23AEB9CC%22%2F%3E%3Crect%20x%3D%2216%22%20y%3D%2218%22%20width%3D%228%22%20height%3D%222%22%20fill%3D%22%23F4F6F8%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%2220%22%20width%3D%226%22%20height%3D%222%22%20fill%3D%22%23AEB9CC%22%2F%3E%3Crect%20x%3D%2214%22%20y%3D%2220%22%20width%3D%228%22%20height%3D%222%22%20fill%3D%22%23F4F6F8%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

/* the bird alone lost its helmet brim and beak on dark panels, so the
   success states use the full mark (Ami on the blue page) */
.form-status.ok { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%20shape-rendering%3D%22crispEdges%22%3E%3Cpath%20d%3D%22M0%200h32v24l-8%208H0z%22%20fill%3D%22%230B5FFF%22%2F%3E%3Cpath%20d%3D%22M24%2032v-8h8z%22%20fill%3D%22%23CDF546%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%224%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%236E7899%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%226%22%20width%3D%224%22%20height%3D%222%22%20fill%3D%22%236E7899%22%2F%3E%3Crect%20x%3D%2222%22%20y%3D%226%22%20width%3D%226%22%20height%3D%222%22%20fill%3D%22%235E6B45%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%228%22%20width%3D%226%22%20height%3D%222%22%20fill%3D%22%236E7899%22%2F%3E%3Crect%20x%3D%2220%22%20y%3D%228%22%20width%3D%2210%22%20height%3D%222%22%20fill%3D%22%235E6B45%22%2F%3E%3Crect%20x%3D%226%22%20y%3D%2210%22%20width%3D%226%22%20height%3D%222%22%20fill%3D%22%236E7899%22%2F%3E%3Crect%20x%3D%2218%22%20y%3D%2210%22%20width%3D%2214%22%20height%3D%222%22%20fill%3D%22%230D1117%22%2F%3E%3Crect%20x%3D%226%22%20y%3D%2212%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%236E7899%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%2212%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%230D1117%22%2F%3E%3Crect%20x%3D%2210%22%20y%3D%2212%22%20width%3D%224%22%20height%3D%222%22%20fill%3D%22%236E7899%22%2F%3E%3Crect%20x%3D%2220%22%20y%3D%2212%22%20width%3D%228%22%20height%3D%222%22%20fill%3D%22%23AEB9CC%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%2214%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%236E7899%22%2F%3E%3Crect%20x%3D%2210%22%20y%3D%2214%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%230D1117%22%2F%3E%3Crect%20x%3D%2212%22%20y%3D%2214%22%20width%3D%224%22%20height%3D%222%22%20fill%3D%22%236E7899%22%2F%3E%3Crect%20x%3D%2218%22%20y%3D%2214%22%20width%3D%224%22%20height%3D%222%22%20fill%3D%22%23AEB9CC%22%2F%3E%3Crect%20x%3D%2222%22%20y%3D%2214%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%230D1117%22%2F%3E%3Crect%20x%3D%2224%22%20y%3D%2214%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23AEB9CC%22%2F%3E%3Crect%20x%3D%2226%22%20y%3D%2214%22%20width%3D%224%22%20height%3D%222%22%20fill%3D%22%230D1117%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%2216%22%20width%3D%224%22%20height%3D%222%22%20fill%3D%22%236E7899%22%2F%3E%3Crect%20x%3D%2212%22%20y%3D%2216%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%230D1117%22%2F%3E%3Crect%20x%3D%2214%22%20y%3D%2216%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%236E7899%22%2F%3E%3Crect%20x%3D%2216%22%20y%3D%2216%22%20width%3D%2210%22%20height%3D%222%22%20fill%3D%22%23AEB9CC%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%2218%22%20width%3D%224%22%20height%3D%222%22%20fill%3D%22%230D1117%22%2F%3E%3Crect%20x%3D%2210%22%20y%3D%2218%22%20width%3D%224%22%20height%3D%222%22%20fill%3D%22%236E7899%22%2F%3E%3Crect%20x%3D%2214%22%20y%3D%2218%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23AEB9CC%22%2F%3E%3Crect%20x%3D%2216%22%20y%3D%2218%22%20width%3D%228%22%20height%3D%222%22%20fill%3D%22%23CDF546%22%2F%3E%3Crect%20x%3D%2224%22%20y%3D%2218%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23AEB9CC%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%2220%22%20width%3D%224%22%20height%3D%222%22%20fill%3D%22%230D1117%22%2F%3E%3Crect%20x%3D%226%22%20y%3D%2220%22%20width%3D%226%22%20height%3D%222%22%20fill%3D%22%236E7899%22%2F%3E%3Crect%20x%3D%2212%22%20y%3D%2220%22%20width%3D%2212%22%20height%3D%222%22%20fill%3D%22%23AEB9CC%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%2222%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%230D1117%22%2F%3E%3Crect%20x%3D%226%22%20y%3D%2222%22%20width%3D%224%22%20height%3D%222%22%20fill%3D%22%236E7899%22%2F%3E%3Crect%20x%3D%2210%22%20y%3D%2222%22%20width%3D%226%22%20height%3D%222%22%20fill%3D%22%23AEB9CC%22%2F%3E%3Crect%20x%3D%2216%22%20y%3D%2222%22%20width%3D%228%22%20height%3D%222%22%20fill%3D%22%23F4F6F8%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%2224%22%20width%3D%226%22%20height%3D%222%22%20fill%3D%22%23AEB9CC%22%2F%3E%3Crect%20x%3D%2214%22%20y%3D%2224%22%20width%3D%228%22%20height%3D%222%22%20fill%3D%22%23F4F6F8%22%2F%3E%3C%2Fsvg%3E"); background-size: 32px 32px; }
.grab-done h3::before, .gate-done h3::before { width: 32px; height: 32px; vertical-align: -5px; background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%20shape-rendering%3D%22crispEdges%22%3E%3Cpath%20d%3D%22M0%200h32v24l-8%208H0z%22%20fill%3D%22%230B5FFF%22%2F%3E%3Cpath%20d%3D%22M24%2032v-8h8z%22%20fill%3D%22%23CDF546%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%224%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%236E7899%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%226%22%20width%3D%224%22%20height%3D%222%22%20fill%3D%22%236E7899%22%2F%3E%3Crect%20x%3D%2222%22%20y%3D%226%22%20width%3D%226%22%20height%3D%222%22%20fill%3D%22%235E6B45%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%228%22%20width%3D%226%22%20height%3D%222%22%20fill%3D%22%236E7899%22%2F%3E%3Crect%20x%3D%2220%22%20y%3D%228%22%20width%3D%2210%22%20height%3D%222%22%20fill%3D%22%235E6B45%22%2F%3E%3Crect%20x%3D%226%22%20y%3D%2210%22%20width%3D%226%22%20height%3D%222%22%20fill%3D%22%236E7899%22%2F%3E%3Crect%20x%3D%2218%22%20y%3D%2210%22%20width%3D%2214%22%20height%3D%222%22%20fill%3D%22%230D1117%22%2F%3E%3Crect%20x%3D%226%22%20y%3D%2212%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%236E7899%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%2212%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%230D1117%22%2F%3E%3Crect%20x%3D%2210%22%20y%3D%2212%22%20width%3D%224%22%20height%3D%222%22%20fill%3D%22%236E7899%22%2F%3E%3Crect%20x%3D%2220%22%20y%3D%2212%22%20width%3D%228%22%20height%3D%222%22%20fill%3D%22%23AEB9CC%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%2214%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%236E7899%22%2F%3E%3Crect%20x%3D%2210%22%20y%3D%2214%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%230D1117%22%2F%3E%3Crect%20x%3D%2212%22%20y%3D%2214%22%20width%3D%224%22%20height%3D%222%22%20fill%3D%22%236E7899%22%2F%3E%3Crect%20x%3D%2218%22%20y%3D%2214%22%20width%3D%224%22%20height%3D%222%22%20fill%3D%22%23AEB9CC%22%2F%3E%3Crect%20x%3D%2222%22%20y%3D%2214%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%230D1117%22%2F%3E%3Crect%20x%3D%2224%22%20y%3D%2214%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23AEB9CC%22%2F%3E%3Crect%20x%3D%2226%22%20y%3D%2214%22%20width%3D%224%22%20height%3D%222%22%20fill%3D%22%230D1117%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%2216%22%20width%3D%224%22%20height%3D%222%22%20fill%3D%22%236E7899%22%2F%3E%3Crect%20x%3D%2212%22%20y%3D%2216%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%230D1117%22%2F%3E%3Crect%20x%3D%2214%22%20y%3D%2216%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%236E7899%22%2F%3E%3Crect%20x%3D%2216%22%20y%3D%2216%22%20width%3D%2210%22%20height%3D%222%22%20fill%3D%22%23AEB9CC%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%2218%22%20width%3D%224%22%20height%3D%222%22%20fill%3D%22%230D1117%22%2F%3E%3Crect%20x%3D%2210%22%20y%3D%2218%22%20width%3D%224%22%20height%3D%222%22%20fill%3D%22%236E7899%22%2F%3E%3Crect%20x%3D%2214%22%20y%3D%2218%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23AEB9CC%22%2F%3E%3Crect%20x%3D%2216%22%20y%3D%2218%22%20width%3D%228%22%20height%3D%222%22%20fill%3D%22%23CDF546%22%2F%3E%3Crect%20x%3D%2224%22%20y%3D%2218%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23AEB9CC%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%2220%22%20width%3D%224%22%20height%3D%222%22%20fill%3D%22%230D1117%22%2F%3E%3Crect%20x%3D%226%22%20y%3D%2220%22%20width%3D%226%22%20height%3D%222%22%20fill%3D%22%236E7899%22%2F%3E%3Crect%20x%3D%2212%22%20y%3D%2220%22%20width%3D%2212%22%20height%3D%222%22%20fill%3D%22%23AEB9CC%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%2222%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%230D1117%22%2F%3E%3Crect%20x%3D%226%22%20y%3D%2222%22%20width%3D%224%22%20height%3D%222%22%20fill%3D%22%236E7899%22%2F%3E%3Crect%20x%3D%2210%22%20y%3D%2222%22%20width%3D%226%22%20height%3D%222%22%20fill%3D%22%23AEB9CC%22%2F%3E%3Crect%20x%3D%2216%22%20y%3D%2222%22%20width%3D%228%22%20height%3D%222%22%20fill%3D%22%23F4F6F8%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%2224%22%20width%3D%226%22%20height%3D%222%22%20fill%3D%22%23AEB9CC%22%2F%3E%3Crect%20x%3D%2214%22%20y%3D%2224%22%20width%3D%228%22%20height%3D%222%22%20fill%3D%22%23F4F6F8%22%2F%3E%3C%2Fsvg%3E"); }

/* ==========================================================================
   404: a full blue ground, and Ami lost (standing, map out, question mark),
   a pose of its own so it never reads as a big copy of the logo
   ========================================================================== */
.lost { padding: clamp(56px, 9vw, 120px) 0; background: #0B5FFF; color: #F4F6F8; }
.lost-in { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 48px; align-items: center; }
.lost-art { justify-self: center; }
.lost-ami { display: block; width: 216px; height: 216px; }
.lost .q2 { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .lost .q1 { animation: q-a 1.2s steps(1) infinite; }
  .lost .q2 { display: inline; animation: q-b 1.2s steps(1) infinite; }
}
@keyframes q-a { 0% { opacity: 1; } 50% { opacity: 0; } }
@keyframes q-b { 0% { opacity: 0; } 50% { opacity: 1; } }
.lost .kicker { background: #CDF546; color: #0D1117; }
.lost-copy h1 { margin: 14px 0 12px; color: #F4F6F8; }
.lost .lede { color: #DCE6FF; }
.lost .btn:not(.btn-gold) { background: transparent; color: #F4F6F8; border-color: #F4F6F8; box-shadow: 4px 4px 0 #0D1117; }
.lost :focus-visible { outline-color: #CDF546; }
@media (max-width: 760px) {
  .lost-in { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .lost-ami { width: 168px; height: 168px; }
}

/* ==========================================================================
   INSTANT QUOTE: the live card on Send a draft, and the hero price line
   ========================================================================== */
.quote-card {
  background: var(--ink); color: var(--cream); padding: 20px 22px 18px;
  border: 3px solid var(--ink); box-shadow: 6px 6px 0 var(--gold);
}
.quote-lab { margin: 0 0 8px; font-size: var(--t-2xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #8D99AE; }
.quote-price { margin: 0; font-family: var(--display); font-weight: 700; font-size: var(--t-xl); letter-spacing: -.02em; line-height: 1.15; color: #AEB9CC; }
.quote-card.is-live .quote-price { font-size: var(--t-3xl); color: var(--gold); font-variant-numeric: tabular-nums; }
.quote-turn { margin: 8px 0 0; font-size: var(--t-sm); font-weight: 700; color: var(--cream); }
.quote-flags { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.quote-flags li { font-size: var(--t-xs); padding: 7px 10px; background: #26324A; border-left: 3px solid #FF5A3C; color: #F4F6F8; }
.quote-plan { margin: 10px 0 0; font-size: var(--t-xs); color: var(--gold); }
.quote-human { margin: 10px 0 0; font-size: var(--t-xs); color: #AEB9CC; }
.quote-id { margin: 6px 0 0; font-size: var(--t-2xs); color: #6E7899; font-variant-numeric: tabular-nums; }
.quote-plan:empty, .quote-human:empty, .quote-id:empty, .quote-flags:empty, .count-note:empty { display: none; }
.count-note { margin: 6px 0 0; font-size: var(--t-xs); color: var(--fg-soft); }
.card-quote {
  margin: 4px 0 12px; padding: 9px 12px; background: var(--gold); color: var(--ink);
  font-weight: 700; font-size: var(--t-sm); border: 2px solid var(--ink); font-variant-numeric: tabular-nums;
}
.hero .card .frow { gap: 10px; margin-bottom: 0; }
.hero .card .frow .field { margin-bottom: 10px; }
/* form section titles were the last mono-caps labels on the send page */
.fieldset legend { font-family: var(--body); font-size: var(--t-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }

/* ==========================================================================
   SEND A DRAFT HEADER: "the squeeze". A messy draft over its page limit is
   counted, priced, redesigned by a lime scan, and lands inside the limit.
   Flat UI, not pixel art, so it is its own story. Sized in container units
   (cqw) so the whole stage scales as one picture. Plays once; Replay reruns.
   ========================================================================== */
.send-head { padding-block: clamp(30px, 3.6vw, 48px); }
.send-head-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
@media (max-width: 900px) { .send-head-in { grid-template-columns: minmax(0, 1fr); } }
.sendfx { container-type: inline-size; position: relative; max-width: 560px; width: 100%; justify-self: end; }
@media (max-width: 900px) { .sendfx { justify-self: start; } }
.fx-stage { position: relative; width: 100%; aspect-ratio: 16 / 10.5; font-family: var(--body); color: var(--cream); }

/* the page */
.fx-page {
  position: absolute; left: 30%; top: 3%; width: 38%; height: 94%;
  background: #fff; box-shadow: 1.4cqw 1.4cqw 0 #CDF546; overflow: hidden;
}
.fx-mess, .fx-design { position: absolute; inset: 0; padding: 3.6cqw 3cqw; display: flex; flex-direction: column; gap: 1.25cqw; }
.fx-page .l { display: block; height: .95cqw; background: #C3CCD8; }
.fx-page .w40 { width: 40%; } .fx-page .w55 { width: 55%; } .fx-page .w60 { width: 60%; } .fx-page .w70 { width: 70%; }
.fx-page .w80 { width: 80%; } .fx-page .w85 { width: 85%; } .fx-page .w88 { width: 88%; } .fx-page .w90 { width: 90%; }
.fx-page .w95 { width: 95%; } .fx-page .w100 { width: 100%; }
.fx-mess .l.t { height: 1.4cqw; background: #8D99AE; }
.fx-mess .l.strike { position: relative; }
.fx-mess .l.strike::after { content: ""; position: absolute; left: -2%; right: -2%; top: 50%; height: .35cqw; background: #FF5A3C; transform: translateY(-50%); }
.fx-mess .l.ins { background: none; border-bottom: .35cqw solid #FF5A3C; height: .7cqw; }
.fx-mess .shot { display: block; height: 9cqw; width: 78%; background: repeating-linear-gradient(135deg, #DEE3EA 0 .8cqw, #EEF1F5 .8cqw 1.6cqw); border: .25cqw dashed #8D99AE; }

.fx-design { background: #fff; gap: 1.2cqw; padding-top: 0; }
.d-band { margin: 0 -3cqw 1cqw; padding: 2.6cqw 3cqw 2cqw; background: #0B5FFF; display: flex; align-items: center; justify-content: space-between; }
.d-title { display: block; width: 58%; height: 1.5cqw; background: #fff; }
.d-tag { display: block; width: 14%; height: 1.5cqw; background: #CDF546; }
.d-h { display: block; width: 50%; height: 1.2cqw; background: #0D1117; }
.d-flow { display: flex; align-items: center; gap: .6cqw; margin: .6cqw 0 .8cqw; }
.d-flow b { flex: 1; height: 5cqw; background: #0B5FFF; }
.d-flow b.lime { background: #CDF546; border: .3cqw solid #0D1117; }
.d-flow s { width: 1.6cqw; height: .35cqw; background: #0D1117; text-decoration: none; }
.fx-design .l { background: #AEB9CC; }
.d-call { border-left: .7cqw solid #CDF546; background: #F4F6F8; padding: 1.1cqw 1.4cqw; display: grid; gap: 1cqw; }
.d-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6cqw; }
.d-cols > div { display: grid; gap: 1cqw; }
.fx-scan { position: absolute; left: 0; right: 0; top: 0; height: .6cqw; background: #CDF546; box-shadow: 0 0 2.4cqw .6cqw rgba(205, 245, 70, .55); opacity: 0; }

/* tracked-change comment balloons in the margin */
.fx-note { position: absolute; left: 69.5%; width: 9%; padding: .9cqw; background: #fff; border: .3cqw solid #FF5A3C; display: grid; gap: .7cqw; }
.fx-note .l { display: block; height: .7cqw; background: #FFB3A3; }
.fx-note .w55 { width: 55%; } .fx-note .w70 { width: 70%; } .fx-note .w80 { width: 80%; } .fx-note .w90 { width: 90%; }
.fx-note.n1 { top: 18%; } .fx-note.n2 { top: 52%; }

/* left: the count and the page-limit meter */
.fx-k { display: block; font-size: 2.05cqw; font-weight: 600; color: #8D99AE; margin-bottom: .6cqw; }
.fx-count { position: absolute; left: 0; top: 8%; width: 27%; }
.fx-count b { font-family: var(--display); font-weight: 700; font-size: 4.4cqw; letter-spacing: -.02em; color: #F4F6F8; line-height: 1; }
.fx-count #fxNum { color: #CDF546; font-variant-numeric: tabular-nums; }
.fx-limit { position: absolute; left: 0; top: 46%; width: 27%; }
.fx-bar { position: relative; height: 2.2cqw; background: #26324A; }
.fx-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 85%; background: #FF5A3C; }
.fx-mark { position: absolute; top: -.8cqw; bottom: -.8cqw; left: 75%; width: .4cqw; background: #F4F6F8; }
.fx-state { position: relative; display: block; height: 3cqw; margin-top: .9cqw; }
.fx-state em { position: absolute; left: 0; top: 0; font-style: normal; font-weight: 700; font-size: 2.3cqw; white-space: nowrap; }
.fx-over { color: #FF7A60; }
.fx-ok { color: #CDF546; }

/* right: price stamp, turnaround, and whose move it is */
.fx-stamp {
  position: absolute; left: 73%; top: 12%; padding: 1.4cqw 2cqw 1.2cqw;
  background: #CDF546; color: #0D1117; border: .45cqw solid #0D1117; transform: rotate(-6deg);
  box-shadow: .9cqw .9cqw 0 #0D1117;
}
.fx-stamp b { display: block; font-family: var(--display); font-weight: 700; font-size: 5.4cqw; letter-spacing: -.03em; line-height: 1; }
.fx-stamp span { display: block; font-size: 1.9cqw; font-weight: 700; margin-top: .4cqw; }
.fx-back { position: absolute; left: 73%; top: 58%; padding: 1cqw 1.6cqw; border: .3cqw solid #F4F6F8; font-weight: 700; font-size: 2.2cqw; white-space: nowrap; }
.fx-you { position: absolute; left: 73%; top: 76%; font-family: var(--display); font-weight: 700; font-size: 3.6cqw; color: #CDF546; letter-spacing: -.02em; }

.fx-replay {
  position: absolute; right: 0; bottom: -2.2rem; background: none; border: 0; padding: 4px 0;
  color: #8D99AE; font: 600 var(--t-xs) var(--body); cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
}
.fx-replay:hover { color: #CDF546; }

/* the finished state is the default, so reduced motion (or no animation
   support) still shows the whole story at a glance */
.fx-mess, .fx-note { opacity: 0; }
.fx-fill { width: 75%; background: #CDF546; }
.fx-over { opacity: 0; }
.fx-ok { opacity: 1; }

@media (prefers-reduced-motion: no-preference) {
  .fx-stage.is-play .fx-page { animation: fx-in .5s cubic-bezier(.2, .8, .2, 1) both; }
  .fx-stage.is-play .fx-count { animation: fx-fade .4s ease-out .45s both; }
  .fx-stage.is-play .fx-limit { animation: fx-fade .4s ease-out .8s both; }
  .fx-stage.is-play .fx-mess { opacity: 1; animation: fx-mess 1.6s linear 2.2s both; }
  .fx-stage.is-play .fx-note { animation: fx-note 3s linear both; }
  .fx-stage.is-play .fx-design { animation: fx-reveal 1.6s linear 2.2s both; }
  .fx-stage.is-play .fx-scan { animation: fx-scan 1.6s linear 2.2s both; }
  .fx-stage.is-play .fx-fill { animation: fx-fill 4.4s cubic-bezier(.3, .7, .3, 1) both; }
  .fx-stage.is-play .fx-over { animation: fx-over 4.2s linear both; }
  .fx-stage.is-play .fx-ok { animation: fx-ok 4.4s linear both; }
  .fx-stage.is-play .fx-stamp { animation: fx-stamp .45s cubic-bezier(.2, 1.6, .4, 1) 1.65s both; }
  .fx-stage.is-play .fx-back { animation: fx-fade .4s ease-out 4.4s both; }
  .fx-stage.is-play .fx-you { animation: fx-fade .4s ease-out 4.85s both; }
}
@keyframes fx-in { from { opacity: 0; transform: translateY(3cqw); } to { opacity: 1; transform: none; } }
@keyframes fx-fade { from { opacity: 0; transform: translateY(1.2cqw); } to { opacity: 1; transform: none; } }
/* the scan: the design is revealed from the top, the mess cut away below it */
@keyframes fx-reveal { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes fx-mess { from { clip-path: inset(0 0 0 0); } to { clip-path: inset(100% 0 0 0); } }
@keyframes fx-scan { 0% { top: 0; opacity: 1; } 96% { opacity: 1; } 100% { top: 100%; opacity: 0; } }
@keyframes fx-note { 0%, 72% { opacity: 1; } 90%, 100% { opacity: 0; } }
/* 17 of 20 pages in red, then down to 15 of 20 in lime once the scan is done */
@keyframes fx-fill {
  0%, 18% { width: 0; background: #FF5A3C; }
  34% { width: 85%; background: #FF5A3C; }
  82% { width: 85%; background: #FF5A3C; }
  96%, 100% { width: 75%; background: #CDF546; }
}
@keyframes fx-over { 0%, 34% { opacity: 0; } 40%, 86% { opacity: 1; } 92%, 100% { opacity: 0; } }
@keyframes fx-ok { 0%, 90% { opacity: 0; } 100% { opacity: 1; } }
@keyframes fx-stamp { from { opacity: 0; transform: rotate(-6deg) scale(1.9); } to { opacity: 1; transform: rotate(-6deg) scale(1); } }

/* ---- Send a draft story: layout tweaks and Ami ---- */
.fx-page .w92 { width: 92%; }
.fx-note { left: 63.5%; }
.fx-back { top: 50%; }
.fx-you { top: 68%; }
.fx-stamp { z-index: 2; }

/* Ami: pixel sprites with a white sticker outline, so the ink helmet brim
   and beak still read on the dark header. Two wing frames and a standing
   pose; the finished state (Ami standing on "Back in 24 hours", facing the
   page) is the default for reduced motion. */
.fx-ami { position: absolute; left: 81%; top: 34.5%; width: 11cqw; height: 10.3cqw; z-index: 3; pointer-events: none; }
.fx-ami-face {
  position: absolute; inset: 0; transform: scaleX(-1);
  filter: drop-shadow(.3cqw 0 0 #F4F6F8) drop-shadow(-.3cqw 0 0 #F4F6F8) drop-shadow(0 .3cqw 0 #F4F6F8) drop-shadow(0 -.3cqw 0 #F4F6F8);
}
.fx-ami svg { position: absolute; left: 0; top: 0; width: 100%; height: auto; display: block; }
.fx-fly { visibility: hidden; }
.fx-stand { visibility: visible; }

@media (prefers-reduced-motion: no-preference) {
  .fx-stage.is-play .fx-ami { animation: fx-ami-path 5.2s both; }
  .fx-stage.is-play .fx-ami-face { animation: fx-ami-face 5.2s step-end both; }
  .fx-stage.is-play .fx-up { animation: fx-flap-a .28s steps(1) infinite, fx-flying 5.2s step-end both; }
  .fx-stage.is-play .fx-down { animation: fx-flap-b .28s steps(1) infinite, fx-flying 5.2s step-end both; }
  .fx-stage.is-play .fx-stand { animation: fx-landed 5.2s step-end both; }
}
/* 5.2s: enters as the stamp lands (1.6s), swings to the top of the page
   (2.2s), rides the scan down (to 3.8s), swoops out and lands (5.2s) */
@keyframes fx-ami-path {
  0%, 19% { left: 106%; top: -14%; opacity: 0; }
  20% { opacity: 1; }
  30.8% { left: 76%; top: -8%; }
  38.5% { left: 50%; top: -16%; }
  42.3% { left: 43.5%; top: -10.7%; animation-timing-function: linear; }
  73.1% { left: 43.5%; top: 83.3%; }
  84.6% { left: 92%; top: 20%; }
  100% { left: 81%; top: 34.5%; opacity: 1; }
}
/* faces left flying in, right while scanning and swooping, left again on landing */
@keyframes fx-ami-face {
  0% { transform: scaleX(-1); }
  42.3% { transform: scaleX(1); }
  97.5%, 100% { transform: scaleX(-1); }
}
@keyframes fx-flap-a { 0% { opacity: 1; } 50% { opacity: 0; } }
@keyframes fx-flap-b { 0% { opacity: 0; } 50% { opacity: 1; } }
@keyframes fx-flying { 0% { visibility: visible; } 97.5%, 100% { visibility: hidden; } }
@keyframes fx-landed { 0% { visibility: hidden; } 97.5%, 100% { visibility: visible; } }
/* ---- story tuning: a bigger Ami, a page sized to its content, labels that
   stay readable when the whole stage shrinks on phones ---- */
.fx-page { height: 84%; }
.fx-ami { width: 13cqw; height: 12.2cqw; left: 80%; top: 31.8%; }
.fx-k { font-size: max(2.05cqw, 11px); }
.fx-state em { font-size: max(2.3cqw, 12px); }
.fx-back { font-size: max(2.2cqw, 11px); }
.fx-stamp span { font-size: max(1.9cqw, 10px); }
.fx-replay { bottom: -1.9rem; }
@keyframes fx-ami-path {
  0%, 19% { left: 106%; top: -16%; opacity: 0; }
  20% { opacity: 1; }
  30.8% { left: 75%; top: -10%; }
  38.5% { left: 49%; top: -18%; }
  42.3% { left: 42.5%; top: -13.6%; animation-timing-function: linear; }
  73.1% { left: 42.5%; top: 70.4%; }
  84.6% { left: 91%; top: 16%; }
  100% { left: 80%; top: 31.8%; opacity: 1; }
}

/* ==========================================================================
   ONE PAGE HEADER: every inner page matches Templates. Same padding, same
   kicker, a one-line headline and a two-line intro, so the dark band is the
   same height everywhere (384px at 1440 wide).
   ========================================================================== */
.page-head .lede { max-width: 58ch; }

/* Send a draft: the story sits to the right, inside the same band height */
.send-head { padding-block: clamp(46px, 5.6vw, 82px); }
.send-head-in { display: block; position: relative; }
.send-head-copy { max-width: none; }
@media (min-width: 1100px) {
  .send-head-copy { max-width: calc(100% - min(500px, 44%) - 40px); }
  .sendfx { position: absolute; right: 0; top: 50%; width: min(500px, 44%); transform: translateY(-50%); }
}
/* below that width the band keeps its standard height and the form comes first */
@media (max-width: 1099px) { .sendfx { display: none; } }
.fx-replay { left: 0; right: auto; bottom: 2%; }

/* Refer: the steps and the link box are dark cards on a light section,
   so the dark header band ends where it does on every other page */
.page-head + .share { background: transparent; color: var(--ink); }
.share-note { margin: 0 0 4px; font-size: var(--t-sm); color: #3A4358; max-width: 60ch; }
.share-note b { color: var(--ink); }
.page-head + .share .loop { background: var(--ink); border-color: var(--ink); }
/* ---- story v2: the stamp sells speed, not a number; an NDA beat before
   the redesign, because who sees a draft matters to government bidders ---- */
.fx-stamp b { font-size: 4.6cqw; }
.fx-nda {
  position: absolute; left: 0; top: 74%; display: inline-flex; align-items: center; gap: 1cqw;
  padding: .9cqw 1.4cqw; border: .3cqw solid #CDF546; color: #CDF546;
  font-weight: 700; font-size: max(2.2cqw, 11px); white-space: nowrap;
}
/* a small padlock drawn in CSS: shackle on top, body below */
.fx-lock { position: relative; width: 1.8cqw; height: 1.5cqw; background: currentColor; margin-top: 1cqw; flex: none; }
.fx-lock::before {
  content: ""; position: absolute; left: 20%; right: 20%; bottom: 100%; height: 1.1cqw;
  border: .35cqw solid currentColor; border-bottom: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .fx-stage.is-play .fx-nda { animation: fx-fade .4s ease-out 2s both; }
}
/* the band never shrinks below the Templates height: kicker, a one-line
   headline and a three-line intro's worth of room (384px at 1440 wide) */
.page-head > .wrap { min-height: 223px; }

/* ---- story fit inside the shared 384px band ---- */
.fx-stamp { left: 75%; }
@keyframes fx-ami-path {
  0%, 19% { left: 106%; top: -8%; opacity: 0; }
  20% { opacity: 1; }
  30.8% { left: 77%; top: -4%; }
  38.5% { left: 49%; top: -8%; }
  42.3% { left: 42.5%; top: -6%; animation-timing-function: linear; }
  73.1% { left: 42.5%; top: 70.4%; }
  84.6% { left: 91%; top: 16%; }
  100% { left: 80%; top: 31.8%; opacity: 1; }
}

/* ---- Refer below the band: columns start at the top, readable button ---- */
.page-head + .share .share-grid { align-items: start; }
.linkrow button, .linkrow input { font-family: var(--body); letter-spacing: 0; text-transform: none; }
.linkrow button { font-weight: 700; }

/* ==========================================================================
   SEND A DRAFT FORM IN FOUR STEPS: one card, one screen per step
   ========================================================================== */
/* the form starts close under the header band */
.send-head + section { padding-top: clamp(24px, 3vw, 36px); }

.wz { padding: clamp(18px, 2.2vw, 26px); scroll-margin-top: 84px; }
.wz-track { list-style: none; margin: 0 0 18px; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; counter-reset: none; }
.wz-track button {
  width: 100%; display: flex; align-items: center; gap: 8px; padding: 8px 10px;
  background: var(--white); border: 2px solid var(--ink); color: var(--ink);
  font: 700 var(--t-xs) var(--body); cursor: pointer; text-align: left; min-width: 0;
}
.wz-track button span {
  flex: none; width: 22px; height: 22px; display: grid; place-items: center;
  background: var(--ink); color: var(--cream); font-size: var(--t-2xs); font-weight: 700;
}
.wz-track button[aria-current="step"] { background: var(--gold); }
.wz-track li.is-done button span { background: #0B5FFF; }
.wz-track button:disabled { cursor: default; color: #8D99AE; border-color: #C3CCD8; }
.wz-track button:disabled span { background: #C3CCD8; color: var(--white); }

/* each step keeps the same height, so the buttons never jump */
.wz .wz-step { margin: 0; min-height: 392px; display: grid; align-content: start; gap: 14px; }
.wz .wz-step[hidden] { display: none; }
.wz .wz-step > legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wz .field { margin: 0; }
.wz .frow { margin: 0; gap: 12px; }
.wz textarea { min-height: 78px; }
.wz .radio-cards.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wz .radio-cards.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.wz .rcard span { padding: 10px 12px; }
.wz .urgency { margin: 0; padding: 10px 12px; }
.wz .drop.compact { padding: 14px 16px; }
.wz .drop.compact .drop-ico { width: 22px; height: 22px; margin-bottom: 4px; }
.wz .assure { justify-content: flex-start; margin: 0; }

.wz-nav { display: flex; align-items: center; gap: 12px; margin-top: 18px; }
.wz-nav .wz-next, .wz-nav .wz-send { margin-left: auto; min-width: 220px; }
.wz-nav .btn { padding: 13px 22px; }
.wz .form-status { margin-top: 14px; }

@media (max-width: 700px) {
  .wz-track button { justify-content: center; font-size: 0; gap: 0; padding: 8px 4px; }
  .wz-track button span { font-size: var(--t-2xs); }
  .wz .radio-cards.three, .wz .radio-cards.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wz .wz-step { min-height: 0; }
  .wz-nav .wz-next, .wz-nav .wz-send { min-width: 0; flex: 1; }
}

/* the four reassurances, as one quiet row under the form */
.worth-row { margin-top: clamp(22px, 3vw, 34px); border-top: 3px solid var(--ink); padding-top: 16px; }
.worth-row ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px 28px; }
.worth-row li { font-size: var(--t-sm); color: var(--fg-soft); min-width: 0; }
.worth-row li b { color: var(--ink); }
@media (max-width: 900px) { .worth-row ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .worth-row ul { grid-template-columns: minmax(0, 1fr); } }
/* every step as tall as the fullest one (Your files), so Back and Next stay put */
.wz .wz-step { min-height: 454px; }
@media (max-width: 700px) { .wz .wz-step { min-height: 0; } }
/* .btn sets display, which beat the hidden attribute: Back and Send showed on step 1 */
.wz-nav [hidden] { display: none !important; }
/* natural heights: an equal-height card left a dead gap under the short steps */
.wz .wz-step { min-height: 0; }
/* the column holds only the live quote now, so it never outgrows the form;
   the next steps read as one row under the form, beside the reassurances */
.next-row { margin-top: clamp(22px, 3vw, 34px); border-top: 3px solid var(--ink); padding-top: 16px; }
.next-h { font-size: var(--t-lg); margin: 0 0 12px; }
.next-row ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px 28px; }
.next-row li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 8px; font-size: var(--t-sm); color: var(--fg-soft); min-width: 0; }
.next-row li b { color: var(--ink); }
.next-row + .worth-row { margin-top: 22px; }
@media (max-width: 900px) { .next-row ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .next-row ul { grid-template-columns: minmax(0, 1fr); } }
.wz-mini { margin: 16px 0 0; }
@media (min-width: 941px) { .wz-mini { display: none !important; } }

/* ==========================================================================
   DEADLINE PICKER: calendar date, a plain list of due times, a time zone
   ========================================================================== */
.due-row { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) minmax(0, .75fr); gap: 8px; }
.due-row input, .due-row select {
  font: inherit; font-family: var(--body); font-size: var(--t-sm); color: var(--ink);
  height: 48px; padding: 0 10px; border: 2.5px solid var(--ink); background: var(--white);
  width: 100%; min-width: 0;
}
.due-row select { appearance: none; -webkit-appearance: none; padding-right: 26px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position: calc(100% - 14px) 20px, calc(100% - 9px) 20px; background-size: 5px 5px; background-repeat: no-repeat; }
.due-row :focus { outline: none; box-shadow: inset 0 0 0 2px var(--gold); }
.due-note { margin-top: 6px; }
/* on Send a draft the deadline needs more room than the page count beside it */
.wz .due-frow { grid-template-columns: minmax(0, .62fr) minmax(0, 1.38fr); }
@media (max-width: 700px) { .wz .due-frow { grid-template-columns: minmax(0, 1fr); } }

/* ==========================================================================
   SIGN & PAY: the last step signs the NDA and terms, then pays
   ========================================================================== */
.sign-box { border: 2.5px solid var(--ink); background: #F4F6F8; padding: 14px 16px; display: grid; gap: 12px; }
.sign-sum { margin: 0; font-size: var(--t-sm); color: #3A4358; }
.sign-sum b { color: var(--ink); }
.sign-check { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; font-size: var(--t-sm); font-weight: 600; color: var(--ink); cursor: pointer; }
.sign-check input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: #0B5FFF; }
.sign-check a { color: #0B5FFF; text-underline-offset: 2px; }
.sign-box .field input { background: var(--white); font-family: var(--display); font-size: var(--t-sm); }
.pay-note { margin: 0; font-size: var(--t-xs); color: var(--fg-soft); }

/* ==========================================================================
   LEGAL PAGES: the NDA and the service terms, easy to read and to scan
   ========================================================================== */
.legal-sec { padding-block: clamp(32px, 4vw, 56px); }
.legal { max-width: 760px; }
.legal-draft { margin: 0 0 18px; padding: 12px 14px; background: var(--gold); border: 2px solid var(--ink); font-size: var(--t-sm); color: var(--ink); }
.legal-meta { font-size: var(--t-xs); color: var(--fg-soft); margin: 0 0 22px; }
.legal h2 { font-size: var(--t-lg); margin: 28px 0 8px; }
.legal p, .legal li { font-size: var(--t-sm); line-height: 1.65; color: #2A3140; }
.legal ul { padding-left: 20px; margin: 0; display: grid; gap: 6px; }
.legal a { color: #0B5FFF; text-underline-offset: 2px; }

/* ==========================================================================
   FORM PROPORTIONS: one control height everywhere, labels on one line, and
   columns sized to what they hold (a page count is short, a deadline is not)
   ========================================================================== */
.wz .field input[type=text], .wz .field input[type=email], .wz .field input[type=url],
.wz .field input[type=number], .due-row input, .due-row select,
.hero .card .field input[type=email], .hero .card .field input[type=number] {
  height: 50px; padding-top: 0; padding-bottom: 0; box-sizing: border-box;
}
.wz .field > label, .hero .card .field > label { min-height: 22px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.field-help { margin: 6px 0 0; font-size: var(--t-xs); color: var(--fg-soft); }
/* step 1: pages about a quarter, deadline the rest, split date / time / zone */
.wz .due-frow { grid-template-columns: minmax(0, .72fr) minmax(0, 2.2fr); gap: 14px; align-items: start; }
.wz .due-row { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, .72fr); }
@media (max-width: 700px) {
  .wz .due-frow { grid-template-columns: minmax(0, 1fr); }
  .wz .field > label, .hero .card .field > label { white-space: normal; }
}
.wz .due-frow { grid-template-columns: minmax(0, .82fr) minmax(0, 2.2fr); }
/* phones: pages and deadline stack again (the width rule above outranked the earlier one) */
@media (max-width: 700px) { .wz .due-frow { grid-template-columns: minmax(0, 1fr); } }

/* ==========================================================================
   ABOUT: the comic, who we are, and Feed Ami.
   Ami is pixel art at 24px here (about.js). The canvases are sized in whole
   device pixels so every pixel stays square; pixelated keeps edges hard.
   ========================================================================== */
.comic-sec { background: #fff; }
.comic {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px;
}
@media (max-width: 1100px) { .comic { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 22px; } }
@media (max-width: 620px) { .comic { grid-template-columns: minmax(0, 1fr); } }
.cpanel {
  display: flex; flex-direction: column; min-width: 0;
  background: #fff; border: 3px solid var(--ink); box-shadow: 6px 6px 0 var(--ink);
}
.cpanel .cap {
  margin: 0; padding: 10px 12px; border-bottom: 3px solid var(--ink);
  display: flex; gap: 10px; align-items: flex-start;
  font-family: var(--display); font-weight: 700; font-size: var(--t-sm); line-height: 1.25;
  letter-spacing: -.01em; color: var(--ink); min-height: calc(2.5em + 20px);
}
.cpanel .cap span {
  flex: none; margin-top: 1px; padding: 2px 6px;
  font-family: var(--body); font-size: var(--t-2xs); font-weight: 600; letter-spacing: 0;
  background: var(--ink); color: var(--gold);
}
.cpanel:last-child .cap { background: var(--gold); }
.cpanel:last-child { box-shadow: 6px 6px 0 var(--coral); }
.cframe { display: flex; justify-content: center; align-items: center; flex: 1; background: #fff; }
.cframe canvas, .feed-stage canvas {
  display: block; max-width: 100%; height: auto;
  image-rendering: crisp-edges; image-rendering: pixelated;
}
/* panels land one after another, in three hard steps like a comic slam */
@media (prefers-reduced-motion: no-preference) {
  .comic.is-ready .cpanel { opacity: 0; }
  .comic.is-on .cpanel { animation: comic-in .33s steps(3, end) both; animation-delay: calc(var(--i) * .55s); }
}
@keyframes comic-in {
  from { opacity: 0; transform: translateY(16px) rotate(-1.4deg) scale(1.04); }
  to { opacity: 1; transform: none; }
}

/* who we are: copy and facts left, the mission right, values below */
.team-grid {
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 56px); align-items: stretch;
}
@media (max-width: 900px) { .team-grid { grid-template-columns: minmax(0, 1fr); } }
.team-copy p { margin: 0 0 14px; font-size: var(--t-lg); line-height: 1.55; color: #2A3242; }
.team-facts {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 24px 0 0;
  background: #fff; border: 3px solid var(--ink);
}
.team-facts div { min-width: 0; padding: 16px 18px; border-right: 3px solid var(--ink); }
.team-facts div:last-child { border-right: 0; }
.team-facts dt {
  font-family: var(--display); font-weight: 700; font-size: var(--t-2xl);
  letter-spacing: -.03em; line-height: 1; color: var(--ink); white-space: nowrap;
}
.team-facts dd { margin: 6px 0 0; font-size: var(--t-sm); line-height: 1.4; color: var(--fg-soft); }
@media (max-width: 560px) {
  .team-facts { grid-template-columns: minmax(0, 1fr); }
  .team-facts div { border-right: 0; border-bottom: 3px solid var(--ink); }
  .team-facts div:last-child { border-bottom: 0; }
}
.mission {
  display: flex; flex-direction: column; justify-content: space-between; gap: 22px;
  padding: clamp(24px, 3vw, 38px); background: var(--ink); color: var(--cream);
  border: 3px solid var(--ink); box-shadow: 8px 8px 0 var(--gold);
}
.mission-lab {
  margin: 0; font-family: var(--body); font-weight: 700; font-size: var(--t-2xs);
  letter-spacing: .06em; text-transform: uppercase; color: var(--gold);
}
.mission-big {
  margin: 0; font-family: var(--display); font-weight: 700;
  font-size: var(--t-2xl); line-height: 1.16; letter-spacing: -.02em; color: #fff;
}
.mission-foot { margin: 0; padding-top: 16px; border-top: 2px solid rgba(244,246,248,.18); color: #AEB9CC; font-weight: 600; }
.values-h { margin: clamp(40px, 5vw, 64px) 0 18px; font-size: var(--t-xl); }
.values {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px;
}
@media (max-width: 1000px) { .values { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .values { grid-template-columns: minmax(0, 1fr); } }
.values li { min-width: 0; padding: 20px 20px 22px; background: #fff; border: 3px solid var(--ink); }
.v-num {
  display: inline-block; padding: 2px 7px; font-family: var(--mono); font-size: var(--t-2xs); font-weight: 600;
  background: var(--ink); color: var(--gold);
}
.values b { display: block; margin: 14px 0 6px; font-family: var(--display); font-size: var(--t-lg); line-height: 1.2; letter-spacing: -.01em; color: var(--ink); }
.values p { margin: 0; font-size: var(--t-sm); line-height: 1.5; color: var(--fg-soft); }

/* Feed Ami: copy left, the stage right */
.feed-sec { background: #fff; }
.feed-grid {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(26px, 4vw, 60px); align-items: center;
}
@media (max-width: 900px) { .feed-grid { grid-template-columns: minmax(0, 1fr); } }
.feed-copy h2 { margin: 12px 0 14px; }
.feed-copy > p { margin: 0 0 12px; font-size: var(--t-lg); line-height: 1.55; color: #2A3242; }
.feed-copy > .feed-hint { font-size: var(--t-sm); color: var(--fg-soft); }
.feed-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
.feed-status { min-height: 1.5em; margin: 16px 0 0; font-weight: 700; color: var(--ink); }
.feed-stage {
  display: flex; justify-content: center; width: 100%; padding: 0; margin: 0;
  background: #fff; border: 3px solid var(--ink); box-shadow: 8px 8px 0 var(--ink);
  cursor: pointer; line-height: 0;
}
.feed-stage:focus-visible { outline: 3px solid var(--coral); outline-offset: 4px; }
.feed-tally {
  list-style: none; margin: 20px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  background: #fff; border: 3px solid var(--ink);
}
.feed-tally li {
  min-width: 0; padding: 10px 14px; font-size: var(--t-xs); font-weight: 600; color: var(--fg-soft);
  border-right: 2px solid #D5DCE6; border-bottom: 2px solid #D5DCE6;
}
.feed-tally li:nth-child(3n) { border-right: 0; }
.feed-tally li:nth-child(n+4) { border-bottom: 0; }
.feed-tally b {
  display: block; font-family: var(--display); font-weight: 700; font-size: var(--t-xl); line-height: 1.1;
  color: var(--ink); font-variant-numeric: tabular-nums;
}
.feed-tally .is-out { background: var(--gold); color: var(--ink); }
/* the feed stage fills its box, so the desk runs edge to edge at every width */
.feed-stage canvas { width: 100%; }
/* one-line and two-line captions match, so the four panels line up */
.cpanel .cap { min-height: calc(2.5em + 23px); }

/* ==========================================================================
   TEMPLATES HEADER: "the template machine". Ami redraws a figure for the
   seventh time, pecks A2 on the machine, and slaps the ready figure onto the
   slide. SVG in the free strip right of the intro, standing on the band's
   bottom edge, so the band keeps the shared 384px height. Shown from 1180px,
   where the strip is at least 400px wide; below that the band is text only.
   6.4s, plays once; the resting state of every piece is the finished frame.
   ========================================================================== */
.tplfx { display: none; }
@media (min-width: 1180px) {
  .tplfx {
    display: block; position: absolute; bottom: 0;
    right: calc(max(0px, (100% - var(--wrap)) / 2) + 22px);
    width: min(440px, min(100%, var(--wrap)) - 759px);
  }
}
.tf-stage { display: block; width: 100%; height: auto; overflow: visible; }
.tf-stage text { font-family: var(--body); font-weight: 700; }
.tf-chip { font-size: 9.5px; fill: #FFFFFF; text-anchor: middle; }
.tf-chip-ink { fill: #0D1117; }
.tf-sign { font-size: 10px; letter-spacing: .08em; fill: #0D1117; text-anchor: middle; }
.tf-lcd { font-family: var(--mono); font-size: 8.5px; fill: #CDF546; text-anchor: middle; }
.tf-n { font-size: 11px; fill: #FFFFFF; text-anchor: middle; }
.tf-n-ink { fill: #0D1117; }
.tf-edit-t { font-size: 10px; fill: #CDF546; }
.tf-replay {
  position: absolute; right: 0; top: -1.6rem; padding: 4px 0; background: none; border: 0;
  color: #8D99AE; font: 600 var(--t-xs) var(--body); cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
}
.tf-replay:hover { color: #CDF546; }

/* the finished frame */
.tf-mess, .tf-chip-redraw, .tf-flash, .tf-card, .tf-carry, .tf-droppen, .tf-pen, .tf-up, .tf-down, .tf-joy { opacity: 0; }
.tf-ami { transform: translate(100px, -8px); }

@media (prefers-reduced-motion: no-preference) {
  .tf-stage.is-play .tf-ami { animation: tf-ami 6.4s both; }
  .tf-stage.is-play .tf-face { animation: tf-face 6.4s step-end both; }
  .tf-stage.is-play .tf-up { animation: tf-flap-a .3s steps(1) infinite, tf-flying 6.4s step-end both; }
  .tf-stage.is-play .tf-down { animation: tf-flap-b .3s steps(1) infinite, tf-flying 6.4s step-end both; }
  .tf-stage.is-play .tf-joy { animation: tf-joy 6.4s step-end both; }
  .tf-stage.is-play .tf-salute { animation: tf-salute 6.4s step-end both; }
  .tf-stage.is-play .tf-pen { animation: tf-pen 6.4s step-end both; }
  .tf-stage.is-play .tf-droppen { animation: tf-droppen 6.4s both; }
  .tf-stage.is-play .tf-mess { animation: tf-show 6.4s step-end both; }
  .tf-stage.is-play .tf-m1 { animation: tf-m1 6.4s step-end both; }
  .tf-stage.is-play .tf-m2 { animation: tf-m2 6.4s step-end both; }
  .tf-stage.is-play .tf-m3 { animation: tf-m3 6.4s step-end both; }
  .tf-stage.is-play .tf-m4 { animation: tf-m4 6.4s step-end both; }
  .tf-stage.is-play .tf-clean, .tf-stage.is-play .tf-chip-done { animation: tf-clean 6.4s step-end both; }
  .tf-stage.is-play .tf-chip-redraw { animation: tf-redraw 6.4s step-end both; }
  .tf-stage.is-play .tf-flash { animation: tf-flash 6.4s step-end both; }
  .tf-stage.is-play .tf-edit { animation: tf-edit 6.4s step-end both; }
  .tf-stage.is-play .tf-lcd { animation: tf-lcd 6.4s step-end both; }
  .tf-stage.is-play .tf-btn { animation: tf-btn 6.4s step-end both; }
  .tf-stage.is-play .tf-coil { animation: tf-coil 6.4s step-end both; }
  .tf-stage.is-play .tf-card { animation: tf-card 6.4s step-end both; }
  .tf-stage.is-play .tf-carry { animation: tf-carry 6.4s step-end both; }
  .tf-stage.is-play .tf-machine { animation: tf-shake 6.4s step-end both; }
}
/* scribble at four spots, drop the pencil, fly to the keypad, peck A2, wait
   for the vend, fetch the card from the tray, carry it back, slap it on the
   slide, land on the slide's top edge */
@keyframes tf-ami {
  0% { transform: translate(5px, 43px); animation-timing-function: step-end; }
  6.25% { transform: translate(35px, 45px); animation-timing-function: step-end; }
  12.50% { transform: translate(71px, 43px); animation-timing-function: step-end; }
  18.75% { transform: translate(23px, 71px); animation-timing-function: step-end; }
  25.00% { transform: translate(23px, 71px); animation-timing-function: step-end; }
  26.56% { transform: translate(36px, 58px); animation-timing-function: steps(6, end); }
  39.06% { transform: translate(276px, 48px); animation-timing-function: step-end; }
  40.63% { transform: translate(279px, 48px); animation-timing-function: step-end; }
  42.19% { transform: translate(276px, 48px); animation-timing-function: step-end; }
  59.37% { transform: translate(276px, 48px); animation-timing-function: steps(3, end); }
  65.63% { transform: translate(331px, 75px); animation-timing-function: step-end; }
  67.19% { transform: translate(331px, 75px); animation-timing-function: steps(7, end); }
  78.13% { transform: translate(53px, 37px); animation-timing-function: step-end; }
  79.69% { transform: translate(53px, 43px); animation-timing-function: steps(3, end); }
  84.38%, 100% { transform: translate(100px, -8px); }
}
/* faces right to draw and to vend, left to carry the figure home */
@keyframes tf-face {
  0% { transform: none; }
  67.19% { transform: matrix(-1, 0, 0, 1, 42, 0); }
  84.38%, 100% { transform: none; }
}
@keyframes tf-flap-a { 0% { opacity: 1; } 50% { opacity: 0; } }
@keyframes tf-flap-b { 0% { opacity: 0; } 50% { opacity: 1; } }
@keyframes tf-flying { 0% { visibility: visible; } 84.38%, 100% { visibility: hidden; } }
@keyframes tf-joy { 0% { opacity: 0; } 84.38% { opacity: 1; } 89.06%, 100% { opacity: 0; } }
@keyframes tf-salute { 0% { opacity: 0; } 89.06%, 100% { opacity: 1; } }
@keyframes tf-pen { 0% { opacity: 1; } 25.00%, 100% { opacity: 0; } }
@keyframes tf-droppen {
  0% { opacity: 0; transform: none; animation-timing-function: step-end; }
  25.00% { opacity: 1; transform: none; animation-timing-function: steps(3, end); }
  31.25% { opacity: 1; transform: translate(8px, 80px); animation-timing-function: step-end; }
  32.03%, 100% { opacity: 0; transform: translate(8px, 80px); }
}
@keyframes tf-show { 0% { opacity: 1; } 79.69%, 100% { opacity: 0; } }
@keyframes tf-m1 { 0% { opacity: 0; } 3.13%, 100% { opacity: 1; } }
@keyframes tf-m2 { 0% { opacity: 0; } 9.37%, 100% { opacity: 1; } }
@keyframes tf-m3 { 0% { opacity: 0; } 15.63%, 100% { opacity: 1; } }
@keyframes tf-m4 { 0% { opacity: 0; } 21.87%, 100% { opacity: 1; } }
@keyframes tf-clean { 0% { opacity: 0; } 79.69%, 100% { opacity: 1; } }
@keyframes tf-redraw { 0% { opacity: 1; } 79.69%, 100% { opacity: 0; } }
@keyframes tf-flash { 0% { opacity: 0; } 79.69% { opacity: 1; } 82.03% { opacity: 0; } 84.38% { opacity: 1; } 86.72%, 100% { opacity: 0; } }
@keyframes tf-edit { 0% { opacity: 0; } 86.72%, 100% { opacity: 1; } }
@keyframes tf-lcd { 0% { opacity: 0; } 40.63%, 100% { opacity: 1; } }
@keyframes tf-btn { 0% { fill: #F4F6F8; } 40.63% { fill: #CDF546; } 59.37%, 100% { fill: #F4F6F8; } }
@keyframes tf-coil {
  0% { transform: none; }
  46.88% { transform: translateX(2px); } 48.44% { transform: translateX(-1px); }
  50.00% { transform: translateX(2px); } 51.56% { transform: translateX(-1px); }
  53.13%, 100% { transform: none; }
}
/* A2 is pushed off its coil, drops to the tray, and is picked up */
@keyframes tf-card {
  0% { opacity: 1; transform: translate(340px, 59px); }
  46.88% { opacity: 1; transform: translate(340px, 62px); }
  50.00% { opacity: 1; transform: translate(340px, 62px); animation-timing-function: steps(4, end); }
  57.81% { opacity: 1; transform: translate(340px, 116px); }
  65.63%, 100% { opacity: 0; transform: translate(340px, 116px); }
}
@keyframes tf-carry { 0% { opacity: 0; } 65.63% { opacity: 1; } 79.69%, 100% { opacity: 0; } }
@keyframes tf-shake {
  0% { transform: none; }
  57.81% { transform: translateX(2px); } 58.59% { transform: translateX(-2px); }
  59.37% { transform: translateX(1px); } 60.16%, 100% { transform: none; }
}

/* bot trap field (leads.js): off screen, out of the tab order, never seen */
.hp-field { position: absolute !important; left: -10000px !important; top: auto; width: 1px; height: 1px; overflow: hidden; opacity: 0; }

/* errors read as errors: a red edge on a pale red ground, ink text
   (the old rule used the cobalt CTA colour, so an error looked like a button) */
.form-status.err { background: #FFE9E4; color: var(--ink); border-color: #FF5A3C; }

/* Cloudflare Turnstile (leads.js): invisible unless Cloudflare needs a click,
   then it sits at the foot of the form at the form's width */
.cf-slot { max-width: 100%; }
.cf-slot.is-asking { margin: 6px 0 14px; }
/* in grid-laid forms (the date hold) the check takes a full row of its own */
.hold .cf-slot { grid-column: 1 / -1; }

/* ==========================================================================
   POLICY PAGES AND FOOTER LINKS (payment gateway check, 2026-09-24)
   ========================================================================== */
.trust[hidden] { display: none !important; }
.contact-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0 0 30px; }
@media (max-width: 760px) { .contact-grid { grid-template-columns: minmax(0, 1fr); } }
.contact-card { min-width: 0; padding: 18px 20px; background: #fff; border: 3px solid var(--ink); }
.legal .contact-card h2 { margin: 0 0 6px; font-size: var(--t-sm); }
.contact-card p { margin: 0; overflow-wrap: anywhere; }
.contact-card .contact-note { margin-top: 6px; font-size: var(--t-xs); color: var(--fg-soft); }
.foot-legal { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.foot-legal a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.foot-legal a:hover { color: var(--gold); }
/* a template that cannot be delivered yet */
.btn-soon, .btn-soon:hover, .btn-soon:active {
  cursor: default; opacity: .6; transform: none; box-shadow: none; background: #fff; color: var(--ink);
}
/* contact: full width, not the narrow reading column of the long legal pages */
.legal.contact-wrap { max-width: var(--wrap); }
.contact-grid { gap: 18px; }
.contact-card p { overflow-wrap: normal; }
.contact-card a[href^="mailto:"] { overflow-wrap: anywhere; }
.contact-info { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 28px; }
.contact-info h2 { margin-top: 4px; }
@media (max-width: 760px) { .contact-info { grid-template-columns: minmax(0, 1fr); } }
/* policy links in the sans, like the rest of the small print */
.foot-legal { font-family: var(--body); font-size: var(--t-xs); }

/* "Prefer your own NDA?" (NDA page and the Send a draft sign box) */
.legal-note { margin: 0 0 22px; padding: 12px 14px; background: #fff; border: 2px solid var(--ink); font-size: var(--t-sm); color: var(--ink); }
.sign-own { margin: 0 0 12px; font-size: var(--t-xs); color: var(--fg-soft); }
.sign-own a { color: #0B5FFF; }

/* hero: three true facts in the space the (hidden) logo strip used */
.hero .hero-facts { margin-top: 34px; }
.hero .hero-facts dt { font-size: var(--t-2xl); }
/* pinned to the foot of the text column, so its bottom edge lines up with
   the quote card whether or not the Turnstile box is showing */
.hero .hero-facts { margin-top: auto; }

/* ==========================================================================
   Hero card, compact (2026-09-25)
   Akul: the card was 708px tall and ran off a laptop screen. Same content,
   less height: the drop box is one row with the icon beside the words,
   "Add brand files" is a slim line under it, and the spacing follows one
   10px rhythm. Controls stay 50px tall, like every form row on the site.
   The whole card, button included, fits a 1366x768 screen.
   ========================================================================== */
#quickForm { padding: 16px 20px 14px; }
#quickForm .card-head { margin-bottom: 10px; padding-bottom: 8px; }
#quickForm .field,
#quickForm .frow .field { margin-bottom: 10px; }
#quickForm .kind-pick legend { margin-bottom: 5px; }
#quickForm .kind-pick .opt span { padding: 8px 4px; }
#quickForm .drop.compact {
  display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; align-items: center;
  text-align: left; padding: 10px 14px; margin-bottom: 8px;
}
#quickForm .drop-ico { grid-row: span 2; width: 24px; height: 24px; margin: 0; }
#quickForm .drop-t { margin: 0; font-size: var(--t-sm); line-height: 1.3; }
#quickForm .drop-s { margin: 0; font-size: var(--t-xs); line-height: 1.35; }
#quickForm .drop-files { grid-column: 1 / -1; margin-top: 8px; }
#quickForm .slots { margin-bottom: 10px; }
#quickForm .slots > summary { padding: 7px 12px; }
#quickForm .card-quote { margin: 0 0 10px; padding-top: 8px; padding-bottom: 8px; }
#quickForm .card-quote .promo-tag { display: inline-block; margin: 4px 0 0 6px; vertical-align: 1px; }
#quickForm [type=submit] { padding: 13px 20px; }
#quickForm .card-head { margin-bottom: 8px; padding-bottom: 6px; }
#quickForm .due-note { margin-top: 4px; }
#quickForm .card-foot { margin-top: 8px; line-height: 1.4; }

/* ==========================================================================
   Hero in cobalt (2026-09-25). Akul compared the current grey with lime, ink
   and cobalt on a local preview, and chose cobalt. The main button turns lime
   so it still stands out on the blue; the quote card keeps its own blue
   button and white face.
   ========================================================================== */
.hero { background: var(--coral); }
.hero h1,
.hero .hero-sub strong { color: #FFFFFF; }
.hero .hero-sub,
.hero .assure span { color: #DCE3FF; }
.hero .assure span::before { color: var(--gold); }
.hero .hero-cta .btn-primary { background: var(--gold); color: var(--ink); }
.hero .hero-facts { background: transparent; border-color: #FFFFFF; }
.hero .hero-facts div { border-color: #FFFFFF; }
.hero .hero-facts dt { color: #FFFFFF; }
.hero .hero-facts dd { color: #DCE3FF; }

/* ==========================================================================
   Figure Pack story (2026-09-25)
   The box wobbles, the lid pops, five of the ten figures fan out, Ami pops
   out and flies to "Get my pack" and points at it. The box and cards are CSS
   (started by .is-play); Ami is flown by site.js 16c, because it has to land
   on the real button wherever the layout puts it. Stepped motion only, like
   the other Ami stories. Reduced motion: .is-final, the last frame, still.
   ========================================================================== */
.strip-grid { position: relative; }
.strip-art.packfx { display: block; position: relative; margin-bottom: 1.4rem; }
.pk-stage { display: block; width: 100%; height: auto; overflow: visible; }
.pk-stage text { font-family: var(--body); font-weight: 700; text-anchor: middle; }
.pk-lab { font-size: 11px; fill: #0D1117; letter-spacing: .06em; }
.pk-sub { font-size: 8px; fill: #FFFFFF; }
.pk-flaps { opacity: 0; }
.pk-c { transform: translateY(58px); }
.packfx.is-final .pk-lid { opacity: 0; }
.packfx.is-final .pk-flaps { opacity: 1; }
.packfx.is-final .pk-c { transform: none; }
@media (prefers-reduced-motion: no-preference) {
  .packfx.is-play .pk-box { transform-box: view-box; transform-origin: 99px 164px; animation: pk-wobble .9s steps(1, end) both; }
  .packfx.is-play .pk-lid { animation: pk-off .01s .9s both; }
  .packfx.is-play .pk-flaps { animation: pk-on .01s .9s both; }
  .packfx.is-play .pk-c { animation: pk-rise .48s steps(4, end) calc(.95s + var(--k) * 70ms) both; }
  #packGo.is-poked { animation: pk-poke .9s steps(1, end) 2; }
}
@keyframes pk-wobble {
  0%, 100% { transform: none; }
  15% { transform: rotate(-3deg); }
  30% { transform: rotate(3deg); }
  45% { transform: rotate(-3deg); }
  60% { transform: rotate(2deg); }
  75% { transform: rotate(-1deg); }
}
@keyframes pk-off { from { opacity: 1; } to { opacity: 0; } }
@keyframes pk-on { from { opacity: 0; } to { opacity: 1; } }
@keyframes pk-rise { from { transform: translateY(58px); } to { transform: none; } }
@keyframes pk-poke {
  0%, 50%, 100% { box-shadow: none; }
  25%, 75% { box-shadow: 0 0 0 4px #FFFFFF; }
}
.pk-replay {
  position: absolute; right: 0; bottom: -1.5rem; padding: 4px 0; background: none; border: 0;
  color: var(--ink); font: 600 var(--t-xs) var(--body); cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
}

/* Ami, flown over the layout; 60px wide, feet 48px below its top */
.pk-ami { position: absolute; left: 0; top: 0; width: 60px; z-index: 4; pointer-events: none; }
.pk-ami svg { display: block; width: 100%; height: auto; overflow: visible; }
.pk-ami svg > g { display: none; }
.pk-ami[data-pose="up"] .pk-up,
.pk-ami[data-pose="down"] .pk-down,
.pk-ami[data-pose="joy"] .pk-joy,
.pk-ami[data-pose="point"] .pk-point { display: inline; }
.pk-say {
  position: absolute; right: calc(100% + 4px); top: 10px; display: none; white-space: nowrap;
  padding: 4px 8px; background: var(--ink); color: var(--gold); font-size: var(--t-2xs); font-weight: 700;
}
.pk-ami[data-pose="point"] .pk-say { display: block; }
.grab.is-done ~ .pk-ami { display: none; }

/* phones and tablets: the story sits between the words and the form */
@media (max-width: 980px) {
  .strip-art.packfx { display: block; width: min(260px, 100%); }
  .pk-replay { bottom: auto; top: -.4rem; right: -3.5rem; }
}