/* Metrant website. Same palette as the app (web/src/app/globals.css): the near-black ink of
   the logo's lettering for the dark bands, the logo's electric blue for brand marks, a deeper
   blue for buttons and links (white text stays readable on it). No orange, as in the app.
   Titles, labels and figures in IBM Plex Mono, text in Archivo. Flat, square corners. */

@font-face {
  font-family: "Archivo";
  src: url("/fonts/archivo.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Plex Mono";
  src: url("/fonts/plex-mono-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Plex Mono";
  src: url("/fonts/plex-mono-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Plex Mono";
  src: url("/fonts/plex-mono-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --ink: #111623;
  --ink-deep: #0b0f18;
  --ink-line: #283041;
  --ink-border: #3b4558;
  --on-ink-soft: #d3d8e2;
  --on-ink-muted: #a3acbd;
  /* The logo's blue: marks and lines, and large text on the dark bands. */
  --brand: #1e64fc;

  /* Buttons and links: deep enough for white text (4.5:1). */
  --blue: #1a56db;
  --blue-strong: #1443b0;
  --blue-soft: #eaf0fc;
  --blue-border: #bdd0f5;

  --text: #111827;
  --text-2: #3c566b;
  --text-muted: #536575;

  --paper: #eef1f3;
  --white: #fff;
  --line: #bdc8d1;
  --line-soft: #dde4eb;
  --line-strong: #637a8d;

  --warning: #815606;
  --warning-accent: #b78017;
  --warning-soft: #fff8e9;
  --focus: #d99413;

  --font: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --mono: "Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --grid-fine: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M32 0V32H0' fill='none' stroke='%23ffffff' stroke-opacity='.05'/%3E%3C/svg%3E");
  --grid-major: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cpath d='M160 0V160H0' fill='none' stroke='%23ffffff' stroke-opacity='.09'/%3E%3C/svg%3E");
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 80px;
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.55;
  color: var(--text);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
p,
ol,
ul,
dl,
dd,
figure {
  margin: 0;
}

a {
  color: var(--blue);
  text-underline-offset: 3px;
}

a:hover {
  color: var(--blue-strong);
}

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

.wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 12px;
  z-index: 20;
  padding: 10px 14px;
  background: var(--white);
  color: var(--text);
  font-weight: 600;
}

.skip:focus {
  left: 16px;
}

/* Labels: the small monospace captions above titles, like the notes on a drawing. */
.label {
  font-family: var(--mono);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 18px;
}

.label-on-dark {
  color: var(--on-ink-muted);
}

.label-n {
  display: inline-block;
  margin-right: 10px;
  padding: 1px 6px;
  border: 1px solid currentColor;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 22px;
  border: 2px solid transparent;
  font-family: var(--font);
  font-size: 16px;
  font-weight: 650;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
}

.btn-small {
  min-height: 38px;
  padding: 0 14px;
  font-size: 15px;
}

.btn-primary {
  background: var(--blue);
  color: var(--white);
}

.btn-primary:hover {
  background: var(--blue-strong);
  color: var(--white);
}

.btn-ghost-dark {
  border-color: var(--ink-border);
  color: var(--white);
}

.btn-ghost-dark:hover {
  border-color: var(--white);
  color: var(--white);
}

.btn-outline {
  border-color: var(--blue);
  color: var(--blue);
}

.btn-outline:hover {
  background: var(--blue-soft);
  color: var(--blue-strong);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* Header */
.top {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--ink);
  border-bottom: 1px solid var(--ink-line);
}

.top-row {
  display: flex;
  align-items: center;
  gap: 32px;
  height: 64px;
}

.logo {
  flex: none;
}

.logo img {
  display: block;
  width: auto;
  height: 28px;
}

.top-nav {
  display: flex;
  gap: 28px;
}

.top-nav a,
.link-quiet {
  color: var(--on-ink-soft);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
}

.top-nav a:hover,
.link-quiet:hover {
  color: var(--white);
  text-decoration: underline;
}

.top-actions {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-left: auto;
}

/* Hero: a dark drawing sheet with a fine grid. */
.hero {
  background-color: var(--ink);
  background-image: var(--grid-major), var(--grid-fine);
  background-position: -1px -1px;
  color: var(--white);
  padding: 88px 0 96px;
  overflow: hidden;
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 64px;
  align-items: center;
}

/* Titles: IBM Plex Mono bold, like the labels; mono letters and word spaces are wide, so
   both are tightened. */
.hero h1,
.section-head h2,
.cta h2,
.price strong {
  font-family: var(--mono);
  font-weight: 700;
  letter-spacing: -0.04em;
  word-spacing: -0.15em;
}

.hero h1 {
  font-size: clamp(36px, 3.9vw, 56px);
  line-height: 1.08;
  margin-bottom: 26px;
  text-wrap: balance;
}

.hero h1 span {
  display: block;
  color: var(--brand);
}

.lead {
  font-size: 19px;
  color: var(--on-ink-soft);
  max-width: 34em;
  margin-bottom: 32px;
}

.hero-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 26px;
  margin-top: 34px;
  padding: 0;
  list-style: none;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--on-ink-muted);
}

.hero-facts li::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 9px;
  background: var(--brand);
  vertical-align: 1px;
}

/* The example quote: a white sheet with a dimension line measuring request to draft. */
.sheet-area {
  position: relative;
  padding-left: 56px;
}

.sheet {
  position: relative;
  background: var(--white);
  color: var(--text);
  font-size: 14px;
  line-height: 1.45;
  border: 1px solid var(--ink-deep);
}

.sheet-req {
  position: relative;
}

.sheet-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  height: 40px;
  padding: 0 18px;
  background: #f3f5f7;
  border-bottom: 1px solid var(--line-soft);
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.sheet-bar-draft {
  background: var(--blue);
  border-bottom: 0;
  color: var(--white);
}

.sheet-request {
  padding: 16px 18px 18px;
}

.sheet-from {
  font-weight: 650;
}

.sheet-quote {
  margin: 4px 0 12px;
  color: var(--text-2);
}

.chip {
  display: inline-block;
  padding: 3px 8px;
  border: 1px solid var(--line);
  background: var(--paper);
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-2);
}

.chip::before {
  content: "PDF";
  margin-right: 8px;
  padding-right: 8px;
  border-right: 1px solid var(--line);
  font-weight: 600;
  color: var(--blue);
}

.sheet-lines {
  list-style: none;
  padding: 0 18px;
}

.line {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto auto;
  column-gap: 12px;
  align-items: baseline;
  padding: 12px 0;
  border-bottom: 1px solid var(--line-soft);
}

.line-n,
.line-qty,
.line-tot,
.line-note,
.line-src {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

.line-n {
  font-size: 12px;
  color: var(--text-muted);
}

.line-desc {
  font-weight: 600;
}

.line-qty {
  font-size: 12.5px;
  color: var(--text-muted);
  white-space: nowrap;
}

.line-tot {
  min-width: 58px;
  font-weight: 600;
  text-align: right;
}

.line-note,
.line-src,
.line-flag {
  grid-column: 2 / -1;
  margin-top: 4px;
  font-size: 12px;
}

.line-note {
  color: var(--text-muted);
}

.line-src {
  color: var(--blue);
}

.line-flag {
  margin-top: 8px;
  padding: 6px 10px;
  border-left: 3px solid var(--warning-accent);
  background: var(--warning-soft);
  color: var(--warning);
  font-size: 13px;
}

.sheet-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin: 0 18px;
  padding: 14px 0;
  border-top: 2px solid var(--text);
  font-weight: 700;
}

.sheet-sum {
  font-family: var(--mono);
  font-size: 18px;
  font-variant-numeric: tabular-nums;
}

.sheet-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 4px 18px 18px;
}

.stamp {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.fake-btn {
  padding: 8px 18px;
  background: var(--blue);
  color: var(--white);
  font-size: 14px;
  font-weight: 650;
}

.sheet-caption {
  margin-top: 10px;
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--on-ink-muted);
  text-align: right;
}

/* Dimension line, drawn the way a technical drawing measures a length: extension lines,
   arrowheads at both ends and the value written across the line. */
.dimension {
  position: absolute;
  left: -56px;
  top: 20px;
  bottom: -20px;
  width: 56px;
  --dim: var(--brand);
}

.dimension::before,
.dimension::after {
  content: "";
  position: absolute;
  left: 6px;
  right: 0;
  border-top: 1px solid var(--dim);
}

.dimension::before {
  top: 0;
}

.dimension::after {
  bottom: 0;
}

.dim-line {
  position: absolute;
  left: 20px;
  top: 0;
  bottom: 0;
  border-left: 1px solid var(--dim);
  transform-origin: top;
}

.dim-line::before,
.dim-line::after {
  content: "";
  position: absolute;
  left: -5px;
  border-left: 4.5px solid transparent;
  border-right: 4.5px solid transparent;
}

.dim-line::before {
  top: 0;
  border-bottom: 11px solid var(--dim);
}

.dim-line::after {
  bottom: 0;
  border-top: 11px solid var(--dim);
}

.dim-label {
  position: absolute;
  left: 20px;
  top: 50%;
  padding: 3px 7px;
  background: var(--ink);
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--white);
  white-space: nowrap;
  transform: translate(-50%, -50%) rotate(-90deg);
}

/* Sections */
.section {
  padding: 96px 0;
}

.section-white {
  background: var(--white);
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}

.section-dark {
  background: var(--ink);
  color: var(--white);
}

.section-head h2 {
  font-size: clamp(28px, 3.2vw, 44px);
  line-height: 1.08;
  max-width: 17em;
  text-wrap: balance;
}

.section-lead {
  margin-top: 18px;
  font-size: 18px;
  color: var(--text-2);
  max-width: 34em;
}

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 72px;
  align-items: center;
}

.split-top {
  align-items: start;
}

/* 01 Process: numbered like the operations of a work cycle. */
.ops {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 56px;
  padding: 0;
  list-style: none;
  border-top: 2px solid var(--text);
}

.op {
  position: relative;
  padding: 28px 28px 0 0;
}

.op + .op {
  padding-left: 28px;
  border-left: 1px solid var(--line);
}

.op::before {
  content: "";
  position: absolute;
  top: -7px;
  left: 0;
  width: 12px;
  height: 12px;
  background: var(--text);
}

.op + .op::before {
  left: -6px;
}

.op-n {
  display: block;
  margin-bottom: 14px;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--blue);
}

.op h3 {
  margin-bottom: 10px;
  font-size: 23px;
  font-weight: 750;
  font-stretch: 88%;
  line-height: 1.15;
}

.op p {
  font-size: 16px;
  color: var(--text-2);
}

/* 02 Sources */
.points {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px 32px;
  margin-top: 40px;
}

.points dt {
  padding-top: 10px;
  border-top: 2px solid var(--blue);
  font-family: var(--mono);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blue);
}

.points dd {
  margin-top: 6px;
  font-size: 16px;
  color: var(--text-2);
}

.detail {
  padding: 24px 28px 28px;
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 4px solid var(--blue);
}

.detail-head {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line-soft);
}

.detail-head .label {
  margin: 0;
}

.detail-head strong {
  font-size: 21px;
  font-weight: 700;
}

.detail-title {
  margin: 22px 0 6px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.calc {
  padding: 0;
  list-style: none;
  counter-reset: step;
  font-family: var(--mono);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

.calc li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 0;
  border-bottom: 1px dashed var(--line);
  counter-increment: step;
}

.calc li > span:first-child {
  position: relative;
  padding-left: 24px;
}

.calc li > span:first-child::before {
  content: counter(step) ".";
  position: absolute;
  left: 0;
  color: var(--text-muted);
}

.calc li > span:last-child {
  white-space: nowrap;
}

.calc .calc-total {
  border-bottom: 0;
  border-top: 2px solid var(--text);
  margin-top: -1px;
  font-weight: 600;
}

.sources {
  padding: 0;
  list-style: none;
}

.sources li {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: 15px;
}

.sources li:last-child {
  border-bottom: 0;
}

.tag {
  flex: none;
  min-width: 58px;
  padding: 1px 6px;
  border: 1px solid var(--blue-border);
  background: var(--blue-soft);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  text-align: center;
  text-transform: uppercase;
  color: var(--blue-strong);
}

/* 03 Datasheet */
.spec {
  margin-top: 48px;
  border-top: 1px solid var(--ink-border);
}

.spec > div {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 24px;
  padding: 18px 0;
  border-bottom: 1px solid var(--ink-line);
}

.spec dt {
  padding-top: 3px;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-ink-muted);
}

.spec dd {
  font-size: 19px;
  color: var(--white);
}

/* 04 Who it is for: a parts list. */
.parts {
  padding: 0;
  list-style: none;
  border-top: 2px solid var(--text);
}

.parts li {
  display: flex;
  align-items: baseline;
  gap: 18px;
  padding: 15px 0;
  border-bottom: 1px solid var(--line);
  font-size: 19px;
  font-weight: 600;
}

.parts span {
  flex: none;
  width: 28px;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 400;
  color: var(--text-muted);
}

.rules {
  margin-top: 36px;
  padding: 18px 22px 8px;
  background: var(--white);
  border: 1px solid var(--line);
  max-width: 520px;
}

.rules-title {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* 05 Prices */
.plans {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin-top: 48px;
}

.plan {
  display: flex;
  flex-direction: column;
  padding: 30px 32px 32px;
  background: var(--white);
  border: 1px solid var(--line);
}

.plan-main {
  border: 2px solid var(--ink);
}

.plan h3 {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.price {
  margin-top: 10px;
  font-size: 16px;
  color: var(--text-muted);
}

.plan-flag {
  margin-left: 8px;
  padding: 2px 6px;
  border: 1px solid var(--blue);
  color: var(--blue);
  font-size: 11px;
  letter-spacing: 0.06em;
}

.price strong {
  margin-right: 4px;
  font-size: 48px;
  line-height: 1;
  color: var(--text);
}

.price-text strong {
  display: inline-block;
  padding: 7px 0 6px;
  font-size: 38px;
}

.plan-for {
  margin-top: 8px;
  color: var(--text-2);
}

.plan ul {
  margin: 22px 0 30px;
  padding: 0;
  list-style: none;
}

.plan li {
  position: relative;
  padding: 10px 0 10px 22px;
  border-top: 1px solid var(--line-soft);
  font-size: 16px;
}

.plan li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 18px;
  width: 7px;
  height: 7px;
  background: var(--blue);
}

.plan .btn {
  align-self: flex-start;
  margin-top: auto;
}

/* 06 Questions */
.faq {
  border-top: 2px solid var(--text);
}

.faq details {
  border-bottom: 1px solid var(--line);
}

.faq summary {
  position: relative;
  padding: 18px 44px 18px 0;
  font-size: 18px;
  font-weight: 650;
  cursor: pointer;
  list-style: none;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: "+";
  position: absolute;
  right: 4px;
  top: 14px;
  font-family: var(--mono);
  font-size: 22px;
  font-weight: 400;
  color: var(--blue);
}

.faq details[open] summary::after {
  content: "\2212";
}

.faq details p {
  max-width: 40em;
  padding-bottom: 20px;
  color: var(--text-2);
}

/* Closing call to action */
.cta {
  padding: 80px 0;
  background-color: var(--ink);
  background-image: var(--grid-major), var(--grid-fine);
  color: var(--white);
}

.cta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}

.cta h2 {
  font-size: clamp(26px, 2.9vw, 40px);
  line-height: 1.08;
  max-width: 15em;
  text-wrap: balance;
}

.cta p {
  margin-top: 14px;
  max-width: 36em;
  color: var(--on-ink-soft);
}

.cta .actions {
  flex: none;
}

/* Footer */
.foot {
  padding: 56px 0 28px;
  background: var(--ink-deep);
  color: var(--on-ink-muted);
  font-size: 15px;
}

.foot-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 32px;
}

.foot .logo {
  display: inline-block;
}

.foot .logo img {
  height: 26px;
}

.foot-grid p {
  margin-top: 8px;
}

.foot nav {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.foot nav a {
  color: var(--on-ink-soft);
  text-decoration: none;
}

.foot nav a:hover {
  color: var(--white);
  text-decoration: underline;
}

.foot-legal {
  margin-top: 44px;
}

.foot-legal p {
  padding-top: 20px;
  border-top: 1px solid var(--ink-line);
  font-size: 14px;
}

/* The example draft writes itself once: lines, total, then the dimension line. */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }

  .sheet-lines .line,
  .sheet-total,
  .sheet-foot {
    animation: write 0.45s ease-out both;
  }

  .sheet-lines .line:nth-child(1) {
    animation-delay: 0.5s;
  }

  .sheet-lines .line:nth-child(2) {
    animation-delay: 0.9s;
  }

  .sheet-lines .line:nth-child(3) {
    animation-delay: 1.3s;
  }

  .sheet-total {
    animation-delay: 1.7s;
  }

  .sheet-foot {
    animation-delay: 1.9s;
  }

  .dim-line {
    animation: measure 0.7s ease-out 0.2s both;
  }

  .dimension::after,
  .dim-label {
    animation: appear 0.3s ease-out 0.9s both;
  }

  @keyframes write {
    from {
      opacity: 0;
      transform: translateY(6px);
    }
  }

  @keyframes measure {
    from {
      transform: scaleY(0);
    }
  }

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

/* Layout steps: laptop, tablet, phone. */
@media (max-width: 1040px) {
  .hero-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 56px;
  }

  .sheet-area {
    max-width: 620px;
  }

  .split {
    gap: 48px;
  }
}

@media (max-width: 880px) {
  .top-nav {
    display: none;
  }

  .ops {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 40px;
  }

  .op:nth-child(3) {
    padding-left: 0;
    border-left: 0;
  }

  .op:nth-child(3)::before {
    left: 0;
  }

  .split {
    grid-template-columns: minmax(0, 1fr);
  }

  .plans {
    grid-template-columns: minmax(0, 1fr);
  }

  .spec > div {
    grid-template-columns: 170px minmax(0, 1fr);
  }

  .cta-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .foot-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 600px) {
  body {
    font-size: 16px;
  }

  .wrap {
    padding: 0 16px;
  }

  .top-row {
    gap: 12px;
    height: 58px;
  }

  .logo img {
    height: 24px;
  }

  .top-actions {
    gap: 14px;
  }

  .hero {
    padding: 48px 0 56px;
  }

  .lead {
    font-size: 17px;
  }

  .hero .actions .btn {
    flex: 1 1 auto;
  }

  .sheet-area {
    padding-left: 0;
  }

  .dimension {
    display: none;
  }

  .sheet-bar,
  .sheet-request,
  .sheet-foot {
    padding-left: 14px;
    padding-right: 14px;
  }

  .sheet-lines {
    padding: 0 14px;
  }

  .sheet-total {
    margin: 0 14px;
  }

  .line {
    grid-template-columns: 16px minmax(0, 1fr) auto;
    column-gap: 10px;
  }

  .line-desc {
    grid-column: 2;
    grid-row: 1;
  }

  .line-tot {
    grid-column: 3;
    grid-row: 1;
    min-width: 0;
  }

  .line-qty {
    grid-column: 2 / -1;
    grid-row: 2;
  }

  .stamp {
    font-size: 10.5px;
  }

  .section {
    padding: 64px 0;
  }

  .section-lead {
    font-size: 17px;
  }

  .ops {
    grid-template-columns: minmax(0, 1fr);
    margin-top: 40px;
    row-gap: 0;
    border-top: 0;
    border-left: 2px solid var(--text);
  }

  .op,
  .op + .op,
  .op:nth-child(3) {
    padding: 0 0 32px 24px;
    border-left: 0;
  }

  .op:last-child {
    padding-bottom: 4px;
  }

  .op::before,
  .op + .op::before,
  .op:nth-child(3)::before {
    top: 4px;
    left: -7px;
  }

  .points {
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
  }

  .detail {
    padding: 20px 16px 22px;
  }

  .calc {
    font-size: 13px;
  }

  .spec {
    margin-top: 36px;
  }

  .spec > div {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
    padding: 16px 0;
  }

  .spec dd {
    font-size: 17px;
  }

  .parts li {
    font-size: 17px;
    padding: 13px 0;
  }

  .plan {
    padding: 24px 20px;
  }

  .price strong {
    font-size: 40px;
  }

  .faq summary {
    font-size: 17px;
  }

  .cta {
    padding: 56px 0;
  }

  .foot-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 28px 16px;
  }

  .foot-grid > div {
    grid-column: 1 / -1;
  }

  .rules {
    padding: 14px 16px 4px;
  }
}

/* 404, thank-you and error pages: one dark screen, no light strip under it. */
body:has(> .hero-short) {
  background: var(--ink);
}

.hero-short {
  min-height: calc(100vh - 64px);
  padding: 120px 0;
}

/* Contact page: the form is a white sheet on the dark drawing, like the example quote. */
.contact {
  padding: 72px 0 96px;
}

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 64px;
  align-items: start;
}

.next-steps {
  margin-top: 8px;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--ink-line);
}

.next-steps li {
  display: flex;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--ink-line);
  color: var(--on-ink-soft);
}

.next-steps span {
  flex: none;
  font-family: var(--mono);
  font-weight: 700;
  color: var(--brand);
}

.form-sheet {
  background: var(--white);
  color: var(--text);
  border: 1px solid var(--ink-deep);
}

.form-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 18px 20px;
  padding: 24px 24px 8px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.field-wide {
  grid-column: 1 / -1;
}

.field label {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.field label span {
  margin-left: 6px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 46px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 0;
  background: var(--white);
  color: var(--text);
  font: inherit;
  font-size: 16px;
}

.field select {
  appearance: none;
  padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23536575' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}

.field textarea {
  resize: vertical;
}

.field input::placeholder,
.field textarea::placeholder {
  color: #8796a3;
}

.field input:hover,
.field select:hover,
.field textarea:hover {
  border-color: var(--line-strong);
}

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

/* Only bots fill this field: people never see it. */
.field-trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 20px;
  padding: 16px 24px 24px;
}

.form-foot p {
  font-size: 14px;
  color: var(--text-muted);
}

@media (max-width: 1040px) {
  .contact-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }

  .form-sheet {
    max-width: 720px;
  }
}

@media (max-width: 600px) {
  .hero-short {
    padding: 56px 0;
  }

  .contact {
    padding: 40px 0 56px;
  }

  .form-fields {
    grid-template-columns: minmax(0, 1fr);
    padding: 18px 16px 4px;
  }

  .form-foot {
    padding: 14px 16px 18px;
  }

  .form-foot .btn {
    width: 100%;
  }
}