/* ---------------------------------------------------------------
   RobinQuote: paper-white surfaces on a pale egg-blue ground,
   Archivo type, teal buttons and slate ink. The robin's breast
   orange is the one accent: the logo and the dimension lines.
   On drawings, feature kinds keep their categorical colours.
   --------------------------------------------------------------- */
:root {
  /* palette: Robin (ink, teal, egg blue, breast orange) */
  --paper: #ffffff;
  --bench: #e4f3f1;          /* pale egg: the ground sections sit on */
  --bench-2: #d3eae6;
  --stage: #d2e3e0;          /* the tint a drawing lies on */
  --ink: #1b2a2f;
  --brand-ink: #1b2a2f;      /* wordmark, dark bands */
  --pencil: #22333a;
  --quiet: #55656b;
  --faint: #55656b;
  --rule: #b3c7c4;
  --hair: #d3e2e0;
  --field-border: #a9bdba;
  --redline: #b3261e;        /* form errors only */

  --action: #0b6b68;         /* teal: buttons and links that act */
  --action-hover: #1b2a2f;
  --accent: #e4572e;         /* breast orange: logo and dimension lines only */
  --accent-text: #b8411a;    /* orange that is text */
  --egg: #8fd1cb;

  --hl: #0b6b68;             /* active / selected fill, white text on it */
  --hl-tint: #e4f3f1;        /* selected rows and marks */
  --ok: #0b6b68;
  --ok-tint: #d6efeb;
  --warn: #9a5b00;
  --warn-tint: #fff1d6;

  /* categorical: feature kinds on a drawing */
  --feat-hole: #2563eb;
  --feat-cut: #059669;
  --feat-edge: #d97706;
  --feat-spec: #7c3aed;

  /* older names, kept so every rule follows the theme */
  --steel: var(--bench);
  --plate: var(--paper);
  --plate-2: var(--bench-2);
  --line: var(--hair);
  --bright: var(--ink);
  --soft: var(--pencil);
  --dim: var(--quiet);

  --shadow-1: 0 1px 2px rgba(20, 38, 42, 0.06);
  --shadow-2: 0 8px 24px -8px rgba(20, 38, 42, 0.22);
  --shadow-3: 0 24px 64px -16px rgba(20, 38, 42, 0.35);

  --font: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --wrap: 75rem;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --section: clamp(3rem, 6vw, 5rem);

  /* drafting paper: a faint 24px grid, the ground product views lie on */
  --grid:
    linear-gradient(rgba(27, 42, 47, 0.06) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(90deg, rgba(27, 42, 47, 0.06) 1px, transparent 1px) 0 0 / 24px 24px;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;   /* room for the bar that stays at the top */
}

body {
  margin: 0;
  background: var(--steel);
  color: var(--soft);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  font-size: 1.0625rem;
  font-stretch: 100%;
  line-height: 1.55;
}

h1,
h2,
h3 {
  margin: 0;
  color: var(--bright);
  line-height: 1.08;
  text-wrap: balance;
}

p { margin: 0; }

a {
  color: var(--bright);
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.18em;
}

a:hover { color: var(--quiet); }

:focus-visible {
  outline: 2px solid var(--hl);
  outline-offset: 2px;
}

::selection {
  background: #c5dcd8;
  color: var(--ink);
}

[hidden] { display: none !important; }

.wrap {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.sprite { position: absolute; }

/* ---------------------------------------------------------------
   Draft bar and skip link
   --------------------------------------------------------------- */
.draft-bar {
  padding: 0.45rem var(--gutter);
  border-bottom: 1px solid #f0d9a8;
  background: var(--warn-tint);
  color: var(--warn);
  font-size: 0.875rem;
  font-weight: 600;
}

.skip-link {
  position: absolute;
  top: -5rem;
  left: var(--gutter);
  z-index: 10;
  padding: 0.6rem 0.9rem;
  background: var(--hl);
  color: #fff;
}

.skip-link:focus {
  top: 0.5rem;
  color: #fff;
}

/* ---------------------------------------------------------------
   Top bar: stays in view so "Sign up" is always one tap away
   --------------------------------------------------------------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 5;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.9);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.topbar__inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding-block: 0.8rem;
}

.wordmark {
  color: var(--brand-ink);
  font-size: 1.125rem;
  font-stretch: 112%;
  font-weight: 800;
  text-decoration: none;
}

.wordmark:hover { color: var(--brand-ink); }

.topbar__nav {
  display: none;
  gap: 2px;
  margin-left: auto;
}

.topbar__nav a {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 12px;
  border-radius: 4px;
  color: var(--quiet);
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
}

.topbar__nav a:hover { color: var(--ink); background: var(--bench); }

.topbar .button { margin-left: auto; }

@media (min-width: 56rem) {
  .topbar__nav { display: flex; }
  .topbar .button { margin-left: 0; }
}

/* ---------------------------------------------------------------
   Buttons: ink with white text, as in the app
   --------------------------------------------------------------- */
.button {
  display: inline-block;
  padding: 0.9rem 1.6rem;
  border: 1px solid var(--action);
  border-radius: 4px;
  background: var(--action);
  color: #fff;
  font: inherit;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
}

.button:hover {
  border-color: var(--action-hover);
  background: var(--action-hover);
  color: #fff;
}

.button--small { padding: 0.5rem 1rem; }

.button--line {
  padding: 0.7rem 1.3rem;
  border-color: var(--rule);
  background: var(--paper);
  color: var(--ink);
}

.button--line:hover {
  border-color: var(--pencil);
  background: var(--paper);
  color: var(--ink);
}

.sheet .button {
  border-color: var(--action);
  background: var(--action);
  color: #fff;
}

.sheet .button:hover {
  border-color: var(--action-hover);
  background: var(--action-hover);
  color: #fff;
}

.button[disabled] {
  opacity: 0.65;
  cursor: progress;
}

.meeting-link { font-weight: 600; }

/* ---------------------------------------------------------------
   Hero: the first screen is the product at work
   --------------------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background: var(--bench);
}

.hero__inner {
  display: grid;
  gap: clamp(2.25rem, 5vw, 3.5rem);
  padding-block: clamp(2.5rem, 6vw, 5rem) clamp(3rem, 7vw, 5.5rem);
}

.hero h1 {
  font-size: clamp(2.375rem, 1.1rem + 5.4vw, 4.25rem);
  font-stretch: 100%;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
}

.hero__lede {
  max-width: 30ch;
  margin-top: 1.4rem;
  color: var(--soft);
  font-size: clamp(1.1875rem, 1rem + 0.7vw, 1.4375rem);
  line-height: 1.4;
}

.hero__for {
  max-width: 44ch;
  margin-top: 0.9rem;
  color: var(--soft);
  font-size: 1rem;
  line-height: 1.5;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  margin-top: 2rem;
}

@media (min-width: 40rem) {
  .hero h1 { font-stretch: 116%; }
}

@media (min-width: 64rem) {
  .hero__inner {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.2fr);
    align-items: center;
    min-height: min(46rem, calc(100vh - 6.5rem));
  }

  .hero h1 { font-size: clamp(2.625rem, 0.7rem + 3vw, 3.375rem); }
}

/* the stage: an angled product window with the RFQ email lying over it */
.stage { margin: 0; }

.stage__scene { position: relative; }

.stage figcaption {
  margin-top: 1.5rem;
  color: var(--dim);
  font-size: 0.8125rem;
}

.window {
  overflow: hidden;
  border: 1px solid var(--hair);
  border-radius: 6px;
  background: var(--paper);
  box-shadow: var(--shadow-3);
  color: var(--ink);
  font-size: 0.8125rem;
  line-height: 1.35;
}

.window :focus-visible,
.sheet :focus-visible { outline-color: var(--ink); }

.window__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.6rem 0.9rem;
  border-bottom: 1px solid var(--hair);
  background: var(--paper);
  font-weight: 600;
}

.window__file {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

.window__ready {
  flex: none;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  background: var(--ok-tint);
  color: var(--ok);
  font-size: 0.75rem;
  font-weight: 700;
}

.window__body {
  display: grid;
  grid-template-columns: 1fr;
}

.viewer {
  display: grid;
  place-items: center;
  padding: clamp(0.9rem, 2.4vw, 1.4rem);
  background: var(--stage);
}

.viewer .sheet {
  width: 100%;
  max-width: 20rem;
  box-shadow: var(--shadow-2);
}

.draft {
  display: flex;
  flex-direction: column;
  padding: 1rem 1.1rem 1.1rem;
  font-size: 0.875rem;
}

.draft__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.9rem;
}

.chip {
  display: inline-block;
  padding: 0.3rem 0.65rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
  color: var(--pencil);
  font-size: 0.75rem;
  font-weight: 600;
}

.window__similar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1rem;
  padding: 0.7rem 0.9rem;
  border-top: 1px solid var(--hair);
  background: #f4faf9;
}

.window__label {
  color: var(--quiet);
  font-size: 0.75rem;
  font-weight: 700;
}

.similar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.similar li {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.25rem 0.6rem 0.25rem 0.35rem;
  border: 1px solid var(--hair);
  border-radius: 4px;
  background: var(--paper);
  font-size: 0.75rem;
  font-weight: 600;
}

.thumb {
  flex: none;
  width: 2.4rem;
  height: 1.8rem;
}

.stage__email {
  position: relative;
  z-index: 2;
  width: min(17rem, 82%);
  margin: -1.25rem 0 0 1rem;
  transform: rotate(-2.5deg);
  box-shadow: var(--shadow-3);
}

@media (min-width: 40rem) {
  .window__body { grid-template-columns: 1.02fr 1fr; }
  .viewer { border-right: 1px solid var(--hair); }
}

@media (min-width: 64rem) {
  /* angled like a screen seen from the side, running a little off the right edge */
  .stage__tilt {
    width: 112%;
    transform: perspective(1700px) rotateY(-12deg) rotateX(3.5deg);
    transform-origin: 0 50%;
  }

  .stage__email {
    position: absolute;
    bottom: -2rem;
    left: -3.75rem;
    margin: 0;
    transform: rotate(-4deg);
  }

  .stage figcaption { margin-top: 3.5rem; }
}

/* ---------------------------------------------------------------
   Paper: sheets, the drawing, the quote. Also used by the handout.
   --------------------------------------------------------------- */
.sheet {
  background: var(--paper);
  box-shadow: var(--shadow-2);
  color: var(--ink);
}

.rfq__panel {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.rfq__panel .sheet { flex: 1; }

.rfq__stamp {
  margin-top: 0.7rem;
  color: var(--bright);
  font-size: 0.875rem;
  font-weight: 600;
}

/* the email */
.sheet--email {
  padding: 0.85rem 1rem 0.95rem;
  font-size: 0.8125rem;
  line-height: 1.45;
}

.email__head {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.1rem 0.7rem;
  margin: 0;
  padding-bottom: 0.55rem;
  border-bottom: 1px solid var(--rule);
  font-size: 0.75rem;
}

.email__head dt { color: var(--quiet); }

.email__head dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.email__body { margin-top: 0.6rem; }
.email__body p + p { margin-top: 0.45rem; }

.email__file {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.75rem;
  padding: 0.3rem 0.6rem;
  border: 1px solid var(--field-border);
  border-radius: 2px;
  font-size: 0.75rem;
  font-weight: 600;
}

/* the drawing */
.drawing {
  display: block;
  width: 100%;
  height: auto;
  font-family: var(--font);
}

.dw {
  fill: none;
  stroke: var(--ink);
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dw--frame { stroke-width: 1.1; }
.dw--part { stroke-width: 1.4; }
.dw--thin { stroke-width: 0.7; }
.dw--section { stroke-width: 2.6; }

.dw--bend {
  stroke-width: 0.8;
  stroke-dasharray: 9 3 2 3;
}

.dw-text {
  fill: var(--ink);
  font-size: 10px;
  font-stretch: 80%;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.dw-text--small { font-size: 8.5px; }
.dw-text--title { font-weight: 700; }

/* feature marks, drawn like the app's overlay boxes: a light fill in
   the feature kind's colour with an outline */
.hl {
  --k: var(--feat-spec);
  fill: color-mix(in srgb, var(--k) 16%, transparent);
  stroke: var(--k);
  stroke-width: 1.2;
}

.hl--line {
  --k: var(--feat-edge);
  fill: none;
  stroke: color-mix(in srgb, var(--k) 30%, transparent);
  stroke-linecap: round;
  stroke-width: 9;
}

.hl--hole { --k: var(--feat-hole); }
.hl--cut { --k: var(--feat-cut); }
.hl--edge { --k: var(--feat-edge); }
.hl--spec { --k: var(--feat-spec); }

/* the quote */
.sheet--quote {
  display: flex;
  flex-direction: column;
  padding: clamp(0.9rem, 2.4vw, 1.25rem);
  font-size: 0.9375rem;
  line-height: 1.35;
}

.quote__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  padding-bottom: 0.55rem;
  border-bottom: 1px solid var(--hair);
}

.quote__title {
  font-size: 1.125rem;
  font-stretch: 112%;
  font-weight: 800;
}

.quote__no {
  color: var(--pencil);
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
}

.quote__part {
  margin-top: 0.6rem;
  font-weight: 600;
}

.quote__lines {
  display: grid;
  gap: 0.45rem;
  margin: 0.7rem 0 1rem;
  padding: 0;
  list-style: none;
}

.quote__lines li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.1rem 0.75rem;
}

.quote__lines--plain li { font-weight: 600; }

/* the highlighter stroke sits behind the label */
.quote__op {
  position: relative;
  z-index: 0;
  margin-left: -0.3em;
  padding: 0.05em 0.3em;
  font-weight: 600;
}

.quote__op::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 2px;
  background: var(--hl-tint);
  box-shadow: inset 2px 0 0 var(--brand-ink);
  content: "";
  transform-origin: left center;
}

.quote__note {
  color: var(--pencil);
  font-size: 0.8125rem;
  text-align: right;
}

.quote__prices {
  width: 100%;
  margin-top: auto;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.quote__prices th,
.quote__prices td {
  padding: 0.4rem 0 0.4rem 0.6rem;
  border-top: 1px solid var(--hair);
  font-size: 0.875rem;
  text-align: right;
  white-space: nowrap;
}

.quote__prices th {
  padding-left: 0;
  font-weight: 600;
  text-align: left;
}

.quote__prices tr:last-child td { font-weight: 700; }

/* small versions, for the three shops' sheets */
.sheet--mini {
  padding: 0.8rem 0.9rem;
  font-size: 0.75rem;
}

.sheet--mini .quote__title { font-size: 0.9375rem; }
.sheet--mini .quote__no {
  font-size: 0.625rem;
  white-space: nowrap;
}
.sheet--mini .quote__lines { gap: 0.28rem; }

.sheet--mini .quote__prices th,
.sheet--mini .quote__prices td {
  padding: 0.28rem 0 0.28rem 0.35rem;
  font-size: 0.65rem;
}

.sheet--mini .quote__prices th { padding-left: 0; }

.sheet--alt .quote__head,
.sheet--band .quote__head {
  margin: -0.8rem -0.9rem 0;
  padding: 0.6rem 0.9rem;
  border-bottom: 0;
}

.sheet--alt .quote__head {
  background: var(--brand-ink);
  color: #fff;
}

.sheet--alt .quote__no { color: #fff; }

.sheet--band .quote__head {
  border-left: 5px solid var(--ink);
  background: var(--bench);
}

.sheet--alt .quote__part,
.sheet--band .quote__part { margin-top: 0.75rem; }

/* ---------------------------------------------------------------
   The looping sequence on the first screen.
   Without the script, or with reduced motion, everything simply
   shows in its finished state.
   --------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .stage.is-armed .hl,
  .stage.is-armed .hl--line,
  .stage.is-armed .quote__op::before,
  .stage.is-armed .quote__note,
  .stage.is-armed .quote__prices,
  .stage.is-armed .window__ready { opacity: 0; }

  .stage.is-run .hl--bar {
    transform-box: fill-box;
    transform-origin: left center;
    animation: sweep 0.45s cubic-bezier(0.3, 0.7, 0.3, 1) both;
    animation-delay: calc(var(--i) * 0.5s + 0.4s);
  }

  .stage.is-run .hl--dot {
    transform-box: fill-box;
    transform-origin: center;
    animation: pop 0.4s cubic-bezier(0.3, 0.7, 0.3, 1) both;
    animation-delay: calc(var(--i) * 0.5s + 0.4s);
  }

  .stage.is-run .hl--line {
    stroke-dasharray: 1 1;
    animation: draw 0.45s ease-out both;
    animation-delay: calc(var(--i) * 0.5s + 0.4s);
  }

  .stage.is-run .quote__op::before {
    animation: sweep 0.45s ease-out both;
    animation-delay: calc(var(--i) * 0.5s + 0.65s);
  }

  .stage.is-run .quote__note,
  .stage.is-run .quote__prices,
  .stage.is-run .window__ready {
    animation: appear 0.4s ease-out both;
    animation-delay: calc(var(--i) * 0.5s + 0.8s);
  }

  /* fade everything out together before the next pass */
  .stage.is-out .hl,
  .stage.is-out .hl--line,
  .stage.is-out .quote__op::before,
  .stage.is-out .quote__note,
  .stage.is-out .quote__prices,
  .stage.is-out .window__ready {
    animation: vanish 0.5s ease both;
    animation-delay: 0s;
  }
}

@keyframes sweep {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@keyframes pop {
  from { transform: scale(0); }
  to { transform: scale(1); }
}

@keyframes draw {
  from { stroke-dashoffset: 1; }
  to { stroke-dashoffset: 0; }
}

@keyframes appear {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes vanish {
  from { opacity: 1; }
  to { opacity: 0; }
}

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

/* ---------------------------------------------------------------
   Facts
   --------------------------------------------------------------- */
.facts { border-bottom: 1px solid var(--line); }

.strip {
  display: grid;
  grid-template-columns: 1fr;
  margin: 0;
}

.strip__cell {
  padding-block: 2rem 2.25rem;
  border-top: 1px solid var(--line);
}

.strip__cell:first-child { border-top: 0; }

.strip dt {
  color: var(--bright);
  font-size: clamp(1.875rem, 1.2rem + 1.9vw, 2.625rem);
  font-stretch: 105%;
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.05;
}

/* each figure is dimensioned like a feature on a drawing: extension
   lines at both ends, arrowheads, and the figure as the dimension text */
.strip dt { width: fit-content; }

.strip dt::before {
  display: block;
  height: 13px;
  margin-bottom: 0.9rem;
  border-inline: 1px solid var(--accent);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 6'%3E%3Cpath d='M8 0 0 3 8 6z' fill='%23e4572e'/%3E%3C/svg%3E") left 1px center / 8px 6px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 6'%3E%3Cpath d='M0 0 8 3 0 6z' fill='%23e4572e'/%3E%3C/svg%3E") right 1px center / 8px 6px no-repeat,
    linear-gradient(var(--accent), var(--accent)) center / 100% 1px no-repeat;
  content: "";
}

.strip dd {
  max-width: 34ch;
  margin: 0.65rem 0 0;
  font-size: 1rem;
}

@media (min-width: 48rem) {
  .strip { grid-template-columns: repeat(3, 1fr); }

  .strip__cell {
    padding: 2.5rem 2rem 2.75rem;
    border-top: 0;
    border-left: 1px solid var(--line);
  }

  .strip__cell:first-child {
    padding-left: 0;
    border-left: 0;
  }
}

/* ---------------------------------------------------------------
   What it does: three blocks, each with a half-screen product panel
   --------------------------------------------------------------- */
.benefits__inner {
  display: grid;
  gap: var(--section);
  padding-block: var(--section);
}

.benefit {
  display: grid;
  align-items: center;
  gap: 2rem clamp(2rem, 5vw, 4.5rem);
}

.benefit h3 {
  font-size: clamp(2rem, 1.3rem + 2.2vw, 2.875rem);
  font-stretch: 108%;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.03;
}

.benefit__text p {
  max-width: 36ch;
  margin-top: 1.1rem;
  font-size: 1.1875rem;
}

.benefit__text .benefit__action { margin-top: 1.75rem; }

@media (min-width: 60rem) {
  .benefit { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .benefit--flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .benefit--flip .benefit__text { order: 2; }
}

/* the panel: textured metal with a frame line, holding white cards */
.panel {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);   /* contents may not widen the panel */
  align-content: center;
  justify-items: center;
  gap: 1.25rem;
  min-height: clamp(22rem, 42vw, 34rem);
  margin: 0;
  padding: clamp(2rem, 5vw, 4rem) clamp(1.25rem, 4vw, 3.5rem);
  overflow: hidden;
  border: 1px solid var(--hair);
  border-radius: 6px;
  background: var(--stage);
  isolation: isolate;
}


/* the sheet's border line, as on a drawing */
.panel::after {
  position: absolute;
  inset: 0.9rem;
  border: 1px solid rgba(27, 42, 47, 0.2);
  content: "";
  pointer-events: none;
}

.panel figcaption {
  color: var(--quiet);
  font-size: 0.8125rem;
  text-align: center;
}

.panel figcaption a { color: var(--ink); }

.card {
  width: min(100%, 31rem);
  border: 1px solid var(--hair);
  border-radius: 6px;
  background: var(--paper);
  box-shadow: var(--shadow-2);
  color: var(--ink);
}

.card__title {
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--hair);
  font-size: 1.0625rem;
  font-stretch: 112%;
  font-weight: 800;
}

.card--list { padding: 1.1rem 1.25rem 0.5rem; }

.rows {
  margin: 0;
  padding: 0;
  list-style: none;
  font-variant-numeric: tabular-nums;
}

.rows li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem 0;
  border-top: 1px solid var(--hair);
  font-size: 0.9375rem;
}

.rows li:first-child { border-top: 0; }

.rows .thumb {
  width: 3rem;
  height: 2.25rem;
}

.rows__file {
  font-weight: 600;
  overflow-wrap: break-word;
}

.rows__ready {
  padding: 0.15em 0.6em;
  border-radius: 999px;
  background: var(--ok-tint);
  color: var(--ok);
  font-size: 0.8125rem;
  font-weight: 700;
  white-space: nowrap;
}

.rows__time {
  min-width: 2.6rem;
  font-weight: 700;
  text-align: right;
  white-space: nowrap;
}

.toast {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.5rem 0.95rem;
  border-radius: 4px;
  background: var(--brand-ink);
  box-shadow: var(--shadow-2);
  color: #fff;
  font-size: 0.875rem;
  font-weight: 600;
}

.toast::before {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: #2ba59c;
  content: "";
}

/* on a phone each row takes two lines: the file and its time, then its status */
@media (max-width: 29.99rem) {
  .rows li {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "thumb file time"
      "thumb ready ready";
    row-gap: 0.3rem;
  }

  .rows .thumb { grid-area: thumb; }
  .rows__file { grid-area: file; }
  .rows__time { grid-area: time; }

  .rows__ready {
    grid-area: ready;
    justify-self: start;
  }

  .sheet--mini .quote__prices th,
  .sheet--mini .quote__prices td {
    padding-left: 0.2rem;
    font-size: 0.6rem;
  }
}

/* the chart */
.card--chart {
  width: min(100%, 34rem);
  padding: 1.4rem 1.6rem 1.8rem;
}

.winrate {
  display: grid;
  gap: 1.4rem;
  margin-top: 1.4rem;
}

/* label and figure on one line, the bar full width beneath, drawn to scale */
.winrate__row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 0.45rem 1rem;
  font-size: 1rem;
  font-weight: 600;
}

.winrate__label { align-self: end; }

.winrate__value {
  font-size: clamp(2rem, 1.4rem + 1.8vw, 2.75rem);
  font-stretch: 105%;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  line-height: 0.95;
}

.winrate__track {
  display: block;
  grid-column: 1 / -1;
  grid-row: 2;
  height: 1.5rem;
  border-left: 1px solid var(--rule);
  background: var(--bench);
  border-radius: 0 3px 3px 0;
  overflow: hidden;
}

.winrate__bar {
  display: block;
  width: calc(var(--v) * 1%);
  height: 100%;
  background: var(--brand-ink);
}

.winrate__bar--slow { background: var(--rule); }

/* three shops' sheets, fanned out */
.fan {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding-block: 1rem;
}

.fan__item {
  flex: 0 0 auto;
  width: clamp(9.25rem, 31%, 12.5rem);
}

.fan__item + .fan__item { margin-left: -1.5rem; }
.fan__item:nth-child(1) { transform: rotate(-8deg) translateY(5%); }
.fan__item:nth-child(3) { transform: rotate(8deg) translateY(5%); }

.fan__item:nth-child(2) {
  position: relative;
  z-index: 1;
  transform: scale(1.08);
}

/* ---------------------------------------------------------------
   How it starts
   --------------------------------------------------------------- */
.steps { border-top: 1px solid var(--line); }
.steps .wrap { padding-block: var(--section); }

.steps h2 {
  font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem);
  font-stretch: 112%;
  font-weight: 800;
  letter-spacing: -0.015em;
}

.steps__list {
  position: relative;
  display: grid;
  gap: 1.75rem;
  margin: 2.25rem 0 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.steps__list li {
  position: relative;
  padding-left: 4.25rem;
  min-height: 3rem;
  color: var(--bright);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.3;
  counter-increment: step;
}

.steps__list li::before {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border: 1.5px solid var(--brand-ink);
  border-radius: 50%;
  background: var(--paper);
  color: var(--brand-ink);
  font-size: 1.375rem;
  font-weight: 800;
  line-height: 1;
  content: counter(step);
}

@media (min-width: 48rem) {
  .steps__list {
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem;
  }

  .steps__list li {
    padding: 4.25rem 0 0;
    max-width: 22ch;
  }

  /* a dimension line joins the three steps */
  .steps__list::before {
    position: absolute;
    top: 1.5rem;
    right: 0;
    left: 0;
    height: 1px;
    background: var(--rule);
    content: "";
  }

  .steps__list::after {
    position: absolute;
    top: calc(1.5rem - 4px);
    right: 0;
    border-block: 4.5px solid transparent;
    border-left: 9px solid var(--quiet);
    content: "";
  }
}

/* ---------------------------------------------------------------
   Sign up: the form is a sheet on a raised plate
   --------------------------------------------------------------- */
.signup { border-top: 1px solid var(--line); }
.signup .wrap { padding-block: var(--section); }

.signup__panel {
  display: grid;
  gap: 2rem clamp(2rem, 5vw, 4rem);
  padding: clamp(1.5rem, 4.5vw, 3.5rem);
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper);
  box-shadow: var(--shadow-1);
}

.signup__panel h2 {
  font-size: clamp(2.25rem, 1.4rem + 3vw, 3.75rem);
  font-stretch: 112%;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.02;
}

.signup__intro p {
  max-width: 26ch;
  margin-top: 1.1rem;
  font-size: 1.1875rem;
}

.signup__intro .signup__note {
  max-width: 34ch;
  color: var(--soft);
  font-size: 1rem;
  line-height: 1.5;
}

.sheet--form {
  padding: clamp(1.25rem, 3.5vw, 2rem);
  border: 1px solid var(--hair);
  border-radius: 6px;
  background: #f7fbfa;
  box-shadow: none;
}

.form {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.1rem 1.25rem;
}

.field label {
  display: block;
  margin-bottom: 0.35rem;
  color: var(--ink);
  font-weight: 600;
}

.field__optional {
  color: var(--pencil);
  font-weight: 400;
}

.field input {
  width: 100%;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--field-border);
  border-radius: 4px;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
}

.field input:focus-visible {
  outline-offset: 0;
  border-color: var(--ink);
}

.field__hint {
  margin-top: 0.35rem;
  color: var(--pencil);
  font-size: 0.875rem;
}

.field__error {
  margin-top: 0.35rem;
  color: var(--redline);
  font-size: 0.9375rem;
  font-weight: 600;
}

.field--invalid input {
  border-color: var(--redline);
  box-shadow: inset 3px 0 0 var(--redline);
}

.field--trap {
  position: absolute;
  left: -200vw;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem 1.5rem;
  margin-top: 0.4rem;
}

.form__privacy {
  max-width: 34ch;
  color: var(--pencil);
  font-size: 0.875rem;
}

.form__status,
.form__done {
  padding: 0.2rem 0 0.2rem 0.9rem;
  border-left: 4px solid var(--ink);
  color: var(--ink);
  font-weight: 600;
}

.form__status a,
.form__done a { color: var(--ink); }

.form__status--error {
  border-color: var(--redline);
  color: var(--redline);
}

.form__status--error a { color: var(--redline); }

.form__done {
  font-size: 1.25rem;
  line-height: 1.35;
}

@media (min-width: 36rem) {
  .form { grid-template-columns: 1fr 1fr; }
  .field--wide { grid-column: 1 / -1; }
}

@media (min-width: 60rem) {
  .signup__panel {
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
    align-items: start;
  }
}

/* ---------------------------------------------------------------
   Footer, laid out like a drawing's title block
   --------------------------------------------------------------- */
.site-footer {
  padding-block: 2.5rem 3rem;
  border-top: 1px solid var(--line);
}

.titleblock {
  display: grid;
  grid-template-columns: 1fr;
  margin: 0;
  border: 1px solid var(--rule);
  background: var(--paper);
}

.titleblock__cell {
  min-width: 0;
  padding: 0.7rem 0.9rem 0.8rem;
  border-top: 1px solid var(--hair);
}

.titleblock__cell:first-child { border-top: 0; }

.titleblock dt {
  margin-bottom: 0.15rem;
  color: var(--dim);
  font-size: 0.75rem;
}

.titleblock dd {
  margin: 0;
  color: var(--bright);
  font-weight: 600;
  overflow-wrap: anywhere;
}

.titleblock a { color: inherit; }
.titleblock a:hover { color: var(--quiet); }

.fineprint {
  margin-top: 0.9rem;
  color: var(--dim);
  font-size: 0.8125rem;
}

@media (min-width: 36rem) and (max-width: 59.99rem) {
  .titleblock { grid-template-columns: 1fr 1fr; }
  .titleblock__cell:nth-child(2) { border-top: 0; }
  .titleblock__cell:nth-child(even) { border-left: 1px solid var(--hair); }
}

@media (min-width: 60rem) {
  .titleblock { grid-template-columns: 1.1fr 1.5fr 1fr 1.3fr; }

  .titleblock__cell {
    border-top: 0;
    border-left: 1px solid var(--hair);
  }

  .titleblock__cell:first-child { border-left: 0; }
}

/* ===============================================================
   Added for the multi-page site: logo, nav state, inner pages,
   FAQ, shop cards, tables and the footer link list
   =============================================================== */

/* logo: the dimension-callout mark beside the wordmark */
.wordmark { display: inline-flex; align-items: center; gap: 0.55rem; }
.wordmark__mark { flex: none; display: block; }

.topbar__nav a[aria-current] { background: var(--hl); color: #fff; }
@media (min-width: 48rem) and (max-width: 63.99rem) {
  .topbar__nav a { padding: 0 9px; font-size: 0.875rem; }
}

.hero__audience {
  max-width: 34ch;
  margin-bottom: 1rem;
  color: var(--quiet);
  font-size: 1rem;
  font-weight: 600;
}

.section__lede { max-width: 52ch; margin-top: 0.75rem; color: var(--soft); }

/* who it's for */
.shops { border-top: 1px solid var(--line); }
.shops .wrap { padding-block: var(--section); }
.shops h2, .faq-section h2 {
  font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem);
  font-stretch: 112%;
  font-weight: 800;
  letter-spacing: -0.015em;
}
.shop-cards {
  display: grid;
  margin: 2.25rem 0 0;
  padding: 0;
  border-top: 1px solid var(--brand-ink);
  list-style: none;
}
.shop-card { padding: 1.4rem 0 1.6rem; border-top: 1px solid var(--line); }
.shop-card:first-child { border-top: 0; }
.shop-card h3 { font-size: 1.25rem; font-stretch: 105%; font-weight: 800; }
.shop-card h3 a { text-decoration-color: var(--rule); text-decoration-thickness: 1.5px; }
.shop-card h3 a:hover { color: var(--ink); text-decoration-color: var(--ink); }
.shop-card p { max-width: 34ch; margin-top: 0.6rem; color: var(--soft); }
.shops__local { margin-top: 1.5rem; color: var(--soft); }
@media (min-width: 48rem) {
  .shop-cards { grid-template-columns: repeat(3, 1fr); }
  .shop-card { padding: 1.5rem 2rem 0.5rem; border-top: 0; border-left: 1px solid var(--line); }
  .shop-card:first-child { padding-left: 0; border-left: 0; }
}

/* FAQ */
.faq-section { border-top: 1px solid var(--line); }
.faq-section .wrap { padding-block: var(--section); }
.faq { display: grid; gap: 0.75rem; margin-top: 2rem; max-width: 52rem; }
.faq__item { border: 1px solid var(--line); border-radius: 6px; background: var(--plate); }
.faq__item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1rem 1.25rem; cursor: pointer; list-style: none;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: "+"; color: var(--quiet); font-size: 1.5rem; font-weight: 700; line-height: 1; }
.faq__item[open] summary::after { content: "−"; }
.faq__q { color: var(--bright); font-size: 1.0625rem; font-weight: 700; line-height: 1.35; }
.faq__a { padding: 0 1.25rem 1.25rem; color: var(--soft); max-width: 68ch; }
.faq__item--open { padding: 1.25rem; }
.faq__item--open .faq__a { padding: 0.5rem 0 0; }
.faq__more { margin-top: 1.5rem; font-weight: 600; }
.faq__group + .faq__group { margin-top: 2.5rem; }
.faq__group h2 { margin-bottom: 1rem; font-size: 1.375rem; font-weight: 800; }
.faq__group .faq__item + .faq__item { margin-top: 0.75rem; }

/* inner pages */
.crumbs { padding-top: 1rem; font-size: 0.875rem; }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; list-style: none; color: var(--dim); }
.crumbs li + li::before { content: "/"; margin-right: 0.5rem; color: var(--dim); }
.crumbs a { color: var(--soft); }

.page-hero { border-bottom: 1px solid var(--line); }
.page-hero__inner { padding-block: clamp(2rem, 5vw, 4rem); max-width: 60rem; }
.page-hero h1 {
  font-size: clamp(2.125rem, 1.2rem + 3.6vw, 3.5rem);
  font-stretch: 112%;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.05;
}
.page-hero--short .page-hero__inner { padding-block: clamp(1.75rem, 4vw, 3rem); }
.answer {
  max-width: 62ch;
  margin-top: 1.25rem;
  color: var(--bright);
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  line-height: 1.55;
}

.article { padding-block: clamp(2rem, 5vw, 3.5rem) var(--section); max-width: calc(52rem + 2 * var(--gutter)); }
.article section + section { margin-top: clamp(2rem, 4vw, 3rem); }
.article h2 { margin-bottom: 0.9rem; font-size: clamp(1.375rem, 1.1rem + 1vw, 1.75rem); font-weight: 800; line-height: 1.2; }
.article p, .article li { max-width: 68ch; }
.article p + p, .article p + ul, .article ul + p, .article p + ol { margin-top: 0.9rem; }
.article ul, .article ol { padding-left: 1.25rem; }
.article li + li { margin-top: 0.5rem; }
.article strong { color: var(--bright); }
.article__more { margin-top: clamp(2rem, 4vw, 3rem); padding-top: 1.5rem; border-top: 1px solid var(--line); }
.numbered { counter-reset: n; list-style: none; padding-left: 0 !important; }
.numbered li { position: relative; padding-left: 2.5rem; counter-increment: n; }
.numbered li::before {
  position: absolute; left: 0; top: 0.05rem;
  display: grid; place-items: center; width: 1.75rem; height: 1.75rem;
  border: 1.5px solid var(--brand-ink); border-radius: 50%;
  background: var(--paper); color: var(--brand-ink); font-size: 0.875rem; font-weight: 800;
  content: counter(n);
}
.areas { columns: 2; column-gap: 2rem; }

.table-box { margin-top: 1.25rem; overflow-x: auto; border: 1px solid var(--line); border-radius: 6px; background: var(--paper); color: var(--ink); }
.data-table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.data-table caption { padding: 0.75rem 1rem; text-align: left; color: var(--quiet); font-size: 0.8125rem; caption-side: top; }
.data-table th, .data-table td { padding: 0.6rem 1rem; border-top: 1px solid var(--hair); text-align: left; vertical-align: top; }
.data-table thead th { color: var(--quiet); font-size: 0.8125rem; font-weight: 600; }
.data-table tbody th { color: var(--ink); font-weight: 700; }
.data-table td:last-child, .data-table th:last-child { text-align: right; white-space: nowrap; }
.data-table--narrow { min-width: 0; }
.table-box + p { margin-top: 1rem; }

.facts-list { display: grid; gap: 0; margin: 0; border: 1px solid var(--line); border-radius: 6px; background: var(--paper); }
.facts-list > div { display: grid; gap: 0.25rem; padding: 0.9rem 1.25rem; border-top: 1px solid var(--line); }
.facts-list > div:first-child { border-top: 0; }
.facts-list dt { color: var(--quiet); font-size: 0.9375rem; font-weight: 600; }
.facts-list dd { margin: 0; color: var(--bright); }
@media (min-width: 40rem) { .facts-list > div { grid-template-columns: 11rem 1fr; gap: 1.5rem; } }

/* footer link list */
.footer-nav ul { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin: 0 0 1.5rem; padding: 0; list-style: none; }
.footer-nav a { color: var(--soft); font-weight: 600; text-decoration: none; }
.footer-nav a:hover { color: var(--ink); }

/* ===============================================================
   Rhythm and density. Sections alternate paper and bench so the
   page has a beat; product views lie on drafting paper; the one
   dark band is the sign-up. Spacing is kept tight, as in the app.
   =============================================================== */
.hero { background: var(--grid), var(--bench); }
.hero__inner { padding-block: clamp(2rem, 4.5vw, 3.75rem) clamp(2.5rem, 5vw, 4rem); }
.hero h1 { letter-spacing: -0.03em; line-height: 0.95; }
.hero__audience { margin-bottom: 0.9rem; color: var(--pencil); font-size: 0.9375rem; }
.hero__lede { margin-top: 1.1rem; }
.hero__for { margin-top: 0.75rem; }
.hero__actions { margin-top: 1.5rem; }
.stage figcaption { margin-top: 1rem; }
@media (min-width: 64rem) {
  .hero__inner { min-height: 0; }
  .stage figcaption { margin-top: 2.75rem; }
}

.facts { border-top: 1px solid var(--line); background: var(--paper); }
.strip__cell { padding-block: 1.5rem 1.75rem; }
@media (min-width: 48rem) {
  .strip__cell { padding: 1.75rem 2rem 2rem; }
}

.shops { background: var(--bench); }
.shop-cards { margin-top: 1.75rem; }

.benefits { border-top: 1px solid var(--line); background: var(--paper); }
.benefits__inner { gap: clamp(3rem, 6vw, 4.5rem); }
.benefit h3 { letter-spacing: -0.025em; line-height: 1; }
.benefit__text p { margin-top: 0.9rem; font-size: 1.125rem; }
.benefit__text .benefit__action { margin-top: 1.4rem; }

.panel {
  min-height: clamp(18rem, 30vw, 25rem);
  padding: clamp(1.75rem, 4vw, 2.75rem) clamp(1.25rem, 3.5vw, 2.5rem);
  background: var(--grid), var(--stage);
}

.steps { background: var(--bench); }
.steps__list { margin-top: 1.75rem; }

.faq-section { background: var(--paper); }
.faq { gap: 0.5rem; margin-top: 1.5rem; }
.faq__item summary { padding: 0.85rem 1.1rem; }

/* sign-up: the one ink band on the page */
.signup { border-top: 0; background: var(--brand-ink); color: #c9dad8; }
.signup__panel { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.signup__panel h2 { color: #fff; }
.signup__intro .signup__note { color: #a3b6b4; }
.signup__intro a { color: #fff; }
.signup__intro a:hover { color: #c9dad8; }
.signup :focus-visible { outline-color: #fff; }
.signup .sheet--form { border: 0; background: var(--paper); box-shadow: var(--shadow-3); }
.signup .sheet--form :focus-visible { outline-color: var(--hl); }

.site-footer { padding-block: 2rem 2.5rem; border-top: 0; }

/* home FAQ: heading beside the list on wide screens, so the list fills the width */
@media (min-width: 60rem) {
  .faq-section .wrap:has(> .faq) {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    column-gap: clamp(2rem, 5vw, 4rem);
    align-items: start;
  }
  .faq-section .wrap:has(> .faq) > h2 { grid-row: 1 / span 2; position: sticky; top: 6rem; }
  .faq-section .wrap:has(> .faq) > .faq { margin-top: 0; max-width: none; }
}

/* inner pages: header on drafting paper, body on paper, one shared left edge */
main:has(> .page-hero) { background: var(--grid), var(--bench); }
.page-hero__inner { max-width: var(--wrap); }
.page-hero__inner > * { max-width: 46rem; }
.page-hero__inner > .answer { max-width: 62ch; }
.page-hero__inner > .hero__actions { max-width: none; }
/* the body is paper edge to edge, without a wrapper element */
.article { max-width: var(--wrap); border-image: conic-gradient(var(--paper) 0 0) fill 0 // 0 100vw; }
.article h2 { max-width: 40ch; }

/* ===============================================================
   Product window tabs, as in the app's workspace
   =============================================================== */
.window__tabs {
  display: flex;
  gap: 2px;
  padding: 0 0.6rem;
  overflow-x: auto;
  border-bottom: 1px solid var(--hair);
  background: var(--paper);
}
.window__tabs button {
  position: relative;
  flex: none;
  min-height: 2.4rem;
  padding: 0 0.7rem;
  border: 0;
  background: none;
  color: var(--quiet);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.window__tabs button:hover { color: var(--ink); }
.window__tabs button[aria-selected="true"] { color: var(--ink); }
.window__tabs button[aria-selected="true"]::after {
  position: absolute;
  right: 0.5rem;
  bottom: -1px;
  left: 0.5rem;
  height: 3px;
  border-radius: 2px 2px 0 0;
  background: var(--hl);
  content: "";
}
.window__tabs button:focus-visible { outline-offset: -2px; }

/* the panes share one cell, so the window keeps its height */
.panes { display: grid; }
.pane { grid-area: 1 / 1; }
.pane[data-inactive] { visibility: hidden; }

.pane__table {
  width: 100%;
  margin-top: 0.6rem;
  border-collapse: collapse;
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
}
.pane__table th,
.pane__table td {
  padding: 0.4rem 0.35rem;
  border-bottom: 1px solid var(--hair);
  text-align: left;
  white-space: nowrap;
}
.pane__table thead th { color: var(--quiet); font-size: 0.75rem; font-weight: 600; }
.pane__table tbody th { font-weight: 600; }
.pane__table td:first-child { color: var(--quiet); }
.pane__table--sheet td { text-align: right; color: var(--ink) !important; }
.pane__table--sheet thead th:not(:first-child) { text-align: right; }
.pane__table--sheet tfoot th,
.pane__table--sheet tfoot td { border-bottom: 0; border-top: 1px solid var(--rule); font-weight: 700; }
.pane__note { margin-top: auto; padding-top: 0.8rem; color: var(--quiet); font-size: 0.75rem; }

.matches { display: grid; margin: 0.6rem 0 0; padding: 0; list-style: none; }
.matches li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--hair);
}
.matches__name { font-weight: 600; font-size: 0.8125rem; }
.matches__name small { display: block; color: var(--quiet); font-weight: 400; font-size: 0.75rem; }
.matches__score { display: flex; align-items: center; gap: 0.45rem; font-weight: 700; font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
.matches__bar { width: 3.5rem; height: 6px; border-radius: 3px; background: linear-gradient(var(--pencil), var(--pencil)) left / calc(var(--v) * 1%) 100% no-repeat, var(--bench); }

/* ===============================================================
   The problem, then the turn: an estimator's inbox, a leader line,
   and the answer
   =============================================================== */
.backlog { border-top: 1px solid var(--line); background: var(--paper); }
.backlog__inner {
  display: grid;
  gap: 2rem clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  padding-block: var(--section) 0;
}
.backlog__text p { max-width: 40ch; margin-top: 1rem; font-size: 1.125rem; }
@media (min-width: 60rem) {
  .backlog__inner { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
}

.inbox {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--hair);
  border-radius: 6px;
  background: var(--paper);
  box-shadow: var(--shadow-2);
  color: var(--ink);
  font-size: 0.8125rem;
}
.inbox__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 0.9rem;
  border-bottom: 1px solid var(--hair);
  background: #f4faf9;
  font-weight: 600;
}
.inbox__count {
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  background: var(--warn-tint);
  color: var(--warn);
  font-size: 0.75rem;
  font-weight: 700;
}
.inbox__list { margin: 0; padding: 0; list-style: none; }
.inbox__list li {
  display: grid;
  grid-template-columns: 8.5rem minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 0.2rem 1rem;
  padding: 0.65rem 0.9rem;
  border-bottom: 1px solid var(--hair);
}
.inbox__list li:last-child { border-bottom: 0; }
.inbox__from { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inbox__subj { overflow: hidden; color: var(--quiet); white-space: nowrap; text-overflow: ellipsis; }
.inbox__subj b { margin-right: 0.4rem; color: var(--ink); font-weight: 600; }
.inbox__age { color: var(--warn); font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.inbox__lost { background: #fdf6f5; }
.inbox__lost .inbox__age {
  padding: 0 0.5rem;
  border-radius: 999px;
  background: var(--bad-tint, #fbe4e2);
  color: var(--redline);
}
@media (max-width: 36rem) {
  .inbox__list li { grid-template-columns: minmax(0, 1fr) auto; }
  .inbox__subj { grid-column: 1 / -1; grid-row: 2; }
}

/* a dashed leader line runs from the inbox down to the answer */
.turn { padding-block: 0 var(--section); }
.turn::before {
  display: block;
  width: 9px;
  height: clamp(4rem, 9vw, 6.5rem);
  margin: 0 0 1.25rem 2.5rem;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 8'%3E%3Cpath d='M0 0 3 8 6 0z' fill='%231b2a2f'/%3E%3C/svg%3E") center bottom / 9px 10px no-repeat,
    repeating-linear-gradient(var(--brand-ink) 0 6px, transparent 6px 11px) center top / 1.5px calc(100% - 10px) no-repeat;
  content: "";
}
.turn__line {
  max-width: 22ch;
  color: var(--ink);
  font-size: clamp(2rem, 1.2rem + 3vw, 3.5rem);
  line-height: 1.04;
  text-wrap: balance;
}

/* section surfaces after the new section: paper and bench keep alternating */
.facts { background: var(--bench); }
.shops { border-top: 1px solid var(--line); background: var(--paper); }
.benefits { background: var(--bench); }
.steps { background: var(--paper); }
.faq-section { border-top: 1px solid var(--line); background: var(--bench); }

/* ===============================================================
   Headlines: lighter and larger. The wordmark and the product
   mock-ups keep the app's heavy weights.
   =============================================================== */
.hero h1, .page-hero h1, .benefit h3, .steps h2, .signup__panel h2,
.shops h2, .faq-section h2, .backlog h2, .strip dt, .turn__line {
  font-stretch: 100%;
  font-weight: 500;
  letter-spacing: -0.035em;
}
.hero h1 { font-size: clamp(2.75rem, 1.1rem + 6vw, 4.75rem); line-height: 0.98; }
@media (min-width: 40rem) { .hero h1 { font-stretch: 100%; } }
@media (min-width: 64rem) { .hero h1 { font-size: clamp(3.25rem, 1rem + 3.6vw, 4.375rem); } }
.page-hero h1 { font-size: clamp(2.5rem, 1.3rem + 4.2vw, 4.25rem); line-height: 1; }
.backlog h2, .shops h2, .faq-section h2, .steps h2 { font-size: clamp(2.125rem, 1.4rem + 2.6vw, 3.5rem); line-height: 1.02; }
.benefit h3 { font-size: clamp(2.25rem, 1.4rem + 2.8vw, 3.5rem); line-height: 1; }
.signup__panel h2 { font-size: clamp(2.75rem, 1.6rem + 4vw, 4.75rem); }
.strip dt { font-size: clamp(2.125rem, 1.4rem + 2.2vw, 3.125rem); }
.article h2, .faq__group h2, .shop-card h3 { font-weight: 600; letter-spacing: -0.015em; }

/* hero line: breaks as "Quoting and RFQ / at lightning speed" */
.nowrap { white-space: nowrap; }
.hero h1 { text-wrap: wrap; }
@media (min-width: 64rem) {
  .hero__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); }
  .hero h1 { font-size: clamp(3rem, 0.9rem + 3.3vw, 4.125rem); }
}
.hero__audience { max-width: 48ch; }

/* ===============================================================
   Homepage, A2 design: centred hero, a flow chart from the RFQ email
   to the won quote, the promise band and "Personalized to your
   standards". The flow plays once on load, one beat per step, and
   rests on its finished state; with reduced motion it shows that
   finished state straight away.
   =============================================================== */
.home-hero {
  border-bottom: 1px solid var(--hair);
  background: var(--grid), var(--bench);
  padding-block: clamp(3rem, 6vw, 4.5rem);
}
.home-hero__inner { text-align: center; }
.home-hero__audience {
  margin: 0 0 1.1rem;
  color: var(--pencil);
  font-size: 1rem;
  font-weight: 600;
}
.home-hero h1 {
  max-width: 13ch;
  margin: 0 auto;
  color: var(--ink);
  font-size: clamp(3rem, 1rem + 6.4vw, 6.75rem);
  font-stretch: 100%;
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 0.95;
  text-wrap: balance;
}
.home-hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin: 2.25rem 0 0;
}
.button--big { padding: 0.95rem 1.65rem; font-size: 1.0625rem; }
.button--line.button--big { padding: 0.95rem 1.5rem; }
.button--invert { border-color: var(--paper); background: var(--paper); color: var(--ink); }
.button--invert:hover { border-color: var(--bench); background: var(--bench); color: var(--ink); }

/* ---------- the flow chart ---------- */
.flow-wrap {
  --beat: 450ms;
  --glow: #2ba59c;
  max-width: 85rem;
  margin: clamp(2.5rem, 5vw, 4rem) auto 0;
  padding-inline: var(--gutter);
}
.flow,
.flow__stack {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  margin: 0;
  padding: 0;
  list-style: none;
}
.flow { max-width: 34rem; margin-inline: auto; }
.flow__node { min-width: 0; }

.flow__card {
  --edge: var(--hair);
  overflow: hidden;
  border: 1px solid var(--edge);
  border-radius: 6px;
  background: var(--paper);
  box-shadow: var(--shadow-3);
  color: var(--ink);
  text-align: left;
  animation:
    flow-in 250ms cubic-bezier(.2, .7, .2, 1) calc(var(--at) * var(--beat)) both,
    flow-arrive calc(var(--beat) * 3) ease-out calc(var(--at) * var(--beat)) both;
}
.flow__card--pad { padding: 1rem 1.125rem; }
.flow__node { --at: 0; }

@keyframes flow-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
@keyframes flow-arrive {
  0% { border-color: var(--edge); box-shadow: var(--shadow-3); }
  20% { border-color: var(--glow); box-shadow: 0 0 0 4px rgba(43, 165, 156, 0.28), 0 0 32px 6px rgba(43, 165, 156, 0.45), var(--shadow-3); }
  100% { border-color: var(--glow); box-shadow: 0 0 0 2px rgba(43, 165, 156, 0.14), var(--shadow-3); }
}

/* email and drawing */
.flow__mail { padding: 1rem 1.25rem 0.9rem; border-bottom: 1px solid var(--hair); }
.flow__meta {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.25rem 0.75rem;
  margin: 0;
  font-size: 0.875rem;
}
.flow__meta dt { color: var(--quiet); }
.flow__meta dd { margin: 0; overflow-wrap: anywhere; }
.flow__mail p { margin: 0.75rem 0 0; font-size: 0.9375rem; line-height: 1.5; }
.flow__attach { padding: 0.875rem 1rem 1rem; background: var(--stage); }
.flow__file {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.625rem;
  padding: 0.3rem 0.625rem;
  border-radius: 4px;
  background: var(--paper);
  font-size: 0.8125rem;
  font-weight: 600;
}
.flow__drawing { display: block; width: 100%; height: auto; background: var(--paper); }

/* features found */
.flow__title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  font-size: 1rem;
  font-stretch: 112%;
  font-weight: 800;
  letter-spacing: 0;
}
.flow__sub { margin: 0.25rem 0 0.5rem; color: var(--quiet); font-size: 0.75rem; }
.flow__counts { margin: 0; padding: 0; list-style: none; }
.flow__counts li {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.55rem 0;
  border-top: 1px solid var(--hair);
  font-size: 0.875rem;
}
.flow__counts li::before {
  flex: none;
  width: 12px;
  height: 12px;
  border: 1.5px solid var(--k);
  border-radius: 3px;
  background: color-mix(in srgb, var(--k) 16%, transparent);
  content: "";
}
.flow__counts span { flex: 1; min-width: 0; color: var(--pencil); }
.flow__counts b { font-size: 1.0625rem; font-variant-numeric: tabular-nums; }

/* the quote */
.flow__card--quote { padding: 1.25rem; }
.flow__card--quote .quote__title { font-size: 1.3125rem; }
.flow__lines {
  width: 100%;
  margin: 0.25rem 0 1rem;
  border-collapse: collapse;
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
}
.flow__lines thead th {
  padding: 0.5rem 0 0.375rem;
  color: var(--quiet);
  font-size: 0.75rem;
  font-weight: 600;
  text-align: left;
}
.flow__lines thead th:last-child,
.flow__lines td:last-child { text-align: right; }
.flow__lines tbody th,
.flow__lines td { padding: 0.375rem 0; border-top: 1px solid var(--hair); text-align: left; }
.flow__lines td { padding-inline: 0.5rem 0; color: var(--pencil); }
.flow__lines td:last-child { color: var(--ink); }
.flow__lines tbody th span {
  padding: 1px 6px;
  background: var(--hl-tint);
  box-shadow: inset 2px 0 0 var(--brand-ink);
  font-weight: 600;
}
.flow__card--quote .quote__prices tr:first-child th,
.flow__card--quote .quote__prices tr:first-child td { border-top-color: var(--brand-ink); }
.flow__sent {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 1rem 0 0;
  color: var(--quiet);
  font-size: 0.8125rem;
}
.flow__sent svg { color: var(--ok); }

/* the ERP */
.flow__card--erp { --edge: var(--brand-ink); background: var(--brand-ink); color: #c9dad8; }
.flow__card--erp .flow__title { color: #fff; }
.flow__card--erp .flow__sub { color: #a3b6b4; }
.flow__erp { margin: 0; font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
.flow__erp div {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.375rem 0;
  border-top: 1px solid #2e4248;
}
.flow__erp dd { margin: 0; color: #fff; font-weight: 600; }
.flow__synced {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin: 0.625rem 0 0;
  padding: 0.25rem 0.625rem;
  border-radius: 999px;
  background: rgba(43, 165, 156, 0.18);
  color: #8fd1cb;
  font-size: 0.75rem;
  font-weight: 700;
}

/* the destination */
.flow__card--won {
  --edge: var(--ok);
  border-width: 2px;
  animation:
    flow-in 250ms cubic-bezier(.2, .7, .2, 1) calc(var(--at) * var(--beat)) both,
    flow-won calc(var(--beat) * 2) ease-out calc(var(--at) * var(--beat)) both;
  box-shadow: 0 0 0 4px var(--ok-tint), 0 0 40px 8px rgba(43, 165, 156, 0.4), var(--shadow-3);
}
@keyframes flow-won {
  from { box-shadow: 0 0 0 4px var(--ok-tint), var(--shadow-3); }
  to { box-shadow: 0 0 0 4px var(--ok-tint), 0 0 40px 8px rgba(43, 165, 156, 0.4), var(--shadow-3); }
}
.flow__reply-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  color: var(--ok);
  font-size: 0.8125rem;
  font-weight: 700;
}
.flow__reply {
  margin: 0.625rem 0 0;
  padding: 0.5rem 0.625rem;
  border-left: 3px solid var(--ok);
  background: #eff6f5;
  font-size: 0.8125rem;
  line-height: 1.4;
}
.flow__reply p { margin: 0; }
.flow__reply span { display: block; color: var(--quiet); font-size: 0.6875rem; font-weight: 600; }
.flow__won {
  margin: 0.75rem 0 0;
  color: var(--ok);
  font-size: 1.625rem;
  white-space: nowrap;
  font-stretch: 112%;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
}
.flow__won-sum { margin: 0.375rem 0 0; color: var(--pencil); font-size: 0.8125rem; font-weight: 600; font-variant-numeric: tabular-nums; }

/* connectors: a green line with a glowing head, drawn across one beat */
.flow__link {
  position: relative;
  height: 3rem;
}
.flow__link::before {   /* the track */
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  margin-left: -1px;
  background: #c5d8d5;
  content: "";
}
.flow__line {
  position: absolute;
  top: 0;
  left: 50%;
  width: 3px;
  height: 100%;
  margin-left: -1.5px;
  border-radius: 2px;
  background: linear-gradient(180deg, rgba(43, 165, 156, 0.25), var(--glow));
  animation: flow-grow-y var(--beat) linear calc(var(--at) * var(--beat)) both;
}
.flow__line::after {    /* the head */
  position: absolute;
  bottom: -6px;
  left: -4.5px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--glow);
  box-shadow: 0 0 0 4px rgba(43, 165, 156, 0.22), 0 0 14px 3px rgba(43, 165, 156, 0.6);
  content: "";
  opacity: 0;
  animation: flow-head var(--beat) linear calc(var(--at) * var(--beat)) both;
}
.flow__label {
  position: absolute;
  top: 50%;
  left: calc(50% + 0.875rem);
  transform: translateY(-50%);
  color: var(--ok);
  font-size: 0.6875rem;
  font-weight: 600;
  animation: flow-fade 250ms ease calc(var(--at) * var(--beat)) both;
}
@keyframes flow-grow-y { from { height: 0; } to { height: 100%; } }
@keyframes flow-grow-x { from { width: 0; } to { width: 100%; } }
@keyframes flow-head { 0% { opacity: 0; } 8%, 85% { opacity: 1; } 100% { opacity: 0; } }
@keyframes flow-fade { from { opacity: 0; } to { opacity: 1; } }

/* the time dimension: extension lines, arrowheads and "under a minute" as the
   dimension text. It draws from the RFQ to the quote as the run plays. */
.flow__dim { display: none; }
.flow__dim-text {
  display: block;
  color: var(--brand-ink);
  font-size: 0.875rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: center;
  white-space: nowrap;
}
.flow__dim-text b { font-weight: 800; }
.flow__dim-line {
  display: block;
  height: 13px;
  margin-top: 0.3rem;
  border-inline: 1px solid var(--accent);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 6'%3E%3Cpath d='M8 0 0 3 8 6z' fill='%23e4572e'/%3E%3C/svg%3E") left 1px center / 8px 6px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 6'%3E%3Cpath d='M0 0 8 3 0 6z' fill='%23e4572e'/%3E%3C/svg%3E") right 1px center / 8px 6px no-repeat,
    linear-gradient(var(--accent), var(--accent)) center / 100% 1px no-repeat;
}
@keyframes flow-reveal { from { width: 0; } to { width: 100%; } }
@keyframes flow-reveal-deck { from { width: 0; } to { width: 40%; } }

/* inside the cards: the marks land on the drawing while it is read, then the
   feature rows and the quote lines fill in one after another */
.flow__counts li:nth-child(2), .flow__lines tbody tr:nth-child(2) { --i: 1; }
.flow__counts li:nth-child(3), .flow__lines tbody tr:nth-child(3) { --i: 2; }
.flow__counts li:nth-child(4), .flow__lines tbody tr:nth-child(4) { --i: 3; }
.flow__counts li:nth-child(5), .flow__lines tbody tr:nth-child(5) { --i: 4; }
.flow__mk { animation: flow-fade 200ms ease calc(var(--beat) * 1 + var(--i, 0) * 80ms) both; }
.flow__counts li { animation: flow-fade 200ms ease calc(var(--beat) * 2 + 150ms + var(--i, 0) * 80ms) both; }
.flow__lines tbody tr { animation: flow-fade 200ms ease calc(var(--beat) * 4 + 150ms + var(--i, 0) * 70ms) both; }
.flow__card--quote .quote__prices { animation: flow-fade 250ms ease calc(var(--beat) * 4 + 550ms) both; }
.flow__sent { animation: flow-fade 250ms ease calc(var(--beat) * 4 + 750ms) both; }
.flow__synced { animation: flow-fade 250ms ease calc(var(--beat) * 6 + 350ms) both; }
.flow__note { margin: 1.25rem 0 0; color: var(--quiet); font-size: 0.8125rem; text-align: center; }

/* wide screens: one sheet. Its four panes share a height, so nothing is ragged.
   Each pane has a header with the stage name and a dot that turns green when
   the run reaches it; the dimension above spans the three panes it times. */
.flow__link--first { display: none; }
@media (min-width: 75rem) {
  .flow-wrap { max-width: calc(80rem + 2 * var(--gutter)); }
  .flow__dim {
    display: block;
    width: calc(875 / 1120 * 100%);   /* the first three panes */
    margin-bottom: 0.875rem;
    animation: flow-fade 250ms ease both;
  }
  .flow__dim-line { animation: flow-reveal calc(var(--beat) * 4.4) linear calc(var(--beat) * 0.2) both; }

  .flow {
    --head: 2.625rem;
    display: grid;
    grid-auto-flow: column;
    grid-template-columns: minmax(0, 290fr) minmax(0, 250fr) minmax(0, 335fr) minmax(0, 245fr);
    grid-template-rows: var(--head) minmax(0, 1fr);
    max-width: none;
    overflow: hidden;
    border: 1px solid var(--rule);
    border-radius: 8px;
    background: var(--paper);
    box-shadow: var(--shadow-3);
  }
  .flow > li:nth-child(n + 3) { border-left: 1px solid var(--hair); }

  /* stage headers */
  .flow__link,
  .flow__link--first {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    height: var(--head);
    padding: 0 1.25rem;
    border-bottom: 1px solid var(--hair);
    background: #f4faf9;
  }
  .flow__link::before { content: none; }
  .flow__line {
    position: static;
    flex: none;
    width: 10px;
    height: 10px;
    margin: 0;
    border-radius: 50%;
    background: var(--glow);
    box-shadow: 0 0 0 3px rgba(43, 165, 156, 0.2);
    animation: flow-dot 320ms ease calc(var(--at) * var(--beat)) both;
  }
  .flow__line::after { content: none; }
  .flow__label {
    position: static;
    transform: none;
    color: var(--pencil);
    font-size: 0.8125rem;
    animation: none;
  }
  .flow__stack > .flow__link { border-top: 1px solid var(--hair); }

  /* panes */
  .flow__node { display: flex; flex-direction: column; }
  .flow__card {
    position: relative;
    display: flex;
    flex: 1;
    flex-direction: column;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    animation: flow-fade 350ms ease calc(var(--at) * var(--beat)) both;
  }
  .flow__card::after {   /* a green outline flashes as the run reaches the pane */
    position: absolute;
    inset: 0;
    box-shadow: inset 0 0 0 3px rgba(43, 165, 156, 0.65);
    content: "";
    opacity: 0;
    pointer-events: none;
    animation: flow-flash calc(var(--beat) * 3) ease-out calc(var(--at) * var(--beat)) both;
  }
  .flow__card--pad,
  .flow__card--quote { padding: 1.125rem 1.25rem 1.25rem; }
  .flow__mail { padding: 1.125rem 1.25rem 1rem; }
  .flow__attach { flex: 1; padding: 1rem 1.25rem 1.25rem; }
  .flow__counts,
  .flow__erp { display: grid; flex: 1; grid-auto-rows: 1fr; }
  .flow__erp div { align-items: center; }
  .flow__synced { align-self: flex-start; }
  .flow__sent { margin-top: auto; padding-top: 1rem; }

  /* the last pane: your ERP above, the won quote below */
  .flow__stack { flex: 1; }
  .flow__stack > .flow__node:first-child { flex: 1; }
  .flow__card--won { background: #e4f3f1; }
  .flow__card--won .flow__reply { background: var(--paper); }
}
@keyframes flow-dot {
  from { background: var(--paper); box-shadow: inset 0 0 0 2px var(--rule); }
  to { background: var(--glow); box-shadow: 0 0 0 3px rgba(43, 165, 156, 0.2); }
}
@keyframes flow-flash { 0% { opacity: 0; } 15% { opacity: 1; } 100% { opacity: 0; } }

/* narrower screens: the five steps share one frame instead of stacking, so the
   rest of the page is one short scroll away. site.js adds .is-deck and the
   step buttons; without the script the steps stay stacked. */
.flow-steps { display: none; }
@media (max-width: 74.99rem) {
  .is-deck .flow-steps {
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    max-width: 34rem;
    margin: 0 auto 0.75rem;
  }
  .is-deck .flow-steps::before {
    position: absolute;
    top: 14px;
    right: 10%;
    left: 10%;
    height: 2px;
    background: var(--rule);
    content: "";
  }
  .flow-steps__step {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 0.4rem;
    min-height: 44px;
    padding: 8px 0 4px;
    border: 0;
    background: none;
    color: var(--pencil);
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
  }
  .flow-steps__step::before {
    width: 14px;
    height: 14px;
    border: 2px solid var(--rule);
    border-radius: 50%;
    background: var(--paper);
    content: "";
    transition: background-color 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
  }
  .flow-steps__step.is-done::before { border-color: var(--glow); background: var(--glow); }
  .flow-steps__step.is-on { color: var(--ink); }
  .flow-steps__step.is-on::before {
    border-color: var(--glow);
    background: var(--glow);
    box-shadow: 0 0 0 4px rgba(43, 165, 156, 0.22);
  }
  .flow-steps__step:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 4px; }

  .is-deck .flow { display: grid; align-items: start; }
  .is-deck .flow__link { display: none; }
  .is-deck .flow__node--stack,
  .is-deck .flow__stack { display: contents; }
  /* the dimension runs under the first three stops of the strip */
  .is-deck .flow__dim {
    display: flex;
    flex-direction: column-reverse;
    max-width: 27rem;
    margin: 0 auto 0.875rem;
  }
  .is-deck .flow__dim-line { width: 40%; margin: 0 0 0 10%; }
  .is-deck .flow__dim-text { margin: 0.35rem 0 0 10%; text-align: left; }
  .is-deck .flow__dim.is-counting .flow__dim-line { animation: flow-reveal-deck 5.2s linear both; }
  .is-deck .flow__mk,
  .is-deck .flow__counts li,
  .is-deck .flow__lines tbody tr,
  .is-deck .flow__card--quote .quote__prices,
  .is-deck .flow__sent,
  .is-deck .flow__synced { animation: none; }
  .is-deck .is-on .flow__mk { animation: flow-fade 220ms ease calc(700ms + var(--i) * 140ms) both; }
  .is-deck .is-on .flow__counts li { animation: flow-fade 220ms ease calc(200ms + var(--i) * 110ms) both; }
  .is-deck .is-on .flow__lines tbody tr { animation: flow-fade 220ms ease calc(200ms + var(--i) * 100ms) both; }
  .is-deck .is-on .flow__card--quote .quote__prices { animation: flow-fade 250ms ease 750ms both; }
  .is-deck .is-on .flow__sent { animation: flow-fade 250ms ease 1000ms both; }
  .is-deck .is-on .flow__synced { animation: flow-fade 250ms ease 500ms both; }
  .is-deck .flow__node[data-step] {
    grid-area: 1 / 1;
    opacity: 0;
    visibility: hidden;
    transition: opacity 280ms ease, visibility 0s linear 280ms;
  }
  .is-deck .flow__node[data-step].is-on {
    opacity: 1;
    visibility: visible;
    transition: opacity 280ms ease;
  }
  .is-deck .flow__card {
    border-color: var(--glow);
    box-shadow: 0 0 0 2px rgba(43, 165, 156, 0.14), var(--shadow-3);
    animation: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .flow *, .flow *::before, .flow *::after,
  .flow__dim, .flow__dim *, .flow__dim *::after { animation: none !important; }
}

/* ---------- the promise band ---------- */
.moment { background: var(--brand-ink); color: #c9dad8; }
.moment__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem 2.5rem;
  justify-content: center;
  padding-block: 2.5rem;
}
.moment h2 {
  margin: 0;
  color: #fff;
  font-size: clamp(1.75rem, 1rem + 2.2vw, 2.75rem);
  font-stretch: 100%;
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.05;
}

/* ---------- personalized to your standards ---------- */
.standards { background: var(--paper); padding-block: var(--section); }
.standards__head h2 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(2rem, 1.4rem + 2.4vw, 3.25rem);
  font-stretch: 100%;
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.02;
}
.standards__head p { max-width: 60ch; margin: 0.875rem 0 0; font-size: 1.125rem; line-height: 1.5; }
.standards__cols { margin-top: 2.25rem; border-top: 1px solid var(--brand-ink); }
.standards__col { padding: 1.5rem 0 0.25rem; }
.standards__col + .standards__col { border-top: 1px solid var(--hair); }
.standards__col h3 { margin: 0; color: var(--ink); font-size: 1.25rem; font-weight: 600; letter-spacing: -0.01em; }
.standards__col > p { margin: 0.625rem 0 0; line-height: 1.55; }
@media (min-width: 56rem) {
  .standards__cols {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: auto auto 1fr;
  }
  .standards__col {
    display: grid;
    grid-row: span 3;
    grid-template-rows: subgrid;
    align-content: start;
    row-gap: 0;
    padding: 1.5rem 1.75rem 0.25rem;
  }
  .standards__col:first-child { padding-left: 0; }
  .standards__col:last-child { padding-right: 0; }
  .standards__col + .standards__col { border-top: 0; border-left: 1px solid var(--hair); }
}
.proof {
  align-self: start;
  margin: 1.125rem 0 0;
  padding: 0.75rem 0.875rem;
  border-radius: 6px;
  background: var(--bench);
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
}
.proof__row {
  display: flex;
  justify-content: space-between;
  gap: 0.625rem;
  margin: 0;
  padding: 0.3rem 0;
}
.proof__row + .proof__row { border-top: 1px solid var(--hair); }
.proof__row dt { color: var(--pencil); }
.proof__row dd, .proof__row b { margin: 0; color: var(--ink); font-weight: 600; }
.proof__row--cite { flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 0.375rem; }
.proof__row--sync { align-items: center; }
.proof__muted { color: var(--quiet); }
.proof__dash { flex: 1; border-top: 1.5px dashed var(--rule); }
.tag {
  padding: 1px 7px;
  border: 1px solid var(--k, var(--rule));
  border-radius: 3px;
  background: color-mix(in srgb, var(--k, var(--rule)) 8%, transparent);
  color: var(--brand-ink);
}
.tag--pill { border-color: var(--rule); border-radius: 999px; background: var(--paper); }
.tag--ok { border: 0; border-radius: 999px; background: var(--ok-tint); color: var(--ok); font-size: 0.75rem; font-weight: 700; }

/* ===============================================================
   Homepage rework: the problem comes straight after the hero and
   its leader line lands on the answer band; the facts are drawn as
   a measurement; shop types are rows; the three steps live in the
   demo panel; the footer is a full title block; small screens get
   a menu.
   =============================================================== */
.home-hero__audience { text-wrap: balance; }

/* ---------- the problem, with a leader line down to the answer ---------- */
.backlog__inner { align-items: start; padding-block: var(--section) 0; }
.backlog .inbox { align-self: center; }
.turn {
  width: 9px;
  min-height: 4.5rem;
  margin: 0 0 0 2.5rem;
  padding: 0;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 8'%3E%3Cpath d='M0 0 3 8 6 0z' fill='%231b2a2f'/%3E%3C/svg%3E") center bottom / 9px 10px no-repeat,
    repeating-linear-gradient(var(--brand-ink) 0 6px, transparent 6px 11px) center top / 1.5px calc(100% - 10px) no-repeat;
}
.turn::before { content: none; }
@media (min-width: 60rem) {
  .backlog__inner { grid-template-rows: auto 1fr; }
  .backlog__text { grid-column: 1; grid-row: 1; }
  .backlog .inbox { grid-column: 2; grid-row: 1 / span 2; margin-bottom: var(--section); }
  .turn { grid-column: 1; grid-row: 2; align-self: stretch; }
}
.moment__inner { justify-content: space-between; }

/* ---------- facts: the measured time, drawn against one minute ---------- */
.facts { border-block: 1px solid var(--line); background: var(--bench); }
.facts__inner {
  display: grid;
  gap: 2.5rem clamp(2.5rem, 7vw, 6rem);
  padding-block: var(--section);
}
@media (min-width: 60rem) {
  .facts__inner { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; }
}
.measure h2 {
  color: var(--ink);
  font-size: clamp(2.5rem, 1.4rem + 4.2vw, 4.75rem);
  font-stretch: 100%;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.04em;
  line-height: 0.98;
}
.measure > p { max-width: 48ch; margin-top: 0.75rem; font-size: 1.125rem; }

.gauge { margin-top: 2rem; }
.gauge__track {
  position: relative;
  height: 4.5rem;
  border-bottom: 1.5px solid var(--brand-ink);
  background:
    repeating-linear-gradient(90deg, var(--brand-ink) 0 1px, transparent 1px calc(100% / 6)) left bottom / 100% 11px no-repeat,
    repeating-linear-gradient(90deg, var(--faint) 0 1px, transparent 1px calc(100% / 12)) left bottom / 100% 6px no-repeat;
}
/* the measured range: a green bar with a dimension over it, like the logo */
.gauge__bar {
  position: absolute;
  bottom: 0;
  left: calc(11 / 60 * 100%);
  width: calc(28 / 60 * 100%);
  height: 1.5rem;
  background: #2ba59c;
}
.gauge__bar::before {
  position: absolute;
  right: 0;
  bottom: calc(100% + 5px);
  left: 0;
  height: 13px;
  border-inline: 1px solid var(--accent);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 6'%3E%3Cpath d='M8 0 0 3 8 6z' fill='%23e4572e'/%3E%3C/svg%3E") left 1px center / 8px 6px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 6'%3E%3Cpath d='M0 0 8 3 0 6z' fill='%23e4572e'/%3E%3C/svg%3E") right 1px center / 8px 6px no-repeat,
    linear-gradient(var(--accent), var(--accent)) center / 100% 1px no-repeat;
  content: "";
}
.gauge__end,
.gauge__limit {
  position: absolute;
  color: var(--ink);
  font-size: 0.8125rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 13px;
  white-space: nowrap;
}
.gauge__end { bottom: calc(1.5rem + 5px); }
.gauge__end--from { right: calc(100% - 11 / 60 * 100% + 7px); }
.gauge__end--to { left: calc(39 / 60 * 100% + 7px); }
/* the limit: a dashed line at one minute */
.gauge__limit {
  top: 0;
  right: 0;
  bottom: 0;
  padding-right: 8px;
  border-right: 1.5px dashed var(--brand-ink);
  color: var(--quiet);
}
.gauge__scale {
  display: flex;
  justify-content: space-between;
  margin: 0.45rem 0 0;
  padding: 0;
  color: var(--quiet);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  list-style: none;
}
.gauge__scale li { display: flex; justify-content: center; width: 0; white-space: nowrap; }
.gauge__scale li:first-child { justify-content: flex-start; }
.gauge__scale li:last-child { justify-content: flex-end; }

.claims { display: grid; margin: 0; padding: 0; list-style: none; }
.claims li { padding-block: 1.4rem; border-top: 1px solid var(--rule); }
.claims li:last-child { padding-bottom: 0; }
.claims h3 {
  color: var(--ink);
  font-size: clamp(1.5rem, 1.2rem + 1vw, 1.9375rem);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.1;
}
.claims p { max-width: 42ch; margin-top: 0.5rem; font-size: 1rem; }

/* ---------- shop types: one row each, the whole row is the link ---------- */
.shop-rows { margin: 2rem 0 0; padding: 0; border-top: 1px solid var(--brand-ink); list-style: none; }
.shop-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.45rem 1.5rem;
  padding-block: 1.35rem;
  border-bottom: 1px solid var(--line);
}
.shop-row h3 {
  font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.125rem);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.05;
}
.shop-row h3 a { text-decoration: none; }
.shop-row h3 a::after { position: absolute; inset: 0; content: ""; }
.shop-row p { grid-column: 1; max-width: 62ch; color: var(--soft); }
.shop-row__go {
  grid-column: 2;
  grid-row: 1 / span 2;
  color: var(--rule);
  transition: color 160ms ease, transform 160ms ease;
}
.shop-row:hover h3 a { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1.5px; }
.shop-row:hover .shop-row__go { color: var(--ink); transform: translateX(4px); }
@media (min-width: 60rem) {
  .shop-row { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr) auto; gap: 2rem; padding-block: 1.6rem; }
  .shop-row p { grid-column: 2; }
  .shop-row__go { grid-column: 3; grid-row: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .shop-row__go { transition: none; }
}

/* ---------- demo panel: how it starts, in three steps ---------- */
.signup__steps {
  display: grid;
  gap: 0.7rem;
  max-width: 24rem;
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}
.signup__steps li {
  display: grid;
  grid-template-columns: 1.75rem minmax(0, 1fr);
  align-items: center;
  gap: 0.8rem;
  color: #fff;
  font-size: 1.125rem;
  line-height: 1.3;
  counter-increment: step;
}
.signup__steps li::before {
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border: 1.5px solid #7f9497;
  border-radius: 50%;
  color: #fff;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1;
  content: counter(step);
}
.signup__intro .signup__note { margin-top: 1.4rem; }

/* ---------- footer: brand, links and a title block that fills its row ---------- */
.site-footer { padding-block: 2.75rem 2rem; }
.site-footer__top { display: grid; gap: 2rem; margin-bottom: 2rem; }
.site-footer__brand p { max-width: 34ch; margin-top: 0.8rem; color: var(--soft); font-size: 0.9375rem; line-height: 1.5; }
.footer-nav { display: grid; grid-template-columns: repeat(2, max-content); justify-content: space-between; gap: 1.5rem 0.75rem; max-width: 24rem; }
.footer-nav__head { margin-bottom: 0.6rem; color: var(--quiet); font-size: 0.8125rem; font-weight: 600; }
.footer-nav ul { display: grid; gap: 0.4rem; margin: 0; }
.footer-nav a { font-size: 0.9375rem; }
@media (min-width: 48rem) {
  .footer-nav { grid-template-columns: repeat(4, max-content); justify-content: start; max-width: none; column-gap: clamp(1.5rem, 3.5vw, 3rem); }
}
@media (min-width: 72rem) {
  .site-footer__top { grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 2.5rem; }
  .footer-nav { justify-self: end; }
}
.site-footer .titleblock { grid-template-columns: 1fr; overflow: hidden; }
.site-footer .titleblock__cell { border: 0; box-shadow: 1px 0 0 var(--hair), 0 1px 0 var(--hair); }
@media (min-width: 36rem) {
  .site-footer .titleblock { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 60rem) {   /* one row, however many cells there are */
  .site-footer .titleblock { grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; grid-template-columns: none; }
}
.fineprint { margin-top: 1rem; }

/* ---------- small screens: the page links fold into a menu ---------- */
.topbar__menu { display: none; }
@media (max-width: 55.99rem) {
  .topbar__inner { gap: 0.5rem; }
  .topbar__menu {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 2.75rem;
    height: 2.5rem;
    margin-right: -0.6rem;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: none;
    color: var(--ink);
    cursor: pointer;
  }
  .topbar__menu-icon { position: relative; width: 20px; height: 12px; }
  .topbar__menu-icon::before,
  .topbar__menu-icon::after {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    border-radius: 1px;
    background: currentColor;
    content: "";
    transition: transform 180ms ease;
  }
  .topbar__menu-icon::before { top: 0; }
  .topbar__menu-icon::after { bottom: 0; }
  .topbar.is-open .topbar__menu-icon::before { transform: translateY(5px) rotate(45deg); }
  .topbar.is-open .topbar__menu-icon::after { transform: translateY(-5px) rotate(-45deg); }

  .topbar.is-open .topbar__nav {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    display: grid;
    margin: 0;
    padding: 0.25rem var(--gutter) 0.75rem;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background: var(--paper);
    box-shadow: var(--shadow-2);
  }
  .topbar.is-open .topbar__nav a {
    height: 3.25rem;
    padding: 0;
    border-top: 1px solid var(--hair);
    border-radius: 0;
    color: var(--ink);
    font-size: 1.0625rem;
  }
  .topbar.is-open .topbar__nav a:first-child { border-top: 0; }
  .topbar.is-open .topbar__nav a:hover { background: none; color: var(--quiet); }
  .topbar.is-open .topbar__nav a[aria-current] {
    padding-left: 0.75rem;
    background: none;
    box-shadow: inset 3px 0 0 var(--ink);
    color: var(--ink);
  }
}
@media (prefers-reduced-motion: reduce) {
  .topbar__menu-icon::before,
  .topbar__menu-icon::after { transition: none; }
}

/* the step viewer is one fixed frame: every card fills it, so a short step
   never leaves a hole and nothing below moves while the steps play */
@media (max-width: 74.99rem) {
  .is-deck .flow { align-items: stretch; max-width: 27rem; }
  .is-deck .flow-steps { max-width: 27rem; }
  .is-deck .flow__node[data-step] { display: flex; }
  .is-deck .flow__card { display: flex; flex: 1; flex-direction: column; min-width: 0; }
  .is-deck .flow__attach { flex: 1; }
  .is-deck .flow__counts,
  .is-deck .flow__erp { display: grid; flex: 1; grid-auto-rows: 1fr; }
  .is-deck .flow__erp div { align-items: center; }
  .is-deck .flow__synced { align-self: flex-start; }
  .is-deck .flow__sent { margin-top: auto; padding-top: 1rem; }
  .is-deck .flow__card--won { justify-content: center; padding: 1.5rem; }
  .is-deck .flow__won { margin-top: 1.25rem; font-size: clamp(2.25rem, 1.2rem + 5vw, 3.25rem); }
  .is-deck .flow__won-sum { margin-top: 0.6rem; font-size: 1rem; }
  .is-deck .flow__reply { font-size: 0.9375rem; }
}

/* footer: "Made in Canada", with the flag beside the word */
.made-in { display: flex; align-items: center; gap: 0.55rem; }
.made-in__flag { flex: none; border-radius: 1px; box-shadow: 0 0 0 1px var(--rule); }

/* ===============================================================
   Tools and guides: the cut calculator, the glossary and the
   guide pages' small pieces
   =============================================================== */
.calc-section { padding-block: clamp(1.5rem, 4vw, 2.5rem) clamp(2rem, 5vw, 3.5rem); }
.calc { display: grid; align-items: start; gap: 1.25rem; }
@media (min-width: 64rem) {
  .calc { grid-template-columns: minmax(0, 24rem) minmax(0, 1fr); gap: 1.5rem; }
}
.calc__inputs,
.calc__results {
  min-width: 0;
  border: 1px solid var(--hair);
  border-radius: 6px;
  background: var(--paper);
  box-shadow: var(--shadow-2);
  color: var(--ink);
}

/* inputs */
.calc__group { min-width: 0; margin: 0; padding: 1.1rem 1.125rem 1.25rem; border: 0; }
.calc__group + .calc__group { border-top: 1px solid var(--hair); }
.calc__group legend {
  float: left;
  width: 100%;
  margin-bottom: 0.85rem;
  padding: 0;
  font-size: 1rem;
  font-stretch: 112%;
  font-weight: 800;
}
.calc__group legend + * { clear: both; }
.calc__group > * + * { margin-top: 0.85rem; }
.calc__group > legend + * { margin-top: 0; }
.calc__toggles { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.seg { display: inline-flex; padding: 2px; border: 1px solid var(--field-border); border-radius: 5px; background: var(--bench); }
.seg label { position: relative; }
.seg input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; opacity: 0; }
.seg span { display: block; padding: 0.35rem 0.7rem; border-radius: 3px; color: var(--pencil); font-size: 0.875rem; font-weight: 600; }
.seg input:checked + span { background: var(--hl); color: #fff; }
.seg input:focus-visible + span { outline: 2px solid var(--hl); outline-offset: 2px; }
.calc__field { display: grid; gap: 0.3rem; min-width: 0; font-size: 0.875rem; font-weight: 600; }
.calc__optional { color: var(--pencil); font-weight: 400; }
.calc__field input,
.calc__field select,
.calc__parts input {
  width: 100%;
  min-width: 0;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--field-border);
  border-radius: 4px;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
}
.calc__inputs input::-webkit-outer-spin-button,
.calc__inputs input::-webkit-inner-spin-button { margin: 0; -webkit-appearance: none; }
.calc__inputs input:focus-visible,
.calc__inputs select:focus-visible { outline-offset: 0; border-color: var(--ink); }
.calc__pair { display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: 0.75rem; }
.calc__check { display: flex; align-items: center; gap: 0.55rem; font-size: 0.9375rem; }
.calc__check input { flex: none; width: 1.1rem; height: 1.1rem; margin: 0; accent-color: var(--hl); }
.calc__parts { width: 100%; border-collapse: separate; border-spacing: 0 0.4rem; }
.calc__parts thead th { padding: 0 0 0 0.45rem; color: var(--quiet); font-size: 0.75rem; font-weight: 600; text-align: left; }
.calc__parts tbody th { width: 1.75rem; padding: 0; }
.calc__parts td { padding: 0 0 0 0.4rem; }
.calc__parts td:last-child { width: 2.25rem; }
.calc__chip {
  display: inline-grid;
  place-items: center;
  width: 1.6rem;
  height: 1.6rem;
  border: 1.5px solid var(--k);
  border-radius: 3px;
  background: color-mix(in srgb, var(--k) 16%, transparent);
  color: var(--ink);
  font-size: 0.8125rem;
  font-weight: 700;
}
.calc__remove {
  width: 2rem;
  height: 2.25rem;
  border: 0;
  border-radius: 4px;
  background: none;
  color: var(--quiet);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}
.calc__remove:hover { background: var(--bench); color: var(--ink); }
.calc__remove[disabled] { cursor: default; opacity: 0.3; }
.calc__group .button[disabled] { cursor: default; opacity: 0.5; }

/* results */
.calc__results { padding: 1.125rem; }
.calc__summary { max-width: 60ch; font-size: 1.125rem; font-weight: 600; line-height: 1.4; }
.calc__message { color: var(--pencil); }
.calc__warning {
  margin-top: 0.7rem;
  padding: 0.5rem 0.75rem;
  border-radius: 4px;
  background: var(--warn-tint);
  color: var(--warn);
  font-size: 0.9375rem;
  font-weight: 600;
}
.calc__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(6.25rem, 1fr));
  overflow: hidden;
  margin: 1rem 0 0;
  border: 1px solid var(--hair);
  border-radius: 6px;
}
.calc__stats div { padding: 0.7rem 0.9rem 0.8rem; box-shadow: 1px 0 0 var(--hair), 0 1px 0 var(--hair); }
.calc__stats dt { color: var(--quiet); font-size: 0.8125rem; }
.calc__stats dd {
  margin: 0.15rem 0 0;
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.1;
}
.calc__layouts { display: grid; gap: 1rem; margin-top: 1.1rem; }
.calc__layout { min-width: 0; margin: 0; }
.calc__layout figcaption { margin-bottom: 0.4rem; color: var(--pencil); font-size: 0.875rem; font-weight: 600; }
.calc__canvas { overflow-x: auto; padding: 0.75rem; border-radius: 4px; background: var(--stage); }
.calc__svg { display: block; max-width: none; font-family: var(--font); }
.calc__results .table-box { margin-top: 1.1rem; }
.calc__table th:first-child { width: 3rem; }
.calc__more { margin-top: 0.6rem; color: var(--quiet); font-size: 0.8125rem; }

/* glossary */
.glossary { margin: 0; border-top: 1px solid var(--brand-ink); }
.glossary__item {
  display: grid;
  gap: 0.25rem 2rem;
  padding-block: 1rem;
  border-bottom: 1px solid var(--line);
  scroll-margin-top: 5.5rem;
}
.glossary dt { color: var(--ink); font-size: 1.125rem; font-weight: 700; }
.glossary dd { max-width: 62ch; margin: 0; }
@media (min-width: 48rem) {
  .glossary__item { grid-template-columns: 15rem minmax(0, 1fr); }
}

/* guide pages */
.formula {
  padding: 1rem 1.25rem;
  border-left: 3px solid var(--brand-ink);
  border-radius: 0 6px 6px 0;
  background: var(--bench);
}
.article .formula p { max-width: none; color: var(--ink); font-size: 1.0625rem; font-variant-numeric: tabular-nums; }
.ways { display: grid; border-top: 1px solid var(--brand-ink); }
.ways__item { padding: 1.1rem 0 1.25rem; border-bottom: 1px solid var(--line); }
.ways__item h3 { font-size: 1.1875rem; font-weight: 700; }
.ways__item p { margin-top: 0.4rem; }
@media (min-width: 48rem) {
  .ways { grid-template-columns: 1fr 1fr; column-gap: 2.5rem; }
}

/* the narrowest phones: footer links in one column */
@media (max-width: 22.4rem) {
  .footer-nav { grid-template-columns: 1fr; }
}

/* calculators: notes inside the inputs, and the current row in a results table */
.calc__sample {
  margin: 0;
  padding: 0.6rem 1.125rem;
  border-bottom: 1px solid var(--hair);
  border-radius: 6px 6px 0 0;
  background: var(--warn-tint);
  color: var(--warn);
  font-size: 0.8125rem;
  font-weight: 600;
}
.calc__hint { color: var(--quiet); font-size: 0.8125rem; line-height: 1.45; }
.calc__pair > [hidden] { display: none; }
.calc__results .table-box caption { color: var(--pencil); font-weight: 600; }
.data-table tr.is-current th,
.data-table tr.is-current td { background: var(--hl-tint); }

/* charts with many columns keep their figures on one line and scroll sideways on a phone */
.data-table--chart { min-width: 44rem; font-variant-numeric: tabular-nums; }
.data-table--chart th, .data-table--chart td { white-space: nowrap; }
.data-table--chart td:last-child, .data-table--chart th:last-child { text-align: left; }

/* tools index: three lists of link rows */
.tools section + section { margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.tools .shop-rows { margin-top: 1rem; padding-left: 0; }
.tools .shop-row { max-width: none; }
.tools .shop-row + .shop-row { margin-top: 0; }
.tools .shop-row h3 { font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.625rem); }
.tools .shop-row p { max-width: 62ch; }

/* metal prices: monthly figures in three tables, one trend line per row */
.prices { margin-top: 1.75rem; }
.prices__caveat {
  padding: 0.9rem 1.25rem;
  border-left: 3px solid var(--brand-ink);
  border-radius: 0 6px 6px 0;
  background: var(--bench);
}
.prices__group + .prices__group { margin-top: 2.25rem; }
.prices h3 { font-size: 1.1875rem; font-weight: 700; }
.prices .table-box { margin-top: 0.7rem; }
.prices__table { font-variant-numeric: tabular-nums; }
.prices__table caption { line-height: 1.45; }
.prices__table th, .prices__table td { vertical-align: middle; }
.prices__table td, .prices__table thead th + th { text-align: right; white-space: nowrap; }
.prices__table .prices__level { color: var(--ink); font-size: 1.0625rem; font-weight: 700; }
.prices__sub { display: block; color: var(--quiet); font-size: 0.8125rem; font-weight: 400; }
.prices__label { display: none; }
.spark { display: block; margin-left: auto; overflow: visible; }
.spark__base { stroke: var(--rule); stroke-width: 1; }
.spark__line { fill: none; stroke: var(--quiet); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.spark__now { fill: var(--ink); stroke: var(--paper); stroke-width: 2; }
.prices__scale { margin-top: 0.75rem; color: var(--quiet); font-size: 0.8125rem; }
.prices__notes { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--line); color: var(--quiet); font-size: 0.8125rem; }
.article .prices__notes ul { margin-top: 0.4rem; }
.article .prices__notes li { max-width: 86ch; }

/* wide enough for columns: the three tables share one set of column widths, so they line up */
@media (min-width: 48rem) {
  .prices__table { table-layout: fixed; }
  .prices__table thead th { white-space: normal; }
  .prices__table thead th:nth-child(2) { width: 8.5rem; }
  .prices__table thead th:nth-child(3) { width: 7.5rem; }
  .prices__table thead th:nth-child(4) { width: 8.5rem; }
  .prices__table thead th:nth-child(5) { width: 9.5rem; }
}
@media (min-width: 64rem) {
  .prices__table thead th:nth-child(3) { width: 9rem; }
  .prices__table thead th:nth-child(4) { width: 11rem; }
}

/* narrower than that, each row becomes a block: the name and the figure, then the two changes and the trend */
@media (max-width: 47.99rem) {
  .prices__table, .prices__table tbody, .prices__table caption { display: block; }
  .prices__table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .prices__table tbody tr {
    display: grid;
    grid-template-columns: minmax(auto, 5.75rem) minmax(0, 1fr) 6.75rem;
    gap: 0.5rem 0.75rem;
    align-items: end;
    padding: 0.8rem 1rem 0.9rem;
    border-top: 1px solid var(--hair);
  }
  .prices__table tbody th, .prices__table tbody td { padding: 0; border: 0; text-align: left; }
  .prices__table tbody th { white-space: normal; }
  .prices__table tbody th { grid-column: 1 / 3; align-self: start; }
  .prices__table tbody .prices__level { grid-column: 3; align-self: start; text-align: right; }
  .prices__table tbody .prices__trend { width: auto; }
  .prices__label { display: block; color: var(--quiet); font-size: 0.75rem; font-weight: 400; }
  .spark { width: 5.5rem; height: auto; }
}
@media (max-width: 22.4rem) {
  .prices__table caption { padding-inline: 0.75rem; }
  .prices__table tbody tr { column-gap: 0.5rem; padding-inline: 0.75rem; }
}

/* demo panel: the calendar button, then the form as the other way in */
.signup__intro .signup__calendar { max-width: none; margin-top: 1.5rem; }
.signup__intro .signup__calendar .button { color: var(--ink); }
.signup__intro .signup__or { max-width: 30ch; margin-top: 0.9rem; color: #a3b6b4; font-size: 1rem; line-height: 1.5; }