/* ---------------------------------------------------------------
   OneThou, as in the app: paper-white surfaces on a light bench,
   Archivo type, ink buttons, and neutral (ink and grey) marks for
   what is active or selected. The logo's Pass green is brand-only.
   On drawings, feature kinds keep the app's categorical colours.
   --------------------------------------------------------------- */
:root {
  /* palette (same values as the app's static/css/app.css) */
  --paper: #ffffff;
  --bench: #eef1f4;
  --bench-2: #e4e8ec;
  --stage: #d9dee3;          /* the grey a drawing lies on */
  --ink: #000000;
  --brand-ink: #1d2125;      /* wordmark, active fills */
  --pencil: #2b2f33;
  --quiet: #59616a;
  --faint: #6f7780;
  --rule: #b9c1c9;
  --hair: #dde3e8;
  --field-border: #b9c1c9;
  --redline: #b3261e;        /* form errors only */

  --hl: #1d2125;             /* active / selected fill, white text on it */
  --hl-tint: #e9edf1;        /* selected rows and marks */
  --ok: #1d7a3e;
  --ok-tint: #e3f4e8;
  --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 light 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(16, 20, 24, 0.06);
  --shadow-2: 0 8px 24px -8px rgba(16, 20, 24, 0.22);
  --shadow-3: 0 24px 64px -16px rgba(16, 20, 24, 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(29, 33, 37, 0.06) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(90deg, rgba(29, 33, 37, 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: #cfd6dd;
  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: 48rem) {
  .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(--ink);
  border-radius: 4px;
  background: var(--ink);
  color: #fff;
  font: inherit;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
}

.button:hover {
  border-color: var(--pencil);
  background: var(--pencil);
  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(--ink);
  background: var(--ink);
  color: #fff;
}

.sheet .button:hover {
  border-color: var(--pencil);
  background: var(--pencil);
  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: #f7f9fa;
}

.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(--brand-ink);
  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='%231d2125'/%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='%231d2125'/%3E%3C/svg%3E") right 1px center / 8px 6px no-repeat,
    linear-gradient(var(--brand-ink), var(--brand-ink)) 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(29, 33, 37, 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: #4cc27f;
  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: #fafbfc;
  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="page"] { 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: #c3ccd4; }
.signup__panel { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.signup__panel h2 { color: #fff; }
.signup__intro .signup__note { color: #98a2ac; }
.signup__intro a { color: #fff; }
.signup__intro a:hover { color: #c3ccd4; }
.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: #f7f9fa;
  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='%231d2125'/%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: #1fa463;
  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(31, 164, 99, 0.28), 0 0 32px 6px rgba(31, 164, 99, 0.45), var(--shadow-3); }
  100% { border-color: var(--glow); box-shadow: 0 0 0 2px rgba(31, 164, 99, 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: #c3ccd4; }
.flow__card--erp .flow__title { color: #fff; }
.flow__card--erp .flow__sub { color: #9aa4ae; }
.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 #343a40;
}
.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(31, 164, 99, 0.18);
  color: #6fdc9f;
  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(31, 164, 99, 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(31, 164, 99, 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: #f4f6f8;
  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: #d0d6dc;
  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(31, 164, 99, 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(31, 164, 99, 0.22), 0 0 14px 3px rgba(31, 164, 99, 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; } }

/* wide screens: one row, the ERP and the won quote stacked at the end */
@media (min-width: 80rem) {
  .flow { flex-direction: row; align-items: flex-start; justify-content: center; max-width: none; }
  .flow > .flow__node--email { flex: 0 1 360px; }
  .flow > .flow__node:nth-child(3) { flex: 0 1 250px; }
  .flow > .flow__node:nth-child(5) { flex: 0 1 350px; }
  .flow > .flow__node--stack { flex: 0 1 230px; }
  .flow > .flow__link {
    flex: 0 0 56px;
    height: 34px;
    margin-top: 96px;
  }
  .flow > .flow__link::before { top: 22px; bottom: auto; left: 0; right: 0; width: auto; height: 2px; margin: -1px 0 0; }
  .flow > .flow__link .flow__line {
    top: 22px;
    left: 0;
    width: 100%;
    height: 3px;
    margin: -1.5px 0 0;
    background: linear-gradient(90deg, rgba(31, 164, 99, 0.25), var(--glow));
    animation-name: flow-grow-x;
  }
  .flow > .flow__link .flow__line::after { top: -4.5px; right: -6px; bottom: auto; left: auto; }
  .flow > .flow__link .flow__label { top: 0; left: 0; right: 0; transform: none; text-align: center; }
}

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

/* ---------- the promise band ---------- */
.moment { background: var(--brand-ink); color: #c3ccd4; }
.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; }