/* ==========================================================================
   Loadout Event Logistics, marketing site
   Built S16, 2026-08-16. Brand locked in S06: black/white core, restrained
   high-vis accent. The green signals; it does not decorate.
   ========================================================================== */

:root {
  --ink:        #0a0a0a;
  --ink-soft:   #4a4a4a;
  --ink-faint:  #767676;
  --paper:      #ffffff;
  --paper-warm: #f4f4f2;
  --line:       #e0e0dd;
  --line-dark:  #2e2e2e;
  --accent:     #c8ff00;

  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --sans: "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;

  --pad: clamp(24px, 5vw, 64px);
  --wide: 1120px;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}

img { max-width: 100%; height: auto; display: block; }

.wrap {
  max-width: var(--wide);
  margin: 0 auto;
  padding-left: var(--pad);
  padding-right: var(--pad);
}

/* Constrain the CONTENT to a readable measure, not the container. Shrinking the
   container instead re-centers it inside the page and the headings stop lining
   up with the hero above them. Left alignment is the default here. */
.narrow > * { max-width: 720px; }

/* --- Type ----------------------------------------------------------------- */

h1, h2, h3 { margin: 0; letter-spacing: -0.025em; line-height: 1.08; font-weight: 800; }

h1 { font-size: clamp(2.25rem, 6vw, 4rem); }
h2 { font-size: clamp(1.75rem, 4vw, 2.75rem); }
h3 { font-size: clamp(1.125rem, 2.2vw, 1.375rem); line-height: 1.25; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

.lede {
  font-size: clamp(1.0625rem, 2.2vw, 1.3125rem);
  line-height: 1.55;
  color: var(--ink-soft);
}

/* The eyebrow sets up the heading under it, so it has to be readable at a
   glance. At 11px against an 800-weight headline it was 5.8x smaller and the
   eye skipped it. 16px at 700 puts the gap at 4.0x, which is inside the range
   a kicker normally sits in. Tracking tightens as size goes up, because 0.2em
   sprawls once the type is no longer tiny. */
.eyebrow {
  font-family: var(--mono);
  font-size: 1rem;
  letter-spacing: 0.10em;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 20px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.eyebrow::before {
  content: "";
  width: 12px;
  height: 12px;
  background: var(--accent);
  flex: none;
}

/* Accent survives only where it is one of the page's four. */
.dark .eyebrow::before { background: var(--accent); }

/* --- Nav ------------------------------------------------------------------ */

.nav {
  border-bottom: 1px solid var(--line);
  background: var(--paper);
  position: sticky;
  top: 0;
  z-index: 20;
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 68px;
  flex-wrap: wrap;
  padding-top: 10px;
  padding-bottom: 10px;
}

.brand {
  font-weight: 900;
  font-size: 1.3125rem;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 9px;
}

.brand::after {
  content: "";
  width: 8px;
  height: 8px;
  background: var(--accent);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.5vw, 28px);
  flex-wrap: wrap;
}

.nav-links a:not(.btn) {
  padding-block: 11px;
}

.nav-links a {
  font-size: 0.875rem;
  color: var(--ink-soft);
  text-decoration: none;
  font-weight: 500;
}

.nav-links a:hover,
.nav-links a[aria-current="page"] { color: var(--ink); }

.nav-links a[aria-current="page"] { font-weight: 700; }

/* Six nav items wrap to three lines on a phone, and a sticky 165px header on
   top of the 64px pre-launch bar was holding 28% of an 812px viewport
   permanently. Below 768px the header scrolls away instead, and the rows
   tighten. Revisit if a real mobile menu is ever built. */
@media (max-width: 768px) {
  .nav { position: static; }
  .nav-inner { min-height: 0; gap: 10px 14px; padding-top: 12px; padding-bottom: 12px; }
  .nav-links { gap: 10px 16px; }
  .nav-links a { font-size: 0.8125rem; }
  .nav-links a.btn { font-size: 0.8125rem; padding: 9px 16px; }
  .brand { font-size: 1.1875rem; }
}

/* `.nav-links a` outranks `.btn` on specificity, which silently painted the
   Get Started button's label #4a4a4a on near-black. Restate it here. */
.nav-links a.btn { color: var(--paper); font-size: 0.9375rem; font-weight: 700; }
.nav-links a.btn:hover { color: var(--ink); }

/* --- Buttons -------------------------------------------------------------- */

.btn {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.9375rem;
  font-weight: 700;
  padding: 12px 22px;
  text-decoration: none;
  border: 1.5px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  transition: background-color .15s ease, color .15s ease;
  white-space: nowrap;
}

.btn:hover { background: var(--accent); border-color: var(--accent); color: var(--ink); }

.btn-ghost { background: transparent; color: var(--ink); }
.btn-ghost:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }

.btn-group { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 32px; }

:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.dark :focus-visible { outline-color: var(--accent); }

/* --- Sections ------------------------------------------------------------- */

.section { padding: clamp(56px, 9vw, 104px) 0; }
.section + .section { border-top: 1px solid var(--line); }
.section-warm { background: var(--paper-warm); border-top: 1px solid var(--line); }

/* Inverted blocks. Black is a primary brand state, not a fallback. */
.dark {
  background: var(--ink);
  color: var(--paper);
  border-top: none !important;
}

.dark h1, .dark h2, .dark h3 { color: var(--paper); }
.dark .lede { color: #bdbdbd; }
.dark .eyebrow { color: #b8b8b8; }
.dark .btn { background: var(--paper); border-color: var(--paper); color: var(--ink); }
.dark .btn:hover { background: var(--accent); border-color: var(--accent); }
.dark .btn-ghost { background: transparent; color: var(--paper); border-color: #555; }
.dark .btn-ghost:hover { background: var(--paper); border-color: var(--paper); color: var(--ink); }

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

.hero { padding: clamp(64px, 11vw, 132px) 0 clamp(56px, 9vw, 108px); }
.hero h1 { max-width: 15ch; }
.hero .lede { margin-top: 24px; max-width: 52ch; }

.tagline {
  font-family: var(--mono);
  font-size: clamp(0.75rem, 1.8vw, 0.9375rem);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 28px 0 0;
}

/* --- Steps ---------------------------------------------------------------- */

.steps { list-style: none; padding: 0; margin: 48px 0 0; counter-reset: step; }

.step {
  counter-increment: step;
  display: grid;
  grid-template-columns: 62px 1fr;
  gap: clamp(16px, 3vw, 32px);
  padding: 28px 0;
  border-top: 1px solid var(--line);
}

.step:last-child { border-bottom: 1px solid var(--line); }

.step::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--mono);
  font-size: 0.875rem;
  color: var(--ink-faint);
  letter-spacing: 0.08em;
  padding-top: 4px;
}

.step p { margin: 8px 0 0; color: var(--ink-soft); max-width: 58ch; }

/* --- Card grid ------------------------------------------------------------ */

.grid {
  display: grid;
  gap: clamp(20px, 3vw, 32px);
  margin-top: 48px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

/* A four-step flow must never render 3 + 1. auto-fit did exactly that, because
   four 240px minimums plus gaps exceed the 992px content width. Be explicit. */
.grid-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 900px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .grid-4 { grid-template-columns: 1fr; } }

.card { border-top: 3px solid var(--ink); padding-top: 20px; }
.card p { margin: 10px 0 0; color: var(--ink-soft); font-size: 0.9375rem; }
.dark .card { border-top-color: var(--accent); }
.dark .card p { color: #b0b0b0; }

/* --- Icons ---------------------------------------------------------------- */
/* Stroke icons, drawn inline so there is no icon font and no network request.
   currentColor so they invert on .dark for free. Placeholder set; a proper
   design pass replaces these. */

.icon {
  width: 30px;
  height: 30px;
  stroke: var(--ink);
  fill: none;
  stroke-width: 1.75;
  stroke-linecap: square;
  stroke-linejoin: miter;
  display: block;
  margin-bottom: 16px;
}

.dark .icon { stroke: var(--accent); }
.card .icon { margin-bottom: 14px; }

/* --- Flow ----------------------------------------------------------------- */
/* The store / prep / ship / return cycle drawn as a sequence rather than four
   unrelated boxes. The arrow is the whole point: it says this repeats. */

.flow {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-top: 48px;
  align-items: stretch;
}

.flow-step {
  position: relative;
  padding: 24px clamp(14px, 2vw, 28px) 24px 0;
  border-top: 3px solid var(--ink);
}

.flow-step + .flow-step { padding-left: clamp(14px, 2vw, 28px); }

/* The connector. A thin rule with a chevron, sitting on the top border so it
   reads as one continuous track across all four steps. */
.flow-step + .flow-step::before {
  content: "";
  position: absolute;
  top: -3px;
  left: 0;
  width: 1px;
  height: 3px;
  background: var(--paper-warm);
}

.flow-step::after {
  content: "";
  position: absolute;
  top: -8px;
  right: -7px;
  width: 12px;
  height: 12px;
  border-top: 3px solid var(--ink);
  border-right: 3px solid var(--ink);
  transform: rotate(45deg);
  background: transparent;
}

.flow-step:last-child::after { display: none; }

.flow-step h3 { font-size: 1.0625rem; }
.flow-step p { margin: 10px 0 0; color: var(--ink-soft); font-size: 0.9375rem; }

@media (max-width: 900px) {
  .flow { grid-template-columns: repeat(2, 1fr); }
  /* The chevron points right, which is a lie at the end of a wrapped row. */
  .flow-step:nth-child(2)::after { display: none; }
}

@media (max-width: 560px) {
  .flow { grid-template-columns: 1fr; }
  .flow-step { padding-left: 0 !important; padding-right: 0; }
  .flow-step::after { display: none; }
}

/* --- Screenshot placeholder ----------------------------------------------- */
/* Holds the slot for real product screenshots on the-system.html. Sized to a
   16:10 frame so dropping an <img> in later does not reflow the page. Replace
   the .shot div with <img class="shot-img"> when the captures exist. */

.shot {
  position: relative;
  aspect-ratio: 16 / 10;
  border: 1px solid var(--line);
  background:
    repeating-linear-gradient(
      135deg,
      var(--paper-warm) 0, var(--paper-warm) 11px,
      #ececea 11px, #ececea 22px
    );
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.shot span {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  background: var(--paper);
  border: 1px solid var(--line);
  padding: 7px 13px;
  text-align: center;
}

.shot-img { width: 100%; border: 1px solid var(--line); }

.dark .shot {
  border-color: var(--line-dark);
  background: repeating-linear-gradient(
    135deg,
    #141414 0, #141414 11px,
    #1b1b1b 11px, #1b1b1b 22px
  );
}

.dark .shot span { background: #0d0d0d; border-color: var(--line-dark); color: #8a8a8a; }

.shot-caption {
  font-size: 0.875rem;
  color: var(--ink-faint);
  margin: 12px 0 0;
}

.dark .shot-caption { color: #9a9a9a; }

/* --- Calculator ----------------------------------------------------------- */
/* Ported from the client-facing pricing guide. Same constants, same gate
   behavior, restyled into the marketing site's system. Two columns at desktop:
   inputs left, the running number right and sticky so it never scrolls out of
   sight while someone is adjusting sliders. */

.calc {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: clamp(28px, 4vw, 52px);
  margin-top: 44px;
  align-items: start;
}

@media (max-width: 900px) { .calc { grid-template-columns: 1fr; } }

.calc-label {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 14px;
}

.calc-group + .calc-group { margin-top: 38px; }

.item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 13px 0;
  border-top: 1px solid var(--line);
}

.item:last-of-type { border-bottom: 1px solid var(--line); }
.item-n { font-size: 0.9375rem; }

.stepper { display: flex; align-items: center; gap: 4px; flex: none; }

.stepper button {
  width: 34px;
  height: 34px;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1;
  border: 1.5px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  font-family: var(--sans);
  padding: 0;
}

.stepper button:hover { border-color: var(--ink); background: var(--accent); }

.stepper output {
  min-width: 38px;
  text-align: center;
  font-family: var(--mono);
  font-size: 0.9375rem;
  font-weight: 700;
}

/* 34px is fine for a mouse and too small for a thumb. */
@media (max-width: 900px) {
  .stepper button { width: 42px; height: 42px; }
  .item { padding: 10px 0; }
}

.slider { margin-top: 22px; }

.slider-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 9px;
  font-size: 0.9375rem;
}

.slider-head output { font-family: var(--mono); font-weight: 700; }

.slider input[type="range"] {
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  height: 3px;
  background: var(--line);
  outline-offset: 6px;
}

.slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  background: var(--ink);
  border: 3px solid var(--accent);
  cursor: pointer;
}

.slider input[type="range"]::-moz-range-thumb {
  width: 22px;
  height: 22px;
  background: var(--ink);
  border: 3px solid var(--accent);
  cursor: pointer;
  border-radius: 0;
}

.calc-out {
  border: 1px solid var(--ink);
  border-top: 5px solid var(--accent);
  padding: clamp(22px, 3vw, 30px);
  background: var(--paper);
  position: sticky;
  top: 92px;
}

@media (max-width: 900px) { .calc-out { position: static; } }

.big {
  font-size: clamp(2.5rem, 7vw, 3.5rem);
  font-weight: 900;
  letter-spacing: -0.035em;
  line-height: 1;
  margin: 0;
}

.big-sub { font-size: 0.9375rem; color: var(--ink-soft); margin: 12px 0 0; }

.lines { margin: 26px 0 0; padding: 22px 0 0; border-top: 1px solid var(--line); }

.line {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  font-size: 0.875rem;
  padding: 7px 0;
}

.line span:first-child { color: var(--ink-soft); }
.line span:last-child { font-family: var(--mono); flex: none; }
.line-total { border-top: 1px solid var(--line); margin-top: 10px; padding-top: 13px; font-weight: 700; }
.line-total span:first-child { color: var(--ink); }

.saving {
  margin-top: 22px;
  padding: 18px 20px;
  background: var(--ink);
  color: var(--paper);
}

.saving strong { color: var(--accent); display: block; font-size: 1.25rem; margin-bottom: 5px; }
.saving p { margin: 0; font-size: 0.8125rem; color: #b8b8b8; }

.gate, .warn {
  border: 1px solid var(--ink);
  border-left-width: 5px;
  padding: 20px 22px;
  margin-top: 26px;
  background: var(--paper-warm);
}

.warn { border-left-color: var(--accent); }
.gate p, .warn p { font-size: 0.9375rem; color: var(--ink-soft); }
.gate strong, .warn strong { color: var(--ink); }
.gate p + p, .warn p + p { margin-top: 0.9em; }

/* --- Palm ----------------------------------------------------------------- */
/* Orlando marker in the footer. The one decorative element in the system, and
   it earns its place by being about the actual city rather than being a shape. */

.palm {
  width: 15px;
  height: 15px;
  fill: var(--accent);
  display: inline-block;
  vertical-align: -2px;
  margin: 0 7px;
}

/* --- Signature ------------------------------------------------------------ */
/* An initial rather than a name. The founder is not publicly identified while
   still employed in this industry; see the S18 exposure decision. */

.sig {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 44px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
}

.sig-mark {
  font-size: 2.25rem;
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--ink);
  border-bottom: 3px solid var(--accent);
  padding: 0 3px 4px;
}

.sig-line {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* --- Barcode motif -------------------------------------------------------- */
/* From the case-label variant in the locked logo system. Decorative only, so
   it is aria-hidden wherever it appears. */

/* --- Case label ----------------------------------------------------------
   The brand sheet's Case Label Variant, which is the signature mark. The bar
   rhythm is carried over unchanged from the old .barcode stripe, because that
   texture was the part worth keeping. Two sizes: the full label with a status
   header closes the dark sections, the plain one sits on light sections where
   the old thin stripe read as filler. */

.case-label {
  position: relative;
  max-width: 260px;
  padding: 15px 15px 11px;
  border: 1px solid var(--line);
  background: var(--paper);
}

.case-label.is-full { padding-top: 12px; }

.cl-bars {
  height: 62px;
  opacity: 0.9;
  background-image: repeating-linear-gradient(
    to right,
    var(--ink) 0, var(--ink) 2px,
    transparent 2px, transparent 5px,
    var(--ink) 5px, var(--ink) 6px,
    transparent 6px, transparent 8px,
    var(--ink) 8px, var(--ink) 11px,
    transparent 11px, transparent 13px
  );
}

.cl-code {
  margin-top: 10px;
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.24em;
  color: var(--ink-faint);
  text-align: center;
}

.cl-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 13px;
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.cl-head b { color: var(--ink); font-weight: 700; }

/* Four corner brackets. Two pseudo-elements on the box, two on .cl-frame. */
.case-label::before,
.case-label::after,
.cl-frame::before,
.cl-frame::after {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  border: 1px solid var(--accent);
}

.case-label::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.case-label::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }
.cl-frame::before { top: -1px; right: -1px; border-left: 0; border-bottom: 0; }
.cl-frame::after { bottom: -1px; left: -1px; border-right: 0; border-top: 0; }

.cl-frame { position: absolute; inset: 0; pointer-events: none; }

/* Dark sections. White bars on near-black, which is how the brand sheet draws it. */
.dark .case-label { border-color: var(--line-dark); background: #0d0d0d; }
.dark .cl-bars {
  background-image: repeating-linear-gradient(
    to right,
    var(--paper) 0, var(--paper) 2px,
    transparent 2px, transparent 5px,
    var(--paper) 5px, var(--paper) 6px,
    transparent 6px, transparent 8px,
    var(--paper) 8px, var(--paper) 11px,
    transparent 11px, transparent 13px
  );
}
.dark .cl-code,
.dark .cl-head { color: #8a8a8a; }
.dark .cl-head b { color: var(--accent); }

/* --- Two paths ------------------------------------------------------------ */
/* Reserve a slot is the high-intent path. Keep me posted is the low-intent one
   and it exists because most visitors are not ready to reserve anything. */

.paths {
  display: grid;
  gap: clamp(20px, 3vw, 28px);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  margin-top: 44px;
  align-items: start;
}

.path {
  border: 1px solid var(--line);
  padding: clamp(24px, 3.5vw, 34px);
  background: var(--paper);
}

.path-lead { border-left: 5px solid var(--accent); }
.path h3 { margin-bottom: 12px; }
.path p { color: var(--ink-soft); font-size: 0.9375rem; }
.path .btn-group { margin-top: 24px; }

.dark .path { background: #121212; border-color: var(--line-dark); }
.dark .path p { color: #b0b0b0; }

/* --- Lists ---------------------------------------------------------------- */

.ticks { list-style: none; padding: 0; margin: 32px 0 0; }

.ticks li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 13px;
  color: var(--ink-soft);
}

.ticks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 9px;
  height: 9px;
  background: var(--ink);
}

.ticks strong { color: var(--ink); font-weight: 700; }

/* Ticks inherited light-on-light into inverted sections. On the pricing terms
   block the body text rendered #4a4a4a and the bold labels #0a0a0a on a
   near-black ground, which was effectively invisible. */
.dark .ticks li { color: #bdbdbd; }
.dark .ticks strong { color: var(--paper); }
.dark .nots li { color: #bdbdbd; }
.dark .nots li::before { background: #6f6f6f; }

.nots { list-style: none; padding: 0; margin: 32px 0 0; }

.nots li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 13px;
  color: var(--ink-soft);
}

.nots li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 11px;
  height: 2px;
  background: var(--ink-faint);
}

.two-col {
  display: grid;
  gap: clamp(32px, 6vw, 72px);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  align-items: start;
}

/* --- Case label ----------------------------------------------------------- */
/* From the case-label variant in the locked logo system. */

.label { border: 1px solid var(--line); max-width: 440px; }
.dark .label { border-color: var(--line-dark); }

.label-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 9px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--paper-warm);
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.dark .label-head { background: #141414; border-bottom-color: var(--line-dark); color: #8a8a8a; }

.label-body { padding: 18px 16px; margin: 0; }

.row { display: flex; gap: 16px; align-items: baseline; font-family: var(--mono); font-size: 0.8125rem; }
.row + .row { margin-top: 13px; }

.row dt {
  flex: none;
  width: 68px;
  color: var(--ink-faint);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 0.6875rem;
}

.row dd { margin: 0; overflow-wrap: anywhere; min-width: 0; }

/* Long addresses will not sit beside a label on a narrow screen. Stack them
   rather than letting them break out of the box. */
@media (max-width: 460px) {
  .row { flex-direction: column; gap: 5px; }
  .row dt { width: auto; }
  .row + .row { margin-top: 16px; }
  .label-head { flex-direction: column; align-items: flex-start; gap: 4px; }
}

/* --- Pre-launch bar ------------------------------------------------------- */
/* Sits where the staging bar used to. This one IS public. It carries the
   launch window and the founding-client ask on every page, quietly. Black
   rather than accent-yellow: the staging bar shouted because it was a warning,
   this is a standing fact about the business. */

.prelaunch {
  background: var(--ink);
  color: #b8b8b8;
  border-bottom: 1px solid var(--line-dark);
}

.prelaunch-inner {
  display: flex;
  align-items: center;
  gap: 10px 18px;
  flex-wrap: wrap;
  padding-top: 9px;
  padding-bottom: 9px;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.prelaunch p { margin: 0; }

.prelaunch-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--paper);
  font-weight: 700;
  flex: none;
}

.prelaunch-tag::before {
  content: "";
  width: 8px;
  height: 8px;
  background: var(--accent);
  flex: none;
}

.prelaunch a {
  color: var(--paper);
  text-decoration: none;
  border-bottom: 1px solid var(--accent);
  font-weight: 700;
  margin-left: auto;
  white-space: nowrap;
}

.prelaunch a:hover { background: var(--accent); color: var(--ink); }

.pl-short { display: none; }

/* At 375px the full sentence plus the tag plus the link stacked to three lines
   and a 110px bar, which is a third of the first screen gone before the sticky
   nav even starts. On small screens: shorter copy, and drop the link, because
   the nav's Get Started button is immediately below it and points to the same
   page. margin-left:auto is also meaningless once the row wraps. */
@media (max-width: 700px) {
  .prelaunch-inner { letter-spacing: 0.1em; }
  .pl-full { display: none; }
  .pl-short { display: inline; }
  .prelaunch a { display: none; }
}

/* --- Founding client block ------------------------------------------------ */

.founding {
  border: 1px solid var(--line);
  border-left: 5px solid var(--accent);
  padding: clamp(24px, 4vw, 36px);
  margin-top: 40px;
  background: var(--paper);
  max-width: 720px;
}

.dark .founding { background: #121212; border-color: var(--line-dark); border-left-color: var(--accent); }
.founding h3 { margin-bottom: 12px; }
.founding p { color: var(--ink-soft); max-width: 62ch; }
.dark .founding p { color: #b0b0b0; }

/* --- Public rate placeholder ---------------------------------------------- */
/* Distinct from .tbd below. This one is PUBLIC copy: the architecture is not
   finished, and saying so plainly beats inventing a number or hiding the page.
   Quiet by design, because it appears a dozen times on the pricing page and
   .tbd's dashed accent badge would turn the page into a hazard sign. */

.rate-note {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-faint);
  border: 1px solid var(--line);
  padding: 3px 9px;
  white-space: nowrap;
}

.dark .rate-note { color: #9a9a9a; border-color: var(--line-dark); }

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

.form { margin-top: 40px; max-width: 620px; }

.field { margin-bottom: 22px; }

.field label {
  display: block;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 8px;
}

.field .req { color: var(--ink); }

.field input,
.field select,
.field textarea {
  width: 100%;
  font-family: var(--sans);
  font-size: 1rem;
  color: var(--ink);
  background: var(--paper);
  border: 1.5px solid var(--line);
  padding: 12px 14px;
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
}

.field textarea { min-height: 118px; resize: vertical; }

.field select {
  /* appearance:none strips the native arrow, so draw one back in. */
  background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%),
                    linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position: calc(100% - 19px) calc(50% + 2px), calc(100% - 14px) calc(50% + 2px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 40px;
}

.field input:focus,
.field select:focus,
.field textarea:focus { border-color: var(--ink); outline: 2px solid var(--accent); outline-offset: 1px; }

.field-hint { font-size: 0.8125rem; color: var(--ink-faint); margin: 7px 0 0; }

.form button {
  font-family: var(--sans);
  font-size: 0.9375rem;
  font-weight: 700;
  padding: 13px 26px;
  border: 1.5px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}

.form button:hover { background: var(--accent); border-color: var(--accent); color: var(--ink); }

.form-fine { font-size: 0.8125rem; color: var(--ink-faint); margin-top: 16px; max-width: 56ch; }

/* Honeypot. Off-screen rather than display:none, which some bots check for. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --- Pricing placeholder -------------------------------------------------- */
/* Deliberately loud INTERNAL marker. Distinct from .rate-note above, which is
   public. Nothing wearing .tbd may reach production; it exists so an unapproved
   figure cannot ship quietly. Pricing Architecture v3 is still Draft. */

.tbd {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--accent);
  border: 1px dashed var(--ink);
  padding: 2px 8px;
  white-space: nowrap;
}

.notice {
  border: 1px solid var(--ink);
  border-left-width: 5px;
  padding: 22px 24px;
  margin: 0 0 48px;
  background: var(--paper-warm);
}

.notice p { font-size: 0.9375rem; color: var(--ink-soft); }
.notice strong { color: var(--ink); }

/* --- Fee blocks ----------------------------------------------------------- */

.fee { padding: 28px 0; border-top: 1px solid var(--line); }
.fee:last-of-type { border-bottom: 1px solid var(--line); }
.fee-head { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; flex-wrap: wrap; }
.fee p { margin: 10px 0 0; color: var(--ink-soft); max-width: 62ch; }

/* --- Links ---------------------------------------------------------------- */

.inline-link {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 2px solid var(--accent);
  font-weight: 600;
}

.inline-link:hover { background: var(--accent); }
.dark .inline-link { color: var(--paper); }
.dark .inline-link:hover { color: var(--ink); }

/* --- Footer --------------------------------------------------------------- */

.footer { background: var(--ink); color: #8a8a8a; padding: 56px 0 40px; }

.footer-inner {
  display: flex;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
  align-items: flex-start;
}

.footer a { color: #d0d0d0; text-decoration: none; font-size: 0.9375rem; }
.footer a:hover { color: var(--accent); }

.footer-links { display: flex; flex-direction: column; gap: 10px; }

.footer .brand { color: var(--paper); }

.footer-legal {
  margin-top: 44px;
  padding-top: 22px;
  border-top: 1px solid var(--line-dark);
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #5a5a5a;
}

/* --- Staging banner ------------------------------------------------------- */
/* Retained but UNUSED as of S18, when the site went public. No page carries a
   .staging element any more; .prelaunch replaced it. Kept because the staged
   preview workflow in website/README.md still needs a way to shout "not live"
   if a future pass rebuilds a page off-domain. Loud yellow on purpose. */

.staging {
  background: var(--accent);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
  padding: 8px 16px;
  font-weight: 700;
}

/* Form status line. Never leave a submit button silent: every path ends here. */
.form-status {
  margin-top: 16px;
  font-size: 0.9375rem;
  line-height: 1.5;
  padding: 12px 14px;
  border-left: 3px solid var(--ink);
  background: var(--paper-warm);
}
.form-status.is-error {
  border-left-color: #b3261e;
}

/* Screenshot honesty line. The screens are real, the sample data is not, and
   saying so is cheaper than a buyer wondering. */
.shot-note {
  margin-top: 20px;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.dark .shot-note { color: #8a8a8a; }

/* Skip link. Off screen until focused, then it lands above the sticky header. */
.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
}
.skip:focus {
  left: 8px;
  top: 8px;
  background: var(--ink);
  color: var(--paper);
  padding: 10px 14px;
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Founder stories. Specificity is the proof, so the story gets more visual
   weight than the paragraph around it, and the reading of it gets less. */
.story {
  margin: 34px 0 0;
  padding: 4px 0 4px 26px;
  border-left: 3px solid var(--accent);
  max-width: 62ch;
}

.story p {
  font-size: 1.125rem;
  line-height: 1.55;
  color: var(--ink);
}

.story .story-note {
  margin-top: 14px;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--ink-soft);
}

.dark .story p { color: var(--paper); }
.dark .story .story-note { color: #b8b8b8; }

@media (max-width: 700px) {
  .story { padding-left: 18px; }
  .story p { font-size: 1.0625rem; }
}

/* Mid-page next step. A quiet ask for readers who stop before the closer. */
.next-step {
  max-width: var(--wide);
  margin: 0 auto;
  padding: 0 var(--pad) 4px;
}

.next-step a {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 2px solid var(--ink);
  padding: 10px 0 4px;
}

.next-step a::after { content: " \2192"; }
.next-step a:hover { border-bottom-color: var(--accent); }

/* The top-bar CTA was hidden below 700px, which removed the highest-position
   ask on the device most of this traffic arrives from. */
@media (max-width: 700px) {
  .prelaunch a { display: inline-block; }
  .next-step a { font-size: 0.75rem; }
}

/* FAQ. Question as a heading and the answer directly under it, because that is
   both how a person scans a page and how an answer engine extracts one. */
.qa { padding: 30px 0; border-top: 1px solid var(--line); }
.qa:first-child { border-top: 0; padding-top: 0; }

.qa h2 {
  font-size: 1.375rem;
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin-bottom: 12px;
}

.qa p {
  color: var(--ink-soft);
  font-size: 1.0625rem;
  line-height: 1.65;
  max-width: 68ch;
}

@media (max-width: 700px) {
  .qa h2 { font-size: 1.1875rem; }
}

/* --- Dock line -----------------------------------------------------------
   The one place on the site where a graphic makes the argument instead of a
   paragraph. Two sides, one rule between them, which is the dividing line the
   copy in this section already names. */

.dockline {
  margin-top: 40px;
  border: 1px solid var(--line);
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.dl-side { padding: 20px 22px 22px; }

.dl-theirs {
  background: var(--paper-warm);
  border-right: 1px solid var(--line);
}

.dl-ours { background: var(--paper); }

.dl-head {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 18px;
}

.dl-ours .dl-head span {
  border-bottom: 2px solid var(--accent);
  padding-bottom: 3px;
}

.dl-rule { display: none; }

.dl-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  gap: 20px 14px;
}

.dl-item { display: flex; flex-direction: column; gap: 4px; }

.dl-icon {
  width: 40px;
  height: 40px;
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.35;
  stroke-linecap: square;
  stroke-linejoin: miter;
  margin-bottom: 6px;
}

.dl-theirs .dl-icon { stroke: var(--ink-faint); }

.dl-name {
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.25;
}

.dl-theirs .dl-name { color: var(--ink-soft); font-weight: 500; }

.dl-note {
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  line-height: 1.4;
}

@media (max-width: 700px) {
  .dl-grid { grid-template-columns: repeat(auto-fit, minmax(94px, 1fr)); gap: 16px 10px; }
  .dl-icon { width: 34px; height: 34px; }
}

/* --- Dock line, second pass ----------------------------------------------
   Side by side so the rule between the columns is the dividing line the copy
   names. Their side sits back in warm grey with lighter stroke, ours is on
   paper at full weight. */

.dl-sub {
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: -8px 0 20px;
  max-width: 34ch;
}

.dl-theirs .dl-sub { color: var(--ink-faint); }

.sub-h {
  font-size: 1.0625rem;
  letter-spacing: 0.01em;
}

@media (max-width: 860px) {
  .dockline { grid-template-columns: 1fr; }
  .dl-theirs { border-right: 0; border-bottom: 1px solid var(--line); }
}

/* --- Quotes read as quotes -----------------------------------------------
   The accent rule alone did not say "somebody said this". A hanging quote
   mark, italic setting, and an attribution line do. */

.story {
  position: relative;
  margin: 34px 0 0;
  padding: 26px 0 0 26px;
  border-left: 3px solid var(--accent);
  max-width: 62ch;
}

.story::before {
  content: "\201C";
  position: absolute;
  top: -6px;
  left: 18px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 4rem;
  line-height: 1;
  color: var(--accent);
}

.story p,
.story .story-q {
  font-size: 1.125rem;
  line-height: 1.55;
  color: var(--ink);
  font-style: italic;
}

.story-by {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-top: 16px;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.story-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: 1px solid var(--line);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0;
  color: var(--ink);
  flex: none;
}

.story .story-note {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--ink-soft);
  font-style: normal;
}

.dark .story .story-note { color: #b8b8b8; border-top-color: var(--line-dark); }
.dark .story-mark { border-color: var(--line-dark); color: var(--paper); }

/* --- Links ---------------------------------------------------------------
   No base rule existed, so prose links fell back to browser blue, which is the
   one color not in this brand. Ink on an accent underline reads as branded,
   works on both backgrounds, and does not signal with color alone. */

main p a:not([class]),
main li a:not([class]),
main dd a:not([class]) {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 2px solid var(--accent);
  font-weight: 600;
}

main p a:not([class]):hover,
main li a:not([class]):hover,
main dd a:not([class]):hover { background: var(--accent); }

.dark p a:not([class]),
.dark li a:not([class]) { color: var(--paper); }

.dark p a:not([class]):hover,
.dark li a:not([class]):hover { color: var(--ink); }

/* --- Screenshot viewer ---------------------------------------------------
   The app screens render at roughly a third of their captured size, so the
   interface text inside them is unreadable in place. Click opens the full
   capture. */

.shot-open {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  font: inherit;
  color: inherit;
}

.shot-zoom {
  position: absolute;
  right: 10px;
  bottom: 10px;
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: var(--ink);
  color: var(--paper);
  padding: 6px 9px;
  opacity: 0;
  transition: opacity 0.12s ease;
}

.shot-open:hover .shot-zoom,
.shot-open:focus-visible .shot-zoom { opacity: 1; }

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(10, 10, 10, 0.94);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vw, 48px);
  cursor: zoom-out;
}

.lightbox[hidden] { display: none; }

.lb-figure { margin: 0; max-width: 100%; max-height: 100%; }

.lb-figure img {
  display: block;
  max-width: 100%;
  max-height: calc(100vh - 140px);
  width: auto;
  border: 1px solid var(--line-dark);
}

.lb-figure figcaption {
  margin-top: 14px;
  max-width: 80ch;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #b8b8b8;
  line-height: 1.5;
}

.lb-close {
  position: absolute;
  top: 18px;
  right: 18px;
  background: none;
  border: 1px solid #4a4a4a;
  color: var(--paper);
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 11px 15px;
  cursor: pointer;
}

.lb-close:hover { background: var(--accent); color: var(--ink); border-color: var(--accent); }

/* --- Photo plate ----------------------------------------------------------
   Every photograph on the site sits in one of these. The four accent corner
   brackets are the accent pop, and they are carried over from the case label
   so a photo belongs to the same family as the rest of the page.

   The pop is an overlay, never masked into the photograph. Hand masking a
   region per image is how a set of photos stops matching, which is the one
   thing the fixed grade exists to prevent. Brand Identity, Addendum A1. */

.plate { margin: 0; }

.plate-frame {
  position: relative;
  border: 1px solid var(--line);
  background: var(--ink);
  line-height: 0;
}

.plate-frame img { width: 100%; height: auto; }

/* Same bracket geometry as .case-label, one size up so it holds its own
   against a photograph instead of disappearing into it. */
.plate-frame::before,
.plate-frame::after,
.plate-mark::before,
.plate-mark::after {
  content: "";
  position: absolute;
  z-index: 2;
  width: 15px;
  height: 15px;
  border: 2px solid var(--accent);
}

.plate-frame::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.plate-frame::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }
.plate-mark::before { top: -1px; right: -1px; border-left: 0; border-bottom: 0; }
.plate-mark::after { bottom: -1px; left: -1px; border-right: 0; border-top: 0; }

.plate-mark { position: absolute; inset: 0; pointer-events: none; }

/* The tag carries no accent. One pop per image, and the brackets spent it. */
.plate-tag {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  gap: 11px;
  align-items: baseline;
  padding: 9px 15px;
  background: rgba(10, 10, 10, 0.86);
  font-family: var(--mono);
  font-size: 0.625rem;
  line-height: 1.4;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #cfcfcf;
}

.plate-tag b { color: var(--paper); font-weight: 700; }

.plate-cap {
  margin: 11px 0 0;
  font-family: var(--mono);
  font-size: 0.625rem;
  line-height: 1.6;
  letter-spacing: 0.1em;
  color: var(--ink-faint);
}

.dark .plate-frame { border-color: var(--line-dark); }
.dark .plate-cap { color: #8a8a8a; }

/* --- Full bleed band ------------------------------------------------------
   Edge to edge, so it reads as a division between sections rather than as a
   picture dropped into a column. Brackets pull inward off the viewport edge,
   because a bracket cut in half by the window is just a stray mark. */

.band { position: relative; margin: 0; background: var(--ink); line-height: 0; }
.band img { width: 100%; height: auto; }

.band .plate-mark { inset: 22px; }
.band .plate-mark::before,
.band .plate-mark::after,
.band::before,
.band::after {
  content: "";
  position: absolute;
  z-index: 2;
  width: 15px;
  height: 15px;
  border: 2px solid var(--accent);
}
.band::before { top: 22px; left: 22px; border-right: 0; border-bottom: 0; }
.band::after { bottom: 22px; right: 22px; border-left: 0; border-top: 0; }
.band .plate-mark::before { top: 0; right: 0; border-left: 0; border-bottom: 0; }
.band .plate-mark::after { bottom: 0; left: 0; border-right: 0; border-top: 0; }

.band .plate-tag { left: 22px; bottom: 22px; }

@media (max-width: 600px) {
  .band .plate-mark { inset: 12px; }
  .band::before { top: 12px; left: 12px; }
  .band::after { bottom: 12px; right: 12px; }
  .band .plate-tag { left: 12px; bottom: 12px; letter-spacing: 0.14em; }
}

/* --- Calculator badge ----------------------------------------------------
   The calculator is the strongest thing on the site and it was buried on one
   page. This is the case label shrunk down and stuck to the edge of the
   screen. It sits on every page except pricing, where the calculator already
   is. */

.calc-badge {
  position: fixed;
  right: 0;
  bottom: 32px;
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px 12px 14px;
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--line-dark);
  border-right: 0;
  text-decoration: none;
  font-family: var(--mono);
  max-width: calc(100vw - 24px);
}

.calc-badge .cb-mark {
  width: 11px;
  height: 11px;
  background: var(--accent);
  flex: none;
}

.calc-badge .cb-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }

.calc-badge b {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}

.calc-badge .cb-text span {
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #8a8a8a;
  white-space: nowrap;
}

.calc-badge .cb-arrow { font-size: 0.875rem; color: var(--accent); flex: none; }

.calc-badge:hover { background: var(--accent); color: var(--ink); border-color: var(--accent); }
.calc-badge:hover .cb-mark { background: var(--ink); }
.calc-badge:hover .cb-text span { color: var(--ink); }
.calc-badge:hover .cb-arrow { color: var(--ink); }

.calc-badge:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

@media (max-width: 700px) {
  .calc-badge { bottom: 0; right: 0; left: 0; justify-content: center; border-right: 1px solid var(--line-dark); border-left: 0; }
  .calc-badge .cb-text span { display: none; }
}

/* The mobile badge is a fixed bottom bar, so the page needs room under it. */
@media (max-width: 700px) {
  body { padding-bottom: 52px; }
}