/* ==========================================================================
   Oh Fax — shared styles
   Depends on tokens.css. One breakpoint: 900px (desktop grid ↔ single column).
   No labels, kickers or captions: headlines, body copy and the price carry the
   page. All text is --ink (or --error in the error state), 16px or larger;
   the MCP command box (15px) is the only exception.
   Sections:
     1. Base            7. Header / footer      13. Data tables
     2. Links + focus   8. Buttons              14. Compare (restacking tables)
     3. Utilities       9. Sections             15. Send form + error state
     4. Layout + grid  10. Hero                 16. Mobile
     5. Type roles     11. Lists (steps, facts)    17. Art
     6. (removed)      12. Command box, link lists 18. Focus (last)
   ========================================================================== */

/* 1. Base ------------------------------------------------------------------ */
*,
*::before,
*::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-weight: var(--wt-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-optical-sizing: auto;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, p, ol, ul, dl, dd, figure, pre { margin: 0; }
ol, ul { padding: 0; }
img { max-width: 100%; display: block; }

/* 2. Links + focus ---------------------------------------------------------- */
a {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
a:hover { color: var(--amber); }

/* Amber ring everywhere. Amber is 2.7:1 on paper, so focus never relies on it
   alone: focused links get a 2px ink underline (section 18, last in the file so
   no later text-decoration rule cancels it), the button gets an underline, and
   fields get an ink border. */
:focus { outline: none; }
:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

/* 3. Utilities -------------------------------------------------------------- */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: var(--side-pad);
  top: var(--s-1);
  z-index: 10;
  padding: var(--s-1) var(--s-2);
  background: var(--ink);
  color: var(--paper);
  font: 500 var(--fs-16)/var(--lh-16) var(--ui);
  transform: translateY(-200%);
}
.skip-link:focus-visible { transform: none; color: var(--paper); }

/* 4. Layout + grid ----------------------------------------------------------
   One strong column on the left edge, aligned with the mark. Text sits in
   columns 1–8 (capped at --measure); hero headlines may run to column 10;
   tables use the full width. */
.wrap {
  max-width: calc(var(--content-max) + 2 * var(--side-pad));
  margin-inline: auto;
  padding-inline: var(--side-pad);
}

.grid {
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  column-gap: var(--gutter);
}
.grid > * { min-width: 0; grid-column: 1 / 9; }   /* default: columns 1–8 */
.grid > .col-wide { grid-column: 1 / 11; }       /* columns 1–10 */
.grid > .col-full { grid-column: 1 / -1; }

/* 5. Type roles ------------------------------------------------------------- */
.display {
  font-weight: var(--wt-display);
  font-size: var(--fs-hero);
  line-height: var(--lh-hero);
  letter-spacing: var(--track-display);
  text-wrap: balance;
}

.title {
  font-weight: var(--wt-display);
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--track-display);
}

/* Section headline (h2). Headlines do the work the old labels did. */
.lead {
  font-weight: var(--wt-display-2);
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  letter-spacing: var(--track-display);
  max-width: 24em;
  text-wrap: balance;
}

.dek {
  font-size: var(--fs-22);
  line-height: var(--lh-22);
  max-width: 28em;
}

.prose > * + * { margin-top: var(--s-3); }
.prose p,
.prose ol { max-width: var(--measure); }

/* Literal code only: the MCP command and paths like /pay. */
code {
  font-family: var(--mono);
  font-size: max(var(--fs-16), 0.85em);  /* never below 16px inline */
}

.num { font-variant-numeric: lining-nums tabular-nums; }

/* 7. Header / footer ---------------------------------------------------------
   Identical markup on every page; only aria-current changes. Nav is body-font
   text at 18px. */
.site-header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  column-gap: var(--s-4);
  row-gap: var(--s-2);
  padding-block: var(--s-3);
  border-bottom: var(--hairline);
}

.mark {
  font-family: var(--serif);
  font-weight: 600;
  font-size: var(--fs-22);
  line-height: var(--lh-22);
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
}
.mark span { margin-right: 0.15em; }

.site-nav ul,
.footer-links {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--s-4);
  row-gap: var(--s-1);
  list-style: none;
  font-size: var(--fs-18);
  line-height: var(--lh-18);
}
.site-nav a,
.footer-links a { text-decoration: none; }
.site-nav a:hover,
.site-nav a[aria-current="page"],
.footer-links a:hover { text-decoration-line: underline; }
.site-nav .nav-cta { font-weight: var(--wt-display-2); }
/* Send pages swap the primary link on phones: "Track a fax →" replaces the
   link to the page you are already on (section 16). */
.site-nav .nav-mobile { display: none; }

.site-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: var(--s-6);
  row-gap: var(--s-2);
  padding-block: var(--s-6) var(--s-8);
  border-top: var(--hairline);
}
.footer-links { column-gap: var(--s-3); }

/* 8. Buttons ---------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-1);
  height: var(--btn-h);
  padding-inline: var(--s-3);
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  background: var(--ink);
  color: var(--paper);
  font-family: var(--ui);
  font-weight: 500;
  font-size: var(--fs-16);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.btn:hover,
.btn:focus-visible {
  color: var(--paper);
  text-decoration-line: underline;
  text-underline-offset: 0.25em;
}

/* Disabled: outline style. The fill is dropped and the label turns ink on
   paper, so it no longer reads as the primary action — but the label keeps
   full contrast (15.5:1). Dimming the whole button with opacity would make
   the label gray, which this design never uses for text. */
.btn:disabled,
.btn[aria-disabled="true"] {
  background: transparent;
  color: var(--ink);
  border-style: dashed;
  cursor: not-allowed;
  text-decoration-line: none;
}

/* Quiet text-style control (e.g. "Replace"). */
.btn-text {
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  font-family: var(--ui);
  font-weight: 500;
  font-size: var(--fs-16);
  line-height: var(--lh-16);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  cursor: pointer;
}
.btn-text:hover { color: var(--amber); }

/* 9. Sections --------------------------------------------------------------
   One hairline between sections; none inside them unless it separates rows
   of data. Each section opens with its headline. */
.section { padding-block: var(--section-pad); }
.section + .section { border-top: var(--hairline); }

.section-body > * + * { margin-top: var(--s-5); }
.section-body > .lead + * { margin-top: var(--s-4); }

/* 10. Hero ------------------------------------------------------------------ */
.hero .display { margin-bottom: var(--s-4); }
.hero .dek + .price-line { margin-top: var(--s-6); }
.hero .price-line + .dek { margin-top: var(--s-4); }

/* The price is the hero fact. It stays ink, not amber: amber measures 2.7:1 on
   paper and would fail contrast; the size already makes it the loudest line. */
.price-line {
  font-weight: var(--wt-display-2);
  font-size: var(--fs-price);
  line-height: var(--lh-price);
  letter-spacing: var(--track-display);
  font-variant-numeric: lining-nums tabular-nums;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-4);
  margin-top: var(--s-6);
}

/* 11. Lists ----------------------------------------------------------------- */
/* Numbered steps: "01" in the body serif, no circles. */
.steps { list-style: none; max-width: var(--measure); }
.steps li {
  display: grid;
  grid-template-columns: var(--s-6) minmax(0, 1fr);
  align-items: baseline;
}
.steps li + li { margin-top: var(--s-3); }
.steps-n { font-variant-numeric: lining-nums tabular-nums; }
.steps-t { font-weight: var(--wt-display-2); }

/* Definition list: a term in serif, its explanation underneath. */
.facts > div + div { margin-top: var(--s-4); }
.facts dt {
  font-weight: var(--wt-display-2);
  font-size: var(--fs-22);
  line-height: var(--lh-22);
  letter-spacing: -0.01em;
}
.facts dd {
  margin-top: var(--s-1);
  max-width: var(--measure);
}

/* 12. Command box, link lists ----------------------------------------------- */
.cmd pre {
  max-width: 100%;
  overflow-x: auto;              /* long commands scroll inside the box, not the page */
  padding: var(--s-2) var(--s-3);
  border: var(--hairline);
  border-radius: var(--radius);
  background: var(--paper-raised);
  font-family: var(--mono);
  font-size: var(--fs-15);
  line-height: var(--lh-15);
  white-space: pre;
}
.cmd code { font-size: inherit; }
.prose p + .cmd { margin-top: var(--s-2); }

.link-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1) var(--s-4);
}

/* "Read next": two large links, a sentence under each. */
.next {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-5) var(--gutter);
}
.next a {
  display: inline-block;
  font-weight: var(--wt-display-2);
  font-size: var(--fs-30);
  line-height: var(--lh-30);
  letter-spacing: var(--track-display);
  text-decoration: none;
}
.next a:hover { text-decoration-line: underline; }
.next p { margin-top: var(--s-1); }

/* Sources: long URLs wrap instead of widening the page. */
.sources {
  padding-left: 1.5em;
  max-width: var(--measure);
  overflow-wrap: anywhere;
}
.sources li + li { margin-top: var(--s-1); }

/* 13. Data tables ------------------------------------------------------------
   Body size throughout; headers are ink, weight 600. */
.table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: lining-nums tabular-nums;
}
.table th,
.table td {
  padding: var(--s-2) var(--gutter) var(--s-2) 0;
  text-align: left;
  vertical-align: baseline;
  border-bottom: var(--hairline);
}
.table th:last-child,
.table td:last-child { padding-right: 0; }
.table th { font-weight: 600; }
.table thead th {
  padding-top: 0;
  vertical-align: bottom;
  border-bottom-color: var(--ink);
}
.table .r { text-align: right; }

/* A visible caption reads as a small headline above the table. */
.table caption {
  caption-side: top;
  padding-bottom: var(--s-3);
  text-align: left;
  font-weight: var(--wt-display-2);
  font-size: var(--fs-22);
  line-height: var(--lh-22);
  letter-spacing: -0.01em;
}

/* Pricing examples: narrow, figures right-aligned. */
.table--examples { max-width: 28em; }
.table--examples tbody th { font-weight: var(--wt-body); }
.table--examples td.r { font-size: var(--fs-22); }

/* 14. Compare ----------------------------------------------------------------
   One source of truth: each table exists once. Desktop is a normal table;
   below 900px (section 16) every row restacks into a block and each cell
   shows its column header from data-label. */
.compare { table-layout: fixed; }
.compare tbody th { font-weight: 600; }
.compare a { overflow-wrap: anywhere; }

/* Oh Fax row: a raised-paper band so it is easy to find; no color. Text stays
   on the column edge; the band extends 16px into the side padding instead. */
.compare .us > * { background: var(--paper-raised); }
.compare .us > :first-child { box-shadow: calc(-1 * var(--s-2)) 0 0 var(--paper-raised); }
.compare .us > :last-child { box-shadow: var(--s-2) 0 0 var(--paper-raised); }

/* Column widths (desktop). */
.compare--prices col.c-provider { width: 13%; }
.compare--prices col.c-ten      { width: 15%; }
.compare--prices col.c-fax      { width: 19%; }
.compare--prices col.c-page     { width: 16%; }
.compare--prices col.c-sub      { width: 25%; }
.compare--prices col.c-source   { width: 12%; }
.compare--features col.c-provider { width: 18%; }

/* 15. Send form + error state ------------------------------------------------ */
.app { padding-block: var(--s-10) var(--s-15); }
.app-intro { margin-bottom: var(--s-8); }
.app-intro .title { margin-bottom: var(--s-2); }
.app-intro p { max-width: var(--measure); }

.field + .field { margin-top: var(--s-8); }
.field-label {
  display: block;
  margin-bottom: var(--s-2);
  font-family: var(--ui);
  font-weight: 500;
  font-size: var(--fs-16);
  line-height: var(--lh-16);
}

/* Document drop zone, showing a selected file. */
.file {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2) var(--s-3);
  padding: var(--s-3);
  border: var(--hairline);
  border-radius: var(--radius);
  background: var(--paper-raised);
}
.file:focus-within { border-color: var(--ink); }
.file-name {
  font-weight: var(--wt-display-2);
  font-size: var(--fs-22);
  line-height: var(--lh-22);
  overflow-wrap: anywhere;
}
.file-meta { margin-top: var(--s-1); }
.file input[type="file"] { /* real input, visually hidden; "Replace" is its label */
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
}
.file input[type="file"]:focus-visible + .btn-text {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

/* Fax number: large serif input. */
.input-fax {
  display: block;
  width: 100%;
  height: 72px;
  padding: 0 var(--s-3);
  border: var(--hairline);
  border-radius: var(--radius);
  background: var(--paper-raised);
  color: var(--ink);
  font-family: var(--serif);
  font-weight: var(--wt-display-2);
  font-size: var(--fs-30);
  letter-spacing: -0.01em;
  font-variant-numeric: lining-nums tabular-nums;
}
.input-fax:focus-visible { border-color: var(--ink); }

/* Error state: --error border (2px, drawn inside so nothing shifts) and a
   body-size message underneath. --error is 6.6:1 on paper. */
.input-fax[aria-invalid="true"] {
  border-color: var(--error);
  box-shadow: inset 0 0 0 1px var(--error);
}
.field-error {
  margin-top: var(--s-1);
  max-width: var(--measure);
  color: var(--error);
}

/* Price: one sentence, then the arithmetic. */
.quote {
  font-weight: var(--wt-display-2);
  font-size: var(--fs-30);
  line-height: var(--lh-30);
  letter-spacing: var(--track-display);
  font-variant-numeric: lining-nums tabular-nums;
}
.breakdown { max-width: 26em; margin-top: var(--s-3); }
.breakdown th,
.breakdown td { padding-block: var(--s-1); }
.breakdown tbody th { font-weight: var(--wt-body); }
.breakdown .total th,
.breakdown .total td {
  font-weight: 600;
  border-bottom: 0;
}

.pay {
  margin-top: var(--s-8);
  padding-top: var(--s-5);
  border-top: var(--hairline);
}
.pay p { max-width: var(--measure); margin-bottom: var(--s-4); }
.pay .btn { min-width: 16em; }

/* 17. Art ---------------------------------------------------------------------
   One drawn piece per page, never scattered decoration, never captioned. The
   files live in ./art/ beside the scripts that generate them.
   Home hero: text in columns 1–7, the piece in 8–12. Pricing and compare: a
   small detail of the same piece in columns 9–12. */
.hero--art { align-items: center; }
.hero--art > .hero-text { grid-column: 1 / 8; }
.hero--art > .hero-art { grid-column: 8 / -1; }

.hero-art { margin: 0; }
.hero-art img { display: block; width: 100%; height: auto; }


/* Each price sentence stays on one line; the two break between them.
   Below 380px the sentences are too long for one line, so they wrap. */
.price-part { white-space: nowrap; }
@media (max-width: 379.98px) { .price-part { white-space: normal; } }

.hero--plate > .col-wide { grid-column: 1 / 9; }
.hero--plate > .plate {
  grid-column: 9 / -1;
  justify-self: end;
  align-self: end;
}
.plate { margin: 0; }
.plate img { display: block; max-width: 100%; height: auto; }

/* 16. Mobile ---------------------------------------------------------------- */
@media (max-width: 899.98px) {
  .grid { grid-template-columns: minmax(0, 1fr); }
  .grid > *,
  .grid > .col-wide,
  .grid > .col-full { grid-column: 1 / -1; }

  /* One line: mark left, the primary link right. Secondary links are in the footer. */
  .site-header { flex-wrap: nowrap; padding-block: var(--s-2); }
  .site-nav .nav-more,
  .site-nav .nav-desktop { display: none; }
  .site-nav .nav-mobile { display: list-item; }
  .site-nav a { white-space: nowrap; }

  .btn { width: 100%; }
  .actions { margin-top: var(--s-5); }
  .hero .dek + .price-line { margin-top: var(--s-5); }

  .next { grid-template-columns: minmax(0, 1fr); }
  .cmd pre { padding: var(--s-2); }

  /* Compare tables restack: each row is a block, the provider name is its
     heading, and each cell is preceded by its column header (data-label),
     in body-size ink, weight 600. The header row is hidden visually only. */
  .compare,
  .compare tbody,
  .compare tr,
  .compare th,
  .compare td { display: block; width: auto; }
  .compare caption { display: block; }
  .compare thead {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }
  .compare tr {
    padding-block: var(--s-3);
    border-bottom: var(--hairline);
  }
  .compare tbody tr:first-child { border-top: 1px solid var(--ink); }
  .compare th,
  .compare td {
    padding: 0;
    border: 0;
  }
  .compare tbody th {
    margin-bottom: var(--s-1);
    font-weight: var(--wt-display-2);
    font-size: var(--fs-22);
    line-height: var(--lh-22);
  }
  .compare td + td { margin-top: var(--s-1); }
  .compare td::before {
    content: attr(data-label) ": ";
    font-weight: 600;
  }
  .compare .us { padding-inline: var(--s-2); background: var(--paper-raised); }
  .compare .us > * { background: none; box-shadow: none; }

  .app { padding-block: var(--s-5) var(--s-8); }
  .app-intro { margin-bottom: var(--s-6); }
  .field + .field { margin-top: var(--s-6); }
  .input-fax { height: 64px; padding-inline: var(--s-2); font-size: var(--fs-22); }
  .file { padding: var(--s-2); }
  .pay .btn { min-width: 0; }

  /* Art: the home piece goes full-bleed under the price, at a fixed crop
     (phone-specific SVG crops via <picture>; the dither crops at 1:1 dots). */
  .hero--art > .hero-text,
  .hero--art > .hero-art { grid-column: 1 / -1; }
  .hero-art { margin: var(--s-6) calc(-1 * var(--side-pad)) 0; }
  .hero--plate > .col-wide,
  .hero--plate > .plate { grid-column: 1 / -1; justify-self: start; }
  .plate { margin-top: var(--s-6); }
}

/* 18. Focus (last) -------------------------------------------------------------
   Kept at the end of the file: nav, footer, mark and "Read next" links set
   text-decoration: none with the same or higher specificity earlier on, and
   this rule has to win over all of them. */
a:focus-visible,
.site-nav a:focus-visible,
.footer-links a:focus-visible,
.next a:focus-visible {
  text-decoration-line: underline;
  text-decoration-thickness: 2px;
}

.doc { padding-block: var(--section-pad); }
.doc-body { overflow-wrap:anywhere; }
.doc-body > * + * { margin-top:var(--s-3); }
.doc-body h2 { font-size:var(--fs-lead); line-height:var(--lh-lead); font-weight:500; margin-top:var(--s-8); }
.doc-body h3 { font-size:var(--fs-22); line-height:var(--lh-22); }
.doc-body ul,.doc-body ol { padding-left:var(--s-3); }
.doc-body pre { overflow:auto; padding:var(--s-2); background:var(--paper-raised); font-size:var(--fs-16); }
.doc-body table { width:100%; border-collapse:collapse; }
.doc-body th,.doc-body td { padding:var(--s-1); border-bottom:var(--hairline); text-align:left; overflow-wrap:anywhere; }
.docs-nav { display:flex; flex-wrap:wrap; gap:var(--s-2); }

.docs-nav ul { list-style:none; display:flex; flex-wrap:wrap; gap:var(--s-2) var(--s-3); padding:0; }
.docs-nav a[aria-current="page"] { text-decoration-thickness:2px; }

@media (max-width: 640px) {
  .hero--compare { padding-bottom: var(--s-5); }
}