/* ===== 00-tokens.css ===== */
/* ==========================================================================
   Ownbit v3 — "quiet vault" design system
   --------------------------------------------------------------------------
   Casa-inspired: white pages, warm stone cards, editorial serif headlines,
   pill controls, framed photographic bands and engraved illustrations —
   carried in Ownbit's own blue (#0D80FE, the app and logo colour).

   Built by tools/build_v3css.py from assets/css/v3/*.css. Never edit
   assets/css/v3.css by hand.

   Token names from v2 (--ink, --paper, --accent, --bg, --fg …) are kept and
   re-pointed so every page-type part keeps working; new code should prefer
   the v3 names (--blue-*, --stone-*, --night-*, --surface …).
   ========================================================================== */

:root {
  /* brand blue — Ownbit app / logo */
  --blue: #0d80fe;
  --blue-600: #0b6fe0;
  --blue-700: #095bc0;
  --blue-800: #0a4793;
  --blue-50: #f1f7ff;
  --blue-100: #e2eeff;
  --blue-200: #c4ddff;
  --blue-300: #96c4ff;
  --blue-glow: rgba(13, 128, 254, 0.32);

  /* neutrals — warm stone + cool ink */
  --white: #ffffff;
  --stone: #f5f4f0;
  --stone-2: #edebe5;
  --stone-3: #e3e0d8;
  --ink: #0e1116;
  --ink-2: #1b2029;
  --ink-3: #2b313b;
  --slate: #586172;
  --slate-2: #8a93a2;
  --slate-3: #b9bfc9;
  --night: #0a0e15;
  --night-2: #121825;
  --night-3: #1b2333;
  --hair: rgba(14, 17, 22, 0.09);
  --hair-2: rgba(14, 17, 22, 0.16);
  --hair-light: rgba(255, 255, 255, 0.14);
  --hair-light-2: rgba(255, 255, 255, 0.26);

  /* status */
  --green: #12995a;
  --green-50: #e8f6ee;
  --amber: #b97a12;
  --amber-50: #fbf2df;
  --red: #cf423b;
  --teal: #1b8e85;

  /* v2 compatibility names (re-pointed) */
  --ink-line: var(--hair-light);
  --ink-line-strong: var(--hair-light-2);
  --paper: var(--stone);
  --paper-2: var(--stone-2);
  --paper-3: var(--stone-3);
  --paper-line: var(--hair);
  --paper-line-strong: var(--hair-2);
  --accent: var(--blue);
  --accent-deep: var(--blue-700);
  --accent-soft: var(--blue-200);
  --accent-glow: var(--blue-glow);
  --t-dark: #f3f5f9;
  --m-dark: #a3abb9;
  --t-light: var(--ink);
  --m-light: var(--slate);

  /* theme slots — overridden by .t-paper / .t-beige / .t-ink */
  --bg: var(--white);
  --bg-2: var(--stone);
  --bg-3: var(--stone-2);
  --fg: var(--ink);
  --muted: var(--slate);
  --line: var(--hair);
  --line-strong: var(--hair-2);
  --accent-ink: var(--blue-700);
  --focus: var(--blue);
  --surface: var(--stone);       /* card on this background */
  --surface-2: var(--white);     /* card inside a card */
  --surface-hover: var(--stone-2);

  /* type */
  --font-serif: "Newsreader", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --font-display: var(--font-serif);
  --font-body: var(--font-sans);
  --h3-lg: 1.5rem;
  --h3-sm: 1.2rem;
  --serif-weight: 400;
  --serif-tracking: -0.022em;

  /* fluid scale */
  --fs-hero: clamp(2.6rem, 1.4rem + 3.9vw, 4.9rem);
  --fs-h1: clamp(2.4rem, 1.5rem + 3.4vw, 4.4rem);
  --fs-h2: clamp(2rem, 1.35rem + 2.3vw, 3.25rem);
  --fs-h2-sm: clamp(1.7rem, 1.3rem + 1.4vw, 2.4rem);
  --fs-h3-serif: clamp(1.45rem, 1.2rem + 0.8vw, 1.95rem);
  --fs-lede: clamp(1.06rem, 1rem + 0.3vw, 1.25rem);

  /* micro-label scale (v2 contract: translated labels use tokens; 70-i18n re-points them) */
  --ms-1: 0.64rem;
  --ms-2: 0.66rem;
  --ms-3: 0.68rem;
  --ms-4: 0.70rem;
  --ms-5: 0.72rem;
  --ms-6: 0.74rem;
  --ms-7: 0.76rem;
  --ms-8: 0.78rem;

  /* layout */
  --container: min(1200px, calc(100% - 48px));
  --container-narrow: min(860px, calc(100% - 48px));
  --frame-gap: clamp(8px, 1.4vw, 20px);  /* inset of framed panels from the viewport edge */
  --sec-pad: clamp(72px, 8.5vw, 128px);
  --rail: 0px;
  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --pill: 999px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --header-h: 84px;

  /* elevation */
  --shadow-xs: 0 1px 2px rgba(14, 17, 22, 0.05);
  --shadow-sm: 0 1px 2px rgba(14, 17, 22, 0.04), 0 4px 14px rgba(14, 17, 22, 0.05);
  --shadow: 0 2px 6px rgba(14, 17, 22, 0.04), 0 14px 36px rgba(14, 17, 22, 0.08);
  --shadow-lg: 0 6px 18px rgba(14, 17, 22, 0.06), 0 30px 70px rgba(14, 17, 22, 0.14);
  --shadow-blue: 0 8px 22px rgba(13, 128, 254, 0.28);
}

/* themes ----------------------------------------------------------------- */
.t-paper {
  --bg: var(--white); --bg-2: var(--stone); --bg-3: var(--stone-2);
  --fg: var(--ink); --muted: var(--slate); --line: var(--hair); --line-strong: var(--hair-2);
  --accent-ink: var(--blue-700); --focus: var(--blue);
  --surface: var(--stone); --surface-2: var(--white); --surface-hover: var(--stone-2);
  color-scheme: light;
}
.t-beige {
  --bg: var(--stone); --bg-2: var(--white); --bg-3: var(--stone-2);
  --fg: var(--ink); --muted: var(--slate); --line: var(--hair); --line-strong: var(--hair-2);
  --accent-ink: var(--blue-700); --focus: var(--blue);
  --surface: var(--white); --surface-2: var(--stone); --surface-hover: #fbfaf8;
  color-scheme: light;
}
.t-ink {
  --bg: var(--night); --bg-2: var(--night-2); --bg-3: var(--night-3);
  --fg: var(--t-dark); --muted: var(--m-dark); --line: var(--hair-light); --line-strong: var(--hair-light-2);
  --accent-ink: var(--blue-300); --focus: var(--blue-300);
  --surface: rgba(255, 255, 255, 0.06); --surface-2: rgba(255, 255, 255, 0.08); --surface-hover: rgba(255, 255, 255, 0.1);
  color-scheme: dark;
}

/* ===== 01-base.css ===== */
/* base ------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  padding-top: var(--header-h);
  font-family: var(--font-sans);
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "cv11", "ss01";
}
/* pages whose first block is a framed hero let the header float over it */
body:has(main > .hero-frame:first-child),
body:has(main > .v3-hero:first-child) { padding-top: 0; }

img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, select, input, textarea { font: inherit; color: inherit; }
p { margin: 0; }
strong, b { font-weight: 600; }
em { font-style: italic; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--blue-200); color: var(--ink); }
[id] { scroll-margin-top: calc(var(--header-h) + 16px); }

h1, h2, h3, h4 {
  margin: 0;
  color: inherit;
}
h1, h2 {
  font-family: var(--font-serif);
  font-weight: var(--serif-weight);
  letter-spacing: var(--serif-tracking);
  line-height: 1.04;
  font-optical-sizing: auto;
  text-wrap: balance;
}
h3, h4 {
  font-family: var(--font-sans);
  font-weight: 600;
  letter-spacing: -0.012em;
  line-height: 1.25;
}

/* emphasis inside headlines is colour, not slant */
h1 em, h2 em, .v3-display em {
  font-style: normal;
  color: var(--accent-ink);
}

.container, .container-wide { width: var(--container); margin: 0 auto; position: relative; }
.container-narrow { width: var(--container-narrow); margin: 0 auto; position: relative; }
main { overflow: clip; }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.nowrap { white-space: nowrap; }

/* v2 numbered rails are retired in v3 */
.rail, .rail-num { display: none !important; }

/* sections --------------------------------------------------------------- */
.section {
  position: relative;
  padding: var(--sec-pad) 0;
  background: var(--bg);
  color: var(--fg);
}
.section-grid { display: block; }
.section-grid > *, .hero-grid > * { min-width: 0; }

/* light bands sit flush; stone + dark bands are inset, rounded "frames" */
.section.t-beige,
.section.t-ink,
.page-hero.t-ink,
.page-hero.t-beige {
  margin-inline: var(--frame-gap);
  border-radius: var(--radius-xl);
}
.section.t-beige + .section.t-beige,
.section.t-ink + .section.t-ink,
.section.t-beige + .section.t-ink,
.section.t-ink + .section.t-beige { margin-top: var(--frame-gap); }
.section.t-paper + .section.t-paper { padding-top: calc(var(--sec-pad) * 0.5); }
main > .section:last-child.t-ink,
main > .section:last-child.t-beige { margin-bottom: var(--frame-gap); }

/* micro labels ------------------------------------------------------------ */
.kicker, .eyebrow, .v3-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--ms-6);
  line-height: 1.3;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-ink);
}
.kicker::before, .eyebrow::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--blue);
  flex: none;
}

/* section heading --------------------------------------------------------- */
.section-heading {
  max-width: 780px;
  margin-bottom: clamp(36px, 4.5vw, 64px);
  display: grid;
  gap: 18px;
  justify-items: start;
}
.section-heading h2,
.split-copy h2 {
  font-size: var(--fs-h2);
}
.section-heading p, .split-copy > p {
  font-size: var(--fs-lede);
  line-height: 1.6;
  color: var(--muted);
  max-width: 680px;
}
.section-heading.center, .v3-center { text-align: center; justify-items: center; margin-inline: auto; }
.section-heading.center p { margin-inline: auto; }

/* inline links in running copy */
.section-heading p a, .split-copy > p a, .page-copy p a {
  color: var(--accent-ink);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--accent-ink) 35%, transparent);
  text-underline-offset: 3px;
}
.section-heading p a:hover, .split-copy > p a:hover, .page-copy p a:hover { text-decoration-color: currentColor; }

/* reveal on scroll (progressive; no JS dependency for layout) ----------- */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .v3-reveal {
      animation: v3-rise linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 32%;
    }
  }
}
@keyframes v3-rise {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: none; }
}

@media (max-width: 720px) {
  :root { --container: calc(100% - 32px); --container-narrow: calc(100% - 32px); --header-h: 72px; }
  body { font-size: 16px; }
  .section.t-beige, .section.t-ink, .page-hero.t-ink, .page-hero.t-beige { border-radius: var(--radius-lg); }
}

/* ===== 02-header.css ===== */
/* header — three floating pills (brand · nav · actions) -------------------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  padding: 16px 0 0;
  pointer-events: none;            /* only the pills catch clicks */
  --pill-bg: rgba(255, 255, 255, 0.84);
  --pill-line: var(--hair);
  --pill-fg: var(--ink);
  --pill-muted: var(--slate);
  --pill-hover: rgba(14, 17, 22, 0.06);
  --pill-shadow: 0 1px 2px rgba(14, 17, 22, 0.04);
  transition: padding 0.3s var(--ease);
}
.site-header.is-scrolled { padding-top: 10px; --pill-bg: rgba(255, 255, 255, 0.9); --pill-shadow: 0 2px 8px rgba(14, 17, 22, 0.06), 0 10px 28px rgba(14, 17, 22, 0.08); }
.site-header.on-dark {
  --pill-bg: rgba(255, 255, 255, 0.12);
  --pill-line: rgba(255, 255, 255, 0.22);
  --pill-fg: #fff;
  --pill-muted: rgba(255, 255, 255, 0.72);
  --pill-hover: rgba(255, 255, 255, 0.14);
  --pill-shadow: none;
}

.nav-shell {
  width: min(1320px, calc(100% - 2 * var(--frame-gap) - 24px));
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.nav-shell > * { pointer-events: auto; }

.brand,
.site-nav,
.lang-pill,
.menu-toggle {
  background: var(--pill-bg);
  border: 1px solid var(--pill-line);
  box-shadow: var(--pill-shadow);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease), color 0.3s var(--ease);
}

.brand {
  display: inline-flex;
  align-items: center;
  height: 48px;
  padding: 0 18px;
  border-radius: var(--pill);
  flex: none;
}
.brand img { height: 22px; width: auto; }
.brand .brand-logo--light, .brand img.brand-mark { display: none; }
.site-header.on-dark .brand .brand-logo--dark { display: none; }
.site-header.on-dark .brand .brand-logo--light { display: block; }

.site-nav {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 4px;
  border-radius: var(--pill);
}
.site-nav a {
  display: inline-flex;
  align-items: center;
  height: 38px;
  padding: 0 14px;
  border-radius: var(--pill);
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--pill-fg);
  white-space: nowrap;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}
.site-nav a:hover, .site-nav a:focus-visible { background: var(--pill-hover); }
.site-nav a[aria-current="page"] { background: var(--pill-hover); }
.site-nav .nav-drawer-extra { display: none; }

.nav-actions { display: flex; align-items: center; gap: 8px; flex: none; }

.lang-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 48px;
  border-radius: var(--pill);
  color: var(--pill-fg);
}
.lang-pill svg {
  position: absolute; left: 15px; top: 50%; transform: translateY(-50%);
  width: 17px; height: 17px; pointer-events: none; opacity: 0.8;
}
.lang-pill::after {
  content: ""; position: absolute; right: 16px; top: 50%; width: 7px; height: 7px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: translateY(-70%) rotate(45deg); opacity: 0.6; pointer-events: none;
}
.language-select {
  appearance: none; -webkit-appearance: none;
  height: 100%;
  padding: 0 38px 0 40px;
  border: 0; border-radius: var(--pill);
  background: transparent;
  font-size: 0.88rem; font-weight: 500;
  color: inherit;
  cursor: pointer;
}
.language-select:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.language-select option { color: var(--ink); background: #fff; }

.nav-actions .btn-header { --btn-h: 48px; padding: 0 22px; }

.menu-toggle {
  display: none;
  width: 48px; height: 48px;
  border-radius: 50%;
  align-items: center; justify-content: center;
  cursor: pointer;
  color: var(--pill-fg);
  padding: 0;
}
.menu-toggle span, .menu-toggle span::before, .menu-toggle span::after {
  display: block; width: 18px; height: 1.6px; border-radius: 2px;
  background: currentColor; position: relative;
  transition: transform 0.3s var(--ease), background-color 0.2s;
}
.menu-toggle span::before, .menu-toggle span::after { content: ""; position: absolute; left: 0; }
.menu-toggle span::before { top: -6px; }
.menu-toggle span::after { top: 6px; }
body.nav-open .menu-toggle span { background: transparent; }
body.nav-open .menu-toggle span::before { transform: translateY(6px) rotate(45deg); }
body.nav-open .menu-toggle span::after { transform: translateY(-6px) rotate(-45deg); }

/* tighter nav for long translations */
@media (max-width: 1280px) {
  .site-nav a { padding: 0 11px; font-size: 0.86rem; }
}

/* drawer ------------------------------------------------------------------ */
@media (max-width: 1120px) {
  .menu-toggle { display: inline-flex; }
  .site-nav {
    position: fixed;
    inset: 0;
    z-index: -1;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: calc(var(--header-h) + 24px) 24px 32px;
    border: 0; border-radius: 0;
    background: #fff;
    -webkit-backdrop-filter: none; backdrop-filter: none;
    box-shadow: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-12px);
    transition: opacity 0.28s var(--ease), transform 0.28s var(--ease), visibility 0s 0.28s;
    overflow-y: auto;
  }
  body.nav-open .site-nav {
    opacity: 1; visibility: visible; transform: none;
    transition: opacity 0.28s var(--ease), transform 0.28s var(--ease), visibility 0s;
  }
  body.nav-open { overflow: hidden; }
  body.nav-open .site-header { --pill-bg: #fff; --pill-line: var(--hair); --pill-fg: var(--ink); --pill-hover: rgba(14,17,22,.06); }
  body.nav-open .site-header .brand .brand-logo--dark { display: block; }
  body.nav-open .site-header .brand .brand-logo--light { display: none; }
  .site-nav a {
    height: auto;
    padding: 16px 4px;
    border-radius: 0;
    border-bottom: 1px solid var(--hair);
    font-family: var(--font-serif);
    font-size: 1.7rem;
    font-weight: 400;
    letter-spacing: -0.02em;
    color: var(--ink);
  }
  .site-nav a:hover, .site-nav a:focus-visible, .site-nav a[aria-current="page"] { background: none; color: var(--blue-700); }
  .site-nav .nav-drawer-extra .lang-pill { display: flex; }
  .site-nav .nav-drawer-extra .language-select { width: 100%; }
  .site-nav .nav-drawer-extra {
    display: grid;
    gap: 12px;
    margin-top: 28px;
  }
  .site-nav .nav-drawer-extra .btn { width: 100%; height: 54px; font-family: var(--font-sans); font-size: 1rem; border-bottom: 0; padding: 0 22px; border-radius: var(--pill); color: #fff; justify-content: center; }
}
@media (max-width: 720px) {
  .site-header { padding-top: 10px; }
  .nav-shell { width: calc(100% - 20px); }
  .brand, .lang-pill, .menu-toggle { height: 44px; }
  .nav-actions .btn-header { --btn-h: 44px; }
  .menu-toggle { width: 44px; }
  .brand { padding: 0 15px; }
  .brand img { height: 20px; }
  .nav-actions .lang-pill { display: none; }
  .nav-actions .btn-header { padding: 0 16px; font-size: 0.9rem; }
  .nav-actions .btn-header::after { display: none; }
}
@media (max-width: 380px) {
  .nav-actions .btn-header { display: none; }
}

/* first paint: no transition while the header picks its state */
.site-header.no-anim, .site-header.no-anim * { transition: none !important; }
/* the blue ring is too faint on the dark glass pills */
.site-header.on-dark :focus-visible, .on-photo :focus-visible { outline-color: #fff; }
/* language names in a system face: keeps extra Inter subsets off every page */
.language-select { font-family: system-ui, -apple-system, "Segoe UI", sans-serif; }

/* skip link */
.skip-link {
  position: fixed; left: 16px; top: 12px; z-index: 200;
  padding: 10px 16px; border-radius: var(--pill);
  background: var(--ink); color: #fff; font-weight: 600; font-size: 0.9rem;
  transform: translateY(-160%); transition: transform 0.2s var(--ease);
}
.skip-link:focus-visible { transform: none; outline-offset: 2px; }

/* ===== 03-components.css ===== */
/* buttons ------------------------------------------------------------------ */
.btn {
  --btn-h: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: var(--btn-h);
  padding: 0 26px;
  border: 1px solid transparent;
  border-radius: var(--pill);
  font-family: var(--font-sans);
  font-size: 0.97rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease), box-shadow 0.25s var(--ease), transform 0.25s var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn svg { width: 18px; height: 18px; flex: none; }

.btn-primary {
  background: var(--blue-600);   /* #0b6fe0: white text passes AA (4.8:1); #0d80fe stays the accent */
  color: #fff;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.18) inset, 0 6px 18px rgba(13, 128, 254, 0.22);
}
.btn-primary:hover, .btn-primary:focus-visible { background: var(--blue-700); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.18) inset, var(--shadow-blue); }

/* arrow glyph, drawn with a mask so it follows currentColor */
.btn-primary::after,
.btn-secondary::after,
.link-arrow::after,
.link-chip::after,
.split-h2-link::after,
.contact-card::after,
.v3-arrow::after {
  content: "";
  width: 15px; height: 15px; flex: none;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8h9.2M8.6 4.2 12.4 8l-3.8 3.8' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8h9.2M8.6 4.2 12.4 8l-3.8 3.8' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform 0.25s var(--ease);
}
.btn-primary:hover::after, .btn-secondary:hover::after, .link-arrow:hover::after, .link-chip:hover::after,
.split-h2-link:hover::after, .contact-card:hover::after, .v3-arrow:hover::after { transform: translateX(3px); }
.btn-header::after, .btn.no-arrow::after { display: none; }

.btn-secondary, .btn-console {
  background: rgba(14, 17, 22, 0.06);
  color: var(--ink);
}
.btn-secondary:hover, .btn-secondary:focus-visible, .btn-console:hover, .btn-console:focus-visible { background: rgba(14, 17, 22, 0.1); }
.btn-console { gap: 9px; }

.t-ink .btn-secondary, .t-ink .btn-console, .on-photo .btn-secondary, .on-photo .btn-console {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.2);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.t-ink .btn-secondary:hover, .t-ink .btn-console:hover, .on-photo .btn-secondary:hover, .on-photo .btn-console:hover { background: rgba(255, 255, 255, 0.2); }

.btn-white { background: #fff; color: var(--ink); }
.btn-white:hover { background: var(--stone); }

/* text links ---------------------------------------------------------------- */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--accent-ink);
}
.link-arrow:hover { color: var(--blue); }

.link-row { display: flex; flex-wrap: wrap; gap: 10px; }
.link-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 9px 18px;
  line-height: 1.3;
  border-radius: var(--pill);
  background: var(--surface);
  border: 1px solid var(--line);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--fg);
  transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.link-chip:hover { background: var(--surface-hover); border-color: var(--line-strong); }
.link-chip[rel~="noopener"]::after { transform: rotate(-45deg); }

.split-h2-link { display: inline; }
.split-h2-link::after { display: inline-block; width: 0.5em; height: 0.5em; margin-left: 0.25em; vertical-align: 0.12em; opacity: 0.45; }
.split-h2-link:hover::after { opacity: 1; }

/* tags & chips -------------------------------------------------------------- */
.tag, .page-tag, .v3-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 30px;
  padding: 0 13px;
  border-radius: var(--pill);
  background: var(--surface);
  border: 1px solid var(--line);
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--fg);
  white-space: nowrap;
}
.v3-chip.is-blue { background: var(--blue-50); border-color: var(--blue-100); color: var(--blue-700); }
.v3-chip.is-green { background: var(--green-50); border-color: transparent; color: #0e7a4a; }
.v3-chip.is-amber { background: var(--amber-50); border-color: transparent; color: #8a5a0c; }
.v3-chip.is-grey { background: rgba(14, 17, 22, 0.07); border-color: transparent; color: var(--ink-3); }
/* network status: green = online (watch wallet), grey = offline (cold wallet) */
.net-dot { display: inline-block; flex: none; width: 7px; height: 7px; border-radius: 50%; background: #8a929f; font-style: normal; }
.net-dot.is-on { background: #19a35b; box-shadow: 0 0 0 3px rgba(25, 163, 91, 0.16); }
.t-ink .v3-chip.is-blue { background: rgba(13, 128, 254, 0.18); border-color: rgba(150, 196, 255, 0.24); color: var(--blue-300); }

/* glass ---------------------------------------------------------------------- */
.v3-glass {
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.7);
  -webkit-backdrop-filter: blur(22px) saturate(170%);
          backdrop-filter: blur(22px) saturate(170%);
  box-shadow: 0 10px 40px rgba(6, 18, 40, 0.22);
  border-radius: var(--radius-lg);
  color: var(--ink);
}
.v3-glass-dark {
  background: rgba(14, 22, 36, 0.36);
  border: 1px solid rgba(255, 255, 255, 0.16);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
          backdrop-filter: blur(20px) saturate(140%);
  border-radius: var(--radius-lg);
  color: #fff;
}

/* generic cards ---------------------------------------------------------------- */
.feature-card, .pil-card, .contact-card, .plan-card, .coin-card, .download-card,
.info-card, .workflow-card, .stat-card, .page-summary, .v3-card {
  position: relative;
  background: var(--surface);
  border: 1px solid transparent;
  border-radius: var(--radius-lg);
  color: var(--fg);
  transition: background-color 0.25s var(--ease), border-color 0.25s var(--ease), box-shadow 0.3s var(--ease), transform 0.3s var(--ease);
}
.t-paper .feature-card, .t-paper .info-card, .t-paper .workflow-card, .t-paper .contact-card,
.t-paper .page-summary, .t-paper .download-card, .t-paper .coin-card { border-color: transparent; }

.info-grid, .workflow-grid { display: grid; gap: 14px; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 32px; }
.info-card, .workflow-card { padding: 22px 22px 24px; border-radius: var(--radius); }
.info-card strong, .workflow-card strong { display: block; font-size: 1rem; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 8px; color: var(--fg); }
.info-card p, .workflow-card p { font-size: 0.92rem; line-height: 1.55; color: var(--muted); }

.card-icon {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 12px;
  background: var(--blue-50);
  color: var(--blue-700);
}
.card-icon svg { width: 22px; height: 22px; }
.t-ink .card-icon { background: rgba(13, 128, 254, 0.16); color: var(--blue-300); }
/* v2 icons were drawn with hard-coded orange strokes; recolour them */
.card-icon svg [stroke="#0d80fe"], .card-icon svg [stroke="#0d80fe"] { stroke: currentColor; }
.card-icon svg [fill="#0d80fe"], .card-icon svg [fill="#0d80fe"] { fill: currentColor; }

/* split sections (feature pages, coin pages) ------------------------------- */
.split-section {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(36px, 5vw, 80px);
  align-items: center;
}
.split-section.reverse .split-visual { order: 2; }
.split-visual {
  position: relative;
  border-radius: var(--radius-xl);
  background: var(--surface);
  overflow: hidden;
  padding: clamp(18px, 2.4vw, 36px);
}
.split-visual img { width: 100%; height: auto; border-radius: var(--radius); }
.split-copy { display: grid; gap: 18px; align-content: start; justify-items: start; }

/* FAQ ------------------------------------------------------------------------------ */
.coin-faq-list, .inherit-ms-faq, .blog-faq, .doc-faq .container { display: grid; gap: 10px; }
.coin-faq-item, .inherit-ms-faq details, .blog-faq details, .doc-faq-item {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 0;
  border: 0;
  overflow: hidden;
}
.coin-faq-item summary, .inherit-ms-faq summary, .blog-faq summary, .doc-faq-item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 24px;
  font-weight: 600;
  font-size: 1.02rem;
  letter-spacing: -0.01em;
  color: var(--fg);
}
.coin-faq-item summary::-webkit-details-marker, .inherit-ms-faq summary::-webkit-details-marker,
.blog-faq summary::-webkit-details-marker, .doc-faq-item summary::-webkit-details-marker { display: none; }
.coin-faq-item summary::after, .inherit-ms-faq summary::after, .blog-faq summary::after, .doc-faq-item summary::after {
  content: "";
  flex: none;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--surface-2) center / 12px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 1.5v9M1.5 6h9' stroke='%230e1116' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  transition: transform 0.3s var(--ease);
}
.coin-faq-item[open] summary::after, .inherit-ms-faq details[open] summary::after,
.blog-faq details[open] summary::after, .doc-faq-item[open] summary::after { transform: rotate(45deg); }
.coin-faq-chev, .doc-faq-chev { display: none; }
.coin-faq-a, .inherit-ms-faq details > p, .blog-faq details > p, .doc-faq-a {
  padding: 0 24px 22px;
  color: var(--muted);
  line-height: 1.65;
}
.coin-faq-a p + p, .doc-faq-a p + p { margin-top: 10px; }
.coin-faq-a a, .inherit-ms-faq details a, .blog-faq details a, .doc-faq-a a { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px; }

/* page CTA band ------------------------------------------------------------------ */
.page-cta {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 28px 48px;
  align-items: end;
  padding: clamp(32px, 4.5vw, 64px);
  border-radius: var(--radius-xl);
  background: var(--surface);
  overflow: hidden;
}
.page-cta .section-heading { margin: 0; max-width: 680px; }
.page-cta .section-heading h2 { font-size: var(--fs-h2-sm); }
.cta-actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* tables ------------------------------------------------------------------------------ */
.table-shell {
  overflow-x: auto;
  border-radius: var(--radius-lg);
  background: var(--surface);
  -webkit-overflow-scrolling: touch;
}

/* QR download modal ---------------------------------------------------------------- */
.qr-modal { position: fixed; inset: 0; z-index: 120; display: none; align-items: center; justify-content: center; padding: 20px; }
.qr-modal.is-open { display: flex; }
.qr-modal-backdrop { position: absolute; inset: 0; background: rgba(10, 14, 21, 0.5); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.qr-modal-card {
  position: relative;
  width: min(380px, 100%);
  padding: 32px 28px 28px;
  border-radius: var(--radius-xl);
  background: #fff;
  color: var(--ink);
  text-align: center;
  box-shadow: var(--shadow-lg);
}
.qr-modal-close {
  position: absolute; top: 14px; right: 14px;
  width: 36px; height: 36px; border-radius: 50%;
  border: 0; background: var(--stone); cursor: pointer; font-size: 1.3rem; line-height: 1;
}
.qr-modal-close:hover { background: var(--stone-2); }
.qr-modal-title { font-family: var(--font-serif); font-weight: 400; font-size: 1.7rem; letter-spacing: -0.02em; margin-bottom: 6px; }
.qr-modal-desc { color: var(--slate); font-size: 0.92rem; margin-bottom: 18px; }
.qr-modal-image-wrap { padding: 16px; background: var(--stone); border-radius: var(--radius-lg); display: inline-block; }
.qr-modal-image { width: 220px; height: 220px; }
.qr-modal-url { margin-top: 14px; font-family: var(--font-mono); font-size: 0.76rem; color: var(--slate); word-break: break-all; }
body.qr-modal-open { overflow: hidden; }

@media (max-width: 960px) {
  .split-section { grid-template-columns: 1fr; }
  .split-section.reverse .split-visual { order: 0; }
  .info-grid, .workflow-grid { grid-template-columns: 1fr; }
  .page-cta { grid-template-columns: 1fr; align-items: start; }
}

/* ===== 04-footer.css ===== */
/* footer ------------------------------------------------------------------------ */
.site-footer {
  position: relative;
  background: var(--white);
  color: var(--ink);
  padding: clamp(64px, 7vw, 104px) 0 40px;
  border-top: 1px solid var(--hair);
}
main > .section:last-child.t-ink + .site-footer,
main > .section:last-child.t-beige + .site-footer,
main:has(> .section:last-child.t-ink) + .site-footer,
main:has(> .section:last-child.t-beige) + .site-footer { border-top: 0; }

.footer-top {
  display: grid;
  grid-template-columns: minmax(280px, 380px) minmax(0, 1fr);
  gap: clamp(40px, 7vw, 120px);
  align-items: start;
}

/* newsletter */
.footer-news { display: grid; gap: 14px; }
.footer-news-title {
  font-family: var(--font-sans);
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: -0.015em;
}
.footer-news-desc { font-size: 0.92rem; color: var(--slate); line-height: 1.55; }
.newsletter-form { display: grid; gap: 12px; margin-top: 6px; }
.newsletter-field {
  position: relative;
  display: flex;
  align-items: center;
  height: 60px;
  border: 1px solid var(--hair-2);
  border-radius: var(--radius);
  background: #fff;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.newsletter-field:focus-within { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(13, 128, 254, 0.12); }
.newsletter-field input {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0 8px 0 22px;
  border: 0;
  background: transparent;
  font-size: 1rem;
  color: var(--ink);
  outline: none;
}
.newsletter-field input::placeholder { color: var(--slate-2); }
.newsletter-field button {
  flex: none;
  width: 52px; height: 52px;
  margin-right: 4px;
  border: 0; border-radius: 12px;
  background: transparent;
  color: var(--blue);
  display: grid; place-items: center;
  cursor: pointer;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}
.newsletter-field button:hover, .newsletter-field button:focus-visible { background: var(--blue-50); }
.newsletter-field button svg { width: 22px; height: 22px; }
.newsletter-form.is-busy .newsletter-field button { pointer-events: none; opacity: 0.5; }
.newsletter-form.is-busy .newsletter-field button svg { animation: v3-nudge 0.9s ease-in-out infinite; }
@keyframes v3-nudge { 50% { transform: translateX(4px); } }
.newsletter-status { min-height: 0; font-size: 0.9rem; line-height: 1.45; }
.newsletter-status:empty { display: none; }
.newsletter-status.is-ok { color: #167a72; }
.newsletter-status.is-error { color: var(--red); }
.newsletter-consent { font-size: 0.8rem; line-height: 1.55; color: var(--slate); }
.newsletter-consent a {
  color: var(--blue-700);
  text-decoration: underline;
  text-decoration-color: var(--blue-200);
  text-underline-offset: 4px;
}
.newsletter-consent a:hover { text-decoration-color: currentColor; }

.footer-apps-title { margin-top: 22px; font-size: 1.05rem; font-weight: 600; letter-spacing: -0.012em; }
.footer-apps { display: flex; flex-wrap: wrap; gap: 8px; }
.store-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 46px;
  padding: 0 16px 0 13px;
  border-radius: 12px;
  background: var(--ink);
  color: #fff;
  line-height: 1.05;
  transition: background-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.store-badge:hover { background: var(--ink-3); }
/* the APK is the side door: outlined, not filled */
.store-badge.is-apk { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--hair-2); }
.store-badge.is-apk:hover { background: rgba(14, 17, 22, 0.05); }
.store-badge.is-apk svg { color: #2fb36d; }
.store-badge svg { width: 21px; height: 21px; flex: none; }
.store-badge small { display: block; font-size: 0.6rem; letter-spacing: 0.02em; opacity: 0.78; }
.store-badge b { display: block; font-size: 0.93rem; font-weight: 600; letter-spacing: -0.01em; }

/* link columns */
.footer-nav-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px 32px;
}
.footer-col-title {
  font-family: var(--font-sans);
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  padding-bottom: 14px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--hair);
  text-transform: none;
}
.footer-col-links { display: grid; gap: 11px; }
.footer-col-links a {
  font-size: 0.93rem;
  color: var(--ink-3);
  width: fit-content;
  transition: color 0.2s var(--ease);
}
.footer-col-links a:hover { color: var(--blue-700); }

/* brand row */
.footer-brand-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: clamp(48px, 6vw, 80px);
  padding-bottom: 22px;
  border-bottom: 1px solid var(--hair-2);
}
.footer-mark { display: inline-flex; color: var(--blue); transition: transform 0.25s var(--ease-out); }
.footer-mark:hover { transform: rotate(-12deg); }
.footer-mark svg { width: 30px; height: 30px; }
.footer-social { display: flex; gap: 6px; }
.footer-social a {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 50%;
  color: var(--ink);
  transition: background-color 0.2s var(--ease);
}
.footer-social a:hover { background: var(--stone); }
.footer-social svg { width: 19px; height: 19px; }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  padding-top: 22px;
  font-size: 0.86rem;
  color: var(--slate);
}
.footer-legal-links { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.footer-legal-links a { color: var(--ink-3); }
.footer-legal-links a:hover { color: var(--blue-700); }
.footer-legal-links span[aria-hidden] { display: none; }
.footer-disclaimer { margin-top: 22px; font-size: 0.78rem; line-height: 1.6; color: var(--slate); max-width: 920px; }

/* retired v2 pieces */
.footer-wordmark, .footer-brief { display: none; }

@media (max-width: 1080px) {
  .footer-top { grid-template-columns: 1fr; }
  .footer-news { max-width: 520px; }
}
@media (max-width: 720px) {
  .footer-nav-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 20px; }
}

/* ===== 10-home.css ===== */
/* ==========================================================================
   Homepage (v3) — tools/v3_home.py writes the markup
   ========================================================================== */

/* framed hero -------------------------------------------------------------- */
.v3-hero {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: clamp(640px, calc(100svh - 2 * var(--frame-gap)), 980px);
  margin: var(--frame-gap) var(--frame-gap) 0;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: #0b1d38;
  color: #fff;
}
.hero-media { position: absolute; inset: 0; z-index: -2; }
.hero-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 36%;
  transform: scale(1.02);
}
@media (prefers-reduced-motion: no-preference) {
  .hero-media img { animation: v3-hero-zoom 18s var(--ease-out) both; }
}
@keyframes v3-hero-zoom { from { transform: scale(1.09); } to { transform: scale(1.02); } }
.v3-hero::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, rgba(4, 13, 30, 0.78) 0%, rgba(4, 13, 30, 0.5) 34%, rgba(4, 13, 30, 0.08) 62%, rgba(4, 13, 30, 0) 80%),
    linear-gradient(0deg, rgba(4, 13, 30, 0.62) 0%, rgba(4, 13, 30, 0) 42%),
    linear-gradient(180deg, rgba(4, 13, 30, 0.45) 0%, rgba(4, 13, 30, 0) 22%);
}

.hero-inner {
  width: min(1240px, calc(100% - 2 * clamp(20px, 4vw, 64px)));
  margin: 0 auto;
  padding: calc(var(--header-h) + 64px) 0 clamp(96px, 10vw, 132px);
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(320px, 0.88fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: end;
}
.hero-copy { display: grid; gap: 22px; justify-items: start; max-width: 700px; min-width: 0; }
.hero-copy .eyebrow { color: rgba(255, 255, 255, 0.82); }
.hero-copy .eyebrow::before { background: var(--blue-300); box-shadow: 0 0 0 4px rgba(150, 196, 255, 0.18); }
.hero-copy h1 {
  font-size: var(--fs-hero);
  line-height: 0.98;
  letter-spacing: -0.028em;
  color: #fff;
  text-shadow: 0 2px 30px rgba(3, 10, 24, 0.25);
}
.hero-copy h1 em { color: #a9d0ff; }
.hero-copy > p {
  font-size: var(--fs-lede);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.84);
  max-width: 540px;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.hero-actions .btn-console { background: rgba(255, 255, 255, 0.12); color: #fff; border-color: rgba(255, 255, 255, 0.2); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.hero-actions .btn-console:hover { background: rgba(255, 255, 255, 0.2); }

.hero-notes {
  position: absolute;
  left: 0; right: 0; bottom: clamp(22px, 2.6vw, 34px);
  width: min(1240px, calc(100% - 2 * clamp(20px, 4vw, 64px)));
  margin: 0 auto;
  display: flex; flex-wrap: wrap; gap: 8px 26px;
}
.floating-note {
  display: inline-flex; align-items: baseline; gap: 8px;
  font-size: 0.86rem;
  color: rgba(255, 255, 255, 0.7);
}
.floating-note strong { color: #fff; font-weight: 600; display: inline-flex; align-items: center; gap: 8px; }
.floating-note strong::before {
  content: ""; width: 16px; height: 16px; flex: none;
  background: var(--blue-300);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.3 6.6 11.3 12.5 5' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.3 6.6 11.3 12.5 5' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* glass cards in the hero -------------------------------------------------- */
.hero-cards {
  justify-self: end;
  width: min(430px, 100%);
  display: grid;
  gap: 10px;
}
@media (prefers-reduced-motion: no-preference) {
  .hero-cards > * { animation: v3-rise 0.9s var(--ease-out) both; }
  .hero-cards > :nth-child(2) { animation-delay: 0.12s; }
  .hero-cards > :nth-child(3) { animation-delay: 0.24s; }
}
.hc-back {
  display: flex; align-items: center; gap: 8px;
  margin: 0 22px -22px;
  padding: 13px 18px 30px;
  border-radius: 20px 20px 0 0;
  font-size: 0.92rem;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.5);
  box-shadow: none;
}
.hc-back i { font-style: normal; opacity: 0.5; }
.hc-back b { font-weight: 600; }
.hc-back svg { margin-left: auto; opacity: 0.55; }
.hc-main { position: relative; padding: 20px 20px 18px; border-radius: 22px; }

.hero-slides { display: grid; }
.hero-slides > .hslide { grid-area: 1 / 1; opacity: 0; min-width: 0; }
.hp-s1, .hp-s2, .hp-s3, .hp-s4 { animation: 16s linear infinite; }
.hp-s1 { animation-name: hp-s1; }
.hp-s2 { animation-name: hp-s2; }
.hp-s3 { animation-name: hp-s3; }
.hp-s4 { animation-name: hp-s4; }
@keyframes hp-s1 { 0% { opacity: 0; } 1.5%, 23.5% { opacity: 1; } 25%, 100% { opacity: 0; } }
@keyframes hp-s2 { 0%, 25% { opacity: 0; } 26.5%, 48.5% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes hp-s3 { 0%, 50% { opacity: 0; } 51.5%, 73.5% { opacity: 1; } 75%, 100% { opacity: 0; } }
@keyframes hp-s4 { 0%, 75% { opacity: 0; } 76.5%, 98.5% { opacity: 1; } 100% { opacity: 0; } }

.hslide .panel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.hslide .panel-head strong { font-size: 1.05rem; font-weight: 600; letter-spacing: -0.012em; }
.hslide .tag {
  height: 26px; padding: 0 11px;
  background: var(--blue-50); border-color: var(--blue-100); color: var(--blue-700);
  font-family: var(--font-mono); font-size: 0.74rem; font-weight: 500;
}
.signers { list-style: none; margin: 0; padding: 0; display: grid; }
.signers li {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  padding: 8px 0;
  border-top: 1px solid rgba(14, 17, 22, 0.07);
}
.signers li:first-child { border-top: 0; }
.avatar {
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--stone-2); color: var(--slate);
  font-size: 0.8rem; font-weight: 600;
}
.is-approved .avatar { background: var(--blue); color: #fff; }
.who { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.who b { font-size: 0.9rem; font-weight: 600; }
.who small { display: inline-flex; gap: 4px; flex-wrap: wrap; min-width: 0; }
.who small span { font-size: 0.7rem; color: var(--slate); white-space: nowrap; }
.who small span + span::before { content: "· "; }
.state {
  display: inline-flex; align-items: center; gap: 5px;
  height: 24px; padding: 0 10px; border-radius: var(--pill);
  font-size: 0.74rem; font-weight: 500;
  background: var(--amber-50); color: var(--amber);
}
.is-approved .state { background: var(--green-50); color: var(--green); }
.progress { display: flex; gap: 4px; margin-top: 12px; }
.progress i { flex: 1; height: 4px; border-radius: 4px; background: rgba(14, 17, 22, 0.08); overflow: hidden; position: relative; }
.progress i.on::after { content: ""; position: absolute; inset: 0; background: var(--blue); border-radius: inherit; }
.hslide .panel-foot { margin-top: 9px; font-size: 0.78rem; color: var(--slate); }

.hc-row { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 10px; }
.hc-chip, .hc-chain { border-radius: 18px; padding: 14px 15px; min-width: 0; }
.hc-chip { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 11px; row-gap: 8px; align-items: center; }
.hc-ico { grid-row: span 2; width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: var(--ink); color: #fff; }
.hc-txt { display: grid; min-width: 0; }
.hc-txt strong { font-size: 0.88rem; font-weight: 600; }
.hc-txt small { font-size: 0.72rem; color: var(--slate); line-height: 1.3; }
.hc-chip .v3-chip { height: 22px; font-size: 0.7rem; padding: 0 9px; gap: 5px; justify-self: start; }
.hc-chain strong { display: block; font-size: 0.88rem; font-weight: 600; }
.hc-chain small { display: block; font-size: 0.7rem; line-height: 1.3; color: var(--slate); margin: 2px 0 9px; }
.chain-row { display: flex; gap: 5px; }
.chain-row i {
  width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center;
  font-style: normal; font-size: 0.78rem; font-weight: 600;
  background: var(--stone-2); color: var(--ink-3);
  border: 1px solid transparent;
}
.chain-row i > svg { width: 13px; height: 13px; }
.chain-row i:nth-child(5) { font-size: 0.66rem; color: var(--slate); }
.chain-row i:nth-child(1) { animation: chain-lit-1 16s linear infinite; }
.chain-row i:nth-child(2) { animation: chain-lit-2 16s linear infinite; }
.chain-row i:nth-child(3) { animation: chain-lit-3 16s linear infinite; }
.chain-row i:nth-child(4) { animation: chain-lit-4 16s linear infinite; }
@keyframes chain-lit-1 { 0%, 24.9% { background: var(--blue); color: #fff; } 25%, 100% { background: var(--stone-2); color: var(--ink-3); } }
@keyframes chain-lit-2 { 0%, 24.99% { background: var(--stone-2); color: var(--ink-3); } 25%, 49.9% { background: var(--blue); color: #fff; } 50%, 100% { background: var(--stone-2); color: var(--ink-3); } }
@keyframes chain-lit-3 { 0%, 49.99% { background: var(--stone-2); color: var(--ink-3); } 50%, 74.9% { background: var(--blue); color: #fff; } 75%, 100% { background: var(--stone-2); color: var(--ink-3); } }
@keyframes chain-lit-4 { 0%, 74.99% { background: var(--stone-2); color: var(--ink-3); } 75%, 99.9% { background: var(--blue); color: #fff; } 100% { background: var(--stone-2); color: var(--ink-3); } }

@media (prefers-reduced-motion: reduce) {
  .hp-s1, .hp-s2, .hp-s3, .hp-s4, .chain-row i { animation: none !important; }
  .hero-slides > .hp-s1 { opacity: 1; }
  .chain-row i:nth-child(1) { background: var(--blue); color: #fff; }
}

/* proof strip --------------------------------------------------------------------- */
.v3-proof { padding: clamp(36px, 4vw, 56px) 0 0; }
.proof-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
.proof-item {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: start;
  padding: 6px 26px 6px 0;
}
.proof-item + .proof-item { padding-left: 26px; border-left: 1px solid var(--hair); }
.proof-item svg { color: var(--blue); margin-top: 2px; }
.proof-item strong { display: block; font-size: 0.98rem; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 4px; }
.proof-item span { display: block; font-size: 0.86rem; line-height: 1.5; color: var(--slate); }

/* pillars (engraved cards) ------------------------------------------------------- */
.pillar-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.pillar-card {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(220px, 1fr) auto;
  min-height: 580px;
  padding: 26px 28px 30px;
  border-radius: var(--radius-lg);
  background: var(--stone);
  overflow: hidden;
  transition: background-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.pillar-card:hover { background: var(--stone-2); }
.pillar-card .v3-label { color: var(--ink-3); font-size: var(--ms-5); }
.pillar-art { display: grid; place-items: center; padding: 18px 0 8px; }
.pillar-art img {
  width: auto;
  max-width: 82%;
  max-height: 300px;
  mix-blend-mode: multiply;
  transition: transform 0.7s var(--ease-out);
}
.pillar-card:hover .pillar-art img { transform: scale(1.035) translateY(-4px); }
.pillar-body { display: grid; gap: 10px; }
.pillar-body h3 {
  font-family: var(--font-serif);
  font-size: var(--fs-h3-serif);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.08;
}
.pillar-body p { font-size: 0.93rem; line-height: 1.55; color: var(--slate); min-height: 4.65em; }
.pillar-body .link-arrow { margin-top: 4px; }

/* split tiles -------------------------------------------------------------------- */
.v3-split .split-section { gap: clamp(36px, 6vw, 96px); }
.v3-split .split-copy h2 { font-size: var(--fs-h2); }
.v3-split .split-copy h2 a { color: inherit; }
.v3-tile {
  display: grid; place-items: center;
  min-height: 460px;
  padding: clamp(28px, 4vw, 56px);
  background: var(--stone);
  border-radius: var(--radius-xl);
}
.v3-secure .info-grid { margin-top: clamp(40px, 5vw, 64px); }
.v3-secure .info-card .ic { color: var(--blue); margin-bottom: 14px; }

.vault-card {
  width: min(400px, 100%);
  padding: 22px;
  border-radius: 22px;
  background: #fff;
  box-shadow: var(--shadow-lg);
}
.vault-head { display: flex; align-items: center; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid var(--hair); }
.vault-ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--blue); color: #fff; }
.vault-head strong { font-size: 1.05rem; font-weight: 600; letter-spacing: -0.012em; white-space: nowrap; }
.vault-head .v3-chip { margin-left: auto; height: 26px; font-size: 0.74rem; gap: 4px; }
.vault-rows { list-style: none; margin: 0; padding: 6px 0 0; display: grid; }
.vault-rows li {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center;
  padding: 13px 0; border-bottom: 1px solid var(--hair);
}
.vr-ico { color: var(--slate); display: grid; }
.vr-k { font-size: 0.9rem; color: var(--ink-3); }
.vr-v { font-family: var(--font-mono); font-size: 0.78rem; padding: 4px 9px; border-radius: 8px; background: var(--stone); color: var(--ink); white-space: nowrap; }
.vault-seed { display: flex; align-items: center; gap: 7px; padding-top: 16px; color: var(--slate-2); }
.vault-seed span { display: grid; margin-right: 4px; color: var(--blue); }
.vault-seed i { width: 7px; height: 7px; border-radius: 50%; background: var(--stone-3); }

/* cold: photo tile + steps -------------------------------------------------------- */
.v3-photo-tile {
  position: relative;
  padding: 0;
  border-radius: var(--radius-xl);
  overflow: hidden;
  aspect-ratio: 5 / 4;
  background: var(--stone-2);
}
.v3-photo-tile > img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.cold-overlay {
  position: absolute; left: 22px; right: 22px; bottom: 22px;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center;
  padding: 14px 16px; border-radius: 18px;
}
.qr-mini { width: 56px; height: 56px; border-radius: 12px; display: grid; place-items: center; background: #fff; color: var(--ink); }
.cold-overlay strong { display: block; font-size: 0.98rem; font-weight: 600; }
.cold-overlay small { display: block; font-size: 0.8rem; color: var(--slate); }
.step-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 0; width: 100%; }
.step-list li {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px;
  padding: 18px 0; border-top: 1px solid var(--line);
}
.step-n {
  width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--white); color: var(--blue-700);
  font-family: var(--font-mono); font-size: 0.8rem; font-weight: 500;
  box-shadow: var(--shadow-xs);
}
.step-list strong { display: block; font-size: 1rem; font-weight: 600; margin-bottom: 4px; letter-spacing: -0.01em; }
.step-list p { font-size: 0.92rem; color: var(--muted); line-height: 1.55; }

/* multisig: stacked policy cards --------------------------------------------------- */
.ms-stack { display: grid; gap: 0; place-items: stretch; align-content: center; }
.ms-card {
  position: relative;
  padding: 18px 20px 20px;
  border-radius: 20px;
  background: #fff;
  box-shadow: var(--shadow);
}
.ms-card + .ms-card { margin-top: -10px; }
.ms-1 { margin-right: 64px; z-index: 1; }
.ms-2 { margin-inline: 32px; z-index: 2; }
.ms-3 { margin-left: 64px; z-index: 3; box-shadow: var(--shadow-lg); }
.ms-top { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.ms-ico { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--blue-50); color: var(--blue-700); }
.ms-top b { font-family: var(--font-mono); font-size: 0.82rem; font-weight: 500; white-space: nowrap; }
.ms-keys { margin-left: auto; display: flex; gap: 4px; }
.ms-keys i { width: 18px; height: 6px; border-radius: 3px; background: var(--stone-2); }
.ms-keys i.on { background: var(--blue); }
.ms-card strong { display: block; font-size: 1rem; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 4px; }
.ms-card p { font-size: 0.88rem; line-height: 1.5; color: var(--slate); }

/* stories (MultiSig for every context) ---------------------------------------------- */
.story-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.story-card { display: grid; grid-template-rows: auto 1fr; gap: 20px; }
.story-media {
  position: relative; display: block;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--stone-2);
}
.story-media img { width: 100%; height: 100%; object-fit: cover; }
/* .v3-focus photos sit out of focus and sharpen on hover, keyboard focus, or (on touch screens,
   via app.js) when the card scrolls to the middle of the viewport. The scale hides blur's soft edge. */
.v3-focus .story-media img, .v3-photo-tile.v3-focus > img {
  filter: blur(5px) saturate(0.92);
  transform: scale(1.07);
  transition: filter 0.7s var(--ease-out), transform 0.9s var(--ease-out);
}
.v3-photo-tile.v3-focus > img { filter: blur(6px) saturate(0.92); }
.v3-focus:hover .story-media img, .v3-focus:focus-within .story-media img, .v3-focus.is-focus .story-media img,
.v3-photo-tile.v3-focus:hover > img, .v3-photo-tile.v3-focus.is-focus > img { filter: none; transform: scale(1.02); }
.story-tag {
  position: absolute; left: 14px; bottom: 14px;
  height: 30px; padding: 0 13px; display: inline-flex; align-items: center;
  border-radius: var(--pill);
  background: rgba(255, 255, 255, 0.78);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  font-size: 0.78rem; font-weight: 600; color: var(--ink);
}
.story-body { display: grid; gap: 12px; align-content: start; justify-items: start; }
.story-body h3 { font-size: 1.32rem; font-weight: 600; letter-spacing: -0.015em; }
.story-body h3 a:hover { color: var(--blue-700); }
.story-body > p { font-size: 0.95rem; color: var(--slate); line-height: 1.55; }
.pil-list, .plan-features { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pil-list li, .plan-feature {
  position: relative; padding-left: 26px;
  font-size: 0.9rem; line-height: 1.45; color: var(--ink-3);
}
.pil-list li::before, .plan-feature::before {
  content: ""; position: absolute; left: 0; top: 2px; width: 17px; height: 17px; border-radius: 50%;
  background: var(--blue-50) center / 11px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2 4.9 8.5 9.5 3.6' fill='none' stroke='%23095bc0' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* trust band ---------------------------------------------------------------------- */
.v3-band { position: relative; isolation: isolate; overflow: hidden; padding: clamp(80px, 9vw, 140px) 0; }
.band-media { position: absolute; inset: 0; z-index: -2; }
.band-media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
.v3-band::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(6, 11, 20, 0.84) 0%, rgba(6, 11, 20, 0.6) 46%, rgba(6, 11, 20, 0.42) 100%),
              linear-gradient(0deg, rgba(6, 11, 20, 0.5), rgba(6, 11, 20, 0) 50%);
}
.band-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(36px, 5vw, 80px); align-items: end; }
.band-copy { display: grid; gap: 22px; justify-items: start; }
.band-copy h2 { font-size: clamp(2.4rem, 1.4rem + 3.4vw, 4.6rem); line-height: 1; color: #fff; }
.band-copy h2 em { color: #a9d0ff; }
.band-copy > p { font-size: var(--fs-lede); color: rgba(255, 255, 255, 0.8); max-width: 520px; line-height: 1.6; }
.band-copy .kicker { color: rgba(255, 255, 255, 0.78); }
.band-copy .kicker::before { background: var(--blue-300); }
.band-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.tb-stat { display: grid; align-content: start; gap: 6px; min-height: 210px; padding: 22px 22px 24px; border-radius: 20px; }
.tb-label { font-size: 0.82rem; color: rgba(255, 255, 255, 0.7); line-height: 1.35; }
.tb-stat strong {
  font-family: var(--font-serif); font-weight: 400;
  font-size: clamp(1.9rem, 1.4rem + 1.4vw, 2.7rem); letter-spacing: -0.025em; line-height: 1.05;
  margin-top: auto; padding-top: 18px; color: #fff;
}
.tb-stat p { font-size: 0.86rem; line-height: 1.5; color: rgba(255, 255, 255, 0.74); }

/* coverage ------------------------------------------------------------------------- */
.asset-legend { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: -18px 0 26px; font-size: 0.86rem; color: var(--slate); }
.legend-item { display: inline-flex; align-items: center; gap: 8px; }
.legend-dot, .status-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--slate-3); display: inline-block; flex: none; }
.legend-dot.multi, .status-dot.multi { background: var(--blue); }
.coin-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.coin-card {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center;
  padding: 14px 16px; border-radius: var(--radius);
  background: var(--surface);
}
.coin-card:hover { box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.coin-icon { width: 32px; height: 32px; }
.coin-body strong { display: block; font-size: 0.92rem; font-weight: 600; }
.coin-body span { display: block; font-size: 0.8rem; line-height: 1.3; color: var(--slate); }
.coin-meta { display: flex; gap: 5px; }

/* pricing ------------------------------------------------------------------------------ */
.plan-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.plan-card {
  display: grid; align-content: start; gap: 22px;
  padding: 32px 30px 34px;
  border-radius: var(--radius-lg);
  background: var(--stone);
}
.plan-card.recommended {
  background: var(--night);
  color: #fff;
  box-shadow: 0 0 0 1px rgba(150, 196, 255, 0.25), var(--shadow-lg);
}
.plan-card.recommended::before {
  content: attr(data-recommended-label);
  position: absolute; top: 22px; right: 22px;
  height: 28px; padding: 0 12px; display: inline-flex; align-items: center;
  border-radius: var(--pill); background: var(--blue); color: #fff;
  font-size: 0.75rem; font-weight: 600;
}
.plan-head { display: grid; gap: 6px; }
.plan-head h3 { font-size: 1.05rem; font-weight: 600; }
.plan-sub { font-family: var(--font-mono); font-size: var(--ms-6); letter-spacing: 0.08em; text-transform: uppercase; color: var(--slate); }
.plan-card.recommended .plan-sub { color: rgba(255, 255, 255, 0.65); }
.price-tag { display: flex; align-items: baseline; gap: 8px; margin-top: 14px; }
.price-tag strong { font-family: var(--font-serif); font-size: clamp(2.8rem, 2.2rem + 1.6vw, 3.6rem); font-weight: 400; letter-spacing: -0.03em; line-height: 1; }
.price-tag span { color: var(--slate); font-size: 0.92rem; }
.plan-card.recommended .price-tag span { color: rgba(255, 255, 255, 0.6); }
.plan-features { padding-top: 22px; border-top: 1px solid var(--hair); }
.plan-card.recommended .plan-features { border-top-color: rgba(255, 255, 255, 0.12); }
.plan-card.recommended .plan-feature { color: rgba(255, 255, 255, 0.86); }
.plan-card.recommended .plan-feature::before { background-color: rgba(13, 128, 254, 0.3); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2 4.9 8.5 9.5 3.6' fill='none' stroke='%23c4ddff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }

.v3-pricing .table-shell { margin-top: 20px; background: var(--stone); padding: 6px; }
.pricing-table { width: 100%; border-collapse: separate; border-spacing: 0; background: #fff; border-radius: 20px; overflow: hidden; font-size: 0.92rem; }
.pricing-table th, .pricing-table td { padding: 14px 20px; text-align: center; border-bottom: 1px solid var(--hair); white-space: nowrap; }
.pricing-table th:first-child, .pricing-table td:first-child { text-align: left; white-space: normal; min-width: 220px; }
.pricing-table thead th { font-weight: 600; font-size: 0.88rem; color: var(--ink); background: #fff; }
.pricing-table thead th:first-child { color: var(--slate); font-weight: 500; }
.pricing-table tbody tr:last-child td { border-bottom: 0; font-weight: 600; }
.pricing-table tbody tr:hover td { background: var(--blue-50); }
.pricing-table td:first-child { color: var(--ink-3); }
.pricing-table .check { color: var(--blue); font-weight: 700; }
.pricing-table .cross { color: var(--slate); }

.recovery-note {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px 40px; align-items: center;
  margin-top: 20px; padding: 28px 32px;
  border-radius: var(--radius-lg);
  background: var(--blue-50);
}
.recovery-note h3 { font-size: 1.1rem; margin-bottom: 6px; }
.recovery-note p { font-size: 0.92rem; color: var(--slate); line-height: 1.55; }
.recovery-note .link-chip { background: #fff; border-color: transparent; }

/* download ----------------------------------------------------------------------------- */
.download-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.download-card { display: grid; grid-template-rows: auto 1fr auto; gap: 18px; padding: 28px; border-radius: var(--radius-lg); }
.platform-icon { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; background: var(--stone); color: var(--ink); }
.platform-icon svg { width: 30px; height: 30px; }
/* store marks: Apple on black, the Google Play triangle in colour, the Android robot on Android green */
.platform-icon.is-ios { background: #0b0c0e; color: #fff; }
.platform-icon.is-ios svg { width: 28px; height: 28px; margin-top: -3px; }
.platform-icon.is-play { background: #fff; box-shadow: inset 0 0 0 1px var(--hair); }
.platform-icon.is-play svg { width: 27px; height: 27px; margin-left: 3px; }
.platform-icon.is-apk { background: #fff; box-shadow: inset 0 0 0 1px var(--hair); color: #2fb36d; }   /* quieter: a side-door install */
.platform-icon.is-apk svg { width: 32px; height: 32px; }
.download-copy { display: grid; gap: 8px; align-content: start; }
.download-card h3 { font-size: 1.15rem; }
.download-card p { font-size: 0.92rem; color: var(--slate); line-height: 1.55; }
.download-card .dl-sha { display: grid; gap: 4px; margin-top: 4px; padding: 10px 12px; border-radius: 10px; background: var(--stone); }
.download-card .dl-sha-k { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.1em; color: var(--slate); }
.download-card .dl-sha-v { font-family: var(--font-mono); font-size: 0.68rem; line-height: 1.5; word-break: break-all; color: var(--ink-3); }
.download-card .btn { justify-self: start; }
.console-cta {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 20px; align-items: center;
  margin-top: 14px; padding: 22px 26px;
  border-radius: var(--radius-lg);
  background: var(--night); color: #fff;
}
.console-cta-icon { width: 52px; height: 52px; border-radius: 15px; display: grid; place-items: center; background: rgba(255, 255, 255, 0.1); }
.console-cta-icon svg { width: 26px; height: 26px; }
.console-cta-text strong { font-size: 1.05rem; font-weight: 600; }
.console-cta-text p { font-size: 0.9rem; color: rgba(255, 255, 255, 0.7); }

/* contact ------------------------------------------------------------------------------- */
.contact-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.contact-card { display: grid; align-content: start; gap: 8px; padding: 24px 24px 26px; border-radius: var(--radius-lg); }
.contact-card > span { font-family: var(--font-mono); font-size: var(--ms-5); letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-ink); }
.contact-card h3 { font-size: 1.08rem; overflow-wrap: anywhere; }
.contact-card p { font-size: 0.88rem; color: var(--slate); line-height: 1.5; }
.contact-card::after { position: absolute; top: 24px; right: 22px; transform: rotate(-45deg); opacity: 0.4; }
.contact-card:hover { background: var(--stone-2); }
.contact-card:hover::after { opacity: 1; transform: rotate(-45deg) translateX(3px); }

/* final CTA -------------------------------------------------------------------------------- */
.v3-final { position: relative; isolation: isolate; overflow: hidden; padding: clamp(110px, 12vw, 180px) 0; text-align: center; }
.final-mark { position: absolute; inset: 0; z-index: -1; display: grid; place-items: center; pointer-events: none; }
.final-mark svg { width: min(620px, 92vw); height: auto; }
.final-mark path { fill: none; stroke: var(--stone-2); stroke-width: 0.32; }
.final-inner { display: grid; gap: 22px; justify-items: center; }
.final-inner h2 { font-size: clamp(2.6rem, 1.4rem + 4.2vw, 5.2rem); line-height: 1; max-width: 900px; }
.final-inner p { font-size: var(--fs-lede); color: var(--slate); max-width: 560px; }
.final-inner .hero-actions { justify-content: center; }

/* responsive ------------------------------------------------------------------------------- */
@media (max-width: 1180px) {
  .hero-inner { grid-template-columns: 1fr; align-items: end; }
  .hero-cards { justify-self: start; width: min(430px, 100%); }
  .coin-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1080px) {
  .proof-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 22px; }
  .proof-item:nth-child(3) { padding-left: 0; border-left: 0; }
  .pillar-grid, .story-grid { grid-template-columns: 1fr; }
  .pillar-card { min-height: 0; grid-template-rows: auto auto auto; }
  .pillar-art img { max-height: 240px; }
  .band-grid { grid-template-columns: 1fr; }
  .plan-grid, .download-grid { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .story-card { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr); align-items: start; }
}
@media (max-width: 720px) {
  .v3-hero { min-height: 0; border-radius: var(--radius-lg); }
  .hero-inner { padding: calc(var(--header-h) + 48px) 0 120px; }
  .hero-cards { display: none; }
  .hero-media img { object-position: 74% 50%; }
  .v3-hero::before { background: linear-gradient(180deg, rgba(4, 13, 30, 0.55) 0%, rgba(4, 13, 30, 0.35) 40%, rgba(4, 13, 30, 0.82) 100%); }
  .hero-inner { padding-bottom: 24px; }
  .hero-actions .btn-console { display: none; }
  .hero-notes { position: static; flex-direction: column; gap: 10px; margin: 0 auto 28px; }
  .floating-note { display: block; font-size: 0.84rem; line-height: 1.45; }
  .floating-note strong { margin-right: 6px; }
  .proof-grid { grid-template-columns: 1fr; }
  .proof-item, .proof-item + .proof-item { padding: 14px 0; border-left: 0; border-top: 1px solid var(--hair); }
  .proof-item:first-child { border-top: 0; }
  .story-card { grid-template-columns: 1fr; }
  .v3-tile { min-height: 0; }
  .ms-1, .ms-2, .ms-3 { margin-inline: 0; }
  .band-stats { grid-template-columns: 1fr; }
  .tb-stat { min-height: 0; }
  .coin-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .coin-card { grid-template-columns: auto minmax(0, 1fr); }
  .coin-meta { grid-column: 2; }
  .contact-grid { grid-template-columns: 1fr; }
  .recovery-note { grid-template-columns: 1fr; padding: 24px; }
  .console-cta { grid-template-columns: 1fr; }
  .cold-overlay { left: 12px; right: 12px; bottom: 12px; grid-template-columns: auto minmax(0, 1fr); }
  .cold-overlay .v3-chip { display: none; }
}

@media (max-width: 420px) {
  .vault-rows li { grid-template-columns: auto minmax(0, 1fr); row-gap: 6px; }
  .vault-rows .vr-v { grid-column: 2; justify-self: start; }
}
@media (max-width: 1080px) { .pillar-body p { min-height: 0; } }

/* long translations: never let a CTA or headline widen its column */
@media (max-width: 1180px) { .hero-inner { grid-template-columns: minmax(0, 1fr); } .hero-copy { max-width: 820px; } }
@media (max-width: 1080px) { .band-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 720px) {
  .hero-actions .btn, .band-copy .btn {
    white-space: normal; max-width: 100%; height: auto; min-height: var(--btn-h);
    padding-block: 12px; text-align: center; line-height: 1.3;
  }
  .hero-notes .floating-note { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 8px; }
  .hero-notes .floating-note strong { grid-column: 1 / -1; margin: 0; }
  .hero-notes .floating-note span { grid-column: 2; }
  /* pricing table: keep the feature names in view while the plans scroll */
  .v3-pricing .table-shell :is(th, td):first-child {
    position: sticky; left: 0; z-index: 1; background: #fff;
    box-shadow: 1px 0 0 var(--hair); min-width: 150px;
  }
}

/* ===== 11-pages.css ===== */
/* ==========================================================================
   11 — Inner pages: shared components (features, solutions, coins, legal…)
   Styles the legacy class vocabulary (page-hero, page-summary, info-grid cards,
   page-cta, tag-row…) in the v3 language. tools/v3_pages.py marks each hero as
   v3-photo-hero (feature + solution pages) or v3-stone-hero (coins, signer).
   ========================================================================== */

/* v2 numbered rails are retired */
.sec-num > .container::before, .sec-num > .container::after { content: none !important; display: none !important; }

/* ---- page hero: a framed panel, like the homepage ----------------------- */
body:has(main > .page-hero.v3-photo-hero:first-child),
body:has(main > .page-hero.v3-stone-hero:first-child) { padding-top: 0; }

.page-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  overflow: clip;
  padding: clamp(36px, 4.5vw, 64px) 0 clamp(48px, 6vw, 80px);
  background: var(--bg);
  color: var(--fg);
}
.page-hero.t-ink::before { content: none; }

.page-hero.v3-photo-hero,
.page-hero.v3-stone-hero {
  margin: var(--frame-gap) var(--frame-gap) 0;
  border-radius: var(--radius-xl);
  padding: calc(var(--header-h) + clamp(28px, 4vw, 56px)) 0 clamp(28px, 3vw, 40px);
}

/* photo hero: dark photograph, white copy, glass panels */
.page-hero.v3-photo-hero {
  --bg: #0b1730; --fg: #fff; --muted: rgba(255, 255, 255, 0.78);
  --line: rgba(255, 255, 255, 0.16); --line-strong: rgba(255, 255, 255, 0.3);
  --accent-ink: #a9d0ff;
  background: #0b1730;
  min-height: clamp(620px, 88svh, 900px);
  display: flex; flex-direction: column; justify-content: flex-end;
}
.page-hero.v3-photo-hero .hero-media { position: absolute; inset: 0; z-index: -2; }
.page-hero.v3-photo-hero .hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: var(--hero-pos, 50% 36%); }
@media (max-width: 720px) { .page-hero.v3-photo-hero .hero-media img { object-position: var(--hero-pos-m, 74% 50%); } }
.page-hero.v3-photo-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(5, 12, 26, 0.82) 0%, rgba(5, 12, 26, 0.55) 40%, rgba(5, 12, 26, 0.2) 70%, rgba(5, 12, 26, 0.12) 100%),
    linear-gradient(0deg, rgba(5, 12, 26, 0.7) 0%, rgba(5, 12, 26, 0) 45%),
    linear-gradient(180deg, rgba(5, 12, 26, 0.5) 0%, rgba(5, 12, 26, 0) 25%);
}
.page-hero.v3-photo-hero h1 em { color: #a9d0ff; }
.page-hero.v3-photo-hero .page-visual-card {
  background: rgba(10, 18, 34, 0.42);
  border: 1px solid rgba(255, 255, 255, 0.18);
  -webkit-backdrop-filter: blur(20px) saturate(140%); backdrop-filter: blur(20px) saturate(140%);
}
.page-hero.v3-photo-hero .page-summary {
  background: rgba(10, 18, 34, 0.38);
  border: 1px solid rgba(255, 255, 255, 0.14);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
}
.page-hero.v3-photo-hero .page-summary:hover { background: rgba(10, 18, 34, 0.5); }
.page-hero.v3-photo-hero .page-tag { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.2); color: #fff; }
.page-hero.v3-photo-hero .chain-chip { background: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.82); }
.page-hero.v3-photo-hero .btn-secondary { background: rgba(255, 255, 255, 0.12); color: #fff; border-color: rgba(255, 255, 255, 0.2); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.page-hero.v3-photo-hero .btn-secondary:hover { background: rgba(255, 255, 255, 0.2); }
/* three short points and the chains the page works on, between the lede and the buttons */
.page-hero.v3-photo-hero .hero-points { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; max-width: 640px; }
.page-hero.v3-photo-hero .hero-points li {
  display: inline-flex; align-items: center; gap: 7px; min-height: 34px; padding: 6px 14px 6px 11px;
  border-radius: var(--pill); border: 1px solid rgba(255, 255, 255, 0.16); background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.92); font-size: 14px; line-height: 1.3;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.page-hero.v3-photo-hero .hero-points svg { flex: none; color: #8ec2ff; }
.page-hero.v3-photo-hero .page-copy > p.hero-coins {
  display: flex; align-items: center; gap: 12px; max-width: 640px; margin-top: 18px;
  font-size: 14px; line-height: 1.45; color: rgba(255, 255, 255, 0.74);
}
.hero-coins .coin-stack { display: inline-flex; flex: none; padding-left: 6px; }
/* the coin badges fill 70% of their 88px artboard: a 37px image shows a 26px coin */
.hero-coins .coin-stack i {
  display: block; width: 26px; height: 26px; margin-left: -6px;
  border-radius: 50%; overflow: hidden; background: #0f1724; box-shadow: 0 0 0 2px rgba(10, 16, 28, 0.9);
}
.hero-coins .coin-stack img { display: block; width: 37px; height: 37px; max-width: none; margin: -5.5px; }

/* stone hero: light frame, the v2 artwork sits on a dark device tile */
.page-hero.v3-stone-hero {
  --bg: var(--stone); --bg-2: #fff; --bg-3: var(--stone-2);
  --fg: var(--ink); --muted: var(--slate); --line: var(--hair); --line-strong: var(--hair-2);
  --accent-ink: var(--blue-700); --focus: var(--blue);
  --surface: #fff; --surface-hover: #fbfaf8;
  background: var(--stone);
  color-scheme: light;
}
.page-hero.v3-stone-hero .page-visual-card {
  --bg: var(--night); --bg-2: var(--night-2); --bg-3: var(--night-3);
  --fg: var(--t-dark); --muted: var(--m-dark); --line: var(--hair-light); --line-strong: var(--hair-light-2);
  --accent-ink: var(--blue-300);
  background: var(--night);
  border: 0;
  box-shadow: var(--shadow-lg);
  color: var(--t-dark);
}
.page-hero.v3-stone-hero .page-summary { background: #fff; }

/* art hero (coin pages, external signer): an engraving behind the copy instead of a device tile,
   multiplied into the stone frame the way the trust page sets its lighthouse */
.page-hero.v3-art-hero { isolation: isolate; overflow: hidden; }
.page-hero.v3-art-hero .page-hero-grid { grid-template-columns: minmax(0, 1fr); min-height: clamp(380px, 34vw, 470px); align-content: center; }
.page-hero.v3-art-hero .page-copy { max-width: 620px; }
.page-art {
  position: absolute; z-index: -1;
  right: clamp(-40px, 1vw, 40px); top: calc(var(--header-h) - 12px); bottom: 150px;
  width: min(50%, 660px);
  display: grid; place-items: center;
  pointer-events: none;
  mix-blend-mode: multiply;
}
.page-art img { width: auto; height: auto; max-width: 100%; max-height: 100%; }
@media (max-width: 960px) {
  .page-hero.v3-art-hero .page-hero-grid { min-height: 0; }
  .page-art { top: calc(var(--header-h) - 20px); bottom: auto; right: -12%; width: min(62%, 420px); opacity: 0.32; }
}
.page-hero.v3-stone-hero .page-summary:hover { box-shadow: var(--shadow-sm); }

.page-hero > .container { width: var(--container); }

.back-link {
  display: inline-flex; align-items: center; gap: 8px;
  height: 34px; padding: 0 14px 0 11px;
  border-radius: var(--pill);
  background: color-mix(in srgb, var(--fg) 8%, transparent);
  font-size: 0.84rem; font-weight: 500;
  color: var(--fg);
  margin-bottom: clamp(22px, 3vw, 36px);
  transition: background-color 0.2s var(--ease);
}
.back-link::before {
  content: ""; width: 14px; height: 14px; background: currentColor; flex: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M13 8H3.8M7.4 4.2 3.6 8l3.8 3.8' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M13 8H3.8M7.4 4.2 3.6 8l3.8 3.8' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform 0.25s var(--ease);
}
.back-link:hover { background: color-mix(in srgb, var(--fg) 14%, transparent); }
.back-link:hover::before { transform: translateX(-2px); }

.page-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.page-copy { min-width: 0; }
.page-hero h1 {
  margin: 18px 0 20px;
  font-size: var(--fs-h1);
  line-height: 1;
  letter-spacing: -0.026em;
  text-wrap: balance;
}
.page-copy > p, .page-hero .page-copy > div > p { font-size: var(--fs-lede); line-height: 1.6; color: var(--muted); max-width: 560px; }
.page-hero .hero-actions { margin-top: 28px; }

/* tags / chips */
.tag-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.page-tag {
  height: 30px; padding: 0 12px;
  font-family: var(--font-sans); font-size: 0.8rem; font-weight: 500; letter-spacing: 0; text-transform: none;
}
.page-tag.warm::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--blue); }
.chain-chip-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.chain-chip {
  display: inline-flex; align-items: center; height: 24px; padding: 0 9px;
  border-radius: var(--pill);
  background: color-mix(in srgb, var(--fg) 6%, transparent);
  font-family: var(--font-sans); font-size: 0.72rem; font-weight: 500; letter-spacing: 0;
  color: var(--muted);
}

/* visual slot */
.page-visual-card {
  position: relative;
  border-radius: var(--radius-xl);
  background: var(--surface);
  padding: clamp(14px, 2vw, 26px);
  overflow: hidden;
}
.page-visual-card img { width: 100%; height: auto; border-radius: var(--radius); }

/* summary cards (3) */
.page-summary-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: clamp(40px, 5vw, 64px);
}
.page-summary { padding: 22px 22px 24px; border-radius: 20px; }
.summary-label {
  display: block;
  font-family: var(--font-sans); font-size: 0.98rem; font-weight: 600; letter-spacing: -0.01em; text-transform: none;
  color: var(--fg); margin-bottom: 8px;
}
.summary-label::before { content: none; }
.page-summary p { color: var(--muted); font-size: 0.92rem; line-height: 1.55; }

/* ---- icon card grids (info-grid on inner pages, page-card-grid) ---------- */
.container > .info-grid, .page-card-grid, .container > .info-grid.info-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  gap: 14px;
  border: 0;
}
.container > .info-grid > .info-card, .page-card-grid > .info-card {
  display: flex; flex-direction: column;
  padding: 26px 26px 28px; min-height: 0;
  border-radius: var(--radius-lg);
  background: var(--surface);
}
.container > .info-grid > .info-card::before, .page-card-grid > .info-card::before { content: none; }
.container > .info-grid > .info-card .card-icon, .page-card-grid > .info-card .card-icon { position: static; margin-bottom: 18px; }
.container > .info-grid > .info-card h3, .page-card-grid > .info-card h3 { margin: 0 0 8px; font-size: 1.15rem; letter-spacing: -0.012em; }
.container > .info-grid > .info-card p, .page-card-grid > .info-card p { margin: 0; color: var(--muted); font-size: 0.94rem; line-height: 1.6; }
.container > .info-grid > .info-card:hover, .page-card-grid > .info-card:hover { background: var(--surface-hover); }
.container > .info-grid > .info-card strong { display: block; font-size: 1.05rem; margin-bottom: 8px; }

@media (min-width: 961px) {
  .cw-security .container > .info-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cw-security .container > .info-grid > .info-card:last-child:nth-child(3n + 2) { grid-column: span 2; }
  .cw-security .container > .info-grid > .info-card:last-child:nth-child(3n + 1) { grid-column: 1 / -1; }
}
@media (min-width: 641px) and (max-width: 960px) {
  .cw-security .container > .info-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cw-security .container > .info-grid > .info-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* ---- split visual alias ---------------------------------------------------- */
.workflow-visual {
  position: sticky; top: calc(var(--header-h) + 24px);
  padding: clamp(14px, 2vw, 26px);
  border-radius: var(--radius-xl);
  background: var(--surface);
  overflow: hidden;
}
.workflow-visual img { width: 100%; height: auto; border-radius: var(--radius); }

/* ---- page CTA band ------------------------------------------------------------ */
.page-cta::before, .page-cta::after { content: none; }
.page-cta .section-heading h2 { margin: 0; }
.page-cta .section-heading p { font-size: 1rem; }
.cta-actions { justify-content: flex-end; }
.t-ink .page-cta { background: rgba(255, 255, 255, 0.06); }

/* ---- link rows ------------------------------------------------------------------ */
.link-row .link-chip { flex: 0 1 auto; }
.recovery-note:has(h3) .link-row { flex-direction: column; align-items: stretch; }
.section-heading:has(+ .about-intro) { margin-bottom: 20px; }
.about-intro + .link-row { margin-top: 20px; }
.split-copy > p + .link-row { margin-top: 18px; }
.recovery-note:not(:has(h3)) { grid-template-columns: minmax(0, 1fr); gap: 14px; }
.link-chip[rel~="noopener"]::after { display: none; }  /* "Official website ↗" already carries a literal arrow */
.about-intro { max-width: 760px; color: var(--muted); font-size: 1.06rem; line-height: 1.7; }

/* ---- responsive -------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .page-cta { grid-template-columns: minmax(0, 1fr); }
  .cta-actions { justify-content: flex-start; }
  body[data-route-type="coin"] .split-section { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  body[data-route-type="coin"] .split-visual { position: relative; top: auto; max-width: 620px; }
}
@media (max-width: 960px) {
  .page-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .page-visual-card { max-width: 620px; }
  .page-summary-grid { grid-template-columns: minmax(0, 1fr); }
  .workflow-visual { position: relative; top: auto; max-width: 620px; }
  .page-hero.v3-photo-hero { min-height: 0; }
}
@media (max-width: 640px) {
  .page-hero.v3-photo-hero, .page-hero.v3-stone-hero { border-radius: var(--radius-lg); padding-top: calc(var(--header-h) + 28px); }
  .page-hero h1 { font-size: clamp(2.1rem, 9vw, 2.8rem); }
  .page-hero .hero-actions .btn { flex: 1 1 auto; }
  .container > .info-grid, .page-card-grid { grid-template-columns: minmax(0, 1fr); }
}

/* stone heroes keep the t-ink class from v2 — undo its dark-surface button */
.page-hero.v3-stone-hero .btn-secondary, .page-hero.v3-stone-hero .btn-console {
  background: rgba(14, 17, 22, 0.06); color: var(--ink); border-color: transparent;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.page-hero.v3-stone-hero .btn-secondary:hover { background: rgba(14, 17, 22, 0.1); }

/* ===== 12-trust.css ===== */
/* ==========================================================================
   Trust page — tools/v3_trust.py
   ========================================================================== */

/* light framed hero with an engraving --------------------------------------- */
.v3-hero.is-light {
  min-height: 0;
  background: var(--stone);
  color: var(--ink);
}
.v3-hero.is-light::before { display: none; }
.trust-hero-inner { grid-template-columns: minmax(0, 1fr); padding-bottom: clamp(40px, 5vw, 64px); }
.trust-hero .hero-copy { max-width: 700px; }
.trust-hero .hero-copy h1 { color: var(--ink); text-shadow: none; }
.trust-hero .hero-copy h1 em { color: var(--blue-700); }
.trust-hero .hero-copy > p { color: var(--slate); }
.trust-hero .eyebrow { color: var(--blue-700); }
.trust-hero .eyebrow::before { background: var(--blue); box-shadow: none; }
.trust-hero-art {
  position: absolute; z-index: -1;
  right: clamp(-40px, 2vw, 40px); bottom: 96px; top: 70px;
  width: min(46%, 620px);
  display: grid; place-items: end center;
  pointer-events: none;
  mix-blend-mode: multiply;   /* on the container: its z-index makes it a stacking context */
}
.trust-hero-art img { max-height: 100%; width: auto; opacity: 0.92; }

.v3-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 0.85rem; color: var(--slate); }
.v3-crumbs a:hover { color: var(--blue-700); }
.v3-crumbs span[aria-hidden] { opacity: 0.5; }

.th-stats {
  position: relative;
  width: min(1240px, calc(100% - 2 * clamp(20px, 4vw, 64px)));
  margin: 0 auto clamp(20px, 2.4vw, 32px);
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  box-shadow: var(--shadow-sm);
}
.th-stat { display: grid; gap: 4px; padding: 22px 26px; }
.th-stat + .th-stat { border-left: 1px solid var(--hair); }
.th-stat strong { font-family: var(--font-serif); font-weight: 400; font-size: clamp(2rem, 1.5rem + 1.4vw, 2.9rem); line-height: 1; letter-spacing: -0.03em; color: var(--ink); }
.th-stat span { font-size: 0.86rem; color: var(--slate); line-height: 1.4; }

/* in-page nav */
.v3-toc { padding: 22px 0 0; }
.v3-toc .container { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.v3-toc a {
  height: 40px; padding: 0 18px; display: inline-flex; align-items: center;
  border-radius: var(--pill); background: var(--stone);
  font-size: 0.9rem; font-weight: 500; color: var(--ink-3);
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}
.v3-toc a:hover { background: var(--blue-50); color: var(--blue-700); }

/* a. record ---------------------------------------------------------------- */
.trust-split { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(36px, 6vw, 96px); align-items: start; }
.trust-split .section-heading { margin-bottom: 0; }
.timeline { list-style: none; margin: 0; padding: 0; position: relative; display: grid; gap: 0; }
.timeline::before { content: ""; position: absolute; left: 7px; top: 14px; bottom: 14px; width: 1px; background: var(--hair-2); }
.timeline li { position: relative; display: grid; gap: 4px; padding: 0 0 26px 40px; }
.timeline li::before {
  content: ""; position: absolute; left: 0; top: 9px; width: 15px; height: 15px; border-radius: 50%;
  background: #fff; border: 2px solid var(--blue); box-sizing: border-box;
}
.timeline li:last-child { padding-bottom: 0; }
.timeline li:last-child::before { background: var(--blue); }
.tl-year { font-family: var(--font-serif); font-size: 1.9rem; line-height: 1.05; letter-spacing: -0.02em; }
.timeline p { color: var(--slate); font-size: 0.98rem; line-height: 1.55; }
.rec-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: clamp(48px, 6vw, 80px); }
.rec-card { display: grid; gap: 12px; align-content: start; padding: 28px; border-radius: var(--radius-lg); background: var(--stone); }
.rec-ico { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: #fff; color: var(--blue-700); margin-bottom: 8px; }
.rec-card h3 { font-size: 1.15rem; }
.rec-card p { font-size: 0.94rem; color: var(--slate); line-height: 1.6; }

/* b. open source ------------------------------------------------------------- */
.trust-open .trust-split { align-items: center; }
.scope-note { display: flex; gap: 12px; align-items: flex-start; padding: 16px 18px; border-radius: var(--radius); background: #fff; font-size: 0.92rem; color: var(--ink-3); line-height: 1.55; }
.scope-note svg { flex: none; color: var(--blue); margin-top: 2px; }
.repo-card { border-radius: var(--radius-xl); background: var(--night); color: #fff; overflow: hidden; box-shadow: var(--shadow-lg); }
.repo-head { display: flex; align-items: center; gap: 14px; padding: 22px 26px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.repo-head a { font-size: 1.05rem; color: #fff; }
.repo-head a:hover { color: var(--blue-300); }
.repo-head b { font-weight: 600; color: var(--blue-300); }
.repo-head small { display: block; font-family: var(--font-mono); font-size: 0.72rem; color: rgba(255, 255, 255, 0.55); margin-top: 3px; }
.repo-mods { list-style: none; margin: 0; padding: 8px 26px; display: grid; }
.repo-mods li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; padding: 16px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.repo-mods li:last-child { border-bottom: 0; }
.mod-ico { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: rgba(13, 128, 254, 0.18); color: var(--blue-300); }
.repo-mods strong { display: block; font-size: 0.98rem; font-weight: 600; margin-bottom: 3px; }
.repo-mods p { font-size: 0.86rem; color: rgba(255, 255, 255, 0.66); line-height: 1.5; }
.repo-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; padding: 20px 26px 24px; background: rgba(255, 255, 255, 0.03); }
.link-arrow.on-dark { color: var(--blue-300); }
.link-arrow.on-dark:hover { color: #fff; }

/* c. contracts --------------------------------------------------------------------- */
.repo-strip {
  display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; gap: 14px; align-items: center;
  padding: 18px 24px; border-radius: var(--radius-lg); background: var(--night); color: #fff;
  margin-bottom: 16px;
  transition: background-color 0.2s var(--ease);
}
.repo-strip:hover { background: var(--night-3); }
.repo-strip b { color: var(--blue-300); font-weight: 600; }
.repo-strip small { font-family: var(--font-mono); font-size: 0.74rem; color: rgba(255, 255, 255, 0.55); justify-self: end; }
.report-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.report-card { display: grid; gap: 14px; align-content: start; padding: 28px 28px 24px; border-radius: var(--radius-lg); background: var(--stone); }
.report-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.report-by { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 13px; border-radius: var(--pill); background: #fff; font-size: 0.82rem; font-weight: 600; }
.report-by svg { color: var(--blue); }
.report-id { font-family: var(--font-mono); font-size: 0.72rem; color: var(--slate); }
.report-card h3 { font-family: var(--font-serif); font-weight: 400; font-size: 1.75rem; letter-spacing: -0.02em; line-height: 1.1; }
.report-card > p { color: var(--ink-3); line-height: 1.55; }
.sev-row { list-style: none; margin: 4px 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.sev-row li { display: grid; gap: 2px; padding: 12px 10px; border-radius: 12px; background: #fff; text-align: center; }
.sev-row b { font-family: var(--font-serif); font-weight: 400; font-size: 1.7rem; line-height: 1; }
.sev-row span { font-size: 0.7rem; color: var(--slate); line-height: 1.25; }
.sev-critical b, .sev-high b { color: var(--green); }
.sev-major b { color: var(--red); }
.sev-medium b { color: var(--amber); }
.sev-minor b, .sev-low b { color: var(--slate); }
.sev-info b { color: var(--blue-700); }
.report-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; padding-top: 14px; border-top: 1px solid var(--hair); font-size: 0.8rem; color: var(--slate); }
.confirmed { margin-top: 16px; padding: 28px; border-radius: var(--radius-lg); background: var(--blue-50); }
.confirmed h3 { font-size: 1.1rem; margin-bottom: 16px; }
.confirmed ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 28px; }
.confirmed li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; font-size: 0.94rem; line-height: 1.5; color: var(--ink-3); }
.confirmed svg { color: var(--blue); }
.fine-print { display: flex; gap: 10px; align-items: flex-start; margin-top: 18px; font-size: 0.84rem; line-height: 1.55; color: var(--slate); max-width: 860px; }
.fine-print svg { flex: none; margin-top: 2px; }

/* d. exit plan (dark band) -------------------------------------------------------------- */
.trust-exit { position: relative; isolation: isolate; overflow: hidden; }
.exit-art { position: absolute; z-index: -1; right: -60px; top: -40px; width: min(520px, 50%); opacity: 0.16; pointer-events: none; mix-blend-mode: screen; }
.exit-art img { width: 100%; height: auto; }
.trust-exit .section-heading h2 em { color: var(--blue-300); }
.exit-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.exit-card {
  display: grid; gap: 14px; align-content: start;
  padding: 30px; border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1);
}
.exit-ico { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: rgba(13, 128, 254, 0.2); color: var(--blue-300); }
.exit-card h3 { font-size: 1.3rem; }
.exit-card > p { color: var(--muted); line-height: 1.6; font-size: 0.96rem; }
.wallet-label { font-family: var(--font-mono); font-size: var(--ms-5); letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); margin-top: 6px; }
.wallet-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.wallet-list li { display: grid; justify-items: center; gap: 7px; padding: 14px 6px 12px; border-radius: 14px; background: rgba(255, 255, 255, 0.06); text-align: center; }
.wallet-list img { width: 40px; height: 40px; border-radius: 11px; }
.wallet-list span { font-size: 0.74rem; color: rgba(255, 255, 255, 0.82); line-height: 1.2; }
.wallet-more { font-size: 0.82rem; color: rgba(255, 255, 255, 0.55); }
.exit-steps { display: flex; align-items: center; gap: 10px; margin: 8px 0 6px; }
.exit-steps span { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, 0.08); color: var(--blue-300); }
.exit-steps i { flex: 1; height: 1px; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.3) 0 6px, transparent 6px 12px); }
.trust-exit .link-chip { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.14); color: #fff; }
.trust-exit .link-chip:hover { background: rgba(255, 255, 255, 0.14); }

/* deeper -------------------------------------------------------------------------------------- */
.deeper-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.deeper-card {
  position: relative; display: grid; gap: 10px; align-content: start;
  min-height: 190px; padding: 26px 26px 48px; border-radius: var(--radius-lg);
  background: var(--stone);
  transition: background-color 0.25s var(--ease);
}
.deeper-card:hover { background: var(--stone-2); }
.deeper-card h3 { font-size: 1.12rem; padding-right: 20px; }
.deeper-card p { font-size: 0.9rem; color: var(--slate); line-height: 1.55; }
.deeper-card .v3-arrow { position: absolute; left: 26px; bottom: 22px; color: var(--blue-700); display: inline-flex; }

@media (max-width: 1080px) {
  .trust-split, .report-grid, .exit-grid { grid-template-columns: 1fr; }
  .rec-grid, .deeper-grid { grid-template-columns: 1fr 1fr; }
  .trust-hero-art { opacity: 0.25; width: 70%; }
  .th-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .th-stat:nth-child(3) { border-left: 0; }
  .th-stat:nth-child(n + 3) { border-top: 1px solid var(--hair); }
}
@media (max-width: 720px) {
  .rec-grid, .deeper-grid, .confirmed ul { grid-template-columns: 1fr; }
  .sev-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .wallet-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .repo-strip { grid-template-columns: auto minmax(0, 1fr) auto; }
  .repo-strip small { display: none; }
  .trust-hero-art { display: none; }
}

/* ===== 13-vault-unsub.css ===== */
/* ==========================================================================
   Security page: Ownbit Vault v2 section (tools/v3_security.py)
   ========================================================================== */
/* Lead section of the security doc's reading column: kicker + h2 + intro, then a
   v1 → v2 comparison whose v2 lane is lit in Ownbit blue, four "why" cards and a
   blue upgrade note. Sits on white like every other doc section (20-docs.css). */
.doc-section.vault-v2 {
  display: grid;
  gap: 0;
  padding: 0;
  margin-bottom: 0;
  border-radius: 0;
  background: none;
}
.doc-section.vault-v2 > .kicker { margin-bottom: 16px; }
.doc-section.vault-v2 > h2 { margin: 0 0 18px; }
.doc-section.vault-v2 > p:not(.vault-upgrade) { margin: 0; }

.vault-compare {
  margin-top: 30px;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  border-radius: 22px;
  background: var(--surface);
}
.vault-compare table { width: 100%; min-width: 620px; border-collapse: separate; border-spacing: 0; font-size: 0.92rem; }
.vault-compare th, .vault-compare td { padding: 16px 20px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); line-height: 1.5; }
.vault-compare tbody tr:last-child th, .vault-compare tbody tr:last-child td { border-bottom: 0; }
.vault-compare thead th, .vault-compare thead td { padding-top: 18px; padding-bottom: 16px; border-bottom: 0; background: var(--bg-3); }
.vault-compare thead th { font-size: 0.88rem; font-weight: 600; color: var(--fg); white-space: nowrap; }
.vault-compare thead th.v1 { color: var(--muted); }
.vault-compare thead th.v2 { color: #fff; background: var(--blue-600); }
.vault-compare thead th.v2 svg { display: inline-block; vertical-align: -3px; margin-right: 7px; }
.vault-compare tbody th { width: 22%; font-weight: 600; color: var(--fg); }
.vault-compare td.v1 { position: relative; width: 32%; padding-left: 46px; color: var(--muted); }
/* v1 = muted cross, v2 = blue check: the markers also carry the meaning when the
   table reflows into cards on phones */
.vault-compare td.v1::before, .vault-compare td.v2::before {
  content: ""; position: absolute; left: 20px; top: 18px;
  width: 16px; height: 16px; border-radius: 50%;
}
.vault-compare td.v1::before {
  background: var(--slate-3) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round'%3E%3Cpath d='M8 8l8 8M16 8l-8 8'/%3E%3C/svg%3E") center / 9px no-repeat;
}
.vault-compare td.v2 {
  position: relative;
  padding-left: 46px;
  color: var(--fg);
  background: var(--blue-50);
  border-bottom-color: var(--blue-100);
}
.vault-compare td.v2::before {
  background: var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4L18 8.5'/%3E%3C/svg%3E") center / 10px no-repeat;
}

.vault-whys { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.vault-why { display: grid; gap: 8px; align-content: start; padding: 24px 24px 26px; border-radius: 20px; background: var(--surface); transition: background-color 0.25s var(--ease); }
.vault-why:hover { background: var(--surface-hover); }
.vw-ico { width: 42px; height: 42px; margin-bottom: 10px; border-radius: 12px; display: grid; place-items: center; background: var(--surface-2); color: var(--blue-700); box-shadow: var(--shadow-xs); }
.vault-why strong { font-size: 1.02rem; font-weight: 600; letter-spacing: -0.01em; color: var(--fg); }
.doc-body .vault-why p { margin: 0; font-size: 0.92rem; line-height: 1.6; color: var(--muted); }

.doc-body .vault-upgrade {
  display: flex; gap: 14px; align-items: flex-start;
  margin: 14px 0 0;
  padding: 18px 22px;
  border-radius: 18px;
  background: var(--blue-50);
  font-size: 0.95rem; line-height: 1.65; color: var(--ink-3);
}
.vault-upgrade svg { flex: none; color: var(--blue-700); margin-top: 3px; }
.doc-section.vault-v2 > .doc-rel-row { margin-top: 22px; }
@media (max-width: 720px) {
  /* the comparison reflows into one card per property: v1 (cross) then v2 (check) */
  .vault-compare { overflow: visible; border-radius: 0; background: none; }
  .vault-compare table, .vault-compare thead, .vault-compare tbody, .vault-compare tr,
  .vault-compare th, .vault-compare td { display: block; width: auto; }
  .vault-compare table { min-width: 0; }
  .vault-compare thead tr { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
  .vault-compare thead td { display: none; }
  .vault-compare thead th, .vault-compare thead th.v2 {
    display: inline-flex; align-items: center; gap: 7px;
    height: 34px; padding: 0 14px;
    border-radius: var(--pill);
    font-size: 0.82rem;
  }
  .vault-compare thead th.v1 { background: var(--surface); color: var(--muted); }
  .vault-compare thead th.v1::before {
    content: ""; width: 14px; height: 14px; border-radius: 50%; flex: none;
    background: var(--slate-3) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round'%3E%3Cpath d='M8 8l8 8M16 8l-8 8'/%3E%3C/svg%3E") center / 8px no-repeat;
  }
  .vault-compare thead th.v2 svg { margin: 0; }
  .vault-compare tbody tr { margin-bottom: 10px; border-radius: 18px; background: var(--surface); overflow: hidden; }
  .vault-compare tbody tr:last-child { margin-bottom: 0; }
  .vault-compare tbody th { width: auto; padding: 16px 18px 8px; border: 0; font-size: 0.95rem; }
  .vault-compare td.v1 { width: auto; padding: 2px 18px 14px 44px; border: 0; }
  .vault-compare td.v2, .vault-compare tbody tr:last-child td.v2 { padding: 14px 18px 16px 44px; border: 0; }
  .vault-compare td.v1::before { left: 18px; top: 5px; }
  .vault-compare td.v2::before { left: 18px; top: 17px; }
  .vault-whys { grid-template-columns: 1fr; }
  .doc-body .vault-upgrade { padding: 16px 18px; }
}

/* ==========================================================================
   /unsubscribe/ (tools/v3_unsubscribe.py)
   ========================================================================== */
body.unsub-page { padding-top: 0; min-height: 100svh; display: flex; flex-direction: column; background: var(--stone); }
.unsub-top {
  --pill-bg: #fff; --pill-line: var(--hair); --pill-fg: var(--ink); --pill-shadow: var(--shadow-xs);
  display: flex; justify-content: space-between; align-items: center;
  width: min(1200px, calc(100% - 32px)); margin: 18px auto 0;
}
.unsub-main { flex: 1; display: grid; place-items: center; padding: 48px 16px 80px; }
.unsub-card {
  width: min(560px, 100%);
  display: grid; justify-items: center; gap: 18px; text-align: center;
  padding: clamp(32px, 6vw, 56px) clamp(22px, 5vw, 48px);
  border-radius: var(--radius-xl);
  background: #fff;
  box-shadow: var(--shadow);
}
.unsub-ico { width: 60px; height: 60px; border-radius: 18px; display: grid; place-items: center; background: var(--blue-50); color: var(--blue-700); }
.unsub-card h1 { font-size: clamp(2rem, 1.5rem + 2vw, 2.7rem); line-height: 1.08; }
.unsub-msg { font-size: 1.04rem; color: var(--slate); line-height: 1.6; overflow-wrap: anywhere; }
.unsub-msg b, .unsub-msg strong { color: var(--ink); font-weight: 600; }
.unsub-card[data-state="done"] .unsub-ico, .unsub-card[data-state="again"] .unsub-ico { background: var(--green-50); color: var(--green); }
.unsub-card[data-state="bad"] .unsub-ico, .unsub-card[data-state="missing"] .unsub-ico { background: var(--amber-50); color: var(--amber); }
.unsub-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.unsub-actions .btn[hidden] { display: none; }
.unsub-card.is-busy .btn { opacity: 0.6; pointer-events: none; }
.unsub-note { font-size: 0.9rem; }
.unsub-note:empty { display: none; }
.unsub-note.is-ok { color: var(--teal); }
.unsub-note.is-error { color: var(--red); }
.unsub-home { margin-top: 6px; }

/* ===== 14-widgets.css ===== */
/* ==========================================================================
   14 — Interactive demos, iPhone mockups and "In the app" bands
   Markup: tools/v3_widgets.py · behaviour: initDemos() in assets/js/app.js
   ========================================================================== */

@property --p { syntax: "<number>"; inherits: true; initial-value: 0; }

/* ---- demo panel: a crisp white card that sits on a blurred photo ---------- */
.page-hero.v3-photo-hero .page-visual-card.is-demo {
  padding: 0; overflow: visible;
  background: none; border: 0; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.demo {
  --fg: var(--ink); --muted: var(--slate); --line: var(--hair); --line-strong: var(--hair-2);
  --accent-ink: var(--blue-700); --focus: var(--blue);
  position: relative;
  display: grid;
  gap: 18px;
  width: 100%;
  max-width: 520px;
  margin-left: auto;
  padding: clamp(18px, 2vw, 24px);
  border-radius: 26px;
  background: #fff;
  color: var(--ink);
  color-scheme: light;
  text-align: start;
  box-shadow: 0 1px 1px rgba(3, 10, 24, 0.06), 0 18px 40px -14px rgba(3, 10, 24, 0.45), 0 50px 90px -40px rgba(3, 10, 24, 0.55);
}
.demo :focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
:where(.demo) button { font: inherit; color: inherit; -webkit-tap-highlight-color: transparent; }

.demo-head { display: grid; gap: 14px; }
.demo-title { display: grid; gap: 5px; min-width: 0; }
.demo-kicker {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 0.68rem; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--blue-700);
}
.demo-kicker i { width: 7px; height: 7px; border-radius: 50%; background: var(--blue); flex: none; }
@media (prefers-reduced-motion: no-preference) {
  .demo-kicker i { animation: demo-pulse 2.4s ease-out infinite; }
}
@keyframes demo-pulse { 0% { box-shadow: 0 0 0 0 rgba(13, 128, 254, 0.45); } 70%, 100% { box-shadow: 0 0 0 8px rgba(13, 128, 254, 0); } }
.demo-title strong { font-size: 1.12rem; font-weight: 600; letter-spacing: -0.014em; line-height: 1.3; }

.demo-tabs {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
  gap: 2px; padding: 3px;
  border-radius: 14px;
  background: var(--stone);
}
.demo-tabs button {
  min-height: 36px; padding: 6px 10px;
  border: 0; border-radius: 11px;
  background: transparent;
  font-size: 0.82rem; font-weight: 500; line-height: 1.2;
  color: var(--slate);
  cursor: pointer;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.demo-tabs button:hover { color: var(--ink); }
.demo-tabs button[aria-pressed="true"] { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(14, 17, 22, 0.08), 0 3px 10px rgba(14, 17, 22, 0.06); }
.demo-tabs button b { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 0.72rem; font-weight: 500; color: var(--blue-700); }
.demo-cw .demo-tabs b {
  width: 18px; height: 18px; justify-content: center; margin-inline-end: 6px;
  border-radius: 50%; background: var(--stone-2); color: var(--slate);
}
.demo-cw .demo-tabs button[aria-pressed="true"] b { background: var(--blue); color: #fff; }
.demo-fam .demo-tabs button b { display: block; margin-top: 2px; }

.demo-foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px;
  padding-top: 14px;
  border-top: 1px solid var(--hair);
}
.demo-status {
  flex: 1 1 220px; min-width: 0; margin: 0;
  min-height: 2.9em;
  font-size: 0.86rem; line-height: 1.45;
  color: var(--slate);
  transition: color 0.25s var(--ease);
}
.demo-status.is-done { color: #0e7a4a; }
.demo-status.is-blocked { color: #b2332d; }
.demo-reset, .demo-next {
  display: inline-flex; align-items: center; gap: 7px; flex: none;
  height: 36px; padding: 0 14px;
  border-radius: var(--pill);
  border: 1px solid var(--hair-2);
  background: #fff;
  font-size: 0.82rem; font-weight: 500; white-space: nowrap;
  color: var(--ink-3);
  cursor: pointer;
  transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.demo-reset:hover { background: var(--stone); }
.demo-next { background: var(--ink); border-color: var(--ink); color: #fff; }
.demo-next:hover { background: var(--ink-3); }
.demo-next[disabled] { opacity: 0.4; cursor: default; }

/* ---- MultiSig: keys around a vault -------------------------------------------------------- */
.ms-stage { display: grid; justify-items: center; padding-top: 4px; }
.ms-vault {
  position: relative;
  width: 116px; height: 116px;
  display: grid; place-items: center; align-content: center; gap: 4px;
  border-radius: 50%;
  background: var(--stone);
  transition: background-color 0.35s var(--ease);
}
.ms-ring {
  position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(var(--ring, var(--blue)) calc(var(--p) * 1turn), rgba(14, 17, 22, 0.08) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5.5px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5.5px));
  transition: --p 0.55s var(--ease-out);
}
.ms-lock { width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--ink); box-shadow: var(--shadow-sm); transition: background-color 0.3s, color 0.3s; }
.ms-lock svg + svg, .demo-ms.is-done .ms-lock svg:first-child { display: none; }
.demo-ms.is-done .ms-lock svg + svg { display: block; }
.ms-count { font-family: var(--font-mono); font-size: 0.74rem; font-weight: 500; color: var(--slate); }
.demo-ms.is-done .ms-vault { background: var(--green-50); --ring: var(--green); }
.demo-ms.is-done .ms-lock { background: var(--green); color: #fff; }
.demo-ms.is-done .ms-count { color: #0e7a4a; }
.ms-vault::after { content: ""; position: absolute; top: 100%; left: 50%; width: 2px; height: 16px; margin-left: -1px; background: var(--hair-2); }

.demo-ms .ms-keys {   /* scoped: the homepage MultiSig cards have their own .ms-keys dots */
  --k: 3;
  position: relative;
  display: grid; grid-template-columns: repeat(var(--k), minmax(0, 1fr)); gap: 8px;
  width: 100%;
  margin-top: 32px;
}
.demo-ms[data-k="5"] .ms-keys { --k: 5; }
.demo-ms .ms-keys::before {
  content: ""; position: absolute; top: -16px; height: 2px;
  left: calc(50% / var(--k)); right: calc(50% / var(--k));
  background: var(--hair-2);
}
.ms-key {
  position: relative;
  display: grid; justify-items: center; align-content: start; gap: 6px;
  padding: 14px 4px 12px;
  border: 1px solid var(--hair);
  border-radius: 16px;
  background: #fff;
  cursor: pointer;
  transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease), transform 0.25s var(--ease-out), opacity 0.3s var(--ease);
}
.ms-key::before { content: ""; position: absolute; bottom: 100%; left: 50%; width: 2px; height: 17px; margin-left: -1px; background: var(--hair-2); transition: background-color 0.3s; }
.ms-key[data-extra] { display: none; }
.demo-ms[data-k="5"] .ms-key[data-extra] { display: grid; }
.ms-key:hover { border-color: var(--blue-200); transform: translateY(-2px); }
.ms-key-ico {
  position: relative;
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--stone); color: var(--ink-3);
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.ms-tick {
  position: absolute; right: -3px; bottom: -3px;
  width: 19px; height: 19px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--green); color: #fff;
  box-shadow: 0 0 0 2px #fff;
  transform: scale(0);
  transition: transform 0.35s var(--ease-out);
}
.ms-key-name { font-size: 0.8rem; font-weight: 600; line-height: 1.25; text-align: center; overflow-wrap: anywhere; }
.ms-key-state { font-size: 0.7rem; line-height: 1.25; color: var(--slate); text-align: center; }
.ms-key[aria-pressed="true"] { border-color: var(--blue-200); background: var(--blue-50); }
.ms-key[aria-pressed="true"]::before { background: var(--blue); }
.ms-key[aria-pressed="true"] .ms-key-ico { background: var(--blue); color: #fff; box-shadow: 0 6px 16px rgba(13, 128, 254, 0.3); }
.ms-key[aria-pressed="true"] .ms-tick { transform: scale(1); }
.ms-key[aria-pressed="true"] .ms-key-state { color: var(--blue-700); font-weight: 500; }
.ms-key.is-idle { opacity: 0.45; }
.ms-key.is-idle:hover { transform: none; border-color: var(--hair); }

/* ---- cold wallet: two phones and a QR round trip --------------------------------------------- */
.cw-stage { display: grid; grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1fr); align-items: end; }
.cw-dev { margin: 0; display: grid; justify-items: center; gap: 10px; min-width: 0; }
.cw-dev figcaption {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.72rem; font-weight: 500; color: var(--slate);
  white-space: nowrap;
}
.iphone.is-mini { width: min(100%, 152px); }
.iphone.is-mini .iphone-screen { font-size: 6.2cqw; }
/* white phones: they sit on a white panel, where black ones looked heavy */
.demo-cw .iphone-body {
  background: linear-gradient(150deg, #fdfdfe 0%, #dfe2e7 24%, #ccd0d6 58%, #f1f2f4 100%);
  box-shadow: inset 0 0 0 0.45cqw #fbfcfd, inset 0 0 0 1.3cqw #bcc1c9, 0 2px 4px rgba(3, 10, 24, 0.08), 0 24px 40px -24px rgba(3, 10, 24, 0.32);
}
.demo-cw .iphone-screen { background: #fff; color: var(--ink); box-shadow: 0 0 0 1.1cqw #101215; }
.cw-scr {
  position: absolute; inset: 0;
  display: none; flex-direction: column; align-items: center; justify-content: center; gap: 0.7em;
  padding: 2.6em 1em 1.6em;
  text-align: center;
}
.cw-scr.is-on { display: flex; }
@media (prefers-reduced-motion: no-preference) {
  .cw-scr.is-on { animation: cw-in 0.45s var(--ease-out) both; }
}
@keyframes cw-in { from { opacity: 0; transform: translateY(6px); } }
.cw-amt { display: grid; gap: 0.1em; }
.cw-amt small { font-size: 0.72em; color: var(--slate); }
.cw-amt strong { font-size: 1.3em; font-weight: 600; letter-spacing: -0.01em; }
.cw-amt code { font-family: var(--font-mono); font-size: 0.66em; color: var(--slate); }
.cw-qr { width: 66%; height: auto; border-radius: 0.4em; box-shadow: 0 0 0 0.25em #a4e04a; }
.cw-cap { font-size: 0.7em; line-height: 1.35; color: var(--ink-3); max-width: 13em; }
.cw-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.45em;
  height: 2.4em; padding: 0 1.2em; margin-top: 0.2em;
  border: 0; border-radius: 0.7em;
  font-size: 0.82em; font-weight: 600;
  cursor: pointer;
}
.cw-btn.is-green { background: #a4e04a; color: #11160b; }
.cw-btn.is-blue { background: #1f86ff; color: #fff; }
.cw-btn:hover { filter: brightness(1.06); }
@media (prefers-reduced-motion: no-preference) {
  .cw-btn { animation: cw-nudge 2.4s ease-in-out 1s infinite; }
}
@keyframes cw-nudge { 0%, 100% { box-shadow: 0 0 0 0 rgba(164, 224, 74, 0); } 50% { box-shadow: 0 0 0 0.35em rgba(164, 224, 74, 0.25); } }
.cw-btn.is-blue { animation-name: cw-nudge-b; }
@keyframes cw-nudge-b { 0%, 100% { box-shadow: 0 0 0 0 rgba(31, 134, 255, 0); } 50% { box-shadow: 0 0 0 0.35em rgba(31, 134, 255, 0.3); } }
.cw-frame { width: 3.4em; height: 3.4em; display: grid; place-items: center; color: #5c9a17; }
.cw-frame svg { width: 100%; height: 100%; }
.cw-spin { width: 2.2em; height: 2.2em; border-radius: 50%; border: 0.22em solid rgba(14, 17, 22, 0.1); border-top-color: #1f86ff; animation: cw-spin 0.9s linear infinite; }
@keyframes cw-spin { to { transform: rotate(1turn); } }
.cw-ok { width: 2.6em; height: 2.6em; border-radius: 50%; display: grid; place-items: center; background: #19b06a; color: #fff; }
.cw-ok.is-key { background: #eef8de; color: #4f8a12; }
.cw-gap { position: relative; align-self: center; height: 2px; margin-bottom: 40%; background: repeating-linear-gradient(90deg, var(--hair-2) 0 5px, transparent 5px 9px); }
.cw-fly {
  position: absolute; top: 50%; left: 50%;
  width: 30px; height: 30px; margin: -15px 0 0 -15px;
  display: grid; place-items: center;
  border-radius: 9px; background: var(--ink); color: #fff;
  box-shadow: var(--shadow);
  opacity: 0;
}
.demo-cw.fly-r .cw-fly { animation: cw-fly-r 0.9s var(--ease) both; }
.demo-cw.fly-l .cw-fly { animation: cw-fly-l 0.9s var(--ease) both; }
@keyframes cw-fly-r { 0% { opacity: 0; transform: translateX(-60px) scale(0.7); } 20%, 80% { opacity: 1; } 100% { opacity: 0; transform: translateX(60px) scale(0.7); } }
@keyframes cw-fly-l { 0% { opacity: 0; transform: translateX(60px) scale(0.7); } 20%, 80% { opacity: 1; } 100% { opacity: 0; transform: translateX(-60px) scale(0.7); } }

/* ---- enterprise: a payout request under policy ------------------------------------------------- */
.ent-req {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px;
  padding: 14px;
  border-radius: 16px;
  background: var(--stone);
}
.ent-ico { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--ink); color: #fff; }
.ent-amt { display: grid; gap: 2px; min-width: 0; }
.ent-amt strong { font-size: 1.14rem; font-weight: 600; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.ent-amt code { font-family: var(--font-mono); font-size: 0.74rem; color: var(--slate); }
.ent-wl { height: 28px; gap: 6px; white-space: nowrap; transition: background-color 0.25s, color 0.25s; }
.demo-ent[data-wl="new"] .ent-wl { background: #fbeceb; color: #b2332d; }
.ent-list { list-style: none; margin: 0; padding: 0; display: grid; }
.ent-list li {
  display: grid; grid-template-columns: 32px minmax(0, 1fr) auto auto; align-items: center; gap: 10px;
  padding: 10px 0;
  border-top: 1px solid var(--hair);
}
.ent-list li:first-child { border-top: 0; }
.ent-list .who { flex-wrap: wrap; row-gap: 0; }
.ent-list li.is-approved .avatar { background: var(--blue); color: #fff; }
.ent-w { font-family: var(--font-mono); font-size: 0.7rem; color: var(--slate); background: var(--stone); padding: 3px 8px; border-radius: var(--pill); white-space: nowrap; }
.ent-btn {
  height: 32px; min-width: 88px; padding: 0 14px;
  border: 1px solid var(--blue-200); border-radius: var(--pill);
  background: #fff;
  font-size: 0.78rem; font-weight: 600;
  color: var(--blue-700);
  cursor: pointer;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease), opacity 0.2s;
}
.ent-btn:hover { background: var(--blue-50); }
.ent-btn[aria-pressed="true"] { background: var(--green-50); border-color: transparent; color: #0e7a4a; }
.ent-btn:disabled { opacity: 0.4; cursor: not-allowed; background: #fff; }
.ent-meter { display: flex; gap: 4px; }
.ent-meter i { flex: 1; height: 6px; border-radius: 6px; background: rgba(14, 17, 22, 0.08); transition: background-color 0.35s var(--ease); }
.ent-meter i.on { background: var(--blue); }
.demo-ent.is-done .ent-meter i { background: var(--green); }

/* ---- inheritance: the 416-day clock ------------------------------------------------------------- */
.inh-stage { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px; }
.inh-p { display: grid; justify-items: center; gap: 6px; text-align: center; min-width: 0; }
.inh-av { width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; background: var(--blue-50); color: var(--blue-700); }
.is-heir .inh-av { background: var(--stone); color: var(--ink-3); }
.inh-p b { font-size: 0.92rem; font-weight: 600; }
.inh-p small { display: inline-flex; align-items: center; gap: 4px; font-size: 0.74rem; color: var(--slate); }
.inh-p .v3-chip { height: auto; min-height: 24px; padding: 3px 10px; font-size: 0.7rem; line-height: 1.25; text-align: center; white-space: normal; }
.demo-inh.is-done .inh-heir-state { background: var(--green-50); color: #0e7a4a; }
.demo-inh.is-done .is-heir .inh-av { background: var(--green-50); color: #0e7a4a; }
.demo-inh.is-done .is-you { opacity: 0.5; }
.inh-vault { position: relative; width: 136px; height: 136px; display: grid; place-items: center; align-content: center; gap: 6px; }
.inh-ring { position: absolute; inset: 0; transform: rotate(-90deg); }
.inh-ring circle { fill: none; stroke: rgba(14, 17, 22, 0.08); stroke-width: 6; }
.inh-ring .inh-arc { stroke: var(--blue); stroke-linecap: round; stroke-dasharray: 0 999; transition: stroke 0.3s; }
.demo-inh.is-done .inh-arc { stroke: var(--green); }
.inh-lock { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--stone); color: var(--ink); transition: background-color 0.3s, color 0.3s; }
.inh-lock svg + svg, .demo-inh.is-done .inh-lock svg:first-child { display: none; }
.demo-inh.is-done .inh-lock svg + svg { display: block; }
.demo-inh.is-done .inh-lock { background: var(--green); color: #fff; }
.inh-day { display: flex; align-items: baseline; gap: 4px; font-family: var(--font-mono); font-weight: 500; }
.inh-day output { font-size: 1.15rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.inh-day small { font-size: 0.72rem; color: var(--slate); }
.inh-clock { display: grid; gap: 6px; }
.inh-clock label { font-size: 0.78rem; font-weight: 500; color: var(--slate); }
.inh-clock input[type="range"] { --pct: 0%; width: 100%; height: 26px; margin: 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; }
.inh-clock input[type="range"]::-webkit-slider-runnable-track { height: 6px; border-radius: 6px; background: linear-gradient(90deg, var(--blue) var(--pct), rgba(14, 17, 22, 0.1) var(--pct)); }
.inh-clock input[type="range"]::-moz-range-track { height: 6px; border-radius: 6px; background: linear-gradient(90deg, var(--blue) var(--pct), rgba(14, 17, 22, 0.1) var(--pct)); }
.inh-clock input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: -8px; border-radius: 50%; background: #fff; border: 2px solid var(--blue); box-shadow: 0 2px 8px rgba(14, 17, 22, 0.2); }
.inh-clock input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 2px solid var(--blue); box-shadow: 0 2px 8px rgba(14, 17, 22, 0.2); }
.demo-inh.is-done .inh-clock input[type="range"] { --blue: var(--green); }

/* ---- family: who is unavailable ----------------------------------------------------------------- */
.fam-stage { display: grid; gap: 12px; }
.fam-people { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 8px; }
.fam-p {
  display: grid; justify-items: center; align-content: start; gap: 5px;
  padding: 14px 4px 10px;
  border: 1px solid var(--hair);
  border-radius: 16px;
  background: #fff;
  cursor: pointer;
  transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease), transform 0.25s var(--ease-out);
}
.fam-p[hidden] { display: none; }
.fam-p:hover { border-color: var(--blue-200); transform: translateY(-2px); }
.fam-av { position: relative; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--blue-50); color: var(--blue-700); transition: background-color 0.25s, color 0.25s; }
.fam-x { position: absolute; right: -3px; bottom: -3px; width: 19px; height: 19px; border-radius: 50%; display: grid; place-items: center; background: var(--red); color: #fff; box-shadow: 0 0 0 2px #fff; transform: scale(0); transition: transform 0.3s var(--ease-out); }
.fam-p b { font-size: 0.84rem; font-weight: 600; line-height: 1.2; text-align: center; }
.fam-keys { display: flex; gap: 2px; height: 14px; color: var(--blue); }
.fam-keys svg { width: 14px; height: 14px; }
.fam-p small { font-size: 0.68rem; color: #b2332d; visibility: hidden; }
.fam-p[aria-pressed="true"] { background: var(--stone); border-color: transparent; }
.fam-p[aria-pressed="true"] .fam-av { background: var(--stone-2); color: var(--slate-2); }
.fam-p[aria-pressed="true"] .fam-x { transform: scale(1); }
.fam-p[aria-pressed="true"] .fam-keys { color: var(--slate-2); }
.fam-p[aria-pressed="true"] small { visibility: visible; }
.fam-vault { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 14px; background: var(--stone); font-size: 0.82rem; color: var(--ink-3); transition: background-color 0.3s; }
.fam-lock { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--blue); color: #fff; flex: none; transition: background-color 0.3s; }
.fam-need { font-family: var(--font-mono); font-size: 0.76rem; }
.demo-fam[data-out="now"] .fam-vault { background: var(--green-50); }
.demo-fam[data-out="now"] .fam-lock { background: var(--green); }
.demo-fam[data-out="wait"] .fam-vault { background: var(--amber-50); }
.demo-fam[data-out="wait"] .fam-lock { background: var(--amber); }
.demo-fam[data-out="none"] .fam-vault { background: #fbeceb; }
.demo-fam[data-out="none"] .fam-lock { background: var(--red); }
.demo-fam[data-out="wait"] .demo-status { color: #8a5a0c; }
.demo-fam[data-out="none"] .demo-status { color: #b2332d; }
.demo-fam[data-out="now"] .demo-status { color: #0e7a4a; }

/* ---- Ownbit Vault v2: the unlock path ------------------------------------------------------------ */
.sec-flow { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sec-row {
  position: relative;
  display: grid; grid-template-columns: 38px minmax(0, 1fr) 26px; align-items: center; gap: 12px;
  padding: 10px 12px;
  border-radius: 14px;
  background: var(--stone);
  opacity: 0.4;
  transition: opacity 0.35s var(--ease), background-color 0.35s var(--ease), transform 0.35s var(--ease-out);
}
.sec-row.is-on { opacity: 1; }
.sec-row:not(:last-child)::after { content: ""; position: absolute; left: 30px; top: 100%; width: 2px; height: 8px; background: var(--hair-2); }
.sec-ico { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: #fff; color: var(--ink-3); }
.sec-txt { min-width: 0; }
.sec-txt b { display: block; font-size: 0.88rem; font-weight: 600; line-height: 1.3; }
.sec-txt small { display: block; font-size: 0.76rem; line-height: 1.35; color: var(--slate); }
.sec-mark { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--stone-2); color: #fff; transform: scale(0.6); opacity: 0; transition: transform 0.35s var(--ease-out), opacity 0.25s; }
.sec-row.is-on .sec-mark { transform: none; opacity: 1; }
.sec-mark > * { display: none; }
.sec-row[data-v="ok"] .sec-mark { background: var(--green); }
.sec-row[data-v="ok"] .sec-mark svg:first-child { display: block; }
.sec-row[data-v="no"] .sec-mark { background: var(--red); }
.sec-row[data-v="no"] .sec-mark svg + svg { display: block; }
.sec-row[data-v="skip"] .sec-mark .sec-dash { display: block; width: 10px; height: 2px; border-radius: 2px; background: var(--slate); }
.sec-row[data-v="warn"] .sec-mark { background: var(--amber-50); }
.sec-row[data-v="warn"] .sec-mark .sec-dots { display: block; width: 4px; height: 4px; border-radius: 50%; background: var(--amber); box-shadow: -6px 0 0 var(--amber), 6px 0 0 var(--amber); }
.sec-row.is-result.is-on[data-v="ok"] { background: var(--green-50); }
.sec-row.is-result.is-on[data-v="no"] { background: #fbeceb; }
.sec-row.is-result[data-v="ok"] .sec-ico { color: #0e7a4a; }
.sec-row.is-result[data-v="no"] .sec-ico { color: #b2332d; }

/* ---- homepage hero: a deck of vaults ---------------------------------------------------------------- */
.hero-deck { position: relative; display: grid; padding-top: 84px; }
.deck-card {
  grid-area: 1 / 1;
  position: relative;
  padding: 18px 20px 16px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.96);
  color: var(--ink);
  box-shadow: 0 1px 1px rgba(3, 10, 24, 0.06), 0 22px 50px -18px rgba(3, 10, 24, 0.5);
  transform-origin: 50% 0;
  transition: transform 0.55s var(--ease-out), opacity 0.4s var(--ease), background-color 0.3s;
}
/* every card fills the same cell, so the deck keeps one height while it rotates;
   the last block of each card sits on its bottom edge */
.deck-card { align-self: stretch; display: flex; flex-direction: column; }
.deck-card > .progress, .deck-card > .dk-keys { margin-top: auto; }
.deck-card.is-tx > .progress { margin-top: 12px; }
.deck-card.is-tx > .dk-sign { margin-top: auto; }
.deck-card[data-pos="0"] { z-index: 3; background: #fff; }
.deck-card[data-pos="1"] { z-index: 2; transform: translateY(-42px) scale(0.95); background: rgba(255, 255, 255, 0.7); cursor: pointer; }
.deck-card[data-pos="2"] { z-index: 1; transform: translateY(-82px) scale(0.9); background: rgba(255, 255, 255, 0.5); cursor: pointer; }
.deck-card[data-pos="1"]:hover { transform: translateY(-48px) scale(0.95); background: rgba(255, 255, 255, 0.85); }
.deck-card[data-pos="2"]:hover { transform: translateY(-88px) scale(0.9); background: rgba(255, 255, 255, 0.7); }
.deck-card[data-pos]:not([data-pos="0"]) > :not(.deck-pick) { visibility: hidden; }
.deck-pick {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; margin: 0 0 12px; padding: 0;
  border: 0; background: none; text-align: start;
  font: inherit; color: inherit;
  cursor: pointer;
}
.deck-card[data-pos="0"] .deck-pick { cursor: default; }
.deck-pick strong { font-size: 1.05rem; font-weight: 600; letter-spacing: -0.012em; }
.deck-pick .tag {
  height: 26px; padding: 0 11px;
  background: var(--blue-50); border-color: var(--blue-100); color: var(--blue-700);
  font-family: var(--font-mono); font-size: 0.74rem; font-weight: 500;
}
.deck-pick .deck-more { display: none; margin-inline-start: auto; color: var(--slate); }
.deck-card:not([data-pos="0"]) .deck-pick .deck-more { display: block; }
.deck-card:not([data-pos="0"]) .deck-pick { margin: -5px 0 0; }
.deck-card .signers li { grid-template-columns: 30px minmax(0, 1fr) auto; }
.deck-card .state { border: 0; font: inherit; font-size: 0.74rem; font-weight: 500; cursor: default; }
.deck-card button.state { cursor: pointer; background: #fff; color: var(--blue-700); box-shadow: inset 0 0 0 1px var(--blue-200); }
.deck-card button.state:hover { background: var(--blue-50); }
.deck-card .is-approved .state { background: var(--green-50); color: var(--green); box-shadow: none; }
.deck-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 9px; font-size: 0.78rem; color: var(--slate); }
.deck-foot .v3-chip { height: 24px; font-size: 0.72rem; padding: 0 10px; opacity: 0; transform: translateY(4px); transition: opacity 0.3s, transform 0.3s var(--ease-out); }
.deck-card.is-done .deck-foot .v3-chip { opacity: 1; transform: none; }
.deck-card.is-done .progress i.on::after { background: var(--green); }
/* Team treasury: one payment, your signature makes it three */
.dk-pay { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; align-items: center; padding: 12px 14px; border-radius: 14px; background: var(--stone); }
.dk-ico { grid-row: span 3; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: #fff; }
.dk-k { font-size: 0.72rem; color: var(--slate); }
.dk-pay strong { font-size: 1.45rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; font-variant-numeric: tabular-nums; }
.dk-pay strong small { font-size: 0.58em; font-weight: 500; color: var(--slate); letter-spacing: 0; }
.dk-fiat { font-size: 0.74rem; color: var(--slate); }
.dk-rows { margin: 8px 0 0; display: grid; font-size: 0.8rem; }
.dk-rows div { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; padding: 7px 2px; border-top: 1px solid rgba(14, 17, 22, 0.07); }
.dk-rows div:first-child { border-top: 0; }
.dk-rows dt { color: var(--slate); }
.dk-rows dd { margin: 0; text-align: end; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dk-rows code { font-family: var(--font-mono); font-size: 0.92em; }
.dk-sign { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 6px; padding-top: 10px; border-top: 1px solid rgba(14, 17, 22, 0.07); }
.deck-card .signers.is-row { display: flex; padding-inline-end: 6px; }
.deck-card .signers.is-row li { display: block; position: relative; padding: 0; border: 0; margin-inline-end: -6px; }
.signers.is-row .avatar { box-shadow: 0 0 0 2.5px #fff; }
.signers.is-row li > i { position: absolute; right: -3px; bottom: -3px; width: 15px; height: 15px; border-radius: 50%; display: grid; place-items: center; background: var(--green); color: #fff; box-shadow: 0 0 0 2px #fff; transform: scale(0); transition: transform 0.3s var(--ease-out); }
.signers.is-row li > i svg { width: 9px; height: 9px; }
.signers.is-row li.is-approved > i { transform: scale(1); }
.deck-sign {
  display: inline-flex; align-items: center; gap: 7px;
  height: 36px; padding: 0 16px;
  border: 0; border-radius: var(--pill);
  background: #a4e04a; color: #11160b;
  font: inherit; font-size: 0.84rem; font-weight: 600;
  cursor: pointer;
}
.deck-sign:hover { filter: brightness(1.05); }
.dk-sign .state { background: var(--green-50); color: var(--green); }

/* Family vault: holdings as a donut, the legend picks a slice */
.dk-hold { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 20px; align-items: center; padding: 6px 0 2px; }
.dk-donut { position: relative; width: 132px; aspect-ratio: 1; }
.dk-donut svg { display: block; width: 100%; height: 100%; }
.dk-donut circle { fill: none; stroke-width: 5; }
.dk-track { stroke: var(--stone-2); }
.dk-seg { transition: stroke-width 0.3s var(--ease-out), opacity 0.3s var(--ease); }
.is-donut[data-seg] .dk-seg { opacity: 0.3; }
.is-donut[data-seg="0"] .dk-seg[data-i="0"], .is-donut[data-seg="1"] .dk-seg[data-i="1"], .is-donut[data-seg="2"] .dk-seg[data-i="2"] { opacity: 1; stroke-width: 6.6; }
@media (prefers-reduced-motion: no-preference) {
  .deck-card[data-pos="0"] .dk-seg { animation: dk-draw 1s var(--ease-out) both; }
  .deck-card[data-pos="0"] .dk-seg[data-i="1"] { animation-delay: 0.12s; }
  .deck-card[data-pos="0"] .dk-seg[data-i="2"] { animation-delay: 0.24s; }
}
@keyframes dk-draw { from { stroke-dasharray: 0 100; } }
.dk-center { position: absolute; inset: 0; display: grid; place-content: center; gap: 1px; text-align: center; }
.dk-center small { font-size: 0.66rem; color: var(--slate); }
.dk-center strong { font-size: 1rem; font-weight: 600; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.dk-legend { display: grid; gap: 3px; min-width: 0; }
.dk-legend .dk-k { margin: 0 0 3px 10px; }
.dk-legend button {
  display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; align-items: center; gap: 10px;
  padding: 8px 10px; border: 0; border-radius: 10px;
  background: transparent; font: inherit; font-size: 0.86rem; color: var(--ink); text-align: start;
  cursor: pointer;
  transition: background-color 0.2s var(--ease);
}
.dk-legend button:hover, .dk-legend button[aria-pressed="true"] { background: var(--stone); }
.dk-legend i { width: 10px; height: 10px; border-radius: 3px; }
.dk-legend span { font-weight: 500; }
.dk-legend b { font-weight: 600; font-variant-numeric: tabular-nums; }
.dk-keys { display: flex; align-items: center; margin-top: 10px; padding-top: 12px; border-top: 1px solid rgba(14, 17, 22, 0.07); }
.dk-keys .avatar { margin-inline-end: -6px; background: var(--blue); color: #fff; box-shadow: 0 0 0 2.5px #fff; }
.dk-keys p { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 0 18px; font-size: 0.78rem; line-height: 1.35; color: var(--slate); }
.dk-keys p svg { flex: none; color: var(--blue); }

.hero-cards .hc-chip, .hero-cards .hc-chain { color: var(--ink); transition: transform 0.25s var(--ease-out), background-color 0.2s; }
.hero-cards a.hc-chip:hover, .hero-cards a.hc-chain:hover { transform: translateY(-2px); }

/* ---- iPhone frame ------------------------------------------------------------------------------------------ */
.iphone { container-type: inline-size; width: 100%; }
.iphone-body {
  position: relative;
  aspect-ratio: 71.6 / 147.6;
  padding: 3.1cqw;
  border-radius: 16cqw;
  background: linear-gradient(150deg, #474b52 0%, #17191d 22%, #0d0e10 60%, #2a2d32 100%);
  box-shadow:
    inset 0 0 0 0.45cqw #5a5e66,
    inset 0 0 0 1.2cqw #0b0c0e,
    0 2px 4px rgba(3, 10, 24, 0.15),
    0 34px 60px -26px rgba(3, 10, 24, 0.55);
}
.iphone-screen {
  position: relative;
  height: 100%;
  overflow: hidden;
  border-radius: 13cqw;
  background: #111317;
  color: #e9edf3;
  font-family: var(--font-sans);
  font-size: 4.25cqw;
  line-height: 1.3;
  text-align: start;
  isolation: isolate;
}
.iphone-screen::after {
  content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none; border-radius: inherit;
  background: linear-gradient(125deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 32%);
}
.ios-island { position: absolute; z-index: 4; top: 0.7em; left: 50%; width: 7.8em; height: 2.2em; margin-left: -3.9em; border-radius: 2em; background: #000; }

/* a real screenshot (1206 x 2622, iPhone 17 Pro) in a silver frame: metal edge, black bezel, island */
.iphone.is-shot { --frame-edge: inset 0 0 0 0.4cqw #fbfcfd, inset 0 0 0 1.1cqw #b7bcc4; }
.iphone.is-shot .iphone-body {
  aspect-ratio: 71.9 / 150;
  padding: 3.4cqw;
  border-radius: 15.5cqw;
  background: linear-gradient(150deg, #fdfdfe 0%, #dfe2e7 24%, #c9cdd4 58%, #f1f2f4 100%);
  box-shadow: var(--frame-edge), 0 2px 4px rgba(3, 10, 24, 0.1), 0 34px 60px -26px rgba(3, 10, 24, 0.42);
}
.iphone.is-shot .iphone-screen { border-radius: 12.4cqw; background: #f2f3f5; box-shadow: 0 0 0 1.2cqw #0c0d10; }
.iphone.is-shot .iphone-screen img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.iphone.is-shot .ios-island { top: 2.55cqw; width: 29cqw; height: 8.6cqw; margin-left: -14.5cqw; border-radius: 5cqw; }
/* ---- two phones ------------------------------------------------------------------------------------- */
.phone-duo { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); width: min(100%, 540px); margin-inline: auto; }
.phone-duo figure { margin: 0; grid-row: 1; display: grid; gap: 12px; justify-items: center; }
.duo-back { grid-column: 1 / span 7; }
.duo-front { grid-column: 6 / span 7; margin-top: 16% !important; z-index: 1; }
.phone-duo figcaption {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border-radius: var(--pill);
  background: #fff; box-shadow: var(--shadow-sm);
  font-size: 0.74rem; font-weight: 500; color: var(--ink-3); white-space: nowrap;
}
.duo-back .iphone-body { box-shadow: var(--frame-edge), 0 30px 50px -30px rgba(3, 10, 24, 0.4); }
.duo-front .iphone-body { box-shadow: var(--frame-edge), -18px 30px 60px -20px rgba(3, 10, 24, 0.42); }

/* ---- "In the app" band --------------------------------------------------------------------------------- */
.v3-appband { overflow: hidden; overflow: clip; }
.appband-grid { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.appband-copy { display: grid; gap: 18px; justify-items: start; }
.appband-copy h2 { font-size: var(--fs-h2); }
.appband-copy p { font-size: var(--fs-lede); line-height: 1.6; color: var(--muted); max-width: 480px; }
.appband-copy .btn { margin-top: 8px; }
.appband-visual { position: relative; padding: 8px 0 0; }
.appband-visual::before {
  content: ""; position: absolute; z-index: 0;
  left: 8%; right: 8%; top: 10%; bottom: 6%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(13, 128, 254, 0.16), rgba(13, 128, 254, 0));
  filter: blur(10px);
}
.appband-visual .phone-duo { z-index: 1; }

/* ---- homepage placements ---------------------------------------------------------------------------- */
.dl-duo { margin-bottom: clamp(32px, 4vw, 56px); }
.v3-download .dl-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); gap: clamp(32px, 5vw, 80px); align-items: end; }
.v3-download .dl-head .section-heading { margin-bottom: clamp(24px, 3vw, 48px); align-self: center; }
.v3-download .dl-head .phone-duo { width: min(100%, 460px); margin-right: 0; }
.cold-phone { position: absolute; z-index: 2; right: 10%; top: 12%; width: min(38%, 230px); filter: drop-shadow(0 30px 40px rgba(3, 10, 24, 0.35)); }
.cold-phone .iphone-body { box-shadow: var(--frame-edge); }

/* ---- responsive --------------------------------------------------------------------------------------- */
@media (max-width: 960px) {
  .demo { margin-left: 0; max-width: 560px; }
  .appband-grid { grid-template-columns: minmax(0, 1fr); }
  .v3-download .dl-head { grid-template-columns: minmax(0, 1fr); }
  .v3-download .dl-head .phone-duo { margin: 0 auto 8px; }
}
@media (max-width: 520px) {
  .demo { border-radius: 22px; gap: 16px; }
  .demo-ms[data-k="5"] .ms-keys { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 10px; }
  .demo-ms[data-k="5"] .ms-keys::before, .demo-ms[data-k="5"] .ms-key::before { display: none; }
  .cw-stage { grid-template-columns: minmax(0, 1fr) 18px minmax(0, 1fr); }
  .cw-dev figcaption { font-size: 0.66rem; white-space: normal; text-align: center; }
  .ent-req { grid-template-columns: auto minmax(0, 1fr); }
  .ent-wl { grid-column: 1 / -1; justify-self: start; }
  .ent-list li { grid-template-columns: 32px minmax(0, 1fr) auto; }
  .ent-w { display: none; }
  .inh-vault { width: 112px; height: 112px; }
  .inh-av { width: 42px; height: 42px; }
  .fam-people { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .demo-reset span { display: none; }
  .demo-reset { width: 36px; padding: 0; justify-content: center; }
  .demo-reset[data-keep] { width: auto; padding: 0 14px; }
  .demo-reset[data-keep] span { display: inline; }
  .duo-front { margin-top: 12% !important; }
}
@media (prefers-reduced-motion: reduce) {
  .demo *, .hero-deck * { transition-duration: 0.01ms !important; animation: none !important; }
}

/* ===== 20-docs.css ===== */
/* ==========================================================================
   20 — Docs / Security centre / FAQ (generated by tools/build_docs.py)
   v3 reading layout. Every page here has <body data-page="doc">; the .doc-*
   classes are used nowhere else, and shared classes (page hero, sections,
   CTA, FAQ band) are scoped with [data-page="doc"].

     ┌ framed stone title panel (breadcrumb · eyebrow · h1 · lede) ┐  ← header floats over it
     │ reading column (sections, cards, tables, notes…) │ sticky "On this page" card │
     │ index cards (section landings)                                           │
     ├ stone FAQ band: heading left (sticky) · answers right                     ┤
     └ one dark CTA band, "last updated" as its footnote                         ┘
   ========================================================================== */

/* shared prose colour — also read by the blog (30) and legal (60) parts */
:root { --prose: #c9ccd2; }
.t-paper, .t-beige { --prose: #2f3238; }
.blog-prose code, .policy-text code { font-family: var(--font-mono); font-size: 0.86em; padding: 2px 6px; border: 1px solid var(--line); border-radius: 3px; background: var(--bg-2); color: var(--fg); }

[data-page="doc"] {
  --doc-pad: clamp(20px, 4vw, 64px);          /* page gutter of the doc container */
  --doc-gutter: clamp(48px, 5.5vw, 88px);     /* reading column ↔ TOC */
  --doc-toc-w: 248px;
  --doc-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'%3E%3Cpath d='M13.28,1.247a12.989,12.989,0,0,0-1.345.087.837.837,0,0,0-.741.83V7.639a.827.827,0,0,0,.31.644.837.837,0,0,0,.688.177,5.421,5.421,0,0,1,1.45-.1A5.779,5.779,0,0,1,18.867,13.7a5.578,5.578,0,0,1-11.156.167V4.946A1.333,1.333,0,0,0,5.543,3.9,12.706,12.706,0,1,0,13.29,1.247Z' transform='translate(-0.602 -0.655)' fill='none' stroke='white' stroke-width='0.17'/%3E%3C/svg%3E");
  --doc-mark-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'%3E%3Cpath d='M13.28,1.247a12.989,12.989,0,0,0-1.345.087.837.837,0,0,0-.741.83V7.639a.827.827,0,0,0,.31.644.837.837,0,0,0,.688.177,5.421,5.421,0,0,1,1.45-.1A5.779,5.779,0,0,1,18.867,13.7a5.578,5.578,0,0,1-11.156.167V4.946A1.333,1.333,0,0,0,5.543,3.9,12.706,12.706,0,1,0,13.29,1.247Z' transform='translate(-0.602 -0.655)' fill='none' stroke='white' stroke-opacity='0.08' stroke-width='0.12'/%3E%3C/svg%3E");
}

/* icons (Lucide-style strokes, used as masks) */
[data-page="doc"] {
  --i-file: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 2v6h6'/%3E%3Cpath d='M16 13H8'/%3E%3Cpath d='M16 17H8'/%3E%3Cpath d='M10 9H8'/%3E%3C/svg%3E");
  --i-flag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 22V4'/%3E%3Cpath d='M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z'/%3E%3C/svg%3E");
  --i-bulb: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5'/%3E%3Cpath d='M9 18h6'/%3E%3Cpath d='M10 22h4'/%3E%3C/svg%3E");
  --i-users: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E");
  --i-map: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 3 3 5.5V21l6-2.5 6 2.5 6-2.5V3l-6 2.5z'/%3E%3Cpath d='M9 3v15.5'/%3E%3Cpath d='M15 5.5V21'/%3E%3C/svg%3E");
  --i-book: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 4h6a4 4 0 0 1 4 4v13a3 3 0 0 0-3-3H2z'/%3E%3Cpath d='M22 4h-6a4 4 0 0 0-4 4v13a3 3 0 0 1 3-3h7z'/%3E%3C/svg%3E");
  --i-shieldalert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z'/%3E%3Cpath d='M12 8v4'/%3E%3Cpath d='M12 16h.01'/%3E%3C/svg%3E");
  --i-shield: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");
  --i-code: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m16 18 6-6-6-6'/%3E%3Cpath d='m8 6-6 6 6 6'/%3E%3C/svg%3E");
  --i-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3Cpath d='m8 11 2 2 4-4'/%3E%3C/svg%3E");
  --i-help: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M9.1 9a3 3 0 0 1 5.8 1c0 2-3 3-3 3'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E");
  --i-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E");
  --i-download: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3Cpath d='M12 15V3'/%3E%3C/svg%3E");
  --i-wallet: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 7V4a1 1 0 0 0-1-1H5a2 2 0 0 0 0 4h15a1 1 0 0 1 1 1v4h-3a2 2 0 0 0 0 4h3a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1'/%3E%3Cpath d='M3 5v14a2 2 0 0 0 2 2h15a1 1 0 0 0 1-1v-4'/%3E%3C/svg%3E");
  --i-eye: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
  --i-wifioff: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h.01'/%3E%3Cpath d='M8.5 16.43a5 5 0 0 1 7 0'/%3E%3Cpath d='M5 12.86a10 10 0 0 1 5.17-2.69'/%3E%3Cpath d='M19 12.86a10 10 0 0 0-2-1.43'/%3E%3Cpath d='M2 8.82a15 15 0 0 1 4.18-2.65'/%3E%3Cpath d='M22 8.82a15 15 0 0 0-11.29-3.76'/%3E%3Cpath d='m2 2 20 20'/%3E%3C/svg%3E");
  --i-key: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='7.5' cy='15.5' r='5.5'/%3E%3Cpath d='m21 2-9.6 9.6'/%3E%3Cpath d='m15.5 7.5 3 3L22 7l-3-3'/%3E%3C/svg%3E");
  --i-monitor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='20' height='14' x='2' y='3' rx='2'/%3E%3Cpath d='M8 21h8'/%3E%3Cpath d='M12 17v4'/%3E%3C/svg%3E");
  --i-lock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='11' x='3' y='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E");
  --i-lifebuoy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='m4.93 4.93 4.24 4.24'/%3E%3Cpath d='m14.83 9.17 4.24-4.24'/%3E%3Cpath d='m14.83 14.83 4.24 4.24'/%3E%3Cpath d='m9.17 14.83-4.24 4.24'/%3E%3C/svg%3E");
  --i-snow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12h20'/%3E%3Cpath d='M12 2v20'/%3E%3Cpath d='m20 16-4-4 4-4'/%3E%3Cpath d='m4 8 4 4-4 4'/%3E%3Cpath d='m16 4-4 4-4-4'/%3E%3Cpath d='m8 20 4-4 4 4'/%3E%3C/svg%3E");
  --i-qr: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='5' height='5' x='3' y='3' rx='1'/%3E%3Crect width='5' height='5' x='16' y='3' rx='1'/%3E%3Crect width='5' height='5' x='3' y='16' rx='1'/%3E%3Cpath d='M21 16h-3a2 2 0 0 0-2 2v3'/%3E%3Cpath d='M21 21v.01'/%3E%3Cpath d='M12 7v3a2 2 0 0 1-2 2H7'/%3E%3Cpath d='M3 12h.01'/%3E%3Cpath d='M12 3h.01'/%3E%3Cpath d='M12 16v.01'/%3E%3Cpath d='M16 12h1'/%3E%3Cpath d='M21 12v.01'/%3E%3Cpath d='M12 21v-1'/%3E%3C/svg%3E");
  --i-layers: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83z'/%3E%3Cpath d='m22 17.65-9.17 4.16a2 2 0 0 1-1.66 0L2 17.65'/%3E%3Cpath d='m22 12.65-9.17 4.16a2 2 0 0 1-1.66 0L2 12.65'/%3E%3C/svg%3E");
  --i-hourglass: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 22h14'/%3E%3Cpath d='M5 2h14'/%3E%3Cpath d='M17 22v-4.17a2 2 0 0 0-.59-1.42L12 12l-4.41 4.41A2 2 0 0 0 7 17.83V22'/%3E%3Cpath d='M7 2v4.17a2 2 0 0 0 .59 1.42L12 12l4.41-4.41A2 2 0 0 0 17 6.17V2'/%3E%3C/svg%3E");
  --i-building: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='16' height='20' x='4' y='2' rx='2'/%3E%3Cpath d='M9 22v-4h6v4'/%3E%3Cpath d='M8 6h.01'/%3E%3Cpath d='M16 6h.01'/%3E%3Cpath d='M12 6h.01'/%3E%3Cpath d='M12 10h.01'/%3E%3Cpath d='M12 14h.01'/%3E%3Cpath d='M16 10h.01'/%3E%3Cpath d='M16 14h.01'/%3E%3Cpath d='M8 10h.01'/%3E%3Cpath d='M8 14h.01'/%3E%3C/svg%3E");
  --i-home: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10.5 12 3l9 7.5'/%3E%3Cpath d='M5 9.5V20a1 1 0 0 0 1 1h4v-6h4v6h4a1 1 0 0 0 1-1V9.5'/%3E%3C/svg%3E");
  --i-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  --i-checkcircle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");
  --i-alert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E");
  --i-octagon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.86 2h8.28L22 7.86v8.28L16.14 22H7.86L2 16.14V7.86z'/%3E%3Cpath d='M12 8v4'/%3E%3Cpath d='M12 16h.01'/%3E%3C/svg%3E");
  --i-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E");
}

/* ---- page frame ------------------------------------------------------------- */
/* the title panel is a framed hero: the floating header sits over it */
body[data-page="doc"]:has(main > .doc-hero:first-child) { padding-top: 0; }

.doc-hero.page-hero { padding: var(--frame-gap) 0 clamp(80px, 9vw, 128px); }
[data-page="doc"] .doc-main > .section > .doc-container,
.doc-hero > .doc-container {
  width: min(1200px, calc(100% - 2 * var(--doc-pad)));
  max-width: none;
}

/* grid: title panel across, then body + sticky TOC, then index cards */
.doc-hero > .doc-container {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "crumb" "head" "body" "index";
  row-gap: 0;
}
.doc-hero > .doc-container:has(> .doc-toc) {
  grid-template-columns: minmax(0, 1fr) var(--doc-toc-w);
  column-gap: var(--doc-gutter);
  grid-template-areas: "crumb crumb" "head head" "body toc" "index index";
}
.doc-hero > .doc-container > * { min-width: 0; }
.doc-hero .doc-breadcrumb { grid-area: crumb; }
.doc-hero .doc-head { grid-area: head; }
.doc-hero .doc-toc { grid-area: toc; }
.doc-hero .doc-body { grid-area: body; }
.doc-hero .doc-index-grid { grid-area: index; }

/* the stone frame behind breadcrumb + head: a grid item spanning their two rows,
   pulled out to the viewport edge (minus --frame-gap) with negative margins */
.doc-hero > .doc-container::before {
  content: "";
  grid-column: 1 / -1;
  grid-row: 1 / 3;
  z-index: -1;
  margin-inline: calc(var(--frame-gap) - (100vw - 100%) / 2);
  border-radius: var(--radius-xl);
  background:
    var(--doc-mark) no-repeat right max(-40px, calc(50vw - 820px)) bottom -150px / clamp(360px, 34vw, 500px),
    radial-gradient(120% 90% at 100% 0%, rgba(13, 128, 254, 0.06), rgba(13, 128, 254, 0) 55%),
    var(--stone);
}

/* breadcrumb */
.doc-breadcrumb {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px;
  padding-top: calc(var(--header-h) + clamp(36px, 4.6vw, 72px));
  margin: 0 0 clamp(22px, 2.6vw, 34px);
  font-family: var(--font-sans); font-size: 0.86rem; font-weight: 400;
  letter-spacing: 0; text-transform: none;
  color: var(--slate);
}
.doc-breadcrumb a { color: var(--slate); transition: color 0.2s var(--ease); }
.doc-breadcrumb a:hover { color: var(--blue-700); }
.doc-breadcrumb [aria-current] { color: var(--ink); font-weight: 500; }
.crumb-sep { color: var(--slate-3); }

/* head */
.doc-head { max-width: 860px; margin: 0; padding-bottom: clamp(52px, 6vw, 92px); }
.doc-head h1 {
  margin: 18px 0 22px;
  font-size: clamp(2.5rem, 1.5rem + 3.1vw, 4.3rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: var(--ink);
  text-wrap: balance;
}
.doc-lede { max-width: 720px; font-size: var(--fs-lede); line-height: 1.62; color: var(--slate); }
.doc-lede b { color: var(--ink); font-weight: 600; }
.doc-head .tag-row { margin-top: 26px; }
.doc-head .page-tag { background: #fff; border-color: transparent; box-shadow: var(--shadow-xs); }

/* ---- "On this page" -------------------------------------------------------------- */
.doc-toc {
  position: sticky;
  top: calc(var(--header-h) + 24px);
  align-self: start;
  display: flex; flex-direction: column; gap: 2px;
  max-height: calc(100vh - var(--header-h) - 48px);
  overflow-y: auto;
  margin: clamp(56px, 6vw, 88px) 0 0;
  padding: 22px 18px 18px 22px;
  border: 0;
  border-radius: 20px;
  background: var(--surface);
  scrollbar-width: thin;
}
.doc-toc-h {
  display: block;
  margin: 0 0 12px;
  font-family: var(--font-sans); font-size: 0.82rem; font-weight: 600;
  letter-spacing: 0; text-transform: none;
  color: var(--fg);
}
.doc-toc a {
  position: relative;
  padding: 7px 0 7px 16px;
  font-size: 0.89rem; line-height: 1.4;
  color: var(--muted);
  box-shadow: inset 2px 0 0 var(--line);
  transition: color 0.2s var(--ease), box-shadow 0.25s var(--ease);
}
.doc-toc a::before { content: none; }
.doc-toc a:hover { color: var(--fg); box-shadow: inset 2px 0 0 var(--blue); }
.doc-toc a[aria-current] { color: var(--fg); font-weight: 600; box-shadow: inset 2px 0 0 var(--blue); }

/* ---- reading column ------------------------------------------------------------- */
.doc-main { counter-reset: none; }
.doc-body { max-width: 760px; margin-top: clamp(56px, 6vw, 88px); }
.doc-body:not(:has(*)) { display: none; }
.doc-section { padding: 0; margin-top: clamp(56px, 6vw, 80px); border: 0; }
.doc-section:first-child { margin-top: 0; }
.doc-section h2 {
  display: block;
  margin: 0 0 18px;
  font-size: clamp(1.8rem, 1.4rem + 1.25vw, 2.45rem);
  line-height: 1.1;
  letter-spacing: -0.024em;
  color: var(--fg);
  scroll-margin-top: calc(var(--header-h) + 24px);
}
.doc-section h2::before { content: none; }
.doc-section h3 { margin: 32px 0 10px; font-size: 1.16rem; font-weight: 600; letter-spacing: -0.012em; color: var(--fg); }
.doc-body p { margin: 0 0 16px; font-size: 1.04rem; line-height: 1.75; color: var(--prose); }
.doc-body p:last-child { margin-bottom: 0; }
.doc-body p b, .doc-body li b, .doc-body td b { color: var(--fg); font-weight: 600; }
.doc-body a:not(.btn):not(.doc-rel):not(.doc-shot-link) {
  color: var(--accent-ink);
  border: 0;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--accent-ink) 32%, transparent);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
  transition: text-decoration-color 0.2s var(--ease), color 0.2s var(--ease);
}
.doc-body a:not(.btn):not(.doc-rel):not(.doc-shot-link):hover { color: var(--blue); text-decoration-color: currentColor; }

/* inline code + payload examples (one line per row, scroll rather than rewrap) */
.doc-body code {
  font-family: var(--font-mono); font-size: 0.86em;
  padding: 0.12em 0.42em;
  border: 0; border-radius: 6px;
  background: var(--surface);
  color: var(--fg);
}
.doc-pre {
  margin: 18px 0;
  padding: 16px 20px;
  border: 0; border-radius: 16px;
  background: var(--surface);
  overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.doc-pre code { display: block; padding: 0; border: 0; background: none; border-radius: 0; font-size: 0.8rem; line-height: 1.7; white-space: pre; color: var(--fg); }
.doc-pre:has(+ .doc-pre) { margin-bottom: 10px; }
.doc-pre:last-child { margin-bottom: 0; }

/* lists */
.doc-list, .doc-olist { margin: 4px 0 18px; padding: 0; list-style: none; }
.doc-list li { position: relative; padding-left: 28px; margin: 0 0 12px; font-size: 1.02rem; line-height: 1.7; color: var(--prose); }
.doc-list li::before {
  content: ""; position: absolute; left: 6px; top: calc(0.85em - 3.5px);
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 0 0 4px var(--blue-50);
  -webkit-mask: none; mask: none;
}
.doc-olist { counter-reset: ol; }
.doc-olist li { position: relative; padding-left: 38px; margin: 0 0 12px; line-height: 1.7; color: var(--prose); counter-increment: ol; }
.doc-olist li::before {
  content: counter(ol); position: absolute; left: 0; top: 0.2em;
  width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--blue-50); color: var(--blue-700);
  font-family: var(--font-sans); font-size: 0.78rem; font-weight: 600; letter-spacing: 0;
}
.t-ink .doc-list li::before { box-shadow: 0 0 0 4px rgba(13, 128, 254, 0.2); }
.t-ink .doc-olist li::before { background-color: rgba(13, 128, 254, 0.18); color: var(--blue-300); }

/* notes / callouts: soft tinted panels with an icon */
.doc-note {
  --note-bg: var(--surface);
  --note-ink: var(--slate);
  --note-icon: var(--i-info);
  position: relative;
  margin: 24px 0;
  padding: 18px 22px 18px 56px;
  border: 0;
  border-radius: 18px;
  background: var(--note-bg);
}
.doc-note::before {
  content: ""; position: absolute; left: 20px; top: 19px;
  width: 22px; height: 22px;
  background: var(--note-ink);
  -webkit-mask: var(--note-icon) center / contain no-repeat;
          mask: var(--note-icon) center / contain no-repeat;
}
.doc-note p { margin: 0; font-size: 0.98rem; line-height: 1.65; color: var(--prose); }
.doc-note p + p { margin-top: 8px; }
.doc-note-h {
  display: block; margin: 0 0 4px;
  font-family: var(--font-sans); font-size: 1rem; font-weight: 600;
  letter-spacing: -0.008em; text-transform: none;
  color: var(--fg);
}
.doc-note.info { --note-bg: var(--blue-50); --note-ink: var(--blue-700); --note-icon: var(--i-info); }
.doc-note.ok { --note-bg: var(--green-50); --note-ink: var(--green); --note-icon: var(--i-checkcircle); }
.doc-note.warn { --note-bg: var(--amber-50); --note-ink: var(--amber); --note-icon: var(--i-alert); }
.doc-note.danger { --note-bg: #fcefee; --note-ink: var(--red); --note-icon: var(--i-octagon); }
.doc-note.warn .doc-note-h, .doc-note.danger .doc-note-h { color: var(--fg); }

/* tables: a rounded stone shell, hairline rows, no grid */
.doc-tablecard {
  margin: 26px 0;
  border: 0;
  border-radius: 20px;
  background: var(--surface);
  overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.doc-table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 0.93rem; }
.doc-table th, .doc-table td {
  padding: 15px 20px;
  text-align: left; vertical-align: top;
  border: 0; border-bottom: 1px solid var(--line);
}
.doc-table thead th {
  padding-top: 16px; padding-bottom: 14px;
  font-family: var(--font-sans); font-size: 0.84rem; font-weight: 600;
  letter-spacing: 0; text-transform: none;
  color: var(--fg);
  background: var(--bg-3);
  border-bottom: 0;
  white-space: nowrap;
}
.doc-table tbody tr:last-child td { border-bottom: 0; }
.doc-table td { color: var(--prose); line-height: 1.55; }
.doc-table td:first-child { color: var(--fg); font-weight: 600; }
.doc-table .adv { color: var(--accent-ink); font-weight: 600; }
.doc-table code { background: var(--surface-2); white-space: nowrap; }
.doc-table tbody tr { transition: background-color 0.2s var(--ease); }
.doc-table tbody tr:hover td { background: color-mix(in srgb, var(--fg) 2.5%, transparent); }
.doc-tcap {
  caption-side: bottom;
  padding: 13px 20px 15px;
  font-family: var(--font-sans); font-size: 0.85rem; font-weight: 400;
  letter-spacing: 0; text-transform: none;
  color: var(--muted);
  text-align: left;
  border-top: 1px solid var(--line);
}

/* steps */
.doc-steps { margin: 26px 0 8px; }
.doc-step { position: relative; padding: 0 0 38px 62px; }
.doc-step::before {
  content: attr(data-n);
  position: absolute; left: 0; top: -4px;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border: 1px solid var(--blue-100); border-radius: 50%;
  background: var(--blue-50); color: var(--blue-700);
  font-family: var(--font-sans); font-size: 0.95rem; font-weight: 600; letter-spacing: 0;
}
.doc-step::after { content: ""; position: absolute; left: 19.5px; top: 46px; bottom: 8px; width: 1px; background: var(--line-strong); }
.doc-step:last-child { padding-bottom: 8px; }
.doc-step:last-child::after { display: none; }
.doc-step h3 { margin: 4px 0 8px; font-size: 1.16rem; font-weight: 600; }
.doc-step p { font-size: 1rem; }

/* phone screenshots: a stone tray; app.js opens them in the lightbox */
.doc-shotrow {
  display: flex; flex-wrap: wrap; gap: 14px;
  width: fit-content; max-width: 100%;
  margin-top: 18px;
  padding: 16px;
  border-radius: 22px;
  background: var(--surface);
}
.doc-shot-link {
  display: block;
  border: 0; border-radius: 14px;
  background: #fff;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  cursor: zoom-in;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.doc-shot-link:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.doc-shot-link:focus-visible { outline-offset: 3px; border-radius: 14px; }
.doc-shot { display: block; width: 190px; height: auto; }
.doc-shotrow.multi .doc-shot { width: 176px; }

/* cards */
.doc-cardgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
  gap: 12px;
  margin: 26px 0;
  border: 0;
}
.doc-card {
  padding: 22px 22px 24px;
  border: 0; border-radius: 20px;
  background: var(--surface);
  transition: background-color 0.25s var(--ease);
}
.doc-card::before {
  content: ""; display: block;
  width: 34px; height: 34px; margin-bottom: 16px;
  border-radius: 10px;
  background: var(--surface-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23095bc0' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 15px no-repeat;
}
.doc-card:hover { background: var(--surface-hover); }
.doc-card strong { display: block; margin-bottom: 8px; font-family: var(--font-sans); font-weight: 600; font-size: 1.02rem; line-height: 1.35; letter-spacing: -0.01em; color: var(--fg); }
.doc-card p { margin: 0; font-size: 0.92rem; line-height: 1.6; color: var(--muted); }

/* figures (inline SVG diagrams) */
.doc-figure {
  margin: 28px 0;
  padding: clamp(22px, 3.2vw, 40px) clamp(14px, 3vw, 36px) clamp(18px, 2.4vw, 28px);
  border: 0; border-radius: 24px;
  background: var(--surface);
}
.doc-figure figcaption {
  max-width: 560px;
  margin: 20px auto 0;
  font-family: var(--font-sans); font-size: 0.9rem; line-height: 1.55;
  letter-spacing: 0; text-transform: none;
  text-align: center;
  color: var(--muted);
}

/* related links: pills */
.doc-related { margin-top: 40px; padding-top: 0; border-top: 0; }
.doc-rel-h { display: block; margin-bottom: 12px; font-family: var(--font-sans); font-size: 0.86rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--fg); }
.doc-rel-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.doc-rel {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 42px; padding: 0 18px;
  border: 1px solid transparent; border-radius: var(--pill);
  background: var(--surface);
  font-size: 0.9rem; font-weight: 500;
  color: var(--fg);
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}
.doc-rel::after {
  content: ""; width: 15px; height: 15px; flex: none;
  background: currentColor;
  -webkit-mask: var(--i-arrow) center / contain no-repeat;
          mask: var(--i-arrow) center / contain no-repeat;
  transition: transform 0.25s var(--ease);
}
.doc-rel[target="_blank"]::after { transform: rotate(-45deg); }
.doc-rel:hover { background: var(--surface-hover); color: var(--fg); }
.doc-rel:not([target="_blank"]):hover::after { transform: translateX(3px); }

/* ---- index cards (docs landing, section landings, security centre) ------------ */
.doc-index-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: clamp(56px, 6vw, 88px);
  border: 0;
  counter-reset: none;
}
.doc-index-grid:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.doc-index-grid:has(> :nth-child(5):last-child) > :first-child { grid-column: span 2; }
.doc-index-card {
  --ico: var(--i-file);
  position: relative;
  display: flex; flex-direction: column;
  min-height: 250px;
  padding: 28px 28px 26px;
  border: 0; border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--fg);
  transition: background-color 0.25s var(--ease), transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.doc-index-card::before {
  content: ""; flex: none;
  width: 48px; height: 48px; margin-bottom: 30px;
  border-radius: 14px;
  background: var(--surface-2);
  box-shadow: var(--shadow-xs);
}
.doc-index-card::after {
  content: ""; position: absolute; left: 41px; top: 41px;
  width: 22px; height: 22px;
  background: var(--blue-700);
  -webkit-mask: var(--ico) center / contain no-repeat;
          mask: var(--ico) center / contain no-repeat;
}
.doc-index-card h3 { font-size: 1.28rem; line-height: 1.25; letter-spacing: -0.016em; }
.doc-index-card p { margin-top: 10px; font-size: 0.94rem; line-height: 1.6; color: var(--muted); }
.doc-index-grid:has(> :nth-child(5):last-child) > :first-child h3 { font-size: 1.5rem; }
.doc-index-card .doc-rel {
  margin-top: auto; align-self: flex-start;
  min-height: 0; padding: 24px 0 0;
  border: 0; border-radius: 0;
  background: none;
  color: var(--accent-ink);
}
.doc-index-card:hover { background: var(--surface-hover); transform: translateY(-2px); }
.doc-index-card:hover .doc-rel { color: var(--blue); }
.doc-index-card:hover .doc-rel::after { transform: translateX(3px); }

/* card icons, keyed to the (untranslated) slug in the link */
.doc-index-card[href$="/getting-started/"] { --ico: var(--i-flag); }
.doc-index-card[href$="/concepts/"] { --ico: var(--i-bulb); }
.doc-index-card[href$="/use-cases/"] { --ico: var(--i-users); }
.doc-index-card[href$="/guides/"] { --ico: var(--i-map); }
.doc-index-card[href$="/reference/"] { --ico: var(--i-book); }
.doc-index-card[href$="/threat-model/"] { --ico: var(--i-shieldalert); }
.doc-index-card[href$="/audits-and-code/"] { --ico: var(--i-code); }
.doc-index-card[href$="/verify-it-yourself/"] { --ico: var(--i-search); }
.doc-index-card[href$="/security-faq/"] { --ico: var(--i-help); }
.doc-index-card[href$="/what-is-ownbit/"] { --ico: var(--i-info); }
.doc-index-card[href$="/install/"] { --ico: var(--i-download); }
.doc-index-card[href$="/create-your-first-wallet/"] { --ico: var(--i-wallet); }
.doc-index-card[href$="/watch-only-and-cold-wallet/"] { --ico: var(--i-eye); }
.doc-index-card[href$="/cold-wallet-air-gap/"] { --ico: var(--i-wifioff); }
.doc-index-card[href$="/keys-and-standards/"] { --ico: var(--i-key); }
.doc-index-card[href$="/multisig-explained/"] { --ico: var(--i-users); }
.doc-index-card[href$="/multisig-web-console/"] { --ico: var(--i-monitor); }
.doc-index-card[href$="/self-custody/"] { --ico: var(--i-lock); }
.doc-index-card[href$="/recover-assets/"],
.doc-index-card[href$="/recover-multisig-assets/"],
.doc-index-card[href$="/recover-evm-multisig-wrong-network/"] { --ico: var(--i-lifebuoy); }
.doc-index-card[href$="/set-up-2-of-3-multisig/"] { --ico: var(--i-shield); }
.doc-index-card[href$="/set-up-cold-wallet/"],
.doc-index-card[href$="/use-cases/cold-wallet/"] { --ico: var(--i-snow); }
.doc-index-card[href$="/glossary/"] { --ico: var(--i-book); }
.doc-index-card[href$="/public-protocol/"],
.doc-index-card[href$="/qr-signing-encoding/"] { --ico: var(--i-qr); }
.doc-index-card[href$="/supported-chains/"] { --ico: var(--i-layers); }
.doc-index-card[href$="/crypto-inheritance/"] { --ico: var(--i-hourglass); }
.doc-index-card[href$="/enterprise-multisig/"] { --ico: var(--i-building); }
.doc-index-card[href$="/family-multisig/"] { --ico: var(--i-home); }
.doc-index-card[href$="/team-multisig/"] { --ico: var(--i-users); }

/* ---- FAQ band: heading left (sticky), answers right --------------------------- */
[data-page="doc"] .section.doc-faq { padding: clamp(64px, 8vw, 120px) 0; }
[data-page="doc"] .doc-faq > .doc-container {
  /* heading floats left and sticks while the answers scroll past on the right */
  display: flow-root;
  --faq-head-w: 34%;
}
[data-page="doc"] .doc-faq .section-heading {
  float: left;
  width: var(--faq-head-w);
  position: sticky;
  top: calc(var(--header-h) + 32px);
  margin: 0;
}
[data-page="doc"] .doc-faq .section-heading h2 { font-size: var(--fs-h2-sm); }
[data-page="doc"] .doc-faq-item { margin: 0 0 10px calc(var(--faq-head-w) + var(--doc-gutter)); }
[data-page="doc"] .doc-faq-item:last-child { margin-bottom: 0; }

/* ---- closing CTA: the page's one dark band ---------------------------------------- */
[data-page="doc"] .doc-main > .section.t-ink {
  isolation: isolate;
  overflow: hidden;
  padding: clamp(64px, 8vw, 112px) 0 clamp(28px, 3.4vw, 40px);
}
[data-page="doc"] .doc-main > .section.t-ink::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    var(--doc-mark-dark) no-repeat right max(-120px, calc(50vw - 860px)) center / clamp(420px, 44vw, 640px),
    radial-gradient(70% 120% at 100% 100%, rgba(13, 128, 254, 0.22), rgba(13, 128, 254, 0) 60%);
}
[data-page="doc"] .t-ink > .doc-container { display: flex; flex-direction: column; }
.doc-cta.page-cta {
  order: 1;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  padding: 0;
  border-radius: 0;
  background: none;
  overflow: visible;
}
[data-page="doc"] .t-ink .doc-cta.page-cta { background: none; }
.doc-cta .section-heading h2 { font-size: var(--fs-h2); }
.doc-cta .section-heading p { font-size: var(--fs-lede); }
.doc-updated {
  order: 2;
  margin: clamp(56px, 6.5vw, 96px) 0 0;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  font-family: var(--font-sans); font-size: 0.86rem;
  letter-spacing: 0; text-transform: none;
  color: var(--muted);
}
.doc-updated time { color: var(--fg); font-weight: 500; }

/* ---- diagrams (.dg*, emitted by tools/diagrams.py), re-inked blue ---------------- */
.dg { display: block; width: 100%; height: auto; max-width: 560px; margin: 0 auto; overflow: visible; }
.dg text { font-family: var(--font-sans); }
.dg-dev { fill: var(--surface-2); stroke: var(--line-strong); stroke-width: 1.4; }
.dg-dev.dg-cold { fill: var(--night); stroke: var(--blue); }
.dg-screen { fill: var(--blue-50); stroke: var(--blue-100); stroke-width: 1; }
.dg-screen-cold { fill: var(--night-3); stroke: var(--blue); }
.dg-cap { fill: var(--fg); font-size: 10.5px; font-weight: 600; paint-order: stroke; stroke: var(--surface); stroke-width: 3px; stroke-linejoin: round; }
.dg-cap-cold { fill: var(--blue-700); }
.dg-airgap .dg-cap-cold { fill: var(--blue-300); stroke: var(--night); }
.dg-mini { fill: var(--muted); font-size: 8.5px; font-weight: 600; letter-spacing: 0.08em; }
.dg-mini-cold { fill: var(--blue-700); }
.dg-gap { stroke: var(--blue); stroke-width: 1.25; stroke-dasharray: 3 6; }
.dg-gaptext { fill: var(--blue-700); font-size: 9px; font-weight: 600; letter-spacing: 0.06em; }
.dg-qr rect { fill: var(--blue); }
.dg-qr .dg-qr-p { fill: #fff; }
.dg-qr { animation: dgCross 4.6s ease-in-out infinite; }
@keyframes dgCross {
  0%,10% { transform: translateX(0); opacity: 0; }
  22% { opacity: 1; }
  50% { transform: translateX(96px); }
  78% { opacity: 1; }
  90%,100% { transform: translateX(192px); opacity: 0; }
}
.dg-onchip { fill: var(--muted); font-size: 8.5px; font-weight: 700; letter-spacing: 0.06em; }
.dg-offchip { fill: var(--blue-700); font-size: 8.5px; font-weight: 700; letter-spacing: 0.06em; }
.dg-flow { fill: var(--muted); font-size: 9.5px; font-weight: 500; }
.dg-arrow { fill: none; stroke: var(--blue); stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: 5 6; }
.dg-coldflow .dg-arrow, .dg-arrow.ea, .dg-arrow.ia { animation: dgDash 1.2s linear infinite; }
@keyframes dgDash { to { stroke-dashoffset: -22; } }
.dg-signer circle { fill: var(--surface-2); stroke: var(--line-strong); stroke-width: 1.5; }
.dg-signer text { fill: var(--fg); font-size: 14px; font-weight: 700; }
.dg-signer.s1 circle, .dg-signer.s3 circle { stroke: var(--blue); }
.dg-signer.s1 circle { animation: dgPulse 3.4s ease-in-out infinite; }
.dg-signer.s3 circle { animation: dgPulse 3.4s ease-in-out infinite 1.7s; }
@keyframes dgPulse { 0%,40%,100% { fill: var(--surface-2); } 15%,30% { fill: var(--blue-100); } }
.dg-wire { fill: none; stroke: var(--line-strong); stroke-width: 1.4; }
.dg-wire.w1, .dg-wire.w3 { stroke: var(--blue); stroke-dasharray: 4 5; animation: dgDash 1.3s linear infinite; }
.dg-vault rect { fill: var(--night); stroke: var(--blue); stroke-width: 1.4; }
.dg-lock { fill: none; stroke: var(--blue); stroke-width: 1.8; }
.dg-vault-t { fill: #fff; font-size: 15px; font-weight: 700; }
.dg-vault .dg-vault-lbl { fill: var(--t-dark); }
.dg-pc { fill: var(--surface-2); stroke: var(--fg); stroke-width: 1.5; }
.dg-ph, .dg-pb { fill: var(--fg); }
.dg-coin { fill: var(--blue); stroke: var(--blue); stroke-width: 1.4; }
.dg-coin-t { fill: #fff; font-size: 14px; font-weight: 800; }
.dg-vault-lbl, .dg-prot-t { fill: var(--fg); font-size: 10.5px; font-weight: 700; }
.dg-chip rect { fill: var(--surface-2); stroke: var(--line-strong); stroke-width: 1.2; }
.dg-chip-t { fill: var(--fg); font-size: 12.5px; font-weight: 600; }
.dg-badge { stroke-width: 0; }
.dg-badge.b-own { fill: var(--blue); }
.dg-badge.b-sig { fill: var(--ink); }
.dg-badge.b-adm { fill: var(--slate-2); }
.dg-badge-t { fill: #fff; font-size: 10px; font-weight: 800; }
.dg-gear { fill: none; stroke: var(--blue); stroke-width: 2; }
.dg-home-roof { fill: none; stroke: var(--fg); stroke-width: 1.8; stroke-linejoin: round; }
.dg-home-body { fill: var(--blue-50); stroke: var(--fg); stroke-width: 1.4; }
.dg-shield { fill: var(--surface-2); stroke: var(--blue); stroke-width: 1.6; }
.dg-clock-o { fill: none; stroke: var(--blue); stroke-width: 1.6; }
.dg-clock { fill: none; stroke: var(--blue); stroke-width: 1.8; stroke-linecap: round; }
.dg-time { fill: none; stroke: var(--blue); stroke-width: 1.8; stroke-dasharray: 4 6; animation: dgDash 1.4s linear infinite; }

@media (prefers-reduced-motion: reduce) {
  .dg-qr { animation: none; transform: translateX(96px); opacity: 1; }
  .dg-signer.s1 circle, .dg-signer.s3 circle { animation: none; fill: var(--blue-100); }
  .dg-coldflow .dg-arrow, .dg-arrow.ea, .dg-arrow.ia, .dg-wire.w1, .dg-wire.w3, .dg-time { animation: none; }
  .doc-index-card, .doc-shot-link { transition: none; }
}

/* ---- responsive -------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .doc-index-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .doc-index-grid:has(> :nth-child(5):last-child) > :first-child { grid-column: 1 / -1; }
}
@media (max-width: 1024px) {
  /* TOC becomes a scrollable row of pills under the title panel */
  .doc-hero > .doc-container:has(> .doc-toc) {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "crumb" "head" "toc" "body" "index";
  }
  .doc-toc {
    position: relative; top: auto;
    flex-direction: row; align-items: center; gap: 8px;
    max-height: none;
    margin: 28px calc(-1 * var(--doc-pad)) 0;
    padding: 2px var(--doc-pad);
    border-radius: 0;
    background: none;
    overflow-x: auto; overflow-y: hidden;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent);
            mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent);
  }
  .doc-toc::-webkit-scrollbar { display: none; }
  .doc-toc-h { flex: none; margin: 0 6px 0 0; color: var(--muted); font-weight: 500; }
  .doc-toc a {
    flex: none;
    display: inline-flex; align-items: center;
    height: 38px; padding: 0 16px;
    border-radius: var(--pill);
    background: var(--surface);
    box-shadow: none;
    white-space: nowrap;
    color: var(--fg);
  }
  .doc-toc a:last-child { margin-right: 32px; }
  .doc-toc a:hover { box-shadow: none; background: var(--surface-hover); }
  .doc-toc a[aria-current] { box-shadow: none; background: var(--blue-50); color: var(--blue-700); }
  .doc-body { margin-top: 44px; }
  [data-page="doc"] .doc-faq .section-heading { float: none; width: auto; position: static; margin-bottom: 28px; }
  [data-page="doc"] .doc-faq-item { margin-left: 0; }
}
@media (max-width: 960px) {
  .doc-cta.page-cta { grid-template-columns: minmax(0, 1fr); align-items: start; }
  [data-page="doc"] .doc-cta .cta-actions { justify-content: flex-start; }
}
@media (max-width: 720px) {
  .doc-hero > .doc-container::before {
    border-radius: var(--radius-lg);
    background-position: right -150px bottom -70px, 0 0, 0 0;
    background-size: 340px, auto, auto;
  }
  .doc-breadcrumb, .doc-head { padding-inline: 10px; }
  .doc-breadcrumb { padding-top: calc(var(--header-h) + 24px); font-size: 0.82rem; }
  .doc-head { padding-bottom: 44px; }
  .doc-head h1 { font-size: clamp(2.2rem, 9.4vw, 2.9rem); margin-bottom: 18px; }
  .doc-section h2 { font-size: clamp(1.65rem, 7vw, 2rem); }
  .doc-body p { font-size: 1rem; line-height: 1.72; }
  .doc-index-grid,
  .doc-index-grid:has(> :nth-child(4):last-child) { grid-template-columns: minmax(0, 1fr); }
  .doc-index-card { min-height: 0; padding: 24px 22px 22px; }
  .doc-index-card::before { margin-bottom: 22px; }
  .doc-index-card::after { left: 35px; top: 37px; }
  .doc-step { padding-left: 52px; }
  .doc-step::before { width: 36px; height: 36px; font-size: 0.88rem; }
  .doc-step::after { left: 17.5px; top: 42px; }
  .doc-shotrow { gap: 10px; padding: 12px; border-radius: 18px; }
  .doc-shot, .doc-shotrow.multi .doc-shot { width: min(150px, calc((100vw - 2 * var(--doc-pad) - 34px) / 2)); }
  .doc-step .doc-shotrow.multi .doc-shot { width: min(150px, calc((100vw - 2 * var(--doc-pad) - 52px - 34px) / 2)); }
  .doc-table { min-width: 460px; font-size: 0.9rem; }
  .doc-table:not(:has(tr > :nth-child(4))) { min-width: 0; }   /* ≤3 columns fit without scrolling */
  .doc-table th, .doc-table td { padding: 13px 14px; }
  .doc-table code { white-space: normal; overflow-wrap: anywhere; }
  .doc-table thead th { white-space: normal; }
  .doc-figure { padding: 22px 10px 18px; border-radius: 20px; }
  .doc-figure figcaption { padding-inline: 8px; }
  /* the diagrams render at ~60% on a phone: lift their labels a little */
  .dg-cap { font-size: 12px; }
  .dg-mini, .dg-onchip, .dg-offchip { font-size: 10px; letter-spacing: 0.04em; }
  .dg-flow { font-size: 11px; }
  .dg-gaptext { font-size: 10.5px; letter-spacing: 0.03em; }
  .doc-note { padding: 16px 18px 16px 50px; }
  .doc-note::before { left: 17px; top: 17px; width: 20px; height: 20px; }
  [data-page="doc"] .doc-cta .cta-actions .btn { flex: 1 1 auto; }
}

/* ==========================================================================
   Guide screenshot lightbox
   The markup stays a plain <a href="…" target="_blank">: with JS off the link
   still opens the image. app.js intercepts the click and shows it here.
   ========================================================================== */
.doc-lightbox { position: fixed; inset: 0; z-index: 9999; display: none; }
.doc-lightbox.is-open { display: block; }
body.doc-lightbox-open { overflow: hidden; }

.doc-lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 14, 21, 0.9);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}

/* Rows: chrome / image / chrome. The image row is the only flexible one, so the
   picture can never push the controls off-screen on a short viewport. */
.doc-lightbox-stage {
  position: relative;
  z-index: 1;
  height: 100%;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  padding: 14px clamp(12px, 3vw, 28px) max(14px, env(safe-area-inset-bottom));
  padding-top: max(14px, env(safe-area-inset-top));
}

.doc-lightbox-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.doc-lightbox-count {
  display: inline-flex; align-items: center;
  height: 34px; padding: 0 14px;
  border-radius: var(--pill);
  background: rgba(255, 255, 255, 0.08);
  font-family: var(--font-sans);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.78);
  font-variant-numeric: tabular-nums;
}
.doc-lightbox-count[hidden] { display: none; }
.doc-lightbox-bar:has(.doc-lightbox-count[hidden]) { justify-content: flex-end; }

.doc-lightbox-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(14px);
          backdrop-filter: blur(14px);
  color: #fff;
  cursor: pointer;
  transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.doc-lightbox-btn:hover:not(:disabled) { background: var(--blue); border-color: var(--blue); color: #fff; }
.doc-lightbox-btn:focus-visible { outline: 2px solid var(--blue-300); outline-offset: 3px; border-radius: 50%; }
.doc-lightbox-btn:disabled { opacity: 0.3; cursor: default; }
.doc-lightbox-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.doc-lightbox-figure {
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 12px 0;
}
.doc-lightbox-img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
  animation: doc-lightbox-in 0.24s var(--ease) both;
}
@keyframes doc-lightbox-in { from { opacity: 0; transform: scale(0.98); } to { opacity: 1; transform: none; } }

/* Desktop: portrait screenshots leave wide margins, so the arrows sit in them.
   Below 720px the image is nearly full-bleed, so they move to a bottom bar
   where a thumb can reach them without covering the picture. */
.doc-lightbox-nav { display: flex; align-items: center; justify-content: center; gap: 14px; }
.doc-lightbox-nav[hidden] { display: none; }
@media (min-width: 720px) {
  .doc-lightbox-nav { position: absolute; inset: 0; pointer-events: none; justify-content: space-between; padding: 0 clamp(12px, 3vw, 28px); }
  .doc-lightbox-nav .doc-lightbox-btn { pointer-events: auto; width: 54px; height: 54px; }
}
@media (prefers-reduced-motion: reduce) {
  .doc-lightbox-img { animation: none; }
}

/* /security/ is the one doc page with both a sticky TOC and the related-card grid below
   the body; the grid sits above the TOC so the TOC slides under it instead of showing
   through the gaps between the cards. */
.doc-hero .doc-index-grid { position: relative; z-index: 2; }
.doc-hero .doc-index-grid::before {
  content: ""; position: absolute; z-index: -1; inset: -24px -32px -24px -32px;
  background: var(--bg);
}

/* ===== 30-blog.css ===== */
/* ==========================================================================
   30 — Blog index + articles
   Light, editorial "stories" layout: a framed stone masthead, stone story
   cards with rounded covers, and a ~68ch reading column with serif headings.
   Both heroes still carry .t-ink from v2; they are re-themed as stone here.
   ========================================================================== */

/* the floating header sits over the framed masthead, as on the homepage */
body:has(main > .blog-hero:first-child),
body:has(main > article:first-child > .blog-article-hero:first-child) { padding-top: 0; }

.blog-hero, .blog-hero.t-ink,
.blog-article-hero, .blog-article-hero.t-ink {
  --bg: var(--stone); --bg-2: var(--white); --bg-3: var(--stone-2);
  --fg: var(--ink); --muted: var(--slate); --line: var(--hair); --line-strong: var(--hair-2);
  --accent-ink: var(--blue-700); --focus: var(--blue);
  --surface: var(--white); --surface-2: var(--stone); --surface-hover: #fbfaf8;
  color-scheme: light;
  color: var(--fg);
}

/* category label: a quiet sentence-case pill with a blue marker ------------ */
.blog-cat {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 28px;
  padding: 0 12px 0 10px;
  border-radius: var(--pill);
  background: var(--surface-2);
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
  color: var(--fg);
}
.blog-cat::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--blue); flex: none; }
.blog-cat.multisig::before { background: transparent; box-shadow: inset 0 0 0 1.75px var(--blue); }
.blog-cat.insights::before { background: var(--slate-2); }

/* ==========================================================================
   Index
   ========================================================================== */

/* masthead: framed stone panel, oversized serif title over a hairline */
.blog-hero {
  position: relative;
  isolation: isolate;
  overflow: clip;
  margin: var(--frame-gap) var(--frame-gap) 0;
  border-radius: var(--radius-xl);
  padding: calc(var(--header-h) + clamp(40px, 5.5vw, 88px)) 0 clamp(32px, 4vw, 56px);
  background: var(--bg);
}
.blog-hero::before, .blog-hero.t-ink::before { content: none; }
.blog-hero > .container {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  column-gap: clamp(32px, 5vw, 80px);
}
.blog-hero .kicker { display: none; }  /* repeats the h1 word for word in every locale */
.blog-hero h1 {
  grid-column: 1 / -1;
  margin: 0 0 clamp(26px, 3vw, 40px);
  padding-bottom: clamp(26px, 3.2vw, 44px);
  border-bottom: 1px solid var(--line-strong);
  font-size: clamp(3.1rem, 1.5rem + 5.4vw, 6.75rem);
  line-height: 0.95;
  letter-spacing: -0.038em;
}
.blog-hero > .container > p {
  grid-column: 1;
  max-width: 540px;
  font-size: var(--fs-lede);
  line-height: 1.55;
  color: var(--muted);
}

/* category filter: white pills on stone, the selected one inked */
.blog-filter { grid-column: 2; justify-self: end; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.blog-hero .blog-filter button {
  display: inline-flex;
  align-items: center;
  height: 42px;
  padding: 0 19px;
  border: 1px solid transparent;
  border-radius: var(--pill);
  background: var(--surface);
  color: var(--ink-3);
  font-family: var(--font-sans);
  font-size: 0.92rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: var(--shadow-xs);
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.blog-hero .blog-filter button:hover { background: var(--blue-50); color: var(--blue-700); }
.blog-hero .blog-filter button.active { background: var(--ink); color: #fff; box-shadow: none; }

/* story grid ----------------------------------------------------------------- */
.blog-hero + .section { padding-top: clamp(40px, 5vw, 72px); }
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 1.7vw, 24px);
}
.blog-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 10px;
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--fg);
  transition: background-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.blog-card:hover { background: var(--surface-hover); }
.blog-card:focus-visible { outline-offset: 4px; border-radius: var(--radius-lg); }
.blog-card-cover {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  overflow: hidden;
  isolation: isolate;
  background: #ece8de;
  box-shadow: inset 0 0 0 1px var(--hair);
}
.blog-card-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease-out); }
.blog-card:hover .blog-card-cover img { transform: scale(1.04); }
.blog-card-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  flex: 1;
  padding: 20px 14px 12px;
}
.blog-card h2, .blog-card h3 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.32rem, 1.12rem + 0.45vw, 1.56rem);
  line-height: 1.14;
  letter-spacing: -0.018em;
  text-wrap: balance;
  transition: color 0.2s var(--ease);
}
.blog-abstract {
  color: var(--muted);
  font-size: 0.93rem;
  line-height: 1.58;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.blog-meta {
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-family: var(--font-sans);
  font-size: 0.84rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
}
.blog-meta::after {
  content: "";
  width: 32px; height: 32px; flex: none;
  border-radius: 50%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8h9.2M8.6 4.2 12.4 8l-3.8 3.8' fill='none' stroke='%23095bc0' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat,
    var(--surface-2);
  transition: transform 0.3s var(--ease), background-color 0.3s var(--ease);
}
.blog-card:hover .blog-meta::after {
  transform: translateX(2px);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8h9.2M8.6 4.2 12.4 8l-3.8 3.8' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat,
    var(--blue);
}

/* featured story: one wide card, cover left, serif headline right */
.blog-card-featured {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1.42fr) minmax(0, 1fr);
  padding: 12px;
  border-radius: var(--radius-xl);
}
/* the cover keeps its full 16:9 art; if the copy runs taller, the art is
   letterboxed on the covers' own paper colour instead of being cropped */
.blog-card-featured .blog-card-cover { aspect-ratio: auto; align-self: stretch; justify-self: stretch; border-radius: 22px; background: #ece8de; }
.blog-card-featured .blog-card-cover img { object-fit: contain; }
.blog-card-featured .blog-card-body {
  justify-content: center;
  gap: 18px;
  padding: clamp(22px, 3.4vw, 52px) clamp(18px, 3.2vw, 48px) clamp(18px, 2.4vw, 32px);
}
.blog-card-featured h2 {
  font-size: clamp(1.85rem, 1.1rem + 1.75vw, 2.75rem);
  line-height: 1.05;
  letter-spacing: -0.026em;
}
.blog-card-featured .blog-abstract { font-size: 1rem; line-height: 1.62; -webkit-line-clamp: 4; }
.blog-card-featured .blog-meta { margin-top: 10px; }

/* load more */
.blog-more { display: flex; justify-content: center; margin-top: clamp(32px, 4vw, 52px); }
.blog-more button, #blog-load-more {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 52px;
  padding: 0 26px;
  border: 0;
  border-radius: var(--pill);
  background: color-mix(in srgb, var(--fg) 6%, transparent);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: 0.97rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s var(--ease);
}
.blog-more button::after, #blog-load-more::after {
  content: "";
  width: 15px; height: 15px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 3v9.2M4.2 8.6 8 12.4l3.8-3.8' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 3v9.2M4.2 8.6 8 12.4l3.8-3.8' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.blog-more button:hover, #blog-load-more:hover { background: color-mix(in srgb, var(--fg) 10%, transparent); }
#blog-load-more[hidden] { display: none; }

/* ==========================================================================
   Article
   ========================================================================== */

/* hero: centred title on a stone frame; the cover straddles the frame's lower
   edge into the white page, like a magazine opener */
.blog-article-hero {
  --cover-gutter: clamp(24px, 4vw, 64px);
  --cover-w: min(980px, calc(100cqw - 2 * var(--cover-gutter)));
  --cover-dip: calc(var(--cover-w) * 0.5625 * 0.42);
  container-type: inline-size;
  position: relative;
  isolation: isolate;
  padding: calc(var(--frame-gap) + var(--header-h) + clamp(18px, 2.6vw, 40px)) 0 0;
  background: transparent;
}
.blog-article-hero::before, .blog-article-hero.t-ink::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: var(--frame-gap) var(--frame-gap) var(--cover-dip);
  border-radius: var(--radius-xl);
  background: var(--stone);
  pointer-events: none;
}
.blog-article-hero > .container { width: 100%; }
.blog-article-hero .blog-article-shell {
  width: var(--cover-w);
  max-width: none;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.blog-article-hero .back-link { align-self: flex-start; margin-bottom: clamp(18px, 2.6vw, 32px); }
.blog-article-hero .blog-cat { background: var(--surface); box-shadow: var(--shadow-xs); }
.blog-article-hero h1 {
  max-width: 940px;
  margin: 22px 0 24px;
  font-size: clamp(2.3rem, 1.25rem + 3.3vw, 4.15rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.blog-byline {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-sans);
  font-size: 0.92rem;
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
}
.blog-byline::before {
  content: "";
  width: 30px; height: 30px; flex: none;
  border-radius: 50%;
  background: #fff url("../images/favicon.svg") center / 15px no-repeat;
  box-shadow: var(--shadow-xs);
}
.blog-cover {
  width: 100%;
  margin: clamp(30px, 4vw, 52px) 0 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  isolation: isolate;
  background: #ece8de;
  box-shadow: 0 0 0 1px var(--hair), var(--shadow-lg);
}
.blog-cover img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }

/* reading column ------------------------------------------------------------------ */
.blog-article-body.section { padding-top: clamp(52px, 6.5vw, 96px); }
.blog-article-body {
  --blog-wide: min(880px, calc(100vw - 32px));   /* figures + related break out of the column */
}
.blog-article-body .blog-article-shell { max-width: 620px; margin: 0 auto; }  /* ~70 characters a line */

.blog-prose {
  --prose-ink: color-mix(in srgb, var(--fg) 84%, var(--bg));
  --prose-fs: 1.125rem;
  --prose-lh: 1.72;
  --prose-mid: calc(var(--prose-fs) * var(--prose-lh) / 2);   /* centre of the first line, for list markers */
  font-size: var(--prose-fs);
  line-height: var(--prose-lh);
  color: var(--prose-ink);
}
/* 70-i18n opens CJK/Thai prose to 1.85; mirror it so list markers stay centred */
:is([lang^="zh"], [lang="ja"], [lang="ko"], [lang="th"]) .blog-prose { --prose-lh: 1.85; }
.blog-prose > * { margin: 0; }
.blog-prose > * + * { margin-top: 1.15em; }
.blog-prose > p:first-child {
  font-size: clamp(1.18rem, 1.08rem + 0.35vw, 1.32rem);
  line-height: 1.6;
  color: var(--fg);
}
.blog-prose > h2 {
  margin-top: 2.3em;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.75rem, 1.3rem + 1.3vw, 2.4rem);
  line-height: 1.1;
  letter-spacing: -0.024em;
  color: var(--fg);
  text-wrap: balance;
}
.blog-prose > h3 {
  margin-top: 1.9em;
  font-size: 1.22rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--fg);
}
.blog-prose > h2 + *, .blog-prose > h3 + * { margin-top: 0.65em; }
.blog-prose strong, .blog-prose b { color: var(--fg); font-weight: 600; }
.blog-prose a:not(.btn) {
  color: var(--accent-ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, var(--accent-ink) 32%, transparent);
  text-underline-offset: 3px;
  transition: text-decoration-color 0.2s var(--ease), color 0.2s var(--ease);
}
.blog-prose a:not(.btn):hover { color: var(--blue); text-decoration-color: currentColor; }

/* lists: blue dots; ordered steps in soft blue discs */
.blog-prose > ul, .blog-prose > ol { padding: 0; list-style: none; display: grid; gap: 0.75em; }
.blog-prose > ul > li, .blog-prose > ol > li { position: relative; margin: 0; }
.blog-prose > ul > li { padding-left: 26px; }
.blog-prose > ul > li::before {
  content: "";
  position: absolute; left: 3px; top: calc(var(--prose-mid) - 3.5px);
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--blue);
}
.blog-prose > ol { counter-reset: bol; }
.blog-prose > ol > li { counter-increment: bol; padding-left: 44px; min-height: 28px; }
.blog-prose > ol > li::before {
  content: counter(bol);
  position: absolute; left: 0; top: calc(var(--prose-mid) - 14px);
  width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--blue) 10%, var(--bg));
  color: var(--accent-ink);
  font-family: var(--font-sans); font-size: 0.8rem; font-weight: 600; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.blog-prose li > ul, .blog-prose li > ol { margin-top: 0.6em; padding-left: 1.1em; }

/* pull quote: a stone card with a blue opening mark */
.blog-prose > blockquote {
  position: relative;
  margin-block: 1.9em;
  padding: clamp(24px, 3.2vw, 38px) clamp(24px, 3.6vw, 44px);
  border: 0;
  border-radius: var(--radius-lg);
  background: var(--surface);
  font-family: var(--font-serif);
  font-style: normal;
  font-weight: 400;
  font-size: clamp(1.3rem, 1.1rem + 0.65vw, 1.62rem);
  line-height: 1.36;
  letter-spacing: -0.014em;
  color: var(--fg);
  text-wrap: pretty;
}
.blog-prose > blockquote::before {
  content: "\201C";
  display: block;
  height: 0.5em;
  margin-bottom: 0.15em;
  font-family: var(--font-serif);
  font-size: 2.6em;
  line-height: 0.9;
  color: var(--blue);
}
.blog-prose > blockquote p + p { margin-top: 0.6em; }

/* figures: wider than the text column, on a stone panel, sentence-case caption */
.blog-figure {
  margin: 2.1em calc(50% - var(--blog-wide, 880px) / 2);
  padding: clamp(14px, 2.6vw, 36px);
  border: 0;
  border-radius: var(--radius-lg);
  background: var(--surface);
}
.blog-prose > .blog-figure { margin-block: 2.1em; }
.blog-figure img { width: 100%; height: auto; margin: 0 auto; }
.blog-figure figcaption {
  max-width: 62ch;
  margin: clamp(12px, 1.6vw, 20px) auto 0;
  text-align: center;
  font-family: var(--font-sans);
  font-size: 0.88rem;
  line-height: 1.55;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
}

/* tables, rules and inline code inside articles */
.blog-prose table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: var(--radius);
  background: var(--surface);
  font-size: 0.94rem;
  line-height: 1.55;
  -webkit-overflow-scrolling: touch;
}
.blog-prose th, .blog-prose td { padding: 13px 18px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.blog-prose thead th { font-weight: 600; color: var(--fg); background: var(--surface-hover); }
.blog-prose tbody tr:last-child > * { border-bottom: 0; }
.blog-prose > hr { height: 1px; border: 0; background: var(--line); margin-block: 2.4em; }
.blog-prose code {
  padding: 0.12em 0.42em;
  border: 0;
  border-radius: 6px;
  background: var(--surface);
  font-family: var(--font-mono);
  font-size: 0.86em;
  color: var(--fg);
}

/* FAQ (component styles in 03) and the closing call to action */
.blog-prose > .blog-faq { margin-top: 1em; }
.blog-faq details > p { font-size: 0.98rem; }
.blog-prose > .blog-cta { margin-top: 2.6em; }
.blog-cta {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  padding: clamp(22px, 3vw, 32px);
  border: 1px solid color-mix(in srgb, var(--blue) 14%, transparent);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--blue) 6%, var(--bg));
}
.blog-cta::before {
  content: "";
  width: 44px; height: 44px;
  border-radius: 14px;
  background: #fff url("../images/favicon.svg") center / 22px no-repeat;
  box-shadow: var(--shadow-xs);
}
.blog-cta p { margin: 0; font-size: 1rem; line-height: 1.65; color: var(--fg); }

/* related reading: two stone cards, a little wider than the column */
.blog-related {
  margin: clamp(64px, 8vw, 112px) calc(50% - var(--blog-wide, 880px) / 2) 0;
  padding: 0;
  border: 0;
}
.blog-related h2 {
  margin: 0 0 22px;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.6rem, 1.3rem + 0.9vw, 2.15rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-transform: none;
  color: var(--fg);
}
.blog-related-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  border: 0;
  background: none;
}
.blog-related-grid a {
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-height: 176px;
  padding: 26px 26px 22px;
  border-radius: var(--radius-lg);
  background: var(--surface);
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.25rem, 1.12rem + 0.35vw, 1.42rem);
  line-height: 1.18;
  letter-spacing: -0.016em;
  color: var(--fg);
  text-wrap: balance;
  transition: background-color 0.3s var(--ease);
}
.blog-related-grid a:hover { background: var(--surface-hover); }
.blog-related-grid a span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 0.84rem;
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
}
.blog-related-grid a span::after {
  content: "";
  width: 32px; height: 32px; flex: none;
  border-radius: 50%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8h9.2M8.6 4.2 12.4 8l-3.8 3.8' fill='none' stroke='%23095bc0' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat,
    var(--surface-2);
  transition: transform 0.3s var(--ease);
}
.blog-related-grid a:hover span::after {
  transform: translateX(2px);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8h9.2M8.6 4.2 12.4 8l-3.8 3.8' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat,
    var(--blue);
}

/* CJK/Thai serif headings need more leading than the Latin 1.0–1.15 */
:is([lang^="zh"], [lang="ja"], [lang="ko"], [lang="th"]) :is(.blog-article-hero h1, .blog-prose > h2, .blog-related h2) { line-height: 1.3; }
:is([lang^="zh"], [lang="ja"], [lang="ko"], [lang="th"]) :is(.blog-card h2, .blog-card h3, .blog-related-grid a, .blog-prose > blockquote) { line-height: 1.42; }
[lang="th"] :is(.blog-article-hero h1, .blog-prose > h2, .blog-card h2) { line-height: 1.4; }

/* sentence-case labels carry no tracking in any script. 70-i18n tracks the old
   mono labels by class at specificity (0,2,2); the doubled classes outrank it. */
main .blog-card-body .blog-cat.blog-cat, main .blog-article-hero .blog-cat.blog-cat,
main .blog-card-body .blog-meta.blog-meta, main .blog-article-hero .blog-byline.blog-byline,
main .blog-hero.blog-hero .blog-filter button { letter-spacing: 0; }

/* Japanese headings: break at phrase boundaries, not inside words */
[lang="ja"] :is(.blog-hero h1, .blog-card h2, .blog-card h3, .blog-article-hero h1, .blog-prose > h2, .blog-related-grid a) { word-break: auto-phrase; overflow-wrap: anywhere; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 900px) {
  .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .blog-hero > .container { grid-template-columns: minmax(0, 1fr); }
  .blog-filter { grid-column: 1; justify-self: start; margin-top: 26px; }
  .blog-card-featured { grid-template-columns: minmax(0, 1fr); padding: 10px; border-radius: var(--radius-lg); }
  .blog-card-featured .blog-card-cover { aspect-ratio: 16 / 9; border-radius: 16px; }
  .blog-card-featured .blog-card-cover img { object-fit: cover; }
  .blog-card-featured .blog-card-body { padding: 22px 14px 12px; gap: 14px; }
}
@media (max-width: 720px) {
  .blog-hero { border-radius: var(--radius-lg); }
  .blog-article-hero::before, .blog-article-hero.t-ink::before { border-radius: var(--radius-lg); }
  .blog-cover { border-radius: 18px; }
}
@media (max-width: 640px) {
  .blog-grid { grid-template-columns: minmax(0, 1fr); }
  .blog-filter { gap: 6px; }
  .blog-hero .blog-filter button { height: 40px; padding: 0 14px; font-size: 0.88rem; }
  .blog-article-hero h1 { font-size: clamp(2rem, 8.6vw, 2.6rem); line-height: 1.06; }
  .blog-byline { max-width: 100%; text-align: left; font-size: 0.88rem; }
  .blog-prose { --prose-fs: 1.06rem; }
  .blog-prose > blockquote { font-size: 1.22rem; }
  .blog-figure { overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
  .blog-figure img { min-width: 540px; }
  .blog-figure figcaption { position: sticky; left: 0; max-width: calc(100vw - 32px - 2 * clamp(14px, 2.6vw, 36px)); text-align: left; margin-left: 0; }
  .blog-cta { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .blog-related-grid { grid-template-columns: minmax(0, 1fr); }
  .blog-related-grid a { min-height: 0; }
}

/* ===== 40-coins.css ===== */
/* ==========================================================================
   40 — Coin landing pages (generated by tools/build_coin_pages.py)
   --------------------------------------------------------------------------
   21 coins × 10 locales. Hero = .page-hero.v3-stone-hero.v3-coin-hero (11-pages,
   tools/v3_pages.py) with a coin "ticker pill" above the serif h1 and an engraved
   medallion of the coin behind the copy (.page-art, see 11-pages). Later blocks: a spec sheet next to the intro, icon
   cards, a framed flow diagram with an editorial link list, recovery cards,
   a two-column FAQ and a quiet night CTA.
   Everything is scoped to body[data-route-type="coin"] or coin-only classes
   (.coin-*). The page accent stays Ownbit blue.
   ========================================================================== */

/* ---- hero copy: coin ticker pill → serif headline → lede -------------------- */
body[data-route-type="coin"] .page-copy:has(> .coin-hero-row) {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
}
body[data-route-type="coin"] .page-copy:has(> .coin-hero-row) > *,
body[data-route-type="coin"] .coin-hero-row h1,
body[data-route-type="coin"] .coin-hero-row p { grid-column: 1 / -1; }
body[data-route-type="coin"] .coin-hero-row,
body[data-route-type="coin"] .coin-hero-row > div { display: contents; }

/* the pill is drawn by the grid container itself, behind icon + ticker */
body[data-route-type="coin"] .page-copy:has(> .coin-hero-row)::before {
  content: "";
  grid-row: 1;
  grid-column: 1 / 3;
  align-self: stretch;
  border-radius: var(--pill);
  background: var(--surface);
  box-shadow: var(--shadow-xs), inset 0 0 0 1px var(--line);
}
body[data-route-type="coin"] .coin-hero-icon {
  grid-row: 1;
  grid-column: 1;
  position: relative;
  z-index: 1;
  width: 34px;
  height: 34px;
  margin: 5px 10px 5px 5px;
  border-radius: 50%;
  filter: drop-shadow(0 2px 5px rgba(14, 17, 22, 0.16));
  opacity: 1;
}
body[data-route-type="coin"] .page-copy:has(> .coin-hero-row) > .eyebrow {
  grid-row: 1;
  grid-column: 2;
  position: relative;
  z-index: 1;
  padding-right: 18px;
  font-family: var(--font-sans);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--fg);
}
body[data-route-type="coin"] .page-copy:has(> .coin-hero-row) > .eyebrow::before { content: none; }

body[data-route-type="coin"] .coin-hero-row h1 {
  margin: clamp(22px, 2.4vw, 32px) 0 clamp(16px, 1.6vw, 22px);
}
body[data-route-type="coin"] .coin-hero-row p {
  max-width: 540px;
  font-size: var(--fs-lede);
  line-height: 1.6;
  color: var(--muted);
}
body[data-route-type="coin"] .page-hero .tag-row { margin-top: 26px; }
body[data-route-type="coin"] .page-hero .hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }

/* legacy markup without the row wrapper (tra/): keep the icon in colour */
.coin-hero-icon { width: 64px; height: 64px; border-radius: 50%; flex: none; }

/* ---- hero summary: one white panel split by hairlines (like /trust/ stats) -- */
body[data-route-type="coin"] .page-hero .page-summary-grid {
  gap: 0;
  padding: 6px 0;
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-xs);
}
body[data-route-type="coin"] .page-hero .page-summary {
  padding: 20px 28px 22px;
  border-radius: 0;
  background: transparent;
}
body[data-route-type="coin"] .page-hero .page-summary:hover { box-shadow: none; }
body[data-route-type="coin"] .page-hero .page-summary + .page-summary { border-left: 1px solid var(--line); }
body[data-route-type="coin"] .page-summary p::first-letter { text-transform: uppercase; }

/* ---- "What is <coin>?": intro beside a spec sheet ------------------------------ */
body[data-route-type="coin"] .section:has(> .container > .about-intro) > .container {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.68fr);
  column-gap: clamp(40px, 6vw, 96px);
  align-items: start;
}
body[data-route-type="coin"] .section:has(> .container > .about-intro) > .container > * { grid-column: 1; }
body[data-route-type="coin"] .section:has(> .container > .about-intro) > .container > .page-summary-grid {
  grid-column: 2;
  grid-row: 1 / span 3;
  align-self: center;
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  padding: 6px 30px;
  border-radius: var(--radius-lg);
  background: var(--surface);
}
body[data-route-type="coin"] .section:has(> .container > .about-intro) .page-summary {
  padding: 22px 0 24px;
  border-radius: 0;
  background: transparent;
}
body[data-route-type="coin"] .section:has(> .container > .about-intro) .page-summary + .page-summary { border-top: 1px solid var(--line); }
body[data-route-type="coin"] .section:has(> .container > .about-intro) .summary-label {
  margin-bottom: 6px;
  font-size: 0.84rem;
  font-weight: 500;
  color: var(--muted);
}
body[data-route-type="coin"] .section:has(> .container > .about-intro) .page-summary p {
  font-family: var(--font-serif);
  font-size: var(--fs-h3-serif);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--fg);
}

/* ---- "<coin> in Ownbit" icon cards ----------------------------------------------- */
body[data-route-type="coin"] .page-card-grid > .info-card { padding: 30px 28px 32px; }
body[data-route-type="coin"] .page-card-grid > .info-card .card-icon { width: 48px; height: 48px; border-radius: 14px; margin-bottom: 22px; }
body[data-route-type="coin"] .page-card-grid > .info-card h3 { font-size: 1.2rem; margin-bottom: 10px; }
body[data-route-type="coin"] .page-card-grid > .info-card p::first-letter { text-transform: uppercase; }

/* ---- "How <coin> works": framed flow diagram + editorial link list ---------------- */
body[data-route-type="coin"] .split-section { align-items: center; }
body[data-route-type="coin"] .split-visual {
  padding: clamp(14px, 1.8vw, 26px);
  border-radius: var(--radius-xl);
  background: var(--surface);
}
body[data-route-type="coin"] .split-visual img {
  padding: clamp(6px, 1vw, 14px);
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: var(--shadow-sm);
}
body[data-route-type="coin"] .split-copy > .link-row {
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  width: 100%;
  margin-top: 10px;
  border-top: 1px solid var(--line);
}
body[data-route-type="coin"] .split-copy > .link-row .link-chip {
  justify-content: space-between;
  min-height: 58px;
  padding: 0 4px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  font-size: 1rem;
  color: var(--fg);
  transition: color 0.2s var(--ease), padding 0.25s var(--ease);
}
body[data-route-type="coin"] .split-copy > .link-row .link-chip::after { color: var(--accent-ink); }
body[data-route-type="coin"] .split-copy > .link-row .link-chip:hover { background: transparent; color: var(--accent-ink); padding-left: 10px; }

/* ---- recovery & compatibility: two guide cards + related coins -------------------- */
body[data-route-type="coin"] .recovery-note {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 26px;
  margin-top: 0;
  padding: 0;
  border-radius: 0;
  background: none;
}
body[data-route-type="coin"] .recovery-note > .link-row:first-child {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
body[data-route-type="coin"] .recovery-note > .link-row:first-child .link-chip {
  gap: 18px;
  min-height: 104px;
  padding: 24px 28px 24px 24px;
  border: 0;
  border-radius: var(--radius-lg);
  background: var(--surface);
  font-size: 1.08rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.35;
  white-space: normal;
  transition: background-color 0.2s var(--ease), box-shadow 0.3s var(--ease), transform 0.3s var(--ease);
}
body[data-route-type="coin"] .recovery-note > .link-row:first-child .link-chip:hover {
  background: var(--surface);
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}
body[data-route-type="coin"] .recovery-note > .link-row:first-child .link-chip::before {
  content: "";
  flex: none;
  width: 52px; height: 52px;
  border-radius: 16px;
  background: var(--blue-50) center / 24px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23095bc0' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='15.5' r='4'/%3E%3Cpath d='M10.9 12.6 19.5 4M16 7.5l2.5 2.5M18 5.5l2 2'/%3E%3C/svg%3E");
}
body[data-route-type="coin"] .recovery-note > .link-row:first-child .link-chip + .link-chip::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23095bc0' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='5.5' r='2.5'/%3E%3Ccircle cx='5.5' cy='17.5' r='2.5'/%3E%3Ccircle cx='18.5' cy='17.5' r='2.5'/%3E%3Cpath d='M10.8 7.7 6.7 15.3M13.2 7.7l4.1 7.6M8 17.5h8'/%3E%3C/svg%3E");
}
body[data-route-type="coin"] .recovery-note > .link-row:first-child .link-chip::after { margin-left: auto; color: var(--accent-ink); }

/* related coin wallets: pills carrying the coin's own mark */
body[data-route-type="coin"] .recovery-note > .link-row + .link-row { gap: 8px; }
body[data-route-type="coin"] .recovery-note > .link-row + .link-row .link-chip {
  gap: 10px;
  min-height: 46px;
  padding: 0 18px 0 7px;
  border-color: transparent;
  background: var(--surface);
}
body[data-route-type="coin"] .recovery-note > .link-row + .link-row .link-chip:hover { box-shadow: var(--shadow-sm); }
body[data-route-type="coin"] .recovery-note > .link-row + .link-row .link-chip::before {
  content: "";
  flex: none;
  width: 32px; height: 32px;
  border-radius: 50%;
  background-color: var(--surface-2);
  background-position: center;
  background-size: 100%;
  background-repeat: no-repeat;
}
body[data-route-type="coin"] .recovery-note a[href*="/bitcoin-multisig-wallet/"]::before { background-image: url("../images/coins/BTC.svg"); }
body[data-route-type="coin"] .recovery-note a[href*="/bitcoin-cash-multisig-wallet/"]::before { background-image: url("../images/coins/BCH.svg"); }
body[data-route-type="coin"] .recovery-note a[href*="/litecoin-multisig-wallet/"]::before { background-image: url("../images/coins/LTC.svg"); }
body[data-route-type="coin"] .recovery-note a[href*="/dogecoin-multisig-wallet/"]::before { background-image: url("../images/coins/DOGE.svg"); }
body[data-route-type="coin"] .recovery-note a[href*="/dash-multisig-wallet/"]::before { background-image: url("../images/coins/DASH.svg"); }
body[data-route-type="coin"] .recovery-note a[href*="/zcash-multisig-wallet/"]::before { background-image: url("../images/coins/ZEC.svg"); }
body[data-route-type="coin"] .recovery-note a[href*="/ethereum-multisig-wallet/"]::before { background-image: url("../images/coins/ETH.svg"); }
body[data-route-type="coin"] .recovery-note a[href*="/bnb-smart-chain-multisig-wallet/"]::before { background-image: url("../images/coins/BSC.svg"); }
body[data-route-type="coin"] .recovery-note a[href*="/polygon-multisig-wallet/"]::before { background-image: url("../images/coins/MATIC.svg"); }
body[data-route-type="coin"] .recovery-note a[href*="/arbitrum-multisig-wallet/"]::before { background-image: url("../images/coins/ARB.svg"); }
body[data-route-type="coin"] .recovery-note a[href*="/optimism-multisig-wallet/"]::before { background-image: url("../images/coins/OP.svg"); }
body[data-route-type="coin"] .recovery-note a[href*="/hyperevm-multisig-wallet/"]::before { background-image: url("../images/coins/HYPE.svg"); }
body[data-route-type="coin"] .recovery-note a[href*="/tron-multisig-wallet/"]::before { background-image: url("../images/coins/TRX.svg"); }
body[data-route-type="coin"] .recovery-note a[href*="/solana-multisig-wallet/"]::before { background-image: url("../images/coins/SOL.svg"); }
body[data-route-type="coin"] .recovery-note a[href*="/ripple-wallet/"]::before { background-image: url("../images/coins/XRP.svg"); }
body[data-route-type="coin"] .recovery-note a[href*="/stellar-multisig-wallet/"]::before { background-image: url("../images/coins/XLM.svg"); }
body[data-route-type="coin"] .recovery-note a[href*="/cardano-wallet/"]::before { background-image: url("../images/coins/ADA.svg"); }
body[data-route-type="coin"] .recovery-note a[href*="/monero-wallet/"]::before { background-image: url("../images/coins/XMR.svg"); }
body[data-route-type="coin"] .recovery-note a[href*="/filecoin-wallet/"]::before { background-image: url("../images/coins/FIL.svg"); }
body[data-route-type="coin"] .recovery-note a[href*="/stacks-wallet/"]::before { background-image: url("../images/coins/STX.svg"); }
body[data-route-type="coin"] .recovery-note a[href*="/ton-wallet/"]::before { background-image: url("../images/coins/TON.svg"); }

/* ---- FAQ: heading beside the questions ------------------------------------------- */
body[data-route-type="coin"] .coin-faq-list { max-width: 820px; }
@media (min-width: 961px) {
  body[data-route-type="coin"] .coin-faq > .container {
    display: grid;
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
    gap: clamp(40px, 6vw, 96px);
    align-items: start;
  }
  body[data-route-type="coin"] .coin-faq .section-heading {
    position: sticky;
    top: calc(var(--header-h) + 32px);
    margin: 0;
  }
  body[data-route-type="coin"] .coin-faq .section-heading h2 { font-size: var(--fs-h2-sm); }
  body[data-route-type="coin"] .coin-faq-list { max-width: none; }
}

/* ---- closing CTA: one quiet night band, centred ---------------------------------- */
body[data-route-type="coin"] .section.t-ink:has(.page-cta) {
  isolation: isolate;
  overflow: hidden;
  padding: clamp(72px, 8vw, 116px) 0;
  background:
    radial-gradient(55% 70% at 50% 118%, rgba(13, 128, 254, 0.3), transparent 72%),
    radial-gradient(40% 50% at 50% -10%, rgba(150, 196, 255, 0.08), transparent 70%),
    var(--night);
}
body[data-route-type="coin"] .section.t-ink:has(.page-cta)::before {
  content: "";
  position: absolute;
  left: 50%; top: 100%;
  z-index: -1;
  width: 1500px; height: 1500px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: repeating-radial-gradient(circle, rgba(255, 255, 255, 0.06) 0 1px, transparent 1px 46px);
  -webkit-mask-image: radial-gradient(circle, transparent 0 150px, #000 260px, transparent 720px);
          mask-image: radial-gradient(circle, transparent 0 150px, #000 260px, transparent 720px);
  pointer-events: none;
}
body[data-route-type="coin"] .t-ink .page-cta {
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  gap: 34px;
  padding: 0;
  border-radius: 0;
  background: none;
  text-align: center;
  overflow: visible;
}
body[data-route-type="coin"] .t-ink .page-cta .section-heading { justify-items: center; }
body[data-route-type="coin"] .t-ink .page-cta .section-heading h2 { font-size: var(--fs-h2); }
body[data-route-type="coin"] .t-ink .page-cta .section-heading p { max-width: 560px; margin-inline: auto; }
body[data-route-type="coin"] .t-ink .page-cta .cta-actions { justify-content: center; }

/* ---- responsive ------------------------------------------------------------------------- */
@media (max-width: 960px) {
  body[data-route-type="coin"] .page-hero .page-summary-grid { padding: 0 26px; }
  body[data-route-type="coin"] .page-hero .page-summary { padding: 20px 0 22px; }
  body[data-route-type="coin"] .page-hero .page-summary + .page-summary { border-left: 0; border-top: 1px solid var(--line); }
  body[data-route-type="coin"] .section:has(> .container > .about-intro) > .container { grid-template-columns: minmax(0, 1fr); }
  body[data-route-type="coin"] .section:has(> .container > .about-intro) > .container > .page-summary-grid {
    grid-column: 1;
    grid-row: auto;
    margin-top: 36px;
  }
}
@media (max-width: 720px) {
  body[data-route-type="coin"] .page-hero .page-summary-grid { padding: 0 22px; }
  body[data-route-type="coin"] .page-hero .page-summary { padding: 18px 0 20px; }
  body[data-route-type="coin"] .section:has(> .container > .about-intro) > .container > .page-summary-grid { padding: 2px 22px; }
  body[data-route-type="coin"] .recovery-note > .link-row:first-child { grid-template-columns: minmax(0, 1fr); }
  body[data-route-type="coin"] .recovery-note > .link-row:first-child .link-chip { min-height: 88px; padding: 18px 20px 18px 18px; font-size: 1rem; }
  body[data-route-type="coin"] .recovery-note > .link-row:first-child .link-chip::before { width: 46px; height: 46px; border-radius: 14px; }
  body[data-route-type="coin"] .t-ink .page-cta .cta-actions { width: 100%; }
  body[data-route-type="coin"] .t-ink .page-cta .cta-actions .btn { flex: 1 1 auto; }
}

/* ===== 51-family.css ===== */
/* ==========================================================================
   51 — Family MultiSig page (main.family-ms · body[data-route-type="family"])
   v3: the hero is the shared photo hero (11-pages). Below it: stone plan cards
   with signer-key meters, the 416-day accident-protection timeline next to a
   framed illustration, coin-logo chain tiles, white practice cards on stone
   and a quiet "vault dial" CTA band. Everything styles with the theme slots
   (--bg --fg --muted --line --accent-ink --surface --surface-2 …).
   ========================================================================== */

/* ---- illustration frames ------------------------------------------------ */
.family-ms .family-ms-hero-art { position: relative; }
.family-ms .family-ms-hero-art svg { width: 100%; height: auto; display: block; }

/* v2 blueprint grid + crosshair corner marks are retired */
.family-ms svg.fh > rect:not([class]), .family-ms svg.fd > rect:not([class]),
.family-ms svg.fh > g:not([class]), .family-ms svg.fd > g:not([class]) { display: none; }

/* shared SVG type: sans UI, serif display number */
.family-ms .fh-mono, .family-ms .fd-mono, .family-ms .fh-sans, .family-ms .fd-sans { font-family: var(--font-sans); }
.family-ms .fh-ltr, .family-ms .fd-ltr { font-size: 32px; font-weight: 600; letter-spacing: -0.02em; }
.family-ms .fh-chk, .family-ms .fd-chk { font-size: 15px; font-weight: 700; }
.family-ms .fh-cnt, .family-ms .fd-cnt { font-family: var(--font-serif); font-size: 44px; font-weight: 400; letter-spacing: -0.03em; }
.family-ms .fh-lbl, .family-ms .fd-lbl { font-size: 12.5px; font-weight: 500; letter-spacing: 0; }
.family-ms .fh-seed text { font-size: 11px; letter-spacing: 0.01em; font-weight: 500; }

/* soft, rounded geometry (CSS geometry properties; the attributes stay as fallback) */
.family-ms .fh-vault, .family-ms .fd-vault { rx: 18px; }
.family-ms .fh-tag, .family-ms .fd-tag { rx: 13px; }
.family-ms .fh-seed rect { rx: 13px; }
.family-ms .fh-lock rect, .family-ms .fd-clock rect { rx: 12px; }
.family-ms .fh-seg, .family-ms .fd-track, .family-ms .fd-fill { rx: 1.5px; }

/* ---- hero art: dark devices on the glass card -------------------------- */
.family-ms .v3-photo-hero .page-visual-card {
  background: linear-gradient(160deg, rgba(14, 26, 50, 0.58), rgba(6, 12, 24, 0.66));
  border-color: rgba(255, 255, 255, 0.16);
  box-shadow: 0 24px 60px rgba(3, 8, 18, 0.28);
}
.family-ms .fh-anim { animation: none 7s ease-in-out infinite both; }
.family-ms .fh-phone > rect:not([class]) { fill: #2b313b; }
.family-ms .fh-body { fill: #121825; stroke: rgba(255, 255, 255, 0.16); stroke-width: 1; }
.family-ms .fh-screen { fill: #070a10; stroke: rgba(255, 255, 255, 0.05); stroke-width: 1; }
.family-ms .fh-notch { fill: #1b2333; stroke: rgba(255, 255, 255, 0.08); stroke-width: 1; }
.family-ms .fh-ui { fill: rgba(255, 255, 255, 0.14); }
.family-ms .fh-ui-dim { fill: rgba(255, 255, 255, 0.08); }
.family-ms .fh-ltr { fill: #5aa7ff; }
.family-ms .fh-tag { fill: rgba(13, 128, 254, 0.18); stroke: #5aa7ff; stroke-width: 1; }
.family-ms .fh-chk { fill: #5aa7ff; }
.family-ms .fh-wire { fill: none; stroke: rgba(255, 255, 255, 0.24); stroke-width: 1.25; stroke-dasharray: 2 5; stroke-linecap: round; }
.family-ms .fh-wire-dim { stroke: rgba(255, 255, 255, 0.14); }
.family-ms .fh-wire-a, .family-ms .fh-wire-b { stroke: #5aa7ff; }
.family-ms .fh-halo { opacity: 1; }
.family-ms .fh-vault { fill: #121825; stroke: rgba(90, 167, 255, 0.85); stroke-width: 1; }
.family-ms .fh-glyph { fill: none; stroke: #f3f5f9; stroke-opacity: 0.72; stroke-width: 1.2; }
.family-ms .fh-glyph circle { fill: #f3f5f9; stroke: none; }
.family-ms .fh-cnt { fill: #a9d0ff; }
.family-ms .fh-lbl { fill: rgba(243, 245, 249, 0.78); }
.family-ms .fh-seg { fill: #0d80fe; }
.family-ms .fh-lock rect { fill: #121825; stroke: #5aa7ff; stroke-width: 1; }
.family-ms .fh-lock path { fill: none; stroke: #5aa7ff; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.family-ms .fh-lock-chk { stroke-dasharray: 14; stroke-dashoffset: 0; }
.family-ms .fh-seed rect { fill: rgba(255, 255, 255, 0.06); stroke: rgba(255, 255, 255, 0.18); stroke-width: 1; }
.family-ms .fh-seed circle { fill: #5aa7ff; }
.family-ms .fh-seed text { fill: rgba(243, 245, 249, 0.74); }

.family-ms .fh-ltr-a { animation-name: fh-kLtrA; } .family-ms .fh-tag-a { animation-name: fh-kTagA; } .family-ms .fh-chk-a { animation-name: fh-kChkA; } .family-ms .fh-wire-a { animation-name: fh-kWireA; }
.family-ms .fh-ltr-b { animation-name: fh-kLtrB; } .family-ms .fh-tag-b { animation-name: fh-kTagB; } .family-ms .fh-chk-b { animation-name: fh-kChkB; } .family-ms .fh-wire-b { animation-name: fh-kWireB; }
.family-ms .fh-seg-1 { animation-name: fh-kSeg1; } .family-ms .fh-seg-2 { animation-name: fh-kSeg2; }
.family-ms .fh-cnt { animation-name: fh-kCnt; } .family-ms .fh-halo { animation-name: fh-kHalo; } .family-ms .fh-vault { animation-name: fh-kVault; }
.family-ms .fh-lock { animation-name: fh-kLock; } .family-ms .fh-lock .fh-lock-chk { animation: fh-kLockChk 7s ease-in-out infinite both; }

/* story: A signs · B signs · 2/2 reached, vault glows and locks */
@keyframes fh-kLtrA { 0%, 6%, 96%, 100% { fill: #6b7383; } 12%, 90% { fill: #5aa7ff; } }
@keyframes fh-kTagA { 0%, 6%, 96%, 100% { stroke: rgba(255, 255, 255, 0.2); fill: transparent; } 12%, 90% { stroke: #5aa7ff; fill: rgba(13, 128, 254, 0.18); } }
@keyframes fh-kChkA { 0%, 8%, 96%, 100% { opacity: 0; } 13%, 90% { opacity: 1; } }
@keyframes fh-kWireA { 0%, 10% { stroke-dashoffset: 0; stroke: rgba(255, 255, 255, 0.24); } 14% { stroke: #5aa7ff; } 30% { stroke-dashoffset: -49; } 90% { stroke-dashoffset: -49; stroke: #5aa7ff; } 96%, 100% { stroke-dashoffset: -49; stroke: rgba(255, 255, 255, 0.24); } }
@keyframes fh-kLtrB { 0%, 28%, 96%, 100% { fill: #6b7383; } 34%, 90% { fill: #5aa7ff; } }
@keyframes fh-kTagB { 0%, 28%, 96%, 100% { stroke: rgba(255, 255, 255, 0.2); fill: transparent; } 34%, 90% { stroke: #5aa7ff; fill: rgba(13, 128, 254, 0.18); } }
@keyframes fh-kChkB { 0%, 30%, 96%, 100% { opacity: 0; } 35%, 90% { opacity: 1; } }
@keyframes fh-kWireB { 0%, 32% { stroke-dashoffset: 0; stroke: rgba(255, 255, 255, 0.24); } 36% { stroke: #5aa7ff; } 52% { stroke-dashoffset: -49; } 90% { stroke-dashoffset: -49; stroke: #5aa7ff; } 96%, 100% { stroke-dashoffset: -49; stroke: rgba(255, 255, 255, 0.24); } }
@keyframes fh-kSeg1 { 0%, 12%, 96%, 100% { fill: rgba(255, 255, 255, 0.16); } 16%, 90% { fill: #0d80fe; } }
@keyframes fh-kSeg2 { 0%, 34%, 96%, 100% { fill: rgba(255, 255, 255, 0.16); } 38%, 90% { fill: #0d80fe; } }
@keyframes fh-kCnt { 0%, 52%, 96%, 100% { fill: #8a93a2; opacity: 0.6; } 60%, 90% { fill: #a9d0ff; opacity: 1; } }
@keyframes fh-kHalo { 0%, 52%, 96%, 100% { opacity: 0; } 62%, 90% { opacity: 1; } }
@keyframes fh-kVault { 0%, 52%, 96%, 100% { stroke: rgba(255, 255, 255, 0.2); } 62%, 90% { stroke: rgba(90, 167, 255, 0.85); } }
@keyframes fh-kLock { 0%, 56%, 96%, 100% { opacity: 0.45; } 66%, 90% { opacity: 1; } }
@keyframes fh-kLockChk { 0%, 58%, 96%, 100% { stroke-dashoffset: 14; } 68%, 90% { stroke-dashoffset: 0; } }

/* ---- split art: light devices on a white (or stone) panel ------------- */
.family-ms .workflow-visual {
  padding: clamp(18px, 2.6vw, 40px);
  background:
    radial-gradient(60% 55% at 50% 48%, rgba(13, 128, 254, 0.07), rgba(13, 128, 254, 0) 70%),
    var(--surface);
}
.family-ms .fd-anim { animation: none 8s ease-in-out infinite both; }
.family-ms .fd-phone > rect:not([class]) { fill: #d6d2c8; }
.family-ms .fd-body { fill: #f5f4f0; stroke: rgba(14, 17, 22, 0.16); stroke-width: 1; }
.family-ms .fd-screen { fill: #0e1116; }
.family-ms .fd-notch { fill: #1b2029; stroke: rgba(255, 255, 255, 0.1); stroke-width: 1; }
.family-ms .fd-ui { fill: rgba(255, 255, 255, 0.16); }
.family-ms .fd-ui-dim { fill: rgba(255, 255, 255, 0.09); }
.family-ms .fd-ltr { fill: #f3f5f9; }
.family-ms .fd-tag { fill: rgba(13, 128, 254, 0.2); stroke: #5aa7ff; stroke-width: 1; }
.family-ms .fd-chk { fill: #5aa7ff; }
.family-ms .fd-wire { fill: none; stroke: rgba(14, 17, 22, 0.24); stroke-width: 1.25; stroke-dasharray: 2 5; stroke-linecap: round; }
.family-ms .fd-halo { opacity: 1; }
.family-ms .fd-vault { fill: #0e1116; stroke: rgba(13, 128, 254, 0.85); stroke-width: 1; }
.family-ms .fd-glyph { fill: none; stroke: #f3f5f9; stroke-opacity: 0.72; stroke-width: 1.2; }
.family-ms .fd-cnt { fill: #5aa7ff; }
.family-ms .fd-lbl { fill: rgba(243, 245, 249, 0.78); }
.family-ms .fd-track { fill: rgba(255, 255, 255, 0.16); }
.family-ms .fd-fill { fill: #0d80fe; transform-box: view-box; transform-origin: 236px 0; }
.family-ms .fd-clock rect { fill: #ffffff; stroke: rgba(14, 17, 22, 0.16); stroke-width: 1; }
.family-ms .fd-clock circle { fill: none; stroke: #0e1116; stroke-width: 1.2; }
.family-ms .fd-clock path { fill: none; stroke: #0e1116; stroke-width: 1.4; stroke-linecap: round; }
.family-ms .fd-clock .fd-hand { stroke: #0d80fe; transform-box: view-box; transform-origin: 280px 332px; }
.family-ms .fd-clock .fd-pin { fill: #0d80fe; stroke: none; }

.family-ms .fd-phone-b { animation-name: fd-kPhoneB; }
.family-ms .fd-ltr-b { animation-name: fd-kLtrB; } .family-ms .fd-tag-b { animation-name: fd-kTagB; } .family-ms .fd-chk-b { animation-name: fd-kChkB; }
.family-ms .fd-wire-b { animation-name: fd-kWireB; } .family-ms .fd-wire-c { animation-name: fd-kWireC; }
.family-ms .fd-fill { animation-name: fd-kFill; } .family-ms .fd-cnt { animation-name: fd-kCnt; } .family-ms .fd-halo { animation-name: fd-kHalo; } .family-ms .fd-vault { animation-name: fd-kVault; }
.family-ms .fd-clock { animation-name: fd-kClock; } .family-ms .fd-hand { animation: fd-kHand 8s linear infinite; }
/* wire A keeps flowing */
.family-ms .fd-wire-a { animation: fd-kWireA 1.6s linear infinite; stroke: #0d80fe; }

/* story: 0–28% normal · 28–70% signer B goes quiet, the 416-day bar fills · 70–92% vault unlocks for A */
@keyframes fd-kPhoneB { 0%, 26%, 94%, 100% { opacity: 1; } 36%, 84% { opacity: 0.5; } }
@keyframes fd-kLtrB { 0%, 26%, 94%, 100% { fill: #f3f5f9; } 36%, 84% { fill: #8a93a2; } }
@keyframes fd-kTagB { 0%, 26%, 94%, 100% { stroke: #5aa7ff; fill: rgba(13, 128, 254, 0.2); } 36%, 84% { stroke: rgba(255, 255, 255, 0.22); fill: transparent; } }
@keyframes fd-kChkB { 0%, 26%, 94%, 100% { opacity: 1; } 36%, 84% { opacity: 0.25; } }
@keyframes fd-kWireB { 0%, 26%, 94%, 100% { stroke: #0d80fe; stroke-dashoffset: 0; } 36%, 84% { stroke: rgba(14, 17, 22, 0.18); stroke-dashoffset: 0; } }
@keyframes fd-kWireA { 0% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -49; } }
@keyframes fd-kWireC { 0%, 68% { stroke: rgba(14, 17, 22, 0.24); stroke-dashoffset: 0; } 72% { stroke: #0d80fe; } 88% { stroke-dashoffset: -35; stroke: #0d80fe; } 94%, 100% { stroke-dashoffset: -35; stroke: rgba(14, 17, 22, 0.24); } }
@keyframes fd-kFill { 0%, 30% { transform: scaleX(0); } 70%, 92% { transform: scaleX(1); } 96%, 100% { transform: scaleX(0); } }
@keyframes fd-kCnt { 0%, 30% { fill: #f3f5f9; } 40%, 68% { fill: #8a93a2; } 74%, 92% { fill: #5aa7ff; } 100% { fill: #f3f5f9; } }
@keyframes fd-kHalo { 0%, 68%, 94%, 100% { opacity: 0; } 76%, 90% { opacity: 1; } }
@keyframes fd-kVault { 0%, 68%, 94%, 100% { stroke: rgba(255, 255, 255, 0.14); } 76%, 90% { stroke: rgba(13, 128, 254, 0.85); } }
@keyframes fd-kClock { 0%, 28%, 94%, 100% { opacity: 0.55; } 34%, 90% { opacity: 1; } }
@keyframes fd-kHand { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .family-ms .fh-anim, .family-ms .fd-anim, .family-ms .fh-lock-chk, .family-ms .fd-hand, .family-ms .fd-wire-a { animation: none !important; }
}

/* ---- family plans: stone cards with a signer-key meter ------------------ */
.family-ms .family-ms-plan-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  background: none; border: 0;
}
.family-ms .family-ms-plan {
  --key-on: var(--blue);
  --key-off: var(--line-strong);
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-rows: auto auto auto 1fr;
  align-items: start;
  column-gap: 16px;
  min-height: 0;
  padding: 26px 28px 28px;
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--fg);
  outline: 0;
  transition: background-color 0.3s var(--ease), box-shadow 0.3s var(--ease), transform 0.3s var(--ease);
}
.family-ms .family-ms-plan::before { content: none; }
/* key meter: one pill per signer wallet, lit = signatures needed */
.family-ms .family-ms-plan::after {
  content: "";
  grid-row: 1; grid-column: 2;
  align-self: center; justify-self: start;
  width: 16px; height: 6px; border-radius: 3px;
  background: var(--key-on);
  box-shadow: 21px 0 0 var(--key-on);
}
.family-ms .family-ms-plan:nth-child(3)::after { box-shadow: 21px 0 0 var(--key-on), 42px 0 0 var(--key-on), 63px 0 0 var(--key-off); }

.family-ms .family-ms-plan-icon {
  grid-row: 1; grid-column: 1;
  width: 48px; height: 48px; margin: 0;
  display: grid; place-items: center;
  border-radius: 14px;
  background: var(--surface-2);
  color: var(--accent-ink);
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease);
}
.family-ms .family-ms-plan-icon svg { width: 24px; height: 24px; }
.family-ms .family-ms-plan-badge {
  grid-row: 1; grid-column: 3;
  align-self: center; justify-self: end;
  display: inline-flex; align-items: center;
  height: 30px; margin: 0; padding: 0 13px;
  border: 0; border-radius: var(--pill);
  background: var(--surface-2);
  font-family: var(--font-sans); font-size: 0.8rem; font-weight: 600; letter-spacing: 0; text-transform: none;
  color: var(--fg);
  white-space: nowrap;
}
.family-ms .family-ms-plan-badge::before { content: none; }
.family-ms .family-ms-plan h3 {
  grid-column: 1 / -1;
  margin: clamp(36px, 4vw, 52px) 0 0;
  font-family: var(--font-serif);
  font-size: var(--fs-h3-serif);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.1;
  text-wrap: balance;
  word-break: auto-phrase; /* keeps Japanese compounds (管理者) together */
}
.family-ms .family-ms-plan p { grid-column: 1 / -1; margin: 14px 0 0; color: var(--muted); font-size: 0.95rem; line-height: 1.6; }
.family-ms .family-ms-plan strong {
  grid-column: 1 / -1;
  align-self: end;
  position: relative;
  display: block;
  margin-top: 26px;
  padding: 14px 16px 15px 46px;
  border-radius: var(--radius);
  background: var(--surface-2);
  font-size: 0.88rem; font-weight: 500; line-height: 1.5;
  color: var(--fg);
}
.family-ms .family-ms-plan strong::before {
  content: "";
  position: absolute; left: 16px; top: 15px;
  width: 19px; height: 19px; border-radius: 50%;
  background: var(--blue-50) center / 11px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2 4.9 8.5 9.5 3.6' fill='none' stroke='%23095bc0' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.family-ms .family-ms-plan:hover { background: var(--surface-hover); }
.family-ms .family-ms-plan:hover .family-ms-plan-icon { background: var(--blue); color: #fff; }
.family-ms .t-ink .family-ms-plan strong::before { background-color: rgba(13, 128, 254, 0.24); }

/* ---- accident protection: a 3-step timeline in the split copy ---------- */
.family-ms .family-ms-flow {
  position: relative;
  display: grid;
  width: 100%;
  margin-top: 18px;
  border: 0;
}
.family-ms .family-ms-flow-card {
  position: relative;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  column-gap: 18px; row-gap: 4px;
  padding: 0 0 28px;
  border: 0;
}
.family-ms .family-ms-flow-card:last-child { padding-bottom: 0; }
/* connector from this step's node to the next one */
.family-ms .family-ms-flow-card:not(:last-child)::after {
  content: "";
  position: absolute; left: 17.5px; top: 44px; bottom: 8px;
  width: 1px;
  background: var(--line-strong);
}
/* the 416-day wait: a dashed blue run into the last step */
.family-ms .family-ms-flow-card:nth-last-child(2)::after {
  left: 17px; width: 2px;
  background: repeating-linear-gradient(180deg, var(--blue) 0 4px, transparent 4px 9px);
  opacity: 0.7;
}
.family-ms .family-ms-flow-num {
  grid-row: 1 / span 2; align-self: start;
  width: 36px; height: 36px; margin: 0; padding: 0;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line);
  font-family: var(--font-sans); font-size: 0.88rem; font-weight: 600; letter-spacing: 0;
  color: var(--accent-ink);
}
.family-ms .family-ms-flow-num::before { content: none; }
.family-ms .family-ms-flow-card:last-child .family-ms-flow-num {
  background: var(--blue); color: #fff;
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--blue) 14%, transparent);
}
.family-ms .family-ms-flow-card h3 { margin: 0; padding-top: 6px; font-size: 1.1rem; font-weight: 600; letter-spacing: -0.012em; }
.family-ms .family-ms-flow-card p { grid-column: 2; margin: 0; color: var(--muted); font-size: 0.95rem; line-height: 1.6; }

/* ---- multi-chain: heading beside a wall of coin tiles -------------------- */
.family-ms .section:has(.family-ms-chain-wall) > .container {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(32px, 5vw, 88px);
  align-items: center;
}
.family-ms .section:has(.family-ms-chain-wall) .section-heading { margin-bottom: 0; }
.family-ms .family-ms-chain-wall {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  background: none; border: 0;
}
.family-ms .family-ms-chain {
  display: flex; align-items: center; justify-content: flex-start; gap: 12px;
  min-height: 64px; padding: 0 14px;
  border: 0; border-radius: var(--radius);
  background: var(--surface);
  color: var(--fg);
  font-family: var(--font-sans); font-size: 0.95rem; font-weight: 600; letter-spacing: 0.01em; text-transform: none;
  transition: background-color 0.25s var(--ease), transform 0.25s var(--ease);
}
/* the coin files draw a 62/88 disc with its own soft shadow: a 44px box shows a ~31px coin */
.family-ms .family-ms-chain::before {
  content: "";
  width: 44px; height: 44px; flex: none;
  margin: 0 -6px 0 -8px;
  border: 0; border-radius: 0;
  background: transparent center / contain no-repeat;
  box-shadow: none;
  transition: transform 0.3s var(--ease);
}
.family-ms .family-ms-chain:hover { background: var(--surface-hover); color: var(--fg); }
.family-ms .family-ms-chain:hover::before { background-color: transparent; border-color: transparent; box-shadow: none; transform: scale(1.08); }
/* coin marks (same order in every locale) */
.family-ms .family-ms-chain:nth-child(1)::before { background-image: url("../images/coins/BTC.svg"); }
.family-ms .family-ms-chain:nth-child(2)::before { background-image: url("../images/coins/ETH.svg"); }
.family-ms .family-ms-chain:nth-child(3)::before { background-image: url("../images/coins/BSC.svg"); }
.family-ms .family-ms-chain:nth-child(4)::before { background-image: url("../images/coins/TRX.svg"); }
.family-ms .family-ms-chain:nth-child(5)::before { background-image: url("../images/coins/SOL.svg"); }
.family-ms .family-ms-chain:nth-child(6)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 88 88'%3E%3Cdefs%3E%3Cfilter id='s' x='-60%25' y='-60%25' width='220%25' height='220%25'%3E%3CfeDropShadow dx='0' dy='3' stdDeviation='6.5' flood-color='%230052ff' flood-opacity='0.4'/%3E%3C/filter%3E%3C/defs%3E%3Ccircle cx='44' cy='43' r='31' fill='%230052ff' filter='url(%23s)'/%3E%3Cpath d='M44 62c10.49 0 19-8.51 19-19S54.49 24 44 24c-9.96 0-18.13 7.66-18.93 17.4h25.16v3.2H25.07C25.87 54.34 34.04 62 44 62z' fill='%23fff'/%3E%3C/svg%3E"); }
.family-ms .family-ms-chain:nth-child(7)::before { background-image: url("../images/coins/OP.svg"); }
.family-ms .family-ms-chain:nth-child(8)::before { background-image: url("../images/coins/ARB.svg"); }
.family-ms .family-ms-chain:nth-child(9)::before { background-image: url("../images/coins/MATIC.svg"); }
.family-ms .family-ms-chain:nth-child(10)::before { background-image: url("../images/coins/BCH.svg"); }
.family-ms .family-ms-chain:nth-child(11)::before { background-image: url("../images/coins/LTC.svg"); }
.family-ms .family-ms-chain:nth-child(12)::before { background-image: url("../images/coins/DOGE.svg"); }

/* ---- security practices: icon cards ---------------------------------------- */
.family-ms .family-ms-practice {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  background: none; border: 0;
}
.family-ms .family-ms-practice-card {
  position: relative;
  display: flex; flex-direction: column; align-items: flex-start;
  min-height: 0;
  padding: 28px 28px 32px;
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--fg);
  outline: 0;
  transition: background-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.family-ms .family-ms-practice-card::before { content: none; }
.family-ms .family-ms-practice-card .card-icon {
  position: static;
  width: 48px; height: 48px; margin: 0 0 clamp(36px, 4vw, 56px);
  border: 0; border-radius: 14px;
  background: var(--blue-50);
  color: var(--blue-700);
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease);
}
.family-ms .t-ink .family-ms-practice-card .card-icon { background: rgba(13, 128, 254, 0.16); color: var(--blue-300); }
.family-ms .family-ms-practice-card .card-icon svg { width: 24px; height: 24px; }
.family-ms .family-ms-practice-card h3 { margin: 0; font-size: 1.2rem; letter-spacing: -0.015em; line-height: 1.25; }
.family-ms .family-ms-practice-card p { margin: 10px 0 0; color: var(--muted); font-size: 0.95rem; line-height: 1.6; }
.family-ms .family-ms-practice-card:hover { box-shadow: var(--shadow-sm); }
.family-ms .family-ms-practice-card:hover .card-icon { background: var(--blue); color: #fff; }

/* ---- closing CTA: the dark band is the CTA (no card-in-card) ------------ */
.family-ms .section.t-ink:has(.page-cta) {
  isolation: isolate;
  overflow: hidden;
  padding: clamp(72px, 8vw, 120px) 0;
  background:
    radial-gradient(70% 90% at 92% 110%, rgba(13, 128, 254, 0.3), rgba(13, 128, 254, 0) 60%),
    var(--night);
}
/* engraved "vault dial" rings */
.family-ms .section.t-ink:has(.page-cta)::before {
  content: "";
  position: absolute; z-index: -1;
  right: clamp(-260px, -12vw, -120px); top: 50%;
  width: clamp(420px, 46vw, 720px); aspect-ratio: 1;
  transform: translateY(-50%);
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(150, 196, 255, 0.16) 0 2px, transparent 3px),
    repeating-radial-gradient(circle, transparent 0 33px, rgba(150, 196, 255, 0.11) 33px 34px);
  -webkit-mask: radial-gradient(circle, #000 0 38%, transparent 71%);
          mask: radial-gradient(circle, #000 0 38%, transparent 71%);
  pointer-events: none;
}
.family-ms .t-ink .page-cta {
  padding: 0;
  border-radius: 0;
  background: none;
  overflow: visible;
}
.family-ms .t-ink .page-cta .section-heading h2 { font-size: var(--fs-h2); }
.family-ms .t-ink .page-cta .section-heading p { font-size: var(--fs-lede); max-width: 580px; }

/* ---- scroll reveal parity with core card grids ---------------------------- */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .family-ms .family-ms-plan, .family-ms .family-ms-practice-card, .family-ms .family-ms-flow-card {
      animation: v3-rise linear both; animation-timeline: view(); animation-range: entry 0% entry 32%;
    }
    .family-ms .family-ms-plan:nth-child(2), .family-ms .family-ms-practice-card:nth-child(2), .family-ms .family-ms-flow-card:nth-child(2) { animation-range: entry 6% entry 38%; }
    .family-ms .family-ms-plan:nth-child(3), .family-ms .family-ms-practice-card:nth-child(3), .family-ms .family-ms-flow-card:nth-child(3) { animation-range: entry 12% entry 44%; }
  }
}

/* ---- responsive ---------------------------------------------------------------- */
@media (max-width: 1100px) {
  .family-ms .section:has(.family-ms-chain-wall) > .container { grid-template-columns: minmax(0, 1fr); }
  .family-ms .section:has(.family-ms-chain-wall) .section-heading { margin-bottom: 8px; }
  .family-ms .family-ms-chain-wall { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .family-ms .family-ms-plan-grid, .family-ms .family-ms-practice { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .family-ms .family-ms-plan { padding: 24px 24px 26px; }
  .family-ms .family-ms-plan h3 { margin-top: 32px; }
  .family-ms .family-ms-practice-card { padding: 24px 24px 26px; }
  .family-ms .family-ms-practice-card .card-icon { margin-bottom: 24px; }
  .family-ms .family-ms-chain-wall { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .family-ms .workflow-visual { width: 100%; max-width: none; }
}
@media (max-width: 640px) {
  .family-ms .family-ms-plan { padding: 20px 20px 22px; column-gap: 14px; }
  .family-ms .family-ms-plan-icon { width: 44px; height: 44px; border-radius: 13px; }
  .family-ms .family-ms-plan h3 { margin-top: 26px; font-size: 1.5rem; }
  .family-ms .family-ms-plan strong { margin-top: 20px; }
  .family-ms .family-ms-chain-wall { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .family-ms .family-ms-chain { min-height: 56px; padding: 0 10px; gap: 9px; font-size: 0.86rem; }
  .family-ms .family-ms-chain::before { width: 38px; height: 38px; margin: 0 -5px 0 -6px; }
  .family-ms .section.t-ink:has(.page-cta)::before { right: -200px; top: auto; bottom: -220px; transform: none; width: 460px; }
  .family-ms .t-ink .cta-actions .btn { flex: 1 1 auto; }
}
@media (max-width: 380px) {
  .family-ms .family-ms-chain-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ===== 52-enterprise.css ===== */
/* ==========================================================================
   52 — Enterprise MultiSig page (/<lang>/enterprise-multisig/)
   body[data-route-type="enterprise"]. Sections after the photo hero:
     1. feature highlights   .info-grid (5 icon cards → 2 + 3 bento)
     2. how it works         t-beige split: .ent-art approval diagram + .workflow-grid
     3. web console          .msc mock — a light product window in a stone frame
     4. download CTA         t-ink band (.page-cta) with a quiet vault-dial motif
   The inline `.ent-art` SVGs (roles in the hero, approvals in 2) and `.msc` are
   bespoke to this page; everything else leans on 11-pages / 03-components.
   ========================================================================== */

/* ---- editorial section headings: title left, lede right (desktop) ------- */
@media (min-width: 961px) {
  body[data-route-type="enterprise"] .section > .container > .section-heading {
    max-width: none;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
    column-gap: clamp(40px, 6vw, 104px);
    row-gap: 18px;
    align-items: end;
  }
  body[data-route-type="enterprise"] .section > .container > .section-heading > .kicker,
  body[data-route-type="enterprise"] .section > .container > .section-heading > h2 { grid-column: 1; }
  body[data-route-type="enterprise"] .section > .container > .section-heading > p {
    grid-column: 2; grid-row: 1 / span 2;
    align-self: end;
    max-width: 540px;
    font-size: clamp(1rem, 0.95rem + 0.25vw, 1.12rem);
  }
}

/* Japanese headings: break between phrases (エンタープライズ・/マルチシグ), not inside a word */
html[lang="ja"] body[data-route-type="enterprise"] main h2 { word-break: auto-phrase; }

/* ==========================================================================
   1. Feature highlights — five stone cards as a 2 + 3 bento
   ========================================================================== */
body[data-route-type="enterprise"] .container > .info-grid { gap: 14px; }
body[data-route-type="enterprise"] .container > .info-grid > .info-card {
  min-height: 0;
  padding: 26px 26px 28px;
  border-radius: var(--radius-lg);
}
body[data-route-type="enterprise"] .container > .info-grid > .info-card .card-icon {
  width: 48px; height: 48px;
  margin-bottom: 0;
  border-radius: 14px;
  background: var(--surface-2);
  color: var(--blue-700);
  box-shadow: var(--shadow-xs);
}
body[data-route-type="enterprise"] .container > .info-grid > .info-card .card-icon svg { width: 22px; height: 22px; }
body[data-route-type="enterprise"] .container > .info-grid > .info-card h3 { padding-top: 24px; }
body[data-route-type="enterprise"] .container > .info-grid > .info-card p { max-width: 46ch; }
body[data-route-type="enterprise"] .t-ink .container > .info-grid > .info-card .card-icon { background: rgba(13, 128, 254, 0.16); color: var(--blue-300); box-shadow: none; }

@media (min-width: 1100px) {
  body[data-route-type="enterprise"] .container > .info-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  body[data-route-type="enterprise"] .container > .info-grid > .info-card { grid-column: span 2; }
  body[data-route-type="enterprise"] .container > .info-grid > .info-card:nth-child(-n + 2) {
    grid-column: span 3;
    min-height: 280px;
    padding: 32px 34px 34px;
  }
  /* titles start below the vignette so both lead cards line up whatever the copy length */
  body[data-route-type="enterprise"] .container > .info-grid > .info-card:nth-child(-n + 2) h3 { padding-top: 104px; font-size: 1.42rem; letter-spacing: -0.018em; }
  body[data-route-type="enterprise"] .container > .info-grid > .info-card:nth-child(-n + 2) p { font-size: 1rem; }
  body[data-route-type="enterprise"] .container > .info-grid > .info-card:nth-child(n + 3) { min-height: 0; }
  body[data-route-type="enterprise"] .container > .info-grid > .info-card:nth-child(n + 3) h3 { font-size: 1.18rem; }
  /* the two lead cards carry a small, wordless product vignette (top right) */
  body[data-route-type="enterprise"] .container > .info-grid > .info-card:nth-child(-n + 2)::after {
    content: "";
    position: absolute; top: 30px; right: 30px;
    width: min(46%, 248px); aspect-ratio: 248 / 128;
    background: center / contain no-repeat;
    filter: drop-shadow(0 8px 18px rgba(14, 17, 22, 0.06));
    pointer-events: none;
  }
  /* roles: three member rows, each with its role pill (owner · signer · security admin) */
  body[data-route-type="enterprise"] .container > .info-grid > .info-card:nth-child(1)::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 248 128'%3E%3Cg%3E%3Crect x='0.5' y='0.5' width='247' height='36' rx='18' fill='%23fff' stroke='%23c4ddff'/%3E%3Ccircle cx='19' cy='18.5' r='10' fill='%23e2eeff'/%3E%3Ccircle cx='19' cy='16' r='3.4' fill='%23095bc0'/%3E%3Cpath d='M12.8 24.6a6.4 6.4 0 0 1 12.4 0' fill='%23095bc0'/%3E%3Crect x='38' y='14.5' width='74' height='8' rx='4' fill='%23e3e0d8'/%3E%3Crect x='180' y='9.5' width='56' height='18' rx='9' fill='%230e1116'/%3E%3Crect x='192' y='16.5' width='32' height='4' rx='2' fill='%23fff' fill-opacity='.85'/%3E%3C/g%3E%3Cg transform='translate(0 45.5)'%3E%3Crect x='0.5' y='0.5' width='247' height='36' rx='18' fill='%23fff'/%3E%3Ccircle cx='19' cy='18.5' r='10' fill='%23e8f6ee'/%3E%3Ccircle cx='19' cy='16' r='3.4' fill='%2312995a'/%3E%3Cpath d='M12.8 24.6a6.4 6.4 0 0 1 12.4 0' fill='%2312995a'/%3E%3Crect x='38' y='14.5' width='58' height='8' rx='4' fill='%23e3e0d8'/%3E%3Crect x='180' y='9.5' width='56' height='18' rx='9' fill='%23e2eeff'/%3E%3Crect x='192' y='16.5' width='32' height='4' rx='2' fill='%230d80fe' fill-opacity='.7'/%3E%3C/g%3E%3Cg transform='translate(0 91)' opacity='.7'%3E%3Crect x='0.5' y='0.5' width='247' height='36' rx='18' fill='%23fff'/%3E%3Ccircle cx='19' cy='18.5' r='10' fill='%23edebe5'/%3E%3Ccircle cx='19' cy='16' r='3.4' fill='%23586172'/%3E%3Cpath d='M12.8 24.6a6.4 6.4 0 0 1 12.4 0' fill='%23586172'/%3E%3Crect x='38' y='14.5' width='66' height='8' rx='4' fill='%23e3e0d8'/%3E%3Crect x='168' y='9.5' width='68' height='18' rx='9' fill='%23edebe5'/%3E%3Crect x='180' y='16.5' width='44' height='4' rx='2' fill='%23586172' fill-opacity='.55'/%3E%3C/g%3E%3C/svg%3E");
  }
  /* layered approvals: two signers approved, one pending, 2-of-3 threshold bar */
  body[data-route-type="enterprise"] .container > .info-grid > .info-card:nth-child(2)::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 248 128'%3E%3Crect x='0.5' y='0.5' width='247' height='127' rx='20' fill='%23fff'/%3E%3Cg%3E%3Ccircle cx='62' cy='50' r='19' fill='%230d80fe'/%3E%3Cpath d='M54.5 50.5l5 5 10-10.5' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3Cpath d='M83 50h20M145 50h20' stroke='%2396c4ff' stroke-width='1.6' stroke-linecap='round' stroke-dasharray='.5 5'/%3E%3Cg%3E%3Ccircle cx='124' cy='50' r='19' fill='%230d80fe'/%3E%3Cpath d='M116.5 50.5l5 5 10-10.5' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3Ccircle cx='186' cy='50' r='18.2' fill='%23f5f4f0' stroke='%23b9bfc9' stroke-width='1.6' stroke-dasharray='3 3.6'/%3E%3Ccircle cx='186' cy='50' r='3' fill='%23b9bfc9'/%3E%3Crect x='43' y='96' width='50' height='6' rx='3' fill='%230d80fe'/%3E%3Crect x='99' y='96' width='50' height='6' rx='3' fill='%230d80fe'/%3E%3Crect x='155' y='96' width='50' height='6' rx='3' fill='%23e3e0d8'/%3E%3C/svg%3E");
  }
}
@media (min-width: 641px) and (max-width: 1099px) {
  body[data-route-type="enterprise"] .container > .info-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body[data-route-type="enterprise"] .container > .info-grid > .info-card:last-child:nth-child(odd) { grid-column: 1 / -1; min-height: 0; }
}
@media (max-width: 640px) {
  body[data-route-type="enterprise"] .container > .info-grid { gap: 10px; }
  body[data-route-type="enterprise"] .container > .info-grid > .info-card {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    column-gap: 16px;
    align-items: start;
    min-height: 0;
    padding: 20px 20px 22px 18px;
    border-radius: 20px;
  }
  body[data-route-type="enterprise"] .container > .info-grid > .info-card .card-icon { grid-row: 1 / span 2; width: 44px; height: 44px; border-radius: 13px; }
  body[data-route-type="enterprise"] .container > .info-grid > .info-card h3 { grid-column: 2; padding-top: 2px; margin-bottom: 6px; font-size: 1.08rem; }
  body[data-route-type="enterprise"] .container > .info-grid > .info-card p { grid-column: 2; font-size: 0.92rem; }
}

/* ==========================================================================
   2. How it works — split with the approval diagram and a stacked control list
   ========================================================================== */
body[data-route-type="enterprise"] .split-section { align-items: center; }
body[data-route-type="enterprise"] .workflow-visual {
  padding: clamp(10px, 1.6vw, 22px);
  box-shadow: var(--shadow-sm);
}
body[data-route-type="enterprise"] .split-copy .workflow-grid {
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  width: 100%;
  margin-top: 14px;
}
body[data-route-type="enterprise"] .split-copy .workflow-card {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  column-gap: 18px;
  align-items: start;
  padding: 20px 24px 22px 20px;
  border-radius: 20px;
}
body[data-route-type="enterprise"] .split-copy .workflow-card::before {
  content: "";
  grid-column: 1; grid-row: 1 / span 2;
  width: 44px; height: 44px;
  border-radius: 13px;
  background: var(--blue-50) center / 22px no-repeat;
}
/* the three controls reuse the feature icons: roles · approvals · whitelist shield */
body[data-route-type="enterprise"] .split-copy .workflow-card:nth-child(1)::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23095bc0' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='8' r='3'/%3E%3Ccircle cx='16' cy='8' r='3'/%3E%3Cpath d='M4.5 18a3.5 3.5 0 0 1 7 0M12.5 18a3.5 3.5 0 0 1 7 0'/%3E%3C/svg%3E");
}
body[data-route-type="enterprise"] .split-copy .workflow-card:nth-child(2)::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23095bc0' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='7' r='2.4'/%3E%3Ccircle cx='18' cy='7' r='2.4'/%3E%3Ccircle cx='12' cy='17' r='2.4'/%3E%3Cpath d='M7.8 8.6l2.6 5.1M16.2 8.6l-2.6 5.1'/%3E%3C/svg%3E");
}
body[data-route-type="enterprise"] .split-copy .workflow-card:nth-child(3)::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23095bc0' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 3v5c0 5-3.4 8.8-7 10-3.6-1.2-7-5-7-10V6l7-3z'/%3E%3Cpath d='M9.6 11.9l1.7 1.7 3.4-3.4'/%3E%3C/svg%3E");
}
body[data-route-type="enterprise"] .split-copy .workflow-card strong { grid-column: 2; margin: 2px 0 4px; font-size: 1.04rem; }
body[data-route-type="enterprise"] .split-copy .workflow-card p { grid-column: 2; font-size: 0.93rem; }
body[data-route-type="enterprise"] .split-copy .workflow-card:hover { background: var(--surface-hover); }
body[data-route-type="enterprise"] .t-ink .split-copy .workflow-card::before { background-color: rgba(13, 128, 254, 0.18); }

@media (max-width: 960px) {
  /* stacked: read the copy first, then the diagram */
  body[data-route-type="enterprise"] .split-section > .workflow-visual { order: 2; width: 100%; max-width: 620px; }
}
@media (max-width: 520px) {
  body[data-route-type="enterprise"] .split-copy .workflow-card { grid-template-columns: 40px minmax(0, 1fr); column-gap: 14px; padding: 18px 18px 20px 16px; }
  body[data-route-type="enterprise"] .split-copy .workflow-card::before { width: 40px; height: 40px; border-radius: 12px; background-size: 20px; }
}

/* ==========================================================================
   .ent-art — inline SVG diagrams (roles in the photo hero, approvals on stone)
   v3: no blueprint grid, no corner ticks, no 01/02 counters; rounded node
   cards, round avatars, a dark vault tile and dotted wires. Colours come from
   the section's theme tokens so the same rules draw both variants.
   ========================================================================== */
.ent-art { position: relative; width: 100%; }
.ent-art .ea-svg { width: 100%; height: auto; display: block; overflow: visible; }
/* on dark / glass (hero) */
.ent-art {
  --ea-card: rgba(255, 255, 255, 0.08);
  --ea-card-line: rgba(255, 255, 255, 0.16);
  --ea-vault: rgba(255, 255, 255, 0.1);
  --ea-vault-line: rgba(255, 255, 255, 0.26);
  --ea-seg-off: rgba(255, 255, 255, 0.2);
  --ea-face-off: rgba(255, 255, 255, 0.06);
}
/* on white / stone: cards take the inner-card surface, the vault is a night tile */
.t-paper .ent-art, .t-beige .ent-art {
  --ea-card: var(--surface-2);
  --ea-card-line: transparent;
  --ea-vault: var(--night-2);
  --ea-vault-line: var(--night-2);
  --ea-face-off: #fff;
}

.ent-art .ea-bgrid, .ent-art .ea-ticks, .ent-art .ea-num { display: none; }
.ent-art .ea-mono, .ent-art .ea-sans { font-family: var(--font-sans); }
.ent-art .ea-glow { opacity: 0.9; }
.t-paper .ent-art .ea-glow, .t-beige .ent-art .ea-glow { opacity: 0.5; }

/* connectors: quiet dotted wires */
.ent-art .ea-wire { fill: none; stroke: var(--line-strong); stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 0.5 5.5; }
.ent-art .ea-wire-p { stroke: var(--line-strong); }
/* resting state (also the reduced-motion still): Owner highlighted / A+B approved */
.ent-art .ea-roles .ea-wire-a, .ent-art .ea-approval .ea-wire-a, .ent-art .ea-approval .ea-wire-b { stroke: var(--accent); }

/* vault tile */
.ent-art .ea-vault-r { fill: var(--ea-vault); stroke: var(--ea-vault-line); stroke-width: 1; rx: 20px; ry: 20px; }
.ent-art .ea-vico { fill: none; stroke: #fff; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; stroke-opacity: 0.9; }
.ent-art .ea-vt { font-size: 12.5px; font-weight: 600; fill: #fff; letter-spacing: -0.005em; }
.ent-art .ea-cnt { font-family: var(--font-serif); font-size: 38px; font-weight: 400; fill: var(--blue-300); letter-spacing: -0.03em; }
.ent-art .ea-dot { fill: var(--blue); }
.ent-art .ea-dot-ring { fill: none; stroke: var(--blue); stroke-width: 1; opacity: 0; transform-box: fill-box; transform-origin: center; }
.ent-art .ea-seg { fill: var(--ea-seg-off); rx: 1.5px; ry: 1.5px; }
.ent-art .ea-seg-1, .ent-art .ea-seg-on { fill: var(--blue); }
.ent-art .ea-roles .ea-seg-2 { fill: rgba(255, 255, 255, 0.5); }

/* node cards */
.ent-art .ea-card { fill: var(--ea-card); stroke: var(--ea-card-line); stroke-width: 1; rx: 16px; ry: 16px; }
.ent-art .ea-face { fill: var(--ea-face-off); stroke: var(--line-strong); stroke-width: 1; rx: 16px; ry: 16px; }
.ent-art .ea-ltr { font-size: 12.5px; font-weight: 600; fill: var(--muted); letter-spacing: 0; }
.ent-art .ea-lbl { font-size: 12.5px; font-weight: 600; fill: var(--fg); letter-spacing: -0.01em; }
.ent-art .ea-on .ea-face, .ent-art .ea-ok .ea-face { stroke: var(--blue); fill: rgba(13, 128, 254, 0.14); }
.ent-art .ea-on .ea-ltr, .ent-art .ea-ok .ea-ltr { fill: var(--accent-ink); }
.ent-art .ea-pend .ea-ltr, .ent-art .ea-pend .ea-lbl { fill: var(--muted); }
.ent-art .ea-pend .ea-face { stroke-dasharray: 2 3; }

/* approval tick: a solid blue seal */
.ent-art .ea-tick circle { fill: var(--blue); stroke: var(--bg); stroke-width: 2.5; }
.ent-art .ea-tick-t { font-size: 10.5px; font-weight: 700; fill: #fff; }
.ent-art .ea-tick { transform-box: fill-box; transform-origin: center; }

/* badge: a pill */
.ent-art .ea-badge rect { fill: var(--ea-card); stroke: var(--ea-card-line); stroke-width: 1; rx: 18px; ry: 18px; }
.ent-art .ea-badge .ea-ico { fill: none; stroke: var(--accent-ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ent-art .ea-badge-t { font-size: 12px; font-weight: 500; letter-spacing: -0.005em; fill: var(--fg); }
.t-paper .ent-art .ea-card, .t-beige .ent-art .ea-card,
.t-paper .ent-art .ea-badge rect, .t-beige .ent-art .ea-badge rect { filter: drop-shadow(0 1px 2px rgba(14, 17, 22, 0.06)) drop-shadow(0 6px 14px rgba(14, 17, 22, 0.05)); }

/* ---- motion: roles (highlight cycles O → S → SA, dots flow to the vault) -- */
.ent-art .ea-roles .ea-node-a .ea-face { animation: ea-face-a 9s ease-in-out infinite both; }
.ent-art .ea-roles .ea-node-a .ea-ltr  { animation: ea-ltr-a 9s ease-in-out infinite both; }
.ent-art .ea-roles .ea-wire-a          { animation: ea-wire-a 9s linear infinite both; }
.ent-art .ea-roles .ea-node-b .ea-face { animation: ea-face-b 9s ease-in-out infinite both; }
.ent-art .ea-roles .ea-node-b .ea-ltr  { animation: ea-ltr-b 9s ease-in-out infinite both; }
.ent-art .ea-roles .ea-wire-b          { animation: ea-wire-b 9s linear infinite both; }
.ent-art .ea-roles .ea-node-c .ea-face { animation: ea-face-c 9s ease-in-out infinite both; }
.ent-art .ea-roles .ea-node-c .ea-ltr  { animation: ea-ltr-c 9s ease-in-out infinite both; }
.ent-art .ea-roles .ea-wire-c          { animation: ea-wire-c 9s linear infinite both; }
.ent-art .ea-roles .ea-seg-1 { animation: ea-seg-a 9s ease-in-out infinite both; }
.ent-art .ea-roles .ea-seg-2 { animation: ea-seg-b 9s ease-in-out infinite both; }
.ent-art .ea-roles .ea-seg-3 { animation: ea-seg-c 9s ease-in-out infinite both; }
.ent-art .ea-dot-ring { animation: ea-ring 3s ease-out infinite; }

@keyframes ea-face-a { 0%, 28% { stroke: var(--blue); fill: rgba(13, 128, 254, 0.14); } 33%, 94% { stroke: var(--line-strong); fill: var(--ea-face-off); } 100% { stroke: var(--blue); fill: rgba(13, 128, 254, 0.14); } }
@keyframes ea-ltr-a  { 0%, 28% { fill: var(--accent-ink); } 33%, 94% { fill: var(--muted); } 100% { fill: var(--accent-ink); } }
@keyframes ea-wire-a { 0% { stroke: var(--accent); stroke-dashoffset: 0; } 28% { stroke: var(--accent); stroke-dashoffset: -60; } 33%, 94% { stroke: var(--line-strong); stroke-dashoffset: -60; } 100% { stroke: var(--accent); stroke-dashoffset: -60; } }
@keyframes ea-face-b { 0%, 28%, 66%, 100% { stroke: var(--line-strong); fill: var(--ea-face-off); } 33%, 61% { stroke: var(--blue); fill: rgba(13, 128, 254, 0.14); } }
@keyframes ea-ltr-b  { 0%, 28%, 66%, 100% { fill: var(--muted); } 33%, 61% { fill: var(--accent-ink); } }
@keyframes ea-wire-b { 0%, 28% { stroke: var(--line-strong); stroke-dashoffset: 0; } 33% { stroke: var(--accent); stroke-dashoffset: 0; } 61% { stroke: var(--accent); stroke-dashoffset: -60; } 66%, 100% { stroke: var(--line-strong); stroke-dashoffset: -60; } }
@keyframes ea-face-c { 0%, 61%, 99%, 100% { stroke: var(--line-strong); fill: var(--ea-face-off); } 66%, 94% { stroke: var(--blue); fill: rgba(13, 128, 254, 0.14); } }
@keyframes ea-ltr-c  { 0%, 61%, 99%, 100% { fill: var(--muted); } 66%, 94% { fill: var(--accent-ink); } }
@keyframes ea-wire-c { 0%, 61% { stroke: var(--line-strong); stroke-dashoffset: 0; } 66% { stroke: var(--accent); stroke-dashoffset: 0; } 94% { stroke: var(--accent); stroke-dashoffset: -60; } 99%, 100% { stroke: var(--line-strong); stroke-dashoffset: -60; } }
@keyframes ea-seg-a { 0%, 28% { fill: var(--blue); } 33%, 94% { fill: var(--ea-seg-off); } 100% { fill: var(--blue); } }
@keyframes ea-seg-b { 0%, 28%, 66%, 100% { fill: var(--ea-seg-off); } 33%, 61% { fill: var(--blue); } }
@keyframes ea-seg-c { 0%, 61%, 99%, 100% { fill: var(--ea-seg-off); } 66%, 94% { fill: var(--blue); } }
@keyframes ea-ring { 0% { transform: scale(1); opacity: 0.8; } 70%, 100% { transform: scale(3.2); opacity: 0; } }

/* ---- motion: approvals (A ticks, then B, threshold lights; C stays pending) */
.ent-art .ea-approval .ea-node-a .ea-face { animation: ea-ok-face-a 8s ease-in-out infinite both; }
.ent-art .ea-approval .ea-node-a .ea-ltr  { animation: ea-ok-ltr-a 8s ease-in-out infinite both; }
.ent-art .ea-approval .ea-node-a .ea-tick { animation: ea-ok-tick-a 8s var(--ease) infinite both; }
.ent-art .ea-approval .ea-wire-a          { animation: ea-ok-wire-a 8s linear infinite both; }
.ent-art .ea-approval .ea-node-b .ea-face { animation: ea-ok-face-b 8s ease-in-out infinite both; }
.ent-art .ea-approval .ea-node-b .ea-ltr  { animation: ea-ok-ltr-b 8s ease-in-out infinite both; }
.ent-art .ea-approval .ea-node-b .ea-tick { animation: ea-ok-tick-b 8s var(--ease) infinite both; }
.ent-art .ea-approval .ea-wire-b          { animation: ea-ok-wire-b 8s linear infinite both; }
.ent-art .ea-approval .ea-seg-1 { animation: ea-ok-seg-1 8s ease-in-out infinite both; }
.ent-art .ea-approval .ea-seg-2 { animation: ea-ok-seg-2 8s ease-in-out infinite both; }
.ent-art .ea-approval .ea-cnt   { animation: ea-ok-cnt 8s ease-in-out infinite both; }
.ent-art .ea-approval .ea-thr   { animation: ea-ok-thr 8s ease-in-out infinite both; }
.ent-art .ea-approval .ea-glow  { animation: ea-ok-glow 8s ease-in-out infinite both; }
.ent-art .ea-approval .ea-vault-r { animation: ea-ok-vault 8s ease-in-out infinite both; }
.ent-art .ea-approval .ea-node-c .ea-face { animation: ea-pend 2.4s ease-in-out infinite; }

@keyframes ea-ok-face-a { 0%, 8%, 97%, 100% { stroke: var(--line-strong); fill: var(--ea-face-off); } 12%, 93% { stroke: var(--blue); fill: rgba(13, 128, 254, 0.14); } }
@keyframes ea-ok-ltr-a  { 0%, 8%, 97%, 100% { fill: var(--muted); } 12%, 93% { fill: var(--accent-ink); } }
@keyframes ea-ok-tick-a { 0%, 9%, 97%, 100% { opacity: 0; transform: scale(0.5); } 13%, 93% { opacity: 1; transform: scale(1); } }
@keyframes ea-ok-wire-a { 0%, 10% { stroke: var(--line-strong); stroke-dashoffset: 0; } 13% { stroke: var(--accent); stroke-dashoffset: 0; } 30% { stroke: var(--accent); stroke-dashoffset: -48; } 93% { stroke: var(--accent); stroke-dashoffset: -48; } 97%, 100% { stroke: var(--line-strong); stroke-dashoffset: -48; } }
@keyframes ea-ok-face-b { 0%, 32%, 97%, 100% { stroke: var(--line-strong); fill: var(--ea-face-off); } 36%, 93% { stroke: var(--blue); fill: rgba(13, 128, 254, 0.14); } }
@keyframes ea-ok-ltr-b  { 0%, 32%, 97%, 100% { fill: var(--muted); } 36%, 93% { fill: var(--accent-ink); } }
@keyframes ea-ok-tick-b { 0%, 33%, 97%, 100% { opacity: 0; transform: scale(0.5); } 37%, 93% { opacity: 1; transform: scale(1); } }
@keyframes ea-ok-wire-b { 0%, 34% { stroke: var(--line-strong); stroke-dashoffset: 0; } 37% { stroke: var(--accent); stroke-dashoffset: 0; } 54% { stroke: var(--accent); stroke-dashoffset: -48; } 93% { stroke: var(--accent); stroke-dashoffset: -48; } 97%, 100% { stroke: var(--line-strong); stroke-dashoffset: -48; } }
@keyframes ea-ok-seg-1 { 0%, 14%, 97%, 100% { fill: var(--ea-seg-off); } 18%, 93% { fill: var(--blue); } }
@keyframes ea-ok-seg-2 { 0%, 38%, 97%, 100% { fill: var(--ea-seg-off); } 42%, 93% { fill: var(--blue); } }
@keyframes ea-ok-cnt  { 0%, 54%, 97%, 100% { fill: var(--m-dark); opacity: 0.6; } 60%, 93% { fill: var(--blue-300); opacity: 1; } }
@keyframes ea-ok-thr  { 0%, 54%, 97%, 100% { opacity: 0.4; } 60%, 93% { opacity: 1; } }
@keyframes ea-ok-glow { 0%, 54%, 97%, 100% { opacity: 0; } 62%, 93% { opacity: 0.55; } }
@keyframes ea-ok-vault { 0%, 54%, 97%, 100% { stroke: var(--ea-vault-line); } 62%, 93% { stroke: var(--blue); } }
@keyframes ea-pend { 0%, 100% { stroke-opacity: 1; } 50% { stroke-opacity: 0.35; } }

/* small screens: the 520-unit diagram scales to ~60%, so lift the labels */
@media (max-width: 520px) {
  .ent-art .ea-lbl, .ent-art .ea-vt { font-size: 14px; }
  .ent-art .ea-ltr { font-size: 13.5px; }
  .ent-art .ea-badge-t { font-size: 12.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .ent-art * { animation: none !important; }
  .ent-art .ea-dot-ring { opacity: 0; }
}

/* ==========================================================================
   3. .msc — MultiSig web console: a light product window in a stone frame.
   The window rises from the bottom edge of the frame (cropped flush).
   ========================================================================== */
.msc-wrap {
  --msc-bg: #fff;
  --msc-side: #faf9f6;
  --msc-line: rgba(14, 17, 22, 0.07);
  --msc-line-strong: var(--hair-2);
  --msc-t: var(--ink);
  --msc-m: var(--slate);
}
.msc {
  position: relative;
  isolation: isolate;
  margin-top: 4px;
  padding: clamp(20px, 3.6vw, 56px) clamp(16px, 4.4vw, 72px) 0;
  border: 0;
  border-radius: var(--radius-xl);
  background:
    radial-gradient(70% 90% at 100% 0%, rgba(13, 128, 254, 0.13), rgba(13, 128, 254, 0) 62%),
    radial-gradient(50% 70% at 0% 100%, rgba(13, 128, 254, 0.06), rgba(13, 128, 254, 0) 60%),
    var(--surface);
  color: var(--msc-t);
  overflow: hidden;
}
.t-beige .msc { background: radial-gradient(70% 90% at 100% 0%, rgba(13, 128, 254, 0.1), rgba(13, 128, 254, 0) 62%), var(--white); }

/* window chrome */
.msc-bar {
  display: flex; align-items: center; gap: 7px;
  padding: 12px 16px;
  background: var(--msc-bg);
  border: 1px solid var(--msc-line);
  border-bottom-color: var(--msc-line);
  border-radius: 18px 18px 0 0;
}
.msc-bar i { width: 10px; height: 10px; border-radius: 50%; display: block; flex: none; background: var(--stone-3); }
.msc-bar::after { content: ""; width: 44px; flex: none; }
.msc-bar span {
  display: inline-flex; align-items: center; gap: 8px;
  min-width: 0; max-width: min(420px, 70%);
  height: 30px; margin: 0 auto; padding: 0 16px;
  border-radius: var(--pill);
  background: var(--stone);
  font-family: var(--font-sans); font-size: 0.8rem; font-weight: 500; letter-spacing: 0; text-transform: none;
  color: var(--msc-m);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.msc-bar span::before {
  content: ""; width: 12px; height: 12px; flex: none; background: var(--green);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='3' y='7' width='10' height='7.5' rx='2' fill='%23000'/%3E%3Cpath d='M5.2 7V5.2a2.8 2.8 0 0 1 5.6 0V7' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='3' y='7' width='10' height='7.5' rx='2' fill='%23000'/%3E%3Cpath d='M5.2 7V5.2a2.8 2.8 0 0 1 5.6 0V7' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E") center / contain no-repeat;
}

.msc-body {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  background: var(--msc-bg);
  border: 1px solid var(--msc-line);
  border-top: 0;
  border-bottom: 0;
  box-shadow: 0 30px 60px -24px rgba(14, 17, 22, 0.18);
}

/* sidebar: balance + wallet list */
.msc-side { padding: 26px 22px 30px; background: var(--msc-side); border-right: 1px solid var(--msc-line); }
.msc .k {
  font-family: var(--font-sans); font-size: 0.8rem; font-weight: 500; letter-spacing: 0; text-transform: none;
  color: var(--msc-m);
}
.msc .k + .k, .msc-total + .k { margin-top: 26px; margin-bottom: 10px; }
.msc-total {
  margin-top: 6px;
  font-family: var(--font-serif); font-weight: 400;
  font-size: clamp(2.2rem, 1.6rem + 1.6vw, 3rem);
  letter-spacing: -0.03em; line-height: 1;
  color: var(--msc-t);
  font-variant-numeric: tabular-nums;
}
.msc-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 12px;
  border: 0;
  border-radius: 12px;
  transition: background-color 0.25s var(--ease);
}
.msc-row + .msc-row { margin-top: 2px; }
.msc-row:last-child { border-bottom: 0; }
.msc-row:hover { background: rgba(14, 17, 22, 0.035); }
.msc-row.on { background: #fff; box-shadow: 0 0 0 1px var(--blue-100), 0 4px 14px rgba(13, 128, 254, 0.08); }
.msc-row > span { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.msc-row b {
  font-family: var(--font-sans); font-size: 0.9rem; font-weight: 600; letter-spacing: -0.01em;
  color: var(--msc-t);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.msc-row.on b { color: var(--blue-700); }
.msc .pill {
  flex: none;
  display: inline-flex; align-items: center; height: 22px; padding: 0 8px;
  border: 0; border-radius: var(--pill);
  background: var(--stone-2);
  font-family: var(--font-sans); font-size: 0.72rem; font-weight: 600; letter-spacing: 0;
  color: var(--msc-m);
  font-variant-numeric: tabular-nums;
}
.msc-row.on .pill { background: var(--blue-50); color: var(--blue-700); }
.msc-row em {
  flex: none;
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-sans); font-style: normal; font-size: 0.8rem; font-weight: 500; letter-spacing: 0; text-transform: none;
  color: var(--msc-m);
}
.msc-row em::before { content: ""; width: 7px; height: 7px; border-radius: 50%; border: 0; background: var(--green); box-shadow: 0 0 0 3px var(--green-50); }
.msc-row.on em { color: var(--msc-m); }

/* main: policy chips + participants */
.msc-main { padding: 26px 26px 30px; }
.msc-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 16px; }
.msc-tag {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 28px; max-width: 100%; padding: 5px 12px;
  border: 0; border-radius: 14px;
  background: var(--stone);
  font-family: var(--font-sans); font-size: 0.78rem; font-weight: 500; line-height: 1.3; letter-spacing: 0; text-transform: none;
  color: var(--ink-3);
}
.msc-tag:first-child { background: var(--blue-50); color: var(--blue-700); }
.msc-tag:first-child::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--blue); box-shadow: none; }
.msc-part {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 13px 0;
  border: 0;
}
.msc-part + .msc-part { border-top: 1px solid var(--msc-line); }
.msc-part:last-child { border-bottom: 0; }
.msc-part b {
  display: inline-flex; align-items: center; gap: 12px; min-width: 0;
  font-family: var(--font-sans); font-size: 0.92rem; font-weight: 600; letter-spacing: -0.01em;
  color: var(--msc-t);
}
/* participant avatars */
.msc-part b::before {
  content: ""; flex: none;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--blue-50) center / 18px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23095bc0' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8.5' r='3.6'/%3E%3Cpath d='M5 19.5a7 7 0 0 1 14 0'/%3E%3C/svg%3E");
}
.msc-part:nth-child(3) b::before { background-color: var(--green-50); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2312995a' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8.5' r='3.6'/%3E%3Cpath d='M5 19.5a7 7 0 0 1 14 0'/%3E%3C/svg%3E"); }
.msc-part:nth-child(4) b::before { background-color: #e5f3f1; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231b8e85' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8.5' r='3.6'/%3E%3Cpath d='M5 19.5a7 7 0 0 1 14 0'/%3E%3C/svg%3E"); }
.msc-part:nth-child(5) b::before { background-color: var(--stone-2); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23586172' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8.5' r='3.6'/%3E%3Cpath d='M5 19.5a7 7 0 0 1 14 0'/%3E%3C/svg%3E"); }
.msc-roles { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.msc-role {
  display: inline-flex; align-items: center; height: 26px; padding: 0 11px;
  border: 0; border-radius: var(--pill);
  background: var(--stone);
  font-family: var(--font-sans); font-size: 0.76rem; font-weight: 500; letter-spacing: 0; text-transform: none;
  color: var(--msc-m);
  white-space: nowrap;
}
.msc-role.s { background: var(--blue-50); color: var(--blue-700); }
.msc-role.o { background: var(--ink-2); color: #fff; }
.msc-role.a { background: var(--stone); color: var(--ink-3); }
.msc-part:hover .msc-role.s { background: var(--blue-100); }

@media (max-width: 820px) {
  .msc-body { grid-template-columns: minmax(0, 1fr); }
  .msc-side { border-right: 0; border-bottom: 1px solid var(--msc-line); }
}
@media (max-width: 520px) {
  .msc { padding: 14px 12px 0; border-radius: var(--radius-lg); }
  .msc-bar { padding: 10px 12px; border-radius: 14px 14px 0 0; }
  .msc-bar i { width: 8px; height: 8px; }
  .msc-bar::after { width: 38px; }
  .msc-bar span { height: 26px; padding: 0 12px; font-size: 0.74rem; max-width: 76%; }
  .msc-side, .msc-main { padding: 20px 16px 22px; }
  .msc-row { padding: 10px; }
  .msc-part { flex-direction: column; align-items: flex-start; gap: 10px; }
  .msc-roles { justify-content: flex-start; padding-left: 46px; }
}

/* ==========================================================================
   4. Download CTA — the night band is the CTA (no card-in-a-card), with a
   soft blue glow and an engraved "vault dial" of rings rising from the corner.
   ========================================================================== */
body[data-route-type="enterprise"] .section.t-ink:has(> .container > .page-cta) {
  isolation: isolate;
  overflow: hidden;
  padding: clamp(84px, 9vw, 140px) 0;
}
body[data-route-type="enterprise"] .section.t-ink:has(> .container > .page-cta)::before,
body[data-route-type="enterprise"] .section.t-ink:has(> .container > .page-cta)::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
}
body[data-route-type="enterprise"] .section.t-ink:has(> .container > .page-cta)::before {
  background:
    radial-gradient(46% 80% at 92% 100%, rgba(13, 128, 254, 0.42), rgba(13, 128, 254, 0) 70%),
    radial-gradient(36% 60% at 0% 0%, rgba(13, 128, 254, 0.12), rgba(13, 128, 254, 0) 70%);
}
body[data-route-type="enterprise"] .section.t-ink:has(> .container > .page-cta)::after {
  background: repeating-radial-gradient(circle at 92% 112%, rgba(255, 255, 255, 0) 0 58px, rgba(255, 255, 255, 0.075) 58px 59px);
  -webkit-mask: radial-gradient(circle at 92% 112%, #000 0, #000 22%, transparent 58%);
          mask: radial-gradient(circle at 92% 112%, #000 0, #000 22%, transparent 58%);
}
body[data-route-type="enterprise"] .t-ink .page-cta {
  padding: 0;
  border-radius: 0;
  background: transparent;
  overflow: visible;
  align-items: end;
}
body[data-route-type="enterprise"] .t-ink .page-cta .section-heading h2 { font-size: var(--fs-h2); }
body[data-route-type="enterprise"] .t-ink .page-cta .section-heading p { font-size: var(--fs-lede); max-width: 560px; }

@media (max-width: 720px) {
  body[data-route-type="enterprise"] .section.t-ink:has(> .container > .page-cta)::after {
    background: repeating-radial-gradient(circle at 100% 104%, rgba(255, 255, 255, 0) 0 40px, rgba(255, 255, 255, 0.07) 40px 41px);
    -webkit-mask: radial-gradient(circle at 100% 104%, #000 0, #000 20%, transparent 62%);
            mask: radial-gradient(circle at 100% 104%, #000 0, #000 20%, transparent 62%);
  }
  body[data-route-type="enterprise"] .t-ink .page-cta .cta-actions .btn { flex: 1 1 auto; }
}

/* ===== 53-inheritance.css ===== */
/* ==========================================================================
   53 — Bitcoin inheritance pillar page (main.inherit-ms)
   v3: warm, reassuring, family-minded but precise. Everything is scoped to
   main.inherit-ms and expressed with the theme slots (--bg --fg --muted
   --line --accent-ink --surface --surface-2 --surface-hover) so each block
   reads on white (.t-paper), stone (.t-beige) and night (.t-ink).

   Page rhythm (all locales share the same markup):
     hero (photo, 11-pages) → the problem: three open columns
     → how it works: a handover timeline + vault illustration (stone band)
     → three plans: stone cards → chains: centred coin pills (stone band)
     → best practices: three cards → FAQ: sticky heading + accordion
     → closing CTA: night band with the 416-day timer ring.
   Illustrations are inline SVG: prefixes ih- (hero, dark) / is- (split, light).
   ========================================================================== */

/* ---- illustration type ---------------------------------------------------- */
.inherit-ms-hero-art { display: block; }
.inherit-ms-hero-art svg { width: 100%; height: auto; display: block; }
.inherit-ms .ih-mono, .inherit-ms .is-mono,
.inherit-ms .ih-sans, .inherit-ms .is-sans { font-family: var(--font-sans); }
.inherit-ms .ih-lbl, .inherit-ms .is-lbl { font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none; }
/* the v2 drafting grid and crop marks are retired: the art sits on a calm panel */
.inherit-ms-hero-art svg > rect[fill^="url(#ih-grid"],
.inherit-ms-hero-art svg > rect[fill^="url(#is-grid"],
.inherit-ms .is-ticks { display: none; }

/* hero (dark, inside the glass card) --------------------------------------- */
.inherit-ms .ih-halo { opacity: 0.75; }
.inherit-ms .ih-wire { fill: none; stroke: rgba(255, 255, 255, 0.26); stroke-width: 1.25; stroke-dasharray: 2 5; stroke-linecap: round; }
.inherit-ms .ih-wire-you { stroke: var(--blue); }
.inherit-ms .ih-vault { fill: var(--night-2); stroke: rgba(150, 196, 255, 0.55); stroke-width: 1; rx: 22px; }
.inherit-ms .ih-inf { fill: var(--blue-300); font-family: var(--font-serif); font-size: 50px; font-weight: 400; }
.inherit-ms .ih-vname { fill: #f3f5f9; font-size: 13px; font-weight: 600; letter-spacing: -0.01em; }
.inherit-ms .ih-seg { fill: rgba(255, 255, 255, 0.18); rx: 1.5px; }
.inherit-ms .ih-seg-on { fill: var(--blue); }
.inherit-ms .ih-tile { fill: var(--night-3); stroke: rgba(255, 255, 255, 0.2); stroke-width: 1; rx: 18px; }
.inherit-ms .ih-node-you .ih-tile { stroke: var(--blue); fill: rgba(13, 128, 254, 0.16); }
.inherit-ms .ih-ltr { fill: #a3abb9; font-size: 15px; font-weight: 600; }
.inherit-ms .ih-node-you .ih-ltr { fill: var(--blue-300); }
.inherit-ms .ih-lbl { fill: #c3c9d4; }
.inherit-ms .ih-node-you .ih-lbl { fill: #f3f5f9; }
.inherit-ms .ih-chk circle { fill: var(--blue); stroke: var(--night); stroke-width: 1.5; }
.inherit-ms .ih-chk path { fill: none; stroke: #fff; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 14; stroke-dashoffset: 0; }
.inherit-ms .ih-ring { fill: none; stroke: var(--blue); stroke-width: 1; opacity: 0; transform-box: fill-box; transform-origin: center; }
.inherit-ms .ih-chip { fill: var(--night-2); stroke: rgba(255, 255, 255, 0.2); stroke-width: 1; rx: 20px; }
.inherit-ms .ih-track { fill: none; stroke: rgba(255, 255, 255, 0.18); stroke-width: 2; }
.inherit-ms .ih-timer { fill: none; stroke: var(--blue); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 62.83; stroke-dashoffset: 15.7; }
.inherit-ms .ih-clk-txt { fill: #f3f5f9; font-weight: 600; }
.inherit-ms .ih-ticks { fill: none; stroke: #fff; stroke-opacity: 0.3; stroke-width: 1; stroke-linecap: round; }
.inherit-ms .ih-lock { fill: none; stroke: #f3f5f9; stroke-opacity: 0.7; stroke-width: 1.25; }
/* The page generator shrinks long translated labels with an inline font-size
   (fitted to the retired mono capitals). Sans is ~25% narrower, so restore one
   size per role; every locale was measured to fit (ru vault name keeps its own). */
.inherit-ms .ih-lbl:not(.ih-clk-txt), .inherit-ms .is-lbl:not(.is-clk-txt) { font-size: 12px !important; }
.inherit-ms .ih-ltr, .inherit-ms .is-ltr { font-size: 15px !important; }
body:not([data-lang="ru"]) .inherit-ms .ih-vname { font-size: 13px !important; }
/* long translations of "416-day recovery": a slightly smaller line in a wider chip
   (the chip then covers the connector stub, which still rises from its top edge) */
body[data-lang="es"] .inherit-ms .ih-clk-txt, body[data-lang="de"] .inherit-ms .ih-clk-txt { font-size: 11px !important; }
body[data-lang="ru"] .inherit-ms .ih-clk-txt { font-size: 10px !important; }
body[data-lang="es"] .inherit-ms .ih-chip { width: 190px; }
body[data-lang="de"] .inherit-ms .ih-chip { width: 206px; }
body[data-lang="ru"] .inherit-ms .ih-chip { width: 214px; }

/* split (light, inside the white card on the stone band) ------------------- */
.inherit-ms .is-wire { fill: none; stroke: var(--slate-3); stroke-width: 1.25; stroke-dasharray: 2 5; stroke-linecap: round; }
.inherit-ms .is-wire-you { stroke: var(--blue); }
.inherit-ms .is-vault { fill: var(--night-2); stroke: var(--night-2); stroke-width: 1; rx: 22px; }
.inherit-ms .is-cnt { fill: #fff; font-family: var(--font-serif); font-size: 40px; font-weight: 400; letter-spacing: -0.02em; }
.inherit-ms .is-vname { fill: #a3abb9; font-size: 13px; font-weight: 500; letter-spacing: 0; }
.inherit-ms .is-seg { fill: rgba(255, 255, 255, 0.2); rx: 1.5px; }
.inherit-ms .is-seg-on { fill: var(--blue); }
.inherit-ms .is-tile { fill: var(--stone); stroke: var(--hair-2); stroke-width: 1; rx: 18px; }
.inherit-ms .is-node-you .is-tile { stroke: var(--blue); fill: var(--blue-50); }
.inherit-ms .is-ltr { fill: var(--slate); font-size: 15px; font-weight: 600; }
.inherit-ms .is-node-you .is-ltr { fill: var(--blue-700); }
.inherit-ms .is-lbl { fill: var(--slate); }
.inherit-ms .is-node-you .is-lbl { fill: var(--ink); }
.inherit-ms .is-chk circle { fill: var(--blue); stroke: #fff; stroke-width: 1.5; }
.inherit-ms .is-chk path { fill: none; stroke: #fff; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 14; stroke-dashoffset: 0; }
.inherit-ms .is-ring { fill: none; stroke: var(--blue); stroke-width: 1; opacity: 0; transform-box: fill-box; transform-origin: center; }
.inherit-ms .is-chip { fill: #fff; stroke: var(--hair-2); stroke-width: 1; rx: 20px; }
.inherit-ms .is-track { fill: none; stroke: var(--stone-3); stroke-width: 2; }
.inherit-ms .is-timer { fill: none; stroke: var(--blue); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 62.83; stroke-dashoffset: 15.7; }
.inherit-ms .is-clk-txt { fill: var(--ink); font-weight: 600; }
.inherit-ms .is-lock { fill: none; stroke: #fff; stroke-opacity: 0.75; stroke-width: 1.25; }
.inherit-ms .is-halo { opacity: 0.8; }

/* motion (8s loops): dash flow on the active spoke, keep-active pulse,
   timer ring filling, heirs lighting up once the 416-day mark is reached */
.inherit-ms .ih-anim, .inherit-ms .is-anim { animation-duration: 8s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; animation-fill-mode: both; }
.inherit-ms .ih-wire-you, .inherit-ms .is-wire-you { animation-name: inh-flow; animation-timing-function: linear; }
.inherit-ms .ih-halo, .inherit-ms .is-halo { animation-name: inh-halo; }
.inherit-ms .ih-ring, .inherit-ms .is-ring { animation-name: inh-ring; animation-timing-function: ease-out; }
.inherit-ms .ih-timer, .inherit-ms .is-timer { animation-name: inh-timer; }
.inherit-ms .ih-chk path, .inherit-ms .is-chk path { animation-name: inh-draw; }
.inherit-ms .ih-node-h .ih-tile { animation-name: inh-heir-tile; }
.inherit-ms .ih-node-h .ih-ltr { animation-name: inh-heir-ltr; }
.inherit-ms .ih-wire-h { animation-name: inh-heir-wire; }
.inherit-ms .is-node-h .is-tile { animation-name: inh-heir-tile-p; }
.inherit-ms .is-node-h .is-ltr { animation-name: inh-heir-ltr-p; }
.inherit-ms .is-wire-h { animation-name: inh-heir-wire-p; }
.inherit-ms .ih-seg-wait, .inherit-ms .is-seg-wait { animation-name: inh-seg; }

@keyframes inh-flow { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -56; } }
@keyframes inh-halo { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }
@keyframes inh-ring { 0%, 4% { transform: scale(0.7); opacity: 0; } 7% { opacity: 0.8; } 26%, 100% { transform: scale(1.9); opacity: 0; } }
@keyframes inh-timer { 0% { stroke-dashoffset: 62.83; } 84%, 94% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 62.83; } }
@keyframes inh-draw { 0%, 3% { stroke-dashoffset: 14; } 10%, 100% { stroke-dashoffset: 0; } }
@keyframes inh-heir-tile { 0%, 82%, 97%, 100% { stroke: rgba(255, 255, 255, 0.2); fill: #1b2333; } 86%, 94% { stroke: #0d80fe; fill: rgba(13, 128, 254, 0.16); } }
@keyframes inh-heir-ltr { 0%, 82%, 97%, 100% { fill: #a3abb9; } 86%, 94% { fill: #96c4ff; } }
@keyframes inh-heir-wire { 0%, 82%, 97%, 100% { stroke: rgba(255, 255, 255, 0.26); } 86%, 94% { stroke: #0d80fe; } }
@keyframes inh-heir-tile-p { 0%, 82%, 97%, 100% { stroke: rgba(14, 17, 22, 0.16); fill: #f5f4f0; } 86%, 94% { stroke: #0d80fe; fill: #f1f7ff; } }
@keyframes inh-heir-ltr-p { 0%, 82%, 97%, 100% { fill: #586172; } 86%, 94% { fill: #095bc0; } }
@keyframes inh-heir-wire-p { 0%, 82%, 97%, 100% { stroke: #b9bfc9; } 86%, 94% { stroke: #0d80fe; } }
@keyframes inh-seg { 0%, 82%, 97%, 100% { fill: rgba(255, 255, 255, 0.18); } 86%, 94% { fill: #0d80fe; } }
@media (prefers-reduced-motion: reduce) {
  .inherit-ms .ih-anim, .inherit-ms .is-anim, .inherit-ms .ih-chk path, .inherit-ms .is-chk path { animation: none !important; }
}

/* ---- shared card icon tile --------------------------------------------------- */
.inherit-ms-pain-card .card-icon,
.inherit-ms-practice-card .card-icon,
.inherit-ms-plan-icon {
  position: static;
  display: grid; place-items: center; flex: none;
  width: 48px; height: 48px; margin: 0; padding: 0;
  border: 0; border-radius: 14px;
  background: var(--surface-2);
  color: var(--accent-ink);
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease);
}
.inherit-ms-pain-card .card-icon svg,
.inherit-ms-practice-card .card-icon svg,
.inherit-ms-plan-icon svg { width: 22px; height: 22px; display: block; }

/* ---- 1. the problem: three open editorial columns -------------------------- */
.inherit-ms-pain {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(28px, 3.4vw, 48px);
}
.inherit-ms-pain-card {
  display: flex; flex-direction: column; align-items: flex-start;
  padding-top: 28px;
  border-top: 1px solid var(--line-strong);
  color: var(--fg);
}
.inherit-ms-pain-card .card-icon { background: var(--surface); color: var(--fg); }
.inherit-ms-pain-card:hover .card-icon { background: var(--blue-50); color: var(--accent-ink); }
.inherit-ms-pain-card h3 { margin-top: 24px; font-size: 1.28rem; letter-spacing: -0.016em; line-height: 1.22; }
.inherit-ms-pain-card p { margin-top: 12px; color: var(--muted); font-size: 0.97rem; line-height: 1.65; max-width: 40ch; }

/* ---- 2. how it works: a handover timeline beside the vault ----------------- */
.inherit-ms-steps { position: relative; display: grid; margin-top: clamp(28px, 3vw, 40px); border: 0; }
.inherit-ms-step {
  position: relative;
  display: grid; grid-template-columns: 38px minmax(0, 1fr);
  column-gap: 20px; row-gap: 6px;
  padding: 0 0 28px; border: 0;
}
.inherit-ms-step:last-child { padding-bottom: 0; }
/* connector between markers; the last leg (the waiting period) is dashed */
.inherit-ms-step:not(:last-child)::before {
  content: ""; position: absolute; left: 18.5px; top: 44px; bottom: 6px; width: 1px;
  background: var(--line-strong);
}
.inherit-ms-step:nth-last-child(2)::before {
  width: 2px; left: 18px;
  background: repeating-linear-gradient(to bottom, var(--blue-300) 0 3px, transparent 3px 8px);
}
.inherit-ms-step-num {
  grid-row: 1 / span 2;
  display: grid; place-items: center;
  width: 38px; height: 38px; margin: 0; padding: 0;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: inset 0 0 0 1.5px var(--blue-300);
  font-family: var(--font-sans); font-size: 0.92rem; font-weight: 600; letter-spacing: 0; line-height: 1;
  color: var(--accent-ink);
}
.inherit-ms-step-num::before { content: none; }
.inherit-ms-step:last-child .inherit-ms-step-num {
  background: var(--blue); color: #fff;
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--blue) 14%, transparent);
}
.inherit-ms-step h3 {
  align-self: center; padding-top: 2px;
  font-family: var(--font-sans); font-weight: 600; font-size: 1.12rem; letter-spacing: -0.012em; line-height: 1.3;
  color: var(--fg);
}
.inherit-ms-step p { grid-column: 2; color: var(--muted); font-size: 0.96rem; line-height: 1.62; }
.inherit-ms .split-section:has(.inherit-ms-steps) .workflow-visual {
  padding: clamp(10px, 1.6vw, 22px);
  box-shadow: var(--shadow-sm);
}
.inherit-ms .workflow-visual .inherit-ms-hero-art svg { transform: scale(1.1); transform-origin: 50% 54%; }

/* ---- 3. three plans: stone cards with a "best for" note -------------------- */
@media (min-width: 961px) {
  /* long lede: headline left, lede right (Latin/Cyrillic/Thai; CJK headlines need the full measure) */
  body:not([data-lang="zh"]):not([data-lang="zh-tw"]):not([data-lang="ja"]):not([data-lang="ko"]) .inherit-ms .container:has(> .inherit-ms-plan-grid) > .section-heading {
    max-width: none;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    column-gap: clamp(40px, 6vw, 96px);
    align-items: end;
  }
  body:not([data-lang="zh"]):not([data-lang="zh-tw"]):not([data-lang="ja"]):not([data-lang="ko"]) .inherit-ms .container:has(> .inherit-ms-plan-grid) > .section-heading > .kicker { grid-column: 1; grid-row: 1; }
  body:not([data-lang="zh"]):not([data-lang="zh-tw"]):not([data-lang="ja"]):not([data-lang="ko"]) .inherit-ms .container:has(> .inherit-ms-plan-grid) > .section-heading > h2 { grid-column: 1; grid-row: 2; }
  body:not([data-lang="zh"]):not([data-lang="zh-tw"]):not([data-lang="ja"]):not([data-lang="ko"]) .inherit-ms .container:has(> .inherit-ms-plan-grid) > .section-heading > p { grid-column: 2; grid-row: 1 / span 2; max-width: none; font-size: 1.04rem; }
}
.inherit-ms-plan-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
}
.inherit-ms-plan {
  position: relative;
  display: flex; flex-direction: column;
  padding: 30px 28px 28px;
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--fg);
  transition: background-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.inherit-ms-plan:hover { background: var(--surface-hover); }
.inherit-ms-plan-icon { position: absolute; top: 26px; right: 26px; }
.inherit-ms-plan:hover .inherit-ms-plan-icon { background: var(--blue); color: #fff; }
.inherit-ms-plan-badge {
  display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
  max-width: calc(100% - 64px);
  min-height: 30px; margin-top: 9px; padding: 5px 13px;
  border: 0; border-radius: 15px; /* a pill on one line, a soft box if a translation wraps */
  background: var(--surface-2);
  font-family: var(--font-sans); font-size: 0.8rem; font-weight: 500; letter-spacing: 0; line-height: 1.3; text-transform: none;
  color: var(--fg);
}
.inherit-ms-plan-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--blue); flex: none; }
.inherit-ms-plan h3 { margin-top: 34px; font-size: 1.3rem; letter-spacing: -0.018em; line-height: 1.2; }
.inherit-ms-plan p { margin: 14px 0 26px; color: var(--muted); font-size: 0.94rem; line-height: 1.65; }
.inherit-ms-plan strong {
  display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; align-items: start;
  margin-top: auto; padding: 16px 18px;
  border-radius: var(--radius);
  background: var(--surface-2);
  font-family: var(--font-sans); font-weight: 500; font-size: 0.9rem; line-height: 1.5;
  color: var(--fg);
}
.inherit-ms-plan strong::before {
  content: ""; width: 18px; height: 18px; margin-top: 1px;
  background: var(--blue);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='8.4' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3Cpath d='M6.6 10.2l2.2 2.2 4.6-4.8' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='8.4' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3Cpath d='M6.6 10.2l2.2 2.2 4.6-4.8' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

@media (min-width: 961px) {
  @supports (grid-template-rows: subgrid) {
    /* titles, copy and "best for" notes line up across the three cards */
    .inherit-ms-plan-grid { grid-template-rows: auto auto 1fr auto; row-gap: 0; }
    .inherit-ms-plan { display: grid; grid-row: span 4; grid-template-rows: subgrid; }
    .inherit-ms-plan strong { margin-top: 0; }
  }
}

/* ---- 4. chains: a centred cloud of coin pills ------------------------------- */
.inherit-ms .container:has(> .inherit-ms-chain-wall) > .section-heading {
  text-align: center; justify-items: center; margin-inline: auto;
}
.inherit-ms .container:has(> .inherit-ms-chain-wall) > .section-heading p { margin-inline: auto; }
.inherit-ms-chain-wall {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 10px;
  max-width: 940px; margin: 0 auto;
  border: 0; background: none;
}
.inherit-ms-chain {
  display: inline-flex; align-items: center;
  height: 50px; padding: 0 20px 0 6px; gap: 6px;
  border-radius: var(--pill);
  background: var(--surface);
  box-shadow: var(--shadow-xs);
  font-family: var(--font-sans); font-size: 0.95rem; font-weight: 600; letter-spacing: 0.01em; text-transform: none;
  color: var(--fg);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.inherit-ms-chain::before {
  content: ""; flex: none;
  width: 38px; height: 38px; margin-top: 2px;
  background: transparent center / contain no-repeat;
}
.inherit-ms-chain:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
/* "Bitcoin first": the lead pill carries a quiet blue ring */
.inherit-ms-chain:first-child { box-shadow: inset 0 0 0 1.5px var(--blue-200), var(--shadow-xs); }
/* coin marks — order is identical in every locale (BTC ETH BSC TRX SOL BASE OP ARB MATIC BCH LTC DOGE) */
.inherit-ms-chain:nth-child(1)::before  { background-image: url("../images/coins/BTC.svg"); }
.inherit-ms-chain:nth-child(2)::before  { background-image: url("../images/coins/ETH.svg"); }
.inherit-ms-chain:nth-child(3)::before  { background-image: url("../images/coins/BSC.svg"); }
.inherit-ms-chain:nth-child(4)::before  { background-image: url("../images/coins/TRX.svg"); }
.inherit-ms-chain:nth-child(5)::before  { background-image: url("../images/coins/SOL.svg"); }
.inherit-ms-chain:nth-child(6)::before  { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 88 88'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%233d7bff'/%3E%3Cstop offset='1' stop-color='%230040d6'/%3E%3C/linearGradient%3E%3Cfilter id='s' x='-60%25' y='-60%25' width='220%25' height='220%25'%3E%3CfeDropShadow dx='0' dy='3' stdDeviation='6.5' flood-color='%230052ff' flood-opacity='.4'/%3E%3C/filter%3E%3C/defs%3E%3Ccircle cx='44' cy='43' r='31' fill='url(%23g)' filter='url(%23s)'/%3E%3Cpath transform='translate(27.5 26.5) scale(.3)' d='M54.92 110.03c30.44 0 55.11-24.63 55.11-55.01S85.36 0 54.92 0C26.04 0 2.35 22.17 0 50.39h72.85v9.25H0c2.35 28.22 26.04 50.39 54.92 50.39z' fill='%23fff'/%3E%3C/svg%3E"); }
.inherit-ms-chain:nth-child(7)::before  { background-image: url("../images/coins/OP.svg"); }
.inherit-ms-chain:nth-child(8)::before  { background-image: url("../images/coins/ARB.svg"); }
.inherit-ms-chain:nth-child(9)::before  { background-image: url("../images/coins/MATIC.svg"); }
.inherit-ms-chain:nth-child(10)::before { background-image: url("../images/coins/BCH.svg"); }
.inherit-ms-chain:nth-child(11)::before { background-image: url("../images/coins/LTC.svg"); }
.inherit-ms-chain:nth-child(12)::before { background-image: url("../images/coins/DOGE.svg"); }

/* ---- 5. best practices: three quiet cards ------------------------------------ */
.inherit-ms-practice {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.inherit-ms-practice-card {
  display: flex; flex-direction: column; align-items: flex-start;
  padding: 28px 28px 30px;
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--fg);
  transition: background-color 0.3s var(--ease);
}
.inherit-ms-practice-card .card-icon { border-radius: 50%; }
.inherit-ms-practice-card:hover { background: var(--surface-hover); }
.inherit-ms-practice-card:hover .card-icon { background: var(--blue); color: #fff; }
.inherit-ms-practice-card h3 { margin-top: 26px; font-size: 1.2rem; letter-spacing: -0.014em; line-height: 1.25; }
.inherit-ms-practice-card p { margin-top: 10px; color: var(--muted); font-size: 0.95rem; line-height: 1.62; }

/* ---- 6. FAQ: sticky heading beside the accordion --------------------------- */
.inherit-ms .container:has(> .inherit-ms-faq) {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
}
.inherit-ms .container:has(> .inherit-ms-faq) > .section-heading {
  position: sticky; top: calc(var(--header-h) + 32px);
  margin-bottom: 0;
}
.inherit-ms .container:has(> .inherit-ms-faq) > .section-heading h2 { font-size: var(--fs-h2-sm); }
.inherit-ms-faq { max-width: none; gap: 10px; }
.inherit-ms-faq details { transition: box-shadow 0.3s var(--ease); }
.inherit-ms-faq details[open] { box-shadow: var(--shadow-sm); }
.inherit-ms-faq summary { line-height: 1.4; }
.inherit-ms-faq summary:hover { color: var(--accent-ink); }
.inherit-ms-faq details > p { font-size: 0.97rem; }

/* ---- 7. closing CTA: night band with the 416-day timer ring ---------------- */
.inherit-ms > .section.t-ink:has(.page-cta) {
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(ellipse 60% 90% at 88% 50%, rgba(13, 128, 254, 0.22), transparent 70%),
    var(--night);
}
/* timer arc ~ three quarters run, echoing the illustrations */
.inherit-ms > .section.t-ink:has(.page-cta)::before,
.inherit-ms > .section.t-ink:has(.page-cta)::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  top: 50%; right: clamp(-220px, -10vw, -80px);
  aspect-ratio: 1; border-radius: 50%;
  transform: translateY(-50%);
}
.inherit-ms > .section.t-ink:has(.page-cta)::before {
  width: clamp(380px, 46vw, 640px);
  /* only the left sweep shows inside the band: a track, then the run filling in towards its head */
  background: conic-gradient(from 0deg, rgba(255, 255, 255, 0.1) 0 58%, rgba(150, 196, 255, 0) 58%, var(--blue-300) 81%, var(--blue) 82%, rgba(255, 255, 255, 0.12) 82% 100%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
  opacity: 0.9;
}
.inherit-ms > .section.t-ink:has(.page-cta)::after {
  width: clamp(300px, 36vw, 500px);
  right: calc(clamp(-220px, -10vw, -80px) + (clamp(380px, 46vw, 640px) - clamp(300px, 36vw, 500px)) / 2);
  border: 1px solid rgba(255, 255, 255, 0.07);
}
.inherit-ms .t-ink .page-cta {
  padding: 0; border-radius: 0; background: none; overflow: visible;
  align-items: end;
}
.inherit-ms .t-ink .page-cta .section-heading h2 { font-size: var(--fs-h2); }
.inherit-ms .t-ink .page-cta .section-heading p { font-size: var(--fs-lede); max-width: 620px; }

/* ---- responsive ------------------------------------------------------------- */
@media (max-width: 1100px) {
  .inherit-ms-plan { padding: 26px 22px 24px; }
  .inherit-ms-plan-icon { top: 22px; right: 22px; }
}
@media (max-width: 960px) {
  .inherit-ms-plan-grid { grid-template-columns: minmax(0, 1fr); max-width: 760px; }
  .inherit-ms-pain, .inherit-ms-practice { grid-template-columns: minmax(0, 1fr); }
  .inherit-ms-pain { gap: 32px; }
  .inherit-ms-pain-card p { max-width: none; }
  .inherit-ms .container:has(> .inherit-ms-faq) { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .inherit-ms .container:has(> .inherit-ms-faq) > .section-heading { position: static; margin-bottom: clamp(28px, 4vw, 40px); }
  .inherit-ms .container:has(> .inherit-ms-faq) > .section-heading h2 { font-size: var(--fs-h2); }
  .inherit-ms > .section.t-ink:has(.page-cta)::before { top: auto; bottom: -38%; transform: none; opacity: 0.55; }
  .inherit-ms > .section.t-ink:has(.page-cta)::after { top: auto; bottom: calc(-38% + (clamp(380px, 46vw, 640px) - clamp(300px, 36vw, 500px)) / 2); transform: none; }
}
@media (max-width: 640px) {
  .inherit-ms-plan, .inherit-ms-practice-card { padding: 24px 22px 24px; }
  .inherit-ms-plan-icon { top: 22px; right: 22px; width: 44px; height: 44px; }
  .inherit-ms-plan-badge { margin-top: 7px; max-width: calc(100% - 58px); }
  .inherit-ms-plan h3 { margin-top: 28px; font-size: 1.22rem; }
  .inherit-ms-practice-card { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 16px; }
  .inherit-ms-practice-card .card-icon { grid-row: 1 / span 2; width: 44px; height: 44px; }
  .inherit-ms-practice-card h3 { margin-top: 9px; }
  .inherit-ms-pain-card { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 16px; padding-top: 22px; }
  .inherit-ms-pain-card .card-icon { grid-row: 1 / span 2; width: 44px; height: 44px; }
  .inherit-ms-pain-card h3 { margin-top: 9px; font-size: 1.18rem; }
  .inherit-ms-step { column-gap: 16px; }
  .inherit-ms-chain-wall { gap: 8px; }
  .inherit-ms-chain { height: 44px; padding: 0 16px 0 5px; gap: 4px; font-size: 0.88rem; }
  .inherit-ms-chain::before { width: 34px; height: 34px; }
  .inherit-ms-faq summary { padding: 18px 20px; font-size: 0.98rem; }
  .inherit-ms .t-ink .cta-actions .btn { flex: 1 1 100%; }
  /* the split art renders at ~60% on phones: keep its labels legible */
  .inherit-ms .workflow-visual .is-lbl { font-size: 16px !important; }
  .inherit-ms .workflow-visual .is-ltr { font-size: 18px !important; }
  .inherit-ms .workflow-visual .is-vname { font-size: 15px; }
  .inherit-ms-faq details > p { padding: 0 20px 20px; }
}

/* ===== 54-external-signer.css ===== */
/* ==========================================================================
   54 — External signer (/en/external-signer/, public protocol)
   Using an Ownbit cold wallet as the offline signer for other wallets.
   The hero, summaries, cards and CTA come from 03 / 11; this part restyles
   the two inline diagrams (.xs-*), the 6-up card grids, the protocol table,
   the scope note, the wallet logo lists and the closing night band.
   Every rule is scoped to body[data-page="external-signer"].
   ========================================================================== */

/* ---- diagrams: shared ink (inline SVG, class hooks only) ----------------- */
body[data-page="external-signer"] .xs-art { width: 100%; height: auto; display: block; overflow: visible; }
body[data-page="external-signer"] .xs-art :where(text) { fill: var(--fg); }
body[data-page="external-signer"] .xs-sans { font-family: var(--font-sans); font-size: 14px; font-weight: 600; letter-spacing: -0.01em; }
body[data-page="external-signer"] .xs-mono { font-family: var(--font-sans); font-size: 10.5px; font-weight: 500; letter-spacing: 0.01em; text-transform: none; fill: var(--muted); }
body[data-page="external-signer"] .xs-body { font-family: var(--font-sans); font-size: 11px; fill: var(--muted); }
body[data-page="external-signer"] .xs-card { fill: var(--surface-2); stroke: none; rx: 16px; }
body[data-page="external-signer"] .xs-screen { fill: var(--ink); stroke: var(--hair-light); stroke-width: 1; rx: 10px; }
body[data-page="external-signer"] .xs-rule { stroke: var(--line); stroke-width: 1; fill: none; }
body[data-page="external-signer"] .xs-flow { stroke: var(--blue); stroke-width: 1.6; fill: none; stroke-linecap: round; stroke-dasharray: 4 7; }
body[data-page="external-signer"] .xs-head { stroke: var(--blue); stroke-width: 1.6; fill: none; stroke-linecap: round; stroke-linejoin: round; }
body[data-page="external-signer"] .xs-qr { fill: var(--ink); }
body[data-page="external-signer"] .xs-accent { fill: var(--blue); }
body[data-page="external-signer"] .xs-badge { fill: none; stroke: var(--blue); stroke-width: 1.4; }
@media (prefers-reduced-motion: no-preference) {
  body[data-page="external-signer"] .xs-flow { animation: xs-dash 1.4s linear infinite; }
}
@keyframes xs-dash { to { stroke-dashoffset: -22; } }

/* ---- hero tile: online phone lit, offline phone dark ---------------------- */
body[data-page="external-signer"] .page-hero .page-visual-card {
  padding: clamp(10px, 1.6vw, 22px);
  background:
    radial-gradient(ellipse 70% 60% at 50% 105%, rgba(13, 128, 254, 0.22), rgba(13, 128, 254, 0) 70%),
    var(--night);
}
body[data-page="external-signer"] .page-hero .xs-card { fill: rgba(255, 255, 255, 0.05); stroke: rgba(255, 255, 255, 0.1); stroke-width: 1; height: 232px; }
body[data-page="external-signer"] .page-hero .xs-art > rect:nth-of-type(2) { fill: #f6f7f9; stroke: none; }   /* online wallet screen */
body[data-page="external-signer"] .page-hero .xs-art > rect:nth-of-type(4) { fill: #070a10; stroke: rgba(150, 196, 255, 0.22); } /* offline Ownbit screen */
body[data-page="external-signer"] .page-hero .xs-qr { fill: var(--ink); }
body[data-page="external-signer"] .page-hero .xs-accent { fill: var(--blue); }
body[data-page="external-signer"] .page-hero .xs-badge,
body[data-page="external-signer"] .page-hero .xs-head { stroke: #5aa6ff; }
body[data-page="external-signer"] .page-hero .xs-flow { stroke: #5aa6ff; }
body[data-page="external-signer"] .page-hero .xs-mono { fill: rgba(243, 245, 249, 0.62); }
body[data-page="external-signer"] .page-hero .xs-body { fill: rgba(243, 245, 249, 0.7); }

/* ---- 6-up card grids: three even columns, white icon tiles ---------------- */
body[data-page="external-signer"] .section .container > .info-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
body[data-page="external-signer"] .section .info-card .card-icon { background: var(--surface-2); color: var(--accent-ink); box-shadow: var(--shadow-xs); }

/* ---- "Security design": sticky heading beside an editorial list ----------- */
body[data-page="external-signer"] .section.t-paper:has(+ .section.t-ink) > .container {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.5fr);
  gap: clamp(36px, 6vw, 96px);
  align-items: start;
}
body[data-page="external-signer"] .section.t-paper:has(+ .section.t-ink) .section-heading {
  position: sticky; top: calc(var(--header-h) + 40px);
  margin: 0;
}
body[data-page="external-signer"] .section.t-paper:has(+ .section.t-ink) .section-heading h2 { font-size: var(--fs-h2-sm); }
body[data-page="external-signer"] .section.t-paper:has(+ .section.t-ink) .container > .info-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(28px, 3.5vw, 48px);
  margin: 0;
}
body[data-page="external-signer"] .section.t-paper:has(+ .section.t-ink) .container > .info-grid > .info-card {
  display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 18px; align-content: start;
  padding: 26px 0 30px;
  background: none;
  border-radius: 0;
  border-top: 1px solid var(--line);
}
body[data-page="external-signer"] .section.t-paper:has(+ .section.t-ink) .container > .info-grid > .info-card:hover { background: none; }
body[data-page="external-signer"] .section.t-paper:has(+ .section.t-ink) .info-card .card-icon {
  grid-row: 1 / span 2; margin: 0;
  background: var(--blue-50); box-shadow: none; color: var(--blue-700);
}
body[data-page="external-signer"] .section.t-paper:has(+ .section.t-ink) .info-card h3 { margin: 0 0 8px; padding-top: 2px; font-size: 1.08rem; }

/* ---- how it works: three white step cards straight on the stone band ------- */
body[data-page="external-signer"] .section.t-beige > .container > .split-visual {
  padding: 0;
  margin-top: clamp(-24px, -1.5vw, -8px);
  border-radius: 0;
  background: none;
  overflow: visible;
}
body[data-page="external-signer"] .split-visual .xs-card { fill: var(--surface); filter: drop-shadow(0 1px 2px rgba(14, 17, 22, 0.04)); }
body[data-page="external-signer"] .split-visual .xs-mono { fill: var(--accent-ink); font-weight: 600; font-size: 11px; }
body[data-page="external-signer"] .split-visual .xs-sans { font-size: 16px; }
body[data-page="external-signer"] .split-visual .xs-body { font-size: 11.5px; }

/* ---- protocol table --------------------------------------------------------- */
body[data-page="external-signer"] .table-shell {
  padding: 0;
  border: 6px solid var(--surface);   /* a border, not padding: scrolled cells clip at the frame */
  border-radius: var(--radius-lg);
  background: var(--surface);
}
body[data-page="external-signer"] .proto-table {
  width: 100%;
  border-collapse: separate; border-spacing: 0;
  background: var(--surface-2);
  border-radius: 18px;
  overflow: hidden;
  overflow: clip;   /* clip, not hidden: keeps the sticky chain column working on phones */
  font-size: 0.93rem;
}
body[data-page="external-signer"] .proto-table th,
body[data-page="external-signer"] .proto-table td {
  padding: 18px 24px;
  text-align: left;
  vertical-align: middle;
  white-space: normal;
  min-width: 0;
  border-bottom: 1px solid var(--line);
  color: var(--fg);
}
body[data-page="external-signer"] .proto-table thead th {
  padding-block: 16px;
  font-size: 0.84rem; font-weight: 500; color: var(--muted);
  background: var(--surface-2);
}
body[data-page="external-signer"] .proto-table tbody tr:last-child td { border-bottom: 0; font-weight: 400; }
body[data-page="external-signer"] .proto-table tbody tr:hover td { background: var(--blue-50); }
body[data-page="external-signer"] .proto-table td:first-child {
  width: 18%;
  white-space: nowrap;
  font-family: var(--font-sans); font-size: 0.96rem; font-weight: 600; letter-spacing: -0.01em; text-transform: none;
  color: var(--fg);
}
body[data-page="external-signer"] .proto-table td:nth-child(2) { width: 42%; color: var(--muted); }
body[data-page="external-signer"] .proto-table code {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 7px;
  background: var(--stone);
  font-family: var(--font-mono); font-size: 0.8rem; line-height: 1.4;
  color: var(--ink);
  white-space: nowrap;
}
body[data-page="external-signer"] .proto-table td:last-child code:last-child { background: var(--blue-50); color: var(--blue-700); }

/* ---- scope note: a quiet blue panel with an info mark ------------------------ */
body[data-page="external-signer"] .recovery-note {
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 18px 22px;
  align-items: center;
  margin-top: 14px;
  padding: 24px 28px;
  border-radius: var(--radius-lg);
  background: var(--blue-50);
}
body[data-page="external-signer"] .recovery-note::before {
  content: "";
  align-self: start;
  width: 42px; height: 42px; border-radius: 50%;
  background: #fff center / 20px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='7.6' fill='none' stroke='%23095bc0' stroke-width='1.5'/%3E%3Cpath d='M10 9.2v4.6' stroke='%23095bc0' stroke-width='1.7' stroke-linecap='round'/%3E%3Ccircle cx='10' cy='6.5' r='1' fill='%23095bc0'/%3E%3C/svg%3E");
  box-shadow: var(--shadow-xs);
}
body[data-page="external-signer"] .recovery-note h3 { font-size: 1.06rem; margin: 0 0 6px; }
body[data-page="external-signer"] .recovery-note p { font-size: 0.93rem; line-height: 1.6; color: var(--ink-3); max-width: 720px; }
body[data-page="external-signer"] .recovery-note .link-chip { background: #fff; border-color: transparent; box-shadow: var(--shadow-xs); }

/* ---- compatibility: two white panels of wallet tiles ---------------------------- */
body[data-page="external-signer"] .wallet-group {
  display: grid;
  grid-template-columns: minmax(0, 290px) minmax(0, 1fr);
  grid-template-areas: "head chips" "desc chips";
  grid-template-rows: auto 1fr;
  gap: 12px clamp(28px, 4vw, 56px);
  margin-top: 14px;
  padding: clamp(24px, 3vw, 36px);
  border-radius: var(--radius-lg);
  background: var(--surface);
}
body[data-page="external-signer"] .wallet-group-head {
  grid-area: head;
  display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
}
body[data-page="external-signer"] .wallet-group-head h3 { font-size: 1.3rem; letter-spacing: -0.015em; }
body[data-page="external-signer"] .wallet-group-head span {
  display: block;
  padding: 5px 12px;
  border-radius: var(--pill);
  background: var(--surface-2);
  font-family: var(--font-sans); font-size: 0.8rem; font-weight: 500; line-height: 1.3;
  letter-spacing: 0; text-transform: none;
  color: var(--muted);
}
body[data-page="external-signer"] .wallet-group-head span::first-letter { text-transform: uppercase; }
body[data-page="external-signer"] .section-heading + .wallet-group .wallet-group-head span { background: var(--blue-50); color: var(--blue-700); }
body[data-page="external-signer"] .wallet-group > p { grid-area: desc; margin: 0; font-size: 0.94rem; line-height: 1.6; color: var(--muted); }
body[data-page="external-signer"] .wallet-chips {
  grid-area: chips;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 172px), 1fr));
  gap: 8px;
  margin: 0;
  align-content: start;
}
body[data-page="external-signer"] .wallet-chip {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 12px; row-gap: 1px;
  align-items: center;
  min-width: 0;
  padding: 11px 14px 11px 11px;
  border: 0;
  border-radius: 16px;
  background: var(--surface-2);
  color: var(--fg);
  transition: background-color 0.2s var(--ease);
}
body[data-page="external-signer"] .wallet-chip:hover { background: var(--stone-2); }
body[data-page="external-signer"] .wallet-chip img {
  grid-row: 1 / span 2;
  width: 32px; height: 32px;
  border-radius: 9px;
  background: #fff;
  box-shadow: 0 0 0 1px var(--hair);
  object-fit: cover;
}
body[data-page="external-signer"] .wallet-chip b {
  align-self: end;
  font-size: 0.92rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1.25;
  overflow-wrap: anywhere;
}
body[data-page="external-signer"] .wallet-chip small {
  align-self: start;
  font-family: var(--font-sans); font-size: 0.74rem; font-weight: 500; line-height: 1.3;
  letter-spacing: 0.02em; text-transform: none;
  color: var(--muted);
}
body[data-page="external-signer"] .wallet-note { margin-top: 22px; max-width: 760px; font-size: 0.86rem; line-height: 1.6; color: var(--muted); }

/* ---- closing night band: centred, with an engraved dial rising behind it --------- */
body[data-page="external-signer"] main > .section.t-ink:last-child {
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(88px, 10vw, 150px);
  background:
    radial-gradient(ellipse 55% 65% at 50% 118%, rgba(13, 128, 254, 0.42), rgba(13, 128, 254, 0) 72%),
    repeating-radial-gradient(circle at 50% 135%, rgba(255, 255, 255, 0) 0 61px, rgba(255, 255, 255, 0.05) 61px 62px),
    var(--night);
}
body[data-page="external-signer"] main > .section.t-ink:last-child .section-heading {
  justify-items: center; text-align: center; margin-inline: auto; max-width: 820px;
  margin-bottom: 36px;
}
body[data-page="external-signer"] main > .section.t-ink:last-child .section-heading h2 { font-size: clamp(2.3rem, 1.4rem + 3vw, 4rem); }
body[data-page="external-signer"] main > .section.t-ink:last-child .section-heading p { margin-inline: auto; }
body[data-page="external-signer"] main > .section.t-ink:last-child .link-row { justify-content: center; align-items: center; gap: 12px; }
body[data-page="external-signer"] main > .section.t-ink:last-child .link-chip {
  min-height: 52px; padding: 0 22px;
  background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.16); color: #fff;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
body[data-page="external-signer"] main > .section.t-ink:last-child .link-chip:hover { background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.28); }

/* ---- responsive --------------------------------------------------------------- */
@media (max-width: 1100px) {
  body[data-page="external-signer"] .section.t-paper:has(+ .section.t-ink) > .container { grid-template-columns: minmax(0, 1fr); }
  body[data-page="external-signer"] .section.t-paper:has(+ .section.t-ink) .section-heading { position: static; margin-bottom: clamp(28px, 4vw, 44px); }
}
@media (max-width: 960px) {
  body[data-page="external-signer"] .section .container > .info-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body[data-page="external-signer"] .wallet-group { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "desc" "chips"; grid-template-rows: none; }
  body[data-page="external-signer"] .wallet-chips { margin-top: 10px; }
  body[data-page="external-signer"] .recovery-note { grid-template-columns: auto minmax(0, 1fr); }
  body[data-page="external-signer"] .recovery-note .link-row { grid-column: 2; }

  /* the 900×220 step strip re-stacks into a vertical column (CSS transforms on the
     step groups; the viewBox stays, the box grows to 900×1606 user units) */
  body[data-page="external-signer"] .split-visual .xs-art { max-width: 440px; margin-inline: auto; aspect-ratio: 900 / 1606; }
  body[data-page="external-signer"] .split-visual .xs-art > g:nth-of-type(1) { transform: translate(-2.1px, -825px) scale(3.3); }
  body[data-page="external-signer"] .split-visual .xs-art > g:nth-of-type(3) { transform: translate(-1071.3px, -253px) scale(3.3); }
  body[data-page="external-signer"] .split-visual .xs-art > g:nth-of-type(5) { transform: translate(-2140.5px, 319px) scale(3.3); }
  body[data-page="external-signer"] .split-visual .xs-art > g:nth-of-type(5) > rect { width: 258px; }
  body[data-page="external-signer"] .split-visual .xs-art > g:nth-of-type(2) { transform: translate(450px, -176px) rotate(90deg) scale(1.6) translate(-300px, -110px); }
  body[data-page="external-signer"] .split-visual .xs-art > g:nth-of-type(4) { transform: translate(450px, 396px) rotate(90deg) scale(1.6) translate(-624px, -110px); }
  body[data-page="external-signer"] .split-visual .xs-card { rx: 12px; }
  body[data-page="external-signer"] .split-visual .xs-sans { font-size: 15px; }
  body[data-page="external-signer"] .split-visual .xs-body { font-size: 11px; }
  body[data-page="external-signer"] .split-visual .xs-mono { font-size: 10px; }
}
@media (max-width: 640px) {
  /* hero diagram: larger labels so they survive the phone-width scale-down */
  body[data-page="external-signer"] .page-hero .xs-mono { font-size: 14px; }
  body[data-page="external-signer"] .page-hero .xs-sans { font-size: 17px; }
  body[data-page="external-signer"] .page-hero .xs-body { font-size: 13px; }

  /* "What it does": compact rows, icon beside the title */
  body[data-page="external-signer"] .page-hero + .section .container > .info-grid > .info-card {
    display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 16px; align-content: start;
    padding: 20px 20px 22px;
  }
  body[data-page="external-signer"] .page-hero + .section .info-card .card-icon { grid-row: 1 / span 2; width: 40px; height: 40px; border-radius: 11px; margin: 0; }
  body[data-page="external-signer"] .page-hero + .section .info-card h3 { margin: 2px 0 6px; font-size: 1.04rem; }

  body[data-page="external-signer"] .section .container > .info-grid,
  body[data-page="external-signer"] .section.t-paper:has(+ .section.t-ink) .container > .info-grid { grid-template-columns: minmax(0, 1fr); }
  body[data-page="external-signer"] .section.t-paper:has(+ .section.t-ink) .container > .info-grid > .info-card { padding: 22px 0 24px; }

  /* the table scrolls sideways inside its frame; the chain column stays put */
  body[data-page="external-signer"] .proto-table { min-width: 620px; font-size: 0.9rem; }
  body[data-page="external-signer"] .proto-table th, body[data-page="external-signer"] .proto-table td { padding: 15px 16px; }
  body[data-page="external-signer"] .proto-table th:first-child,
  body[data-page="external-signer"] .proto-table td:first-child {
    position: sticky; left: 0; z-index: 1;
    width: auto;
    background: var(--surface-2);
    box-shadow: 1px 0 0 var(--line);
  }

  body[data-page="external-signer"] .recovery-note { grid-template-columns: minmax(0, 1fr); padding: 22px; }
  body[data-page="external-signer"] .recovery-note .link-row { grid-column: auto; }

  body[data-page="external-signer"] .wallet-group { padding: 22px 16px 16px; border-radius: 20px; }
  body[data-page="external-signer"] .wallet-group-head { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding-inline: 4px; }
  body[data-page="external-signer"] .wallet-group > p { padding-inline: 4px; font-size: 0.92rem; }
  body[data-page="external-signer"] .wallet-chips { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  body[data-page="external-signer"] .wallet-chip { grid-template-columns: 28px minmax(0, 1fr); column-gap: 10px; padding: 10px; border-radius: 14px; }
  body[data-page="external-signer"] .wallet-chip img { width: 28px; height: 28px; border-radius: 8px; }
  body[data-page="external-signer"] .wallet-chip b { font-size: 0.86rem; }

  body[data-page="external-signer"] main > .section.t-ink:last-child .link-row { flex-direction: column; align-items: stretch; }
  body[data-page="external-signer"] main > .section.t-ink:last-child .link-row > * { justify-content: center; }
}

/* ===== 55-features.css ===== */
/* ==========================================================================
   55 — Feature pages: /features/secure/, /features/cold-wallet/, /features/multisig/
   (body[data-page="feature"], one data-slug per page, all ten locales).
   The photo heroes and summary cards come from 11-pages; this part styles
   the sections after them:
     · highlight cards       stone cards, white icon tiles
     · "How it works" split   re-inked v2 artwork in a white frame beside a
                              quiet hairline list (checks; numbered steps on
                              the cold-wallet page, where the order matters)
     · cold-wallet security   sticky heading beside an editorial list
     · external-signer teaser a compact stone band with a blue QR mark
     · closing night band     centred CTA over an engraved dial and blue glow
   ========================================================================== */

/* ---- highlight cards --------------------------------------------------------- */
body[data-page="feature"] .page-hero + .section .container > .info-grid > .info-card { padding: 28px 26px 30px; }
body[data-page="feature"] .section .info-card .card-icon {
  background: var(--surface-2);
  color: var(--accent-ink);
  box-shadow: var(--shadow-xs);
}
body[data-page="feature"] .section .info-card h3 { font-size: 1.12rem; }

/* ---- "How it works": artwork frame + hairline list ----------------------------- */
body[data-page="feature"] .section.t-beige .split-section {
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(36px, 6vw, 96px);
  align-items: center;
}
body[data-page="feature"] .section.t-beige .workflow-visual {
  padding: clamp(12px, 1.6vw, 22px);
  border-radius: var(--radius-xl);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
body[data-page="feature"] .section.t-beige .workflow-visual img { border-radius: 18px; }
body[data-page="feature"] .split-copy .workflow-grid {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  width: 100%;
  margin-top: 10px;
  counter-reset: wf;
}
body[data-page="feature"] .split-copy .workflow-card {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  column-gap: 16px;
  align-items: start;
  padding: 20px 0 22px;
  background: none;
  border-radius: 0;
  border-top: 1px solid var(--line-strong);
}
body[data-page="feature"] .split-copy .workflow-card::before {
  content: "";
  grid-row: 1 / span 2;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--surface) center / 15px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.4 8.5l2.9 2.8 6.3-6.6' fill='none' stroke='%23095bc0' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  box-shadow: var(--shadow-xs);
}
body[data-page="feature"] .split-copy .workflow-card strong { margin: 6px 0 5px; font-size: 1.02rem; }
body[data-page="feature"] .split-copy .workflow-card p { font-size: 0.94rem; line-height: 1.6; max-width: 520px; }

/* cold wallet: build → sign → broadcast is a sequence, so it is numbered */
body[data-slug="features/cold-wallet"] .split-copy .workflow-card { counter-increment: wf; }
body[data-slug="features/cold-wallet"] .split-copy .workflow-card::before {
  content: counter(wf);
  display: grid; place-items: center;
  background-image: none;
  font-family: var(--font-mono); font-size: 0.82rem; font-weight: 500; line-height: 1;
  color: var(--accent-ink);
}

/* ---- cold wallet security: sticky heading beside an editorial list ---------------- */
body[data-slug="features/cold-wallet"] .cw-security > .container {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.5fr);
  gap: clamp(36px, 6vw, 96px);
  align-items: start;
}
body[data-slug="features/cold-wallet"] .cw-security .section-heading {
  position: sticky; top: calc(var(--header-h) + 40px);
  margin: 0;
}
body[data-slug="features/cold-wallet"] .cw-security .section-heading h2 { font-size: var(--fs-h2-sm); }
body[data-slug="features/cold-wallet"] .cw-security .container > .info-grid {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  margin: 0;
}
body[data-slug="features/cold-wallet"] .cw-security .container > .info-grid > .info-card:nth-child(n) {
  grid-column: auto;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  column-gap: 22px;
  align-content: start;
  padding: 28px 0 30px;
  background: none;
  border-radius: 0;
  border-top: 1px solid var(--line);
}
body[data-slug="features/cold-wallet"] .cw-security .container > .info-grid > .info-card:last-child { border-bottom: 1px solid var(--line); }
body[data-slug="features/cold-wallet"] .cw-security .info-card .card-icon {
  grid-row: 1 / span 2;
  margin: 0;
  background: var(--blue-50);
  color: var(--blue-700);
  box-shadow: none;
}
body[data-slug="features/cold-wallet"] .cw-security .info-card h3 { margin: 2px 0 8px; font-size: 1.14rem; }
body[data-slug="features/cold-wallet"] .cw-security .info-card p { max-width: 640px; font-size: 0.97rem; }

/* ---- external-signer teaser: a compact stone band ---------------------------------- */
body[data-slug="features/cold-wallet"] .xs-teaser { padding-block: clamp(36px, 4.5vw, 60px); }
body[data-slug="features/cold-wallet"] .xs-teaser .recovery-note {
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 20px clamp(24px, 3vw, 44px);
  align-items: center;
  margin: 0;
  padding: 0;
  border-radius: 0;
  background: none;
}
body[data-slug="features/cold-wallet"] .xs-teaser .recovery-note::before {
  content: "";
  align-self: start;
  width: 56px; height: 56px;
  border-radius: 18px;
  background: var(--blue) center / 26px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='3.5' width='6.5' height='6.5' rx='1.4'/%3E%3Crect x='14' y='3.5' width='6.5' height='6.5' rx='1.4'/%3E%3Crect x='3.5' y='14' width='6.5' height='6.5' rx='1.4'/%3E%3Cpath d='M14 14h2.6v2.6H14zM20.5 14v.01M20.5 20.5h-3.4M14 20.5v.01'/%3E%3C/svg%3E");
  box-shadow: var(--shadow-blue);
}
body[data-slug="features/cold-wallet"] .xs-teaser .recovery-note h3 { margin: 0 0 8px; font-size: 1.3rem; letter-spacing: -0.015em; }
body[data-slug="features/cold-wallet"] .xs-teaser .recovery-note p { max-width: 680px; font-size: 0.97rem; line-height: 1.6; color: var(--muted); }
body[data-slug="features/cold-wallet"] .xs-teaser .recovery-note .link-row { gap: 8px; }
body[data-slug="features/cold-wallet"] .xs-teaser .recovery-note .link-chip {
  justify-content: space-between;
  min-height: 46px; padding: 0 20px;
  background: var(--surface); border-color: transparent;
  box-shadow: var(--shadow-xs);
}
body[data-slug="features/cold-wallet"] .xs-teaser .recovery-note .link-chip:hover { box-shadow: var(--shadow-sm); }

/* ---- closing night band: centred CTA over an engraved dial ---------------------------- */
body[data-page="feature"] main > .section.t-ink:last-child {
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(88px, 10vw, 150px);
  background:
    radial-gradient(ellipse 55% 65% at 50% 118%, rgba(13, 128, 254, 0.42), rgba(13, 128, 254, 0) 72%),
    repeating-radial-gradient(circle at 50% 135%, rgba(255, 255, 255, 0) 0 61px, rgba(255, 255, 255, 0.05) 61px 62px),
    var(--night);
}
body[data-page="feature"] main > .section.t-ink:last-child .page-cta {
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  gap: 34px;
  padding: 0;
  border-radius: 0;
  background: none;
  overflow: visible;
  text-align: center;
}
body[data-page="feature"] main > .section.t-ink:last-child .page-cta .section-heading { justify-items: center; }
body[data-page="feature"] main > .section.t-ink:last-child .page-cta .section-heading h2 { font-size: clamp(2.3rem, 1.4rem + 3vw, 4rem); }
body[data-page="feature"] main > .section.t-ink:last-child .page-cta .section-heading p { margin-inline: auto; max-width: 600px; font-size: var(--fs-lede); }
body[data-page="feature"] main > .section.t-ink:last-child .cta-actions { justify-content: center; gap: 12px; }

/* ---- responsive ------------------------------------------------------------------------ */
@media (max-width: 1100px) {
  body[data-slug="features/cold-wallet"] .cw-security > .container { grid-template-columns: minmax(0, 1fr); gap: 0; }
  body[data-slug="features/cold-wallet"] .cw-security .section-heading { position: static; margin-bottom: clamp(28px, 4vw, 44px); }
}
@media (max-width: 960px) {
  body[data-page="feature"] .section.t-beige .split-section { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  body[data-page="feature"] .section.t-beige .workflow-visual { margin-inline: auto; width: 100%; }
  body[data-slug="features/cold-wallet"] .xs-teaser .recovery-note { grid-template-columns: auto minmax(0, 1fr); }
  body[data-slug="features/cold-wallet"] .xs-teaser .recovery-note .link-row { grid-column: 2; flex-direction: row; flex-wrap: wrap; align-items: center; }
}
@media (max-width: 640px) {
  body[data-page="feature"] .page-hero + .section .container > .info-grid > .info-card {
    display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 16px; align-content: start;
    padding: 20px 20px 22px;
  }
  body[data-page="feature"] .page-hero + .section .info-card .card-icon { grid-row: 1 / span 2; width: 40px; height: 40px; border-radius: 11px; margin: 0; }
  body[data-page="feature"] .page-hero + .section .info-card h3 { margin: 2px 0 6px; font-size: 1.04rem; }
  body[data-slug="features/cold-wallet"] .cw-security .container > .info-grid > .info-card:nth-child(n) { grid-template-columns: 40px minmax(0, 1fr); column-gap: 16px; padding: 22px 0 24px; }
  body[data-slug="features/cold-wallet"] .cw-security .info-card .card-icon { width: 40px; height: 40px; border-radius: 11px; }
  body[data-slug="features/cold-wallet"] .cw-security .info-card h3 { font-size: 1.06rem; }
  body[data-slug="features/cold-wallet"] .cw-security .info-card p { font-size: 0.94rem; }
  body[data-slug="features/cold-wallet"] .xs-teaser .recovery-note { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  body[data-slug="features/cold-wallet"] .xs-teaser .recovery-note::before { width: 48px; height: 48px; border-radius: 15px; background-size: 22px; }
  body[data-slug="features/cold-wallet"] .xs-teaser .recovery-note .link-row { grid-column: auto; flex-direction: column; align-items: stretch; }
  body[data-page="feature"] main > .section.t-ink:last-child .cta-actions { flex-direction: column; align-items: stretch; width: 100%; }
  body[data-page="feature"] main > .section.t-ink:last-child .cta-actions .btn { width: 100%; }
}

/* ===== 60-legal-redirect.css ===== */
/* ==========================================================================
   60 — Legal pages (privacy / terms) + root redirect stubs + 404
   --------------------------------------------------------------------------
   legal     body[data-route-type="legal"]: a light stone hero frame with an
             engraved guilloche "vault seal" and a document-details card, then a
             calm reading column beside a sticky contents card.
   redirect  body[data-route-type="redirect"] (/, /security/, /privacy-policy/…):
             a quiet splash — logo, message, progress line — on a stone frame.
   404       body[data-route-type="notfound"]: a framed photograph (lighthouse:
             "find your way back") with serif copy and pill actions.
   ========================================================================== */

/* engraved seal shared by the legal hero and the redirect splash:
   a guilloche rosette inside a dial ring, keyhole in the centre */
.policy-hero, .redirect-shell {
  --lr-seal: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 480 480' fill='none' stroke='%230d80fe'%3E%3Ccircle cx='240' cy='240' r='236' stroke-width='1.2'/%3E%3Ccircle cx='240' cy='240' r='230' stroke-width='.5'/%3E%3Ccircle cx='240' cy='240' r='219' stroke-width='12' stroke-opacity='.5' pathLength='360' stroke-dasharray='.2 2.8'/%3E%3Ccircle cx='240' cy='240' r='207' stroke-width='.7'/%3E%3Cg stroke-width='.5' stroke-opacity='.75'%3E%3Cg id='b'%3E%3Ccircle id='a' cx='359' cy='240' r='81'/%3E%3Cuse href='%23a' transform='rotate(6 240 240)'/%3E%3Cuse href='%23a' transform='rotate(12 240 240)'/%3E%3Cuse href='%23a' transform='rotate(18 240 240)'/%3E%3Cuse href='%23a' transform='rotate(24 240 240)'/%3E%3C/g%3E%3Cuse href='%23b' transform='rotate(30 240 240)'/%3E%3Cuse href='%23b' transform='rotate(60 240 240)'/%3E%3Cuse href='%23b' transform='rotate(90 240 240)'/%3E%3Cuse href='%23b' transform='rotate(120 240 240)'/%3E%3Cuse href='%23b' transform='rotate(150 240 240)'/%3E%3Cuse href='%23b' transform='rotate(180 240 240)'/%3E%3Cuse href='%23b' transform='rotate(210 240 240)'/%3E%3Cuse href='%23b' transform='rotate(240 240 240)'/%3E%3Cuse href='%23b' transform='rotate(270 240 240)'/%3E%3Cuse href='%23b' transform='rotate(300 240 240)'/%3E%3Cuse href='%23b' transform='rotate(330 240 240)'/%3E%3C/g%3E%3Ccircle cx='240' cy='240' r='31' stroke-width='.8'/%3E%3Ccircle cx='240' cy='240' r='26' stroke-width='.5'/%3E%3Cpath d='M240 228a7 7 0 0 1 4 12.7l2.4 11.3h-12.8l2.4-11.3A7 7 0 0 1 240 228z' fill='%230d80fe' stroke='none' fill-opacity='.85'/%3E%3C/svg%3E");
}

/* ==========================================================================
   Legal — hero
   ========================================================================== */
body[data-route-type="legal"] { padding-top: 0; }   /* the header floats over the framed hero */

/* the v2 markup still carries .t-ink: re-point the theme slots to stone */
.page-hero.policy-hero {
  --bg: var(--stone); --bg-2: #fff; --bg-3: var(--stone-2);
  --fg: var(--ink); --muted: var(--slate); --line: var(--hair); --line-strong: var(--hair-2);
  --accent-ink: var(--blue-700); --focus: var(--blue);
  --surface: #fff; --surface-2: var(--stone); --surface-hover: #fbfaf8;
  color-scheme: light;
  margin: var(--frame-gap) var(--frame-gap) 0;
  border-radius: var(--radius-xl);
  padding: calc(var(--header-h) + clamp(22px, 3vw, 44px)) 0 clamp(40px, 5vw, 72px);
  background: var(--stone);
  color: var(--ink);
}
/* soft light pooling behind the seal */
.page-hero.policy-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background: radial-gradient(36% 64% at 78% 34%, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0) 72%);
}
.page-hero.policy-hero::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  width: clamp(480px, 42vw, 620px); aspect-ratio: 1;
  right: calc(max((100% - 1240px) / 2, clamp(20px, 4vw, 64px)) + 190px - clamp(240px, 21vw, 310px));  /* centred over the details card */
  top: clamp(-180px, -10vw, -110px);
  background: var(--lr-seal) center / contain no-repeat;
  opacity: 0.5;
}

.policy-hero .policy-shell { max-width: none; }
.policy-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
  grid-template-areas: "eyebrow meta" "title meta" "lede meta";
  grid-template-rows: auto auto 1fr;
  column-gap: clamp(40px, 7vw, 120px);
  align-items: start;
}
.policy-card > .eyebrow { grid-area: eyebrow; }
.policy-card h1 {
  grid-area: title;
  margin: 18px 0 20px;
  font-size: clamp(2.7rem, 1.5rem + 3.8vw, 4.9rem);
  line-height: 1;
  letter-spacing: -0.03em;
}
.policy-card > p { grid-area: lede; max-width: 600px; font-size: var(--fs-lede); line-height: 1.6; color: var(--muted); }

/* document details: the three tags become a frosted card of labelled rows */
.policy-card > .tag-row {
  grid-area: meta;
  align-self: end;
  display: grid; gap: 0;
  margin: 0;
  padding: 6px 22px;
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.9);
  -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
  box-shadow: var(--shadow-sm);
}
.policy-card .page-tag {
  height: auto; min-height: 64px;
  padding: 12px 0; gap: 14px;
  border: 0; border-radius: 0; background: none;
  font-size: 0.94rem; font-weight: 500; line-height: 1.35; letter-spacing: -0.005em;
  color: var(--ink);
  white-space: normal; overflow-wrap: anywhere;
}
.policy-card .page-tag + .page-tag { border-top: 1px solid var(--hair); }
.policy-card .page-tag::before {
  content: ""; flex: none;
  width: 38px; height: 38px; border-radius: 12px;
  background: var(--blue-50) center / 19px no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23095bc0' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15.5' rx='3'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4'/%3E%3C/svg%3E");
}
.policy-card .page-tag:nth-child(2)::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23095bc0' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 20.5h17M5 17.5h14M6.5 17.5v-6.5M10.5 17.5v-6.5M13.5 17.5v-6.5M17.5 17.5v-6.5M4 9.5 12 4.5l8 5z'/%3E%3C/svg%3E");
}
.policy-card .page-tag:nth-child(3)::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23095bc0' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5.5' width='17' height='13' rx='2.5'/%3E%3Cpath d='m4.5 7.5 7.5 5.5 7.5-5.5'/%3E%3C/svg%3E");
}

/* ==========================================================================
   Legal — reading layout
   ========================================================================== */
body[data-route-type="legal"] .policy-hero + .section { padding-top: clamp(48px, 6.5vw, 104px); }

.policy-layout {
  display: grid;
  grid-template-columns: 288px minmax(0, 1fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: start;
}

/* contents: a stone card that follows the reader */
.policy-toc {
  position: sticky; top: calc(var(--header-h) + 16px);
  max-height: calc(100vh - var(--header-h) - 32px);
  overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: var(--hair-2) transparent;
  padding: 18px 10px 10px;
  border: 0;
  border-radius: var(--radius-lg);
  background: var(--surface);
}
.policy-toc .kicker { padding: 0 12px; }
.policy-toc nav { display: flex; flex-direction: column; gap: 1px; margin-top: 10px; }
.policy-toc nav a {
  position: relative;
  display: block;
  padding: 6px 12px;
  border-radius: 12px;
  font-size: 0.88rem; line-height: 1.36;
  color: var(--muted);
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}
.policy-toc nav a::before { content: none; }
.policy-toc nav a:hover { background: var(--surface-2); color: var(--fg); }

/* the section you jumped to stays marked in the contents */
.policy-layout:has(#section-1:target) .policy-toc a[href="#section-1"],
.policy-layout:has(#section-2:target) .policy-toc a[href="#section-2"],
.policy-layout:has(#section-3:target) .policy-toc a[href="#section-3"],
.policy-layout:has(#section-4:target) .policy-toc a[href="#section-4"],
.policy-layout:has(#section-5:target) .policy-toc a[href="#section-5"],
.policy-layout:has(#section-6:target) .policy-toc a[href="#section-6"],
.policy-layout:has(#section-7:target) .policy-toc a[href="#section-7"],
.policy-layout:has(#section-8:target) .policy-toc a[href="#section-8"],
.policy-layout:has(#section-9:target) .policy-toc a[href="#section-9"],
.policy-layout:has(#section-10:target) .policy-toc a[href="#section-10"],
.policy-layout:has(#section-11:target) .policy-toc a[href="#section-11"],
.policy-layout:has(#section-12:target) .policy-toc a[href="#section-12"],
.policy-layout:has(#section-13:target) .policy-toc a[href="#section-13"],
.policy-layout:has(#section-14:target) .policy-toc a[href="#section-14"],
.policy-layout:has(#section-15:target) .policy-toc a[href="#section-15"],
.policy-layout:has(#section-16:target) .policy-toc a[href="#section-16"],
.policy-layout:has(#section-17:target) .policy-toc a[href="#section-17"],
.policy-layout:has(#section-18:target) .policy-toc a[href="#section-18"],
.policy-layout:has(#section-19:target) .policy-toc a[href="#section-19"],
.policy-layout:has(#section-20:target) .policy-toc a[href="#section-20"] {
  background: var(--surface-2);
  color: var(--accent-ink);
  box-shadow: var(--shadow-xs);
}

/* the document */
.policy-content { max-width: 760px; counter-reset: none; }
.policy-section {
  padding: clamp(30px, 3.4vw, 44px) 0;
  border-top: 1px solid var(--line);
  scroll-margin-top: calc(var(--header-h) + 20px);
}
.policy-section:first-child { border-top: 0; padding-top: 0; }
.policy-section h2 {
  margin: 0 0 16px;
  font-size: clamp(1.55rem, 1.25rem + 0.9vw, 2.05rem);
  line-height: 1.14;
  letter-spacing: -0.015em;
  transition: color 0.3s var(--ease);
}
.policy-section:target h2 { color: var(--accent-ink); }

.policy-text, .policy-text p, .policy-text li {
  font-size: 1.04rem;
  line-height: 1.76;
  color: color-mix(in srgb, var(--fg) 84%, var(--bg));
}
.policy-text > p { margin: 14px 0 0; }
.policy-text > p:first-child { margin-top: 0; }
/* privacy sections open with a bare text node before their first <p>, so that <p> still needs its gap */
body[data-slug="privacy-policy"] .policy-text > p:first-child { margin-top: 14px; }
.policy-text ul { margin: 14px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.policy-text li { position: relative; margin: 0; padding-left: 26px; }
.policy-text li::before {
  content: ""; position: absolute; left: 7px; top: calc(0.88em - 3px);
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--blue);
}
.policy-text a {
  color: var(--accent-ink);
  border: 0;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--accent-ink) 35%, transparent);
  text-underline-offset: 3px;
  transition: text-decoration-color 0.2s var(--ease);
}
.policy-text a:hover { text-decoration-color: currentColor; }
.policy-text strong { color: var(--fg); font-weight: 600; }

/* the closing "Contact" section reads as a card */
.policy-content > .policy-section:last-child {
  margin-top: clamp(12px, 2vw, 24px);
  padding: clamp(24px, 3vw, 36px);
  border-top: 0;
  border-radius: var(--radius-lg);
  background: var(--surface);
}
.policy-content > .policy-section:last-child h2 { font-size: clamp(1.45rem, 1.2rem + 0.7vw, 1.8rem); }

/* ==========================================================================
   Redirect stubs + 404 — shared shell
   ========================================================================== */
body[data-route-type="redirect"],
body[data-route-type="notfound"] { padding-top: 0; background: var(--white); }

.redirect-shell {
  position: relative;
  isolation: isolate;
  overflow: clip;
  min-height: calc(100vh - 2 * var(--frame-gap));
  min-height: calc(100svh - 2 * var(--frame-gap));
  margin: var(--frame-gap);
  border-radius: var(--radius-xl);
  display: grid;
  place-items: center;
  padding: clamp(24px, 4vw, 56px) 16px;
  background: var(--stone);
  color: var(--ink);
}
.redirect-shell::before, .redirect-shell::after { content: none; }
.redirect-card {
  position: relative;
  width: min(440px, 100%);
  text-align: center;
  color: inherit;
}
.redirect-card::before, .redirect-card::after { content: none; }
.redirect-card .btn-console { display: none; }

/* ---- redirect splash ------------------------------------------------------ */
body[data-route-type="redirect"] .redirect-shell::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  left: 50%; top: 50%;
  width: min(780px, 150vw); aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: var(--lr-seal) center / contain no-repeat;
  opacity: 0.26;
}
body[data-route-type="redirect"] .redirect-shell::after {
  content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background: radial-gradient(38% 48% at 50% 50%, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0) 72%);
}
body[data-route-type="redirect"] .redirect-card {
  display: flex; flex-direction: column; align-items: center;
  width: min(420px, 100%);
  padding: 40px 32px 34px;
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.95);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: var(--shadow);
}
/* the stub ships the light (white-text) logo; draw the ink logo on the light card instead */
body[data-route-type="redirect"] .redirect-card img {
  position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap;
}
body[data-route-type="redirect"] .redirect-card::before {
  content: ""; display: block;
  width: 152px; height: 32px;
  background: url("../images/logo.svg") center / contain no-repeat;
}
/* the h1 only repeats the wordmark: keep it for assistive tech */
body[data-route-type="redirect"] .redirect-card h1 {
  position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap;
}
body[data-route-type="redirect"] .redirect-card p {
  margin-top: 22px;
  font-size: 0.98rem; line-height: 1.5;
  color: var(--slate);
}
body[data-route-type="redirect"] .redirect-card::after {
  content: ""; display: block;
  width: 132px; height: 3px; margin-top: 22px;
  border-radius: var(--pill);
  background: linear-gradient(90deg, rgba(13, 128, 254, 0), var(--blue) 50%, rgba(13, 128, 254, 0)) -56px 0 / 56px 100% no-repeat, var(--stone-2);
  animation: lr-progress 1.4s var(--ease) infinite;
}
@keyframes lr-progress {
  from { background-position: -56px 0, 0 0; }
  to   { background-position: 132px 0, 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  body[data-route-type="redirect"] .redirect-card::after { animation: none; background-position: 38px 0, 0 0; }
}

/* ---- 404: framed photograph, copy lower-left --------------------------------- */
body[data-route-type="notfound"] .redirect-shell {
  place-items: end start;
  padding: clamp(96px, 12vh, 140px) clamp(24px, 5vw, 76px) clamp(32px, 6vw, 76px);
  background: #0e2a4a url("../images/v3/photos/trust-lighthouse-day-1600.webp") 50% 58% / cover no-repeat;
  color: #fff;
}
body[data-route-type="notfound"] .redirect-shell::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(0deg, rgba(4, 16, 34, 0.82) 0%, rgba(4, 16, 34, 0.5) 34%, rgba(4, 16, 34, 0) 62%),
    linear-gradient(90deg, rgba(4, 16, 34, 0.5) 0%, rgba(4, 16, 34, 0.16) 46%, rgba(4, 16, 34, 0) 70%),
    linear-gradient(180deg, rgba(4, 16, 34, 0.32) 0%, rgba(4, 16, 34, 0) 22%);
}
body[data-route-type="notfound"] .redirect-card {
  position: static;
  width: min(640px, 100%);
  text-align: left;
}
/* the logo sits top-left in a glass pill, like the floating header */
body[data-route-type="notfound"] .redirect-card img {
  position: absolute; top: clamp(16px, 2.4vw, 28px); left: clamp(16px, 2.4vw, 28px);
  box-sizing: content-box;
  width: auto; height: 22px;
  margin: 0; padding: 12px 18px;
  border-radius: var(--pill);
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.24);
  -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%);
}
/* "404" as an engraved display numeral */
body[data-route-type="notfound"] .redirect-card::before {
  content: "404";
  display: block;
  margin: 0 0 6px -0.04em;
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(5.6rem, 3.4rem + 9vw, 11rem);
  line-height: 0.86;
  letter-spacing: -0.04em;
  color: transparent;
  background: linear-gradient(180deg, #fff 10%, #c4ddff 100%);
  -webkit-background-clip: text; background-clip: text;
}
body[data-route-type="notfound"] .redirect-card h1 {
  font-size: clamp(2.3rem, 1.6rem + 2.6vw, 3.9rem);
  line-height: 1.02;
  letter-spacing: -0.028em;
  color: #fff;
}
body[data-route-type="notfound"] .redirect-card p {
  margin-top: 14px;
  max-width: 540px;
  font-size: var(--fs-lede); line-height: 1.55;
  color: rgba(255, 255, 255, 0.8);
}
body[data-route-type="notfound"] .redirect-card .hero-actions {
  display: flex; flex-wrap: wrap; gap: 10px;
  justify-content: flex-start !important;   /* the markup centres it inline */
  margin-top: 30px !important;
}
body[data-route-type="notfound"] .redirect-card .btn-secondary {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.24);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
body[data-route-type="notfound"] .redirect-card .btn-secondary:hover { background: rgba(255, 255, 255, 0.22); }

@media (min-width: 1800px) {
  body[data-route-type="notfound"] .redirect-shell { background-image: url("../images/v3/photos/trust-lighthouse-day-2400.webp"); }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1024px) {
  .policy-card {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "eyebrow" "title" "lede" "meta";
    grid-template-rows: auto;
  }
  .policy-card > .tag-row { align-self: start; margin-top: 30px; max-width: 520px; }
  .page-hero.policy-hero::after { width: 420px; right: -150px; top: 70px; transform: none; opacity: 0.3; }
  .page-hero.policy-hero::before { background: radial-gradient(50% 40% at 92% 22%, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0) 70%); }

  .policy-layout { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .policy-toc { position: relative; top: auto; max-height: none; overflow: visible; padding: 22px 12px 14px; }
  .policy-toc nav { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 2px 12px; }
  .policy-content { max-width: none; }
}

@media (max-width: 720px) {
  .page-hero.policy-hero { padding: calc(var(--header-h) + 18px) 0 36px; }
  .page-hero.policy-hero .back-link { margin-bottom: 22px; }
  .page-hero.policy-hero::after { width: 300px; right: -120px; top: 64px; opacity: 0.24; }
  .policy-card h1 { font-size: clamp(2.4rem, 11vw, 3rem); margin: 14px 0 16px; }
  .policy-card > .tag-row { max-width: none; padding: 4px 18px; }
  .policy-card .page-tag { min-height: 58px; font-size: 0.9rem; }

  /* contents become a swipeable row of pills */
  .policy-toc { padding: 0; background: none; border-radius: 0; }
  .policy-toc .kicker { padding: 0; }
  .policy-toc nav {
    display: flex; flex-direction: row; flex-wrap: nowrap; gap: 8px;
    margin: 14px -16px 0; padding: 0 16px 4px;
    overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 28px), transparent);
            mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 28px), transparent);
  }
  .policy-toc nav::-webkit-scrollbar { display: none; }
  .policy-toc nav a {
    flex: none; scroll-snap-align: start;
    display: inline-flex; align-items: center;
    height: 40px; padding: 0 16px;
    border-radius: var(--pill);
    background: var(--stone);
    font-size: 0.86rem; white-space: nowrap; color: var(--ink-3);
  }
  .policy-toc nav a:hover { background: var(--stone-2); }

  .policy-section { padding: 28px 0; }
  .policy-text, .policy-text p, .policy-text li { font-size: 1rem; line-height: 1.72; }
  .policy-content > .policy-section:last-child { padding: 24px 20px; }

  body[data-route-type="redirect"] .redirect-card { padding: 34px 24px 30px; }

  body[data-route-type="notfound"] .redirect-shell {
    border-radius: var(--radius-lg);
    padding: 96px 22px 28px;
    background-image: url("../images/v3/photos/trust-lighthouse-day-960.webp");
    background-position: 54% 40%;
  }
  body[data-route-type="notfound"] .redirect-shell::before {
    background:
      linear-gradient(0deg, rgba(4, 16, 34, 0.9) 0%, rgba(4, 16, 34, 0.62) 38%, rgba(4, 16, 34, 0) 66%),
      linear-gradient(180deg, rgba(4, 16, 34, 0.35) 0%, rgba(4, 16, 34, 0) 20%);
  }
  body[data-route-type="notfound"] .redirect-card .hero-actions .btn { flex: 1 1 auto; }
}

@media (max-width: 640px) { .page-hero.policy-hero { border-radius: var(--radius-lg); } }

/* ===== 70-i18n.css ===== */
/* ==========================================================================
   70 — Locale typography (v3)
   --------------------------------------------------------------------------
   Every locale keeps the v3 voice — an editorial serif for headlines, Inter
   for UI and copy, JetBrains Mono for the odd micro label — but each script
   falls through to a face that was drawn for it:

     en es de vi   Newsreader + Inter (both carry Latin-ext and Vietnamese)
     ru            Literata leads the serif (Newsreader has no Cyrillic)
     zh-Hans       Noto Serif SC  · PingFang SC / Noto Sans CJK SC
     zh-Hant       Noto Serif TC  · PingFang TC / Noto Sans CJK TC
     ja            Noto Serif JP  · Hiragino Sans / Noto Sans CJK JP
     ko            Noto Serif KR  · Apple SD Gothic Neo / Noto Sans CJK KR
     th            Noto Serif Thai · Noto Sans Thai

   The per-locale Google Fonts link is written by tools/v3_chrome.py
   (FONT_EXTRA). Latin stays first in the CJK/Thai stacks so brand words and
   figures ("Ownbit", "2-of-3", "2017") keep the Latin design; the browser
   reaches the CJK/Thai face per glyph.

   Selectors hang off html[lang] (0,1,2+) so they outrank the one-class
   heading rules of the page parts without !important.
   ========================================================================== */

/* ---- Latin locales --------------------------------------------------------- */
html:is([lang="en"], [lang^="en-"], [lang="es"], [lang="de"], [lang="vi"]) {
  --font-serif: "Newsreader", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}

/* ---- Russian --------------------------------------------------------------- */
html[lang="ru"] {
  --font-serif: "Literata", "PT Serif", "Noto Serif", Georgia, "Times New Roman", serif;
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --serif-tracking: -0.014em;   /* Literata is wider and more open than Newsreader */
}

/* ---- Simplified Chinese ---------------------------------------------------- */
html:is([lang^="zh-Hans"], [lang="zh"], [lang="zh-CN"], [lang="zh-SG"]) {
  --font-serif: "Newsreader", "Noto Serif SC", "Source Han Serif SC", "Songti SC", "STSong", "SimSun", serif;
  --font-sans: "Inter", "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", "Noto Sans CJK SC", "Source Han Sans SC", "Microsoft YaHei", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, "PingFang SC", "Noto Sans CJK SC", "Microsoft YaHei", monospace;
}

/* ---- Traditional Chinese --------------------------------------------------- */
html:is([lang^="zh-Hant"], [lang="zh-TW"], [lang="zh-tw"], [lang="zh-HK"]) {
  --font-serif: "Newsreader", "Noto Serif TC", "Source Han Serif TC", "Songti TC", "PMingLiU", "MingLiU", serif;
  --font-sans: "Inter", "PingFang TC", "Noto Sans TC", "Noto Sans CJK TC", "Source Han Sans TC", "Microsoft JhengHei", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, "PingFang TC", "Noto Sans CJK TC", "Microsoft JhengHei", monospace;
}

/* ---- Japanese -------------------------------------------------------------- */
html[lang="ja"] {
  --font-serif: "Newsreader", "Noto Serif JP", "Source Han Serif JP", "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "MS PMincho", serif;
  --font-sans: "Inter", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Noto Sans CJK JP", "Yu Gothic", "YuGothic", Meiryo, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, "Hiragino Sans", "Noto Sans CJK JP", Meiryo, monospace;
}

/* ---- Korean ---------------------------------------------------------------- */
html[lang="ko"] {
  --font-serif: "Newsreader", "Noto Serif KR", "Source Han Serif K", "AppleMyungjo", "Nanum Myeongjo", "Batang", serif;
  --font-sans: "Inter", "Apple SD Gothic Neo", "Noto Sans KR", "Noto Sans CJK KR", "Source Han Sans K", "Malgun Gothic", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, "Apple SD Gothic Neo", "Noto Sans CJK KR", "Malgun Gothic", monospace;
}

/* ---- Thai ------------------------------------------------------------------ */
html[lang="th"] {
  --font-serif: "Newsreader", "Noto Serif Thai", "Noto Sans Thai", "Thonburi", "Leelawadee UI", serif;
  --font-sans: "Inter", "Noto Sans Thai", "Thonburi", "Leelawadee UI", "Tahoma", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, "Noto Sans Thai", "Thonburi", monospace;
}

/* ==========================================================================
   CJK + Thai headlines
   Han, kana, Hangul and Thai fill the whole em, so the Latin display settings
   (weight 400, 0.98–1.04 leading, −0.02…−0.04em tracking) read cramped and
   spindly. The CJK serifs are loaded at 500/600 only; 500 is the editorial
   weight, Thai takes 500 too. Tracking is always 0 — negative tracking
   collides strokes, and Thai marks must never be pulled apart.
   ========================================================================== */
html:is([lang^="zh"], [lang="ja"], [lang="ko"], [lang="th"]) {
  --serif-weight: 500;
  --serif-tracking: 0;
}

html:is([lang^="zh"], [lang="ja"], [lang="ko"]) :is(h1, h2) { line-height: 1.22; letter-spacing: 0; }
html:is([lang^="zh"], [lang="ja"], [lang="ko"]) :is(h3, h4) { letter-spacing: 0; }
/* no one- or two-glyph widows under card titles */
html:is([lang^="zh"], [lang="ja"], [lang="ko"], [lang="th"]) :is(h3, h4) { text-wrap: pretty; }
html[lang="th"] :is(h1, h2) { line-height: 1.34; letter-spacing: 0; }
html[lang="th"] :is(h3, h4) { letter-spacing: 0; line-height: 1.4; }

/* serif titles below h2 that the page parts set at weight 400 / negative tracking */
html:is([lang^="zh"], [lang="ja"], [lang="ko"], [lang="th"]) :is(
  .pillar-body h3, .report-card h3, .qr-modal-title, .tl-year,
  .blog-card h2, .blog-card h3, .blog-prose > h2, .blog-related h2, .blog-related-grid a,
  .family-ms-plan h3
) {
  font-weight: 500;
  letter-spacing: 0;
}
html:is([lang^="zh"], [lang="ja"], [lang="ko"]) :is(.pillar-body h3, .report-card h3, .qr-modal-title) { line-height: 1.3; }
html[lang="th"] :is(.pillar-body h3, .report-card h3, .qr-modal-title) { line-height: 1.4; }

/* Display sizes: a CJK glyph at the Latin size looks a step larger (no
   x-height to sit inside the em), so the fluid scale steps down ~10–20%.
   The hero cap also lets a 9-kana phrase (コールドウォレット) sit on one line
   of the 660px hero column, and a 12-kana card title fit its card. */
html:is([lang^="zh"], [lang="ja"], [lang="ko"]) {
  --fs-hero: clamp(2.3rem, 1.2rem + 3.6vw, 4.4rem);
  --fs-h1: clamp(2.15rem, 1.4rem + 3vw, 3.95rem);
  --fs-h2: clamp(1.85rem, 1.3rem + 2vw, 2.95rem);
  --fs-h2-sm: clamp(1.6rem, 1.25rem + 1.25vw, 2.2rem);
  --fs-h3-serif: clamp(1.3rem, 1.1rem + 0.6vw, 1.6rem);
}
html:is([lang^="zh"], [lang="ja"], [lang="ko"]) .report-card h3 { font-size: 1.55rem; }
/* Thai stacks vowels and tone marks above and below the line, so it needs the
   taller 1.34 leading — and a smaller size to keep the same block height. */
html[lang="th"] {
  --fs-hero: clamp(2.2rem, 1.2rem + 3.7vw, 4.5rem);
  --fs-h1: clamp(2.05rem, 1.35rem + 2.8vw, 3.7rem);
  --fs-h2: clamp(1.8rem, 1.25rem + 1.9vw, 2.8rem);
  --fs-h2-sm: clamp(1.55rem, 1.2rem + 1.2vw, 2.15rem);
  --fs-h3-serif: clamp(1.3rem, 1.1rem + 0.7vw, 1.7rem);
}
/* the homepage trust band and closing line set literal sizes (10-home) */
html:is([lang^="zh"], [lang="ja"], [lang="ko"]) .band-copy h2 { font-size: clamp(2.1rem, 1.3rem + 2.8vw, 3.9rem); }
html:is([lang^="zh"], [lang="ja"], [lang="ko"]) .final-inner h2 { font-size: clamp(2.2rem, 1.3rem + 3.4vw, 4.5rem); }
html[lang="th"] .band-copy h2 { font-size: clamp(1.95rem, 1.2rem + 2.4vw, 3.4rem); }
html[lang="th"] .final-inner h2 { font-size: clamp(2.05rem, 1.2rem + 3vw, 4rem); }

/* Russian and Vietnamese run long and stack marks above capitals. */
html[lang="vi"] :is(h1, h2) { line-height: 1.14; }
html[lang="ru"] :is(h1, h2) { line-height: 1.1; }
html:is([lang="ru"], [lang="vi"]) .band-copy h2 { font-size: clamp(2.2rem, 1.3rem + 2.9vw, 4rem); }

/* ==========================================================================
   Running copy
   ========================================================================== */
html:is([lang^="zh"], [lang="ja"], [lang="ko"]) body { line-height: 1.72; }
html[lang="th"] body { line-height: 1.75; }
html:is([lang^="zh"], [lang="ja"], [lang="ko"], [lang="th"]) :is(.section-heading p, .split-copy > p, .page-copy > p, .hero-copy > p) {
  line-height: 1.75;
}

/* zh / ja: a hair of space where Han meets Latin or figures (Chrome 140+, Safari 18.4+) */
html:is([lang^="zh"], [lang="ja"]) { text-autospace: normal; }

/* Japanese: break headlines at phrase boundaries, not mid-word (Chrome 119+).
   overflow-wrap keeps a long katakana phrase from widening its card on phones. */
html[lang="ja"] :is(h1, h2, h3) { word-break: auto-phrase; overflow-wrap: anywhere; }

/* Korean breaks at spaces, never inside a word (멀티시그 must not split as 멀 / 티시그). */
html[lang="ko"] { word-break: keep-all; overflow-wrap: break-word; }

/* Long compounds in German / Russian can overflow narrow card titles and the
   five-up severity cells of the audit cards ("Информационный"). */
html:is([lang="de"], [lang="ru"]) :is(.feature-card h3, .pil-card h3, .doc-index-card h3, .v3-card h3) {
  overflow-wrap: anywhere;
  hyphens: auto;
}
html:is([lang="de"], [lang="ru"], [lang="es"], [lang="vi"]) :is(.sev-row span, .vr-k) {
  overflow-wrap: anywhere;
  hyphens: auto;
}
html:is([lang="de"], [lang="ru"], [lang="es"], [lang="vi"]) .vr-k { line-height: 1.3; }

/* ==========================================================================
   Emphasis stays colour-only.
   Han, kana, Hangul and Thai have no italic; a synthetic slant is a fake
   style. <em> in headlines is already colour (01-base); in running copy the
   same accent colour carries the emphasis — no underline, no oblique.
   ========================================================================== */
html:is([lang^="zh"], [lang="ja"], [lang="ko"], [lang="th"]) :is(em, cite, blockquote) { font-style: normal; }
html:is([lang^="zh"], [lang="ja"], [lang="ko"], [lang="th"]) :is(p, li, dd, td, blockquote) em { color: var(--accent-ink); }

/* ==========================================================================
   Micro labels
   Uppercase tracked mono is a Latin idiom: CJK/Thai have no case, their
   glyphs come from the sans fallback anyway, and the mono word space (0.6em)
   leaves holes in Korean and Thai phrases. So for these scripts the labels
   are set in the locale sans — same size token, same accent colour — with
   light tracking for CJK and none for Thai (it breaks cluster shaping).
   The mono stacks above still cover tickers, hashes and code.
   ========================================================================== */
html:is([lang^="zh"], [lang="ja"], [lang="ko"], [lang="th"]) :is(.kicker, .eyebrow, .v3-label, .plan-sub, .contact-card > span, .wallet-label) {
  font-family: var(--font-sans);
  font-weight: 500;
}
html:is([lang^="zh"], [lang="ja"], [lang="ko"]) :is(.kicker, .eyebrow, .v3-label, .plan-sub, .contact-card > span, .wallet-label) {
  letter-spacing: 0.04em;
}
html[lang="th"] :is(.kicker, .eyebrow, .v3-label, .plan-sub, .contact-card > span, .wallet-label) {
  letter-spacing: 0;
  line-height: 1.5;
}
html:is([lang^="zh"], [lang="ja"], [lang="ko"], [lang="th"]) :is(.btn, .site-nav a, .v3-chip, .page-tag, .tag, .link-chip) { letter-spacing: 0; }

/* Optical size of the micro-label scale (--ms-1…8, 00-tokens).
   0.64–0.78rem is drawn for uppercase Latin mono — about 8px of cap height.
   The same box has to hold up to 20 strokes of a Han glyph, or a Thai loop
   with a stacked vowel and tone mark, so the scale steps up: ×1.14 for CJK,
   ×1.19 for Thai (least ink per em; marks need the extra body). Only labels
   that carry translated copy use these tokens; tickers and counters keep
   their literal sizes. */
html:is([lang^="zh"], [lang="ja"], [lang="ko"]) {
  --ms-1: 0.73rem;
  --ms-2: 0.75rem;
  --ms-3: 0.77rem;
  --ms-4: 0.80rem;
  --ms-5: 0.82rem;
  --ms-6: 0.84rem;
  --ms-7: 0.87rem;
  --ms-8: 0.89rem;
}
html[lang="th"] {
  --ms-1: 0.76rem;
  --ms-2: 0.79rem;
  --ms-3: 0.81rem;
  --ms-4: 0.83rem;
  --ms-5: 0.86rem;
  --ms-6: 0.88rem;
  --ms-7: 0.90rem;
  --ms-8: 0.93rem;
}

/* ==========================================================================
   Header nav pill
   Seven translated links + brand + language + Download must fit one row.
   Measured pill widths at 0.9rem: zh 447px · ko 516 · th 571 · en 613 ·
   de 631 · ja 691 · es 707 · ru 770. Russian tightens a step earlier; ja, es
   and ru hand over to the drawer at 1200px instead of 1120px (02-header),
   so no locale ever shows less than ~30px between the pills.
   ========================================================================== */
html:is([lang^="zh"], [lang="ja"], [lang="ko"], [lang="th"]) .site-nav a { font-weight: 500; }
html[lang="ru"] .site-nav a { padding: 0 12px; }
@media (max-width: 1320px) {
  html[lang="ru"] .site-nav a { padding: 0 10px; font-size: 0.86rem; }
}
@media (max-width: 1280px) {
  html[lang="ru"] .site-nav a { padding: 0 9px; font-size: 0.84rem; }
  html:is([lang="ja"], [lang="es"]) .site-nav a { padding: 0 10px; }
}

/* drawer layout, copied from 02-header.css (max-width: 1120px) for the long locales */
@media (max-width: 1200px) {
  html:is([lang="ja"], [lang="es"], [lang="ru"]) .menu-toggle { display: inline-flex; }
  html:is([lang="ja"], [lang="es"], [lang="ru"]) .site-nav {
    position: fixed;
    inset: 0;
    z-index: -1;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: calc(var(--header-h) + 24px) 24px 32px;
    border: 0; border-radius: 0;
    background: #fff;
    -webkit-backdrop-filter: none; backdrop-filter: none;
    box-shadow: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-12px);
    transition: opacity 0.28s var(--ease), transform 0.28s var(--ease), visibility 0s 0.28s;
    overflow-y: auto;
  }
  html:is([lang="ja"], [lang="es"], [lang="ru"]) body.nav-open .site-nav {
    opacity: 1; visibility: visible; transform: none;
    transition: opacity 0.28s var(--ease), transform 0.28s var(--ease), visibility 0s;
  }
  html:is([lang="ja"], [lang="es"], [lang="ru"]) body.nav-open { overflow: hidden; }
  html:is([lang="ja"], [lang="es"], [lang="ru"]) body.nav-open .site-header { --pill-bg: #fff; --pill-line: var(--hair); --pill-fg: var(--ink); --pill-hover: rgba(14,17,22,.06); }
  html:is([lang="ja"], [lang="es"], [lang="ru"]) body.nav-open .site-header .brand .brand-logo--dark { display: block; }
  html:is([lang="ja"], [lang="es"], [lang="ru"]) body.nav-open .site-header .brand .brand-logo--light { display: none; }
  html:is([lang="ja"], [lang="es"], [lang="ru"]) .site-nav a {
    height: auto;
    padding: 16px 4px;
    border-radius: 0;
    border-bottom: 1px solid var(--hair);
    font-family: var(--font-serif);
    font-size: 1.7rem;
    font-weight: 400;
    letter-spacing: -0.02em;
    color: var(--ink);
  }
  html:is([lang="ja"], [lang="es"], [lang="ru"]) :is(.site-nav a:hover, .site-nav a:focus-visible, .site-nav a[aria-current="page"]) { background: none; color: var(--blue-700); }
  html:is([lang="ja"], [lang="es"], [lang="ru"]) .site-nav .nav-drawer-extra {
    display: grid;
    gap: 12px;
    margin-top: 28px;
  }
  html:is([lang="ja"], [lang="es"], [lang="ru"]) .site-nav .nav-drawer-extra .btn { width: 100%; height: 54px; font-family: var(--font-sans); font-size: 1rem; border-bottom: 0; padding: 0 22px; border-radius: var(--pill); color: #fff; justify-content: center; }
}

/* drawer links in CJK/Thai: serif at 500, untracked, a touch smaller */
@media (max-width: 1120px) {
  html:is([lang^="zh"], [lang="ja"], [lang="ko"], [lang="th"]) .site-nav > a { font-weight: 500; letter-spacing: 0; font-size: 1.55rem; }
}
@media (max-width: 1200px) {
  html[lang="ja"] .site-nav > a { font-weight: 500; letter-spacing: 0; font-size: 1.55rem; }
}

/* ---- QA pass 2026-10-27 ---------------------------------------------------- */
/* Chinese headlines: break at punctuation and spaces, not inside words; fall back
   to anywhere only when a phrase cannot fit */
@media (min-width: 721px) {
  html[lang^="zh"] :is(h1, h2) { word-break: keep-all; overflow-wrap: anywhere; }
}
/* on phones a phrase is often wider than the line: plain CJK breaking (with kinsoku) is safer */
@media (max-width: 720px) {
  html[lang^="zh"] :is(h1, h2) { text-wrap: pretty; }
}
/* Japanese: no small kana at line start; phrase-aware breaks in tight spots */
html[lang="ja"] { line-break: strict; }
html[lang="ja"] :is(.site-footer h3, .site-footer a, .th-stat span, .tb-stat strong) { word-break: auto-phrase; overflow-wrap: anywhere; }
html[lang="ja"] .tb-stat strong { font-size: clamp(1.6rem, 1.1rem + 1.1vw, 2.15rem); }