/* FrogTink site: a knitter's chart sheet (DESIGN.md at the repo root).
   Graph paper with cells wider than tall, moss-green rules, dark olive ink, one mustard band that marks
   the current row, terracotta only for size marks and the US/UK trap. Rules and cells, no cards,
   no shadows, corners at 2px. Archivo (semi-condensed) for headings and numbers, Atkinson Hyperlegible
   for reading. */

@font-face { font-family: "Archivo"; font-style: normal; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap;
  src: url("/assets/archivo-var-latin-591a8b69.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap;
  src: url("/assets/archivo-var-latin-ext-a0aa4f2d.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* Digits in running text come from Archivo: Atkinson's slashed zero makes "30" and "2027" look like code. */
@font-face { font-family: "FT Digits"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("/assets/archivo-var-latin-591a8b69.woff2") format("woff2"); unicode-range: U+0030-0039; }
@font-face { font-family: "Atkinson Hyperlegible"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/assets/atkinson-400-latin-5988687f.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Atkinson Hyperlegible"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/assets/atkinson-400-latin-ext-e57f3c51.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Atkinson Hyperlegible"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("/assets/atkinson-700-latin-58824e98.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Atkinson Hyperlegible"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("/assets/atkinson-700-latin-ext-a4c7a106.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  /* Stock and print */
  --stock: #FBFCF8;
  --field: #FFFFFF;
  --tint: #EEF3E7;
  --grid: #DDE7D3;
  --grid-strong: #BFD1B0;
  --skel: #B4C4A6;
  --ink: #1C2717;
  --muted: #4A5842;
  --link: #2F5E22;
  --edge: #6E7F63;
  /* The one spot colour: the row band */
  --band: #F3C23F;
  --band-edge: #B98A12;
  --band-soft: #FBEDBD;
  --on-band: #1C2717;
  /* Size marks and the US/UK trap */
  --red: #A8432A;
  --red-soft: #F6E2DA;
  /* Controls */
  --btn: #24361C;
  --btn-hover: #34502A;
  --on-btn: #FBFCF8;
  --focus: #0B5CAD;
  /* Fields */
  --olive: #26361E;
  --on-olive: #EEF3E7;
  --on-olive-muted: #C3D0B8;
  --moss: #8DB573;
  --on-moss: #17210F;
  --dock: #1F2C19;
  --on-dock: #F1F5EA;

  --col: 2.25rem;
  --row: 1.75rem;
  --gutter: calc(var(--col) * 1.25);
  --font-body: "FT Digits", "Atkinson Hyperlegible", ui-sans-serif, system-ui, -apple-system, "Segoe UI", "Hiragino Sans", "Noto Sans JP", sans-serif;
  --font-head: "Archivo", "Arial Narrow", ui-sans-serif, system-ui, "Hiragino Sans", "Noto Sans JP", sans-serif;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --stock: #121A10;
    --field: #0C1209;
    --tint: #1A2416;
    --grid: #1D2819;
    --grid-strong: #2C3D25;
    --skel: #43553A;
    --ink: #E5EEDB;
    --muted: #AAB99E;
    --link: #B4D99A;
    --edge: #7E9271;
    --band: #E0A526;
    --band-edge: #F2C14E;
    --band-soft: #3A3115;
    --on-band: #17200F;
    --red: #EE9479;
    --red-soft: #3A2019;
    --btn: #BEDB9F;
    --btn-hover: #D3E8BC;
    --on-btn: #142010;
    --focus: #8CC4F2;
    --olive: #2A3B21;
    --on-olive: #E5EEDB;
    --on-olive-muted: #B3C2A7;
    --moss: #3F5634;
    --on-moss: #EEF4E6;
    --dock: #26361E;
    --on-dock: #F1F5EA;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scrollbar-color: var(--grid-strong) var(--stock); }
body {
  margin: 0;
  background: var(--stock);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.125rem;
  line-height: var(--row);
  overflow-wrap: break-word;
}
::selection { background: var(--band); color: var(--on-band); }
img, svg { max-width: 100%; height: auto; }
a { color: var(--link); text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 2px; }

h1, h2, h3, .h3 { font-family: var(--font-head); color: inherit; margin: 0 0 0.5em; text-wrap: balance; }
/* Japanese wraps anywhere: break headings at phrase boundaries instead (Chrome 119+, others ignore it). */
:lang(ja) :is(h1, h2, h3, .h3, .lead) { word-break: auto-phrase; }
h1 { font-size: clamp(2.5rem, 1.6rem + 4vw, 4.25rem); font-weight: 800; font-stretch: 78%; line-height: 1.02; letter-spacing: -0.02em; }
h2 { font-size: clamp(2rem, 1.45rem + 2.2vw, 3rem); font-weight: 800; font-stretch: 82%; line-height: 1.04; letter-spacing: -0.015em; max-width: 22ch; margin-bottom: var(--row); }
h3, .h3 { font-size: 1.3rem; font-weight: 700; font-stretch: 90%; line-height: 1.2; letter-spacing: -0.005em; }
p { margin: 0 0 var(--row); text-wrap: pretty; }
.lead { font-size: 1.25rem; line-height: var(--row); max-width: 34em; }
.muted { color: var(--muted); }
.small { font-size: 0.95rem; }
.center { text-align: center; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.container { width: 100%; max-width: 1144px; margin: 0 auto; padding: 0 16px; }
.container.narrow { max-width: 824px; }
@media (min-width: 720px) { .container { padding: 0 32px; } }

.skip-link { position: absolute; left: -9999px; top: 8px; background: var(--field); color: var(--ink); padding: 10px 14px; z-index: 10; }
.skip-link:focus { left: 8px; }

/* Graph paper: a fine rule every cell, a stronger one every tenth, cells wider than tall like knitter's graph paper.
   Only where everything on it is sized to the grid (the hero rows and the drawings). Sections with free-flowing
   text and their own rules sit on plain stock, because their rules could never land on the paper's lines. */
.sheet-inner::before, .specimen, .layer-file {
  background-color: var(--stock);
  background-image:
    linear-gradient(to right, var(--grid-strong) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-strong) 1px, transparent 1px),
    linear-gradient(to right, var(--grid) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid) 1px, transparent 1px);
  background-size: calc(var(--col) * 10) calc(var(--row) * 10), calc(var(--col) * 10) calc(var(--row) * 10), var(--col) var(--row), var(--col) var(--row);
}

/* Header */
.site-header { background: var(--stock); border-bottom: 1px solid var(--grid-strong); position: relative; z-index: 30; }
.nav-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; }
.brand { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--ink); text-decoration: none; font: 800 1.45rem/1 var(--font-head); font-stretch: 82%; letter-spacing: -0.01em; }
.brand:hover { color: var(--ink); }
.brand-mark { flex: none; width: 30px; height: 24px; }
/* The logo (docs-specs/brand/logo): the flat horizontal version in the header, the stacked one in the footer. */
.brand-logo { display: block; width: auto; height: 56px; margin-block: -6px; }
.brand-logo-dark { display: none; }
@media (prefers-color-scheme: dark) { .brand-logo-light { display: none; } .brand-logo-dark { display: block; } }
.footer-logo { display: block; width: auto; height: 100px; margin-left: -12px; }
.brand-mark-band { fill: var(--band); }
.brand-mark-grid { fill: none; stroke: currentColor; stroke-width: 1; }
.site-nav { display: flex; align-items: center; gap: 4px; }
.nav-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; color: var(--ink); text-decoration: none; font-size: 1rem; }
.nav-link:hover { color: var(--ink); text-decoration: underline; }
@media (max-width: 860px) { .nav-link { display: none; } }

/* Buttons and forms */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 3rem; padding: 0 1.25rem; border-radius: 2px; border: 2px solid var(--btn);
  background: var(--btn); color: var(--on-btn); font: 700 1.05rem/1.2 var(--font-body);
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color 160ms ease-out, border-color 160ms ease-out, color 160ms ease-out;
}
.btn:hover { background: var(--btn-hover); border-color: var(--btn-hover); color: var(--on-btn); text-decoration: none; }
.btn-small { min-height: 44px; padding: 0 1rem; font-size: 0.98rem; }
.btn-secondary { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-secondary:hover { background: var(--ink); border-color: var(--ink); color: var(--stock); }

.input {
  width: 100%; min-height: 3rem; padding: 10px 14px; border-radius: 2px;
  border: 1px solid var(--edge); background: var(--field); color: var(--ink); caret-color: var(--link);
  font: 400 1.05rem/1.3 var(--font-body);
}
.input::placeholder { color: var(--muted); opacity: 1; }
.input:focus-visible { outline: 3px solid var(--focus); outline-offset: 0; }
.input[aria-invalid="true"] { border-color: var(--red); }
.input-large { font-size: 1.25rem; min-height: 3.5rem; }
select.input { appearance: auto; }
label, legend { display: block; font-weight: 700; margin-bottom: 6px; font-size: 1rem; line-height: 1.4; }
fieldset { border: 0; padding: 0; margin: 0; }
.field { margin-bottom: 18px; }
.choices { display: flex; flex-wrap: wrap; gap: 10px 22px; }
.choice { display: inline-flex; align-items: flex-start; gap: 10px; font-weight: 400; cursor: pointer; min-height: 44px; }
.choice input { width: 22px; height: 22px; margin: 3px 0 0; accent-color: var(--btn); flex: none; }
.form-note { font-size: 0.95rem; color: var(--muted); margin: 8px 0 0; line-height: 1.45; }
.form-error { color: var(--red); font-weight: 700; margin: 10px 0 0; }
.form-error ul { margin: 6px 0 0; padding-left: 20px; font-weight: 400; }
.form-result { padding: 14px 16px; border-radius: 2px; background: var(--band-soft); color: var(--ink); }
.form-result p { margin: 0; }
.form-result .form-note { margin-top: 6px; color: inherit; }
.form-result a { color: inherit; }

.waitlist-form { max-width: 560px; }
.waitlist-row { display: flex; gap: 10px; flex-wrap: wrap; }
.waitlist-row .input { flex: 1 1 220px; min-height: 3.5rem; }
.waitlist-row .btn { flex: 0 0 auto; min-height: 3.5rem; }
@media (max-width: 480px) { .waitlist-row .btn { width: 100%; } }

.flash { margin: 16px 0 0; padding: 12px 16px; border-radius: 2px; background: var(--band-soft); color: var(--ink); }
.flash-alert { background: transparent; border: 2px solid var(--red); }

/* Whatever sits under the band reads in band colours, in both themes. */
.row.is-current, .band-row { color: var(--on-band); --muted: var(--on-band); --link: var(--on-band); --btn: #1C2717; --btn-hover: #34502A; --on-btn: #FBEDBD; --focus: #0B5CAD; }
.row.is-current .input, .band-row .input { --field: #FFFDF5; --ink: #1C2717; --muted: #4A5842; --edge: #7A5C0C; --link: #2F5E22; }

/* Sections */
.section { padding: calc(var(--row) * 3) 0; }
.section-tight { padding: var(--row) 0; }
.section-lead { color: var(--muted); max-width: 40em; }
@media (max-width: 720px) { .section { padding: calc(var(--row) * 2) 0; } }

.fill-olive { background: var(--olive); color: var(--on-olive); --muted: var(--on-olive-muted); --link: var(--on-olive); --focus: #8CC4F2; }
.fill-moss { background: var(--moss); color: var(--on-moss); --muted: var(--on-moss); --link: var(--on-moss); }
@media (prefers-color-scheme: dark) { .fill-moss { --focus: #8CC4F2; --btn: #17200F; --btn-hover: #26361E; --on-btn: #EEF4E6; } }

/* Hero: the chart sheet */
.hero { overflow-x: clip; border-bottom: 1px solid var(--grid-strong); }
.sheet-inner { position: relative; padding: calc(var(--row) * 3) 0 calc(var(--row) * 3); }
.sheet-inner::before { content: ""; position: absolute; inset: 0 -100vw; background-position: 100vw 0; z-index: 0; }
@media (min-width: 720px) { :root { --gutter: calc(var(--col) * 2); } }
.hero-grid { display: grid; gap: var(--row) calc(var(--col) * 2); align-content: start; counter-reset: row; }
@media (min-width: 960px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr) calc(var(--col) * 7); }
  .hero-grid > .row { grid-column: 1; }
  .hero-grid > .dock-wrap { grid-column: 2; grid-row: 1 / span 2; }
}

.row { position: relative; z-index: 1; padding-left: var(--gutter); counter-increment: row; transition: color 200ms ease-out; --row-first: var(--row); }
.row > :last-child { margin-bottom: 0; }
.row::before {
  content: counter(row); position: absolute; left: 0; top: 0; width: calc(var(--gutter) - 14px);
  height: var(--row-first); display: flex; align-items: center; justify-content: flex-end;
  font: 600 0.85rem/1 var(--font-head); font-variant-numeric: tabular-nums; color: var(--muted);
}
.row.is-current::before { font-weight: 800; color: var(--on-band); }
.row-title { --row-first: calc(var(--row) * 2); }
.row-title h1 { margin: 0; font-size: min(3rem, 12.2vw); line-height: calc(var(--row) * 2); max-width: 12ch; letter-spacing: -0.01em; word-spacing: 0.06em; }
@media (min-width: 720px) { .row-title { --row-first: calc(var(--row) * 3); } .row-title h1 { font-size: clamp(3.5rem, 1.6rem + 4.2vw, 5rem); line-height: calc(var(--row) * 3); } }
.hero .lead { margin: 0; }
/* One extra grid row before the form, so the band (which keeps a row of air inside) clears the lead. */
.row-action { scroll-margin-top: 24px; margin-top: var(--row); }
.row-action .form-note { margin-top: 10px; line-height: var(--row); }
.founding-link, .trust { margin: 0; font-size: 1rem; }
.trust { color: var(--muted); }
.trust-sep { color: var(--muted); }

/* The band snaps to the paper's rules: the controller rounds its edges to whole grid rows. */
.band {
  --band-pad: 0px;
  position: absolute; left: -100vw; right: -100vw; top: 0; height: 0; z-index: 0;
  background: var(--band); border-block: 1px solid var(--band-edge);
  transition: transform 420ms cubic-bezier(0.16, 1, 0.3, 1), height 420ms cubic-bezier(0.16, 1, 0.3, 1);
}
.band.is-instant { transition: none; }
@media (prefers-color-scheme: light) { .band { mix-blend-mode: multiply; } }
.sheet:not(.is-live) .band { display: none; }
.sheet:not(.is-live) .row.is-current { background: var(--band); box-shadow: 0 0 0 10px var(--band); }

/* The counter dock, like the one at the bottom of the app */
.dock-wrap { position: relative; z-index: 2; padding-left: var(--gutter); align-self: start; }
/* Tink frogging under the counter: on the graph paper, never on the moss band (DESIGN.md). */
.tink { --tw: min(100%, 15rem); position: relative; width: var(--tw); aspect-ratio: 1; margin: calc(var(--tw) * -0.06) auto calc(var(--tw) * -0.12); }
/* The loop's frame has about 13% empty margin on every side; the negative margins trim it so no gap opens. */
.tink-still, .tink-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
/* On wide screens Tink grows past the counter's column into the gutter on both sides, still above the band. */
@media (min-width: 960px) { .tink { --tw: 20rem; max-width: none; margin-inline: calc((100% - 20rem) / 2); } }
@media (max-width: 959px) { .tink { --tw: min(72%, 14rem); } }
@media (min-width: 960px) { .dock-wrap { padding-left: 0; } }
.dock {
  --focus: #8CC4F2;
  background: var(--dock); color: var(--on-dock); border-radius: 2px;
  display: grid; grid-template-columns: 1fr auto; grid-template-areas: "label label" "count buttons" "hint hint"; align-items: end;
  gap: 4px 16px; padding: 14px 16px 16px;
}
.dock p { margin: 0; }
.dock-label { grid-area: label; font: 700 0.85rem/1 var(--font-head); letter-spacing: 0.08em; text-transform: uppercase; color: var(--on-dock); opacity: 0.85; }
.dock-count { grid-area: count; font: 800 4rem/1 var(--font-head); font-stretch: 75%; font-variant-numeric: tabular-nums; }
.dock-buttons { grid-area: buttons; display: flex; gap: 8px; }
/* No double-tap zoom when + is tapped quickly (iOS Safari). */
button, a, input, label, summary { touch-action: manipulation; }
.dock-btn {
  width: 3.5rem; height: 3.5rem; display: grid; place-items: center; border-radius: 2px; cursor: pointer;
  background: transparent; color: var(--on-dock); border: 2px solid var(--on-dock);
  transition: background-color 160ms ease-out, transform 120ms ease-out;
}
.dock-btn svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: square; }
.dock-btn:hover { background: color-mix(in srgb, var(--on-dock) 14%, transparent); }
.dock-btn:active { transform: translateY(1px); }
.dock-btn-plus { background: var(--band); border-color: var(--band); color: #1C2717; }
.dock-btn-plus:hover { background: #F7D46E; border-color: #F7D46E; }
.dock-btn[aria-disabled="true"] { opacity: 0.4; cursor: not-allowed; }
.dock .dock-hint { grid-area: hint; margin-top: 10px; padding-top: 10px; border-top: 1px solid color-mix(in srgb, var(--on-dock) 25%, transparent); font-size: 0.92rem; line-height: 1.4; color: var(--on-dock); opacity: 0.9; }
@media (max-width: 959px) {
  /* On phones the counter and Tink come after the last row, so rows 1 to 5 stay together and the
     band moves row by row instead of jumping over them. The box starts at the row-number column. */
  .hero-grid > .dock-wrap { order: 1; padding-left: 0; }
  .dock-wrap { max-width: 32rem; }
  .dock { grid-template-columns: auto 1fr auto; grid-template-areas: "label count buttons" "hint hint hint"; align-items: center; }
  .dock-count { font-size: 2.75rem; }
}

/* Ruled lists */
.ruled { list-style: none; padding: 0; margin: 0; border-bottom: 1px solid var(--grid-strong); }
.ruled > li { border-top: 1px solid var(--grid-strong); }

/* Pains: each with a specimen of the problem */
.specimen-row { display: grid; gap: var(--row) calc(var(--col) * 1); padding: var(--row) 0; }
@media (min-width: 760px) { .specimen-row { grid-template-columns: calc(var(--col) * 9) minmax(0, 1fr); align-items: center; } }
.specimen-row p { max-width: 36em; margin: 0; }
/* A closed panel: the border draws all four edges, the paper starts under it so no rule doubles up. */
.specimen { position: relative; height: calc(var(--row) * 4 + 1px); overflow: hidden; border: 1px solid var(--grid-strong); background-position: -1px -1px; display: flex; align-items: center; justify-content: center; }
.skel { display: block; height: 5px; width: 78%; background: var(--skel); border-radius: 1px; }
.skel.short { width: 46%; }
.specimen-slip { flex-direction: column; align-items: flex-start; justify-content: center; gap: 17px; padding-left: 8%; }
.slipped-band { position: absolute; left: 4%; right: 10%; top: 58%; height: 22px; background: var(--band); opacity: 0.9; transform: rotate(-6deg); }
@media (prefers-color-scheme: light) { .slipped-band { mix-blend-mode: multiply; } }
.size-line { font: 700 2rem/1 var(--font-head); font-stretch: 85%; letter-spacing: 0.01em; }
.size-ring { display: inline-block; padding: 0.12em 0.32em; margin: -0.12em 0; border: 2px solid var(--red); border-radius: 50%; color: var(--red); }
.specimen-terms { gap: calc(var(--col) * 1); }
.term-token { display: grid; justify-items: center; text-align: center; gap: 2px; max-width: 46%; }
.term-token b { font: 800 2.4rem/1 var(--font-head); font-stretch: 85%; }
.term-token-trap b { color: var(--red); }
.term-system { font: 700 0.8rem/1 var(--font-head); letter-spacing: 0.08em; }
.term-gloss { font-size: 0.85rem; line-height: 1.25; color: var(--muted); }

/* How it works, written as pattern rows */
.section-sheet { border-block: 1px solid var(--grid-strong); background: var(--tint); }
.pattern-row { display: grid; gap: 4px calc(var(--col) * 1); padding: var(--row) 0; }
@media (min-width: 760px) { .pattern-row { grid-template-columns: calc(var(--col) * 4) minmax(0, 1fr); } }
.pattern-row-label { margin: 0; font: 800 1.15rem/var(--row) var(--font-head); font-stretch: 85%; font-variant-numeric: tabular-nums; }
.pattern-row h3 { margin-bottom: 4px; line-height: var(--row); }
.pattern-row p { margin: 0; max-width: 38em; }

/* Features */
.feature-list { margin: 0; display: grid; column-gap: calc(var(--col) * 2); }
@media (min-width: 760px) { .feature-list { grid-template-columns: 1fr 1fr; } }
.feature { border-top: 1px solid var(--grid-strong); padding: 14px 0 var(--row); }
.feature dt { font: 700 1.2rem/var(--row) var(--font-head); font-stretch: 90%; margin-bottom: 4px; }
.feature dd { margin: 0; max-width: 34em; }
.tag { margin-left: 4px; font: 400 1rem/1 var(--font-body); color: var(--muted); }

/* Pledge: the file and the separate layer of marks */
.pledge { display: grid; gap: calc(var(--row) * 2) calc(var(--col) * 2); align-items: center; }
@media (min-width: 960px) { .pledge { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); } }
.pledge h2 { max-width: 18ch; }
.pledge-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; max-width: 40em; }
.pledge-list li { position: relative; padding-left: calc(var(--col) * 0.75); }
.pledge-list li::before { content: ""; position: absolute; left: 0; top: calc(var(--row) / 2); width: 14px; height: 2px; background: var(--band); }
.pledge-list li:first-child { font: 700 1.45rem/1.2 var(--font-head); font-stretch: 88%; margin-bottom: 6px; }
.pledge-list li:first-child::before { top: 0.6em; }
.layers { position: relative; margin: 0; min-height: 20.5rem; }
.layer { position: absolute; width: 80%; height: 14rem; }
.layer-file { left: 0; top: 2.5rem; border: 1px solid var(--grid-strong); display: flex; flex-direction: column; justify-content: center; gap: 15px; padding-left: 9%; }
.layer-file .skel { background: #9DB08E; }
.layer-marks { left: 1.75rem; top: 1rem; border: 2px dashed var(--on-olive-muted); background: color-mix(in srgb, var(--on-olive) 6%, transparent); }
.mark-band { position: absolute; left: 0; right: 0; top: calc(50% + 4px); height: 24px; background: var(--band); opacity: 0.85; }
.mark-ring { position: absolute; left: 22%; top: 26%; width: 34px; height: 24px; border: 2px solid var(--red); border-radius: 50%; }
@media (prefers-color-scheme: light) { .fill-olive .mark-ring { border-color: #F0A58D; } }
.layers figcaption { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; gap: 12px; font-size: 0.9rem; line-height: 1.3; color: var(--on-olive-muted); }
.layer-caption-marks { text-align: right; }
.layer-caption { max-width: 14em; text-wrap: balance; }
@media (max-width: 959px) { .layers { max-width: 26rem; } }

/* Tool teaser */
.tool-teaser { display: grid; gap: var(--row) calc(var(--col) * 2); align-items: center; }
@media (min-width: 860px) { .tool-teaser { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); } }
.tool-teaser p { max-width: 36em; }
.sample-table { width: 100%; border-collapse: collapse; font-family: var(--font-head); font-variant-numeric: tabular-nums; }
.sample-table th { text-align: left; padding: 8px 14px; font: 700 0.85rem/1 var(--font-head); letter-spacing: 0.08em; color: var(--muted); border-bottom: 2px solid var(--ink); }
.sample-table td { padding: 0 14px; height: calc(var(--row) * 2); font-size: 1.5rem; font-weight: 700; font-stretch: 85%; border-bottom: 1px solid var(--grid-strong); }
.sample-table tr.is-marked td { background: var(--band); color: var(--on-band); border-bottom-color: var(--band-edge); }

/* Pricing */
.price-cols { display: grid; margin-top: var(--row); border-top: 2px solid var(--ink); }
@media (min-width: 760px) { .price-cols { grid-template-columns: 1fr 1fr; } .price-col + .price-col { border-left: 1px solid var(--grid-strong); padding-left: calc(var(--col) * 1); } }
.price-col { padding: var(--row) calc(var(--col) * 1) var(--row) 0; }
@media (max-width: 759px) { .price-col + .price-col { border-top: 1px solid var(--grid-strong); } }
.price-col h3 { font-size: 1.7rem; font-weight: 800; font-stretch: 82%; margin-bottom: 4px; }
.price-line { font: 700 1.15rem/var(--row) var(--font-head); font-stretch: 90%; color: var(--muted); }
.check-list { list-style: none; padding: 0; margin: 0 0 var(--row); }
.check-list li { position: relative; padding-left: 30px; margin-bottom: 6px; }
.check-list li::before { content: ""; position: absolute; left: 3px; top: 0.5em; width: 13px; height: 7px; border-left: 2px solid var(--link); border-bottom: 2px solid var(--link); transform: rotate(-45deg); }
.price-table { margin: 0 0 12px; display: grid; }
.price-table div { display: flex; justify-content: space-between; gap: 12px; border-top: 1px solid var(--grid-strong); padding: 10px 0; }
.price-table div:last-child { border-bottom: 1px solid var(--grid-strong); }
.price-table dt { font-weight: 700; }
.price-table dd { margin: 0; font-family: var(--font-head); font-weight: 700; font-variant-numeric: tabular-nums; }
.promise { margin: 0; padding-top: var(--row); border-top: 1px solid var(--grid-strong); max-width: 44em; font-weight: 700; }

/* FAQ */
.faq details { border-top: 1px solid var(--grid-strong); }
.faq details:last-child { border-bottom: 1px solid var(--grid-strong); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 3.5rem; padding: 10px 0; cursor: pointer; list-style: none; font: 700 1.2rem/1.3 var(--font-head); font-stretch: 90%; }
.faq summary::-webkit-details-marker { display: none; }
.faq-icon { flex: none; width: 24px; height: 24px; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: square; }
.faq details[open] .faq-icon-v { display: none; }
.faq details p { margin: 0 0 var(--row); max-width: 40em; }

/* Closing: the two ways in */
.close-grid { display: grid; gap: calc(var(--row) * 2) calc(var(--col) * 2); }
@media (min-width: 960px) { .close-grid { grid-template-columns: 1fr 1fr; } .close-founding { border-left: 1px solid color-mix(in srgb, var(--on-moss) 35%, transparent); padding-left: calc(var(--col) * 2); } }
.close h2 { max-width: 16ch; }
.close .lead, .close p { max-width: 32em; }
.band-row { margin: var(--row) -12px 0; padding: 12px; background: var(--band); border-block: 1px solid var(--band-edge); }
.band-row .form-note { margin-top: 10px; }
.btn-dark { --btn: #1C2717; --btn-hover: #34502A; --on-btn: #FBEDBD; }
@media (prefers-color-scheme: dark) { .btn-dark { --btn: #EEF4E6; --btn-hover: #FFFFFF; --on-btn: #17200F; } }

/* Page heads (founding, translator, legal) */
.page-head { border-bottom: 1px solid var(--grid-strong); padding: calc(var(--row) * 3) 0 calc(var(--row) * 2); }
.page-head h1 { max-width: 18ch; }
.breadcrumbs { font-size: 0.95rem; color: var(--muted); margin-bottom: var(--row); }
.breadcrumbs a { color: var(--muted); }
.answer-box { max-width: 44em; padding: 12px 0; border-block: 1px solid var(--grid-strong); }
.two-col { display: grid; gap: var(--row) calc(var(--col) * 1); }
@media (min-width: 700px) { .two-col { grid-template-columns: 1fr 1fr; } }
.card { border-top: 2px solid var(--ink); padding: var(--row) 0 0; }
.card h2, .card .h3 { margin-bottom: 12px; }
.card p:last-child { margin-bottom: 0; }
.founding-form { scroll-margin-top: 24px; }

/* Term translator */
.lookup-card { padding-bottom: 4px; }
.lookup-form { display: grid; gap: 0 14px; align-items: end; }
@media (min-width: 760px) { .lookup-form { grid-template-columns: 1fr 220px auto; } .lookup-form .btn { margin-bottom: 18px; min-height: 3.5rem; } }
.lookup-form select.input { min-height: 3.5rem; }
.lookup-results { display: grid; gap: 14px; margin-top: 4px; }
.lookup-results:empty { display: none; }
.result { border: 1px solid var(--grid-strong); padding: 16px 18px; background: var(--field); }
.result-trap { border-top: 3px solid var(--red); }
.result-typed { margin: 0 0 10px; color: var(--muted); }
.result-typed strong { color: var(--ink); font-size: 1.15rem; }
.result-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin: 0; }
.result-grid > div { padding: 10px 12px; border: 1px solid var(--grid-strong); background: var(--stock); }
.result-grid > div.is-from { background: var(--band); border-color: var(--band-edge); color: var(--on-band); }
.result-grid > div.is-from dt, .result-grid > div.is-from .term-abbr { color: var(--on-band); }
.result-grid dt { font: 700 0.8rem/1.3 var(--font-head); text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.result-grid dd { margin: 2px 0 0; font-size: 1.1rem; }
.result-definition { margin: 12px 0 0; }
.trap-note { margin: 12px 0 0; color: var(--red); font-weight: 700; }
.term-name { font-weight: 700; }
.term-abbr { color: var(--muted); font-family: var(--font-head); font-weight: 600; font-size: 0.98em; }
.no-match p { margin: 0 0 8px; }
.chip { display: inline-flex; align-items: center; min-height: 36px; margin: 4px 6px 0 0; padding: 2px 12px; border-radius: 2px; border: 1px solid var(--edge); background: var(--field); text-decoration: none; font: 700 1rem/1 var(--font-head); color: var(--ink); }

.table-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 6px 24px; }
.table-head h2 { margin-bottom: 18px; }
.table-head .field { width: min(100%, 320px); }
.table-caption { margin: var(--row) 0 10px; font-size: 1.3rem; }
.table-wrap { border: 1px solid var(--grid-strong); background: var(--field); }
.term-table { width: 100%; border-collapse: collapse; font-size: 1rem; }
.term-table th { text-align: left; font: 700 0.8rem/1.3 var(--font-head); text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); padding: 12px 14px; border-bottom: 2px solid var(--ink); background: var(--tint); }
.term-table td { padding: 11px 14px; border-bottom: 1px solid var(--grid-strong); vertical-align: top; }
.term-table tr:last-child td { border-bottom: 0; }
.term-table tbody tr:hover { background: var(--band-soft); }
.term-table tr.trap td:first-child { background: var(--red-soft); }
.term-table .definition { color: var(--muted); font-size: 0.95rem; }
@media (max-width: 640px) {
  .term-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .term-table tr { display: block; padding: 10px 14px; border-bottom: 1px solid var(--grid-strong); }
  .term-table tr:last-child { border-bottom: 0; }
  .term-table td { display: grid; grid-template-columns: 7.5em 1fr; gap: 10px; padding: 3px 0; border: 0; }
  .term-table td::before { content: attr(data-label); font: 700 0.78rem/1.3 var(--font-head); text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); padding-top: 3px; }
  .term-table tr.trap { background: var(--red-soft); }
  .term-table tr.trap td:first-child { background: none; }
}
.data-note { margin-top: 14px; }
.sources { padding-left: 20px; }
.sources li { margin-bottom: 6px; }

/* Legal */
.legal h2 { margin-top: 1.4em; }
.imprint-list div { display: grid; grid-template-columns: 9em 1fr; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--grid-strong); }
.imprint-list dt { font-weight: 700; }
.imprint-list dd { margin: 0; }

/* Footer */
.site-footer { padding: calc(var(--row) * 2) 0 var(--row); background: var(--olive); color: var(--on-olive); --muted: var(--on-olive-muted); --focus: #8CC4F2; }
.site-footer a { color: var(--on-olive); }
.footer-cols { display: grid; gap: var(--row) calc(var(--col) * 1); grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.footer-about { max-width: 22em; }
.footer-about p { margin-bottom: 12px; }
.footer-brand { margin-bottom: 8px; color: var(--on-olive); }
.footer-heading { font: 700 0.85rem/1.3 var(--font-head); text-transform: uppercase; letter-spacing: 0.08em; color: var(--on-olive-muted); margin-bottom: 6px; }
.footer-list { list-style: none; padding: 0; margin: 0; }
.footer-list a { display: inline-flex; align-items: center; min-height: 40px; }
.footer-list a[aria-current="page"] { font-weight: 700; text-decoration: none; }

/* Language menu: a globe button with the current code, the list in each language's own words. Flat
   like the rest of the sheet: a ruled panel, no shadow. */
.lang-menu { position: relative; }
.lang-menu summary { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 10px; border-radius: 2px; color: var(--ink); font: 700 0.9rem/1 var(--font-head); letter-spacing: 0.04em; cursor: pointer; list-style: none; }
.lang-menu summary::-webkit-details-marker { display: none; }
.lang-menu summary:hover, .lang-menu[open] summary { background: var(--tint); }
.lang-menu .icon, .lang-menu .chevron { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.lang-menu .icon { width: 18px; height: 18px; }
.lang-menu .chevron { width: 14px; height: 14px; transition: transform 150ms ease-out; }
.lang-menu[open] .chevron { transform: rotate(180deg); }
.lang-menu ul { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; min-width: 200px; max-height: min(70vh, 32rem); overflow-y: auto; margin: 0; padding: 6px; list-style: none; background: var(--field); border: 1px solid var(--grid-strong); border-radius: 2px; }
.lang-menu-up ul { top: auto; bottom: calc(100% + 6px); left: 0; right: auto; }
.lang-menu a { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 40px; padding: 0 12px; border-radius: 2px; color: var(--ink); text-decoration: none; font-weight: 600; }
.lang-menu a:hover { background: var(--tint); }
.lang-menu a[aria-current="page"] { background: var(--band-soft); }
.lang-code { color: var(--muted); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.04em; }
.footer-about ~ div .lang-menu summary, .site-footer .lang-menu summary { color: var(--on-olive); border: 1px solid color-mix(in srgb, var(--on-olive) 35%, transparent); }
.site-footer .lang-menu summary:hover, .site-footer .lang-menu[open] summary { background: color-mix(in srgb, var(--on-olive) 12%, transparent); }
.copyright { margin: var(--row) 0 0; padding-top: 14px; border-top: 1px solid color-mix(in srgb, var(--on-olive) 25%, transparent); color: var(--on-olive-muted); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}