/* ============================================================
   Owed — design system

   Light is the DEFAULT, always. Dark is opt-in via the theme
   button only; we deliberately do NOT follow prefers-color-scheme,
   because the light page is the designed one.

   Direction (v2, rebuilt from a survey of ~60 Mobbin sections):
   putty paper with NO yellow cast, neutral-cool ink against it, one
   action colour, and a grotesque display. The previous system put
   warm ink on a warm ground, which collapses into mud, and ran two
   different "thing you press" colours. Both are fixed here.
   References: Square (buttons), Titan and TravelPerk (light ground),
   Complex Law (tint ramp), Craft (type scale), Resend (dark).
   ============================================================ */

:root {
  color-scheme: light;

  /* ground — putty, not cream. A visible yellow cast is the loudest
     cheap tell there is; the warmth has to be felt, not seen. */
  --paper:   #F7F6F2;
  --paper-2: #F1F0EB;
  --paper-3: #E9E8E2;
  --card:    #FFFFFF;

  /* ink — neutral-cool AGAINST the warm ground. Warm-on-warm was the
     single biggest defect in v1. Steps are 16.7 / 7.9 / 5.3 : 1 so all
     three are actually distinguishable. */
  --ink:     #15161A;
  --ink-2:   #4A4C52;
  --ink-3:   #63666E;
  --line:    #E2E1DB;
  --line-2:  #BFBEB6;

  /* accent — one action colour for the whole site */
  --accent:       #0B5C3A;
  --accent-hover: #084A2E;
  --accent-press: #063D26;
  --accent-soft:  #E3F0E8;
  --accent-line:  #C3DFD0;
  --accent-ink:   #FFFFFF;

  /* v1 ran a near-black --btn AND a mint --cta, both meaning "press me".
     They are now the same one colour; the names stay for compatibility. */
  --cta:       var(--accent);
  --cta-hover: var(--accent-hover);
  --cta-ink:   var(--accent-ink);
  --btn:       var(--accent);
  --btn-hover: var(--accent-hover);
  --btn-ink:   var(--accent-ink);

  /* semantic */
  --warn:        #8A5406;
  --warn-soft:   #FBF1DF;
  --warn-line:   #EBD6AE;
  --danger:      #9C2A22;
  --danger-soft: #FBEAE7;
  --info:        #1C5798;
  --info-soft:   #E9F0F9;

  /* surfaces */
  --field:      #FFFFFF;
  --field-line: #918F88;   /* 3.2:1 on the field: the box edge must exist for older eyes (WCAG 1.4.11) */

  --shadow-sm: 0 1px 2px rgba(21, 22, 26, .05);
  --shadow-md: 0 4px 14px rgba(21, 22, 26, .07), 0 1px 3px rgba(21, 22, 26, .04);
  --shadow-lg: 0 18px 40px -10px rgba(21, 22, 26, .13), 0 4px 10px rgba(21, 22, 26, .05);
  --shadow-xl: 0 40px 80px -20px rgba(21, 22, 26, .18), 0 12px 26px rgba(21, 22, 26, .07);

  /* type — a grotesque carries a functional claim; the serif is kept for
     exactly one italic clause in the hero. Instrument Serif + Instrument
     Sans + IBM Plex Mono is the stock free trio, which is a large part of
     why the page read as a template. */
  --sans:    -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --display: var(--sans);
  --serif:   "Instrument Serif", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --mono:    "Geist Mono", "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Nine sizes, not twenty-five. Nothing that carries a sentence goes
     below 14px; 11px is the label tier and holds 1-3 words only. */
  --step--2: .6875rem;                                   /* 11px labels   */
  --step--1: .875rem;                                    /* 14px small    */
  --step-0:  1rem;                                       /* 16px body     */
  --step-1:  clamp(1.125rem, 1.03rem + .4vw, 1.3rem);    /* lede          */
  --step-2:  clamp(1.25rem, 1.15rem + .5vw, 1.5rem);     /* card title    */
  --step-3:  clamp(1.5rem, 1.35rem + .6vw, 1.875rem);    /* h3            */
  --step-4:  clamp(2.1rem, 1.25rem + 3vw, 3.75rem);      /* section title */
  --step-5:  clamp(3rem, 1.4rem + 5.6vw, 6.5rem);        /* hero          */
  --step-mono: .8125rem;                                 /* 13px          */

  /* the pill only earns its place if the containers are round too */
  --radius-sm: 8px;
  --radius:    12px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  /* illustration ramp — v1 spanned green/blue/yellow/pink at four
     different lightnesses and read as a rainbow. Lightness and
     saturation are now locked and only hue moves, a short distance,
     so a set of cards reads as one material. The --il-sand and
     --il-blush names are kept as aliases of the new ramp. */
  --il-ink:   #15161A;
  --il-line:  var(--il-ink);   /* bare strokes; gets a dark counterpart below */
  --il-paper: #FFFFFF;
  --il-mint:  #A9DDC3;
  --il-teal:  #A4D5D8;
  --il-blue:  #AEC7E3;
  --il-bone:  #E0D9C6;
  --il-sand:  var(--il-bone);
  --il-blush: var(--il-teal);
  --il-green: #0B5C3A;
  --il-amber: #8A5406;

  /* the closing CTA field is a brand colour, not a themed surface: it stays
     forest green in both themes so its white ink never lands on the bright
     dark-mode accent */
  --field-accent:     #0B5C3A;
  --field-accent-ink: #FFFFFF;

  /* the two fixed-dark sections, dark in both themes */
  --dk-1: #0B0E0C;
  --dk-2: #060807;
  --dk-fg:     #F2F3F0;
  --dk-fg-2:   #A8ABA6;
  --dk-fg-3:   #888C86;
  --dk-line:   rgba(242, 243, 240, .13);
  /* the light-mode forest green reads 2.4:1 on these grounds, so the fixed
     dark sections carry their own accent and its ink */
  --dk-accent:     #58DDA0;
  --dk-accent-2:   #74E6B2;
  --dk-accent-ink: #05241A;
  --dk-accent-soft:#BCE9D1;

  --ease:     cubic-bezier(.2, .7, .3, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

/* Dark is opt-in only — no prefers-color-scheme block on purpose. */
:root[data-theme="dark"] {
  color-scheme: dark;

  /* the ground is retinted from brown-black to green-black so it
     generates its own accent instead of importing a foreign one */
  --paper:   #101312;
  --paper-2: #171B19;
  --paper-3: #1E2321;
  --card:    #1A1F1C;
  --ink:     #F2F3F0;
  --ink-2:   #A8ABA6;
  --ink-3:   #888C86;
  --line:    #2E3531;
  --line-2:  #3E453F;

  --accent:       #58DDA0;
  --accent-hover: #74E6B2;
  --accent-press: #46C98C;
  --accent-soft:  #123326;
  --accent-line:  #1E4A38;
  --accent-ink:   #05241A;

  --cta:       var(--accent);
  --cta-hover: var(--accent-hover);
  --cta-ink:   var(--accent-ink);
  --btn:       var(--accent);
  --btn-hover: var(--accent-hover);
  --btn-ink:   var(--accent-ink);

  --warn:        #E2A94F;
  --warn-soft:   #251E10;
  --warn-line:   #3F3218;
  --danger:      #F2857D;
  --danger-soft: #271513;
  --info:        #7EB2EF;
  --info-soft:   #111C26;

  --field:      #1E2321;
  --field-line: #6C736E;   /* 3.3:1 on the dark field */

  /* The ramp is deliberately NOT re-declared for dark. These tints paint
     objects that always carry fixed dark ink, and flipping them put dark ink
     on a dark ground. --il-green, --il-paper and --il-amber used to be
     excepted "because they are surfaces" - they are not, they are object
     fills, and flipping them took the tick inside the receipt from 5.30:1
     to 1.13:1 on its own mint disc. Nothing in this ramp flips.
     The one thing that DOES need a dark counterpart is the bare stroke:
     --il-ink is the outline ON the light tints, where near-black is right,
     but three strokes in the hero sit straight on --paper, where it read
     1.03:1. --il-line is that stroke. */
  --il-line: #7E8480;

  /* #17: .toast and .fchip.is-on invert to a near-white fill (16.9:1) in
     dark, which is a light-mode control pasted onto a dark page. */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .5);
  --shadow-md: 0 4px 14px rgba(0, 0, 0, .55);
  --shadow-lg: 0 18px 40px -10px rgba(0, 0, 0, .62);
  --shadow-xl: 0 40px 80px -20px rgba(0, 0, 0, .72);
}


/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
/* author display rules (e.g. .btn) otherwise beat the UA's [hidden] rule,
   which silently breaks every `el.hidden = true` in the app */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 96px; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--step-0);
  line-height: 1.55;
  letter-spacing: -.006em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* `overflow-x: hidden` here made <body> its own scroll container, and the
     browser aims keyboard scrolling at the focused element's nearest
     scrollable ancestor - which became this box, with nothing of its own to
     scroll. Arrow keys, Page Up/Down, Home and End all did nothing, on every
     page. `clip` does the same horizontal clipping WITHOUT creating a
     scrollport, so the document stays the scroller and native keyboard
     scrolling works again. overflow-y must stay visible: pairing `clip` with
     a scrolling value would compute it back to `hidden` and undo this. */
  overflow-x: clip;
  overflow-y: visible;
}
img, svg { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; padding: 0; }
a { color: inherit; }
h1, h2, h3, h4 { margin: 0; text-wrap: balance; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

/* <main> is a skip-link target: a keyboard user who just used the skip link
   has to be able to see where they landed, so it keeps the global ring.
   Only a mouse click on it should be silent. */
main:focus:not(:focus-visible) { outline: none; }
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}
::selection { background: var(--cta); color: var(--cta-ink); }

/* ---------- type ---------- */
/* The display face is a grotesque now. Negative tracking is a grotesque
   mechanic and was actively damaging the serif it used to be applied to. */
.display {
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: -.025em;
  line-height: 1.06;
}
/* The serif survives in exactly one place: an italic clause inside a
   headline. It keeps its own tracking - the display's negative tracking
   would close up a face with sidebearings this tight. */
.display em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--accent);
}
/* ONE eyebrow treatment. The old stylesheet ran eight different tracking
   values for this single role, which is invisible one at a time and reads
   as sloppiness in aggregate. */
.eyebrow {
  font-family: var(--sans);
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.mono { font-family: var(--mono); font-size: .92em; letter-spacing: 0; }
.lede { font-size: var(--step-1); color: var(--ink-2); line-height: 1.5; letter-spacing: -.006em; max-width: 46ch; }
.muted { color: var(--ink-3); }
.tnum { font-variant-numeric: tabular-nums; }

/* ---------- layout ---------- */
.wrap { width: min(1140px, 100% - 2.5rem); margin-inline: auto; }
/* on wide screens the page grows with the viewport instead of floating in a
   1140px column with 400px of paper either side */
@media (min-width: 1600px) { .wrap { width: min(1320px, 100% - 4rem); } }
.wrap-narrow { width: min(720px, 100% - 2.5rem); margin-inline: auto; }

/* ---------- buttons ---------- */
/* ============================================================
   Buttons — after Square's pill pair.

   Square's rule is that the primary and the secondary differ in
   exactly ONE property: fill. Same height, same radius, same
   padding, same label size and weight. Owed keeps that discipline
   and swaps Square's black for the accent, because green already
   carries the money meaning here.

   The single inset top hairline is the only dimensional effect in
   the system, and there is deliberately no drop shadow at rest and
   no lift on hover: a system that rests flat cannot lift without
   importing a material it does not own, which is the generic-SaaS
   tell the rest of this palette exists to avoid.
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 26px;                 /* 0.6 x height */
  gap: 8px;
  border-radius: var(--radius-pill);
  font-family: var(--sans);
  /* 16px at weight 500: the label size and weight seven of nine big brands
     use (Apple, Notion, Airbnb, Revolut, Nike, Shopify, Dyson - measured live) */
  font-size: 16px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -.006em;
  border: 1px solid transparent;
  white-space: nowrap;
  text-decoration: none;
  /* Stripe's hover curve: an ease-out over 220ms */
  transition: background-color .22s cubic-bezier(.25, 1, .5, 1), border-color .22s cubic-bezier(.25, 1, .5, 1),
              color .22s cubic-bezier(.25, 1, .5, 1), box-shadow .22s cubic-bezier(.25, 1, .5, 1),
              opacity .22s cubic-bezier(.25, 1, .5, 1), transform .18s var(--ease);
}
/* Apple's buttons do not move: hover is a lighter fill, press a darker one.
   The only motion is a short settle on press. */
.btn:not(.btn-quiet):active { transform: scale(.985); transition-duration: .1s; transition-timing-function: ease-out; }
@media (prefers-reduced-motion: reduce) {
  .btn:active { transform: none !important; }
}
.btn-lg { height: 52px; padding: 0 32px; font-size: 16px; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .45; pointer-events: none; }

/* primary and accent are the same button: one action colour site-wide */
/* The primary button is ink on paper: black in the light theme, white in
   the dark one (Revolut, Shopify, Nike, Figma - measured live, 2 Sept 2026).
   One flat fill, no sheen, no shadow; hover lifts the tone a step, press
   drops it. The green stays for status and links, never for buttons. */
.btn-primary,
.btn-accent {
  background: var(--ink);
  color: var(--paper);
  border-color: transparent;
  box-shadow: none;
}
.btn-primary:hover,
.btn-accent:hover {
  background: color-mix(in srgb, var(--ink) 84%, var(--paper));
  box-shadow: none;
}
.btn-primary:active,
.btn-accent:active {
  background: color-mix(in srgb, var(--ink) 94%, #000);
  box-shadow: none;
}
:root[data-theme="dark"] .btn-primary:active,
:root[data-theme="dark"] .btn-accent:active { background: color-mix(in srgb, var(--ink) 80%, var(--paper)); }

/* secondary — only the fill differs */
.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: color-mix(in srgb, var(--ink) 22%, transparent);
}
.btn-ghost:hover {
  background: color-mix(in srgb, var(--ink) 5%, transparent);
  border-color: color-mix(in srgb, var(--ink) 42%, transparent);
}
.btn-ghost:active { background: color-mix(in srgb, var(--ink) 9%, transparent); }

/* third action — no box at all, so the primary keeps all the weight */
.btn-quiet {
  height: 44px; padding: 0 10px; gap: 6px;
  background: none; border: none;
  font-size: 15px; font-weight: 500;
  color: var(--ink-2);
}
.btn-quiet:hover {
  color: var(--ink); background: none;
  text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px;
}

/* the one achromatic button: used only where a button sits on a
   saturated accent field, so the field never fights a second accent */

.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }



/* ---------- theme button ---------- */
.theme-btn {
  width: 44px; height: 44px; flex-shrink: 0;
  display: grid; place-items: center;
  border-radius: var(--radius-pill); color: var(--ink-3);
  border: 1px solid transparent;
  transition: color .15s var(--ease), background-color .15s var(--ease), border-color .15s var(--ease);
}
.theme-btn:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 8%, transparent); border-color: var(--line); }
.theme-btn-float {
  position: absolute; top: 1.25rem; right: 1.25rem; z-index: 5;
}

/* ---------- language ---------- */
/* a French or Spanish page stays hidden until its words are in, so English never flashes (i18n.js reveals it, with a 4s failsafe) */
html.i18n-pending body { visibility: hidden; opacity: 0; }   /* opacity too: a child set to visibility:visible would show through */

/* while only English is ready there is nothing to switch to: an empty host takes no space (no stray flex gap) */
[data-lang-host]:empty { display: none; }

.lang-switch { position: relative; flex-shrink: 0; }
.lang-btn {
  height: 44px; min-width: 44px; padding: 0 12px;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border-radius: var(--radius-pill); color: var(--ink-3);
  border: 1px solid transparent; background: none; cursor: pointer;
  font-family: inherit; font-size: 14px; font-weight: 600; line-height: 1.25;
  transition: color .15s var(--ease), background-color .15s var(--ease), border-color .15s var(--ease);
}
.lang-btn:hover, .lang-btn[aria-expanded="true"] { color: var(--ink); background: color-mix(in srgb, var(--ink) 8%, transparent); border-color: var(--line); }
.lang-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.lang-icon { flex-shrink: 0; }
.lang-code { letter-spacing: .02em; }

.lang-menu {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 60;
  min-width: 176px; margin: 0; padding: 6px; list-style: none;
  background: var(--card); color: var(--ink);
  border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-lg);
}
.lang-menu a {
  display: flex; align-items: center; gap: 16px; min-height: 44px; padding: 0 12px;
  border-radius: 10px; color: var(--ink); text-decoration: none;
  font-size: 16px; font-weight: 500; line-height: 1.25; white-space: nowrap;
}
.lang-menu a:hover { background: var(--paper-2); }
.lang-menu a:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.lang-menu a[aria-current="true"] { font-weight: 600; }
/* a drawn tick: decoration only, so screen readers hear aria-current instead */
.lang-menu a[aria-current="true"]::after {
  content: ""; margin-left: auto; width: 6px; height: 11px;
  border: solid var(--accent); border-width: 0 2px 2px 0; transform: translateY(-2px) rotate(45deg);
}

.lang-inline-list { display: flex; flex-wrap: wrap; gap: 0 20px; margin: 0; padding: 0; list-style: none; }
.lang-inline-list a {
  display: inline-flex; align-items: center; min-height: 44px;
  color: inherit; text-decoration: none; font-size: 15px; line-height: 1.25;
}
.lang-inline-list a:hover { text-decoration: underline; text-underline-offset: 4px; }
.lang-inline-list a[aria-current="true"] { font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }

@media (max-width: 480px) {
  .lang-btn .lang-code { display: none; }
  .lang-btn { width: 44px; padding: 0; }
}

/* ---------- brand ---------- */
.brand {
  display: inline-flex; align-items: center; gap: .5rem;
  text-decoration: none; color: var(--ink); flex-shrink: 0;
}
.brand-mark {
  width: 25px; height: 25px; flex-shrink: 0;
  display: grid; place-items: center;
  background: var(--ink); color: var(--paper);
  border-radius: 7px;
}
/* a hairline display serif at subhead size is the specific thing that
   reads as a word-processor heading, so the wordmark is sans now */
.brand-name {
  font-family: var(--sans);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -.03em;
  line-height: 1.3;
}

/* ---------- fields ---------- */
.input, .select {
  width: 100%;
  padding: .68rem .85rem;
  background: var(--field);
  border: 1px solid var(--field-line);
  border-radius: var(--radius);
  color: var(--ink);
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.input::placeholder { color: var(--ink-3); }
.input:focus, .select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3.5px color-mix(in srgb, var(--accent) 14%, transparent);
}
.select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 17px) center, calc(100% - 12px) center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 2.1rem;
  cursor: pointer;
}

/* ---------- card ---------- */
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}

/* ---------- pills / tags ---------- */
.tag {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .2rem .55rem;
  border-radius: var(--radius-pill);
  font-size: .72rem; font-weight: 600;
  letter-spacing: -.005em;
  border: 1px solid transparent;
}
.tag-strong { background: var(--accent-soft); color: var(--accent); border-color: var(--accent-line); }
.tag-maybe  { background: var(--warn-soft);   color: var(--warn);   border-color: var(--warn-line); }
.tag-long   { background: var(--paper-3);     color: var(--ink-3);  border-color: var(--line-2); }

/* ---------- utilities ---------- */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 50%; top: 0; transform: translate(-50%, -120%);
  z-index: 100;
  background: var(--ink); color: var(--paper);
  padding: .6rem 1rem; border-radius: 0 0 var(--radius) var(--radius);
  font-size: var(--step--1); font-weight: 600; text-decoration: none;
  transition: transform .18s var(--ease);
}
.skip-link:focus { transform: translate(-50%, 0); }

/* ---------- toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: 1.6rem;
  transform: translate(-50%, 150%);
  z-index: 80;
  background: var(--ink); color: var(--paper);
  padding: .7rem 1.15rem;
  border-radius: var(--radius-pill);
  font-size: var(--step--1); font-weight: 500;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  pointer-events: none;
  transition: transform .4s var(--ease-out), opacity .3s var(--ease);
  max-width: min(420px, calc(100% - 2rem));
  text-align: center;
}
.toast.show { transform: translate(-50%, 0); opacity: 1; }



/* ============================================================
   Dark-theme corrections

   Everything here fixes a value that was tuned for the light ground and
   had no dark counterpart. Each ratio quoted was measured in the browser,
   not estimated.
   ============================================================ */

/* #17 inverted fills. A near-white slab at 16.9:1 reads as a light-mode
   control dropped onto a dark page; the site already has a calmer
   "selected" vocabulary in --accent-soft / --accent-line. */
:root[data-theme="dark"] .toast {
  background: var(--paper-3);
  color: var(--ink);
  border: 1px solid var(--line-2);
}

/* #19 the system's one dimensional effect is a top light. On the dark
   theme's bright mint fill a white inset just lightens an already-light
   chip, so the hairline moves to the bottom edge and goes dark. */
:root[data-theme="dark"] .btn-primary,
:root[data-theme="dark"] .btn-accent {
  box-shadow: inset 0 -1px 0 rgba(5, 36, 26, .16);
}
:root[data-theme="dark"] .btn-primary:hover,
:root[data-theme="dark"] .btn-accent:hover {
  box-shadow: inset 0 -1px 0 rgba(5, 36, 26, .22);
}

/* #12 hover states that were literal no-ops: --paper-2 on --paper is
   1.03:1. Mixing against the ink self-inverts, so one rule serves both
   themes. */
.nav-links a:hover {
  background: color-mix(in srgb, var(--ink) 8%, transparent);
}

/* theme switch: surfaces and type cross-fade instead of snapping; the film is untouched */
html, body, .side, .rail, .rail-card, .doc, .rcard, .rgroup-head, .opt, .pane-head, .main, .app, .env-card, .env-panel, .show-card, .proof, .show, .stats, .places, .env, .faq, .cta, .footer, .faq-item, .card, .auth-left, .auth-field, .auth-input, .btn-ghost, .btn-outline { transition: background-color .35s ease, color .35s ease, border-color .35s ease; }
@media (prefers-reduced-motion: reduce) { html, body, .side, .rail-card, .doc, .rcard, .opt, .pane-head { transition: none; } }

/* the page scrollbar: no track, a thin translucent thumb (the white track looked bad beside the film) */
html { scrollbar-width: thin; scrollbar-color: rgba(0, 0, 0, .35) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, .35); border-radius: 8px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, .55); background-clip: content-box; }
:root[data-theme="dark"] { scrollbar-color: rgba(255, 255, 255, .35) transparent; }
:root[data-theme="dark"] ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .35); background-clip: content-box; }