/* ==========================================================================
   onetime — application stylesheet
   --------------------------------------------------------------------------
   Single file, no build step. Order: tokens, reset, primitives, components,
   page blocks, responsive, accessibility overrides.

   Colour rule that shapes several decisions below: --green (#00EA96) sits at
   1.59:1 on white, so it never carries text or state on a light surface. It is
   allowed as a highlighter behind dark text, as a fill behind --green-ink, on
   navy, and in ::selection. Success *text* uses --success-600.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Brand — taken verbatim from fortion.cz */
  --blue: #0000ff;
  --blue-deep: #000087;
  --blue-700: #1f1fa3;
  --green: #00ea96;
  --green-ink: #003a26;
  --ink: #0d0d2a;
  --ink-2: #3b3b56;
  --ink-3: #6c6c87;
  --line: #e5e5ec;
  --bg: #fff;
  --bg-soft: #fafafc;
  --bg-tint: #f3f3f8;
  --radius-card: 20px;
  --radius-pill: 999px;
  --max: 1240px;

  /* Interaction states */
  --blue-hover: #1414d6;
  --blue-active: #0000cc;
  --disabled-bg: #eaeaf0;
  --disabled-ink: #9a9ab0;

  /* State colours */
  --success: #00c47f;
  --success-600: #00794f;
  --success-700: #005c3c;
  --success-bg: #e6fbf3;
  --success-border: #a6ecd0;
  --warning: #ffb020;
  --warning-600: #8a5300;
  --warning-bg: #fff6e5;
  --warning-border: #ffdb99;
  --danger: #e02a52;
  --danger-600: #c0123c;
  --danger-700: #96002d;
  --danger-bg: #fff0f3;
  --danger-border: #f7bccb;
  --info: var(--blue-700);
  --info-bg: #f0f0ff;
  --info-border: #c9c9f5;

  /* Elevation */
  --shadow-card: 0 2px 8px rgba(13, 13, 42, 0.05);
  --shadow-lift: 0 12px 28px rgba(0, 0, 255, 0.13), 0 3px 8px rgba(0, 0, 255, 0.07);
  --shadow-btn: 0 6px 16px rgba(0, 0, 255, 0.22);
  --shadow-pop: 0 20px 48px rgba(13, 13, 42, 0.16);

  /* Spacing scale */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;

  /* Radii */
  --radius-input: 12px;
  --radius-sm: 10px;
  --radius-md: 16px;

  /* Motion */
  --dur-fast: 0.15s;
  --dur-base: 0.2s;
  --ease: cubic-bezier(0.2, 0.8, 0.3, 1);

  /* Measures */
  --max-card: 720px;
  --max-narrow: 560px;
  --max-prose: 68ch;
  --header-h: 72px;
  --tap-min: 44px;

  /* Type */
  --font-head: "TT Norms Pro", "Manrope", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Layering */
  --z-base: 0;
  --z-sticky: 10;
  --z-header: 20;
  --z-pop: 30;
  --z-skip: 40;

  /* Focus ring, recomputed under prefers-contrast */
  --focus-ring: 3px;
  --focus-color: color-mix(in oklab, var(--blue) 45%, white);
}

/* --------------------------------------------------------------------------
   2. Reset and base
   -------------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + var(--sp-4));
}

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

h1,
h2,
h3,
h4 {
  font-family: var(--font-head);
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.15;
  margin: 0;
  text-wrap: balance;
}

h1 {
  font-size: clamp(40px, 6vw, 72px);
}
h2 {
  font-size: clamp(30px, 4vw, 48px);
}
h3 {
  font-size: clamp(20px, 2.2vw, 24px);
}
h4 {
  font-size: 18px;
}

p {
  margin: 0;
  text-wrap: pretty;
}

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

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

img,
svg {
  max-width: 100%;
}

/* Icons are inline <svg class="icon"> so they inherit colour and survive
   forced-colours mode, where background images are dropped. Stroke rather than
   fill by default; .icon--solid flips it. */
.icon {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon--solid {
  fill: currentColor;
  stroke: none;
}

button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
}

::selection {
  background: var(--green);
  color: var(--green-ink);
}

:focus-visible {
  outline: var(--focus-ring) solid var(--focus-color);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Navy surfaces need a ring that survives a dark background. */
.navy :focus-visible {
  outline-color: var(--green);
}

/* --------------------------------------------------------------------------
   3. Utilities
   -------------------------------------------------------------------------- */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.wrap {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--sp-5);
}

.prose {
  max-width: var(--max-prose);
}

.page-pad {
  padding-block: var(--sp-8);
}

.stack > * + * {
  margin-top: var(--stack-gap, var(--sp-4));
}

.is-hidden {
  display: none !important;
}

/* Spacing utilities. Deliberately few: anything used more than a handful of
   times gets a component class instead. */
.m-0 {
  margin: 0;
}
.mt-1 {
  margin-top: var(--sp-1);
}
.mt-3 {
  margin-top: var(--sp-3);
}
.mt-4 {
  margin-top: var(--sp-4);
}
.mt-5 {
  margin-top: var(--sp-5);
}
.mt-6 {
  margin-top: var(--sp-6);
}
.mb-4 {
  margin-bottom: var(--sp-4);
}
.mb-5 {
  margin-bottom: var(--sp-5);
}

/* A fieldset is the right element for a radiogroup, but its default border and
   padding are not. */
.fieldset-bare {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}

.mono {
  font-family: var(--font-mono);
}

.nowrap {
  white-space: nowrap;
}

.text-muted {
  color: var(--ink-3);
}

/* Kicker / eyebrow — mono, uppercase, wide tracking. */
.kicker {
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-3);
  margin: 0 0 var(--sp-3);
}

.navy .kicker {
  color: var(--green);
}

.lead {
  font-size: clamp(17px, 1.4vw, 19px);
  color: var(--ink-2);
  line-height: 1.55;
}

/* Highlighter: green sits behind dark text, never carries it. */
.mark-hl {
  background: linear-gradient(transparent 62%, var(--green) 62%);
  padding-inline: 2px;
}

/* On navy the highlight would muddy, so the word itself turns green — it is
   9.78:1 against --blue-deep. */
.navy .mark-hl {
  background: none;
  color: var(--green);
  padding-inline: 0;
}

.hairline {
  height: 1px;
  background: var(--line);
  border: 0;
  margin: var(--sp-5) 0;
}

/* --------------------------------------------------------------------------
   4. Skip link, live regions
   -------------------------------------------------------------------------- */

.skip {
  position: absolute;
  left: var(--sp-4);
  top: var(--sp-2);
  z-index: var(--z-skip);
  transform: translateY(-200%);
  background: var(--blue);
  color: #fff;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius-sm);
  text-decoration: none;
  font-weight: 600;
  transition: transform var(--dur-fast) var(--ease);
}

.skip:focus {
  transform: translateY(0);
  color: #fff;
}

/* --------------------------------------------------------------------------
   5. Header / footer
   -------------------------------------------------------------------------- */

.site-header {
  height: var(--header-h);
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
  position: relative;
  z-index: var(--z-header);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  width: 100%;
}



/* A wrapper, not a link: the logo goes to the company, the suffix goes home,
   so the two destinations must not share one hit area. */
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  margin-right: auto;
}

/* Both halves are their own tap target, which the single old link was not. */
.brand__logo,
.brand__suffix {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  text-decoration: none;
}

.brand__mark {
  display: block;
  height: 24px;
  width: auto;
  flex: 0 0 auto;
}

.brand__suffix {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding-left: var(--sp-3);
  border-left: 1px solid var(--line);
}

.brand__suffix:hover {
  color: var(--ink-1);
}

.nav {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
}

.nav__link {
  color: var(--ink-2);
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  min-height: var(--tap-min);
  display: inline-flex;
  align-items: center;
}

.nav__link:hover,
.nav__link[aria-current="page"] {
  color: var(--blue);
}

.lang {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
}

.lang__item {
  min-width: var(--tap-min);
  min-height: var(--tap-min);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: var(--ink-3);
}

.lang__item[aria-current="true"] {
  color: var(--ink);
  font-weight: 600;
}

.lang__sep {
  color: var(--line);
}

.site-footer {
  border-top: 1px solid var(--line);
  margin-top: var(--sp-9);
  padding: var(--sp-6) 0;
  background: var(--bg-soft);
  color: var(--ink-3);
  font-size: 14px;
}

/* Legal identification left, navigation right. The two halves are separate
   flex children so the gap falls only between them; inside the left half the
   text stays inline, because a gap there broke one sentence into detached
   fragments that read as unrelated. Below the wrap both simply stack. */
.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--sp-2) var(--sp-5);
  line-height: 1.7;
}

.site-footer__legal {
  margin: 0;
}

.site-footer__links {
  white-space: nowrap;
}

.site-footer__sep {
  margin: 0 var(--sp-2);
  color: var(--line);
}

.site-footer a {
  color: var(--ink-2);
  text-decoration: none;
}

.site-footer a:hover {
  color: var(--blue);
  text-decoration: underline;
}

.site-footer__spacer {
  margin-left: auto;
}

/* --------------------------------------------------------------------------
   6. Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 14px 24px;
  min-height: var(--tap-min);
  border-radius: var(--radius-pill);
  border: 1px solid transparent; /* keeps a visible edge in forced colours */
  font-weight: 600;
  font-size: 15px;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  background: none;
  transition:
    transform var(--dur-fast) var(--ease),
    box-shadow var(--dur-base) var(--ease),
    background-color var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease);
}

.btn__arrow {
  transition: transform var(--dur-base) var(--ease);
}

.btn:hover .btn__arrow {
  transform: translateX(3px);
}

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

.btn--primary:hover {
  background: var(--blue-hover);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: var(--shadow-btn);
}

.btn--primary:active {
  background: var(--blue-active);
  transform: translateY(0);
  box-shadow: none;
}

.btn--ghost {
  background: var(--bg);
  border-color: var(--line);
  color: var(--ink);
}

.btn--ghost:hover {
  border-color: var(--blue);
  color: var(--blue);
  transform: translateY(-1px);
}

.btn--danger {
  background: var(--danger-600);
  color: #fff;
}

.btn--danger:hover {
  background: var(--danger-700);
  color: #fff;
  transform: translateY(-1px);
}

.btn--danger-ghost {
  background: var(--bg);
  border-color: var(--danger-border);
  color: var(--danger-600);
}

.btn--danger-ghost:hover {
  background: var(--danger-bg);
  border-color: var(--danger-600);
  color: var(--danger-700);
}

.btn--small {
  padding: 8px 16px;
  font-size: 13px;
  min-height: 36px;
}

.btn--block {
  width: 100%;
}

.btn--tall {
  min-height: 52px;
  font-size: 16px;
}

.btn[disabled],
.btn[aria-disabled="true"] {
  background: var(--disabled-bg);
  border-color: transparent;
  color: var(--disabled-ink);
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

.btn[disabled] .btn__arrow,
.btn[aria-disabled="true"] .btn__arrow {
  transform: none;
}

/* Ghost pills sitting on navy. */
.navy .btn--ghost {
  background: color-mix(in oklab, white 8%, transparent);
  border-color: rgba(255, 255, 255, 0.28);
  color: #fff;
}

.navy .btn--ghost:hover {
  background: color-mix(in oklab, white 14%, transparent);
  border-color: var(--green);
  color: #fff;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: center;
}

/* --------------------------------------------------------------------------
   7. Cards and surfaces
   -------------------------------------------------------------------------- */

.card {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: var(--sp-6);
  box-shadow: var(--shadow-card);
}

.card--wide {
  max-width: var(--max-card);
  margin-inline: auto;
}

.card--narrow {
  max-width: var(--max-narrow);
  margin-inline: auto;
}

.card--flat {
  box-shadow: none;
}

.panel {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: var(--sp-5);
}

/* --------------------------------------------------------------------------
   8. Navy section
   -------------------------------------------------------------------------- */

.navy {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--blue-deep);
  color: #fff;
  padding: var(--sp-9) 0;
}

.navy::before {
  content: "";
  position: absolute;
  inset: -30% -10% auto -10%;
  height: 120%;
  z-index: -1;
  background: radial-gradient(
    60% 50% at 70% 10%,
    color-mix(in oklab, var(--green) 26%, transparent),
    transparent 70%
  );
  pointer-events: none;
}

.navy p {
  color: rgba(255, 255, 255, 0.78);
}

.navy a {
  color: var(--green);
}

.glass-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--sp-4);
  margin-top: var(--sp-7);
}

.glass-card {
  background: color-mix(in oklab, white 6%, transparent);
  border: 1px solid color-mix(in oklab, white 12%, transparent);
  border-radius: var(--radius-card);
  padding: var(--sp-5);
}

.glass-card__num {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--green);
  display: block;
  margin-bottom: var(--sp-3);
}

.glass-card h3 {
  font-size: 20px;
  margin-bottom: var(--sp-2);
}

/* --------------------------------------------------------------------------
   9. Form controls
   -------------------------------------------------------------------------- */

.field {
  display: block;
}

.label-mono {
  display: block;
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-3);
  margin-bottom: var(--sp-3);
}

.hint {
  font-size: 13px;
  color: var(--ink-3);
  margin-top: var(--sp-2);
}

.input,
.textarea {
  width: 100%;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-input);
  padding: 0 var(--sp-4);
  /* 16px keeps iOS from zooming the viewport on focus. */
  font-size: 16px;
  transition:
    border-color var(--dur-fast) var(--ease),
    background-color var(--dur-fast) var(--ease);
}

.input {
  height: 48px;
}

.input:hover,
.textarea:hover {
  border-color: #d5d5e0;
}

.input:focus,
.textarea:focus {
  outline: none;
  background: var(--bg);
  border-color: var(--blue);
  box-shadow: 0 0 0 3px var(--focus-color);
}

.input[aria-invalid="true"],
.textarea[aria-invalid="true"] {
  border-color: var(--danger);
  background: var(--danger-bg);
}

.input[readonly] {
  background: var(--bg-tint);
}

.input--mono,
.textarea--mono {
  font-family: var(--font-mono);
}

.input--number {
  width: 96px;
}

.textarea {
  display: block;
  min-height: 168px;
  padding: var(--sp-4);
  line-height: 1.6;
  resize: vertical;
}

.input-group {
  display: flex;
  gap: var(--sp-2);
  align-items: center;
}

.input-group .input {
  flex: 1 1 auto;
  min-width: 0;
}

/* Eye toggle and other square icon buttons. */
.icon-btn {
  flex: 0 0 auto;
  width: var(--tap-min);
  height: var(--tap-min);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-input);
  background: var(--bg);
  color: var(--ink-2);
  cursor: pointer;
  transition:
    border-color var(--dur-fast) var(--ease),
    color var(--dur-fast) var(--ease);
}

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

.icon-btn[aria-pressed="true"] {
  border-color: var(--blue);
  color: var(--blue);
  background: var(--info-bg);
}

/* --- segmented control (text / file) ------------------------------------ */

.seg {
  display: inline-flex;
  padding: 4px;
  gap: 4px;
  background: var(--bg-tint);
  border-radius: var(--radius-pill);
}

.seg__btn {
  appearance: none;
  border: 1px solid transparent;
  background: none;
  border-radius: var(--radius-pill);
  padding: 0 var(--sp-5);
  height: 36px;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-2);
  cursor: pointer;
  transition:
    background-color var(--dur-fast) var(--ease),
    color var(--dur-fast) var(--ease);
}

.seg__btn:hover {
  color: var(--ink);
}

.seg__btn[aria-selected="true"] {
  background: var(--bg);
  color: var(--blue);
  box-shadow: var(--shadow-card);
}

.seg__btn[disabled] {
  color: var(--disabled-ink);
  cursor: not-allowed;
}

/* --- chips --------------------------------------------------------------- */

/* Wraps onto a second row rather than scrolling sideways: a horizontal scroll
   container hides options that people never discover on touch. */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  height: 36px;
  padding: 0 var(--sp-4);
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--ink-2);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
}

/* Radio chips: the input stays in the DOM for keyboard and AT, the label is
   the visible control. Arrow keys work natively inside the radiogroup. */
.chip--radio {
  position: relative;
  cursor: pointer;
  transition:
    border-color var(--dur-fast) var(--ease),
    background-color var(--dur-fast) var(--ease),
    color var(--dur-fast) var(--ease);
}

.chip--radio input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
}

.chip--radio:hover {
  border-color: var(--blue);
  color: var(--blue);
}

.chip--radio:has(input:checked) {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
}

.chip--radio:has(input:focus-visible) {
  outline: var(--focus-ring) solid var(--focus-color);
  outline-offset: 2px;
}

.chip--meta {
  background: var(--bg-tint);
  border-color: transparent;
  color: var(--ink-2);
  font-size: 13px;
}

.chip--success {
  background: var(--success-bg);
  border-color: var(--success-border);
  color: var(--success-600);
}

.chip--warning {
  background: var(--warning-bg);
  border-color: var(--warning-border);
  color: var(--warning-600);
}

.chip--info {
  background: var(--info-bg);
  border-color: var(--info-border);
  color: var(--info);
}

/* The one place a green fill is allowed: dark ink on green, 8.08:1. */
.chip--green {
  background: var(--green);
  border-color: var(--green);
  color: var(--green-ink);
  font-weight: 600;
}

.chip__icon {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}

/* --------------------------------------------------------------------------
   10. Disclosure (details / summary)
   -------------------------------------------------------------------------- */

.details {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--bg-soft);
}

.details__summary {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: 48px;
  padding: var(--sp-2) var(--sp-4);
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  font-size: 15px;
  border-radius: var(--radius-md);
}

.details__summary::-webkit-details-marker {
  display: none;
}

.details__chevron {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  color: var(--ink-3);
  transition: transform var(--dur-base) var(--ease);
}

.details[open] > .details__summary .details__chevron {
  transform: rotate(90deg);
}

/* Live summary of the current choices, right-aligned in the summary row. */
.details__value {
  margin-left: auto;
  font-size: 13px;
  font-weight: 400;
  color: var(--ink-3);
  text-align: right;
}

.details__body {
  padding: 0 var(--sp-4) var(--sp-5);
}

/* Plain inline disclosure, used for "why do I have to click?" */
.disclosure {
  border: 0;
  background: none;
}

.disclosure > summary {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: var(--tap-min);
  cursor: pointer;
  list-style: none;
  font-size: 14px;
  font-weight: 500;
  color: var(--blue-700);
}

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

.disclosure > summary:hover {
  color: var(--blue);
}

.disclosure__body {
  font-size: 14px;
  color: var(--ink-2);
  padding-top: var(--sp-2);
  max-width: var(--max-prose);
}

/* --------------------------------------------------------------------------
   11. Callouts
   -------------------------------------------------------------------------- */

.callout {
  display: flex;
  gap: var(--sp-3);
  border-radius: var(--radius-md);
  padding: var(--sp-4);
  font-size: 14px;
  line-height: 1.5;
  border-left: 3px solid var(--ink-3);
  background: var(--bg-tint);
  color: var(--ink-2);
}

.callout__icon {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin-top: 1px;
}

.callout--info {
  border-left-color: var(--info);
  background: var(--info-bg);
  color: var(--blue-700);
}

.callout--success {
  border-left-color: var(--success-600);
  background: var(--success-bg);
  color: var(--success-700);
}

.callout--warning {
  border-left-color: var(--warning-600);
  background: var(--warning-bg);
  color: var(--warning-600);
}

.callout--danger {
  border-left-color: var(--danger-600);
  background: var(--danger-bg);
  color: var(--danger-700);
}

/* Inline form-level error message. */
.form-error {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  color: var(--danger-700);
  font-size: 14px;
  font-weight: 500;
}

.form-error__icon {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}

/* --------------------------------------------------------------------------
   12. Code blocks
   -------------------------------------------------------------------------- */

.code {
  position: relative;
  background: var(--ink);
  border-radius: var(--radius-md);
  padding: var(--sp-5);
  overflow-x: auto;
}

.code pre {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.88);
  white-space: pre;
}

.code .tok-str {
  color: var(--green);
}

.code .tok-key {
  color: #b9b9ff;
}

.code .tok-com {
  color: rgba(255, 255, 255, 0.45);
}

.code__copy {
  position: absolute;
  top: var(--sp-3);
  right: var(--sp-3);
  min-height: 32px;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255, 255, 255, 0.24);
  background: color-mix(in oklab, white 8%, transparent);
  color: rgba(255, 255, 255, 0.88);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}

.code__copy:hover {
  background: color-mix(in oklab, white 16%, transparent);
  border-color: var(--green);
}

code.inline {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--bg-tint);
  border-radius: 5px;
  padding: 2px 5px;
}

/* --------------------------------------------------------------------------
   13. Create page
   -------------------------------------------------------------------------- */

.hero {
  padding: var(--sp-8) 0 var(--sp-6);
  text-align: center;
}

.hero__lead {
  margin: var(--sp-5) auto 0;
  max-width: 56ch;
}

.composer {
  margin-bottom: var(--sp-8);
}

.composer__head {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin-bottom: var(--sp-4);
}

.composer__counter {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  /* Invisible until the input is worth counting — see js/app.js. */
  color: transparent;
  transition: color var(--dur-base) var(--ease);
}

.composer__counter[data-level="near"] {
  color: var(--warning-600);
}

.composer__counter[data-level="over"] {
  color: var(--danger-600);
  font-weight: 600;
}

.drop {
  border: 2px dashed var(--line);
  border-radius: var(--radius-md);
  background: var(--bg-soft);
  padding: var(--sp-7) var(--sp-5);
  text-align: center;
  transition:
    border-color var(--dur-fast) var(--ease),
    background-color var(--dur-fast) var(--ease);
}

.drop__title {
  font-weight: 600;
  margin-bottom: var(--sp-2);
}

.drop__or {
  color: var(--ink-3);
  font-size: 13px;
  margin: var(--sp-3) 0;
}

/* Set on <body> while a file is over the window, so the whole page reacts. */
body.is-dragging .drop,
.drop.is-over {
  border-color: var(--blue);
  background: var(--info-bg);
}

.filerow {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-input);
  background: var(--bg-soft);
  padding: var(--sp-3);
}

.filerow__icon {
  width: 24px;
  height: 24px;
  color: var(--ink-3);
  flex: 0 0 auto;
}

.filerow__name {
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.filerow__size {
  color: var(--ink-3);
  font-size: 13px;
  margin-left: auto;
  white-space: nowrap;
}

.filerow__remove {
  flex: 0 0 auto;
  width: var(--tap-min);
  height: var(--tap-min);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--radius-pill);
  background: none;
  color: var(--ink-3);
  cursor: pointer;
}

.filerow__remove:hover {
  background: var(--danger-bg);
  color: var(--danger-600);
}

/* --- upload progress ----------------------------------------------------- */

.progress {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.progress__track {
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--bg-tint);
  overflow: hidden;
}

.progress__bar {
  height: 100%;
  width: 0;
  border-radius: var(--radius-pill);
  background: var(--blue);
  /* Motion here is information, so it survives reduced-motion. */
  transition: width var(--dur-base) linear;
}

.progress__meta {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: 13px;
  color: var(--ink-2);
}

.progress__cancel {
  margin-left: auto;
  border: 0;
  background: none;
  color: var(--danger-600);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  min-height: var(--tap-min);
  padding-inline: var(--sp-2);
}

/* --- result (in-place swap) ---------------------------------------------- */

/* Once the link exists, the result is the whole page. The hero still promises
   something the visitor has already done, and the three-step explainer below
   answers a question they no longer have — both are stale context around the
   one string they must not lose. */
body.is-result .hero,
body.is-result #how {
  display: none;
}

/* The hero was also what held the card off the header. With it gone the card
   butts straight up against the border, so the spacing has to be restored
   explicitly rather than inherited from a section that is no longer there. */
body.is-result #composer {
  margin-top: var(--sp-8);
}

/* h1 for the document outline, h2 for the eye: inside a card this heading is a
   section title, not a page-wide banner. */
#result h1 {
  font-size: clamp(30px, 4vw, 48px);
}

.result__icon {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-pill);
  background: var(--green);
  color: var(--green-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--sp-4);
}

.result__icon svg {
  width: 28px;
  height: 28px;
}

.linkbox {
  display: flex;
  gap: var(--sp-2);
  align-items: center;
}

.linkbox .input {
  font-size: 14px;
}

/* --------------------------------------------------------------------------
   14. Gate page
   -------------------------------------------------------------------------- */

/* dvh, not vh: on mobile the browser chrome collapses and vh overshoots, which
   pushes the single decision on this page below the fold. */
body.page-gate {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

body.page-gate .main {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-6) 0;
}

.gate__inner {
  width: 100%;
  max-width: var(--max-narrow);
  margin-inline: auto;
  text-align: center;
}

.gate__icon {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-pill);
  background: color-mix(in oklab, var(--blue) 8%, white);
  color: var(--blue);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--sp-5);
}

.gate__icon svg {
  width: 28px;
  height: 28px;
}

.gate__icon--key {
  background: var(--warning-bg);
  color: var(--warning-600);
}

.gate__chips {
  justify-content: center;
  margin-top: var(--sp-5);
}

.gate__cta {
  margin-top: var(--sp-6);
}

.gate__cta-hint {
  margin-top: var(--sp-3);
  font-size: 13px;
  color: var(--ink-3);
}

.gate__why {
  margin-top: var(--sp-6);
}

/* Revealed content: selectable in one gesture, wraps anywhere so a long key
   never forces a horizontal scroll. */
.secret {
  margin: 0;
  text-align: left;
  font-family: var(--font-mono);
  font-size: 16px;
  line-height: 1.6;
  background: var(--bg-tint);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: var(--sp-4);
  max-height: 40vh;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-all;
  user-select: all;
  -webkit-user-select: all;
}

.shake {
  animation: shake 0.2s var(--ease);
}

@keyframes shake {
  0%,
  100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-6px);
  }
  75% {
    transform: translateX(6px);
  }
}

.noscript {
  margin: var(--sp-5) 0;
}

/* --------------------------------------------------------------------------
   15. Receipt page
   -------------------------------------------------------------------------- */

.receipt {
  max-width: var(--max-card);
  margin-inline: auto;
  padding: var(--sp-7) 0;
}

.state {
  display: flex;
  gap: var(--sp-4);
  align-items: flex-start;
}

.state__dot {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-tint);
  color: var(--ink-3);
}

.state__dot svg {
  width: 20px;
  height: 20px;
}

.state__title {
  font-size: 24px;
  margin-bottom: var(--sp-1);
}

.state__sub {
  color: var(--ink-2);
  font-size: 15px;
}

.state--new .state__dot {
  background: var(--info-bg);
  color: var(--blue);
  animation: pulse 2s ease-in-out infinite;
}

.state--consumed .state__dot {
  background: var(--success-bg);
  color: var(--success-600);
}

.state--burned .state__dot {
  background: var(--bg-tint);
  color: var(--ink-3);
}

.state--destroyed .state__dot {
  background: var(--danger-bg);
  color: var(--danger-600);
}

.state--expired .state__dot {
  background: var(--warning-bg);
  color: var(--warning-600);
}

@keyframes pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 color-mix(in oklab, var(--blue) 30%, transparent);
  }
  50% {
    box-shadow: 0 0 0 8px color-mix(in oklab, var(--blue) 0%, transparent);
  }
}

.dl {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: var(--sp-3) var(--sp-4);
  margin: 0;
  font-size: 15px;
}

.dl dt {
  color: var(--ink-3);
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding-top: 3px;
}

.dl dd {
  margin: 0;
  color: var(--ink);
}

.burn__hint {
  font-size: 13px;
  color: var(--ink-3);
  margin-top: var(--sp-2);
}

/* --------------------------------------------------------------------------
   16. Status page
   -------------------------------------------------------------------------- */

.status {
  min-height: calc(100dvh - var(--header-h));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-7) 0;
  text-align: center;
}

.status__inner {
  max-width: var(--max-narrow);
}

.status__icon {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-tint);
  color: var(--ink-3);
  margin-bottom: var(--sp-5);
}

.status__icon svg {
  width: 28px;
  height: 28px;
}

.status__icon--warning {
  background: var(--warning-bg);
  color: var(--warning-600);
}

.status__icon--danger {
  background: var(--danger-bg);
  color: var(--danger-600);
}

.status__icon--muted {
  background: var(--bg-tint);
  color: var(--ink-3);
}

.status h2 {
  font-size: clamp(26px, 3.4vw, 38px);
}

.status__body {
  margin-top: var(--sp-4);
}

.status__detail {
  margin-top: var(--sp-3);
  font-size: 14px;
  color: var(--ink-3);
}

.status__cta {
  margin-top: var(--sp-6);
}

/* --------------------------------------------------------------------------
   17. API docs
   -------------------------------------------------------------------------- */

.doc-band {
  padding: var(--sp-8) 0;
}

.doc-band h1 {
  font-size: clamp(34px, 5vw, 60px);
}

.doc-band .lead {
  margin-top: var(--sp-4);
  max-width: 62ch;
}

.doc-band .btn-row {
  margin-top: var(--sp-6);
}

.doc-layout {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: var(--sp-8);
  padding: var(--sp-8) 0;
  align-items: start;
}

.toc {
  position: sticky;
  top: calc(var(--header-h) + var(--sp-4));
  z-index: var(--z-sticky);
}

.toc__title {
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-3);
  margin-bottom: var(--sp-3);
}

.toc ol {
  list-style: none;
  margin: 0;
  padding: 0;
  border-left: 1px solid var(--line);
}

.toc a {
  display: block;
  padding: 6px var(--sp-3);
  margin-left: -1px;
  border-left: 2px solid transparent;
  color: var(--ink-2);
  text-decoration: none;
  font-size: 14px;
}

.toc a:hover,
.toc a[aria-current="true"] {
  color: var(--blue);
  border-left-color: var(--blue);
  background: var(--bg-soft);
}

.doc-section {
  scroll-margin-top: calc(var(--header-h) + var(--sp-5));
  padding-bottom: var(--sp-8);
}

.doc-section h2 {
  font-size: clamp(24px, 2.6vw, 32px);
  margin-bottom: var(--sp-4);
}

.doc-section p {
  color: var(--ink-2);
  max-width: var(--max-prose);
}

.doc-section .code {
  margin-top: var(--sp-4);
}

.endpoint {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-mono);
  font-size: 13px;
  margin-bottom: var(--sp-3);
}

.endpoint__verb {
  background: var(--blue);
  color: #fff;
  border-radius: 6px;
  padding: 2px 8px;
  font-size: 11px;
  letter-spacing: 0.08em;
}

.endpoint__verb--get {
  background: var(--ink-2);
}

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  margin-top: var(--sp-4);
}

.table th,
.table td {
  text-align: left;
  padding: var(--sp-3);
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

.table th {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-3);
  font-weight: 500;
}

.table td:first-child {
  font-family: var(--font-mono);
  font-size: 13px;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   18. Privacy page
   -------------------------------------------------------------------------- */

.two-col {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--sp-5);
  margin-top: var(--sp-6);
}

.ledger h3 {
  font-size: 18px;
  margin-bottom: var(--sp-4);
}

.ledger ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--sp-3);
}

.ledger li {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
  font-size: 15px;
  color: var(--ink-2);
}

.ledger__icon {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  margin-top: 3px;
}

.ledger--no .ledger__icon {
  color: var(--danger-600);
}

.ledger--yes .ledger__icon {
  color: var(--success-600);
}

/* --------------------------------------------------------------------------
   19. Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 860px) {
  .doc-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-5);
  }

  .toc {
    position: static;
    border-bottom: 1px solid var(--line);
    padding-bottom: var(--sp-4);
  }

  .toc ol {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-1);
    border-left: 0;
  }

  .toc a {
    border-left: 0;
    border-radius: var(--radius-pill);
    border: 1px solid var(--line);
  }
}

@media (max-width: 680px) {
  .nav {
    gap: var(--sp-4);
  }

  .nav__link {
    font-size: 14px;
    white-space: nowrap;
  }

  .dl {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-1);
  }

  .dl dd + dt {
    margin-top: var(--sp-3);
  }

  .site-footer__spacer {
    margin-left: 0;
  }
}

@media (max-width: 480px) {
  .wrap {
    padding-inline: var(--sp-4);
  }

  .site-header__inner {
    gap: var(--sp-3);
  }

  .brand {
    gap: var(--sp-2);
  }

  .brand__mark {
    height: 20px;
  }

  .brand__suffix {
    padding-left: var(--sp-2);
    font-size: 11px;
  }

  .nav {
    gap: var(--sp-3);
  }

  .nav__link {
    font-size: 13px;
  }

  /* The 44px tap target stays; only the box around the glyphs gets tighter. */
  .lang__item {
    min-width: 32px;
  }

  /* Full-bleed card: on a narrow screen the border costs more than it buys. */
  .card--bleed {
    margin-inline: calc(var(--sp-4) * -1);
    border-inline: 0;
    border-radius: 0;
    padding: var(--sp-5) var(--sp-4);
  }

  .textarea {
    min-height: 140px;
  }

  .chip,
  .seg__btn {
    height: 40px;
  }

  .hero {
    padding-top: var(--sp-6);
    text-align: left;
  }

  .hero__lead {
    margin-inline: 0;
  }

  .btn--cta {
    width: 100%;
  }

  /* Keep the primary action reachable with a thumb. */
  .sticky-cta {
    position: sticky;
    bottom: 0;
    z-index: var(--z-sticky);
    background: linear-gradient(to bottom, transparent, var(--bg) 24px);
    padding-top: var(--sp-5);
    padding-bottom: max(var(--sp-4), env(safe-area-inset-bottom));
  }

  .details__value {
    display: none;
  }

  .navy {
    padding: var(--sp-7) 0;
  }
}

/* --------------------------------------------------------------------------
   20. Accessibility and environment overrides
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  .btn:hover,
  .btn--primary:hover,
  .btn--ghost:hover,
  .btn--danger:hover {
    transform: none;
  }

  .btn:hover .btn__arrow {
    transform: none;
  }

  .shake {
    animation: none;
  }

  .state--new .state__dot {
    animation: none;
  }

  /* The progress bar is data, not decoration — it keeps moving. */
  .progress__bar {
    transition-duration: var(--dur-base) !important;
  }
}

@media (prefers-contrast: more) {
  :root {
    --line: #9a9ab0;
    --ink-2: #26263c;
    --ink-3: #4a4a63;
    --focus-ring: 4px;
    --focus-color: var(--blue);
  }

  .card,
  .panel,
  .details {
    border-width: 2px;
  }
}

/* Forced colours (Windows High Contrast): let the OS palette through and keep
   every control outlined, since backgrounds are discarded. */
@media (forced-colors: active) {
  .btn,
  .chip,
  .seg__btn,
  .icon-btn,
  .card,
  .callout,
  .details {
    border: 1px solid;
  }

  .chip--radio:has(input:checked) {
    forced-color-adjust: none;
    background: Highlight;
    color: HighlightText;
  }

  .progress__bar {
    forced-color-adjust: none;
    background: Highlight;
  }

  .mark-hl {
    background: none;
    text-decoration: underline;
  }
}

@media print {
  .site-header,
  .site-footer,
  .btn,
  .skip,
  .navy {
    display: none !important;
  }

  .card {
    border: 1px solid #000;
    box-shadow: none;
  }
}

/* The result card puts the retention beside its button. Baseline alignment, so
   the quiet text sits on the button's text line rather than its box centre. */
.btn-row--baseline {
  align-items: baseline;
}

.btn-row--baseline .hint {
  margin: 0;
}