/* Amply — design system.
   Light only, deliberately. A theme toggle is a thing to maintain and a thing
   to get wrong, and this site is five pages that need to be clear rather than
   clever. Text on orange is ink, not white — the orange is too light for white
   to pass contrast. */

:root {
  color-scheme: light only;
  --orange:    #f6711e;
  --on-orange: #131110;
  --bg:        #ffffff;
  --bg2:       #f7f4f1;
  --ink:       #131110;
  --ink2:      #4a4644;
  --ink3:      #66615d;
  --line:      #e3ddd8;
  --deep:      #131110;   /* full-bleed dark panels, in both themes */
  --on-deep:   #faf7f5;

  --r:    14px;
  --r-lg: 18px;
  --pill: 999px;

  --col:  1300px;         /* homepage content column */
  --col-narrow: 800px;    /* the setup flow reads as a single column */
  --gut:  clamp(20px, 4vw, 48px);

  --sans: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* ── layout ───────────────────────────────────────────────────────── */

.col     { max-width: var(--col);        margin: 0 auto; padding: 0 var(--gut); }
.col.narrow { max-width: var(--col-narrow); }
.bleed   { width: 100%; }
section  { padding: clamp(46px, 5.5vw, 86px) 0; }

/* Consecutive sections each contributed a full pad, so the gap between them
   was double what it looks like in isolation. One gap, not two. A coloured
   band is exempt — after a full-bleed panel the larger break reads right. */
section + section { padding-top: 0; }
section.to-band  { padding-bottom: 0; }

/* ── header ───────────────────────────────────────────────────────── */

.topbar {
  position: sticky; top: 0; z-index: 40;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.topbar-in {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 17px var(--gut);
}
.mark {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 800; font-size: 25px; letter-spacing: -0.035em;
  color: var(--ink); text-decoration: none;
}
.mark svg { width: 26px; height: 26px; display: block; color: var(--orange); }
.topbar-actions { display: flex; align-items: center; gap: 10px; }

/* ── type ─────────────────────────────────────────────────────────── */

h1, h2, h3 { margin: 0; text-wrap: balance; }
h1 {
  font-weight: 800; letter-spacing: -0.042em; line-height: 0.94;
  font-size: clamp(44px, 8.4vw, 118px);
}
h1.step { font-size: clamp(38px, 5.6vw, 76px); line-height: 0.98; letter-spacing: -0.038em; }
h2 { font-weight: 800; letter-spacing: -0.038em; line-height: 1.02; font-size: clamp(32px, 6.5vw, 76px); }
h3 { font-weight: 700; letter-spacing: -0.025em; font-size: clamp(21px, 2vw, 26px); }

p { margin: 0 0 18px; color: var(--ink2); }
p.lead { font-size: clamp(18px, 1.6vw, 21px); max-width: 34em; }
.orange { color: var(--orange); }
.muted  { color: var(--ink3); }
.mono   { font-family: var(--mono); }
.eyebrow {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink3); margin: 0 0 22px;
}
a { color: var(--orange); text-underline-offset: 2px; }
strong { font-weight: 600; color: var(--ink); }

/* ── buttons ──────────────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font: inherit; font-weight: 700; font-size: 19px; letter-spacing: -0.01em;
  background: var(--orange); color: var(--on-orange);
  border: 0; padding: 19px 34px; border-radius: var(--pill);
  cursor: pointer; text-decoration: none;
  transition: filter .12s ease, transform .08s ease;
}
.btn:hover { filter: brightness(1.06); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2.5px solid var(--ink); outline-offset: 3px; }
.btn[disabled] { opacity: .35; cursor: not-allowed; filter: none; transform: none; }
.btn.ghost {
  background: transparent; color: var(--ink); border: 1.5px solid var(--line);
  font-family: var(--mono); font-weight: 400; font-size: 15px; padding: 11px 22px;
}
.btn.sm { font-size: 16px; padding: 13px 24px; }
.btn.block { display: flex; width: 100%; }
.link {
  background: none; border: 0; font: inherit; font-size: 16px; color: var(--ink3);
  cursor: pointer; padding: 6px 0; text-decoration: underline; text-underline-offset: 3px;
}
.link:hover { color: var(--ink); }
.actions { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; }

/* ── panels ───────────────────────────────────────────────────────── */

.panel-orange { background: var(--orange); color: var(--on-orange); }
.panel-orange p, .panel-orange .muted { color: rgba(19, 17, 16, 0.74); }
.panel-deep   { background: var(--deep); color: var(--on-deep); }
.panel-deep p { color: rgba(250, 247, 245, 0.62); }

.card {
  background: var(--bg2); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 30px;
}
.card > :last-child { margin-bottom: 0; }
.card.orange { background: var(--orange); border-color: transparent; color: var(--on-orange); }
.card.orange p { color: rgba(19, 17, 16, 0.76); }

.grid { display: grid; gap: 20px; }
@media (min-width: 700px)  { .grid.two   { grid-template-columns: 1fr 1fr; } }
@media (min-width: 980px)  { .grid.three { grid-template-columns: repeat(3, 1fr); } }

/* ── rows (numbered list items in the flow) ───────────────────────── */

.rows { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.rows li {
  display: flex; align-items: center; gap: 22px;
  background: var(--bg2); border: 1px solid var(--line);
  border-radius: var(--r); padding: 22px 26px;
  font-size: 19px; color: var(--ink);
}
.rows .n { font-weight: 800; font-size: 21px; color: var(--orange); flex: none; min-width: 26px; }
.rows .t { flex: 1; min-width: 0; }
.rows .meta { font-family: var(--mono); font-size: 15px; color: var(--ink3); flex: none; }

/* ── footer ───────────────────────────────────────────────────────── */

footer { border-top: 1px solid var(--line); }
.footer-in {
  display: flex; justify-content: space-between; align-items: center;
  gap: 20px; flex-wrap: wrap;
  padding: 30px var(--gut);
  font-family: var(--mono); font-size: 15px; color: var(--ink3);
}
.footer-in a { color: var(--ink3); text-decoration: none; }
.footer-in a:hover { color: var(--ink); }
.footer-links { display: flex; gap: 26px; flex-wrap: wrap; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }