/* ==========================================================================
   Send Letters Online — "Exchange"
   British corporate navy with a Union-red accent. Hand-written, no build step.

   Two rules learned the hard way and enforced throughout:

   1. Any element sitting on a dark ground states its own colour explicitly.
      Inherited white text on a white card is invisible.
   2. Navigation link rules are scoped with :not(.btn). Without it a rule like
      `.site-nav a` (0-1-1) outranks `.btn--primary` (0-1-0) and paints link
      colour onto the call-to-action.
   ========================================================================== */

:root {
  /* Brand */
  --navy:        #0B2E5B;
  --navy-dk:     #071F3E;
  --navy-lt:     #164B8F;
  --steel:       #2C6BB3;
  --ice:         #8FB6DE;

  --red:         #C8102E;
  --red-dk:      #A20D25;
  --red-tint:    #FBE9EC;

  /* Surfaces — blue-biased neutrals, never a flat grey */
  --ground:      #EBF0F6;
  --surface:     #FFFFFF;
  --tint:        #E7EEF7;
  --tint-2:      #D3E0EF;

  /* Type — near-black body; muted clears AA at 4.5:1 on every ground here */
  --ink:         #101D2E;
  --ink-2:       #1A2432;
  --muted:       #48566B;

  /* On dark grounds */
  --on-dark:     #FFFFFF;
  --on-dark-2:   #D5E1EF;
  --on-dark-3:   #C3D2E6;
  --on-dark-4:   #9FB4D0;

  --rule:        #C9D5E3;
  --rule-2:      #E0E7EF;

  --ok:          #0E6B47;

  --r:           5px;
  --r-lg:        8px;
  --shadow:      0 18px 40px -20px rgba(7, 31, 62, .55);

  --container:   1220px;
  --gutter:      22px;

  --font:        Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono:        "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font);
  font-size: 15.5px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

h1, h2, h3, h4 {
  margin: 0 0 .3em;
  font-weight: 800;
  letter-spacing: -.028em;
  line-height: 1.1;
  text-wrap: balance;
}
h1 { font-size: clamp(30px, 3.5vw, 42px); line-height: 1.05; }
h2 { font-size: clamp(20px, 2.2vw, 26px); }
h3 { font-size: 15.5px; font-weight: 700; }
h4 { font-size: 14px; font-weight: 700; }
p  { margin: 0 0 .65rem; }

a { color: var(--steel); text-underline-offset: 2px; }
a:hover { color: var(--navy); }

:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
  border-radius: 3px;
}

img { max-width: 100%; height: auto; }
.mono { font-family: var(--mono); }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--navy); color: #fff; padding: 10px 16px;
}
.skip-link:focus { left: 0; color: #fff; }

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

/* ------------------------------------------------------------------ layout */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.site-main { flex: 1 0 auto; }

.eyebrow {
  font-family: var(--mono);
  font-size: 10px; font-weight: 500;
  letter-spacing: .17em; text-transform: uppercase;
  color: var(--red);
  margin: 0 0 8px;
}

section { padding: 34px 0; }
.band-tint  { background: var(--tint); }
.band-white { background: var(--surface); border-block: 1px solid var(--rule); }
.band-navy  { background: var(--navy); color: var(--on-dark); }
.band-navy h2, .band-navy h3 { color: var(--on-dark); }
.band-navy p { color: var(--on-dark-2); }

.sec-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 16px;
}
.sec-head p { margin: 0; font-size: 14px; color: var(--muted); }
.band-navy .sec-head p { color: var(--on-dark-3); }

/* ------------------------------------------------------------------ header */

.site-header {
  background: var(--surface);
  border-bottom: 3px solid var(--red);
  position: sticky; top: 0; z-index: 30;
}
.site-header__inner { display: flex; align-items: center; gap: 18px; min-height: 60px; }

.brand {
  display: flex; align-items: center; gap: 10px;
  color: var(--ink); text-decoration: none; white-space: nowrap;
}
.brand__mark { display: flex; flex: none; }
.brand__mark .logo-mark { display: block; }

.brand__words { display: flex; flex-direction: column; line-height: 1.1; }
.brand__name {
  font-weight: 800; font-size: 15.5px; letter-spacing: -.03em; color: inherit;
}
.brand__tagline {
  font-size: 11px; font-weight: 500; letter-spacing: .01em;
  color: var(--muted); margin-top: 2px;
}
.site-footer .brand__tagline { color: var(--on-dark-3); }

/* The envelope outline takes currentColor, so it reads on either ground. */
.site-header .brand { color: var(--navy); }
.site-header .brand__name { color: var(--ink); }
.site-footer .brand { color: #fff; }

.site-nav { margin-left: auto; display: flex; align-items: center; gap: 2px; flex-wrap: wrap; }

/* :not(.btn) is load-bearing — see the note at the top of this file. */
.site-nav a:not(.btn) {
  color: var(--ink-2); text-decoration: none;
  font-size: 13.5px; font-weight: 600;
  padding: 6px 9px; border-radius: var(--r);
  white-space: nowrap;
}
.site-nav a:not(.btn):hover,
.site-nav a:not(.btn)[aria-current="page"] { background: var(--tint); color: var(--navy); }

/* ----------------------------------------------------------------- buttons */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  font: inherit; font-size: 14px; font-weight: 700;
  padding: 9px 17px;
  border: 1px solid transparent; border-radius: var(--r);
  cursor: pointer; text-decoration: none;
  transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}
.btn--primary { background: var(--red); border-color: var(--red); color: #fff; }
.btn--primary:hover { background: var(--red-dk); border-color: var(--red-dk); color: #fff; }

.btn--white { background: #fff; border-color: #fff; color: var(--navy); }
.btn--white:hover { background: var(--tint-2); border-color: var(--tint-2); color: var(--navy); }

.btn--outline { background: transparent; border-color: var(--rule); color: var(--ink); }
.btn--outline:hover { border-color: var(--navy); color: var(--navy); }

.btn--ghost { background: transparent; border-color: rgba(255, 255, 255, .42); color: #fff; }
.btn--ghost:hover { background: rgba(255, 255, 255, .13); color: #fff; }

.btn--lg { padding: 11px 22px; font-size: 15px; }

/* -------------------------------------------------------------------- hero */

.hero {
  background: var(--navy); color: var(--on-dark);
  position: relative; overflow: hidden;
}
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
  background-size: 46px 46px;
}
.hero__inner {
  display: grid; grid-template-columns: 1fr 340px; gap: 40px;
  padding-block: 32px; align-items: center;
  position: relative; z-index: 1;
}
.hero .eyebrow { color: #FF8A9B; }
.hero__lede { font-size: 16.5px; color: var(--on-dark-2); max-width: 50ch; margin: 0 0 15px; }
.hero__cta { display: flex; gap: 9px; flex-wrap: wrap; margin-bottom: 16px; }
.hero__trust {
  display: flex; gap: 18px; flex-wrap: wrap;
  font-family: var(--mono); font-size: 11.5px; color: var(--on-dark-3);
}
.hero__trust b { color: #fff; font-weight: 500; }

/* -------------------------------------------------------------- calculator */

.calc {
  background: var(--surface);
  color: var(--ink);                 /* explicit — the card sits on navy */
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
}

/* Destination tabs */
.calc__tabs { display: flex; border-bottom: 1px solid var(--rule); }
.calc__tab {
  flex: 1; font: inherit; font-size: 13.5px; font-weight: 700;
  padding: 12px 10px; background: var(--surface); color: var(--muted);
  border: 0; border-bottom: 2px solid transparent; cursor: pointer;
  transition: color .12s ease, border-color .12s ease;
}
.calc__tab:hover { color: var(--ink); }
.calc__tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--red); }

.calc__body { padding: 14px 16px 16px; }

.calc__field { margin-bottom: 12px; }
.calc__label {
  display: block; font-size: 10.5px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 5px;
}

.calc__select {
  width: 100%; font: inherit; font-size: 14px; font-weight: 600; color: var(--ink);
  background: var(--tint); border: 1px solid var(--rule); border-radius: var(--r);
  padding: 9px 32px 9px 11px; cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2348566B' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 15px;
}
.calc__servicenote {
  font-size: 12px; color: var(--muted); margin: 5px 0 0; min-height: 1em;
}

.calc__row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding-block: 7px;
}
.calc__rowlabel { font-size: 14px; font-weight: 600; color: var(--ink); }

/* Stepper */
.stepper { display: flex; border: 1px solid var(--rule); border-radius: var(--r); overflow: hidden; }
.stepper button {
  width: 30px; background: var(--tint); border: 0; color: var(--navy);
  font: inherit; font-size: 15px; cursor: pointer;
}
.stepper button:hover { background: var(--navy); color: #fff; }
.stepper input {
  width: 44px; text-align: center; border: 0; border-inline: 1px solid var(--rule);
  font-family: var(--mono); font-size: 14px; color: var(--ink);
  padding: 6px 0; background: var(--surface); -moz-appearance: textfield;
}
.stepper input::-webkit-outer-spin-button,
.stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Switch */
.toggle {
  position: relative; flex: none;
  width: 44px; height: 25px; padding: 0;
  background: #C3CBD6; border: 0; border-radius: 999px;
  cursor: pointer; transition: background-color .16s ease;
}
.toggle__knob {
  position: absolute; top: 3px; left: 3px;
  width: 19px; height: 19px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 2px rgba(16, 29, 46, .35);
  transition: transform .16s ease;
}
.toggle[aria-checked="true"] { background: var(--navy); }
.toggle[aria-checked="true"] .toggle__knob { transform: translateX(19px); }

/* Total */
.calc__total {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  border-top: 1px solid var(--rule);
  margin-top: 10px; padding-top: 12px;
}
.calc__totallabel { font-size: 12px; color: var(--muted); margin: 0 0 2px; }
.calc__amount {
  margin: 0; font-size: 34px; font-weight: 800; letter-spacing: -.04em;
  line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums;
}
.calc__despatch { text-align: right; }
.calc__despatchlabel {
  display: inline-flex; align-items: center; gap: 5px;
  margin: 0; font-size: 13px; font-weight: 700; color: var(--ok);
}
.calc__despatchlabel svg { width: 13px; height: 13px; flex: none; }
.calc__despatchnote { margin: 1px 0 0; font-size: 12px; color: var(--muted); }

.calc__cta {
  width: 100%; margin-top: 12px; padding-block: 12px; font-size: 15px;
}
.calc__cta svg { width: 16px; height: 16px; flex: none; }

.calc__status {
  margin: 8px 0 0; font-size: 11.5px; color: var(--muted); min-height: 1em; text-align: center;
}
.calc__status[data-state="error"] { color: var(--red); font-weight: 600; }

/* ------------------------------------------------------------------- cards */

.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.grid-2 { display: grid; grid-template-columns: 1fr 340px; gap: 30px; align-items: start; }
.grid-2 > *, .hero__inner > * { min-width: 0; }
/* A wider right rail. Declared as a class rather than an inline style, because
   an inline grid-template-columns outranks the responsive collapse below and
   leaves the main column crushed on a narrow screen. */
.grid-2--wide { grid-template-columns: 1fr 380px; }

/* On a dark band a short white card left floating with empty ground beneath it
   reads as detached. Stretching it to the row height anchors it to the same top
   and bottom edge as the column beside it. */
.band-navy .grid-2 { align-items: stretch; }
.band-navy .grid-2 > .card { display: flex; flex-direction: column; }
.band-navy .grid-2 > .card > :last-child { margin-top: auto; margin-bottom: 0; }

.card {
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--r-lg); padding: 15px 16px;
}
.card p { font-size: 14px; color: var(--ink-2); margin: 0; line-height: 1.45; }
.card__icon {
  width: 30px; height: 30px; border-radius: 6px;
  background: var(--tint-2); color: var(--navy);
  display: grid; place-items: center; margin-bottom: 10px;
}
.card__icon svg { width: 16px; height: 16px; display: block; }

.card--navy { background: var(--navy); border-color: var(--navy); color: var(--on-dark); }
.card--navy h3 { color: #fff; }
.card--navy p  { color: var(--on-dark-2); }

/* A white card inside a navy band must restate its text colours, or the
   band's light text leaks in and vanishes against the white. */
.band-navy .card:not(.card--navy) { color: var(--ink); }
.band-navy .card:not(.card--navy) p,
.band-navy .card:not(.card--navy) .note { color: var(--muted); }
.band-navy .card:not(.card--navy) h3,
.band-navy .card:not(.card--navy) dd { color: var(--ink); }

.rate-list { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 5px 12px; font-size: 14px; }
.rate-list dt { color: var(--on-dark-3); }
.rate-list dd { margin: 0; text-align: right; font-family: var(--mono); color: #fff; }

/* ------------------------------------------------------------------ tables */

.table-wrap { overflow-x: auto; }
table.data {
  width: 100%; border-collapse: collapse; background: var(--surface);
  border: 1px solid var(--rule); border-radius: var(--r-lg); overflow: hidden;
  min-width: 560px;
}
table.data th {
  text-align: left; font-family: var(--mono);
  font-size: 9.5px; font-weight: 500; letter-spacing: .15em; text-transform: uppercase;
  color: #A8C0DA; padding: 8px 13px; background: var(--navy); white-space: nowrap;
}
table.data td {
  padding: 8px 13px; border-bottom: 1px solid var(--rule-2);
  color: var(--ink-2); font-size: 14.5px;
}
table.data tr:last-child td { border-bottom: 0; }
table.data tbody tr:hover { background: var(--tint); }
table.data td.t-name { color: var(--ink); font-weight: 700; }
table.data td.t-price {
  text-align: right; font-family: var(--mono); font-weight: 500;
  color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums;
}

.tag {
  display: inline-block; font-family: var(--mono);
  font-size: 9px; letter-spacing: .1em; text-transform: uppercase;
  padding: 1px 6px; margin-left: 7px; vertical-align: 1px;
  background: var(--red-tint); color: var(--red); border-radius: 2px;
}
.note { font-size: 13.5px; color: var(--muted); margin-top: 10px; }
.band-navy .note { color: var(--on-dark-3); }

/* -------------------------------------------------------------------- misc */

.ticks { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.ticks li { display: flex; gap: 9px; font-size: 14.5px; color: var(--ink-2); line-height: 1.45; }
.ticks svg { width: 15px; height: 15px; flex: none; color: var(--ok); margin-top: 3px; }
.ticks b { color: var(--ink); }
.band-navy .ticks li { color: var(--on-dark-2); }
.band-navy .ticks b  { color: #fff; }
.band-navy .ticks svg { color: #5FCFA0; }

.strip {
  background: var(--navy-dk); color: var(--on-dark);
  padding: 22px 0;
  border-top: 1px solid rgba(255, 255, 255, .12);
}
.strip__inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.strip h2 { margin: 0 0 3px; color: #fff; }
.strip p  { margin: 0; color: var(--on-dark-2); font-size: 15px; }

.prose { max-width: 68ch; }
.prose h2 { margin-top: 26px; }
.prose p, .prose li { color: var(--ink-2); font-size: 15.5px; }

details.faq { border-bottom: 1px solid var(--rule); padding: 13px 0; }
details.faq summary {
  cursor: pointer; font-weight: 700; font-size: 15.5px; list-style: none;
  display: flex; justify-content: space-between; gap: 16px; align-items: center;
  color: var(--ink);
}
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after { content: "+"; color: var(--red); font-size: 19px; line-height: 1; flex: none; }
details.faq[open] summary::after { content: "\2212"; }
details.faq p { margin: 10px 0 0; color: var(--ink-2); max-width: 68ch; }

.page-head { padding: 28px 0 6px; }
.page-head p.lede { font-size: 16.5px; color: var(--ink-2); max-width: 62ch; margin: 0; }

/* ------------------------------------------------------------------ footer */

.site-footer {
  flex: none;
  background: var(--navy-dk); color: var(--on-dark-3);
  font-size: 13.5px; padding: 26px 0 15px;
}
.site-footer a { color: #D3E0EF; text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.site-footer :where(a):focus-visible { outline-color: #fff; }

.site-footer__top { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 24px; padding-bottom: 18px; }
.site-footer__brand .brand { color: #fff; }
.site-footer__brand .brand__mark { background: #fff; color: var(--navy-dk); }
.site-footer__blurb { color: var(--on-dark-3); max-width: 40ch; margin: 10px 0 0; line-height: 1.55; }

.footer-heading {
  font-family: var(--mono);
  font-size: 9.5px; font-weight: 500; letter-spacing: .15em; text-transform: uppercase;
  color: var(--on-dark-4); margin: 0 0 9px;
}
.footer-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }

.company-details {
  font-style: normal; font-size: 12.5px; color: var(--on-dark-3);
  line-height: 1.6; margin-top: 10px;
}
.company-details strong { color: #fff; font-weight: 700; }

.site-footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, .13); padding-top: 12px;
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-size: 12.5px; color: var(--on-dark-3);
}
.site-footer__bottom p { margin: 0; }
.built-by { display: inline-flex; align-items: center; gap: 5px; }
.built-by a { font-weight: 700; }
.built-by svg { width: 10px; height: 10px; opacity: .7; flex: none; }

/* -------------------------------------------------------------- responsive */

@media (max-width: 1000px) {
  .hero__inner, .grid-2, .grid-2--wide { grid-template-columns: 1fr; }
  .grid-4, .grid-3 { grid-template-columns: 1fr 1fr; }
  .site-footer__top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 1100px) {
  .site-nav a:not(.btn) { display: none; }
}
@media (max-width: 620px) {
  :root { --gutter: 16px; }
  .grid-4, .grid-3, .site-footer__top { grid-template-columns: 1fr; }
  .brand__tagline { display: none; }
  .calc__out { flex-direction: column; align-items: flex-start; }
  .site-footer__bottom { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ==========================================================================
   Forms — used by the AI writer and, later, the composer
   ========================================================================== */

.field { margin-bottom: 16px; }
.field > label,
.field > .field__label {
  display: block; font-size: 13px; font-weight: 700;
  color: var(--ink); margin-bottom: 6px;
}
.field__hint { font-size: 12.5px; color: var(--muted); font-weight: 400; margin-left: 6px; }

.input, .textarea {
  width: 100%; font: inherit; font-size: 15px; color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--rule); border-radius: var(--r);
  padding: 10px 12px;
}
.input::placeholder, .textarea::placeholder { color: #8794A7; }
.input:focus, .textarea:focus { border-color: var(--steel); outline: 2px solid var(--red); outline-offset: 1px; }
.textarea { resize: vertical; min-height: 108px; line-height: 1.5; }

.choices { display: flex; gap: 7px; flex-wrap: wrap; }
.choices input { position: absolute; opacity: 0; pointer-events: none; }
.choices label {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13.5px; font-weight: 600; color: var(--ink-2);
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: 999px; padding: 7px 14px; cursor: pointer; margin: 0;
  transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}
.choices label:hover { border-color: var(--navy); }
.choices input:checked + span,
.choices label:has(input:checked) { background: var(--navy); border-color: var(--navy); color: #fff; }
.choices input:focus-visible + span,
.choices label:has(input:focus-visible) { outline: 2px solid var(--red); outline-offset: 2px; }
.choices .choice__note { display: block; font-size: 11.5px; font-weight: 400; opacity: .75; }

.counter { font-size: 12px; color: var(--muted); text-align: right; margin-top: 4px; }
.counter[data-over="true"] { color: var(--red); font-weight: 600; }

.form-panel {
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--r-lg); padding: 20px 22px;
}
.form-panel > h2 { margin: 0 0 4px; }
.form-panel > .form-panel__sub { color: var(--muted); font-size: 14px; margin: 0 0 18px; }

.form-actions { display: flex; gap: 9px; flex-wrap: wrap; align-items: center; margin-top: 4px; }

.output {
  background: var(--tint); border: 1px solid var(--rule);
  border-radius: var(--r-lg); padding: 18px 20px; margin-top: 14px;
}
.output h3 { margin: 0 0 10px; }
.output__body {
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r);
  padding: 16px 18px; font-size: 14.5px; line-height: 1.65; color: var(--ink-2);
  white-space: pre-wrap; min-height: 120px;
}
.output__meta { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 10px; }

.use-cases { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.use-case {
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r);
  padding: 11px 13px; font-size: 14px;
}
.use-case b { display: block; color: var(--ink); font-size: 14.5px; margin-bottom: 2px; }
.use-case span { color: var(--muted); font-size: 13px; }

.track-input {
  width: 100%; font-family: var(--mono); font-size: 15px; color: var(--ink);
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--r); padding: 10px 12px;
}
.track-input:disabled { background: var(--tint); color: var(--muted); cursor: not-allowed; }

@media (max-width: 900px) { .use-cases { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .use-cases { grid-template-columns: 1fr; } }

/* ==========================================================================
   Trust ticker — the scrolling strip under the header
   ========================================================================== */

.ticker {
  background: var(--navy-dk);
  color: var(--on-dark-3);
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  overflow: hidden;
  /* Contains the animation so it cannot widen the page. */
  contain: content;
}

.ticker__track {
  display: flex;
  width: max-content;
  animation: ticker-scroll 42s linear infinite;
}

/* Two identical lists sit side by side; shifting the track by exactly half its
   width puts the second copy where the first started, so the loop is seamless. */
@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.ticker:hover .ticker__track,
.ticker:focus-within .ticker__track { animation-play-state: paused; }

.ticker__list {
  display: flex;
  align-items: center;
  gap: 34px;
  list-style: none;
  margin: 0;
  padding: 0 17px;
  flex: none;
}

.ticker__item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .01em;
  padding-block: 8px;
  margin: 0;
}

.ticker__tick {
  width: 13px;
  height: 13px;
  flex: none;
  color: #5FCFA0;
}

/* Motion is decoration here, and the content must still be readable without it.
   Stopping the animation leaves the strip scrollable by hand instead. */
@media (prefers-reduced-motion: reduce) {
  .ticker { overflow-x: auto; }
  .ticker__track { animation: none; width: auto; }
  .ticker__track > .ticker__list[aria-hidden="true"] { display: none; }
}

@media (max-width: 620px) {
  .ticker__list { gap: 24px; }
  .ticker__item { font-size: 12px; }
}

/* A pill for something genuinely unavailable. Deliberately not .btn — an
   element that cannot be clicked must not be dressed as a button. */
.status-pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 600;
  color: var(--muted); background: var(--tint);
  border: 1px dashed var(--rule); border-radius: 999px;
  padding: 5px 12px;
}

/* ==========================================================================
   Composer — lined paper, formatting toolbar, A4 preview
   ========================================================================== */

:root {
  --paper:        #FDFBF3;
  --paper-rule:   #E4DDCB;
  --paper-margin: #E0B4B4;
  --paper-ink:    #1E1B15;
  --paper-ghost:  #B7AE9C;
  --line-h:       32px;
}

.compose__head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 12px;
}
.compose__hint { margin: 0; font-size: 13.5px; color: var(--muted); max-width: 46ch; }

.compose__grid { display: grid; grid-template-columns: 1fr 300px; gap: 20px; align-items: start; }
/* A grid item defaults to min-width:auto, so a fixed-width child — the 794px
   A4 page — stretches the 1fr track past the viewport instead of being scaled
   down inside it. This is what lets the preview fit its column. */
.compose__grid > * { min-width: 0; }

/* ------------------------------------------------------------- toolbar */

.editor-toolbar {
  display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
  background: var(--surface);
  border: 1px solid var(--rule); border-bottom: 0;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  padding: 7px 9px;
}
.tool {
  min-width: 32px; height: 30px; padding: 0 8px;
  font: inherit; font-size: 14.5px; line-height: 1;
  background: var(--surface); color: var(--ink-2);
  border: 1px solid transparent; border-radius: var(--r);
  cursor: pointer;
}
.tool:hover { background: var(--tint); color: var(--ink); }
.tool[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
.tool--wide { font-size: 12.5px; font-weight: 600; }
.tool-sep { width: 1px; height: 18px; background: var(--rule); margin-inline: 5px; }
.tool-spacer { flex: 1; }
.btn--sm { padding: 6px 12px; font-size: 13px; }

/* --------------------------------------------------------------- paper */

.paper {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(16, 29, 46, .06), 0 14px 34px -26px rgba(16, 29, 46, .5);
}

.paper__meta {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; padding: 14px 26px 6px 64px;
  color: var(--paper-ghost);
}
.paper__date { font-family: Georgia, "Times New Roman", serif; font-style: italic; font-size: 14px; }
.paper__spec {
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: .16em; text-transform: uppercase;
}

.paper__sheet {
  position: relative;
  /* Ruled lines, and the red margin rule down the left. */
  background-image:
    repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent calc(var(--line-h) - 1px),
      var(--paper-rule) calc(var(--line-h) - 1px),
      var(--paper-rule) var(--line-h)
    ),
    linear-gradient(to right, transparent 55px, var(--paper-margin) 55px, var(--paper-margin) 56px, transparent 56px);
  background-position: 0 0, 0 0;
}

.paper__body {
  min-height: calc(var(--line-h) * 14);
  padding: 0 26px 0 64px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 17px;
  line-height: var(--line-h);      /* must equal the rule spacing exactly */
  color: var(--paper-ink);
  outline: 0;
  white-space: pre-wrap;
  word-break: break-word;
}
.paper__body:focus-visible { outline: 0; }
.paper__body p { margin: 0; }
.paper__body:empty::before,
.paper__body[data-empty="true"]::before {
  content: attr(data-placeholder);
  color: var(--paper-ghost);
  white-space: pre-wrap;
  pointer-events: none;
}

.paper__foot {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 9px 26px 10px 64px;
  border-top: 1px solid var(--paper-rule);
  background: rgba(0, 0, 0, .02);
  font-size: 12.5px; color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------- A4 preview */

.preview {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(7, 31, 62, .93);
  display: flex; flex-direction: column;
}
/* `display: flex` above outranks the user-agent rule for [hidden], so the
   overlay would sit over the page permanently without this. */
.preview[hidden] { display: none; }
.preview__bar {
  flex: none;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 12px 22px;
  color: #fff; font-size: 13.5px; font-weight: 600;
  border-bottom: 1px solid rgba(255, 255, 255, .15);
}
.preview__scroll {
  flex: 1; overflow: auto;
  padding: 26px 22px 40px;
}
.preview__pages {
  display: flex; flex-direction: column; align-items: center; gap: 22px;
  transform-origin: top center;
  width: 794px;
  margin-inline: auto;
}

/* A4 is 210 x 297mm. Rendered at 96dpi that is 794 x 1123px.

   The width is FIXED, never max-width. A sheet that narrows to fit the screen
   rewraps the text and changes the page count — and the page count sets the
   price. Small screens scale the whole stack down visually instead, which
   changes nothing about the layout. */
.sheet {
  width: 794px;
  aspect-ratio: 210 / 297;
  background: #fff;
  box-shadow: 0 10px 40px -12px rgba(0, 0, 0, .6);
  padding: 76px 76px 76px 94px;      /* ~20mm, 25mm at the binding edge */
  flex: none;
  overflow: hidden;
}
.sheet__area {
  height: 100%;
  overflow: hidden;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 16px;
  line-height: 1.65;
  color: #14110C;
  white-space: pre-wrap;
  word-break: break-word;
}
.sheet__area p { margin: 0 0 1em; }

@media (max-width: 1000px) {
  .compose__grid { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  :root { --line-h: 30px; }
  .paper__meta { padding-left: 44px; }
  .paper__body { padding-left: 44px; font-size: 16px; }
  .paper__foot { padding-left: 44px; }
  .paper__sheet {
    background-image:
      repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--line-h) - 1px),
        var(--paper-rule) calc(var(--line-h) - 1px), var(--paper-rule) var(--line-h)),
      linear-gradient(to right, transparent 36px, var(--paper-margin) 36px, var(--paper-margin) 37px, transparent 37px);
  }
}

/* ==========================================================================
   FAQ page — two columns, compact rows
   ========================================================================== */

.faq-jump { display: flex; flex-wrap: wrap; gap: 6px; }
.faq-jump a {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 600; color: var(--ink-2);
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: 999px; padding: 5px 11px; text-decoration: none;
}
.faq-jump a:hover { border-color: var(--navy); color: var(--navy); }
.faq-jump span {
  font-family: var(--mono); font-size: 10.5px; color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* Two columns. `break-inside: avoid` stops a question being split down the
   middle of a column boundary. */
.faq-columns {
  column-count: 2;
  column-gap: 26px;
}

.faq-row {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  border-bottom: 1px solid var(--rule);
  /* Without this a details element can still be clipped mid-column. */
  display: inline-block;
  width: 100%;
}

/* Row height is set by the text itself — same size as body copy, minimal
   padding, so a hundred questions stay scannable. */
.faq-row summary {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  cursor: pointer; list-style: none;
  font-size: 14.5px; font-weight: 600; line-height: 1.4;
  color: var(--ink);
  padding: 7px 0;
}
.faq-row summary::-webkit-details-marker { display: none; }
.faq-row summary::after {
  content: "+";
  flex: none; color: var(--red);
  font-size: 15px; line-height: 1.2; font-weight: 700;
}
.faq-row[open] summary::after { content: "\2212"; }
.faq-row summary:hover { color: var(--navy); }
.faq-row summary:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }

.faq-row p {
  margin: 0 0 9px;
  font-size: 14px; line-height: 1.5; color: var(--ink-2);
  padding-right: 22px;
}

@media (max-width: 800px) {
  .faq-columns { column-count: 1; }
}

/* ==========================================================================
   File upload
   ========================================================================== */

.dropzone {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; text-align: center;
  padding: 30px 20px;
  background: var(--surface);
  border: 2px dashed var(--rule); border-radius: var(--r-lg);
  cursor: pointer;
  transition: border-color .12s ease, background-color .12s ease;
}
.dropzone:hover, .dropzone:focus-visible { border-color: var(--navy); background: var(--tint); }
.dropzone[data-state="over"] { border-color: var(--red); background: var(--red-tint); }
.dropzone[data-state="busy"] { border-style: solid; border-color: var(--navy); cursor: progress; }
.dropzone svg { width: 30px; height: 30px; color: var(--navy); }
.dropzone__title { margin: 4px 0 0; font-size: 15px; font-weight: 700; color: var(--ink); }
.dropzone__hint { margin: 0; font-size: 13px; color: var(--muted); }

.upload-result { margin-top: 14px; }

.upload-file {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--r-lg); padding: 13px 15px;
}
.upload-file__name { margin: 0; font-size: 14.5px; font-weight: 700; color: var(--ink); word-break: break-all; }
.upload-file__meta { margin: 2px 0 0; font-size: 13px; color: var(--muted); }

.upload-price {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
  background: var(--navy); color: var(--on-dark);
  border-radius: var(--r-lg); padding: 14px 16px; margin-top: 12px;
}
.upload-price .calc__totallabel { color: var(--on-dark-3); }
.upload-price .calc__amount { color: #fff; }
.upload-price .note { color: var(--on-dark-3); max-width: 34ch; }

#upload-error {
  background: var(--red-tint); border: 1px solid var(--red);
  border-radius: var(--r); padding: 10px 13px; color: var(--red-dk);
  font-weight: 600; margin-top: 12px;
}

/* ==========================================================================
   Paginated preview — one A4 page at a time, with prev/next
   ========================================================================== */

.pagenav {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-top: 12px;
}
.pagenav__btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; flex: none;
  background: var(--surface); color: var(--navy);
  border: 1px solid var(--rule); border-radius: var(--r);
  cursor: pointer; font: inherit;
  transition: border-color .12s ease, background-color .12s ease, color .12s ease;
}
.pagenav__btn:hover:not(:disabled) { background: var(--navy); border-color: var(--navy); color: #fff; }
.pagenav__btn:disabled { opacity: .38; cursor: not-allowed; }
.pagenav__btn svg { width: 17px; height: 17px; }

.pagenav__count {
  font-size: 13.5px; font-weight: 600; color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.pagenav__count b { color: var(--ink); }

/* The page itself. Fixed A4 proportions, scaled to fit its column — never
   reflowed, because reflowing changes the pagination and the page count sets
   the price. */
.pageview {
  background: var(--tint);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  padding: 16px;
  display: flex; justify-content: center;
  overflow: hidden;
}
.pageview__stage {
  width: 794px;
  transform-origin: top center;
  flex: none;
}
.pageview .sheet { box-shadow: 0 6px 24px -10px rgba(16, 29, 46, .45); }
.pageview canvas {
  display: block;
  width: 794px;
  background: #fff;
  box-shadow: 0 6px 24px -10px rgba(16, 29, 46, .45);
}

.preview-toggle { display: flex; gap: 4px; }

.pageview__empty {
  padding: 40px 20px; text-align: center;
  color: var(--muted); font-size: 14px;
}

/* ==========================================================================
   API documentation — /business/api

   A reference page, not a marketing page: a sticky contents rail, a single
   readable measure, and code that is easy to copy. Every colour here comes
   from the tokens above so the docs cannot drift from the rest of the site.
   ========================================================================== */

.docs-hero { padding: 40px 0 34px; }
.docs-hero h1 { margin: 6px 0 0; color: var(--on-dark); }
.docs-hero__lede {
  max-width: 62ch; margin: 12px 0 0;
  font-size: 16px; line-height: 1.65; color: var(--on-dark-2);
}
.docs-hero__meta {
  display: flex; flex-wrap: wrap; gap: 10px 34px;
  margin-top: 22px; padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, .16);
}
.docs-hero__meta span {
  display: block; font-size: 11px; letter-spacing: .09em; text-transform: uppercase;
  color: var(--on-dark-4); margin-bottom: 4px;
}
.docs-hero__meta code {
  font-family: var(--mono); font-size: 13px; color: var(--on-dark);
  background: none; padding: 0;
}

.docs {
  display: grid; grid-template-columns: 218px minmax(0, 1fr);
  gap: 46px; align-items: start;
  padding: 32px 0 60px;
}
/* Grid children default to min-width:auto, which lets a wide <pre> push the
   whole column past the viewport instead of scrolling inside itself. */
.docs > * { min-width: 0; }

.docs__nav { position: sticky; top: 84px; }
.docs__navtitle {
  margin: 0 0 8px; font-size: 11px; letter-spacing: .09em;
  text-transform: uppercase; color: var(--muted);
}
.docs__nav ol { list-style: none; margin: 0; padding: 0; }
.docs__nav li { margin: 0; }
.docs__nav a {
  display: block; padding: 5px 0 5px 11px;
  border-left: 2px solid var(--rule-2);
  font-size: 13.5px; line-height: 1.35;
  color: var(--muted); text-decoration: none;
}
.docs__nav a:hover { color: var(--navy); border-left-color: var(--red); }

.docs__body { max-width: 78ch; }
.docs__body section { padding-bottom: 34px; }
.docs__body section + section {
  padding-top: 34px; border-top: 1px solid var(--rule-2);
}
.docs__body h2 {
  margin: 0 0 12px; font-size: 25px; letter-spacing: -.015em; color: var(--ink);
  scroll-margin-top: 84px;
}
.docs__body h3 {
  margin: 28px 0 10px; font-size: 16px; color: var(--ink);
}
.docs__body p { margin: 0 0 13px; font-size: 15px; line-height: 1.68; color: var(--ink-2); }
.docs__body section > h2 + p { font-size: 15.5px; }

/* Inline code sits inside body copy, so it must not shout. */
.docs__body :not(pre) > code {
  font-family: var(--mono); font-size: .875em;
  background: var(--tint); color: var(--navy);
  padding: 1px 5px; border-radius: 3px;
  overflow-wrap: anywhere;
}

.code {
  margin: 0 0 16px; padding: 15px 17px;
  background: var(--navy-dk); border-radius: var(--r);
  overflow-x: auto;
}
.code code {
  font-family: var(--mono); font-size: 13px; line-height: 1.62;
  color: #DCE7F5; background: none; padding: 0;
  white-space: pre;
}

.endpoint {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 24px 0 12px !important; padding: 9px 12px;
  background: var(--tint); border-left: 3px solid var(--navy);
  border-radius: 0 var(--r) var(--r) 0;
}
.endpoint code {
  font-family: var(--mono); font-size: 14px; font-weight: 600;
  color: var(--navy) !important; background: none !important; padding: 0 !important;
}
.verb {
  flex: none; padding: 3px 8px; border-radius: 3px;
  font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: .05em;
  color: #fff;
}
.verb--get  { background: var(--navy-lt); }
.verb--post { background: var(--red); }

.tablewrap { overflow-x: auto; margin: 0 0 16px; }
.dtable { width: 100%; border-collapse: collapse; font-size: 14px; }
.dtable th {
  text-align: left; padding: 8px 12px 8px 0;
  border-bottom: 2px solid var(--navy);
  font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--navy);
  white-space: nowrap;
}
.dtable td {
  padding: 9px 12px 9px 0; vertical-align: top;
  border-bottom: 1px solid var(--rule-2);
  color: var(--ink-2); line-height: 1.55;
}
.dtable td:first-child { white-space: nowrap; }
/* A code token that breaks mid-word reads as a different token. The wrapper
   scrolls instead. */
.dtable td code { white-space: nowrap; }
.dtable td.req {
  font-size: 11px; letter-spacing: .05em; text-transform: uppercase;
  color: var(--red); font-weight: 600;
}

.docs-steps { display: grid; gap: 12px; margin: 18px 0 22px; }
.docs-steps > div {
  padding: 13px 15px; background: var(--surface);
  border: 1px solid var(--rule); border-left: 3px solid var(--red);
  border-radius: 0 var(--r) var(--r) 0;
}
.docs-steps b { display: block; color: var(--ink); font-size: 14px; }
.docs-steps p { margin: 4px 0 0 !important; font-size: 14px; color: var(--muted) !important; }

.docs-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 18px 0 20px; }
.docs-cards > div {
  padding: 14px 15px; background: var(--surface);
  border: 1px solid var(--rule); border-radius: var(--r);
}
.docs-cards b { display: block; color: var(--navy); font-size: 13px; letter-spacing: .02em; }
.docs-cards p { margin: 5px 0 0 !important; font-size: 13.5px; color: var(--muted) !important; }

.docs-note {
  padding: 11px 14px; background: var(--tint);
  border-left: 3px solid var(--steel); border-radius: 0 var(--r) var(--r) 0;
  font-size: 14px !important; color: var(--ink-2) !important;
}

.docs-list, .docs-check { margin: 0 0 16px; padding-left: 20px; }
.docs-list li, .docs-check li {
  margin-bottom: 9px; font-size: 15px; line-height: 1.62; color: var(--ink-2);
}
.docs-check { list-style: none; padding-left: 0; }
.docs-check li { position: relative; padding-left: 26px; }
.docs-check li::before {
  content: ""; position: absolute; left: 3px; top: 7px;
  width: 11px; height: 6px;
  border-left: 2px solid var(--ok); border-bottom: 2px solid var(--ok);
  transform: rotate(-45deg);
}

.docs-cta { margin-top: 20px !important; }
.docs-cta .btn { margin-left: 8px; }

@media (max-width: 900px) {
  .docs { grid-template-columns: 1fr; gap: 24px; }
  .docs__nav { position: static; }
  .docs__nav ol {
    display: flex; flex-wrap: wrap; gap: 4px 6px;
  }
  .docs__nav a {
    padding: 5px 10px; border-left: 0;
    background: var(--surface); border: 1px solid var(--rule); border-radius: 20px;
  }
  .docs-cards { grid-template-columns: 1fr; }
  .docs-cta .btn { display: block; margin: 10px 0 0; }
}