/* ==================================================================
   Lagerland Apps — design system v4 "The Issue"
   ------------------------------------------------------------------
   The studio publishes its apps the way a post office issues stamps:
   one sheet, twenty stamps, one designer.

   World: postal-yellow sheet margin (selvedge) for chrome and the
   page's loud moments; cool white stamp paper as the ground;
   perforated stamps with a series-colour frame; postmark ink;
   one postal blue reserved for the primary action and focus.

   One hand-written stylesheet, no build step (GitHub Pages safe mode).
     1. Fonts (self-hosted, /assets/fonts/)
     2. Tokens (light only — the world is printed paper)
     3. Base, typography, layout
     4. The stamp system (stamp, sheet, postmark, selvedge)
     5. Components (nav → footer, in page order)
     6. Motion — content is NEVER hidden unless html.js is set by
        head.html; prefers-reduced-motion disables everything.

   Class names are a public contract with 200+ content pages and
   animations.js — do not rename without a sitewide grep.
   ================================================================== */

/* ----------------------------------------------------------------
   1. FONTS — latin subsets
   ---------------------------------------------------------------- */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/assets/fonts/jost-var.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: 'Inter';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/assets/fonts/inter-var.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ----------------------------------------------------------------
   2. TOKENS
   ---------------------------------------------------------------- */
:root {
  /* Type */
  --font-sans: "Inter", -apple-system, "SF Pro Text", system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: "Jost", "Futura", "Avenir Next", "Century Gothic", var(--font-sans);
  --font-serif: var(--font-display);
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  --text-xs: 0.8125rem;   /* 13 */
  --text-sm: 0.9375rem;   /* 15 */
  --text-base: 1.0625rem; /* 17 */
  --text-lg: clamp(1.15rem, 1.4vw, 1.25rem);
  --text-xl: clamp(1.35rem, 2vw, 1.6rem);
  --text-2xl: clamp(1.85rem, 3.2vw, 2.6rem);
  --text-3xl: clamp(2.4rem, 4.8vw, 4rem);
  --text-4xl: var(--text-3xl); /* legacy alias */
  --text-5xl: var(--text-3xl); /* legacy alias */

  /* Spacing — 8px base (templates use these inline) */
  --s-1: 8px;
  --s-2: 12px;
  --s-3: 16px;
  --s-4: 24px;
  --s-5: 40px;
  --s-6: 64px;
  --s-7: 96px;
  --s-8: 128px;

  /* Radii — printed matter is square; only device glass is round */
  --r-sm: 2px;
  --r-md: 3px;
  --r-lg: 4px;
  --r-xl: 4px;
  --r-2xl: 4px;

  /* Motion — one exponential ease-out for everything */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-smooth: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 0.15s;
  --dur-md: 0.35s;
  --dur-reveal: 0.5s;

  /* Layout */
  --container: 1180px;
  --container-narrow: 800px;
  --w-content: 720px;
  --topbar-h: 60px;

  /* ------ The paper ------ */
  --paper: #F4F5F1;              /* stamp-sheet ground (cool white) */
  --paper-white: #FFFFFF;        /* stamp paper */
  --selv: #F4C21B;               /* postal yellow — sheet margin */
  --selv-deep: #E6B30F;
  --selv-soft: #FFF6D2;          /* paper tab on the margin */
  --selv-ink-2: #463C16;         /* secondary text on yellow */

  --ink: #15171D;
  --ink-2: #3F4452;              /* secondary text on paper, 9:1 */
  --ink-3: #5A5F6D;              /* tertiary text on paper, 5.9:1 */
  --rule: rgba(21, 23, 29, 0.14);
  --rule-2: rgba(21, 23, 29, 0.28);
  --cut: rgba(21, 23, 29, 0.38); /* dashed cut lines */

  --blue: #1D3FD6;               /* postal blue — action + focus only */
  --blue-hover: #1632B4;
  --blue-wash: #E8ECFC;

  /* Five series — frame colour + field tint */
  --health: #2B7556;  --health-t: #DCEFE3;
  --plan:   #A33D22;  --plan-t:   #FBE3D7;
  --money:  #87610A;  --money-t:  #F6EAC8;
  --games:  #74357F;  --games-t:  #EEDFF1;
  --tools:  #1C6380;  --tools-t:  #D8EBF1;

  /* Legacy token names used inline by content pages */
  --bg-0: var(--paper);
  --bg-1: var(--paper);
  --bg-2: var(--paper-white);
  --bg-3: var(--paper-white);
  --bg-4: var(--paper-white);
  --bg: var(--paper);
  --bg-raised: var(--paper-white);
  --bg-card: var(--paper-white);
  --bg-card-hover: var(--paper-white);
  --bg-glass: var(--selv);
  --warm-tint: rgba(21, 23, 29, 0.05);

  --border-1: var(--rule);
  --border-2: var(--rule-2);
  --border-3: rgba(21, 23, 29, 0.4);
  --border-hl: var(--border-3);
  --border: var(--rule);
  --border-hover: var(--rule-2);
  --border-accent: rgba(29, 63, 214, 0.35);

  --text-primary: var(--ink);
  --text-secondary: var(--ink-2);
  --text-tertiary: var(--ink-3);
  --text: var(--ink);
  --text-dim: var(--ink-2);

  --accent: var(--blue);
  --accent-a: var(--blue);
  --accent-b: var(--blue);
  --accent-hover: var(--blue-hover);
  --accent-bright: var(--blue);
  --accent-dim: var(--blue);
  --accent-ink: #FFFFFF;
  --accent-glow: var(--blue-wash);
  --accent-glow-strong: var(--blue-wash);
  --accent-wash: var(--blue-wash);

  --ok: #1E6B45;
  --ok-bright: #1E6B45;

  --grad-accent: var(--blue);
  --grad-cta: var(--blue);

  /* Paper depth: soft, offset, never a halo */
  --elev-1: 0 1px 1px rgba(21, 23, 29, 0.08);
  --elev-2: 0 2px 4px rgba(21, 23, 29, 0.08), 0 1px 1px rgba(21, 23, 29, 0.06);
  --elev-3: 0 12px 22px -10px rgba(21, 23, 29, 0.28);
  --elev-4: 0 24px 44px -18px rgba(21, 23, 29, 0.34);
  --shadow-sm: var(--elev-1);
  --shadow-md: var(--elev-2);
  --shadow-lg: var(--elev-3);
  --shadow-glow: none;
  --shadow-glow-strong: none;

  --frame-metal: linear-gradient(135deg, #2F323C 0%, #15171D 55%, #2F323C 100%);
  --frame-shadow: 0 22px 40px -18px rgba(21, 23, 29, 0.4);

  color-scheme: light;
}

/* ----------------------------------------------------------------
   3. BASE + TYPOGRAPHY
   ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--topbar-h) + 20px);
  -webkit-text-size-adjust: 100%;
  background: var(--paper);
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "cv11", "ss01";
  overflow-x: clip; /* .bleed bands use 100vw */
}

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

a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  text-decoration-color: rgba(29, 63, 214, 0.4);
  transition: text-decoration-color var(--dur-fast), color var(--dur-fast);
}
a:hover { color: var(--blue-hover); text-decoration-color: currentColor; }

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

h1, h2, h3, h4, .h1, .h2, .h3 {
  font-family: var(--font-display);
  color: var(--ink);
  margin: 0 0 var(--s-3);
  text-wrap: balance;
  font-feature-settings: "kern", "liga";
}
h1, .h1 {
  font-size: var(--text-3xl);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.025em;
}
h2, .h2 {
  font-size: var(--text-2xl);
  font-weight: 650;
  line-height: 1.06;
  letter-spacing: -0.02em;
}
h3, .h3 {
  font-size: var(--text-xl);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.01em;
}
h4 { font-size: var(--text-lg); font-weight: 600; line-height: 1.25; }

@media (max-width: 480px) {
  h1, .h1 { font-size: clamp(2.15rem, 10vw, 2.7rem); }
  h2, .h2 { font-size: clamp(1.65rem, 7.4vw, 2rem); }
}

p { margin: 0 0 var(--s-3); }

.lead {
  font-size: var(--text-lg);
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 60ch;
  margin: 0 0 var(--s-4);
}

/* Kicker labels above headings are retired: the heading carries its
   own weight. The class stays in ~150 content pages, so it is hidden
   here rather than edited out of every file. */
.overline {
  display: block;
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--ink-3);
  margin: 0 0 4px;
}
.overline:has(+ :is(h1, h2, h3, .h1, .h2, .h3)) { display: none; }

/* Formerly gradient text; now plain emphasis by weight. */
.gradient-text {
  background: none;
  -webkit-text-fill-color: currentColor;
  color: inherit;
}

.editorial, blockquote {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.15em;
  line-height: 1.5;
  color: var(--ink);
}
blockquote {
  margin: var(--s-4) 0;
  padding: var(--s-3) var(--s-4);
  background: var(--paper-white);
  border: 1px solid var(--rule);
}

.small { font-size: var(--text-sm); }
.dimmed { color: var(--ink-3); }

ul.bullets { margin: 0; padding: 0; list-style: none; }
ul.bullets li {
  position: relative;
  padding-left: 1.4em;
  margin-bottom: var(--s-2);
  color: var(--ink-2);
}
ul.bullets li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 7px;
  height: 7px;
  background: var(--ink);
}

code, kbd {
  font-family: var(--font-mono);
  font-size: 0.88em;
  background: var(--paper-white);
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  padding: 0.1em 0.4em;
}

hr {
  border: 0;
  border-top: 1px dashed var(--cut);
  margin: var(--s-5) 0;
}

/* Tabular numerals wherever data is set */
table, .stamp__date, .stamp__denom, time, .tech dd { font-variant-numeric: tabular-nums; }

/* ----------------------------------------------------------------
   LAYOUT
   ---------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--topbar-h) var(--s-4) 0;
}
.container--narrow { max-width: var(--container-narrow); }

.section { padding: var(--s-7) 0; }
.section--lg { padding: var(--s-8) 0 var(--s-7); }
@media (max-width: 720px) {
  .section { padding: var(--s-6) 0; }
  .section--lg { padding: var(--s-7) 0 var(--s-6); }
}

.section-head { margin-bottom: var(--s-5); }
.section-sub { color: var(--ink-3); font-size: var(--text-sm); margin-top: var(--s-1); }
.section-center { text-align: center; }
.section-center .lead { margin-left: auto; margin-right: auto; }

.grid { display: grid; gap: var(--s-4); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 880px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

.bg-mesh, .bg-orb { display: none; }

/* Full-bleed band inside the centred container */
.bleed {
  width: 100vw;
  margin-left: calc(50% - 50vw);
}

/* ----------------------------------------------------------------
   4. THE STAMP SYSTEM
   ---------------------------------------------------------------- */

/* Series colours: set --s (frame) and --t (field tint) */
.series-health, .stamp.series-health { --s: var(--health); --t: var(--health-t); }
.series-plan,   .stamp.series-plan   { --s: var(--plan);   --t: var(--plan-t); }
.series-money,  .stamp.series-money  { --s: var(--money);  --t: var(--money-t); }
.series-games,  .stamp.series-games  { --s: var(--games);  --t: var(--games-t); }
.series-tools,  .stamp.series-tools  { --s: var(--tools);  --t: var(--tools-t); }

/* A stamp: the link carries the shadow (filters run before masks, so
   the shadow lives on the parent), the paper carries the perforation. */
.stamp {
  --s: var(--ink);
  --t: var(--paper-white);
  --perf: 4px;
  position: relative;
  display: block;
  color: var(--ink);
  text-decoration: none;
  filter: drop-shadow(0 1px 1.5px rgba(21, 23, 29, 0.16));
  transition: transform var(--dur-md) var(--ease-out),
              filter var(--dur-md) var(--ease-out),
              opacity var(--dur-md) var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.stamp:hover { color: var(--ink); }
.stamp__paper {
  position: relative;
  display: block;
  height: 100%;
  padding: calc(var(--perf) * 2);
  background: var(--paper-white);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    radial-gradient(circle var(--perf), #0000 96%, #000)
      calc(var(--perf) * -2) calc(var(--perf) * -2) / calc(var(--perf) * 4) calc(var(--perf) * 4) round;
          mask:
    linear-gradient(#000 0 0) content-box,
    radial-gradient(circle var(--perf), #0000 96%, #000)
      calc(var(--perf) * -2) calc(var(--perf) * -2) / calc(var(--perf) * 4) calc(var(--perf) * 4) round;
}
.stamp__field {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  justify-items: center;
  height: 100%;
  padding: 8px 8px 9px;
  background: var(--t);
  border: 3px solid var(--s);
  overflow: hidden;
}
.stamp__top {
  justify-self: stretch;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 6px;
  font-family: var(--font-display);
  font-size: 0.72rem;
  line-height: 1.2;
  color: var(--s);
}
.stamp__date { letter-spacing: 0.04em; font-weight: 500; }
.stamp__denom { font-weight: 700; font-size: 0.8rem; white-space: nowrap; }
.stamp__icon {
  align-self: center;
  width: 42%;
  max-width: 58px;
  aspect-ratio: 1;
  border-radius: 22.5%;
  margin: 6px 0 5px;
  box-shadow: 0 3px 8px -2px rgba(21, 23, 29, 0.35);
  background: var(--paper-white);
}
.stamp__name {
  max-width: 100%;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.98rem;
  line-height: 1.1;
  letter-spacing: -0.005em;
  text-align: center;
}
.stamp__plat {
  max-width: 100%;
  margin-top: 2px;
  font-size: 0.72rem;
  line-height: 1.25;
  color: var(--ink-2);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Lifted: hover, keyboard focus, or the sheet's selected stamp */
.stamp:hover,
.stamp:focus-visible,
.stamp.is-lifted {
  z-index: 3;
  transform: translateY(-8px) rotate(-2deg) scale(1.05);
  filter: drop-shadow(0 16px 16px rgba(21, 23, 29, 0.26));
}
.stamp:focus-visible { outline: none; }
.stamp:focus-visible .stamp__field { outline: 3px solid var(--blue); outline-offset: -8px; }

/* Postmark: rings + wavy cancellation, ink at 75% */
.postmark {
  position: absolute;
  pointer-events: none;
  color: var(--ink);
  opacity: 0.78;
}
.postmark svg { display: block; width: 100%; height: auto; overflow: visible; }

/* ----------------------------------------------------------------
   5. COMPONENTS
   ---------------------------------------------------------------- */

/* ---------- TOPBAR — the sheet's printed top margin ---------- */
.topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: var(--selv);
  border-bottom: 1px dashed var(--cut);
  transition: box-shadow var(--dur-md) var(--ease-out);
}
.topbar.scrolled { box-shadow: 0 6px 14px -10px rgba(21, 23, 29, 0.35); }

.topbar-inner {
  max-width: none;
  margin: 0 auto;
  padding: 0 clamp(16px, 2.8vw, 40px);
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  gap: var(--s-5);
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.3rem;
  letter-spacing: -0.01em;
  color: var(--ink) !important;
  text-decoration: none !important;
  white-space: nowrap;
}
.brand-mark {
  width: 30px; height: 30px;
  display: block;
  object-fit: contain;
  border-radius: 7px;
}
.brand-name { display: inline-block; }

.nav {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: var(--text-sm);
}
.nav a {
  color: var(--ink);
  font-weight: 600;
  padding: 8px 12px;
  text-decoration: none !important;
  border-bottom: 2px solid transparent;
  transition: border-color var(--dur-fast);
}
.nav a:hover { border-bottom-color: var(--cut); }
.nav a[aria-current="page"], .nav a.active { border-bottom-color: var(--ink); }

.topbar-imprint {
  margin-left: auto;
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--selv-ink-2);
  white-space: nowrap;
}
.reg-mark { display: inline-block; vertical-align: middle; margin-left: 10px; width: 16px; height: 16px; }

.nav-toggle {
  display: none;
  margin-left: auto;
  background: none;
  border: 1.5px solid var(--ink);
  color: var(--ink);
  cursor: pointer;
  padding: 6px;
  border-radius: var(--r-sm);
}
.nav-toggle svg { display: block; }

.nav-overlay {
  position: fixed; inset: 0;
  background: rgba(21, 23, 29, 0.4);
  z-index: 99;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-md);
}
.nav-overlay.open { opacity: 1; pointer-events: auto; }

@media (max-width: 1100px) { .topbar-imprint { display: none; } }
@media (max-width: 720px) {
  .nav-toggle { display: block; }
  .nav {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: min(300px, 84vw);
    z-index: 101;
    background: var(--selv);
    flex-direction: column;
    align-items: stretch;
    padding: 84px var(--s-4) var(--s-5);
    gap: 2px;
    transform: translateX(100%);
    transition: transform var(--dur-md) var(--ease-out);
    border-left: 1px dashed var(--cut);
  }
  .nav.open { transform: translateX(0); }
  .nav a { font-family: var(--font-display); font-size: 1.4rem; padding: 12px 4px; border-bottom: 1px dashed var(--cut); }
  .nav a[aria-current="page"] { border-bottom: 2px solid var(--ink); }
}
.nav-search { display: none; }

/* ---------- BUTTONS ---------- */
.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-3);
  margin: var(--s-4) 0 0;
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 50px;
  padding: 0 22px;
  border-radius: var(--r-sm);
  border: 1.5px solid transparent;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  text-decoration: none !important;
  transition: background var(--dur-fast), border-color var(--dur-fast),
              color var(--dur-fast), transform var(--dur-md) var(--ease-out),
              box-shadow var(--dur-md) var(--ease-out);
}
.btn:active { transform: translateY(1px); }
.btn-primary {
  background: var(--blue);
  color: #FFFFFF !important;
}
.btn-primary:hover { background: var(--blue-hover); }
.btn-secondary {
  background: transparent;
  border-color: var(--ink);
  color: var(--ink) !important;
}
.btn-secondary:hover { background: var(--ink); color: var(--paper-white) !important; }

/* ---------- LABELS (pills) — square printed labels ---------- */
.meta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--text-xs);
  font-weight: 500;
  line-height: 1.3;
  color: var(--ink-2);
  padding: 4px 9px;
  border-radius: var(--r-sm);
  border: 1px solid var(--rule-2);
  background: var(--paper-white);
  white-space: nowrap;
}
.pill--price { color: var(--ink); border-color: var(--ink); font-weight: 600; }
.pill--stars { font-weight: 600; color: var(--ink); }
.pill-stars { color: var(--ink); letter-spacing: 1px; }

.badge-privacy {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  border: 1.5px solid var(--ink);
  border-radius: var(--r-sm);
  padding: 6px 12px;
}
.badge-privacy svg { width: 16px; height: 16px; }

/* ---------- CARDS — plain stamp-paper panels ---------- */
.card {
  display: block;
  background: var(--paper-white);
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  padding: var(--s-4);
  color: var(--ink);
  text-decoration: none !important;
  box-shadow: var(--elev-1);
  transition: border-color var(--dur-md) var(--ease-out),
              box-shadow var(--dur-md) var(--ease-out),
              transform var(--dur-md) var(--ease-out);
}
a.card:hover, .card-app:hover {
  border-color: var(--rule-2);
  box-shadow: var(--elev-3);
  transform: translateY(-3px);
  color: var(--ink);
}
.card-title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 650;
  letter-spacing: -0.005em;
  margin-bottom: var(--s-1);
}
.card-text { font-size: var(--text-sm); line-height: 1.6; color: var(--ink-2); }
.card-icon { font-size: 20px; color: var(--ink); margin-bottom: var(--s-2); display: inline-block; }

.app-badge { display: flex; align-items: center; gap: var(--s-2); }
.app-icon {
  width: 48px; height: 48px;
  border-radius: 22.5%;
  box-shadow: 0 2px 6px -2px rgba(21, 23, 29, 0.35);
  flex: none;
}
.app-name { font-family: var(--font-display); font-weight: 650; font-size: var(--text-lg); letter-spacing: -0.005em; line-height: 1.2; }
.app-tagline { font-size: var(--text-xs); color: var(--ink-3); line-height: 1.4; }

/* ---------- HOME: THE ISSUE (selvedge + sheet) ---------- */
.issue {
  display: grid;
  grid-template-columns: minmax(340px, 31%) 1fr;
  min-height: clamp(660px, calc(100svh - var(--topbar-h)), 960px);
  background: var(--paper);
  overflow-x: clip;
}
.issue-selvedge {
  position: relative;
  background: var(--selv);
  padding: clamp(28px, 4.4vh, 52px) clamp(24px, 2.8vw, 44px) 28px;
  display: flex;
  flex-direction: column;
  border-right: 1px dashed var(--cut);
}
.issue-selvedge h1 {
  font-size: clamp(2.5rem, 4.1vw, 3.75rem);
  line-height: 0.97;
  letter-spacing: -0.028em;
  margin-bottom: var(--s-3);
  max-width: 11ch;
}
.issue-lede {
  font-size: var(--text-base);
  line-height: 1.55;
  color: var(--selv-ink-2);
  max-width: 36ch;
  margin: 0;
}
.issue-margin-note {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translate(50%, -50%) rotate(90deg);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--selv-ink-2);
  pointer-events: none;
}
.series-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: clamp(20px, 3.4vh, 34px) 0 0;
  padding: 0;
  list-style: none;
  max-width: 400px;
}
.series-tab {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 46px;
  padding: 10px 12px;
  background: var(--selv-soft);
  border: 1px solid rgba(21, 23, 29, 0.2);
  border-radius: var(--r-sm);
  color: var(--ink);
  font: 600 var(--text-sm)/1.2 var(--font-sans);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur-fast), border-color var(--dur-fast), transform var(--dur-md) var(--ease-out);
}
.series-tab:hover { border-color: var(--ink); color: var(--ink); }
.series-tab i { width: 12px; height: 12px; flex: none; background: var(--s, var(--ink)); }
.series-tab b { margin-left: auto; font-family: var(--font-display); font-weight: 500; font-variant-numeric: tabular-nums; }
.series-tab[aria-pressed="true"] { background: var(--blue); border-color: var(--blue); color: #FFFFFF; }
.series-tab[aria-pressed="true"] i { background: #FFFFFF; }
.issue-imprint {
  margin-top: auto;
  padding-top: var(--s-4);
  display: flex;
  justify-content: space-between;
  gap: var(--s-3);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--selv-ink-2);
}

.issue-sheet-wrap {
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: clamp(22px, 3.4vh, 36px) clamp(20px, 3vw, 44px) clamp(18px, 2.6vh, 28px);
  min-width: 0;
}
.sheet {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-auto-rows: minmax(0, 1fr);
  gap: clamp(8px, 1vw, 14px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.sheet > li { display: flex; min-width: 0; }
.sheet .stamp { flex: 1; }
.sheet.is-filtered .stamp:not(.is-match) { opacity: 0.22; filter: grayscale(1) drop-shadow(0 1px 1px rgba(21, 23, 29, 0.1)); }
.sheet .postmark { width: 128px; right: -30px; top: 26%; }
@media (max-width: 640px) { .sheet .postmark { width: 104px; right: -6px; } }

.sheet-bar {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-top: clamp(14px, 2.2vh, 22px);
  padding-top: clamp(12px, 1.8vh, 16px);
  border-top: 1px dashed var(--cut);
  min-height: 70px;
}
.sheet-bar__icon { width: 46px; height: 46px; border-radius: 22.5%; flex: none; box-shadow: var(--elev-2); }
.sheet-bar__text { min-width: 0; margin-right: auto; display: grid; gap: 1px; }
.sheet-bar__name { font-family: var(--font-display); font-weight: 700; font-size: var(--text-lg); line-height: 1.2; }
.sheet-bar__tag { font-size: var(--text-sm); color: var(--ink-2); line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sheet-bar__note { font-size: var(--text-xs); color: var(--ink-3); }
.sheet-bar .btn { flex: none; }

@media (max-width: 1180px) {
  .issue { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .issue-selvedge { border-right: 0; border-bottom: 1px dashed var(--cut); padding-bottom: var(--s-4); }
  .issue-selvedge h1 { max-width: 14ch; }
  .series-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 640px; }
  .issue-margin-note, .issue-imprint { display: none; }
  .sheet { grid-auto-rows: auto; }
  .sheet .stamp { aspect-ratio: 5 / 5.6; }
}
@media (max-width: 860px) { .sheet { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .sheet { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .series-tabs { grid-template-columns: 1fr 1fr; }
  .sheet-bar { flex-wrap: wrap; }
  .sheet-bar .btn { width: 100%; }
  .stamp__name { font-size: 1.05rem; }
}

/* ---------- HOME: series lists (the sheet's catalogue, below) ---------- */
.series-block { padding: var(--s-6) 0 0; scroll-margin-top: calc(var(--topbar-h) + 12px); }
.series-block__head {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px var(--s-3);
  align-items: baseline;
  padding-bottom: var(--s-3);
  border-bottom: 3px solid var(--s);
}
.series-block__head h3 { margin: 0; font-size: var(--text-2xl); font-weight: 650; }
.series-block__head .series-swatch { width: 18px; height: 18px; background: var(--s); align-self: center; }
.series-block__head p { grid-column: 2; margin: 0; color: var(--ink-2); max-width: 64ch; }
.series-list { list-style: none; margin: 0; padding: 0; }
.series-row {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  gap: var(--s-3) var(--s-4);
  align-items: center;
  padding: var(--s-3) 0;
  border-bottom: 1px dashed var(--cut);
  color: var(--ink);
  text-decoration: none;
}
.series-row:hover { color: var(--ink); background: var(--t); }
.series-row img { width: 64px; height: 64px; border-radius: 22.5%; box-shadow: var(--elev-2); }
.series-row__name { font-family: var(--font-display); font-weight: 700; font-size: var(--text-lg); line-height: 1.2; }
.series-row__desc { display: block; font-size: var(--text-sm); color: var(--ink-2); margin-top: 2px; max-width: 72ch; }
.series-row__meta { text-align: right; font-size: var(--text-xs); color: var(--ink-3); line-height: 1.5; white-space: nowrap; }
.series-row__meta strong { display: block; font-family: var(--font-display); font-size: var(--text-sm); color: var(--s); }
@media (max-width: 640px) {
  .series-row { grid-template-columns: 52px minmax(0, 1fr); }
  .series-row img { width: 52px; height: 52px; }
  .series-row__meta { grid-column: 2; text-align: left; white-space: normal; }
  .series-row__meta strong { display: inline; margin-right: 6px; }
}

/* ---------- SHEET NOTES (about strip) ---------- */
.about-strip {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: var(--s-5);
  align-items: start;
  max-width: none;
  margin: 0;
  padding: var(--s-5) 0;
  border-top: 1px dashed var(--cut);
  border-bottom: 1px dashed var(--cut);
}
.about-strip h2 { font-size: var(--text-2xl); margin-bottom: var(--s-3); }
.about-strip p { margin: 0 0 var(--s-3); font-size: var(--text-base); line-height: 1.65; color: var(--ink-2); }
.about-strip .tech { margin-top: 0; }
@media (max-width: 860px) { .about-strip { grid-template-columns: 1fr; gap: var(--s-4); } }

/* Technical details table — the stamp leaflet's spec list */
.tech {
  display: grid;
  grid-template-columns: minmax(130px, auto) 1fr;
  margin: var(--s-4) 0 0;
  border-top: 2px solid var(--ink);
  font-size: var(--text-sm);
}
.tech dt, .tech dd { margin: 0; padding: 10px 0; border-bottom: 1px solid var(--rule); }
.tech dt { font-family: var(--font-display); font-weight: 650; letter-spacing: 0.01em; padding-right: var(--s-3); }
.tech dd { color: var(--ink-2); min-width: 0; overflow-wrap: anywhere; }

/* ---------- HERO — generic opener (content pages) ---------- */
.hero {
  padding: clamp(3rem, 7vw, 5.5rem) 0 clamp(2.5rem, 5vw, 4rem);
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  position: relative;
}
.hero .h1, .hero h1 { margin-bottom: var(--s-3); }
.hero .lead { margin-bottom: 0; }
.hero .actions { margin-top: var(--s-4); }
.hero .app-badge { margin-bottom: var(--s-4); }
.hero .meta-row { margin-top: var(--s-4); }
.hero .app-icon { width: 56px; height: 56px; }

.hero-pre {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 500;
  color: var(--ink);
  margin: var(--s-3) 0 0;
}
.hero-eyebrow {
  font-size: var(--text-lg);
  color: var(--ink-2);
  margin: 0 0 var(--s-3);
}
.cta-subline { font-size: var(--text-xs); color: var(--ink-3); margin: var(--s-2) 0 0; }
.hero-updated { font-size: var(--text-xs); color: var(--ink-3); margin: var(--s-3) 0 0; }

/* Retired home-hero pieces (kept inert for cached pages) */
.hero-proof { display: none; }
.dot--live { display: none; }
.hide-sm { display: inline; }
@media (max-width: 480px) { .hide-sm { display: none; } }

.hero-right { display: grid; place-items: center; }
.hero-media { position: relative; max-width: 400px; width: 100%; }
.hero-shot {
  display: block;
  width: 100%;
  border-radius: var(--r-lg);
  border: 1px solid var(--rule);
  box-shadow: var(--elev-4);
  background: var(--paper-white);
}
.hero-composition { display: none; }
.hero-video, video.hero-shot { border-radius: var(--r-lg); }

@media (max-width: 980px) {
  .hero { grid-template-columns: minmax(0, 1fr); gap: var(--s-5); padding: var(--s-6) 0 var(--s-5); }
  .hero-media { max-width: 360px; }
}

/* Heroes with no media column (alternatives, guides, journal, hubs) */
.hero > :only-child { grid-column: 1 / -1; max-width: 860px; }

/* ---------- APP PAGE: THE LEAFLET ---------- */
.hero--leaflet {
  grid-template-columns: minmax(260px, 0.8fr) minmax(0, 1.2fr);
  align-items: start;
  gap: clamp(2rem, 6vw, 5.5rem);
  padding-top: clamp(2.5rem, 5vw, 4rem);
}
.leaflet-stamp {
  position: relative;
  width: 100%;
  max-width: 420px;
  margin-top: 6px;
}
.leaflet-stamp .stamp { --perf: 6px; aspect-ratio: 5 / 6; filter: drop-shadow(0 3px 4px rgba(21, 23, 29, 0.16)); }
.leaflet-stamp .stamp:hover { transform: none; filter: drop-shadow(0 3px 4px rgba(21, 23, 29, 0.16)); }
.leaflet-stamp .stamp__field { border-width: 5px; padding: 16px 18px 22px; }
.leaflet-stamp .stamp__top { font-size: 0.95rem; }
.leaflet-stamp .stamp__denom { font-size: 1.15rem; }
.leaflet-stamp .stamp__icon { width: 48%; max-width: 190px; margin: 18px 0 12px; }
.leaflet-stamp .stamp__name { font-size: clamp(1.7rem, 2.8vw, 2.4rem); }
.leaflet-stamp .stamp__plat { font-size: 0.85rem; margin-top: 6px; white-space: normal; }
.leaflet-stamp .postmark { width: 46%; right: -14%; bottom: -6%; }
.leaflet-caption { margin: var(--s-3) 0 0; font-size: var(--text-xs); color: var(--ink-3); max-width: 420px; }

.hero--leaflet h1 { font-size: clamp(2.3rem, 4.4vw, 3.9rem); max-width: 16ch; }
.hero--leaflet .lead { max-width: 54ch; }
.crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 var(--s-3);
  padding: 0;
  list-style: none;
  font-size: var(--text-xs);
  color: var(--ink-3);
}
.crumbs li + li::before { content: "›"; margin-right: 6px; color: var(--ink-3); }
.crumbs a { color: var(--ink-2); text-decoration: none; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; }

@media (max-width: 980px) {
  .hero--leaflet { grid-template-columns: minmax(0, 1fr); }
  .leaflet-stamp { max-width: 300px; }
}
@media (max-width: 480px) { .leaflet-stamp { max-width: 240px; } }

/* ---------- DEVICE FRAME (hero video, Mac shots, legacy) ---------- */
.framed-shot {
  position: relative;
  display: inline-block;
  padding: 9px 8px;
  border-radius: 36px;
  background: var(--frame-metal);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.09), var(--frame-shadow);
  isolation: isolate;
}
.framed-shot img, .framed-shot video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 28px;
  background: #15171D;
  position: relative;
  z-index: 1;
}
.framed-shot--no-island::after { display: none; }
.framed-shot--lift { filter: drop-shadow(0 28px 36px rgba(21, 23, 29, 0.26)); }
.hero-media--framed { display: grid; place-items: center; }
.hero-media--framed .framed-shot { display: block; width: min(320px, 78vw); }
.framed-shot .hero-shot, .framed-shot img { border: none; box-shadow: none; }

/* ---------- QR INSTALL (desktop-only handoff) ---------- */
.qr-install { display: none; }
@media (min-width: 900px) and (hover: hover) {
  .qr-install {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    margin-top: var(--s-4);
    padding: 10px 14px 10px 10px;
    border: 1px dashed var(--cut);
    border-radius: var(--r-sm);
    background: var(--paper-white);
    max-width: 340px;
  }
  .qr-install__img { width: 72px; height: 72px; flex: none; }
  .qr-install__copy { font-size: var(--text-xs); line-height: 1.45; color: var(--ink-2); display: grid; gap: 2px; }
  .qr-install__copy strong { color: var(--ink); font-weight: 600; }
}

/* ---------- TRUST BAR (still used on some pages) — a printed imprint line ---------- */
.trust-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: flex-start;
  gap: var(--s-2) var(--s-5);
  padding: var(--s-3) 0;
  border-top: 2px solid var(--ink);
  border-bottom: 1px solid var(--rule);
}
.trust-item { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.trust-value {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  line-height: 1.1;
  color: var(--ink);
}
.trust-star { color: var(--ink); }
.trust-label { font-size: var(--text-sm); color: var(--ink-2); }
.trust-divider { display: none; }

/* ---------- STICKY DOWNLOAD BAR ---------- */
.sticky-cta {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 90;
  background: var(--selv);
  border-top: 1px dashed var(--cut);
  padding-bottom: env(safe-area-inset-bottom, 0);
  transform: translateY(0);
  transition: transform var(--dur-md) var(--ease-out);
}
.sticky-cta[data-hidden="true"] { transform: translateY(110%); }
.sticky-cta__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 10px var(--s-4);
  display: flex;
  align-items: center;
  gap: var(--s-3);
}
.sticky-cta__icon { width: 40px; height: 40px; border-radius: 22.5%; flex: none; box-shadow: var(--elev-2); }
.sticky-cta__meta { display: grid; gap: 1px; margin-right: auto; min-width: 0; }
.sticky-cta__name { font-family: var(--font-display); font-weight: 700; font-size: var(--text-base); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sticky-cta__price { font-size: var(--text-xs); color: var(--selv-ink-2); }

/* ---------- SCREENSHOTS — a se-tenant strip of stamps ---------- */
#screenshots.section { padding-top: var(--s-6); }
.shots-band {
  background: var(--selv);
  border-top: 1px dashed var(--cut);
  border-bottom: 1px dashed var(--cut);
  padding: var(--s-5) 0 var(--s-4);
}
.shots-band .section-head { max-width: var(--container); margin: 0 auto var(--s-4); padding: 0 var(--s-4); }
.shots-band .section-sub { color: var(--selv-ink-2); }
.shots {
  display: flex;
  gap: 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 6px max(var(--s-4), calc((100vw - var(--container)) / 2 + var(--s-4))) 18px;
  scrollbar-width: thin;
  scrollbar-color: var(--ink) transparent;
  cursor: grab;
}
.shots::-webkit-scrollbar { height: 6px; }
.shots::-webkit-scrollbar-thumb { background: var(--ink); }
.shots:active { cursor: grabbing; }
.shot {
  flex: 0 0 auto;
  width: min(270px, 66vw);
  margin: 0;
  scroll-snap-align: center;
  text-align: center;
  filter: drop-shadow(0 1px 1.5px rgba(21, 23, 29, 0.18));
}
.shot__paper, .shot .framed-shot {
  display: block;
  padding: 10px;
  background: var(--paper-white);
  border-radius: 0;
  box-shadow: none;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    radial-gradient(circle 5px, #0000 96%, #000) -10px -10px / 20px 20px round;
          mask:
    linear-gradient(#000 0 0) content-box,
    radial-gradient(circle 5px, #0000 96%, #000) -10px -10px / 20px 20px round;
}
.shot .framed-shot::before, .shot .framed-shot::after { display: none; }
.shot .framed-shot img, .shot__paper img {
  display: block;
  width: 100%;
  border: 3px solid var(--s, var(--ink));
  border-radius: 0;
  box-shadow: none;
  background: var(--t, var(--paper));
}
.shot--window { width: min(460px, 84vw); }
.shot--window img {
  display: block;
  width: 100%;
  border: 3px solid var(--s, var(--ink));
  background: var(--paper-white);
}
.shot-caption {
  margin: 8px 6px 0;
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ink);
  line-height: 1.35;
}
.shots-indicators { display: none; }
.shots-dot { display: none; }

/* ---------- FEATURES ---------- */
.features-list { display: grid; gap: 0; border-top: 2px solid var(--ink); }
.feature-row {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: var(--s-4);
  padding: var(--s-4) 0;
  border-bottom: 1px dashed var(--cut);
  align-items: baseline;
}
.feature-number {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 500;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.feature-row .card-title { margin-bottom: 4px; }
@media (max-width: 560px) { .feature-row { grid-template-columns: 40px 1fr; gap: var(--s-3); } }

/* ---------- METHOD (how it works) ---------- */
.method-list {
  list-style: none;
  margin: var(--s-5) auto 0;
  padding: 0;
  max-width: var(--container-narrow);
  display: grid;
  gap: 0;
  border-top: 2px solid var(--ink);
}
.method-step {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: var(--s-4);
  align-items: start;
  padding: var(--s-4) 0;
  border-bottom: 1px dashed var(--cut);
}
.method-num { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 500; color: var(--ink-3); line-height: 1.2; font-variant-numeric: tabular-nums; }
.method-title { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 650; margin-bottom: 4px; }
.method-detail { font-size: var(--text-sm); color: var(--ink-2); margin: 0; }

/* ---------- INSIGHT GALLERY ---------- */
.insight-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-3); margin-top: var(--s-5); }
@media (max-width: 880px) { .insight-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .insight-grid { grid-template-columns: 1fr; } }
.insight-card { background: var(--paper-white); border: 1px solid var(--rule); border-top: 4px solid var(--ink); padding: var(--s-4); }
.insight-tag { display: inline-block; font-size: var(--text-xs); font-weight: 600; color: var(--ink-3); margin-bottom: var(--s-2); }
.insight-headline { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 650; line-height: 1.3; margin-bottom: var(--s-2); }
.insight-body { font-size: var(--text-sm); color: var(--ink-2); margin: 0; }

/* ---------- SPOTLIGHT (legacy feature panel) ---------- */
.spotlight-card {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--s-5);
  align-items: center;
  background: var(--paper-white);
  border: 1px solid var(--rule);
  padding: var(--s-5);
}
@media (max-width: 880px) { .spotlight-card { grid-template-columns: 1fr; padding: var(--s-4); } }
.spotlight-media { display: grid; place-items: center; }
.spotlight-media img { max-width: 300px; border-radius: var(--r-lg); }
.spotlight-stats { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-5); margin-top: var(--s-4); }
.spotlight-stat { min-width: 96px; }
.spotlight-stat__value { display: block; font-family: var(--font-display); font-size: var(--text-xl); font-weight: 700; color: var(--ink); }
.spotlight-stat__label { font-size: var(--text-xs); color: var(--ink-3); }

/* ---------- PRICING — the denomination table ---------- */
.pricing-card { background: var(--paper-white); border: 1px solid var(--rule-2); padding: var(--s-5); max-width: 620px; }
.price-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; }
.price-pill {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--ink);
  padding: 8px 14px;
  border: 1.5px solid var(--ink);
  border-radius: var(--r-sm);
  white-space: nowrap;
}
.plans-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0;
  align-items: stretch;
  margin-top: var(--s-4);
  border: 2px solid var(--ink);
  background: var(--paper-white);
}
.plan-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--s-4);
  border-right: 1px solid var(--rule-2);
  background: var(--paper-white);
}
.plan-card:last-child { border-right: 0; }
.plan-card--highlight { background: var(--selv-soft); }
.plan-badge {
  align-self: flex-start;
  order: -1;
  margin-bottom: var(--s-2);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--ink);
  background: var(--selv);
  padding: 3px 8px;
}
.plan-name { font-size: var(--text-sm); font-weight: 600; color: var(--ink-2); }
.plan-price { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 700; letter-spacing: -0.02em; color: var(--ink); margin: 4px 0 var(--s-1); font-variant-numeric: tabular-nums; }
.plan-meta { font-size: var(--text-xs); color: var(--ink-2); margin-bottom: var(--s-1); }
.plan-meta--trial { font-weight: 600; color: var(--ink); }
.plan-summary { font-size: var(--text-sm); color: var(--ink-2); margin-bottom: var(--s-2); }
.plan-features { list-style: none; margin: auto 0 0; padding: var(--s-2) 0 0; border-top: 1px dashed var(--cut); display: grid; gap: 6px; }
.plan-features li { position: relative; padding-left: 1.4em; font-size: var(--text-sm); color: var(--ink-2); }
.plan-features li::before {
  content: '';
  position: absolute;
  left: 2px; top: 0.45em;
  width: 9px; height: 5px;
  border-left: 2px solid var(--ok);
  border-bottom: 2px solid var(--ok);
  transform: rotate(-45deg);
}
@media (max-width: 720px) {
  .plan-card { border-right: 0; border-bottom: 1px solid var(--rule-2); }
  .plan-card:last-child { border-bottom: 0; }
}
.plans-footnote, .pricing-note { font-size: var(--text-xs); color: var(--ink-3); margin-top: var(--s-3); max-width: 64ch; }
.pricing-foot { margin-top: var(--s-4); }

.value-math {
  display: block;
  max-width: 640px;
  margin: 0 0 var(--s-4);
  padding: var(--s-3) var(--s-4);
  border: 1px dashed var(--cut);
  background: var(--paper-white);
  font-size: var(--text-sm);
  line-height: 1.6;
}
.value-math__label { display: block; font-weight: 600; color: var(--ink); margin-bottom: 2px; }
.value-math__body { color: var(--ink-2); }

/* Release notes */
.release-notes { margin-top: var(--s-4); max-width: 640px; border-top: 1px solid var(--rule-2); }
.release-notes__summary { cursor: pointer; padding: var(--s-2) 0; font-size: var(--text-sm); font-weight: 600; color: var(--ink); list-style: none; }
.release-notes__summary::-webkit-details-marker { display: none; }
.release-notes__summary::before { content: '+ '; font-family: var(--font-display); }
.release-notes[open] .release-notes__summary::before { content: '− '; }
.release-notes__list { list-style: none; margin: 0; padding: 0 0 var(--s-3); display: grid; gap: var(--s-2); }
.release-notes__item { display: grid; grid-template-columns: 120px 1fr; gap: var(--s-3); font-size: var(--text-sm); }
@media (max-width: 560px) { .release-notes__item { grid-template-columns: 1fr; gap: 2px; } }
.release-notes__date { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.release-notes__note { color: var(--ink-2); }

/* ---------- JUMP NAV ---------- */
.jump-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-1) var(--s-3);
  padding: var(--s-2) 0;
  border-top: 1px dashed var(--cut);
  border-bottom: 1px dashed var(--cut);
  margin: 0 0 var(--s-4);
}
.jump-nav__label { font-size: var(--text-xs); font-weight: 600; color: var(--ink-3); }
.jump-nav__list { display: flex; flex-wrap: wrap; gap: 2px var(--s-1); list-style: none; margin: 0; padding: 0; }
.jump-nav__list a { display: inline-block; font-size: var(--text-sm); color: var(--ink); text-decoration: none; padding: 4px 6px; border-bottom: 2px solid transparent; }
.jump-nav__list a:hover { border-bottom-color: var(--ink); }

/* ---------- FAQ ---------- */
.faq { max-width: var(--container-narrow); display: grid; gap: 0; border-top: 2px solid var(--ink); }
.section-center + .faq, .section-center ~ .faq { margin: 0 auto; }
.faq-item { border-bottom: 1px dashed var(--cut); padding: 0; }
.faq-item summary {
  cursor: pointer;
  list-style: none;
  padding: var(--s-3) 40px var(--s-3) 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-lg);
  line-height: 1.3;
  color: var(--ink);
  position: relative;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '';
  position: absolute;
  right: 6px;
  top: 50%;
  width: 14px; height: 14px;
  margin-top: -7px;
  background:
    linear-gradient(var(--ink) 0 0) center / 14px 2px no-repeat,
    linear-gradient(var(--ink) 0 0) center / 2px 14px no-repeat;
  transition: transform var(--dur-md) var(--ease-out);
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-a { padding: 0 0 var(--s-4); color: var(--ink-2); font-size: var(--text-base); line-height: 1.65; max-width: 68ch; }

/* ---------- QUICK ANSWER — a printed notice ---------- */
.quick-answer {
  margin: 0 0 var(--s-4);
  padding: var(--s-3) var(--s-4);
  border: 1.5px solid var(--ink);
  background: var(--paper-white);
}
.quick-answer__label { font-family: var(--font-display); font-size: var(--text-sm); font-weight: 700; color: var(--ink); margin: 0 0 4px; }
.quick-answer__body { margin: 0; font-size: var(--text-sm); line-height: 1.65; color: var(--ink-2); }

/* ---------- KV ROWS ---------- */
.kv { display: grid; gap: 0; border-top: 2px solid var(--ink); }
.kv-row { display: grid; grid-template-columns: 180px 1fr; gap: var(--s-3); padding: 10px 0; border-bottom: 1px solid var(--rule); font-size: var(--text-sm); }
@media (max-width: 560px) { .kv-row { grid-template-columns: 1fr; gap: 2px; } }
.kv-k { color: var(--ink); font-family: var(--font-display); font-weight: 600; }
.kv-v { color: var(--ink-2); }

/* ---------- FOUNDER / MAKER CARD ---------- */
.founder-card { max-width: var(--container-narrow); margin: 0 auto; background: var(--paper-white); border: 1px solid var(--rule); padding: var(--s-5); }
@media (max-width: 560px) { .founder-card { padding: var(--s-4); } }
.founder-card__head { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-3); }
.founder-card__photo { width: 56px; height: 56px; border-radius: 22.5%; object-fit: cover; flex: none; }
.founder-card__name { font-family: var(--font-display); font-weight: 700; }
.founder-card__role, .founder-card__id { font-size: var(--text-xs); color: var(--ink-3); }
.founder-card__story { font-size: var(--text-lg); line-height: 1.55; color: var(--ink-2); }
.founder-card__signals { display: flex; flex-wrap: wrap; gap: 6px; margin: var(--s-3) 0; }
.founder-card__contact { margin-top: var(--s-3); }
.founder-card__response, .founder-card__more { font-size: var(--text-xs); color: var(--ink-3); margin-top: var(--s-2); }

/* ---------- PRIVACY ---------- */
.privacy-block { margin-bottom: var(--s-4); }
.privacy-label-callout {
  display: flex;
  gap: var(--s-3);
  align-items: flex-start;
  max-width: 640px;
  padding: var(--s-3) var(--s-4);
  border: 1.5px solid var(--ink);
  background: var(--paper-white);
  font-size: var(--text-sm);
  color: var(--ink-2);
}
.pl-icon { font-size: 20px; line-height: 1.3; }
.pl-body strong { color: var(--ink); }

/* ---------- ROADMAP ---------- */
.roadmap-list { list-style: none; margin: var(--s-4) 0 0; padding: 0; max-width: var(--container-narrow); display: grid; gap: 0; border-top: 2px solid var(--ink); }
.roadmap-item { display: grid; grid-template-columns: 120px 1fr; gap: var(--s-3); align-items: baseline; padding: var(--s-3) 0; border-bottom: 1px dashed var(--cut); font-size: var(--text-sm); }
@media (max-width: 560px) { .roadmap-item { grid-template-columns: 1fr; gap: 2px; } }
.roadmap-item--shipped .roadmap-item__what { text-decoration: line-through; text-decoration-color: var(--ink-3); color: var(--ink-3); }
.roadmap-item__when { font-family: var(--font-display); font-size: var(--text-sm); font-weight: 600; color: var(--ink); }
.roadmap-item__what { color: var(--ink-2); }
.roadmap-disclaimer { font-size: var(--text-xs); color: var(--ink-3); margin-top: var(--s-3); max-width: 60ch; }

/* ---------- APP BODY PROSE + AI-CANONICAL + VOCAB ---------- */
.app-body-card, .app-body-prose { max-width: var(--w-content); margin: 0 auto; }
.app-body-prose { color: var(--ink-2); }
.app-body-prose h3 { margin-top: var(--s-5); }
.ai-canonical { max-width: var(--w-content); margin: 0 auto; }
.ai-canonical__details { border-top: 1px dashed var(--cut); border-bottom: 1px dashed var(--cut); padding: 0; }
.ai-canonical__summary { cursor: pointer; padding: var(--s-2) 0; font-size: var(--text-sm); font-weight: 600; color: var(--ink-2); list-style: none; }
.ai-canonical__summary::-webkit-details-marker { display: none; }
.ai-canonical__body { padding-bottom: var(--s-3); font-size: var(--text-sm); color: var(--ink-2); line-height: 1.65; }
.vocab-details { border-top: 1px dashed var(--cut); border-bottom: 1px dashed var(--cut); padding: 0; }
.vocab-details summary { color: var(--ink); font-weight: 600; font-size: var(--text-sm); padding: var(--s-2) 0; cursor: pointer; }

/* ---------- ALT STRIP + MENTIONED ---------- */
.alt-strip { list-style: none; margin: var(--s-4) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.alt-strip a {
  display: inline-block;
  padding: 7px 12px;
  border: 1px solid var(--rule-2);
  border-radius: var(--r-sm);
  background: var(--paper-white);
  font-size: var(--text-sm);
  color: var(--ink);
  text-decoration: none;
  transition: border-color var(--dur-fast), background var(--dur-fast);
}
.alt-strip a:hover { border-color: var(--ink); background: var(--selv-soft); }
.alt-strip__pending { display: inline-block; padding: 7px 12px; font-size: var(--text-sm); color: var(--ink-3); }
.mentioned-row { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-5); justify-content: center; align-items: center; }
.mentioned-row a { color: var(--ink-2); }

/* ---------- COMPARISONS — stamp-album pages ---------- */
.compare-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); line-height: 1.5; background: var(--paper-white); }
.compare-table th, .compare-table td { text-align: left; vertical-align: top; padding: 12px 14px; border-bottom: 1px solid var(--rule); }
.compare-table thead th {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--ink);
  border-bottom: 2px solid var(--ink);
}
.compare-table tbody th[scope="row"] { font-family: var(--font-display); font-weight: 600; color: var(--ink); width: 24%; }
.compare-table td { color: var(--ink-2); }
.compare-table__primary { background: var(--selv-soft); color: var(--ink) !important; font-weight: 500; }
.compare-table tbody tr:last-child th, .compare-table tbody tr:last-child td { border-bottom: none; }
.compare-matrix { overflow-x: auto; border: 1px solid var(--rule); }
.compare-matrix table { min-width: 560px; }

.compared-to-grid { margin-top: var(--s-5); }
.card-compared { display: flex; flex-direction: column; align-items: flex-start; }
.card-compared-vs { font-family: var(--font-sans); font-size: var(--text-sm); font-weight: 500; color: var(--ink-3); margin: 0 2px; }
.card-compared-title { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 700; line-height: 1.2; margin: var(--s-2) 0; }
.card-compared-cta { display: inline-block; margin-top: auto; padding-top: var(--s-2); font-size: var(--text-sm); font-weight: 600; color: var(--blue); }

/* ---------- JOURNAL / PROSE (Read mode) ---------- */
.journal-post .prose, .prose {
  max-width: var(--w-content);
  margin: 0 auto;
  color: var(--ink-2);
  font-size: 1.125rem;
  line-height: 1.72;
}
.prose h2, .prose h3 { color: var(--ink); margin-top: var(--s-6); }
.prose h2 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); }
.prose strong { color: var(--ink); }
.prose img { border: 1px solid var(--rule); }
.prose table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); margin: var(--s-4) 0; display: block; overflow-x: auto; background: var(--paper-white); }
.prose table th, .prose table td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--rule); vertical-align: top; }
.prose table thead th { font-family: var(--font-display); font-size: var(--text-sm); font-weight: 700; color: var(--ink); border-bottom: 2px solid var(--ink); }
.prose li { margin-bottom: var(--s-1); }
.prose li::marker { color: var(--ink); }

.journal-preview { max-width: none; margin: 0; }
.card-journal { padding: var(--s-4); display: flex; flex-direction: column; }
.card-journal-title { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 650; line-height: 1.22; margin: var(--s-2) 0; }
.card-journal-cta { display: inline-block; margin-top: auto; padding-top: var(--s-2); font-size: var(--text-sm); font-weight: 600; color: var(--blue); }

/* ---------- TRANSPARENCY ---------- */
.transparency-table-wrap { overflow-x: auto; border-top: 2px solid var(--ink); }
.transparency-table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: var(--text-sm); }
.transparency-table th, .transparency-table td { text-align: left; padding: 11px 14px 11px 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
.transparency-table thead th { font-family: var(--font-display); font-size: var(--text-sm); font-weight: 700; color: var(--ink); }
.transparency-table td { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.transparency-table td:first-child, .transparency-table th[scope="row"] { font-weight: 600; color: var(--ink); }
/* /transparency/ — one printed record per app: stamp and name on the left,
   a ruled field list on the right, dashed cut lines between records. */
.about-strip--split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); }
.about-strip--split > .h2 { margin: 0; max-width: 14ch; }
.about-strip__body > :last-child { margin-bottom: 0; }
.about-strip__body .lead { font-size: var(--text-lg); color: var(--ink); }

.transparency-index { margin-top: var(--s-5); }
.transparency-index ul { display: flex; flex-wrap: wrap; gap: var(--s-1); margin: 0; padding: 0; list-style: none; justify-content: center; }
.transparency-index a {
  display: inline-block; padding: 5px 10px; font-size: var(--text-sm); font-weight: 500;
  color: var(--ink-2); text-decoration: none; background: var(--paper-white);
  border: 1px solid var(--rule-2); border-radius: var(--r-sm);
  transition: border-color var(--dur-fast) ease, color var(--dur-fast) ease;
}
.transparency-index a:hover { color: var(--ink); border-color: var(--ink); }

.transparency-grid { margin-top: var(--s-5); border-top: 2px solid var(--ink); }
.transparency-card {
  display: grid;
  grid-template-columns: minmax(200px, 260px) minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  column-gap: var(--s-6);
  padding: var(--s-5) 0;
  border-bottom: 1px dashed var(--cut);
  scroll-margin-top: 84px;
}
.transparency-card-head {
  grid-column: 1; grid-row: 1;
  display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: var(--s-1) var(--s-3);
  align-items: start; margin: 0;
}
.transparency-card-head .mini-stamp { grid-row: 1 / span 3; width: 64px; }
.transparency-card-head > div { min-width: 0; }
.transparency-card-name { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 700; line-height: 1.15; margin: 2px 0 4px; }
.transparency-card-name a { color: var(--ink); text-decoration: none; }
.transparency-card-name a:hover { color: var(--blue); }
.transparency-card-tagline { font-size: var(--text-sm); line-height: 1.45; color: var(--ink-2); margin: 0; }
.transparency-source {
  grid-column: 2; justify-self: start; margin-top: var(--s-1);
  font-size: var(--text-xs); font-weight: 600; line-height: 1.3; padding: 3px 8px;
  border: 1px solid var(--rule-2); border-radius: var(--r-sm); color: var(--ink-2); background: var(--paper-white);
}
.transparency-source.is-source { color: var(--ok); border-color: var(--ok); }
.transparency-source.is-pending { border-style: dashed; color: var(--ink-3); }

.transparency-dl { grid-column: 2; grid-row: 1 / span 2; margin: 0; border-top: 2px solid var(--s, var(--ink)); font-size: var(--text-sm); }
.transparency-dl > div {
  display: grid; grid-template-columns: minmax(150px, 15rem) minmax(0, 1fr); gap: var(--s-3);
  padding: 10px 0; border-bottom: 1px solid var(--rule);
}
.transparency-dl > div:last-child { border-bottom: 0; }
.transparency-dl dt { font-family: var(--font-display); font-weight: 650; color: var(--ink); overflow-wrap: anywhere; }
.transparency-dl dd { margin: 0; color: var(--ink-2); line-height: 1.55; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.transparency-dl code { font-size: 0.92em; }
.transparency-list { margin: 0; padding-left: 1.1em; }
.transparency-list li + li { margin-top: 4px; }

.transparency-card-foot {
  grid-column: 1; grid-row: 2; align-self: start;
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  margin-top: var(--s-4); font-size: var(--text-sm);
}
.transparency-app-link { font-weight: 600; color: var(--ink); white-space: nowrap; }
.transparency-app-link:hover { color: var(--blue); }

.transparency-refuses { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); color: var(--ink-2); font-size: var(--text-base); line-height: 1.6; }
.transparency-refuses li { padding: var(--s-2) 0; border-bottom: 1px solid var(--rule); }
.transparency-refuses li:last-child { border-bottom: 0; }
.transparency-refuses strong { color: var(--ink); font-family: var(--font-display); font-weight: 650; }

@media (max-width: 860px) {
  .about-strip--split { grid-template-columns: minmax(0, 1fr); }
  .about-strip--split > .h2 { max-width: none; }
  .transparency-card { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; padding: var(--s-4) 0; }
  .transparency-card-head, .transparency-dl, .transparency-card-foot { grid-column: 1; grid-row: auto; }
  .transparency-dl { margin-top: var(--s-3); }
  .transparency-card-foot { flex-direction: row; flex-wrap: wrap; gap: 6px var(--s-4); margin-top: var(--s-3); }
}
@media (max-width: 560px) {
  .transparency-card-head { grid-template-columns: 52px minmax(0, 1fr); }
  .transparency-card-head .mini-stamp { width: 52px; }
  .transparency-dl > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .transparency-index ul { justify-content: flex-start; }
}

/* ---------- TESTIMONIALS — postcards ---------- */
.testimonials-head { text-align: center; margin-bottom: var(--s-4); }
.testimonials-meta { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; margin-top: var(--s-3); }
.ticker {
  position: relative;
  overflow: hidden;
  padding: var(--s-3) 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.ticker-track { display: flex; gap: var(--s-3); width: max-content; padding: 4px 0 12px; }
.ticker:hover .ticker-track, .ticker:focus-within .ticker-track { animation-play-state: paused; }
.ticker-card {
  position: relative;
  flex: none;
  width: 300px;
  background: var(--paper-white);
  border: 1px solid var(--rule);
  padding: var(--s-3) var(--s-4);
  box-shadow: var(--elev-2);
}
.ticker-card--hero { width: 340px; }
.ticker-card__top { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); margin-bottom: var(--s-2); }
.ticker-card__stars { color: var(--ink); font-size: var(--text-xs); letter-spacing: 2px; }
.star--off { opacity: 0.25; }
.ticker-card__source-mark { display: none; }
.ticker-card__lang { font-size: var(--text-xs); font-weight: 600; color: var(--ink-3); border: 1px solid var(--rule-2); padding: 0 6px; }
.ticker-card__quote { font-family: var(--font-display); font-weight: 500; font-size: var(--text-base); line-height: 1.45; color: var(--ink); margin: 0 0 var(--s-2); padding: 0; border: none; background: none; }
.ticker-card__meta { display: flex; align-items: center; gap: 6px; font-size: var(--text-xs); color: var(--ink-3); }
.ticker-card__author { font-weight: 600; color: var(--ink-2); }
.ticker-card__translation {
  display: none;
  position: absolute;
  left: 8px; right: 8px; bottom: calc(100% + 6px);
  background: var(--paper-white);
  border: 1px solid var(--rule-2);
  box-shadow: var(--elev-3);
  padding: var(--s-2) var(--s-3);
  z-index: 5;
}
.ticker-card--translate:hover .ticker-card__translation,
.ticker-card--translate:focus-within .ticker-card__translation { display: block; }
.ticker-card__translation-label { display: block; font-size: var(--text-xs); font-weight: 600; color: var(--ink-3); margin-bottom: 2px; }
.ticker-card__translation-text { margin: 0; font-size: var(--text-xs); line-height: 1.5; color: var(--ink-2); }
.ticker-card__dot { opacity: 0.6; }
.testimonials-footnote { text-align: center; font-size: var(--text-xs); color: var(--ink-3); margin-top: var(--s-3); }

/* ---------- CTA SECTION — the sheet's closing margin ---------- */
.cta-section {
  text-align: center;
  padding: var(--s-7) var(--s-4);
  margin: var(--s-6) 0 0;
  background: var(--selv);
  border-top: 1px dashed var(--cut);
  border-bottom: 1px dashed var(--cut);
  width: 100vw;
  margin-left: calc(50% - 50vw);
}
.cta-section .lead { color: var(--selv-ink-2); margin-left: auto; margin-right: auto; }
.cta-section .actions { justify-content: center; }
.cta-section .btn-secondary:hover { background: var(--ink); }
.cta-section + footer.footer { margin-top: 0; border-top: 0; }

/* ---------- FOOTER — the bottom selvedge ---------- */
footer.footer, .footer {
  background: var(--selv);
  border-top: 1px dashed var(--cut);
  margin-top: var(--s-7);
  color: var(--ink);
}
.footer-hero {
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--s-6) var(--s-4) var(--s-4);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-3) var(--s-5);
  border-bottom: 1px dashed var(--cut);
}
.footer-wordmark {
  display: block;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 7vw, 5rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 0.9;
  color: var(--ink);
}
.footer-tagline { font-size: var(--text-base); color: var(--selv-ink-2); margin: 0; max-width: 42ch; }
.footer-hero .badge-privacy { order: 3; }
.footer-grid {
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--s-5) var(--s-4);
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr 1fr;
  gap: var(--s-5);
}
@media (max-width: 880px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-col h4 {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 var(--s-2);
}
.footer-col a { display: block; padding: 3px 0; font-size: var(--text-sm); color: var(--ink); text-decoration: none; }
.footer-col a:hover { text-decoration: underline; color: var(--ink); }
.footer-col p { font-size: var(--text-sm); color: var(--selv-ink-2); }
.footer-col p a { display: inline; text-decoration: underline; }
.footer .brand { margin-bottom: var(--s-3); }
.footer-meta {
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--s-3) var(--s-4) var(--s-5);
  border-top: 1px dashed var(--cut);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s-2);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  color: var(--selv-ink-2);
}
.footer :focus-visible { outline-color: var(--ink); }

/* ---------- 404 ---------- */
.page-404 { text-align: center; padding: var(--s-8) 0; }
.display-404 { font-family: var(--font-display); font-size: clamp(5rem, 16vw, 10rem); font-weight: 700; line-height: 1; color: var(--ink); letter-spacing: -0.04em; }
.page-404 .lead { margin: var(--s-3) auto var(--s-4); }
.page-404 .actions { justify-content: center; }

/* ---------- APP STORE BADGE ---------- */
.asb { display: inline-flex; border-radius: 10px; line-height: 0; transition: transform var(--dur-md) var(--ease-out); }
.asb-svg { height: 50px; width: auto; display: block; }
.asb--sm .asb-svg { height: 40px; }
.asb:hover { transform: translateY(-2px); }

/* ---------- FOCUS ---------- */
:focus { outline: none; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.btn:focus-visible, .asb:focus-visible, .series-tab:focus-visible { outline-offset: 2px; }

/* Scrollbars on scrollable panels */
.compare-matrix, .transparency-table-wrap, .prose table { scrollbar-width: thin; scrollbar-color: var(--ink-3) transparent; }

/* ----------------------------------------------------------------
   6. MOTION — reveal system
   Content is visible by default. head.html sets `js` on <html>
   before first paint; only then do reveal elements start hidden.
   ---------------------------------------------------------------- */
html.js .reveal,
html.js .reveal-scale,
html.js .stagger > * {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--dur-reveal) var(--ease-out),
              transform var(--dur-reveal) var(--ease-out);
}
html.js .reveal-scale { transform: scale(0.98); }
html.js .stagger > * { transition-delay: calc(min(var(--i, 0), 8) * 40ms); }
html.js .reveal.visible,
html.js .reveal-scale.visible,
html.js .stagger > .visible { opacity: 1; transform: none; }

/* The sheet is the page's one authored moment: stamps are laid down
   in issue order on first load. Visible by default without JS. */
html.js .sheet.is-dealing .stamp { opacity: 0; transform: translateY(10px) rotate(-1.5deg); }
html.js .sheet .stamp { transition-delay: calc(var(--i, 0) * 28ms); }
html.js .sheet.is-dealt .stamp { transition-delay: 0ms; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }
  html { scroll-behavior: auto; }
  html.js .reveal, html.js .reveal-scale, html.js .stagger > *,
  html.js .sheet.is-dealing .stamp { opacity: 1 !important; transform: none !important; }
  .stamp:hover, .stamp:focus-visible, .stamp.is-lifted { transform: none; }
  .ticker { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .ticker-track { width: auto; }
  .sticky-cta { transition: none; }
}

/* ----------------------------------------------------------------
   PRINT
   ---------------------------------------------------------------- */
@media print {
  .topbar, .sticky-cta, .nav-overlay, .cta-section .actions, .series-tabs { display: none !important; }
  body { background: #fff; color: #000; }
}

/* ----------------------------------------------------------------
   STRUCTURAL WRAPPERS
   ---------------------------------------------------------------- */
.hero-left { min-width: 0; }
.app-meta { min-width: 0; }
.actions--hero-cta { gap: var(--s-3); }

/* ----------------------------------------------------------------
   APP CARD — mini stamp + text (used on /apps/, /for/, guides)
   ---------------------------------------------------------------- */
.card-app--stamp {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: var(--s-3) var(--s-4);
  align-items: start;
  border-top: 4px solid var(--s, var(--ink));
}
.card-app__body { display: grid; gap: 4px; min-width: 0; }
.card-app--stamp .app-name { font-size: var(--text-xl); }
.card-app--stamp .app-tagline { font-size: var(--text-sm); color: var(--ink-2); }
.card-app--stamp .card-text { display: block; margin-top: 6px; }
.card-app--stamp .meta-row { margin-top: 10px; }
.mini-stamp { display: block; filter: drop-shadow(0 1px 1.2px rgba(21, 23, 29, 0.18)); transition: transform var(--dur-md) var(--ease-out); }
.mini-stamp__paper {
  display: block;
  padding: 6px;
  background: var(--paper-white);
  -webkit-mask: linear-gradient(#000 0 0) content-box, radial-gradient(circle 3px, #0000 96%, #000) -6px -6px / 12px 12px round;
          mask: linear-gradient(#000 0 0) content-box, radial-gradient(circle 3px, #0000 96%, #000) -6px -6px / 12px 12px round;
}
.mini-stamp__field { display: grid; place-items: center; aspect-ratio: 5 / 6; background: var(--t, var(--paper)); border: 2px solid var(--s, var(--ink)); }
.mini-stamp__field img { width: 66%; border-radius: 22.5%; box-shadow: 0 2px 5px -2px rgba(21, 23, 29, 0.4); }
.card-app:hover .mini-stamp { transform: rotate(-3deg) translateY(-2px); }
@media (max-width: 480px) { .card-app--stamp { grid-template-columns: 64px minmax(0, 1fr); gap: var(--s-2) var(--s-3); } }

/* A content-page hero followed by the page's first section: no double gap */
.hero + .section--lg, .hero + .section { padding-top: var(--s-5); }
.section--lg > .section:first-of-type { padding-top: 0; }

/* ==================================================================
   v4.1 — finish-review rebuild: the leaflet body, paired stamps,
   postmarked covers, ink links, one blue.
   ================================================================== */

/* ---------- Links: ink with an underline; blue only on hover/focus ---------- */
a { color: var(--ink); text-decoration-color: rgba(21, 23, 29, 0.35); }
a:hover, a:focus-visible { color: var(--blue); text-decoration-color: currentColor; }
.btn-primary { box-shadow: none; }

/* ---------- Pressed series tab (server-rendered "Whole sheet") ---------- */
.series-tab.is-pressed { background: var(--blue); border-color: var(--blue); color: #FFFFFF; }
.series-tab.is-pressed i { background: #FFFFFF !important; }

/* ---------- Postmark on the sheet: over the top-right frame corner ---------- */
.sheet .postmark { width: 118px; right: -36px; top: -20px; }
@media (max-width: 640px) { .sheet .postmark { width: 92px; right: -8px; top: -16px; } }

/* Devices may take two lines (Taskful Day runs on four) */
.stamp__plat {
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-wrap: balance;
}

/* ---------- Sheet bar: screen preview + wrapping tagline on phones ---------- */
.sheet-bar__shot {
  width: 40px;
  height: 64px;
  object-fit: cover;
  object-position: top;
  flex: none;
  border: 2px solid var(--ink);
  background: var(--ink);
}
.sheet-bar__shot[hidden] { display: none; }
@media (max-width: 640px) {
  .sheet-bar__tag { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .sheet-bar__shot { display: none; }
}

/* ---------- Homepage rhythm ---------- */
.section--notes { padding-bottom: var(--s-5); }
.section--notes + .section--lg { padding-top: var(--s-6); }

/* ---------- Perforation rule: the tear line between leaflet parts ---------- */
.perf-rule, .leaflet-body > .section + .section::before, .leaflet-body > .section--lg::before,
.leaflet-body > .section + .section--lg::before {
  content: '';
  display: block;
  height: 6px;
  margin: 0 0 var(--s-6);
  background-image: radial-gradient(circle 2.6px, var(--rule-2) 96%, transparent);
  background-size: 13px 6px;
  background-repeat: repeat-x;
}
.leaflet-body > .section { padding: var(--s-5) 0 var(--s-6); }
.leaflet-body > .section.colophon { padding-bottom: 0; }

/* Section heads on the leaflet: left-set, with the series colour as the rule */
.leaflet-body .section-center { text-align: left; }
.leaflet-body .section-center .lead { margin-left: 0; }
.leaflet-body .section h2.h2, .leaflet-body .section-head h2 {
  padding-bottom: 10px;
  border-bottom: 3px solid var(--s, var(--ink));
  display: inline-block;
}
.leaflet-body .shots-band h2.h2 { border-bottom: 0; padding-bottom: 0; }

/* ---------- Leaflet body: no boxed cards — printed text in columns ---------- */
.leaflet-body .card,
.leaflet-body .founder-card,
.leaflet-body .pricing-card {
  background: none;
  border: 0;
  border-top: 2px solid var(--ink);
  border-radius: 0;
  box-shadow: none;
  padding: var(--s-3) 0 0;
  max-width: none;
}
.leaflet-body a.card:hover { transform: none; box-shadow: none; }
.leaflet-body .card-app--stamp { border-top: 2px solid var(--ink); padding-top: var(--s-3); }
.leaflet-body .card-app--stamp:hover { background: none; }
.leaflet-body .card-app--stamp:hover .app-name { color: var(--blue); }

.leaflet-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--s-4) var(--s-5);
}
.leaflet-cols--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 720px) { .leaflet-cols--2 { grid-template-columns: 1fr; } }
.leaflet-col { border-top: 2px solid var(--ink); padding-top: var(--s-3); }
.leaflet-col .card-title { font-size: var(--text-lg); }
.leaflet-col .card-text { color: var(--ink-2); }
.leaflet-col ul.bullets { margin-top: var(--s-2); }

/* Features: plain printed list, two columns on wide screens */
.leaflet-body .features-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--s-5);
  border-top: 0;
}
.leaflet-body .feature-row { grid-template-columns: 1fr; border-bottom: 1px dashed var(--cut); padding: var(--s-3) 0; }
@media (max-width: 720px) { .leaflet-body .features-list { grid-template-columns: 1fr; } }

/* Insights: printed columns */
.leaflet-body .insight-card { background: none; border: 0; border-top: 2px solid var(--ink); padding: var(--s-3) 0 0; box-shadow: none; }

/* Colophon (founder or maker) */
.leaflet-body .founder-card__story { font-size: var(--text-base); color: var(--ink-2); max-width: 68ch; }
.leaflet-body .founder-card .btn { min-height: 44px; }
.colophon-dates { margin-top: var(--s-3); font-size: var(--text-sm); color: var(--ink-3); }

/* Comparison table in the leaflet */
.leaflet-body .compare-table { background: none; }

/* ---------- Quotes: a still row of printed quotes ---------- */
.testimonials-head { text-align: left; }
.testimonials-meta { display: block; margin: 0; color: var(--ink-3); font-size: var(--text-sm); }
.quotes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--s-4) var(--s-5);
  margin-top: var(--s-4);
}
.quote { margin: 0; border-top: 2px solid var(--s, var(--ink)); padding-top: var(--s-3); }
.quote__text {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-lg);
  line-height: 1.45;
  color: var(--ink);
}
.quote__translation { margin: var(--s-2) 0 0; font-size: var(--text-sm); color: var(--ink-2); }
.quote__translation span { font-weight: 600; }
.quote__meta { margin-top: var(--s-2); font-size: var(--text-xs); color: var(--ink-3); }
.quote__author { font-weight: 600; color: var(--ink-2); }
.testimonials-footnote { text-align: left; }

/* ---------- Pricing: a pane of denomination stamps ---------- */
.plans-grid {
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--s-4);
  border: 0;
  background: none;
}
.plan-card {
  border: 0;
  padding: 0;
  background: none;
}
.plan-stamp {
  display: grid;
  gap: 4px;
  padding: 18px 16px 16px;
  background: var(--t, var(--paper-white));
  border: 3px solid var(--s, var(--ink));
  outline: 8px solid var(--paper-white);
  margin: 8px 8px var(--s-3);
  position: relative;
  filter: drop-shadow(0 1px 1.5px rgba(21, 23, 29, 0.16));
}
.plan-stamp::before {
  content: '';
  position: absolute;
  inset: -14px;
  pointer-events: none;
  background:
    radial-gradient(circle 4px, var(--paper) 96%, transparent) top left / 16px 16px repeat-x,
    radial-gradient(circle 4px, var(--paper) 96%, transparent) bottom left / 16px 16px repeat-x,
    radial-gradient(circle 4px, var(--paper) 96%, transparent) top left / 16px 16px repeat-y,
    radial-gradient(circle 4px, var(--paper) 96%, transparent) top right / 16px 16px repeat-y;
}
.plan-stamp .plan-name { color: var(--s, var(--ink-2)); font-family: var(--font-display); font-weight: 600; }
.plan-stamp .plan-price { margin: 0; white-space: nowrap; font-size: clamp(1.5rem, 2.4vw, 2rem); }
.plan-card .plan-meta, .plan-card .plan-summary { padding: 0 4px; }
.plan-card .plan-features { padding: var(--s-2) 4px 0; }
@media (max-width: 720px) { .plan-card { border: 0; } }

/* ---------- Pairs: "Observa vs Bevel" list on app pages ---------- */
.pair-list { list-style: none; margin: var(--s-4) 0 0; padding: 0; border-top: 2px solid var(--ink); columns: 2; column-gap: var(--s-5); }
@media (max-width: 720px) { .pair-list { columns: 1; } }
.pair-list li { break-inside: avoid; }
.pair-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  padding: 12px 0;
  border-bottom: 1px dashed var(--cut);
  color: var(--ink);
  text-decoration: none;
}
.pair-row__names { font-family: var(--font-display); font-weight: 600; font-size: var(--text-base); }
.pair-row__vs { font-family: var(--font-sans); font-weight: 500; font-size: 0.85em; color: var(--ink-3); margin: 0 3px; }
.pair-row__go { font-size: var(--text-xs); color: var(--ink-3); white-space: nowrap; }
a.pair-row:hover .pair-row__names { color: var(--blue); }

/* ---------- Pairs: homepage comparisons as two stamps ---------- */
.pairs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--s-5); border-top: 2px solid var(--ink); margin-top: var(--s-4); }
@media (max-width: 760px) { .pairs { grid-template-columns: 1fr; } }
.pair {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--s-4);
  align-items: start;
  padding: var(--s-4) 0;
  border-bottom: 1px dashed var(--cut);
  color: var(--ink);
  text-decoration: none;
}
.pair__stamps { display: flex; align-items: center; gap: 6px; }
.pair__stamps .mini-stamp { width: 64px; }
.pair__vs { font-size: var(--text-xs); color: var(--ink-3); }
.blank-stamp {
  display: grid;
  place-items: center;
  width: 64px;
  aspect-ratio: 5 / 6;
  border: 1.5px dashed var(--rule-2);
  background: var(--paper);
  padding: 4px;
  text-align: center;
  font-size: 0.66rem;
  font-weight: 600;
  line-height: 1.15;
  color: var(--ink-3);
  overflow-wrap: anywhere;
}
.pair__title { display: block; font-family: var(--font-display); font-weight: 700; font-size: var(--text-xl); line-height: 1.2; margin-bottom: 4px; }
.pair__text .card-text { display: block; }
.pair__go { display: inline-block; margin-top: var(--s-2); font-size: var(--text-sm); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(21, 23, 29, 0.35); }
a.pair:hover .pair__title, a.pair:hover .pair__go, a.cover:hover .cover__title, a.cover:hover .pair__go { color: var(--blue); }
a.pair:hover .mini-stamp { transform: rotate(-3deg) translateY(-2px); }
@media (max-width: 480px) { .pair { grid-template-columns: 1fr; gap: var(--s-2); } }

/* ---------- Covers: journal entries, postmarked ---------- */
.covers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); margin-top: var(--s-4); }
@media (max-width: 760px) { .covers { grid-template-columns: 1fr; } }
.cover {
  position: relative;
  display: block;
  padding: var(--s-4) var(--s-4) var(--s-4);
  padding-right: 128px;
  background: var(--paper-white);
  border: 1px solid var(--rule);
  color: var(--ink);
  text-decoration: none;
  overflow: hidden;
  transition: transform var(--dur-md) var(--ease-out), box-shadow var(--dur-md) var(--ease-out);
}
.cover:hover { transform: translateY(-2px); box-shadow: var(--elev-3); }
.cover .postmark { width: 128px; right: -14px; top: 10px; transform: rotate(-8deg); }
.cover__date { display: block; font-size: var(--text-xs); color: var(--ink-3); margin-bottom: 6px; }
.cover__title { font-size: var(--text-xl); margin: 0 0 var(--s-2); }
@media (max-width: 480px) { .cover { padding-right: var(--s-4); padding-top: 72px; } .cover .postmark { width: 104px; right: auto; left: 8px; top: 2px; } }

/* ---------- Seams: the closing yellow band runs straight into the footer ---------- */
footer.footer, .footer { margin-top: 0; }
main.container { padding-bottom: var(--s-7); }
main.container:has(> .cta-section:last-child),
main.container:has(> article > .cta-section:last-child) { padding-bottom: 0; }
.cta-section { margin-bottom: 0; }
main.container:has(> .cta-section:last-child) + .footer,
main.container:has(> article > .cta-section:last-child) + .footer { border-top: 1px dashed var(--cut); }
.leaflet-body .lead, .leaflet-body .section-center p { text-align: left; margin-left: 0 !important; margin-right: 0 !important; }
.leaflet-body .method-list { margin-left: 0; }
.leaflet-body .faq { max-width: var(--container-narrow); }

/* ---------- v4.2 — finish-review fix batch ---------- */
/* 1. series-list icons: only a bare <img> row child gets the fixed box */
.series-row img { width: auto; height: auto; box-shadow: none; }
.series-row > img { width: 64px; height: 64px; border-radius: 22.5%; box-shadow: var(--elev-2); }
.series-row .mini-stamp { width: 64px; }
.series-row .mini-stamp__field img { width: 66%; height: auto; aspect-ratio: 1; }
@media (max-width: 640px) { .series-row .mini-stamp { width: 52px; } }

/* 3. closing band text centred */
.cta-section .lead, .leaflet-body .cta-section .lead { text-align: center !important; margin-left: auto !important; margin-right: auto !important; }

/* 4. journal links in ink like every other body link */
.card-journal-cta, .card-compared-cta { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(21, 23, 29, 0.35); }
a:hover .card-journal-cta, a:hover .card-compared-cta { color: var(--blue); }

/* 5. a real screen preview in the sheet bar, and the bar inside the fold */
.sheet-bar__shot { width: 54px; height: 112px; border-width: 2px; }
.sheet-bar__shot:not([hidden]) + .sheet-bar__icon { display: none; }
.sheet-bar { margin-top: 12px; padding-top: 10px; min-height: 0; }
.issue-sheet-wrap { padding-top: clamp(18px, 2.6vh, 28px); padding-bottom: 12px; }
.sheet { gap: clamp(8px, 0.8vw, 12px); }
.sheet-bar__note { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 6a. privacy: one top rule, air before the notes */
.leaflet-body .card .kv { border-top: 0; }
.leaflet-body .kv + .bullets { margin-top: var(--s-4); }

/* 6b. pricing: feature lists start on one line */
.plans-grid { grid-template-rows: auto auto; }
.plan-card { display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: 0; }
.plan-head { display: flex; flex-direction: column; }
.plan-card .plan-features { margin: 0; align-self: start; }
@media (min-width: 1181px) {
  .sheet .stamp__icon { max-width: 52px; margin: 4px 0 4px; }
  .sheet-bar__shot { width: 46px; height: 96px; }
}
@media (max-width: 640px) { .sheet-bar__shot:not([hidden]) + .sheet-bar__icon { display: block; } }

/* ===== Languages (TRANSLATION.md 4.9, 4.10) =====
   Nothing here changes an English page: the switcher, the footer language row and the marker only render once a
   second language is live, and the :lang() rules match other languages only. */
.en-marker { font-weight: 400; font-size: 0.85em; color: var(--ink-3); white-space: nowrap; }
.lang-switch { display: inline-flex; align-items: center; gap: 2px; margin-left: var(--s-2); padding-left: var(--s-2); border-left: 1px dashed var(--cut); }
.lang-switch .lang-switch__item { font-weight: 500; padding: 8px 8px; }
.lang-switch span.lang-switch__item { color: var(--ink); font-weight: 700; }
.footer-langs { max-width: var(--container); margin: 0 auto; padding: var(--s-3) var(--s-4) 0; display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); font-size: var(--text-sm); }
.footer-langs span[aria-current] { font-weight: 600; }
.privacy-reference { font-style: italic; }
/* Long compound words: let the browser hyphenate body text (needs the right <html lang>) */
:is(:lang(de), :lang(nl), :lang(pl), :lang(ru)) :is(p, li, dd, .card-text, .lead, .faq-a) { hyphens: auto; -webkit-hyphens: auto; }
/* CJK: no letter-spacing, no forced capitals, no italics; Korean keeps words whole; system fonts per language */
:is(:lang(ja), :lang(ko), :lang(zh)) * { letter-spacing: 0 !important; text-transform: none !important; font-style: normal !important; }
:lang(ko) body { word-break: keep-all; }
:is(:lang(ja), :lang(zh)) body { line-break: strict; }
:is(:lang(ja), :lang(ko), :lang(zh)) :is(p, li, .lead, .faq-a) { line-height: 1.75; }
:lang(ja) body { font-family: "Hiragino Sans", "Yu Gothic", "Noto Sans CJK JP", "Noto Sans JP", sans-serif; }
:lang(ko) body { font-family: "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans CJK KR", "Noto Sans KR", sans-serif; }
:lang(zh) body { font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", "Noto Sans SC", sans-serif; }
@media (max-width: 720px) {
  .lang-switch { display: flex; flex-wrap: wrap; margin: var(--s-3) 0 0; padding: var(--s-2) 0 0; border-left: 0; border-top: 1px dashed var(--cut); }
  .nav .lang-switch a.lang-switch__item { font-family: var(--font-body); font-size: var(--text-sm); border-bottom: 0; padding: 8px 8px; }
}