/* ==========================================================================
   Crackbotics — one-page site. Plain CSS, no build step, no dependencies.

   Two ideas hold the page together:
     1. Hairline rules and space do the dividing, not boxes. Corners stay
        square, like the plates themselves — nothing on the page is rounded.
     2. IBM Plex Mono carries every measured value — thickness, grid, lead
        time. A shop writes its numbers in mono, so the data reads as data.
   ========================================================================== */

:root {
  /* Near-black carries a faint violet cast so it sits under the magenta
     rather than fighting it. A pure blue-grey would read as a default. */
  --bg:        #14121a;
  --bg-raised: #1b1822;
  --line:      rgba(255, 255, 255, .09);
  --line-firm: rgba(255, 255, 255, .16);

  --text:  #f2eff4;
  --muted: #a49dae;
  --faint: #888193; /* lightened from #6f6879: the old value failed WCAG AA (3.5:1) for label/caption text */

  /* Light matte magenta: desaturated enough to sit calmly on the dark ground,
     light enough that filled buttons take near-black labels instead of white. */
  --accent:     #e9a8c9;
  --accent-lit: #f3c2da;
  --accent-rgb: 233, 168, 201;

  --sans: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
          Roboto, Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* The lattice is literally 8mm — the grid the parts are drilled on. Drawn
     once on the body so it runs unbroken behind every section; the nav bar
     is solid (not blurred) so it stays legible while scrolling over it. */
  --grid: 8mm;
  --grid-line: rgba(255, 255, 255, .028);
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 88px; /* clears the sticky nav */
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  color: var(--text);
  background-color: var(--bg);
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: var(--grid) var(--grid);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -0.025em; line-height: 1.1; }
p { margin: 0; }
a { color: inherit; }

.wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding-inline: 32px;
}
.measure { max-width: 62ch; }

/* Uppercase mono label, used for every data key on the page. */
.facts dt,
.spec-data dt,
.form label {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* ---------------------------------------------------------------- nav --- */
.nav {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.nav-inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 16px 32px;
  display: flex;
  align-items: center;
  gap: 32px;
}
/* The mark: light geometric lowercase, "botics" boxed, tagline beneath.
   .wordmark is the nav's one-line version; .lockup adds the tagline. */
.wordmark {
  display: inline-flex;
  align-items: center;
  font-size: 20px;
  font-weight: 400;
  letter-spacing: 0;
  text-decoration: none;
  white-space: nowrap;
}
.wordmark-crack { color: var(--accent); }
.wordmark-botics {
  color: var(--text);
  border: 1.5px solid var(--text);
  border-radius: 5px;
  padding: 2px 8px 3px;
  margin-left: 5px;
}

.nav-links {
  list-style: none;
  display: flex;
  gap: 28px;
  margin: 0;
  padding: 0;
  margin-right: auto;
}
.nav-links a {
  font-size: 15px;
  color: var(--muted);
  text-decoration: none;
  padding-block: 4px;
  border-bottom: 1px solid transparent;
}
.nav-links a:hover {
  color: var(--text);
  border-bottom-color: var(--accent);
}

/* ------------------------------------------------------------- buttons --- */
/* Light magenta with a near-black label: high contrast, and it keeps the
   accent feeling matte rather than neon. */
.btn {
  display: inline-block;
  background: var(--accent);
  color: #171320;
  font: 500 16px/1 var(--sans);
  padding: 14px 22px;
  border: 1px solid var(--accent);
  border-radius: 0;
  text-decoration: none;
  cursor: pointer;
}
.btn:hover { background: var(--accent-lit); border-color: var(--accent-lit); }
.btn-sm { padding: 9px 15px; font-size: 14px; }
.btn-quiet {
  background: transparent;
  color: var(--text);
  border-color: var(--line-firm);
}
.btn-quiet:hover { background: rgba(255,255,255,.05); border-color: var(--muted); }

/* --------------------------------------------------------------- hero --- */
.hero { padding-block: clamp(72px, 12vw, 132px) 0; }
.hero h1 {
  font-size: clamp(40px, 5.2vw, 64px);
  text-wrap: balance;
  font-weight: 700;
  letter-spacing: -0.04em;
  margin-bottom: 28px;
}
.hero h1 em { font-style: normal; color: var(--accent); }
.hero-badge {
  display: flex;
  align-items: center;
  gap: 9px;
  width: fit-content;
  margin: -8px 0 22px;
  padding: 6px 13px 6px 11px;
  border: 1px solid rgba(var(--accent-rgb), .45);
  border-radius: 99px;
  background: rgba(var(--accent-rgb), .08);
  color: var(--accent);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.hero-badge::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .18);
}
.lede {
  max-width: 56ch;
  font-size: clamp(17px, 1.7vw, 19px);
  color: var(--muted);
  margin-bottom: 36px;
}
.actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* Four facts on one rule — the page's only "stat" row, so it stays quiet. */
.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 28px;
  margin: 72px 0 0;
  padding-top: 26px;
  border-top: 1px solid var(--line);
}
.facts dt { color: var(--faint); margin-bottom: 6px; }
.facts dd {
  margin: 0;
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -0.01em;
}

/* ------------------------------------------------------------ sections --- */
.section { padding-block: clamp(64px, 8vw, 96px); }
.section-head { margin-bottom: 48px; }
/* A heading that carries its own body text, with no .section-head wrapper. */
.section > h2 { margin-bottom: 20px; }
.section h2 { font-size: clamp(28px, 3.4vw, 36px); }
.section-note {
  margin-top: 12px;
  max-width: 56ch;
  color: var(--muted);
}

/* ------------------------------------------------------------ specs --- */
/* A spec sheet, not cards: name, data, note across one hairline-ruled row. */
.specs { border-top: 1px solid var(--line); }
.spec-row {
  display: grid;
  grid-template-columns: minmax(170px, 1fr) minmax(220px, 1.1fr) minmax(240px, 1.4fr);
  gap: 32px;
  padding-block: 34px;
  border-bottom: 1px solid var(--line);
  align-items: start;
}
.spec-name h3 { font-size: 23px; }
.spec-data { margin: 0; display: grid; gap: 14px; }
.spec-data dt { color: var(--faint); margin-bottom: 3px; }
.spec-data dd { margin: 0; font-size: 15.5px; }
.spec-note { color: var(--muted); font-size: 15.5px; }

/* ------------------------------------------------------------- split --- */
/* Argument on the left, the short version on the right. */
.split {
  display: grid;
  grid-template-columns: minmax(300px, 1.15fr) minmax(280px, 1fr);
  gap: clamp(40px, 6vw, 88px);
  align-items: start;
}
.split-main h2 { margin-bottom: 24px; }
.split-main p { color: var(--muted); max-width: 54ch; }
.split-main p + p { margin-top: 18px; }

.terms { list-style: none; margin: 0; padding: 0; }
.terms li {
  padding-block: 16px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 15.5px;
}
.terms li:first-child { border-top: 1px solid var(--line); }
.terms span { color: var(--text); font-weight: 500; }

.contract-terms { max-width: 720px; }
.contract-terms li { line-height: 1.5; }
.contract-terms span { display: block; margin-bottom: 2px; }

/* -------------------------------------------------------------- work --- */
.work-team + .work-team { margin-top: 48px; }
.work-team-label {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--faint);
  margin: 0 0 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.work-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
}
.work-grid figure { margin: 0; }
/* Swap .frame for an <img class="frame"> and the sizing carries over. */
.frame,
.work-grid img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: 0;
}
.work-grid figcaption {
  margin-top: 12px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--faint);
}

/* ------------------------------------------------------------- order --- */
.order {
  border-top: 1px solid var(--line);
  background: rgba(255, 255, 255, .015);
}
.form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 22px;
  max-width: 820px;
}
/* min-width:0 so a grid item can shrink below its content's intrinsic
   size — without it, a <select> with long option text (or a long value in
   an <input>) can force its whole grid column wider than the layout
   intends, overflowing the page on narrow screens. */
.field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.field[hidden] { display: none; }
.field-wide { grid-column: 1 / -1; }
.form label { color: var(--faint); }
.opt { text-transform: none; letter-spacing: 0; color: var(--faint); }

/* Checkboxes and radios are excluded here on purpose: this block is the
   text-field look, and appearance:none on a checkbox means it can never draw
   a tick. Style those through .consent / .calc-flags instead. */
.form input:not([type="checkbox"]):not([type="radio"]),
.form select,
.form textarea {
  font: 400 16px/1.5 var(--sans);
  color: var(--text);
  background: var(--bg-raised);
  border: 1px solid var(--line-firm);
  border-radius: 0;
  padding: 12px 13px;
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
}
.form input:hover,
.form select:hover,
.form textarea:hover { border-color: var(--muted); }
.form textarea { resize: vertical; min-height: 104px; }
.form ::placeholder { color: var(--faint); }
.form input:focus-visible,
.form select:focus-visible,
.form textarea:focus-visible,
.btn:focus-visible,
a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.form select {
  background-image:
    linear-gradient(45deg, transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: right 17px center, right 12px center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 36px;
}
.form input[type="file"] { padding: 10px 13px; cursor: pointer; }
.form input[type="file"]::file-selector-button {
  font: 500 14px var(--sans);
  color: var(--text);
  background: rgba(255,255,255,.07);
  border: 1px solid var(--line-firm);
  border-radius: 0;
  padding: 7px 13px;
  margin-right: 13px;
  cursor: pointer;
}
.form input[type="file"]::file-selector-button:hover { background: rgba(255,255,255,.13); }

.hint { font-size: 14px; color: var(--faint); }
.hint a { color: var(--accent); }

/* Address search dropdown: a plain positioned list under the input, not a
   native <datalist> (no styling control) or select (no free-text search). */
.address-search { position: relative; }
.address-suggestions {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 30;
  margin: -1px 0 0;
  padding: 0;
  list-style: none;
  background: var(--bg-raised);
  border: 1px solid var(--line-firm);
  max-height: 240px;
  overflow-y: auto;
}
.address-suggestions button {
  display: block;
  width: 100%;
  padding: 10px 13px;
  border: 0;
  border-top: 1px solid var(--line);
  background: none;
  color: var(--text);
  font: 400 14px/1.4 var(--sans);
  text-align: left;
  cursor: pointer;
}
.address-suggestions li:first-child button { border-top: 0; }
.address-suggestions button:hover,
.address-suggestions button.is-active { background: rgba(var(--accent-rgb), .1); }

/* Consent checkbox: plain sentence case, not the uppercase mono every other
   .form label uses — it's a sentence with links in it, not a field name. */
.consent {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 10px;
}
.consent input[type="checkbox"] {
  width: 18px;
  height: 18px;
  min-width: 18px;
  margin-top: 2px;
  accent-color: var(--accent);
  cursor: pointer;
}
.consent label {
  font-family: var(--sans);
  font-size: 14.5px;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  color: var(--muted);
  line-height: 1.5;
}
.consent label a { color: var(--accent); }
.submit-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  margin-top: 6px;
}

.form-status {
  padding: 14px 16px;
  border: 1px solid rgba(var(--accent-rgb), .45);
  border-radius: 0;
  font-size: 15.5px;
}
.form-status.is-ok { background: rgba(var(--accent-rgb), .09); }
.form-status.is-bad { background: var(--bg-raised); }
.linkish {
  font: inherit;
  color: var(--accent);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
}

/* ------------------------------------------------------------ footer --- */
footer { padding-block: 48px 56px; border-top: 1px solid var(--line); }
.footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 20px;
  margin-bottom: 22px;
}
.footer-line { color: var(--muted); font-size: 15px; }
.footer-line a { color: var(--accent); }
.footer-payments {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 16px;
}
.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-bottom: 22px;
}
.footer-links a {
  font-size: 13px;
  color: var(--muted);
  text-decoration: underline;
  text-decoration-color: var(--line-firm);
  text-underline-offset: 3px;
}
.footer-links a:hover { color: var(--text); text-decoration-color: var(--accent); }
.fine { font-size: 12.5px; line-height: 1.6; color: var(--faint); max-width: 76ch; }
.fine + .fine { margin-top: 14px; }

/* -------------------------------------------------------------- small --- */
@media (max-width: 860px) {
  .spec-row { grid-template-columns: 1fr; gap: 18px; padding-block: 28px; }
  .split { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .nav-inner { gap: 16px; padding: 12px 20px; flex-wrap: wrap; }
  /* Tabs move to their own swipeable row rather than wrapping into a staircase. */
  .nav-links {
    order: 3;
    width: 100%;
    gap: 20px;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .nav-links::-webkit-scrollbar { display: none; }
  .nav-links a { white-space: nowrap; }
  .btn-sm { margin-left: auto; }
  html { scroll-padding-top: 116px; }
}

@media (max-width: 640px) {
  body { font-size: 16px; }
  .wrap { padding-inline: 20px; }
  .facts { margin-top: 48px; gap: 20px; }
}

/* -------------------------------------------------------------- lockup --- */
.lockup {
  display: inline-block;
  text-decoration: none;
  margin-bottom: 34px;
}
.lockup-word {
  display: inline-flex;
  align-items: center;
  font-size: clamp(28px, 4.4vw, 38px);
  font-weight: 400;
  line-height: 1;
}
.lockup-word .wordmark-botics {
  border-width: 2px;
  border-radius: 7px;
  padding: 4px 11px 6px;
  margin-left: 7px;
}
.lockup-tag {
  display: block;
  margin-top: 12px;
  font-family: var(--mono);
  font-size: clamp(10px, 1.5vw, 12.5px);
  letter-spacing: .34em;
  color: var(--muted);
  /* Stretches to the exact width of the wordmark above it, so both lines
     start and end on the same edges instead of the tagline just trailing
     off short. */
  text-align: justify;
  text-align-last: justify;
}

.footer-lockup {
  display: inline-block;
  font-size: 19px;
  font-weight: 400;
}
.footer-lockup .lockup-tag { margin-top: 9px; font-size: 11px; }

/* --------------------------------------------------------------- hero --- */
/* Text left, robot right. If the photo file is missing its figure hides and
   :has() drops the row back to one column, so the copy still fills the width. */
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(32px, 5vw, 60px);
  align-items: center;
}
.hero-grid:has(figure[hidden]) { grid-template-columns: 1fr; }
.hero-text .lede { margin-bottom: 32px; }
.hero-shot { margin: 0; }
.hero-shot img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: 0;
}
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; gap: 36px; }
}

/* --------------------------------------------------------------- media --- */
/* Why us: two short paragraphs, no checklist. It sat next to Pricing's
   checklist before and read like the same block twice. */
.why-text { display: flex; flex-direction: column; gap: 20px; max-width: 58ch; }
.why-text p { color: var(--muted); }

.about-lede { color: var(--muted); max-width: 62ch; margin-bottom: 40px; }

/* One block per team: its number, then its two CAD renders. */
.team-block + .team-block { margin-top: 48px; }

/* Big mono team numbers — read as serials, not as body copy. */
.team-numbers {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(32px, 5vw, 56px);
  margin: 0 0 24px;
  padding-top: 32px;
  border-top: 1px solid var(--line);
}
/* A team with no photos under its number shouldn't leave that gap trailing. */
.team-numbers-last { margin-bottom: 0; }
.team-numbers dt {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 8px;
}
.team-numbers dd {
  margin: 0;
  font-family: var(--mono);
  font-size: clamp(34px, 4.6vw, 50px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--text);
}

.team-photos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 24px;
}
.team-photos:has(figure[hidden]) { grid-template-columns: 1fr; }

.media-cad { margin: 0; }
/* Framed at the render's own ratio so its grey ground fills the box edge to
   edge and nothing is cropped. Most CAD renders here are portrait; .media-wide
   overrides that for the ones shot landscape (offseason drivetrain, Viper). */
.media-cad img {
  display: block;
  width: 100%;
  aspect-ratio: 746 / 1120;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.media-wide img { aspect-ratio: 4 / 3; }
/* Side by side, a landscape render next to a portrait one left a tall empty
   gap under it. Give it the portrait's box and letterbox it on the renders'
   own #333 ground so the two panels read as a matched pair. */
@media (min-width: 700px) {
  .media-wide img {
    aspect-ratio: 746 / 1120;
    object-fit: contain;
    background: #333;
  }
}

/* A wide shot breaking the run of text between the spec sheet and pricing,
   cropped down to the field so the spectator seating above it stays out of
   frame. Narrow screens get a taller box so the strip doesn't go to a sliver. */
.band-shot {
  margin: 0 auto;
  padding-block: clamp(8px, 2vw, 24px);
}
.band-shot img {
  display: block;
  width: 100%;
  aspect-ratio: 13 / 5;
  object-fit: cover;
  object-position: 50% 86%;
  border: 1px solid var(--line);
  border-radius: 0;
}
@media (max-width: 700px) {
  .band-shot img { aspect-ratio: 8 / 5; }
}

/* The CAD caption carries a link to the release, on its own line so it reads
   as an invitation rather than part of the label. */
.cad-link {
  display: block;
  margin-top: 6px;
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid rgba(var(--accent-rgb), .35);
  padding-bottom: 1px;
  width: fit-content;
}
.cad-link:hover { border-bottom-color: var(--accent); }

.media-cad figcaption,
.band-shot figcaption {
  margin-top: 12px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--faint);
}


/* -------------------------------------------------------------- legal --- */
/* Shared by privacy.html and terms.html: plain long-form text, not the
   homepage's data-sheet components. */
.legal { padding-block: clamp(56px, 8vw, 88px); }
.legal-doc { max-width: 720px; }
.back-link {
  display: inline-block;
  margin-bottom: 40px;
  color: var(--muted);
  font-size: 14px;
}
.back-link:hover { color: var(--text); }
.legal-doc h1 {
  font-size: clamp(32px, 4.4vw, 44px);
  font-weight: 700;
  letter-spacing: -0.03em;
  margin-bottom: 10px;
}
.legal-doc .updated {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 20px;
}
.legal-doc .lede { color: var(--muted); margin-bottom: 44px; }
.legal-doc h2 {
  font-size: 21px;
  margin: 0 0 16px;
  padding-top: 32px;
  border-top: 1px solid var(--line);
}
.legal-doc section:first-of-type h2 { padding-top: 0; border-top: 0; }
.legal-doc section + section { margin-top: 32px; }
.legal-doc p { color: var(--muted); }
.legal-doc p + p { margin-top: 14px; }
.legal-doc ul, .legal-doc ol { margin: 14px 0 0; padding-left: 22px; color: var(--muted); }
.legal-doc li + li { margin-top: 8px; }
.legal-doc ul + p, .legal-doc ol + p { margin-top: 14px; }
.legal-doc a { color: var(--accent); }
.legal-doc strong { color: var(--text); font-weight: 600; }

/* ---------------------------------------------------------- calculator --- */
/* The quick-quote form. It's a plain .form (reuses that grid/input styling);
   everything here is layout for the extra pieces .form doesn't have:
   grouped fields, checkbox/radio rows, and the result panel. */
.calc-group { grid-column: 1 / -1; display: grid; gap: 22px; }
.calc-group[hidden] { display: none; }
.calc-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 22px;
}

.calc-flags {
  grid-column: 1 / -1;
  border: 1px solid var(--line);
  border-radius: 0;
  padding: 18px 20px;
  display: grid;
  gap: 12px;
}
.calc-flags legend {
  padding: 0 6px;
  margin-left: -6px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--faint);
}
.calc-flags label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-family: var(--sans);
  font-size: 15px;
  color: var(--muted);
  text-transform: none;
  letter-spacing: normal;
}
.calc-flags label[hidden] { display: none; }
.calc-flags input[type="checkbox"],
.calc-flags input[type="radio"] {
  width: 17px;
  height: 17px;
  min-width: 17px;
  margin: 2px 0 0;
  accent-color: var(--accent);
  cursor: pointer;
}

#c-calc { grid-column: 1 / -1; justify-self: start; }

/* Result panel: hidden until Calculate runs, then swaps color by outcome. */
.calc-result {
  border: 1px solid var(--line-firm);
  padding: 24px 26px;
  background: var(--bg-raised);
}
.calc-result.is-escalate { border-color: rgba(var(--accent-rgb), .5); }
.calc-result.is-bad { border-color: var(--line-firm); }

.calc-headline {
  font-family: var(--mono);
  font-size: clamp(26px, 4vw, 34px);
  font-weight: 500;
  color: var(--text);
  margin: 0 0 4px;
}
.calc-result.is-escalate .calc-headline,
.calc-result.is-bad .calc-headline { font-size: 17px; font-family: var(--sans); font-weight: 400; color: var(--muted); }
.calc-sub { color: var(--faint); font-size: 14px; margin-bottom: 18px; }

.calc-breakdown { margin: 0 0 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.calc-breakdown div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding-block: 5px;
  font-size: 15px;
}
.calc-breakdown dt { color: var(--muted); }
.calc-breakdown dd { margin: 0; font-family: var(--mono); color: var(--text); }

.calc-batch {
  font-size: 14.5px;
  color: var(--text);
  padding: 12px 14px;
  background: rgba(var(--accent-rgb), .08);
  border-left: 2px solid var(--accent);
  margin-bottom: 14px;
}
.calc-fineprint { font-size: 13px; color: var(--faint); }
.calc-fineprint a { color: var(--accent); }

.calc-reasons { margin: 0 0 16px; padding-left: 20px; color: var(--muted); font-size: 15px; }
.calc-reasons li + li { margin-top: 6px; }
.calc-estimate { color: var(--muted); font-size: 14.5px; margin-bottom: 18px; }

/* What the uploaded file measured — the quote is built on these numbers, so
   it reads as a result, not a footnote. */
.measured {
  grid-column: 1 / -1;
  padding: 12px 14px;
  background: rgba(var(--accent-rgb), .07);
  border-left: 2px solid var(--accent);
}
.measured b { color: var(--text); font-weight: 500; font-family: var(--mono); }

.preview-label { display: block; margin-bottom: 8px; }
#q-preview {
  display: block;
  width: 100%;
  max-width: 480px;
  height: auto;
  aspect-ratio: 5 / 3;
  background: var(--bg);
  border: 1px solid var(--line);
}