/* ===== 00-core.css ===== */
/* ==========================================================================
   Ownbit v2 — editorial custody design system
   --------------------------------------------------------------------------
   Dark ink + warm paper sections, a single orange accent, mono labels,
   numbered rails, hairline rules, squared corners, restrained motion.
   Pure CSS (scroll-driven reveals are progressive; no JS needed for layout).
   ========================================================================== */

:root {
  /* palette */
  --ink: #0e0f12;
  --ink-2: #15171c;
  --ink-3: #1e2128;
  --ink-4: #272b33;
  --ink-line: rgba(255, 255, 255, 0.12);
  --ink-line-strong: rgba(255, 255, 255, 0.26);
  --paper: #f3f1ec;
  --paper-2: #e9e6dd;
  --paper-3: #dedbd1;
  --paper-line: rgba(14, 15, 18, 0.14);
  --paper-line-strong: rgba(14, 15, 18, 0.34);
  --accent: #f25a1f;
  --accent-deep: #c9440f;
  --accent-soft: #ffb899;
  --accent-glow: rgba(242, 90, 31, 0.55);
  --t-dark: #f5f3ee;
  --m-dark: #9ea2aa;
  --t-light: #15171b;
  --m-light: #5f626a;

  /* theme slots (overridden per section) */
  --bg: var(--ink);
  --bg-2: var(--ink-2);
  --bg-3: var(--ink-3);
  --fg: var(--t-dark);
  --muted: var(--m-dark);
  --line: var(--ink-line);
  --line-strong: var(--ink-line-strong);
  --accent-ink: var(--accent);   /* accent used as small text on the current bg */
  --focus: var(--accent);

  /* type */
  --font-display: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Inter, Arial, sans-serif;
  --font-body: "Manrope", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Inter, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --h3-lg: 1.75rem;
  --h3-sm: 1.25rem;

  /* Micro-label scale.
     These eight steps are every size the small mono/uppercase labels use. A rule
     opts into a token when its content is TRANSLATED copy; a rule that only ever
     shows a counter, a ticker (BTC), an avatar initial or a number keeps its
     literal rem value. That distinction is the whole point: 70-i18n.css re-points
     the tokens for scripts that need more room per glyph, and the numeric rails
     stay exactly where the Latin design put them. */
  --ms-1: 0.60rem;
  --ms-2: 0.62rem;
  --ms-3: 0.64rem;
  --ms-4: 0.66rem;
  --ms-5: 0.68rem;
  --ms-6: 0.70rem;
  --ms-7: 0.72rem;
  --ms-8: 0.74rem;

  /* layout */
  --container: min(1280px, calc(100% - 48px));
  --rail: 72px;
  --sec-pad: clamp(72px, 9vw, 136px);
  --radius: 4px;
  --radius-lg: 6px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --header-h: 76px;
}

/* themes ----------------------------------------------------------------- */
.t-ink   { --bg: var(--ink);     --bg-2: var(--ink-2);  --bg-3: var(--ink-3);  --fg: var(--t-dark);  --muted: var(--m-dark);  --line: var(--ink-line);   --line-strong: var(--ink-line-strong); --accent-ink: var(--accent);      --focus: var(--accent);      color-scheme: dark; }
.t-paper { --bg: var(--paper);   --bg-2: var(--paper-2); --bg-3: var(--paper-3); --fg: var(--t-light); --muted: var(--m-light); --line: var(--paper-line); --line-strong: var(--paper-line-strong); --accent-ink: var(--accent-deep); --focus: var(--accent-deep); color-scheme: light; }
.t-beige { --bg: var(--paper-2); --bg-2: var(--paper);  --bg-3: var(--paper-3); --fg: var(--t-light); --muted: var(--m-light); --line: var(--paper-line); --line-strong: var(--paper-line-strong); --accent-ink: var(--accent-deep); --focus: var(--accent-deep); color-scheme: light; }

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

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

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

img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, select { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); font-weight: 500; letter-spacing: -0.02em; line-height: 1.05; }
p { margin: 0; }
em { font-style: italic; }
strong { font-weight: 600; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
::selection { background: var(--accent); color: var(--ink); }
[id] { scroll-margin-top: calc(var(--header-h) + 24px); }

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

/* mono label primitive */
.kicker, .eyebrow, .rail-num, .plan-sub, .pil-tag, .footer-col-title, .asset-legend, .contact-card > span, .stat-card strong, .floating-note {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--ms-7);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* dot before kicker / eyebrow */
.kicker, .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--muted);
}
.kicker::before, .eyebrow::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0 var(--accent-glow);
  animation: v2-dot 2.8s ease-out infinite;
}

@keyframes v2-dot {
  0%   { box-shadow: 0 0 0 0 var(--accent-glow); }
  70%  { box-shadow: 0 0 0 10px rgba(242, 90, 31, 0); }
  100% { box-shadow: 0 0 0 0 rgba(242, 90, 31, 0); }
}

/* arrows (CSS mask icons, colour follows text) ------------------------- */
.link-arrow::after, .btn-secondary::after, .link-chip::after, .split-h2-link::after, .contact-card::after, .btn-header::after, .hero-actions .btn-console::after {
  content: "";
  display: inline-block;
  width: 0.85em;
  height: 0.85em;
  background: currentColor;
  -webkit-mask: 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='M7 7l10 10'/%3E%3Cpath d='M17 7v10H7'/%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 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 7l10 10'/%3E%3Cpath d='M17 7v10H7'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform 0.3s var(--ease);
  flex: none;
}
.link-arrow:hover::after, .btn-secondary:hover::after, .link-chip:hover::after, .split-h2-link:hover::after, .contact-card:hover::after, .btn-header:hover::after, .hero-actions .btn-console:hover::after {
  transform: translate(3px, 3px);
}

/* buttons ---------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 54px;
  padding: 0 26px;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.98rem;
  letter-spacing: -0.005em;
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.btn-primary {
  background: var(--accent);
  color: var(--ink);
  border-color: var(--accent);
}
.btn-primary:hover, .btn-primary:focus-visible {
  background: #ff6a2e;
  border-color: #ff6a2e;
}
.btn-primary::after {
  content: "";
  width: 0.9em;
  height: 0.9em;
  background: currentColor;
  -webkit-mask: 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='M12 4v11'/%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3Cpath d='M5 20h14'/%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 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v11'/%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3Cpath d='M5 20h14'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* secondary = editorial underlined text link */
.btn-secondary, .hero-actions .btn-console {
  min-height: 0;
  padding: 10px 0;
  border-radius: 0;
  border: 0;
  border-bottom: 1px solid var(--line-strong);
  color: var(--fg);
  background: transparent;
  gap: 10px;
}
.btn-secondary:hover, .btn-secondary:focus-visible, .hero-actions .btn-console:hover, .hero-actions .btn-console:focus-visible {
  border-bottom-color: var(--accent);
  color: var(--fg);
  background: transparent;
}
.hero-actions .btn-console svg { width: 16px; height: 16px; }

/* outlined (injected Web Console button outside the hero, header button) */
.btn-console, .btn-header {
  background: transparent;
  border-color: var(--line-strong);
  color: var(--fg);
}
.btn-console:hover, .btn-header:hover, .btn-console:focus-visible, .btn-header:focus-visible {
  border-color: var(--fg);
  background: var(--fg);
  color: var(--bg);
}
.btn-console svg { width: 18px; height: 18px; }
.btn-header { min-height: 44px; padding: 0 18px; font-size: 0.9rem; }

/* link arrow (text link with arrow) */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  color: var(--fg);
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line-strong);
  transition: border-color 0.25s var(--ease), color 0.25s var(--ease);
}
.link-arrow:hover { border-bottom-color: var(--accent); }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(14, 15, 18, 0.9);
  -webkit-backdrop-filter: saturate(140%) blur(16px);
          backdrop-filter: saturate(140%) blur(16px);
  border-bottom: 1px solid var(--ink-line);
  color: var(--t-dark);
  --bg: var(--ink); --fg: var(--t-dark); --muted: var(--m-dark); --line: var(--ink-line); --line-strong: var(--ink-line-strong); --focus: var(--accent);
}
.nav-shell { display: flex; align-items: center; gap: 28px; min-height: var(--header-h); }
/* brand: original logo, slightly smaller, with the orange underscore beneath the wordmark
   (logo + dash together keep the previous 26px footprint) */
.brand { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 3px; flex-shrink: 0; }
.brand img { height: 25px; width: auto; }
.brand::after { content: ""; width: 17px; height: 3px; margin-right: 18px; background: var(--accent); border-radius: 1px; }
.brand img.brand-mark { display: none; }
@media (max-width: 960px) {
  /* compact mark-only logo on mobile (pages that carry .brand-mark) */
  .brand:has(.brand-mark) { flex-direction: row; align-items: center; gap: 0; padding: 6px; background: #ffffff; border-radius: 12px; }
  .brand:has(.brand-mark) img:not(.brand-mark) { display: none; }
  .brand:has(.brand-mark)::after { display: none; }
  .brand img.brand-mark { display: block; width: 28px; height: 28px; }
}

.site-nav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.site-nav a {
  position: relative;
  padding: 13px 12px;
  font-family: var(--font-mono);
  font-size: var(--ms-7);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--m-dark);
  transition: color 0.25s var(--ease);
}
.site-nav a::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 8px;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--ease);
}
.site-nav a:hover, .site-nav a:focus-visible { color: var(--t-dark); }
.site-nav a:hover::after, .site-nav a:focus-visible::after { transform: scaleX(1); }

.nav-actions { display: flex; align-items: center; gap: 12px; }
.language-select {
  appearance: none;
  -webkit-appearance: none;
  height: 44px;
  padding: 0 34px 0 14px;
  border: 1px solid var(--ink-line-strong);
  border-radius: var(--radius);
  background: transparent;
  color: var(--t-dark);
  font-family: var(--font-mono);
  font-size: var(--ms-7);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239ea2aa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 14px;
}
.language-select:hover { border-color: var(--t-dark); }
.language-select option { color: #111; background: #fff; text-transform: none; letter-spacing: 0; }

.menu-toggle {
  display: none;
  width: 44px;
  height: 44px;
  border: 1px solid var(--ink-line-strong);
  border-radius: var(--radius);
  background: transparent;
  color: var(--t-dark);
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex: none;
}
.menu-toggle span, .menu-toggle span::before, .menu-toggle span::after {
  width: 18px; height: 1.5px; background: currentColor; display: block; position: relative; transition: transform 0.25s var(--ease), background 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); }

/* ==========================================================================
   Section scaffolding: rails, headings, themes
   ========================================================================== */
.section { position: relative; padding: var(--sec-pad) 0; background: var(--bg); color: var(--fg); }
.section + .section.t-paper { border-top: 1px solid var(--paper-line); }

/* rail: number + hairline at the left of a section */
.section-grid { display: grid; grid-template-columns: var(--rail) minmax(0, 1fr); column-gap: clamp(16px, 3vw, 48px); }
.section-grid > *, .hero-grid > * { min-width: 0; }
.table-shell { max-width: 100%; }
.rail { position: relative; align-self: stretch; }
.rail-num { display: block; color: var(--accent-ink); position: sticky; top: calc(var(--header-h) + 28px); }
.rail::before {
  content: "";
  position: absolute;
  left: 0.45em;
  top: 32px;
  width: 1px;
  height: 140px;
  background: linear-gradient(180deg, var(--line-strong), transparent);
}

.section-heading { max-width: 820px; margin-bottom: clamp(40px, 5vw, 72px); }
.section-heading h2 {
  margin: 22px 0 20px;
  font-size: clamp(2.2rem, 4.2vw, 3.6rem);
  letter-spacing: -0.03em;
  line-height: 1.02;
  text-wrap: balance;
}
.split-copy h2 {
  margin: 22px 0 20px;
  font-size: clamp(2rem, 3.4vw, 3rem);
  letter-spacing: -0.03em;
  line-height: 1.04;
  text-wrap: balance;
}
.section-heading p, .split-copy > p { max-width: 640px; font-size: 1.08rem; line-height: 1.65; color: var(--muted); }

/* heading emphasis: same weight, italic posture only */
h1 em, h2 em { font-style: italic; font-weight: inherit; color: inherit; }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  position: relative;
  background: var(--ink);
  color: var(--t-dark);
  overflow: hidden;
  overflow: clip;
  padding: clamp(48px, 6vw, 80px) 0 clamp(40px, 5vw, 64px);
  min-height: calc(100vh - var(--header-h));
  min-height: calc(100svh - var(--header-h));
  display: flex;
  align-items: center;
  isolation: isolate;
}
/* ambient: orange glow + faint grid + film grain */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(55% 60% at 78% 50%, rgba(242, 90, 31, 0.12), transparent 70%),
    radial-gradient(40% 40% at 10% 90%, rgba(242, 90, 31, 0.05), transparent 70%),
    linear-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1px) 0 0 / 100% 96px,
    linear-gradient(90deg, rgba(255, 255, 255, 0.055) 1px, transparent 1px) 0 0 / 96px 100%;
  -webkit-mask-image: radial-gradient(ellipse at 70% 45%, #000 30%, transparent 85%);
          mask-image: radial-gradient(ellipse at 70% 45%, #000 30%, transparent 85%);
  opacity: 0.9;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: screen;
}

.hero-grid {
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr) minmax(0, 0.92fr);
  column-gap: clamp(16px, 3vw, 48px);
  align-items: center;
}
.hero .rail::before { height: 180px; }
.hero-copy { position: relative; z-index: 2; max-width: 640px; }
.hero h1 {
  margin: 26px 0 24px;
  font-size: clamp(2.6rem, 5vw, 4.5rem);
  line-height: 0.98;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.hero-copy > p { max-width: 560px; font-size: clamp(1.02rem, 1.3vw, 1.14rem); line-height: 1.62; color: var(--m-dark); }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 26px; margin-top: 36px; }

/* hero value notes (mono spec rows) */
.hero-notes { display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); gap: 20px 40px; margin-top: clamp(36px, 4vw, 56px); }
.floating-note { display: flex; flex-direction: column; gap: 8px; letter-spacing: 0.1em; }
.floating-note strong { font-weight: 500; color: var(--m-dark); font-size: var(--ms-5); }
.floating-note span { display: inline-flex; align-items: flex-start; gap: 10px; font-size: var(--ms-8); font-weight: 600; letter-spacing: 0.08em; color: var(--t-dark); text-transform: uppercase; }
.floating-note span::before { content: ""; flex: none; width: 7px; height: 7px; margin-top: 0.42em; border-radius: 50%; background: var(--accent); box-shadow: 0 0 12px var(--accent-glow); }

/* load-in choreography (content is in the DOM regardless; uses `translate`,
   not `transform`, so it never fights hover transforms) */
.hero-copy > * { animation: v2-hero-in 0.9s var(--ease) both; }
.hero-copy > h1 { animation-name: v2-hero-move; }
.hero-copy > *:nth-child(1) { animation-delay: 0.05s; }
.hero-copy > *:nth-child(2) { animation-delay: 0.15s; }
.hero-copy > *:nth-child(3) { animation-delay: 0.28s; }
.hero-copy > *:nth-child(4) { animation-delay: 0.40s; }
.hero-copy > *:nth-child(5) { animation-delay: 0.52s; }
@keyframes v2-hero-in { from { opacity: 0; translate: 0 18px; } to { opacity: 1; translate: 0 0; } }
@keyframes v2-hero-move { from { translate: 0 18px; } to { translate: 0 0; } }

/* --- hero stage: phone + treasury card + multi-chain chip ------------- */
.hero-stage { position: relative; min-height: 720px; z-index: 1; }
.hero-stage::before {
  content: "";
  position: absolute;
  inset: -10% -20%;
  background: radial-gradient(36% 40% at 62% 48%, rgba(242, 90, 31, 0.16), transparent 70%);
  filter: blur(6px);
  z-index: 0;
  pointer-events: none;
}
.hero-panel { position: absolute; z-index: 2; animation: v2-hero-in 1s var(--ease) both; }

/* phone */
.panel-top { right: 0; top: 30px; width: min(310px, 54%); animation-delay: 0.25s; }
.phone-svg { width: 100%; height: auto; filter: drop-shadow(0 40px 60px rgba(0, 0, 0, 0.55)); }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.panel-head strong { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; letter-spacing: -0.01em; }
.tag { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border: 1px solid var(--ink-line-strong); border-radius: var(--radius); font-family: var(--font-mono); font-size: var(--ms-5); letter-spacing: 0.12em; text-transform: uppercase; color: var(--t-dark); }
.tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent-glow); }
.tag.plain::before { display: none; }
.panel-top .panel-head { position: absolute; left: 12%; right: 0; top: -52px; }
.panel-top .panel-foot { position: absolute; left: auto; right: 0; bottom: -40px; width: max-content; max-width: 100%; white-space: nowrap; text-align: right; font-family: var(--font-mono); font-size: var(--ms-6); letter-spacing: 0.14em; text-transform: uppercase; color: var(--m-dark); }

/* treasury card */
/* The positioning box is transparent and grid-stacks its slides, so it is always
   as tall as the TALLEST wallet (the 5-signer company one). Anchored bottom: 0,
   that makes its top edge constant — the card no longer jiggles up and down as the
   carousel runs, and the gap under the multi-chain card stays put. The visible card
   chrome sits on each slide instead and is top-aligned, so a 3-signer wallet draws a
   genuinely shorter card hanging from the same top edge. */
.panel-main {
  left: 0;
  bottom: 0;
  width: min(340px, 62%);
  animation-delay: 0.5s;
}
.panel-main .hero-slides { display: grid; }
.panel-main .hslide {
  grid-area: 1 / 1;
  align-self: start;
  padding: 20px 20px 18px;
  background: rgba(21, 23, 28, 0.92);
  border: 1px solid var(--ink-line-strong);
  border-radius: var(--radius-lg);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
}
.signers { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; }
.signers li { display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 12px; padding: 9px 0; border-top: 1px solid var(--ink-line); }
.signers li:first-child { border-top: 0; }
.avatar { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--ink-line-strong); display: grid; place-items: center; font-family: var(--font-mono); font-size: 0.72rem; color: var(--m-dark); }
.is-approved .avatar { border-color: var(--accent); color: var(--accent); }
.who { display: flex; flex-direction: column; line-height: 1.2; }
.who b { font-family: var(--font-mono); font-size: var(--ms-7); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--t-dark); }
.who small { font-family: var(--font-mono); font-size: var(--ms-2); letter-spacing: 0.12em; text-transform: uppercase; color: var(--m-dark); margin-top: 3px; }
.who small span { display: block; }
.who small span + span { margin-top: 2px; }
.state { font-family: var(--font-mono); font-size: var(--ms-5); letter-spacing: 0.06em; color: var(--m-dark); }
.is-approved .state { color: var(--accent); }
.is-approved .state::before { content: "✓ "; }
.progress { display: flex; gap: 5px; margin-top: 16px; }
.progress i { flex: 1; height: 3px; background: var(--ink-4); border-radius: 2px; overflow: hidden; position: relative; }
.progress i::after { content: ""; position: absolute; inset: 0; background: var(--accent); transform: scaleX(0); transform-origin: left; }
.progress i.on::after { animation: v2-fill 0.7s var(--ease) both; }
.progress i.on:nth-child(1)::after { animation-delay: 1.1s; }
.progress i.on:nth-child(2)::after { animation-delay: 1.7s; }
.progress i.on:nth-child(3)::after { animation-delay: 2.3s; }
@keyframes v2-fill { to { transform: scaleX(1); } }
.panel-main .panel-foot { margin-top: 12px; display: flex; justify-content: flex-end; font-family: var(--font-mono); font-size: var(--ms-5); letter-spacing: 0.08em; color: var(--accent); }
.signers .is-approved .state { animation: v2-appear 0.5s var(--ease) both; }
.signers li:nth-child(1) .state { animation-delay: 1.0s; }
.signers li:nth-child(2) .state { animation-delay: 1.6s; }
@keyframes v2-appear { from { opacity: 0; translate: 6px 0; } to { opacity: 1; translate: 0 0; } }

/* multi-chain chip card */
.panel-bottom {
  left: 0;
  top: 0;
  width: min(224px, 42%);
  padding: 16px 18px 18px;
  background: rgba(21, 23, 28, 0.88);
  border: 1px solid var(--ink-line);
  border-radius: var(--radius-lg);
  animation-delay: 0.7s;
}
.panel-bottom strong { display: block; font-family: var(--font-display); font-weight: 600; font-size: 1rem; letter-spacing: -0.01em; }
.panel-bottom > span { display: block; margin-top: 4px; font-size: 0.78rem; color: var(--m-dark); }
.chain-row { display: flex; gap: 6px; margin-top: 14px; }
.chain-row i > svg { display: block; fill: currentColor; }  /* size is on the mark itself */
.chain-row i {
  flex: none;
  width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid var(--ink-line-strong);
  display: grid; place-items: center;
  font-family: var(--font-mono); font-style: normal; font-size: 0.72rem; font-weight: 600; color: var(--t-dark);
  background: var(--ink-3);
}
.chain-row i:nth-child(2) { animation-delay: 0.6s; }
.chain-row i:nth-child(3) { animation-delay: 1.2s; font-size: 0.6rem; }
.chain-row i:nth-child(4) { animation-delay: 1.8s; }
.chain-row i:nth-child(5) { animation-delay: 2.4s; color: var(--m-dark); font-size: 0.62rem; }
 30% { border-color: var(--ink-line-strong); box-shadow: none; } }

/* ==========================================================================
   Overview strip (numbered rail of proof points)
   ========================================================================== */
.overview-strip { background: var(--ink); color: var(--t-dark); border-top: 1px solid var(--ink-line); border-bottom: 1px solid var(--ink-line); }
.stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); counter-reset: stat; }
.stat-card { position: relative; padding: 30px 28px 30px 58px; border-left: 1px solid var(--ink-line); counter-increment: stat; transition: background 0.3s var(--ease); }
.stat-card:first-child { border-left: 0; padding-left: 46px; }
.stat-card:first-child::before { left: 0; }
.stat-card::before { content: counter(stat, decimal-leading-zero); position: absolute; left: 24px; top: 33px; font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.1em; color: var(--accent); }
.stat-card strong { display: block; font-size: var(--ms-8); color: var(--t-dark); letter-spacing: 0.12em; }
.stat-card span { display: block; margin-top: 10px; font-size: 0.86rem; line-height: 1.55; color: var(--m-dark); }
.stat-card:hover { background: var(--ink-2); }

/* ==========================================================================
   Bordered card grids (features, pillars, contact, plans, coins)
   ========================================================================== */
.feature-grid, .pil-grid, .contact-grid, .plan-grid, .coin-grid, .download-grid {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.feature-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); counter-reset: card; }
.pil-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); counter-reset: card; }
.contact-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.feature-card, .pil-card, .contact-card, .plan-card, .coin-card, .download-card {
  position: relative;
  background: var(--bg);
  color: var(--fg);
  transition: background 0.35s var(--ease), outline-color 0.35s var(--ease);
  outline: 1px solid transparent;
  outline-offset: -1px;
}

/* feature cards */
.feature-card { display: flex; flex-direction: column; padding: 34px 32px 56px; min-height: 360px; counter-increment: card; }
.feature-card::before { content: counter(card, decimal-leading-zero); font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.1em; color: var(--muted); }
.feature-card .card-icon { position: absolute; top: 30px; right: 28px; width: 28px; height: 28px; color: var(--muted); transition: color 0.3s var(--ease); }
.feature-card .card-icon svg { width: 100%; height: 100%; }
.feature-card h3 { font-size: var(--h3-lg); letter-spacing: -0.025em; padding-top: 72px; }
.feature-card p { margin-top: 14px; max-width: 34ch; color: var(--muted); font-size: 0.98rem; line-height: 1.6; }
.feature-card .link-arrow { margin-top: auto; align-self: flex-start; position: relative; top: 26px; }
.feature-card:hover, .pil-card:hover, .contact-card:hover {
  background: var(--bg-2);
  outline-color: var(--line-strong);
  z-index: 1;
}
.t-paper .feature-card:hover, .t-paper .pil-card:hover, .t-paper .contact-card:hover { background: #ffffff; }
.feature-card:hover .card-icon { color: var(--accent); }

/* ==========================================================================
   Split sections (illustration + copy)
   ========================================================================== */
.split-section { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(32px, 6vw, 96px); align-items: start; }
.split-section.reverse .split-visual { order: 2; }
.split-section.reverse .split-copy { order: 1; }
.split-visual {
  position: sticky;
  top: calc(var(--header-h) + 24px);
  padding: clamp(8px, 1.5vw, 16px);
  border: 1px solid var(--line);
  background: var(--bg-2);
  border-radius: var(--radius);
  overflow: hidden;
}
.split-visual img { width: 100%; height: auto; }
.split-copy h2 a { color: inherit; }
.split-h2-link { display: inline; }
.split-h2-link::after { width: 0.5em; height: 0.5em; margin-left: 0.25em; vertical-align: baseline; opacity: 0.6; }
.split-h2-link:hover { color: var(--fg); }
.split-h2-link:hover::after { opacity: 1; }

/* numbered rows inside split copy */
.info-grid, .workflow-grid { margin-top: 36px; border-top: 1px solid var(--line); counter-reset: row; }
.info-card, .workflow-card { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 8px 14px; padding: 20px 0; border-bottom: 1px solid var(--line); counter-increment: row; transition: padding-left 0.3s var(--ease); }
.info-card::before, .workflow-card::before { content: counter(row, decimal-leading-zero); font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.08em; color: var(--accent-ink); padding-top: 5px; }
.info-card strong, .workflow-card strong { font-family: var(--font-display); font-weight: 600; font-size: 1.12rem; letter-spacing: -0.01em; color: var(--fg); }
.info-card p, .workflow-card p { grid-column: 2; color: var(--muted); font-size: 0.95rem; line-height: 1.6; }
.info-card:hover, .workflow-card:hover { padding-left: 6px; }

/* MultiSig split: the three modes as stat columns */
.split-multisig .workflow-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.split-multisig .workflow-card { display: flex; flex-direction: column; gap: 10px; padding: 22px 18px 22px 0; border-bottom: 0; border-left: 1px solid var(--line); padding-left: 18px; }
.split-multisig .workflow-card:first-child { border-left: 0; padding-left: 0; }
.split-multisig .workflow-card::before { color: var(--accent); }
.split-multisig .workflow-card strong { font-size: clamp(1.1rem, 1.35vw, 1.45rem); color: var(--fg); line-height: 1.15; }
.split-multisig .workflow-card p { font-size: 0.84rem; line-height: 1.55; }
.split-multisig .workflow-card:hover { padding-left: 18px; }
.split-multisig .workflow-card:first-child:hover { padding-left: 0; }

/* ==========================================================================
   Pillars (Family / Enterprise / Inheritance)
   ========================================================================== */
.pil-card { display: flex; flex-direction: column; counter-increment: card; }
.pil-art {
  position: relative;
  height: 120px;
  display: grid;
  place-items: center;
  border-bottom: 1px solid var(--line);
  color: var(--accent-ink);
  background-color: var(--bg-2);
}
.pil-art::before { content: counter(card, decimal-leading-zero); position: absolute; left: 26px; top: 22px; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.1em; color: var(--muted); }
.pil-art svg { width: 48px; height: 48px; transition: transform 0.5s var(--ease); }
.pil-card:hover .pil-art svg { transform: translateY(-3px) scale(1.05); }
.pil-body { display: flex; flex-direction: column; gap: 14px; padding: 28px 26px 28px; flex: 1; }
.pil-tag { display: inline-flex; align-items: center; gap: 10px; color: var(--muted); }
.pil-tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.pil-body h3 { font-size: var(--h3-lg); letter-spacing: -0.02em; }
.pil-body > p { color: var(--muted); font-size: 0.96rem; line-height: 1.6; }
.pil-list { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.pil-list li, .plan-feature { position: relative; padding-left: 26px; font-size: 0.94rem; font-weight: 500; }
.pil-list li::before, .plan-feature::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.35em;
  width: 14px;
  height: 14px;
  background: var(--accent-ink);
  -webkit-mask: 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.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%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 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.pil-cta { margin-top: auto; padding-top: 12px; }

/* ==========================================================================
   Asset coverage (coin table-grid)
   ========================================================================== */
.asset-legend { display: flex; flex-wrap: wrap; gap: 12px 32px; margin: -24px 0 28px; color: var(--muted); }
.legend-item { display: inline-flex; align-items: center; gap: 10px; }
.legend-dot, .status-dot { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--muted); display: inline-block; }
.legend-dot.multi, .status-dot.multi { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 10px rgba(242, 90, 31, 0.45); }
.coin-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.coin-card { display: flex; align-items: center; gap: 16px; padding: 20px 22px; }
.coin-card:hover { background: var(--bg-2); }
.coin-icon { width: 30px; height: 30px; border-radius: 50%; filter: grayscale(1) contrast(1.05); opacity: 0.8; transition: filter 0.35s var(--ease), opacity 0.35s var(--ease), transform 0.35s var(--ease); }
.coin-card:hover .coin-icon { filter: none; opacity: 1; transform: scale(1.06); }
.coin-body { display: grid; grid-template-columns: 56px 1fr; align-items: baseline; gap: 12px; flex: 1; min-width: 0; }
.coin-body strong { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em; font-weight: 600; color: var(--muted); }
.coin-body span { font-size: 1rem; font-weight: 500; color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.coin-meta { display: flex; gap: 8px; align-items: center; }

/* ==========================================================================
   Pricing
   ========================================================================== */
.plan-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; overflow: visible; margin-top: 8px; }
.plan-card { display: flex; flex-direction: column; padding: 36px 32px 32px; }
.plan-card.recommended {
  background: var(--paper);
  color: var(--t-light);
  --fg: var(--t-light);
  --muted: var(--m-light);
  --line: var(--paper-line);
  --line-strong: var(--paper-line-strong);
  --accent-ink: var(--accent-deep);
  --focus: var(--accent-deep);
  margin: -18px 0;
  padding-top: 54px;
  padding-bottom: 50px;
  outline: 1px solid var(--paper-line-strong);
  z-index: 1;
}
.plan-card.recommended::before {
  content: attr(data-recommended-label);
  position: absolute;
  top: 22px;
  right: 22px;
  padding: 6px 10px;
  background: var(--accent);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: var(--ms-4);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: 2px;
}
.plan-head h3 { font-size: var(--h3-lg); letter-spacing: -0.025em; }
.plan-sub { display: block; margin-top: 12px; color: var(--muted); }
.price-tag { display: flex; align-items: baseline; gap: 12px; margin: 26px 0 28px; padding-bottom: 28px; border-bottom: 1px solid var(--line); }
.price-tag strong { font-family: var(--font-display); font-weight: 600; font-size: clamp(2.8rem, 4vw, 3.6rem); letter-spacing: -0.045em; line-height: 1; }
.price-tag span { font-family: var(--font-mono); font-size: var(--ms-7); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.plan-features { display: flex; flex-direction: column; gap: 12px; }
.plan-feature { color: var(--fg); }

/* comparison table */
.table-shell { margin-top: clamp(48px, 6vw, 80px); border: 1px solid var(--line); overflow-x: auto; -webkit-overflow-scrolling: touch; }
.pricing-table { width: 100%; min-width: 680px; border-collapse: collapse; font-size: 0.95rem; }
.pricing-table th, .pricing-table td { padding: 16px 20px; text-align: left; border-bottom: 1px solid var(--line); border-left: 1px solid var(--line); vertical-align: middle; }
.pricing-table th:first-child, .pricing-table td:first-child { border-left: 0; }
.pricing-table thead th { font-family: var(--font-mono); font-weight: 500; font-size: var(--ms-7); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); background: var(--bg-2); }
.pricing-table tbody tr:last-child td { border-bottom: 0; }
.pricing-table tbody tr:hover td { background: var(--bg-2); }
.pricing-table td:first-child { color: var(--fg); font-weight: 500; }
.pricing-table td:not(:first-child) { color: var(--muted); }
.pricing-table .check { color: var(--accent); font-weight: 700; }
.pricing-table .cross { color: var(--muted); }

/* recovery note */
.recovery-note { margin-top: 40px; padding: clamp(24px, 3vw, 36px); border: 1px solid var(--line); display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 24px 48px; align-items: center; background: var(--bg-2); }
.recovery-note h3 { font-size: var(--h3-sm); letter-spacing: -0.02em; }
.recovery-note p { margin-top: 10px; color: var(--muted); font-size: 0.95rem; line-height: 1.6; }
.link-row { display: flex; flex-direction: column; gap: 10px; align-items: stretch; }
.link-chip { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid var(--line-strong); border-radius: var(--radius); font-weight: 600; font-size: 0.92rem; transition: background 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease); }
.link-chip:hover { background: var(--fg); color: var(--bg); border-color: var(--fg); }

/* ==========================================================================
   Download rows + injected Web Console band
   ========================================================================== */
.download-grid { grid-template-columns: minmax(0, 1fr); counter-reset: dl; }
.download-card { display: grid; grid-template-columns: 44px 52px minmax(0, 1fr) auto; align-items: center; gap: 22px; padding: 26px 28px; counter-increment: dl; }
.download-card::before { content: counter(dl, decimal-leading-zero); font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.1em; color: var(--muted); }
.platform-icon { width: 52px; height: 52px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: var(--radius); color: var(--fg); }
.platform-icon svg { width: 24px; height: 24px; }
.download-card h3 { font-size: var(--h3-sm); letter-spacing: -0.02em; }
.download-card p { margin-top: 6px; color: var(--muted); font-size: 0.92rem; }
.download-card:hover { background: var(--bg-2); }
/* store buttons: outlined so the section keeps one solid accent */
.download-card .btn { min-height: 48px; min-width: 224px; padding: 0 20px; font-size: 0.92rem; background: transparent; border-color: var(--line-strong); color: var(--fg); justify-self: end; }
.download-card .btn:hover, .download-card .btn:focus-visible { background: var(--fg); border-color: var(--fg); color: var(--bg); }

.console-cta { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; align-items: center; gap: 22px; margin-top: 24px; padding: 26px 28px 26px 94px; border: 1px solid var(--line-strong); border-left: 2px solid var(--accent); background: var(--bg-2); }
.console-cta-icon { width: 52px; height: 52px; display: grid; place-items: center; border: 1px solid var(--accent); color: var(--accent-ink); border-radius: var(--radius); }
.console-cta-icon svg { width: 24px; height: 24px; }
.console-cta-text strong { display: block; font-family: var(--font-display); font-weight: 600; font-size: var(--h3-sm); letter-spacing: -0.02em; }
.console-cta-text p { margin-top: 6px; color: var(--muted); font-size: 0.92rem; }
.console-cta .btn { min-height: 48px; min-width: 224px; padding: 0 20px; font-size: 0.92rem; }
.console-cta .btn-primary::after { -webkit-mask-image: 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='M7 7l10 10'/%3E%3Cpath d='M17 7v10H7'/%3E%3C/svg%3E"); mask-image: 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='M7 7l10 10'/%3E%3Cpath d='M17 7v10H7'/%3E%3C/svg%3E"); }

/* ==========================================================================
   Contact
   ========================================================================== */
.contact-card { display: flex; flex-direction: column; gap: 10px; padding: 28px 26px 30px; min-height: 220px; }
.contact-card > span { color: var(--muted); margin-bottom: 48px; }
.contact-card h3 { font-size: var(--h3-sm); letter-spacing: -0.015em; word-break: break-word; }
.contact-card p { color: var(--muted); font-size: 0.9rem; line-height: 1.55; }
.contact-card::after { position: absolute; top: 26px; right: 24px; width: 1em; height: 1em; color: var(--muted); }
.contact-card:hover::after { color: var(--accent); }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer { background: #17181e; color: var(--t-dark); border-top: 1px solid var(--ink-line); --bg: #17181e; --fg: var(--t-dark); --muted: var(--m-dark); --line: var(--ink-line); --focus: var(--accent); }
.footer-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 48px 64px; padding: clamp(56px, 7vw, 96px) 0 56px; border-bottom: 1px solid var(--ink-line); }
.footer-wordmark { font-family: var(--font-display); font-weight: 600; font-size: 1.5rem; letter-spacing: -0.02em; line-height: 1; }
.footer-brief { margin-top: 18px; max-width: 300px; color: var(--m-dark); font-size: 0.95rem; }
.footer-nav-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px 24px; }
.footer-col-title { margin: 0 0 18px; font-weight: 500; color: var(--m-dark); }
.footer-col-links { display: flex; flex-direction: column; gap: 10px; }
.footer-col-links a { font-size: 0.95rem; color: var(--t-dark); opacity: 0.82; transition: opacity 0.25s var(--ease), color 0.25s var(--ease); }
.footer-col-links a:hover { opacity: 1; color: var(--accent); }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; padding: 26px 0 40px; font-family: var(--font-mono); font-size: var(--ms-6); letter-spacing: 0.08em; color: var(--m-dark); }
.footer-legal-links { display: flex; gap: 10px; }
.footer-legal-links a:hover { color: var(--t-dark); }

/* ==========================================================================
   QR download modal (markup lives in the page)
   ========================================================================== */
.qr-modal { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; z-index: 9999; }
.qr-modal.is-open { display: flex; }
.qr-modal-backdrop { position: absolute; inset: 0; background: rgba(14, 15, 18, 0.78); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.qr-modal-card { position: relative; z-index: 1; width: min(92vw, 420px); background: var(--paper); color: var(--t-light); --focus: var(--accent-deep); border: 1px solid var(--paper-line); border-radius: var(--radius-lg); padding: 32px 28px 26px; text-align: center; animation: v2-hero-in 0.4s var(--ease) both; }
.qr-modal-close { position: absolute; top: 10px; right: 10px; width: 44px; height: 44px; border: 1px solid var(--paper-line); border-radius: var(--radius); background: transparent; color: var(--t-light); font-size: 22px; line-height: 1; cursor: pointer; }
.qr-modal-close:hover { background: var(--t-light); color: var(--paper); }
.qr-modal-title { font-size: 1.6rem; letter-spacing: -0.02em; }
.qr-modal-desc { margin: 12px auto 0; max-width: 300px; font-size: 0.92rem; line-height: 1.6; color: var(--m-light); }
.qr-modal-image-wrap { margin: 22px auto 0; width: 244px; height: 244px; padding: 12px; background: #fff; border: 1px solid var(--paper-line); border-radius: var(--radius); }
.qr-modal-image { display: block; width: 220px; height: 220px; margin: 0 auto; }
.qr-modal-url { margin: 14px auto 0; max-width: 320px; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.02em; color: var(--m-light); word-break: break-all; }
body.qr-modal-open { overflow: hidden; }

/* ==========================================================================
   Scroll-driven reveals (progressive: no-JS, no-support = static content)
   Uses `translate` so `transform` stays free for hover effects.
   ========================================================================== */
@supports (animation-timeline: view()) and (animation-range: entry 0% entry 32%) {
  .feature-card, .pil-card, .contact-card, .plan-card, .coin-card, .download-card, .info-card, .workflow-card, .stat-card, .split-visual {
    animation: v2-rise linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 32%;
  }
  .feature-card:nth-child(2), .pil-card:nth-child(2), .plan-card:nth-child(2), .contact-card:nth-child(2), .stat-card:nth-child(2) { animation-range: entry 6% entry 38%; }
  .feature-card:nth-child(3), .pil-card:nth-child(3), .plan-card:nth-child(3), .contact-card:nth-child(3), .stat-card:nth-child(3) { animation-range: entry 12% entry 44%; }
  .contact-card:nth-child(4), .stat-card:nth-child(4) { animation-range: entry 18% entry 50%; }
  .coin-card { animation-range: entry 0% entry 24%; }
  .rail::before { animation: v2-draw linear both; animation-timeline: view(); animation-range: entry 0% entry 60%; transform-origin: top; }
}
@keyframes v2-rise { from { opacity: 0; translate: 0 26px; } to { opacity: 1; translate: 0 0; } }
@keyframes v2-draw { from { transform: scaleY(0); } to { transform: scaleY(1); } }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (min-width: 961px) and (max-width: 1180px) {
  .nav-actions .btn-header { display: none; }
  .site-nav { margin-right: 8px; }
  .coin-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1100px) {
  .hero-grid { grid-template-columns: var(--rail) minmax(0, 1fr) minmax(0, 1fr); }
  .hero h1 { font-size: clamp(2.5rem, 4.8vw, 4rem); }
  .hero-stage { min-height: 620px; }
  .panel-main { width: min(320px, 56%); }
  .panel-top .panel-foot { font-size: var(--ms-3); letter-spacing: 0.1em; }
  .chain-row i { width: 28px; height: 28px; font-size: 0.66rem; }
  .contact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-nav-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 960px) {
  :root { --rail: 40px; --header-h: 68px; }
  .nav-shell { min-height: var(--header-h); gap: 14px; }
  .site-nav {
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    margin: 0;
    max-height: calc(100vh - var(--header-h));
    max-height: calc(100svh - var(--header-h));
    overflow-y: auto;
    background: var(--ink);
    border-bottom: 1px solid var(--ink-line);
    padding: 16px 24px 28px;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    counter-reset: nav;
  }
  body.nav-open .site-nav { display: flex; }
  .site-nav a { display: flex; align-items: baseline; gap: 18px; padding: 16px 0; border-bottom: 1px solid var(--ink-line); font-family: var(--font-display); font-size: 1.5rem; letter-spacing: -0.02em; text-transform: none; color: var(--t-dark); counter-increment: nav; }
  .site-nav a::before { content: counter(nav, decimal-leading-zero); font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.1em; color: var(--accent); }
  .site-nav a::after { display: none; }
  .nav-actions { margin-left: auto; }
  .nav-actions .btn-header { display: none; }
  .language-select { height: 40px; padding: 0 30px 0 10px; }
  .menu-toggle { display: inline-flex; width: 40px; height: 40px; }

  .hero { min-height: 0; padding-top: 48px; }
  .hero-grid { grid-template-columns: var(--rail) minmax(0, 1fr); row-gap: 56px; }
  .hero-stage { grid-column: 2; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
  .hero-panel { position: relative; inset: auto; }
  .panel-top { grid-row: 1 / span 2; width: 100%; max-width: 280px; margin: 0 auto; }
  .panel-top .panel-head { position: static; margin-bottom: 14px; }
  .panel-top .panel-foot { position: static; width: auto; max-width: none; margin-top: 12px; text-align: center; white-space: normal; }
  .panel-main, .panel-bottom { width: 100%; }
  .chain-row i { width: 32px; height: 32px; font-size: 0.72rem; }
  .hero-stage::before { inset: 0 -20%; }

  .section-grid { grid-template-columns: var(--rail) minmax(0, 1fr); }
  .feature-grid, .pil-grid, .plan-grid, .coin-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feature-card:nth-child(3), .pil-card:nth-child(3) { grid-column: span 2; }
  .plan-card.recommended { margin: 0; padding-top: 54px; padding-bottom: 32px; grid-column: span 2; }
  .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat-card:nth-child(3), .stat-card:nth-child(4) { border-top: 1px solid var(--ink-line); }
  .stat-card:nth-child(3) { border-left: 0; padding-left: 46px; }
  .stat-card:nth-child(3)::before { left: 0; }
  .split-section { grid-template-columns: minmax(0, 1fr); gap: 40px; align-items: stretch; }
  .split-section.reverse .split-visual { order: 1; }
  .split-section.reverse .split-copy { order: 2; }
  .split-visual { position: relative; top: auto; max-width: 620px; }
  .recovery-note { grid-template-columns: minmax(0, 1fr); }
  .footer-top { grid-template-columns: minmax(0, 1fr); gap: 40px; }
}

@media (max-width: 640px) {
  :root { --container: min(1280px, calc(100% - 36px)); --sec-pad: 64px; --rail: 28px; }
  .section-grid, .hero-grid { grid-template-columns: minmax(0, 1fr); }
  .rail { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
  .rail::before { position: static; width: 48px; height: 1px; top: auto; background: var(--line-strong); }
  .hero .rail { margin-bottom: 0; }
  .hero .rail::before { height: 1px; }
  .hero-grid { row-gap: 32px; }
  .hero-stage { grid-column: 1; grid-template-columns: minmax(0, 1fr); }
  .panel-top { grid-row: auto; max-width: 230px; margin: 0 auto; }
  .hero-notes { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .hero-actions { gap: 16px 24px; }
  .hero-actions .btn-primary { width: 100%; }
  .feature-grid, .pil-grid, .plan-grid, .coin-grid, .contact-grid, .stat-grid { grid-template-columns: minmax(0, 1fr); }
  .feature-card:nth-child(3), .pil-card:nth-child(3), .plan-card.recommended { grid-column: auto; }
  .feature-card { min-height: 0; padding: 26px 22px 48px; }
  .feature-card h3 { padding-top: 44px; }
  .stat-card, .stat-card:first-child, .stat-card:nth-child(3) { border-left: 0; border-top: 1px solid var(--ink-line); padding: 24px 20px 24px 44px; }
  .stat-card::before, .stat-card:first-child::before, .stat-card:nth-child(3)::before { left: 0; top: 27px; }
  .stat-card:first-child { border-top: 0; }
  .plan-card { padding: 30px 22px 26px; }
  .plan-card.recommended { padding-top: 54px; }
  .split-multisig .workflow-grid { grid-template-columns: minmax(0, 1fr); }
  .split-multisig .workflow-card, .split-multisig .workflow-card:first-child { border-left: 0; border-bottom: 1px solid var(--line); padding-left: 0; }
  .split-multisig .workflow-card:last-child { border-bottom: 0; }
  .download-card { grid-template-columns: 44px minmax(0, 1fr); gap: 12px 16px; padding: 22px 18px; }
  .download-card .platform-icon { display: none; }
  .download-card .btn { grid-column: 1 / -1; width: 100%; min-width: 0; }
  .console-cta { grid-template-columns: minmax(0, 1fr); padding: 22px 18px; }
  .console-cta .btn { width: 100%; min-width: 0; }
  .contact-card { min-height: 0; padding: 22px 20px 24px; }
  .contact-card > span { margin-bottom: 20px; }
  .pricing-table { min-width: 560px; font-size: 0.88rem; }
  .pricing-table th, .pricing-table td { padding: 12px 14px; }
  .footer-nav-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ==========================================================================
   Reduced motion: everything static, everything visible
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .progress i::after { transform: scaleX(1); }
}


/* ==========================================================================
   Hero carousel
   Four signing requests, and the hero cards move together: the phone screen and
   the treasury card are two views of the SAME request, so they share one 16s
   cycle and one set of keyframes (the inline phone SVG carries the same hp-s*
   classes and is styled by these rules too — max-height is inert on an SVG <g>,
   so only the opacity half applies there).

   The slides sit in normal flow and claim height only while they are on screen,
   so the treasury card is exactly as tall as the wallet it is showing: short for
   the 3-signer family wallet, taller for the 5-signer company one. Each slide
   fades out fully before the next claims the row, so no two ever occupy space at
   once and the card never double-counts.

   Pure CSS — no JS. Under prefers-reduced-motion slide 1 simply stays put as a
   complete, readable hero rather than freezing mid-fade or going blank.
   ========================================================================== */
.hero-slides > .hslide { 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; }
}

/* The chip for the chain currently on screen. These chips used to pulse on their
   own 6s timer, which read as a second, unrelated animation — now the carousel is
   the only thing that lights one. The 5th chip ("+9") never lights. */
.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% { border-color: var(--accent); color: var(--accent); background: rgba(242, 90, 31, 0.14); }
  25%, 100% { border-color: var(--ink-line-strong); color: var(--t-dark); background: var(--ink-3); }
}
@keyframes chain-lit-2 {
  0%, 24.99% { border-color: var(--ink-line-strong); color: var(--t-dark); background: var(--ink-3); }
  25%, 49.9% { border-color: var(--accent); color: var(--accent); background: rgba(242, 90, 31, 0.14); }
  50%, 100% { border-color: var(--ink-line-strong); color: var(--t-dark); background: var(--ink-3); }
}
@keyframes chain-lit-3 {
  0%, 49.99% { border-color: var(--ink-line-strong); color: var(--t-dark); background: var(--ink-3); }
  50%, 74.9% { border-color: var(--accent); color: var(--accent); background: rgba(242, 90, 31, 0.14); }
  75%, 100% { border-color: var(--ink-line-strong); color: var(--t-dark); background: var(--ink-3); }
}
@keyframes chain-lit-4 {
  0%, 74.99% { border-color: var(--ink-line-strong); color: var(--t-dark); background: var(--ink-3); }
  75%, 99.9% { border-color: var(--accent); color: var(--accent); background: rgba(242, 90, 31, 0.14); }
  100% { border-color: var(--ink-line-strong); color: var(--t-dark); background: var(--ink-3); }
}

@media (prefers-reduced-motion: reduce) {
  .hp-s1, .hp-s2, .hp-s3, .hp-s4 { animation: none !important; }
  /* .hslide already rests at opacity 0, but the phone SVG's <g> groups do not —
     without this all four screens would stack on top of each other. */
  .hp-s2, .hp-s3, .hp-s4 { opacity: 0; }
  .hero-slides > .hp-s1 { opacity: 1; }
  .chain-row i { animation: none !important; }
  .chain-row i:nth-child(1) { border-color: var(--accent); color: var(--accent); background: rgba(242, 90, 31, 0.14); }
}

/* ===== 10-pages.css ===== */
/* ==========================================================================
   10 — Inner pages: shared components (features, solutions, coins, legal…)
   Styles the legacy class vocabulary (page-hero, page-summary, info-grid
   cards, page-cta, tag-row…) so every locale can be ported by swapping the
   stylesheet + chrome only. Sections get theme classes (t-ink/t-paper/t-beige)
   and `sec-num` (rail number) from tools/v2_convert.py.
   ========================================================================== */

/* ---- rail numbers on inner pages -------------------------------------- */
main { counter-reset: sec -1; }
main > section, main > article > section { counter-increment: sec; }
.sec-num > .container { position: relative; }
@media (min-width: 961px) {
  .sec-num > .container { padding-left: calc(var(--rail) + clamp(16px, 3vw, 48px)); }
  .sec-num > .container::before {
    content: counter(sec, decimal-leading-zero);
    position: absolute; left: 0; top: 0.2em;
    font-family: var(--font-mono); font-weight: 500; font-size: 0.72rem; letter-spacing: 0.14em; line-height: 1;
    color: var(--accent-ink);
  }
  .sec-num > .container::after {
    content: ""; position: absolute; left: 0.45em; top: 30px; width: 1px; height: 140px;
    background: linear-gradient(180deg, var(--line-strong), transparent);
  }
}

/* ---- page hero (compact ink hero) ------------------------------------- */
.page-hero {
  position: relative;
  padding: clamp(36px, 4.5vw, 64px) 0 clamp(48px, 6vw, 88px);
  background: var(--bg);
  color: var(--fg);
  overflow: hidden;
  overflow: clip;
  isolation: isolate;
}
.page-hero.t-ink::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(50% 60% at 82% 40%, rgba(242, 90, 31, 0.12), transparent 70%),
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px) 0 0 / 100% 96px,
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px) 0 0 / 96px 100%;
  -webkit-mask-image: radial-gradient(ellipse at 70% 40%, #000 30%, transparent 85%);
          mask-image: radial-gradient(ellipse at 70% 40%, #000 30%, transparent 85%);
}
.back-link {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: var(--ms-6); font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted);
  margin-bottom: clamp(24px, 3vw, 40px);
  transition: color 0.25s var(--ease);
}
.back-link::before {
  content: ""; width: 0.9em; height: 0.9em; background: currentColor; flex: none;
  -webkit-mask: 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='M19 12H5'/%3E%3Cpath d='M11 6l-6 6 6 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 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5'/%3E%3Cpath d='M11 6l-6 6 6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform 0.3s var(--ease);
}
.back-link:hover { color: var(--fg); }
.back-link:hover::before { transform: translateX(-3px); }

.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: 22px 0 20px;
  font-size: clamp(2.4rem, 4.6vw, 4rem);
  line-height: 1;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.page-copy > p, .page-hero .page-copy > div > p { font-size: clamp(1.02rem, 1.2vw, 1.12rem); line-height: 1.62; color: var(--muted); max-width: 560px; }
.page-hero .hero-actions { margin-top: 30px; }

/* tags / chips */
.tag-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.page-tag {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 10px; border: 1px solid var(--line-strong); border-radius: var(--radius);
  font-family: var(--font-mono); font-size: var(--ms-4); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--fg);
}
.page-tag.warm::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent-glow); }
.chain-chip-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; }
.chain-chip {
  display: inline-flex; align-items: center; padding: 5px 8px;
  border: 1px solid var(--line); border-radius: var(--radius);
  font-family: var(--font-mono); font-size: 0.64rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted);
}

/* visual slot */
.page-visual-card {
  position: relative;
  border: 1px solid var(--line);
  background: var(--bg-2);
  border-radius: var(--radius);
  padding: clamp(12px, 2vw, 24px);
  overflow: hidden;
}
.page-visual-card img { width: 100%; height: auto; }

/* summary strip (3 cells) */
.page-summary-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px; background: var(--line); border: 1px solid var(--line);
  margin-top: clamp(40px, 5vw, 64px);
  counter-reset: sum;
}
.page-summary { position: relative; background: var(--bg); padding: 24px 22px 26px 22px; counter-increment: sum; transition: background 0.3s var(--ease); }
.page-summary:hover { background: var(--bg-2); }
.summary-label {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: var(--ms-5); font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--fg); margin-bottom: 10px;
}
.summary-label::before { content: counter(sum, decimal-leading-zero); color: var(--accent-ink); }
.page-summary p { color: var(--muted); font-size: 0.94rem; line-height: 1.6; }

/* ---- 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%, 240px), 1fr));
  gap: 0; background: transparent; border: 0; border-top: 1px solid var(--line); border-left: 1px solid var(--line);
  counter-reset: card;
}
.container > .info-grid > .info-card, .page-card-grid > .info-card {
  display: flex; flex-direction: column; gap: 0;
  position: relative; background: var(--bg); padding: 28px 26px 30px; min-height: 250px;
  counter-increment: card; border: 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); outline: 1px solid transparent; outline-offset: -1px;
  transition: background 0.35s var(--ease), outline-color 0.35s var(--ease);
}
.container > .info-grid > .info-card::before, .page-card-grid > .info-card::before {
  content: counter(card, decimal-leading-zero); position: static; padding: 0;
  font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.1em; color: var(--muted);
}
.container > .info-grid > .info-card .card-icon, .page-card-grid > .info-card .card-icon {
  position: absolute; top: 26px; right: 24px; width: 26px; height: 26px; color: var(--muted); transition: color 0.3s var(--ease);
}
.container > .info-grid > .info-card .card-icon svg, .page-card-grid > .info-card .card-icon svg { width: 100%; height: 100%; }
.container > .info-grid > .info-card h3, .page-card-grid > .info-card h3 { margin-top: 48px; font-size: 1.35rem; letter-spacing: -0.02em; }
.container > .info-grid > .info-card p, .page-card-grid > .info-card p { grid-column: auto; margin-top: 12px; color: var(--muted); font-size: 0.95rem; line-height: 1.6; }
.container > .info-grid > .info-card:hover, .page-card-grid > .info-card:hover { background: var(--bg-2); outline-color: var(--line-strong); padding-left: 26px; z-index: 1; }
.t-paper .container > .info-grid > .info-card:hover, .t-paper .page-card-grid > .info-card:hover { background: #ffffff; }
.container > .info-grid > .info-card:hover .card-icon, .page-card-grid > .info-card:hover .card-icon { color: var(--accent); }

/* ---- split visual alias ---------------------------------------------- */
.workflow-visual {
  position: sticky; top: calc(var(--header-h) + 24px);
  padding: clamp(8px, 1.5vw, 16px); border: 1px solid var(--line); background: var(--bg-2);
  border-radius: var(--radius); overflow: hidden;
}
.workflow-visual img { width: 100%; height: auto; }

/* ---- page CTA band ----------------------------------------------------- */
.page-cta {
  display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 24px 40px; align-items: center;
  padding: clamp(28px, 4vw, 52px);
  border: 1px solid var(--line); background: var(--bg-2);
  position: relative;
}
.page-cta::before, .page-cta::after { content: ""; position: absolute; width: 14px; height: 14px; border-color: var(--line-strong); border-style: solid; pointer-events: none; }
.page-cta::before { top: 10px; left: 10px; border-width: 1px 0 0 1px; }
.page-cta::after { bottom: 10px; right: 10px; border-width: 0 1px 1px 0; }
.page-cta .section-heading { margin: 0 !important; max-width: 760px; }
.page-cta .section-heading h2 { font-size: clamp(1.8rem, 3vw, 2.6rem); margin: 18px 0 14px; }
.page-cta .section-heading p { font-size: 1rem; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 16px 26px; align-items: center; justify-content: flex-end; }

/* ---- generic FAQ details (coin-faq, inherit-ms-faq, blog-faq, doc-faq) -- */
.coin-faq-list, .inherit-ms-faq, .blog-faq, .doc-faq .container { }
.coin-faq-item, .inherit-ms-faq details, .blog-faq details, .doc-faq-item {
  border-top: 1px solid var(--line);
  background: transparent;
}
.coin-faq-item:last-child, .inherit-ms-faq details:last-child, .blog-faq details:last-child, .doc-faq-item:last-child { border-bottom: 1px solid var(--line); }
.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: 20px;
  padding: 20px 0;
  font-family: var(--font-display); font-weight: 600; font-size: 1.08rem; letter-spacing: -0.01em; color: var(--fg);
  transition: color 0.25s var(--ease);
}
.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:hover, .inherit-ms-faq summary:hover, .blog-faq summary:hover, .doc-faq-item summary:hover { color: var(--accent-ink); }
.coin-faq-chev, .doc-faq-chev { 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: 14px; height: 14px; background: currentColor; opacity: 0.7;
  -webkit-mask: 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'%3E%3Cpath d='M12 5v14M5 12h14'/%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 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / contain no-repeat;
  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-a, .inherit-ms-faq details > p, .blog-faq details > p, .doc-faq-a { padding: 0 0 22px; max-width: 70ch; color: var(--muted); font-size: 0.98rem; line-height: 1.7; }
.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(--fg); border-bottom: 1px solid var(--line-strong); }
.coin-faq-a a:hover, .inherit-ms-faq details a:hover, .blog-faq details a:hover, .doc-faq-a a:hover { border-bottom-color: var(--accent); }

/* ---- link rows: inline chips (recovery-note keeps its column) ---------- */
.link-row { display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-start; gap: 10px; }
.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: 24px; }
.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 */

/* ---- prose-ish helpers shared by inner pages -------------------------- */
.section-heading p a, .split-copy > p a, .page-copy p a { color: var(--fg); border-bottom: 1px solid var(--line-strong); }
.section-heading p a:hover, .split-copy > p a:hover, .page-copy p a:hover { border-bottom-color: var(--accent); }
.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; }
  .container > .info-grid > .info-card, .page-card-grid > .info-card { min-height: 0; }
  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); }
  .page-cta { grid-template-columns: minmax(0, 1fr); }
  .cta-actions { justify-content: flex-start; }
  .workflow-visual { position: relative; top: auto; max-width: 620px; }
}
@media (max-width: 640px) {
  .page-hero { padding-top: 28px; }
  .page-hero h1 { font-size: clamp(2.1rem, 9vw, 2.8rem); }
  .page-hero .hero-actions .btn-primary { width: 100%; }
  .container > .info-grid, .page-card-grid { grid-template-columns: minmax(0, 1fr); }
  .container > .info-grid > .info-card, .page-card-grid > .info-card { min-height: 0; padding: 24px 20px 26px; }
  .container > .info-grid > .info-card h3, .page-card-grid > .info-card h3 { margin-top: 40px; }
}

/* ===== 20-docs.css ===== */
/* ==========================================================================
   20 — Docs / Security center / FAQ (generated by tools/build_docs.py)
   Reading layout on paper: breadcrumb, head, sticky TOC column, prose body,
   blocks (lists, notes, tables, steps, cards, figures), FAQ, index grids.
   ========================================================================== */

:root { --prose: #c9ccd2; }
.t-paper, .t-beige { --prose: #2f3238; }

.doc-main { counter-reset: sec -1; }
.doc-hero { padding: clamp(28px, 3.5vw, 44px) 0 clamp(56px, 7vw, 96px); }
.doc-container { max-width: 1120px; }

/* layout: body + sticky toc when a TOC exists */
.doc-container { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 0; }
.doc-container > * { min-width: 0; }
.doc-head { grid-column: 1; }
.doc-container:has(.doc-toc) { grid-template-columns: minmax(0, 1fr) 240px; column-gap: clamp(40px, 5vw, 72px); grid-template-areas: "crumb crumb" "head head" "body toc" "index index"; }
.doc-container:has(.doc-toc) .doc-breadcrumb { grid-area: crumb; }
.doc-container:has(.doc-toc) .doc-head { grid-area: head; }
.doc-container:has(.doc-toc) .doc-toc { grid-area: toc; position: sticky; top: calc(var(--header-h) + 28px); align-self: start; }
.doc-container:has(.doc-toc) .doc-body { grid-area: body; }
.doc-container:has(.doc-toc) .doc-index-grid { grid-area: index; }

/* breadcrumb */
.doc-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: var(--ms-5); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-bottom: clamp(28px, 4vw, 48px); }
.doc-breadcrumb a { color: var(--muted); transition: color 0.25s var(--ease); }
.doc-breadcrumb a:hover { color: var(--fg); }
.doc-breadcrumb [aria-current] { color: var(--fg); }
.crumb-sep { color: var(--line-strong); }

/* head */
.doc-head { max-width: 820px; margin-bottom: clamp(36px, 5vw, 64px); }
.doc-head h1 { margin: 20px 0 18px; font-size: clamp(2.2rem, 4vw, 3.4rem); line-height: 1.02; letter-spacing: -0.035em; text-wrap: balance; }
.doc-lede { font-size: clamp(1.05rem, 1.3vw, 1.18rem); line-height: 1.65; color: var(--muted); }
.doc-lede b { color: var(--fg); font-weight: 600; }
.doc-head .tag-row { margin-top: 22px; }

/* toc */
.doc-toc { display: flex; flex-direction: column; gap: 0; border-left: 1px solid var(--line); padding-left: 18px; margin-bottom: 36px; }
.doc-toc-h { font-family: var(--font-mono); font-size: var(--ms-4); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.doc-toc a { position: relative; padding: 6px 0; font-size: 0.88rem; line-height: 1.4; color: var(--muted); transition: color 0.25s var(--ease); }
.doc-toc a::before { content: ""; position: absolute; left: -19px; top: 6px; bottom: 6px; width: 1px; background: var(--accent); transform: scaleY(0); transition: transform 0.3s var(--ease); }
.doc-toc a:hover { color: var(--fg); }
.doc-toc a:hover::before { transform: scaleY(1); }

/* body / prose */
.doc-body { max-width: 780px; }
.doc-section { padding: clamp(26px, 3vw, 36px) 0; border-top: 1px solid var(--line); counter-increment: docsec; }
.doc-body { counter-reset: docsec; }
.doc-section:first-child { border-top: 0; padding-top: 0; }
.doc-section h2 { display: flex; align-items: baseline; gap: 14px; margin: 0 0 16px; font-size: clamp(1.45rem, 2.3vw, 1.85rem); letter-spacing: -0.025em; line-height: 1.12; scroll-margin-top: calc(var(--header-h) + 28px); }
.doc-section h2::before { content: counter(docsec, decimal-leading-zero); font-family: var(--font-mono); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.1em; color: var(--accent-ink); flex: none; }
.doc-section h3 { margin: 22px 0 8px; font-size: 1.12rem; font-weight: 600; letter-spacing: -0.01em; }
.doc-body p { margin: 0 0 14px; font-size: 1.02rem; line-height: 1.72; color: var(--prose); }
.doc-body p:last-child { margin-bottom: 0; }
.doc-body p b, .doc-body li b { color: var(--fg); font-weight: 600; }
.doc-body a:not(.btn):not(.doc-rel):not(.doc-shot-link) { color: var(--fg); border-bottom: 1px solid var(--line-strong); transition: border-color 0.25s var(--ease); }
.doc-body a:not(.btn):not(.doc-rel):not(.doc-shot-link):hover { border-bottom-color: var(--accent); }
.doc-body code, .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); }

/* lists */
.doc-list, .doc-olist { margin: 0 0 16px; padding: 0; }
.doc-list { list-style: none; }
.doc-list li { position: relative; padding-left: 26px; margin: 0 0 10px; font-size: 1rem; line-height: 1.65; color: var(--prose); }
.doc-list li::before {
  content: ""; position: absolute; left: 0; top: 0.5em; width: 13px; height: 13px; background: var(--accent-ink);
  -webkit-mask: 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.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%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 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.doc-olist { list-style: none; counter-reset: ol; }
.doc-olist li { position: relative; padding-left: 34px; margin: 0 0 10px; line-height: 1.65; color: var(--prose); counter-increment: ol; }
.doc-olist li::before { content: counter(ol, decimal-leading-zero); position: absolute; left: 0; top: 0.35em; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.08em; color: var(--accent-ink); }

/* notes / callouts */
.doc-note { margin: 18px 0; padding: 16px 18px 16px 20px; border: 1px solid var(--line); border-left: 2px solid var(--line-strong); background: var(--bg-2); }
.doc-note p { margin: 0; font-size: 0.96rem; }
.doc-note p + p { margin-top: 8px; }
.doc-note-h { display: block; font-family: var(--font-mono); font-size: var(--ms-4); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.doc-note.warn, .doc-note.danger { border-left-color: var(--accent); }
.doc-note.warn .doc-note-h, .doc-note.danger .doc-note-h { color: var(--accent-ink); }
.doc-note.danger { background: rgba(242, 90, 31, 0.06); }
.doc-note.ok { border-left-color: var(--fg); }
.doc-note.info { border-left-color: var(--line-strong); }

/* tables */
.doc-tablecard { margin: 20px 0; border: 1px solid var(--line); overflow-x: auto; -webkit-overflow-scrolling: touch; }
.doc-table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 0.94rem; }
.doc-tcap { caption-side: bottom; padding: 12px 16px; font-family: var(--font-mono); font-size: var(--ms-4); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); text-align: left; border-top: 1px solid var(--line); }
.doc-table th, .doc-table td { padding: 13px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); border-left: 1px solid var(--line); }
.doc-table th:first-child, .doc-table td:first-child { border-left: 0; }
.doc-table thead th { font-family: var(--font-mono); font-weight: 500; font-size: var(--ms-4); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); background: var(--bg-2); }
.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 tbody tr:hover td { background: var(--bg-2); }

/* steps */
.doc-steps { margin: 22px 0 6px; }
.doc-step { position: relative; padding: 0 0 30px 54px; }
.doc-step::before {
  content: attr(data-n); position: absolute; left: 0; top: -2px; width: 34px; height: 34px;
  display: grid; place-items: center;
  border: 1px solid var(--line-strong); background: var(--bg); color: var(--accent-ink);
  font-family: var(--font-mono); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.06em;
}
.doc-step::after { content: ""; position: absolute; left: 17px; top: 36px; bottom: 6px; width: 1px; background: var(--line); }
.doc-step:last-child::after { display: none; }
.doc-step h3 { margin: 0 0 8px; font-size: 1.12rem; font-weight: 600; }
.doc-step p { font-size: 0.98rem; }
.doc-shotrow { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 14px; }
.doc-shot-link { display: block; border: 1px solid var(--line); background: #fff; border-radius: 6px; overflow: hidden; transition: border-color 0.25s var(--ease); }
.doc-shot-link:hover { border-color: var(--accent); }
.doc-shot { display: block; width: 180px; height: auto; }
.doc-shotrow.multi .doc-shot { width: 150px; }

/* cards */
.doc-cardgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 0; border-top: 1px solid var(--line); border-left: 1px solid var(--line); margin: 20px 0; }
.doc-card { background: var(--bg); padding: 20px 20px 22px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); transition: background 0.3s var(--ease); }
.doc-card:hover { background: var(--bg-2); }
.doc-card strong { display: block; font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; letter-spacing: -0.01em; margin-bottom: 6px; }
.doc-card p { margin: 0; font-size: 0.92rem; line-height: 1.6; color: var(--muted); }

/* figures (inline SVG diagrams) */
.doc-figure { margin: 22px 0; padding: clamp(12px, 2vw, 20px); border: 1px solid var(--line); background: var(--bg-2); border-radius: var(--radius); }
.doc-figure figcaption { margin-top: 12px; text-align: center; font-family: var(--font-mono); font-size: var(--ms-5); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }

/* related / rel links */
.doc-related { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--line); }
.doc-rel-h { display: block; font-family: var(--font-mono); font-size: var(--ms-4); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; }
.doc-rel-row { display: flex; flex-wrap: wrap; gap: 10px; }
.doc-rel { display: inline-flex; align-items: center; gap: 10px; padding: 11px 14px; border: 1px solid var(--line-strong); border-radius: var(--radius); font-weight: 600; font-size: 0.9rem; color: var(--fg); transition: background 0.25s var(--ease), color 0.25s var(--ease); }
.doc-rel::after { content: ""; width: 0.8em; height: 0.8em; background: currentColor; -webkit-mask: 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='M7 7l10 10'/%3E%3Cpath d='M17 7v10H7'/%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 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 7l10 10'/%3E%3Cpath d='M17 7v10H7'/%3E%3C/svg%3E") center / contain no-repeat; }
.doc-rel:hover { background: var(--fg); color: var(--bg); }

/* index grids (docs landing, section indexes, security index) */
.doc-index-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 0; border-top: 1px solid var(--line); border-left: 1px solid var(--line); margin-top: clamp(8px, 2vw, 24px); counter-reset: idx; }
.doc-index-card { position: relative; display: flex; flex-direction: column; background: var(--bg); padding: 28px 26px 28px; min-height: 220px; counter-increment: idx; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); transition: background 0.3s var(--ease); }
.doc-index-card::before { content: counter(idx, decimal-leading-zero); font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.1em; color: var(--muted); margin-bottom: 28px; }
.doc-index-card h3 { font-size: 1.3rem; letter-spacing: -0.02em; }
.doc-index-card p { margin-top: 10px; font-size: 0.94rem; line-height: 1.6; color: var(--muted); }
.doc-index-card .doc-rel { margin-top: auto; padding: 22px 0 5px; border: 0; border-bottom: 1px solid var(--line-strong); border-radius: 0; align-self: flex-start; background: transparent; color: var(--fg); }
.doc-index-card:hover { background: var(--bg-2); }
.t-paper .doc-index-card:hover { background: #ffffff; }
.doc-index-card:hover .doc-rel { border-bottom-color: var(--accent); }

/* FAQ section + updated + cta */
.doc-faq .section-heading { margin-bottom: 28px; }
.doc-faq .section-heading h2 { font-size: clamp(1.8rem, 3vw, 2.6rem); }
.doc-updated { font-family: var(--font-mono); font-size: var(--ms-5); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-bottom: 28px; }
.doc-updated time { color: var(--fg); }

/* ---- diagrams (.dg*, emitted by tools/diagrams.py) --------------------- */
.dg { display: block; width: 100%; height: auto; max-width: 560px; margin: 0 auto; }
.dg text { font-family: var(--font-mono); }
.dg-dev { fill: var(--bg); stroke: var(--line-strong); stroke-width: 1.4; }
.dg-dev.dg-cold { fill: var(--ink-2); stroke: var(--accent); }
.dg-screen { fill: var(--bg-2); stroke: var(--line-strong); stroke-width: 1; }
.dg-screen-cold { fill: var(--ink); stroke: var(--accent); }
.dg-cap { fill: var(--fg); font-size: 10px; font-weight: 600; paint-order: stroke; stroke: var(--bg-2); stroke-width: 3px; stroke-linejoin: round; }
.dg-cap-cold { fill: var(--accent-ink); }
.dg-mini { fill: var(--muted); font-size: 8.5px; letter-spacing: 0.08em; }
.dg-mini-cold { fill: var(--accent); }
.dg-gap { stroke: var(--accent); stroke-width: 1.25; stroke-dasharray: 3 6; }
.dg-gaptext { fill: var(--accent-ink); font-size: 9px; letter-spacing: 0.08em; }
.dg-qr rect { fill: var(--accent); }
.dg-qr .dg-qr-p { fill: var(--ink); }
.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-node { }
.dg-onchip { fill: var(--muted); font-size: 8.5px; font-weight: 700; letter-spacing: 0.08em; }
.dg-offchip { fill: var(--accent-ink); font-size: 8.5px; font-weight: 700; letter-spacing: 0.08em; }
.dg-flow { fill: var(--muted); font-size: 9.5px; }
.dg-arrow { fill: none; stroke: var(--accent); 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(--bg); 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(--accent); }
.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(--bg); } 15%,30% { fill: rgba(242, 90, 31, 0.18); } }
.dg-wire { fill: none; stroke: var(--line-strong); stroke-width: 1.4; }
.dg-wire.w1, .dg-wire.w3 { stroke: var(--accent); stroke-dasharray: 4 5; animation: dgDash 1.3s linear infinite; }
.dg-vault rect { fill: var(--ink-2); stroke: var(--accent); stroke-width: 1.4; }
.dg-lock { fill: none; stroke: var(--accent); stroke-width: 1.8; }
.dg-vault-t { fill: var(--t-dark); font-size: 15px; font-weight: 700; }
.dg-vault .dg-vault-lbl { fill: var(--t-dark); }
.dg-pc { fill: var(--bg); stroke: var(--fg); stroke-width: 1.5; }
.dg-ph, .dg-pb { fill: var(--fg); }
.dg-coin { fill: var(--accent); stroke: var(--accent); stroke-width: 1.4; }
.dg-coin-t { fill: var(--ink); 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(--bg); 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(--accent); }
.dg-badge.b-sig { fill: var(--fg); }
.dg-badge.b-adm { fill: var(--muted); }
.dg-badge-t { fill: var(--bg); font-size: 10px; font-weight: 800; }
.dg-gear { fill: none; stroke: var(--accent); stroke-width: 2; }
.dg-home-roof { fill: none; stroke: var(--fg); stroke-width: 1.8; stroke-linejoin: round; }
.dg-home-body { fill: var(--bg-2); stroke: var(--fg); stroke-width: 1.4; }
.dg-shield { fill: var(--bg); stroke: var(--accent); stroke-width: 1.6; }
.dg-clock-o { fill: none; stroke: var(--accent); stroke-width: 1.6; }
.dg-clock { fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-linecap: round; }
.dg-time { fill: none; stroke: var(--accent); 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: rgba(242, 90, 31, 0.18); }
}

/* ---- responsive -------------------------------------------------------- */
@media (max-width: 1024px) {
  .doc-container:has(.doc-toc) { grid-template-columns: minmax(0, 1fr); grid-template-areas: "crumb" "head" "toc" "body" "index"; }
  .doc-container:has(.doc-toc) .doc-toc { position: relative; top: auto; }
  .doc-body { max-width: none; }
}
.doc-body:has(.doc-section:only-child) .doc-section h2::before { display: none; }
@media (max-width: 640px) {
  .doc-section h2 { flex-direction: column; gap: 8px; }
  .doc-step { padding-left: 46px; }
  .doc-shot { width: 150px; }
  .doc-table { min-width: 460px; }
}

/* ==========================================================================
   Guide screenshot lightbox
   The markup stays a plain <a href="…" target="_blank">: with JS off the link
   still opens the image, which is exactly the behaviour this replaces. app.js
   intercepts the click and shows the image here instead.
   ========================================================================== */
.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(11, 12, 15, 0.92);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

/* 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: 10px clamp(10px, 3vw, 28px) max(10px, env(safe-area-inset-bottom));
  padding-top: max(10px, env(safe-area-inset-top));
}

.doc-lightbox-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.doc-lightbox-count {
  font-family: var(--font-mono);
  font-size: 0.72rem;               /* numerals — not on the --ms translated scale */
  letter-spacing: 0.12em;
  color: rgba(245, 243, 238, 0.55);
  font-variant-numeric: tabular-nums;
}

.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(245, 243, 238, 0.22);
  border-radius: var(--radius);
  background: rgba(245, 243, 238, 0.04);
  color: var(--paper);
  cursor: pointer;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.doc-lightbox-btn:hover:not(:disabled) { background: var(--accent); border-color: var(--accent); color: #fff; }
.doc-lightbox-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.doc-lightbox-btn:disabled { opacity: 0.28; 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: 10px 0;
}
.doc-lightbox-img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 24px 60px 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; }
@media (min-width: 720px) {
  .doc-lightbox-nav { position: absolute; inset: 0; pointer-events: none; justify-content: space-between; padding: 0 clamp(10px, 3vw, 28px); }
  .doc-lightbox-nav .doc-lightbox-btn { pointer-events: auto; width: 52px; height: 52px; }
}
@media (prefers-reduced-motion: reduce) {
  .doc-lightbox-img { animation: none; }
}

/* ===== 30-blog.css ===== */
/* ==========================================================================
   30 — Blog index + articles
   ========================================================================== */

/* index hero */
.blog-hero { position: relative; padding: clamp(40px, 5vw, 72px) 0 clamp(40px, 5vw, 64px); background: var(--bg); color: var(--fg); overflow: clip; isolation: isolate; }
.blog-hero.t-ink::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(45% 60% at 85% 30%, rgba(242, 90, 31, 0.12), transparent 70%),
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px) 0 0 / 100% 96px,
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px) 0 0 / 96px 100%;
  -webkit-mask-image: radial-gradient(ellipse at 75% 30%, #000 30%, transparent 85%);
          mask-image: radial-gradient(ellipse at 75% 30%, #000 30%, transparent 85%);
}
.blog-hero h1 { margin: 22px 0 18px; font-size: clamp(2.6rem, 5vw, 4.4rem); line-height: 0.98; letter-spacing: -0.035em; }
.blog-hero > .container > p { max-width: 600px; font-size: 1.1rem; line-height: 1.6; color: var(--muted); }
.blog-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 32px; }
.blog-filter button {
  padding: 10px 14px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: transparent; color: var(--muted); cursor: pointer;
  font-family: var(--font-mono); font-size: var(--ms-5); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase;
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease), background 0.25s var(--ease);
}
.blog-filter button:hover { color: var(--fg); border-color: var(--fg); }
.blog-filter button.active { background: var(--fg); color: var(--bg); border-color: var(--fg); }

/* index grid */
.blog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2vw, 28px); }
.blog-card { display: flex; flex-direction: column; background: var(--bg); color: var(--fg); border: 1px solid var(--line); transition: background 0.3s var(--ease), border-color 0.3s var(--ease); min-width: 0; }
.blog-card:hover { background: var(--bg-2); border-color: var(--line-strong); z-index: 1; }
.t-paper .blog-card:hover { background: #ffffff; }
.blog-card-cover { position: relative; aspect-ratio: 16 / 9; background: var(--ink); border-bottom: 1px solid var(--line); overflow: hidden; }
.blog-card-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
.blog-card:hover .blog-card-cover img { transform: scale(1.03); }
.blog-card-body { display: flex; flex-direction: column; gap: 12px; padding: 22px 22px 24px; flex: 1; }
.blog-cat { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: var(--ms-4); font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.blog-cat::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: none; }
.blog-cat.multisig::before { background: transparent; border: 1.5px solid var(--accent); }
.blog-cat.insights::before { border-radius: 1px; }
.blog-card h2, .blog-card h3 { font-size: 1.28rem; letter-spacing: -0.02em; line-height: 1.18; }
.blog-card-featured h2 { font-size: clamp(1.7rem, 2.6vw, 2.3rem); }
.blog-abstract { color: var(--muted); font-size: 0.95rem; line-height: 1.6; }
.blog-meta { margin-top: auto; padding-top: 8px; font-family: var(--font-mono); font-size: var(--ms-4); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.blog-card-featured { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
.blog-card-featured .blog-card-cover { aspect-ratio: auto; min-height: 320px; border-bottom: 0; border-right: 1px solid var(--line); }
.blog-card-featured .blog-card-body { padding: 32px 30px 32px; gap: 16px; justify-content: center; }
.blog-more { display: flex; justify-content: center; margin-top: 40px; }
.blog-more button, #blog-load-more { min-height: 50px; padding: 0 24px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: transparent; color: var(--fg); font-family: var(--font-body); font-weight: 700; font-size: 0.95rem; cursor: pointer; transition: background 0.25s var(--ease), color 0.25s var(--ease); }
.blog-more button:hover, #blog-load-more:hover { background: var(--fg); color: var(--bg); }
#blog-load-more[hidden] { display: none; }

/* article hero */
.blog-article-hero { position: relative; padding: clamp(32px, 4vw, 56px) 0 0; background: var(--bg); color: var(--fg); overflow: clip; isolation: isolate; }
.blog-article-hero.t-ink::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(45% 50% at 80% 20%, rgba(242, 90, 31, 0.10), transparent 70%);
}
.blog-article-shell { max-width: 780px; margin: 0 auto; }
.blog-article-hero h1 { margin: 18px 0 20px; font-size: clamp(2rem, 3.8vw, 3.2rem); line-height: 1.05; letter-spacing: -0.03em; text-wrap: balance; }
.blog-byline { font-family: var(--font-mono); font-size: var(--ms-6); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.blog-cover { margin: 36px 0 0; border: 1px solid var(--ink-line); border-bottom: 0; background: var(--ink-2); border-radius: var(--radius) var(--radius) 0 0; overflow: hidden; transform: translateY(1px); }
.blog-cover img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; display: block; }

/* article body */
.blog-article-body { padding-top: clamp(40px, 5vw, 64px) !important; }
.blog-prose { font-size: 1.05rem; line-height: 1.75; color: var(--prose); }
.blog-prose > * + * { margin-top: 1.1em; }
.blog-prose h2 { margin-top: 2.4em; margin-bottom: 0.6em; font-size: clamp(1.55rem, 2.4vw, 1.95rem); letter-spacing: -0.025em; line-height: 1.12; color: var(--fg); display: flex; align-items: baseline; gap: 14px; counter-increment: bh2; }
.blog-prose { counter-reset: bh2; }
.blog-prose h2::before { content: counter(bh2, decimal-leading-zero); font-family: var(--font-mono); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.1em; color: var(--accent-ink); flex: none; }
.blog-prose h3 { margin-top: 1.8em; font-size: 1.2rem; font-weight: 600; color: var(--fg); }
.blog-prose p strong, .blog-prose li strong { color: var(--fg); font-weight: 600; }
.blog-prose a:not(.btn) { color: var(--fg); border-bottom: 1px solid var(--line-strong); transition: border-color 0.25s var(--ease); }
.blog-prose a:not(.btn):hover { border-bottom-color: var(--accent); }
.blog-prose ul, .blog-prose ol { padding-left: 0; list-style: none; }
.blog-prose li { position: relative; padding-left: 28px; margin: 0 0 10px; }
.blog-prose ul li::before {
  content: ""; position: absolute; left: 2px; top: 0.72em; width: 6px; height: 6px; background: var(--accent-ink);
}
.blog-prose ol { counter-reset: bol; }
.blog-prose ol li { counter-increment: bol; padding-left: 36px; }
.blog-prose ol li::before { content: counter(bol, decimal-leading-zero); position: absolute; left: 0; top: 0.45em; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.08em; color: var(--accent-ink); }
.blog-prose blockquote { margin: 1.8em 0; padding: 6px 0 6px 24px; border-left: 2px solid var(--accent); font-family: var(--font-display); font-style: italic; font-size: 1.3rem; line-height: 1.35; letter-spacing: -0.015em; color: var(--fg); }
.blog-figure { margin: 2em 0; padding: clamp(12px, 2vw, 20px); border: 1px solid var(--line); background: var(--bg-2); border-radius: var(--radius); }
.blog-figure img { width: 100%; height: auto; }
.blog-figure figcaption { margin-top: 12px; text-align: center; font-family: var(--font-mono); font-size: var(--ms-5); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); line-height: 1.5; }
.blog-faq { margin-top: 0.6em; }
.blog-faq details > p { font-size: 0.98rem; }
.blog-cta { margin-top: 2.4em; padding: 24px 26px; border: 1px solid var(--line); border-left: 2px solid var(--accent); background: var(--bg-2); }
.blog-cta p { margin: 0; font-size: 1rem; }
.blog-related { margin-top: clamp(48px, 6vw, 72px); padding-top: 32px; border-top: 1px solid var(--line); }
.blog-related h2 { font-size: 1.1rem; font-family: var(--font-mono); font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-bottom: 18px; font-size: 0.7rem; }
.blog-related-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.blog-related-grid a { display: flex; flex-direction: column; gap: 10px; padding: 22px 22px 24px; background: var(--bg); font-family: var(--font-display); font-weight: 600; font-size: 1.12rem; letter-spacing: -0.015em; line-height: 1.25; color: var(--fg); transition: background 0.3s var(--ease); }
.blog-related-grid a span { margin-top: auto; font-family: var(--font-mono); font-weight: 500; font-size: var(--ms-4); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.blog-related-grid a:hover { background: var(--bg-2); }
.t-paper .blog-related-grid a:hover { background: #ffffff; }

@media (max-width: 1024px) {
  .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.blog-hero + .section { padding-top: clamp(40px, 5vw, 72px); }
@media (max-width: 960px) {
  .blog-card-featured { grid-template-columns: minmax(0, 1fr); }
  .blog-card-featured .blog-card-cover { aspect-ratio: 16 / 9; min-height: 0; border-right: 0; border-bottom: 1px solid var(--line); }
}
@media (max-width: 640px) {
  .blog-figure { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .blog-figure img { min-width: 520px; }
  .blog-grid { grid-template-columns: minmax(0, 1fr); }
  .blog-card-featured { grid-template-columns: minmax(0, 1fr); }
  .blog-card-featured .blog-card-cover { aspect-ratio: 16 / 9; min-height: 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .blog-related-grid { grid-template-columns: minmax(0, 1fr); }
  .blog-prose blockquote { font-size: 1.15rem; }
}

/* ===== 40-coins.css ===== */
/* ==========================================================================
   40 — Coin landing pages (generated by tools/build_coin_pages.py)
   ========================================================================== */

.coin-hero-row { display: flex; align-items: center; gap: 18px; margin-top: 18px; flex-wrap: wrap; }
.coin-hero-row > div { flex: 1 1 240px; min-width: 0; }
.coin-hero-row h1 { margin: 0 0 12px; }
.coin-hero-icon { width: 64px; height: 64px; border-radius: 50%; flex: none; filter: grayscale(1) contrast(1.05); opacity: 0.9; }

/* ---- coinhero: per-coin animated panel (ink re-skin) -------------------- */
.coinhero {
  position: relative; min-height: 430px; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  padding: 40px 26px 34px;
  border-radius: var(--radius);
  background:
    radial-gradient(circle at 78% 12%, color-mix(in srgb, var(--ch-a) 18%, transparent), transparent 42%),
    radial-gradient(circle at 12% 88%, color-mix(in srgb, var(--ch-b) 12%, transparent), transparent 40%),
    var(--ink);
  color: var(--t-dark);
}
.coinhero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
  background-size: 24px 24px;
  -webkit-mask-image: radial-gradient(circle at 50% 40%, rgba(0, 0, 0, 0.9), transparent 75%);
          mask-image: radial-gradient(circle at 50% 40%, rgba(0, 0, 0, 0.9), transparent 75%);
}
.coinhero::after { content: ""; position: absolute; left: 14px; top: 14px; width: 12px; height: 12px; border-left: 1px solid var(--ink-line-strong); border-top: 1px solid var(--ink-line-strong); pointer-events: none; }
.ch-stage { position: relative; width: 210px; height: 210px; display: grid; place-items: center; margin-bottom: 2px; }
.ch-halo { position: absolute; width: 170px; height: 170px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--ch-a) 28%, transparent) 0%, transparent 68%); animation: ch-pulse 5.5s ease-in-out infinite; }
.ch-orbit { position: absolute; border-radius: 50%; border: 1px dashed color-mix(in srgb, var(--ch-a) 45%, transparent); animation: ch-spin var(--ch-dur, 24s) linear infinite; }
.ch-o1 { width: 168px; height: 168px; }
.ch-o2 { width: 206px; height: 206px; animation-direction: reverse; animation-duration: calc(var(--ch-dur, 24s) * 1.6); border-color: color-mix(in srgb, var(--ch-a) 22%, transparent); }
.ch-orbit i { position: absolute; top: -4.5px; left: calc(50% - 4.5px); width: 9px; height: 9px; border-radius: 50%; background: var(--ch-a); box-shadow: 0 0 12px color-mix(in srgb, var(--ch-a) 80%, transparent); }
.ch-o2 i { width: 7px; height: 7px; background: var(--ch-b); }
.ch-coin { position: relative; width: 104px; height: 104px; animation: ch-float 6s ease-in-out infinite; }
.ch-coin img { width: 100%; height: 100%; display: block; }
.ch-name { position: relative; font-family: var(--font-display); font-size: 1.45rem; font-weight: 600; letter-spacing: -0.02em; color: var(--t-dark); display: flex; align-items: baseline; gap: 10px; }
.ch-name b { font-family: var(--font-mono); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.12em; color: color-mix(in srgb, var(--ch-a) 60%, #fff); border: 1px solid color-mix(in srgb, var(--ch-a) 55%, transparent); border-radius: 3px; padding: 3px 8px; }
.ch-chain { position: relative; font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--m-dark); padding: 6px 12px; border: 1px solid var(--ink-line-strong); border-radius: var(--radius); }
.ch-chips { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.ch-chips span { font-family: var(--font-mono); font-size: 0.64rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--t-dark); border: 1px solid var(--ink-line); border-radius: 3px; padding: 4px 8px; background: var(--ink-2); }
.ch-modes { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 6px; }
.ch-modes span { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 0.64rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--t-dark); border: 1px solid var(--ink-line-strong); border-radius: var(--radius); padding: 7px 10px; }
.ch-modes span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent-glow); animation: ch-blink 3.6s ease-in-out infinite; }
.ch-modes span:nth-child(2)::before { animation-delay: 1.2s; }
.ch-modes span:nth-child(3)::before { animation-delay: 2.4s; }
.ch-motif { position: absolute; top: 20px; right: 22px; display: flex; gap: 5px; align-items: flex-end; }
.ch-motif i { display: block; background: color-mix(in srgb, var(--ch-a) 70%, transparent); border-radius: 2px; }
.ch-m-utxo i { width: 10px; height: 10px; animation: ch-blink 2.8s ease-in-out infinite; }
.ch-m-utxo i:nth-child(2) { animation-delay: 0.5s; }
.ch-m-utxo i:nth-child(3) { animation-delay: 1s; }
.ch-m-evm { font-family: var(--font-mono); font-weight: 600; font-size: 0.95rem; color: color-mix(in srgb, var(--ch-a) 80%, transparent); animation: ch-blink 3.2s ease-in-out infinite; }
.ch-m-sol i { width: 18px; height: 4px; border-radius: 1px; transform: skewX(-18deg); animation: ch-blink 2.6s ease-in-out infinite; }
.ch-m-sol i:nth-child(2) { animation-delay: 0.4s; }
.ch-m-sol i:nth-child(3) { animation-delay: 0.8s; }
.ch-m-tron i { width: 0; height: 0; background: none; border-left: 9px solid transparent; border-right: 9px solid transparent; border-top: 14px solid color-mix(in srgb, var(--ch-a) 75%, transparent); border-radius: 0; animation: ch-pulse 3.4s ease-in-out infinite; }
.ch-m-acc i { width: 7px; height: 7px; border-radius: 50%; animation: ch-hop 2.9s ease-in-out infinite; }
.ch-m-acc i:nth-child(2) { animation-delay: 0.45s; }
.ch-m-acc i:nth-child(3) { animation-delay: 0.9s; }
@keyframes ch-spin { to { transform: rotate(360deg); } }
@keyframes ch-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes ch-pulse { 0%, 100% { transform: scale(1); opacity: 0.75; } 50% { transform: scale(1.12); opacity: 1; } }
@keyframes ch-blink { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }
@keyframes ch-hop { 0%, 100% { transform: translateY(0); opacity: 0.45; } 50% { transform: translateY(-5px); opacity: 1; } }

/* coin sections */
.coin-faq-list { max-width: 820px; }

@media (max-width: 720px) {
  .coinhero { min-height: 360px; padding: 32px 18px 28px; }
  .ch-stage { width: 180px; height: 180px; }
  .ch-o1 { width: 146px; height: 146px; }
  .ch-o2 { width: 178px; height: 178px; }
  .ch-coin { width: 92px; height: 92px; }
}

/* ===== 51-family.css ===== */
/* ==========================================================================
   51 — Family MultiSig page (main.family-ms)
   Bespoke bits only: the two inline SVG illustrations (hero `.fh-*` on ink,
   split `.fd-*` on paper), the plan / flow / chain / practice grids.
   Generic hero, summary strip, split layout and CTA come from 10-pages.css.
   ========================================================================== */

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

/* shared SVG type */
.family-ms .fh-mono, .family-ms .fd-mono { font-family: var(--font-mono); }
.family-ms .fh-sans, .family-ms .fd-sans { font-family: var(--font-display); }
.family-ms .fh-ltr, .family-ms .fd-ltr { font-size: 34px; font-weight: 600; letter-spacing: -0.02em; }
.family-ms .fh-chk, .family-ms .fd-chk { font-size: 17px; font-weight: 600; }
.family-ms .fh-cnt, .family-ms .fd-cnt { font-size: 30px; font-weight: 600; letter-spacing: -0.03em; }
.family-ms .fh-lbl, .family-ms .fd-lbl { font-size: 13px; font-weight: 600; letter-spacing: -0.01em; }
.family-ms .fh-seed text { font-size: 10.5px; letter-spacing: 0.06em; font-weight: 500; }

/* ---- hero art (dark) ---------------------------------------------------- */
.family-ms .fh-anim { animation: none 7s ease-in-out infinite both; }
.family-ms .fh-phone > rect:not([class]) { fill: #272b33; }
.family-ms .fh-body { fill: #1e2128; stroke: rgba(255, 255, 255, 0.18); stroke-width: 1; }
.family-ms .fh-screen { fill: #0b0c0f; stroke: rgba(255, 255, 255, 0.06); stroke-width: 1; }
.family-ms .fh-notch { fill: #15171c; stroke: rgba(255, 255, 255, 0.10); 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: #f25a1f; }
.family-ms .fh-tag { fill: rgba(242, 90, 31, 0.12); stroke: #f25a1f; stroke-width: 1; }
.family-ms .fh-chk { fill: #f25a1f; }
.family-ms .fh-wire { fill: none; stroke: rgba(255, 255, 255, 0.22); stroke-width: 1; stroke-dasharray: 2 4; }
.family-ms .fh-wire-dim { stroke: rgba(255, 255, 255, 0.14); }
.family-ms .fh-wire-a, .family-ms .fh-wire-b { stroke: #f25a1f; }
.family-ms .fh-halo { opacity: 1; }
.family-ms .fh-vault { fill: #1e2128; stroke: rgba(242, 90, 31, 0.85); stroke-width: 1; }
.family-ms .fh-glyph { fill: none; stroke: #f5f3ee; stroke-opacity: 0.7; stroke-width: 1; }
.family-ms .fh-glyph circle { fill: #f5f3ee; stroke: none; }
.family-ms .fh-cnt { fill: #f25a1f; }
.family-ms .fh-lbl { fill: #f5f3ee; }
.family-ms .fh-seg { fill: #f25a1f; }
.family-ms .fh-lock rect { fill: #15171c; stroke: #f25a1f; stroke-width: 1; }
.family-ms .fh-lock path { fill: none; stroke: #f25a1f; stroke-width: 1.25; stroke-linecap: square; stroke-linejoin: miter; }
.family-ms .fh-lock-chk { stroke-dasharray: 14; stroke-dashoffset: 0; }
.family-ms .fh-seed rect { fill: #15171c; stroke: rgba(255, 255, 255, 0.22); stroke-width: 1; }
.family-ms .fh-seed circle { fill: #f25a1f; }
.family-ms .fh-seed text { fill: #9ea2aa; }

.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; }

@keyframes fh-kLtrA { 0%, 6%, 96%, 100% { fill: #9ea2aa; } 12%, 90% { fill: #f25a1f; } }
@keyframes fh-kTagA { 0%, 6%, 96%, 100% { stroke: rgba(255, 255, 255, 0.22); fill: transparent; } 12%, 90% { stroke: #f25a1f; fill: rgba(242, 90, 31, 0.12); } }
@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.22); } 14% { stroke: #f25a1f; } 30% { stroke-dashoffset: -48; } 90% { stroke-dashoffset: -48; stroke: #f25a1f; } 96%, 100% { stroke-dashoffset: -48; stroke: rgba(255, 255, 255, 0.22); } }
@keyframes fh-kLtrB { 0%, 28%, 96%, 100% { fill: #9ea2aa; } 34%, 90% { fill: #f25a1f; } }
@keyframes fh-kTagB { 0%, 28%, 96%, 100% { stroke: rgba(255, 255, 255, 0.22); fill: transparent; } 34%, 90% { stroke: #f25a1f; fill: rgba(242, 90, 31, 0.12); } }
@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.22); } 36% { stroke: #f25a1f; } 52% { stroke-dashoffset: -48; } 90% { stroke-dashoffset: -48; stroke: #f25a1f; } 96%, 100% { stroke-dashoffset: -48; stroke: rgba(255, 255, 255, 0.22); } }
@keyframes fh-kSeg1 { 0%, 12%, 96%, 100% { fill: rgba(255, 255, 255, 0.18); } 16%, 90% { fill: #f25a1f; } }
@keyframes fh-kSeg2 { 0%, 34%, 96%, 100% { fill: rgba(255, 255, 255, 0.18); } 38%, 90% { fill: #f25a1f; } }
@keyframes fh-kCnt { 0%, 52%, 96%, 100% { fill: #9ea2aa; opacity: 0.55; } 60%, 90% { fill: #f25a1f; 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.22); } 62%, 90% { stroke: rgba(242, 90, 31, 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 (ink on paper) ----------------------------------------- */
.family-ms .fd-anim { animation: none 8s ease-in-out infinite both; }
.family-ms .fd-phone > rect:not([class]) { fill: rgba(14, 15, 18, 0.34); }
.family-ms .fd-body { fill: #e9e6dd; stroke: rgba(14, 15, 18, 0.34); stroke-width: 1; }
.family-ms .fd-screen { fill: #15171c; }
.family-ms .fd-notch { fill: #272b33; stroke: rgba(255, 255, 255, 0.12); 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: #f5f3ee; }
.family-ms .fd-tag { fill: rgba(242, 90, 31, 0.16); stroke: #f25a1f; stroke-width: 1; }
.family-ms .fd-chk { fill: #f25a1f; }
.family-ms .fd-wire { fill: none; stroke: rgba(14, 15, 18, 0.34); stroke-width: 1; stroke-dasharray: 2 4; }
.family-ms .fd-halo { opacity: 1; }
.family-ms .fd-vault { fill: #15171c; stroke: rgba(242, 90, 31, 0.85); stroke-width: 1; }
.family-ms .fd-glyph { fill: none; stroke: #f5f3ee; stroke-opacity: 0.7; stroke-width: 1; }
.family-ms .fd-cnt { fill: #f25a1f; }
.family-ms .fd-lbl { fill: #f5f3ee; }
.family-ms .fd-track { fill: rgba(255, 255, 255, 0.16); }
.family-ms .fd-fill { fill: #f25a1f; transform-box: view-box; transform-origin: 236px 0; }
.family-ms .fd-clock rect { fill: #e9e6dd; stroke: rgba(14, 15, 18, 0.34); stroke-width: 1; }
.family-ms .fd-clock circle { fill: none; stroke: #15171b; stroke-width: 1; }
.family-ms .fd-clock path { fill: none; stroke: #15171b; stroke-width: 1.25; stroke-linecap: square; }
.family-ms .fd-clock .fd-hand { stroke: #f25a1f; transform-box: view-box; transform-origin: 280px 332px; }
.family-ms .fd-clock .fd-pin { fill: #f25a1f; 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-a { animation-name: fd-kWireA; } .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; }

/* 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.55; } }
@keyframes fd-kLtrB { 0%, 26%, 94%, 100% { fill: #f5f3ee; } 36%, 84% { fill: #9ea2aa; } }
@keyframes fd-kTagB { 0%, 26%, 94%, 100% { stroke: #f25a1f; fill: rgba(242, 90, 31, 0.16); } 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: #f25a1f; stroke-dashoffset: 0; } 36%, 84% { stroke: rgba(14, 15, 18, 0.2); stroke-dashoffset: 0; } }
@keyframes fd-kWireA { 0% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -48; } }
@keyframes fd-kWireC { 0%, 68% { stroke: rgba(14, 15, 18, 0.34); stroke-dashoffset: 0; } 72% { stroke: #f25a1f; } 88% { stroke-dashoffset: -36; stroke: #f25a1f; } 94%, 100% { stroke-dashoffset: -36; stroke: rgba(14, 15, 18, 0.34); } }
@keyframes fd-kFill { 0%, 30% { transform: scaleX(0); } 70%, 92% { transform: scaleX(1); } 96%, 100% { transform: scaleX(0); } }
@keyframes fd-kCnt { 0%, 30% { fill: #f5f3ee; } 40%, 68% { fill: #9ea2aa; } 74%, 92% { fill: #f25a1f; } 100% { fill: #f5f3ee; } }
@keyframes fd-kHalo { 0%, 68%, 94%, 100% { opacity: 0; } 76%, 90% { opacity: 1; } }
@keyframes fd-kVault { 0%, 68%, 94%, 100% { stroke: rgba(14, 15, 18, 0.34); } 76%, 90% { stroke: rgba(242, 90, 31, 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); } }

/* wire A keeps flowing (base class has the keyframe, override the fill-mode) */
.family-ms .fd-wire-a { animation: fd-kWireA 1.6s linear infinite; stroke: #f25a1f; }

@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; }
}

/* ---- plan grid (3 bordered cells, mono counters, mono badge) ------------ */
.family-ms .family-ms-plan-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px; background: var(--line); border: 1px solid var(--line);
  counter-reset: fplan;
}
.family-ms .family-ms-plan {
  position: relative; display: flex; flex-direction: column;
  padding: 28px 28px 34px; min-height: 380px;
  background: var(--bg); color: var(--fg);
  counter-increment: fplan;
  outline: 1px solid transparent; outline-offset: -1px;
  transition: background 0.35s var(--ease), outline-color 0.35s var(--ease);
}
.family-ms .family-ms-plan::before {
  content: counter(fplan, decimal-leading-zero);
  position: absolute; left: 28px; top: 32px;
  font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.1em; color: var(--muted);
}
.family-ms .family-ms-plan-badge {
  align-self: flex-end;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 10px; border: 1px solid var(--line-strong); border-radius: var(--radius);
  font-family: var(--font-mono); font-size: var(--ms-4); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--fg); margin: 0;
}
.family-ms .family-ms-plan-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.family-ms .family-ms-plan-icon {
  width: 32px; height: 32px; margin: 44px 0 0; color: var(--muted);
  display: grid; place-items: center; background: none; border-radius: 0;
  transition: color 0.3s var(--ease);
}
.family-ms .family-ms-plan-icon svg { width: 32px; height: 32px; }
.family-ms .family-ms-plan h3 { margin: 22px 0 0; font-size: 1.5rem; letter-spacing: -0.025em; line-height: 1.12; }
.family-ms .family-ms-plan p { margin: 14px 0 0; color: var(--muted); font-size: 0.96rem; line-height: 1.6; }
.family-ms .family-ms-plan strong {
  display: block; margin-top: auto; padding: 18px 0 0 14px; position: relative;
  font-size: 0.9rem; font-weight: 600; line-height: 1.5; color: var(--fg);
}
.family-ms .family-ms-plan strong::before { content: ""; position: absolute; left: 0; top: 22px; bottom: 2px; width: 2px; background: var(--accent); }
.family-ms .family-ms-plan:hover { background: var(--bg-2); outline-color: var(--line-strong); z-index: 1; }
.family-ms .t-paper .family-ms-plan:hover { background: #ffffff; }
.family-ms .family-ms-plan:hover .family-ms-plan-icon { color: var(--accent-ink); }

/* ---- accident-protection flow (numbered rows in split copy) ----------- */
.family-ms .family-ms-flow { margin-top: 36px; border-top: 1px solid var(--line); }
.family-ms .family-ms-flow-card {
  display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 6px 14px;
  padding: 20px 0; border-bottom: 1px solid var(--line);
  transition: padding-left 0.3s var(--ease);
}
.family-ms .family-ms-flow-num {
  grid-row: 1 / span 2; align-self: start; padding-top: 5px;
  font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.08em; color: var(--accent-ink);
  width: auto; height: auto; background: none; border-radius: 0; display: block; margin: 0;
}
.family-ms .family-ms-flow-num::before { content: "0"; }
.family-ms .family-ms-flow-card h3 { margin: 0; font-size: 1.12rem; font-weight: 600; letter-spacing: -0.01em; }
.family-ms .family-ms-flow-card p { margin: 0; grid-column: 2; color: var(--muted); font-size: 0.95rem; line-height: 1.6; }
.family-ms .family-ms-flow-card:hover { padding-left: 6px; }

/* ---- chain wall (compact mono chip grid) -------------------------------- */
.family-ms .family-ms-chain-wall {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 1px; background: var(--line); border: 1px solid var(--line);
  margin-top: 0;
}
.family-ms .family-ms-chain {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 56px; padding: 0 12px;
  background: var(--bg); color: var(--fg);
  font-family: var(--font-mono); font-size: 0.74rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  border: 0; border-radius: 0;
  transition: background 0.3s var(--ease), color 0.3s var(--ease);
}
.family-ms .family-ms-chain::before { content: ""; width: 6px; height: 6px; border-radius: 50%; border: 1px solid var(--muted); transition: background 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease); }
.family-ms .family-ms-chain:hover { background: var(--bg-2); color: var(--accent-ink); }
.family-ms .family-ms-chain:hover::before { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 10px var(--accent-glow); }

/* ---- security practices (3 bordered cells with icon + counter) --------- */
.family-ms .family-ms-practice {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px; background: var(--line); border: 1px solid var(--line);
  counter-reset: fprac;
}
.family-ms .family-ms-practice-card {
  position: relative; display: flex; flex-direction: column;
  padding: 28px 26px 30px; min-height: 250px;
  background: var(--bg); color: var(--fg);
  counter-increment: fprac;
  outline: 1px solid transparent; outline-offset: -1px;
  transition: background 0.35s var(--ease), outline-color 0.35s var(--ease);
}
.family-ms .family-ms-practice-card::before {
  content: counter(fprac, decimal-leading-zero);
  font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.1em; color: var(--muted);
}
.family-ms .family-ms-practice-card .card-icon {
  position: absolute; top: 26px; right: 24px; width: 26px; height: 26px; margin: 0;
  background: none; border: 0; border-radius: 0; color: var(--muted);
  transition: color 0.3s var(--ease);
}
.family-ms .family-ms-practice-card .card-icon svg { width: 100%; height: 100%; }
.family-ms .family-ms-practice-card h3 { margin: 48px 0 0; font-size: 1.35rem; letter-spacing: -0.02em; }
.family-ms .family-ms-practice-card p { margin: 12px 0 0; color: var(--muted); font-size: 0.95rem; line-height: 1.6; }
.family-ms .family-ms-practice-card:hover { background: var(--bg-2); outline-color: var(--line-strong); z-index: 1; }
.family-ms .family-ms-practice-card:hover .card-icon { color: var(--accent-ink); }

/* ---- scroll reveal parity with core card grids ------------------------ */
@supports (animation-timeline: view()) and (animation-range: entry 0% entry 32%) {
  .family-ms .family-ms-plan, .family-ms .family-ms-practice-card, .family-ms .family-ms-flow-card {
    animation: v2-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) { animation-range: entry 6% entry 38%; }
  .family-ms .family-ms-plan:nth-child(3), .family-ms .family-ms-practice-card:nth-child(3) { animation-range: entry 12% entry 44%; }
}

/* ---- responsive --------------------------------------------------------- */
@media (max-width: 1100px) {
  .family-ms .family-ms-plan h3 { font-size: 1.35rem; }
}
@media (max-width: 960px) {
  .family-ms .family-ms-plan-grid, .family-ms .family-ms-practice { grid-template-columns: minmax(0, 1fr); }
  .family-ms .family-ms-plan { min-height: 0; padding: 26px 24px 30px; }
  .family-ms .family-ms-plan-icon { margin-top: 36px; }
  .family-ms .family-ms-practice-card { min-height: 0; padding: 24px 22px 26px; }
  .family-ms .family-ms-practice-card h3 { margin-top: 40px; }
  .family-ms .family-ms-chain-wall { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .family-ms .family-ms-chain-wall { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .family-ms .family-ms-chain { min-height: 48px; font-size: 0.68rem; }
  .family-ms .family-ms-plan { padding: 22px 18px 26px; }
  .family-ms .family-ms-plan::before { left: 18px; top: 26px; }
  .family-ms .family-ms-plan h3 { font-size: 1.3rem; }
}

/* ===== 52-enterprise.css ===== */
/* ==========================================================================
   52 — Enterprise MultiSig page (/<lang>/enterprise-multisig/)
   Bespoke parts only: the two inline `.ent-art` SVG compositions (roles /
   approval) and the `.msc` web-console mock. Everything else on the page
   leans on 10-pages.css (page-hero, summary grid, info-grid icon cards,
   split-section + workflow-visual, page-cta).
   ========================================================================== */

/* ---- feature highlights: 5 icon cards, no orphan cells ----------------- */
@media (min-width: 1100px) {
  body[data-route-type="enterprise"] .container > .info-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  body[data-route-type="enterprise"] .container > .info-grid > .info-card { padding: 26px 22px 28px; }
  body[data-route-type="enterprise"] .container > .info-grid > .info-card h3 { font-size: 1.22rem; }
}
@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; }
}

/* ==========================================================================
   .ent-art — inline SVG art (roles in the ink hero, approvals on paper)
   All colours come from the section's theme tokens so the same rules draw
   the dark and the ink-on-paper variant.
   ========================================================================== */
.ent-art { position: relative; width: 100%; }
.ent-art .ea-svg { width: 100%; height: auto; display: block; overflow: visible; }
.ent-art { --ea-card: var(--bg-3); --ea-card-line: var(--line-strong); --ea-vault: var(--ink-3); --ea-vault-line: var(--ink-line-strong); --ea-tick-bg: var(--ink-2); }
.t-paper .ent-art, .t-beige .ent-art { --ea-card: #fbfaf7; --ea-card-line: var(--paper-line-strong); --ea-vault: #15171c; --ea-vault-line: #15171c; --ea-tick-bg: #fbfaf7; }

.ent-art .ea-mono { font-family: var(--font-mono); }
.ent-art .ea-sans { font-family: var(--font-display); }

/* texture */
.ent-art .ea-gridp { fill: none; stroke: var(--fg); stroke-opacity: 0.055; stroke-width: 1; }
.ent-art .ea-ticks { fill: none; stroke: var(--fg); stroke-opacity: 0.4; stroke-width: 1; }
.ent-art .ea-cross { stroke-opacity: 0.3; }
.ent-art .ea-glow { opacity: 0.9; }
.t-paper .ent-art .ea-glow, .t-beige .ent-art .ea-glow { opacity: 0.55; }

/* connectors */
.ent-art .ea-wire { fill: none; stroke: var(--line-strong); stroke-width: 1; stroke-dasharray: 2 4; }
.ent-art .ea-wire-p { stroke-dasharray: none; stroke: var(--line); }
/* 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; }
.ent-art .ea-vico { fill: none; stroke: var(--t-dark); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; stroke-opacity: 0.85; }
.ent-art .ea-vt { font-size: 13px; font-weight: 600; fill: var(--t-dark); letter-spacing: -0.01em; }
.ent-art .ea-cnt { font-size: 30px; font-weight: 600; fill: var(--accent); letter-spacing: -0.04em; }
.ent-art .ea-dot { fill: var(--accent); }
.ent-art .ea-dot-ring { fill: none; stroke: var(--accent); stroke-width: 1; opacity: 0; transform-box: fill-box; transform-origin: center; }
.ent-art .ea-seg { fill: rgba(255, 255, 255, 0.18); }
.ent-art .ea-seg-1 { fill: var(--accent); }
.ent-art .ea-roles .ea-seg-2 { fill: rgba(245, 243, 238, 0.55); }
.ent-art .ea-seg-on { fill: var(--accent); }

/* node cards */
.ent-art .ea-card { fill: var(--ea-card); stroke: var(--ea-card-line); stroke-width: 1; }
.ent-art .ea-num { font-size: 9px; letter-spacing: 0.1em; fill: var(--muted); }
.ent-art .ea-face { fill: transparent; stroke: var(--line-strong); stroke-width: 1; }
.ent-art .ea-ltr { font-size: 13px; font-weight: 600; fill: var(--muted); letter-spacing: 0.02em; }
.ent-art .ea-lbl { font-size: 12px; font-weight: 500; fill: var(--fg); letter-spacing: -0.005em; }
.ent-art .ea-on .ea-face, .ent-art .ea-ok .ea-face { stroke: var(--accent); fill: rgba(242, 90, 31, 0.12); }
.ent-art .ea-on .ea-ltr, .ent-art .ea-ok .ea-ltr { fill: var(--accent); }
.ent-art .ea-pend .ea-ltr { fill: var(--muted); }
.ent-art .ea-pend .ea-lbl { fill: var(--muted); }
.ent-art .ea-pend .ea-face { stroke-dasharray: 2 3; }

/* approval tick badge */
.ent-art .ea-tick circle { fill: var(--ea-tick-bg); stroke: var(--accent); stroke-width: 1; }
.ent-art .ea-tick-t { font-size: 10px; font-weight: 600; fill: var(--accent); }
.ent-art .ea-tick { transform-box: fill-box; transform-origin: center; }

/* badge pill */
.ent-art .ea-badge rect { fill: var(--ea-card); stroke: var(--ea-card-line); stroke-width: 1; }
.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: 10.5px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; fill: var(--fg); }

/* ---- motion: roles (highlight cycles O → S → SA, dashes flow to 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(--accent); fill: rgba(242, 90, 31, 0.12); } 33%, 94% { stroke: var(--line-strong); fill: transparent; } 100% { stroke: var(--accent); fill: rgba(242, 90, 31, 0.12); } }
@keyframes ea-ltr-a  { 0%, 28% { fill: var(--accent); } 33%, 94% { fill: var(--muted); } 100% { fill: var(--accent); } }
@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: transparent; } 33%, 61% { stroke: var(--accent); fill: rgba(242, 90, 31, 0.12); } }
@keyframes ea-ltr-b  { 0%, 28%, 66%, 100% { fill: var(--muted); } 33%, 61% { fill: var(--accent); } }
@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: transparent; } 66%, 94% { stroke: var(--accent); fill: rgba(242, 90, 31, 0.12); } }
@keyframes ea-ltr-c  { 0%, 61%, 99%, 100% { fill: var(--muted); } 66%, 94% { fill: var(--accent); } }
@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(--accent); } 33%, 94% { fill: rgba(255, 255, 255, 0.18); } 100% { fill: var(--accent); } }
@keyframes ea-seg-b { 0%, 28%, 66%, 100% { fill: rgba(255, 255, 255, 0.18); } 33%, 61% { fill: var(--accent); } }
@keyframes ea-seg-c { 0%, 61%, 99%, 100% { fill: rgba(255, 255, 255, 0.18); } 66%, 94% { fill: var(--accent); } }
@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: transparent; } 12%, 93% { stroke: var(--accent); fill: rgba(242, 90, 31, 0.12); } }
@keyframes ea-ok-ltr-a  { 0%, 8%, 97%, 100% { fill: var(--muted); } 12%, 93% { fill: var(--accent); } }
@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: transparent; } 36%, 93% { stroke: var(--accent); fill: rgba(242, 90, 31, 0.12); } }
@keyframes ea-ok-ltr-b  { 0%, 32%, 97%, 100% { fill: var(--muted); } 36%, 93% { fill: var(--accent); } }
@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: rgba(255, 255, 255, 0.18); } 18%, 93% { fill: var(--accent); } }
@keyframes ea-ok-seg-2 { 0%, 38%, 97%, 100% { fill: rgba(255, 255, 255, 0.18); } 42%, 93% { fill: var(--accent); } }
@keyframes ea-ok-cnt  { 0%, 54%, 97%, 100% { fill: var(--m-dark); opacity: 0.6; } 60%, 93% { fill: var(--accent); opacity: 1; } }
@keyframes ea-ok-thr  { 0%, 54%, 97%, 100% { opacity: 0.35; } 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(--accent); } }
@keyframes ea-pend { 0%, 100% { stroke-opacity: 1; } 50% { stroke-opacity: 0.35; } }

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

/* ==========================================================================
   .msc — MultiSig web console mock (ink window on paper)
   ========================================================================== */
.msc-wrap { --msc-ink: var(--ink-2); --msc-ink-raised: var(--ink-3); --msc-line: var(--ink-line); --msc-line-strong: var(--ink-line-strong); --msc-t: var(--t-dark); --msc-m: var(--m-dark); }
.msc {
  position: relative;
  margin-top: 8px;
  border: 1px solid var(--paper-line-strong);
  border-radius: var(--radius-lg);
  background: var(--msc-ink);
  color: var(--msc-t);
  overflow: hidden;
}
.t-ink .msc { border-color: var(--ink-line-strong); }
.msc-bar { display: flex; align-items: center; gap: 7px; padding: 13px 18px; background: var(--msc-ink-raised); border-bottom: 1px solid var(--msc-line); }
.msc-bar i { width: 9px; height: 9px; border-radius: 50%; display: block; border: 1px solid var(--msc-line-strong); }
.msc-bar i:nth-child(1) { border-color: var(--accent); background: var(--accent); box-shadow: 0 0 10px var(--accent-glow); }
.msc-bar span { margin-left: 12px; font-family: var(--font-mono); font-size: var(--ms-6); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--msc-m); }
.msc-body { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
.msc-side { padding: 22px 22px 18px; border-right: 1px solid var(--msc-line); }
.msc .k { font-family: var(--font-mono); font-size: var(--ms-4); font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--msc-m); }
.msc .k + .k, .msc-total + .k { margin-top: 22px; margin-bottom: 10px; }
.msc-total { font-family: var(--font-display); font-size: clamp(1.8rem, 2.4vw, 2.3rem); font-weight: 600; letter-spacing: -0.04em; line-height: 1; color: var(--msc-t); margin-top: 10px; }
.msc-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 12px; border-top: 1px solid var(--msc-line);
  border-left: 2px solid transparent;
  transition: background 0.3s var(--ease);
}
.msc-row:last-child { border-bottom: 1px solid var(--msc-line); }
.msc-row.on { border-left-color: var(--accent); background: rgba(242, 90, 31, 0.08); }
.msc-row > span { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.msc-row b { font-family: var(--font-mono); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.02em; color: var(--msc-t); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msc-row em { font-family: var(--font-mono); font-style: normal; font-size: var(--ms-3); letter-spacing: 0.1em; text-transform: uppercase; color: var(--msc-m); display: inline-flex; align-items: center; gap: 8px; flex: none; }
.msc-row em::before { content: ""; width: 5px; height: 5px; border-radius: 50%; border: 1px solid currentColor; }
.msc-row.on em { color: var(--accent); }
.msc-row.on em::before { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 8px var(--accent-glow); }
.msc .pill { font-family: var(--font-mono); font-size: 0.62rem; font-weight: 500; letter-spacing: 0.08em; padding: 2px 6px; border: 1px solid var(--msc-line-strong); border-radius: 3px; color: var(--msc-m); flex: none; }
.msc-row.on .pill { color: var(--msc-t); }
.msc-main { padding: 22px 22px 18px; }
.msc-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 18px; }
.msc-tag { font-family: var(--font-mono); font-size: var(--ms-2); font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; padding: 5px 8px; border: 1px solid var(--msc-line-strong); border-radius: 3px; color: var(--msc-t); display: inline-flex; align-items: center; gap: 8px; }
.msc-tag:first-child::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent-glow); }
.msc-part { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-top: 1px solid var(--msc-line); }
.msc-part:last-child { border-bottom: 1px solid var(--msc-line); }
.msc-part b { font-family: var(--font-mono); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.02em; color: var(--msc-t); }
.msc-roles { display: flex; gap: 5px; flex-wrap: wrap; justify-content: flex-end; }
.msc-role { font-family: var(--font-mono); font-size: var(--ms-1); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; padding: 3px 7px; border: 1px solid var(--msc-line-strong); border-radius: 3px; color: var(--msc-m); white-space: nowrap; }
.msc-role.s { color: var(--accent); border-color: rgba(242, 90, 31, 0.6); }
.msc-role.o { color: var(--msc-t); border-color: var(--msc-line-strong); }
.msc-role.a { color: var(--msc-m); border-color: var(--msc-line); }
.msc-part:hover .msc-role.s { background: rgba(242, 90, 31, 0.1); }

@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-side, .msc-main { padding: 18px 16px 14px; }
  .msc-part { flex-direction: column; align-items: flex-start; gap: 8px; }
  .msc-roles { justify-content: flex-start; }
}

/* ===== 53-inheritance.css ===== */
/* ==========================================================================
   53 — Bitcoin inheritance pillar page (main.inherit-ms)
   Bespoke blocks only; generic parts (page-hero, page-summary-grid,
   section-heading, split-section, page-cta, FAQ details) come from 10-pages.
   Illustrations are inline SVG: prefixes ih- (hero, ink) / is- (split, paper).
   ========================================================================== */

/* ---- illustration slots ------------------------------------------------ */
.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 { font-family: var(--font-mono); }
.inherit-ms .ih-sans, .inherit-ms .is-sans { font-family: var(--font-display); }
.inherit-ms .ih-lbl, .inherit-ms .is-lbl { font-size: 10.5px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; }

/* hero (ink) */
.inherit-ms .ih-halo { opacity: 0.75; }
.inherit-ms .ih-wire { fill: none; stroke: rgba(255, 255, 255, 0.22); stroke-width: 1; stroke-dasharray: 2 4; }
.inherit-ms .ih-wire-you { stroke: #f25a1f; }
.inherit-ms .ih-vault { fill: #1e2128; stroke: rgba(242, 90, 31, 0.85); stroke-width: 1; }
.inherit-ms .ih-inf { fill: #f25a1f; font-size: 48px; font-weight: 500; }
.inherit-ms .ih-vname { fill: #f5f3ee; font-size: 13px; font-weight: 600; letter-spacing: -0.01em; }
.inherit-ms .ih-seg { fill: rgba(255, 255, 255, 0.18); }
.inherit-ms .ih-seg-on { fill: #f25a1f; }
.inherit-ms .ih-tile { fill: #15171c; stroke: rgba(255, 255, 255, 0.22); stroke-width: 1; }
.inherit-ms .ih-node-you .ih-tile { stroke: #f25a1f; fill: rgba(242, 90, 31, 0.12); }
.inherit-ms .ih-ltr { fill: #9ea2aa; font-size: 15px; font-weight: 600; }
.inherit-ms .ih-node-you .ih-ltr { fill: #f25a1f; }
.inherit-ms .ih-lbl { fill: #9ea2aa; }
.inherit-ms .ih-node-you .ih-lbl { fill: #f5f3ee; }
.inherit-ms .ih-chk circle { fill: #0e0f12; stroke: #f25a1f; stroke-width: 1; }
.inherit-ms .ih-chk path { fill: none; stroke: #f25a1f; stroke-width: 1.25; stroke-linecap: square; stroke-dasharray: 14; stroke-dashoffset: 0; }
.inherit-ms .ih-ring { fill: none; stroke: #f25a1f; stroke-width: 1; opacity: 0; transform-box: fill-box; transform-origin: center; }
.inherit-ms .ih-chip { fill: #1e2128; stroke: rgba(255, 255, 255, 0.22); stroke-width: 1; }
.inherit-ms .ih-track { fill: none; stroke: rgba(255, 255, 255, 0.18); stroke-width: 1.5; }
.inherit-ms .ih-timer { fill: none; stroke: #f25a1f; stroke-width: 1.5; stroke-linecap: butt; stroke-dasharray: 62.83; stroke-dashoffset: 15.7; }
.inherit-ms .ih-clk-txt { fill: #f5f3ee; }
.inherit-ms .ih-ticks { fill: none; stroke: #ffffff; stroke-opacity: 0.35; stroke-width: 1; }
.inherit-ms .ih-lock { fill: none; stroke: #f5f3ee; stroke-opacity: 0.7; stroke-width: 1; }

/* split (ink on paper) */
.inherit-ms .is-wire { fill: none; stroke: rgba(14, 15, 18, 0.34); stroke-width: 1; stroke-dasharray: 2 4; }
.inherit-ms .is-wire-you { stroke: #c9440f; }
.inherit-ms .is-vault { fill: #15171b; stroke: #15171b; stroke-width: 1; }
.inherit-ms .is-cnt { fill: #f25a1f; font-size: 34px; font-weight: 500; }
.inherit-ms .is-vname { fill: #f5f3ee; font-size: 13px; font-weight: 600; letter-spacing: -0.01em; }
.inherit-ms .is-seg { fill: rgba(255, 255, 255, 0.2); }
.inherit-ms .is-seg-on { fill: #f25a1f; }
.inherit-ms .is-tile { fill: #e9e6dd; stroke: rgba(14, 15, 18, 0.34); stroke-width: 1; }
.inherit-ms .is-node-you .is-tile { stroke: #c9440f; fill: rgba(242, 90, 31, 0.1); }
.inherit-ms .is-ltr { fill: #5f626a; font-size: 15px; font-weight: 600; }
.inherit-ms .is-node-you .is-ltr { fill: #c9440f; }
.inherit-ms .is-lbl { fill: #5f626a; }
.inherit-ms .is-node-you .is-lbl { fill: #15171b; }
.inherit-ms .is-chk circle { fill: #f3f1ec; stroke: #c9440f; stroke-width: 1; }
.inherit-ms .is-chk path { fill: none; stroke: #c9440f; stroke-width: 1.25; stroke-linecap: square; stroke-dasharray: 14; stroke-dashoffset: 0; }
.inherit-ms .is-ring { fill: none; stroke: #c9440f; stroke-width: 1; opacity: 0; transform-box: fill-box; transform-origin: center; }
.inherit-ms .is-chip { fill: #f3f1ec; stroke: rgba(14, 15, 18, 0.34); stroke-width: 1; }
.inherit-ms .is-track { fill: none; stroke: rgba(14, 15, 18, 0.18); stroke-width: 1.5; }
.inherit-ms .is-timer { fill: none; stroke: #c9440f; stroke-width: 1.5; stroke-dasharray: 62.83; stroke-dashoffset: 15.7; }
.inherit-ms .is-clk-txt { fill: #15171b; }
.inherit-ms .is-ticks { fill: none; stroke: #15171b; stroke-opacity: 0.5; stroke-width: 1; }
.inherit-ms .is-lock { fill: none; stroke: #f5f3ee; stroke-opacity: 0.75; stroke-width: 1; }
.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: -48; } }
@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.22); fill: #15171c; } 86%, 94% { stroke: #f25a1f; fill: rgba(242, 90, 31, 0.12); } }
@keyframes inh-heir-ltr { 0%, 82%, 97%, 100% { fill: #9ea2aa; } 86%, 94% { fill: #f25a1f; } }
@keyframes inh-heir-wire { 0%, 82%, 97%, 100% { stroke: rgba(255, 255, 255, 0.22); } 86%, 94% { stroke: #f25a1f; } }
@keyframes inh-heir-tile-p { 0%, 82%, 97%, 100% { stroke: rgba(14, 15, 18, 0.34); fill: #e9e6dd; } 86%, 94% { stroke: #c9440f; fill: rgba(242, 90, 31, 0.1); } }
@keyframes inh-heir-ltr-p { 0%, 82%, 97%, 100% { fill: #5f626a; } 86%, 94% { fill: #c9440f; } }
@keyframes inh-heir-wire-p { 0%, 82%, 97%, 100% { stroke: rgba(14, 15, 18, 0.34); } 86%, 94% { stroke: #c9440f; } }
@keyframes inh-seg { 0%, 82%, 97%, 100% { fill: rgba(255, 255, 255, 0.18); } 86%, 94% { fill: #f25a1f; } }
@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 bordered-grid cells (pain / practice / plans) -------------- */
.inherit-ms-pain, .inherit-ms-practice, .inherit-ms-plan-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px; background: var(--line); border: 1px solid var(--line);
  counter-reset: card;
}
.inherit-ms-pain-card, .inherit-ms-practice-card, .inherit-ms-plan {
  position: relative; display: flex; flex-direction: column;
  background: var(--bg); color: var(--fg);
  padding: 28px 26px 30px; min-height: 250px;
  counter-increment: card;
  outline: 1px solid transparent; outline-offset: -1px;
  transition: background 0.35s var(--ease), outline-color 0.35s var(--ease);
}
.inherit-ms-pain-card::before, .inherit-ms-practice-card::before, .inherit-ms-plan::before {
  content: counter(card, decimal-leading-zero);
  font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.1em; color: var(--muted); line-height: 1;
}
.inherit-ms-pain-card .card-icon, .inherit-ms-practice-card .card-icon, .inherit-ms-plan-icon {
  position: absolute; top: 26px; right: 24px; width: 26px; height: 26px; color: var(--muted);
  display: block; margin: 0; padding: 0; background: none; border: 0; border-radius: 0;
  transition: 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: 100%; height: 100%; display: block; }
.inherit-ms-pain-card h3, .inherit-ms-practice-card h3 { margin-top: 48px; font-size: 1.35rem; letter-spacing: -0.02em; line-height: 1.12; }
.inherit-ms-pain-card p, .inherit-ms-practice-card p { margin-top: 12px; color: var(--muted); font-size: 0.95rem; line-height: 1.6; }
.inherit-ms-pain-card:hover, .inherit-ms-practice-card:hover, .inherit-ms-plan:hover { background: var(--bg-2); outline-color: var(--line-strong); z-index: 1; }
.inherit-ms-pain-card:hover .card-icon, .inherit-ms-practice-card:hover .card-icon, .inherit-ms-plan:hover .inherit-ms-plan-icon { color: var(--accent); }

/* ---- plans: mono badge + numbered cell + "best for" foot --------------- */
.inherit-ms-plan { padding-bottom: 28px; }
.inherit-ms-plan-badge {
  display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
  margin-top: 40px; padding: 6px 10px;
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  font-family: var(--font-mono); font-size: var(--ms-4); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--fg); background: transparent;
}
.inherit-ms-plan-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex: none; }
.inherit-ms-plan h3 { margin-top: 22px; font-size: 1.35rem; letter-spacing: -0.02em; line-height: 1.15; max-width: 22ch; }
.inherit-ms-plan p { margin-top: 14px; color: var(--muted); font-size: 0.93rem; line-height: 1.62; }
.inherit-ms-plan strong {
  display: block; margin-top: auto; padding-top: 18px; position: relative; top: 20px;
  border-top: 1px solid var(--line);
  font-family: var(--font-body); font-weight: 600; font-size: 0.9rem; line-height: 1.5; color: var(--fg);
}

/* ---- how it works: numbered rows inside the split copy ---------------- */
.inherit-ms-steps { margin-top: 36px; border-top: 1px solid var(--line); }
.inherit-ms-step {
  display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 8px 14px;
  padding: 22px 0; border-bottom: 1px solid var(--line);
  transition: padding-left 0.3s var(--ease);
}
.inherit-ms-step:hover { padding-left: 6px; }
.inherit-ms-step-num {
  grid-row: 1 / span 2; padding-top: 5px;
  font-family: var(--font-mono); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.08em; color: var(--accent-ink); line-height: 1;
  width: auto; height: auto; background: none; border-radius: 0; display: block; margin: 0;
}
.inherit-ms-step-num::before { content: "0"; }
.inherit-ms-step h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.12rem; letter-spacing: -0.01em; line-height: 1.2; color: var(--fg); }
.inherit-ms-step p { grid-column: 2; color: var(--muted); font-size: 0.95rem; line-height: 1.6; }

/* ---- chain wall: compact mono chip grid -------------------------------- */
.inherit-ms-chain-wall {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 1px; background: var(--line); border: 1px solid var(--line);
  max-width: 960px;
}
.inherit-ms-chain {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 56px; padding: 12px 10px; background: var(--bg); color: var(--fg);
  font-family: var(--font-mono); font-size: 0.74rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  transition: background 0.3s var(--ease), color 0.3s var(--ease);
}
.inherit-ms-chain::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--line-strong); flex: none; transition: background 0.3s var(--ease); }
.inherit-ms-chain:first-child::before { background: var(--accent); box-shadow: 0 0 10px var(--accent-glow); }
.inherit-ms-chain:hover { background: var(--bg-2); }
.inherit-ms-chain:hover::before { background: var(--accent); }

/* ---- FAQ: generic details styling lives in 10-pages; only spacing here -- */
.inherit-ms-faq { max-width: 900px; }

/* ---- responsive -------------------------------------------------------- */
@media (max-width: 1100px) {
  .inherit-ms-plan-grid { grid-template-columns: minmax(0, 1fr); }
  .inherit-ms-plan { min-height: 0; }
  .inherit-ms-plan h3 { max-width: none; }
  .inherit-ms-chain-wall { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .inherit-ms-pain, .inherit-ms-practice { grid-template-columns: minmax(0, 1fr); }
  .inherit-ms-pain-card, .inherit-ms-practice-card { min-height: 0; }
}
@media (max-width: 640px) {
  .inherit-ms-pain-card, .inherit-ms-practice-card, .inherit-ms-plan { padding: 24px 20px 26px; }
  .inherit-ms-pain-card h3, .inherit-ms-practice-card h3 { margin-top: 40px; }
  .inherit-ms-chain-wall { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .inherit-ms-chain { min-height: 48px; font-size: 0.7rem; }
}

/* ===== 60-legal-redirect.css ===== */
/* ==========================================================================
   60 — Legal pages (privacy / terms) + root redirect stubs + 404
   ========================================================================== */

/* legal */
.policy-hero { padding-bottom: clamp(40px, 5vw, 64px); }
.policy-shell { max-width: 960px; }
.policy-card h1 { margin: 20px 0 16px; font-size: clamp(2.4rem, 4.6vw, 4rem); line-height: 1; letter-spacing: -0.035em; }
.policy-card > p { font-size: 1.1rem; color: var(--muted); max-width: 640px; }
.policy-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.policy-toc { position: sticky; top: calc(var(--header-h) + 24px); border-left: 1px solid var(--line); padding-left: 18px; }
.policy-toc nav { display: flex; flex-direction: column; margin-top: 14px; }
.policy-toc nav a { position: relative; padding: 6px 0; font-size: 0.88rem; line-height: 1.4; color: var(--muted); transition: color 0.25s var(--ease); }
.policy-toc nav a::before { content: ""; position: absolute; left: -19px; top: 6px; bottom: 6px; width: 1px; background: var(--accent); transform: scaleY(0); transition: transform 0.3s var(--ease); }
.policy-toc nav a:hover { color: var(--fg); }
.policy-toc nav a:hover::before { transform: scaleY(1); }
.policy-content { max-width: 780px; }
.policy-section { padding: clamp(26px, 3vw, 36px) 0; border-top: 1px solid var(--line); counter-increment: pol; scroll-margin-top: calc(var(--header-h) + 24px); }
.policy-content { counter-reset: pol; }
.policy-section:first-child { border-top: 0; padding-top: 0; }
.policy-section h2 { margin: 0 0 14px; font-size: clamp(1.35rem, 2vw, 1.7rem); letter-spacing: -0.02em; line-height: 1.15; }
.policy-text, .policy-text p, .policy-text li { color: var(--prose); font-size: 1rem; line-height: 1.72; }
.policy-text > p { margin: 12px 0 0; }
.policy-text > p:first-child { margin-top: 0; }
.policy-text ul { margin: 12px 0 0; padding: 0; list-style: none; }
.policy-text li { position: relative; padding-left: 24px; margin-bottom: 8px; }
.policy-text li::before { content: ""; position: absolute; left: 0; top: 0.72em; width: 10px; height: 1px; background: var(--accent-ink); }
.policy-text a { color: var(--fg); border-bottom: 1px solid var(--line-strong); transition: border-color 0.25s var(--ease); }
.policy-text a:hover { border-bottom-color: var(--accent); }
.policy-text strong { color: var(--fg); font-weight: 600; }

/* redirect stubs + 404 */
.redirect-shell { min-height: 100vh; min-height: 100svh; display: grid; place-items: center; padding: 24px; background: var(--ink); color: var(--t-dark); position: relative; overflow: clip; isolation: isolate; }
.redirect-shell::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(40% 45% at 50% 45%, rgba(242, 90, 31, 0.14), transparent 70%),
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px) 0 0 / 100% 96px,
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px) 0 0 / 96px 100%;
  -webkit-mask-image: radial-gradient(ellipse at 50% 45%, #000 20%, transparent 80%);
          mask-image: radial-gradient(ellipse at 50% 45%, #000 20%, transparent 80%);
}
.redirect-card { position: relative; width: min(520px, 100%); padding: 44px 36px 40px; text-align: center; border: 1px solid var(--ink-line-strong); background: rgba(21, 23, 28, 0.9); border-radius: var(--radius-lg); }
.redirect-card::before, .redirect-card::after { content: ""; position: absolute; width: 14px; height: 14px; border-color: var(--ink-line-strong); border-style: solid; }
.redirect-card::before { top: 10px; left: 10px; border-width: 1px 0 0 1px; }
.redirect-card::after { bottom: 10px; right: 10px; border-width: 0 1px 1px 0; }
.redirect-card img { margin: 0 auto 22px; height: 25px; width: auto; }
.redirect-card h1 { font-size: 1.9rem; letter-spacing: -0.025em; }
.redirect-card p { margin-top: 12px; color: var(--m-dark); font-size: 0.98rem; }
body[data-route-type="redirect"] .redirect-card p { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 10px; }
body[data-route-type="redirect"] .redirect-card p::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0 var(--accent-glow); animation: v2-dot 1.6s ease-out infinite; }
.redirect-card .hero-actions { justify-content: center; margin-top: 26px; }
.redirect-card .btn-console { display: none; }
.redirect-card .btn-primary::after { display: none; }

@media (max-width: 1024px) {
  .policy-layout { grid-template-columns: minmax(0, 1fr); }
  .policy-toc { position: relative; top: auto; }
  .policy-toc nav { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 2px 24px; }
  .policy-toc nav a::before { display: none; }
}

/* ===== 70-i18n.css ===== */
/* ==========================================================================
   70 — Locale typography
   The v2 type system is built on Instrument Sans / Manrope / JetBrains Mono, which
   carry no CJK or Thai glyphs. Rather than let each browser pick an arbitrary
   fallback, every non-Latin locale re-points the SAME tokens at a curated system
   stack, so all v2 components inherit correct type without any component changes.
   ========================================================================== */

/* ---- Simplified Chinese ------------------------------------------------- */
[lang^="zh-Hans"], [lang="zh"], [lang="zh-CN"] {
  --font-display: "Instrument Sans", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
                  "Noto Sans SC", -apple-system, "Helvetica Neue", sans-serif;
  --font-body: "Manrope", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
               "Noto Sans SC", -apple-system, "Helvetica Neue", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, "PingFang SC",
               "Microsoft YaHei", monospace;
}

/* ---- Traditional Chinese ------------------------------------------------ */
[lang^="zh-Hant"], [lang="zh-tw"], [lang="zh-TW"] {
  --font-display: "Instrument Sans", "PingFang TC", "Hiragino Sans CNS", "Microsoft JhengHei",
                  "Noto Sans TC", -apple-system, "Helvetica Neue", sans-serif;
  --font-body: "Manrope", "PingFang TC", "Hiragino Sans CNS", "Microsoft JhengHei",
               "Noto Sans TC", -apple-system, "Helvetica Neue", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, "PingFang TC",
               "Microsoft JhengHei", monospace;
}

/* ---- Japanese ----------------------------------------------------------- */
[lang="ja"] {
  --font-display: "Instrument Sans", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic",
                  "Noto Sans JP", Meiryo, -apple-system, sans-serif;
  --font-body: "Manrope", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic",
               "Noto Sans JP", Meiryo, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, "Hiragino Sans", Meiryo, monospace;
}

/* ---- Korean ------------------------------------------------------------- */
[lang="ko"] {
  --font-display: "Instrument Sans", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR",
                  -apple-system, sans-serif;
  --font-body: "Manrope", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR",
               -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, "Apple SD Gothic Neo", monospace;
}

/* ---- Russian ------------------------------------------------------------
   Instrument Sans ships Latin/Latin-ext/Vietnamese only, so a Cyrillic heading fell
   back mid-line (Latin words in one face, Cyrillic in another). Manrope is already
   loaded and covers Cyrillic, so it leads the display stack here. */
[lang="ru"] {
  --font-display: "Manrope", "Instrument Sans", -apple-system, "Helvetica Neue", Arial, sans-serif;
}

/* ---- Thai --------------------------------------------------------------- */
[lang="th"] {
  --font-display: "Instrument Sans", "Thonburi", "Leelawadee UI", "Noto Sans Thai",
                  -apple-system, sans-serif;
  --font-body: "Manrope", "Thonburi", "Leelawadee UI", "Noto Sans Thai",
               -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, "Thonburi", monospace;
}

/* ==========================================================================
   Emphasis without synthetic oblique.
   Slanting CJK or Thai glyphs is a fake style the fonts never designed for. These
   scripts mark emphasis with a rule alongside the text, so the italic accent of the
   Latin design becomes the same orange hairline underline instead — same meaning,
   same accent colour, correct typography.
   ========================================================================== */
[lang^="zh"] em, [lang="ja"] em, [lang="ko"] em, [lang="th"] em,
[lang^="zh"] blockquote, [lang="ja"] blockquote, [lang="ko"] blockquote, [lang="th"] blockquote {
  font-style: normal;
}
[lang^="zh"] h1 em, [lang^="zh"] h2 em, [lang^="zh"] h3 em,
[lang="ja"] h1 em, [lang="ja"] h2 em, [lang="ja"] h3 em,
[lang="ko"] h1 em, [lang="ko"] h2 em, [lang="ko"] h3 em,
[lang="th"] h1 em, [lang="th"] h2 em, [lang="th"] h3 em,
[lang^="zh"] .blog-prose em, [lang^="zh"] .doc-body em, [lang^="zh"] .policy-text em,
[lang="ja"] .blog-prose em, [lang="ja"] .doc-body em, [lang="ja"] .policy-text em,
[lang="ko"] .blog-prose em, [lang="ko"] .doc-body em, [lang="ko"] .policy-text em,
[lang="th"] .blog-prose em, [lang="th"] .doc-body em, [lang="th"] .policy-text em {
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.12em;
  text-decoration-skip-ink: none;
}
/* Body-copy emphasis sits in a smaller size — keep the rule proportionally thinner. */
[lang^="zh"] .blog-prose em, [lang^="zh"] .doc-body em, [lang^="zh"] .policy-text em,
[lang="ja"] .blog-prose em, [lang="ja"] .doc-body em, [lang="ja"] .policy-text em,
[lang="ko"] .blog-prose em, [lang="ko"] .doc-body em, [lang="ko"] .policy-text em,
[lang="th"] .blog-prose em, [lang="th"] .doc-body em, [lang="th"] .policy-text em {
  text-decoration-thickness: 1.5px;
}
/* Thai vowels hang below the baseline — the rule needs to clear them. */
[lang="th"] h1 em, [lang="th"] h2 em, [lang="th"] h3 em,
[lang="th"] .blog-prose em, [lang="th"] .doc-body em { text-underline-offset: 0.36em; }

/* Display headings are set at 0.98–1.04 leading for Latin. A CJK/Thai line box that
   tight leaves no room between the emphasis rule and the next line's glyphs, so give
   underlined headings a little more air. */
[lang^="zh"] .hero h1, [lang^="zh"] .page-hero h1, [lang^="zh"] .blog-hero h1,
[lang^="zh"] .section-heading h2, [lang^="zh"] .split-copy h2, [lang^="zh"] .doc-head h1,
[lang="ja"] .hero h1, [lang="ja"] .page-hero h1, [lang="ja"] .blog-hero h1,
[lang="ja"] .section-heading h2, [lang="ja"] .split-copy h2, [lang="ja"] .doc-head h1,
[lang="ko"] .hero h1, [lang="ko"] .page-hero h1, [lang="ko"] .blog-hero h1,
[lang="ko"] .section-heading h2, [lang="ko"] .split-copy h2, [lang="ko"] .doc-head h1,
[lang="th"] .hero h1, [lang="th"] .page-hero h1, [lang="th"] .blog-hero h1,
[lang="th"] .section-heading h2, [lang="th"] .split-copy h2, [lang="th"] .doc-head h1 {
  line-height: 1.3;
}

/* ==========================================================================
   Micro-label tracking: 0.14em is tuned for Latin capitals. CJK glyphs are already
   full-width, so the same tracking reads as loose; Thai must not be tracked at all
   because it breaks cluster shaping.
   ========================================================================== */
:is([lang^="zh"], [lang="ja"], [lang="ko"]) :is(
  .kicker, .eyebrow, .site-nav a, .summary-label, .footer-col-title, .blog-cat,
  .plan-sub, .pil-tag, .asset-legend, .contact-card > span, .stat-card strong,
  .floating-note, .floating-note span, .tag, .who b, .who small, .state,
  .panel-foot, .price-tag span, .page-tag, .chain-chip, .blog-meta, .blog-byline,
  .doc-toc-h, .doc-breadcrumb, .doc-note-h, .doc-rel-h, .doc-updated, .doc-tcap,
  .pricing-table thead th, .doc-table thead th, .ch-name b, .ch-chain,
  .ch-chips span, .ch-modes span, .console-cta-text strong, .blog-filter button
) {
  letter-spacing: 0.06em;
}
/* Thai must not be tracked at all — it breaks cluster shaping. */
[lang="th"] :is(
  .kicker, .eyebrow, .site-nav a, .summary-label, .footer-col-title, .blog-cat,
  .plan-sub, .pil-tag, .asset-legend, .contact-card > span, .stat-card strong,
  .floating-note, .floating-note span, .tag, .who b, .who small, .state,
  .panel-foot, .price-tag span, .page-tag, .chain-chip, .blog-meta, .blog-byline,
  .doc-toc-h, .doc-breadcrumb, .doc-note-h, .doc-rel-h, .doc-updated, .doc-tcap,
  .pricing-table thead th, .doc-table thead th, .ch-name b, .ch-chain,
  .ch-chips span, .ch-modes span, .console-cta-text strong, .blog-filter button
) {
  letter-spacing: 0;
}

/* CJK/Thai lines need a little more leading than Latin at the same size. */
[lang^="zh"] .doc-body p, [lang="ja"] .doc-body p, [lang="ko"] .doc-body p, [lang="th"] .doc-body p,
[lang^="zh"] .blog-prose, [lang="ja"] .blog-prose, [lang="ko"] .blog-prose, [lang="th"] .blog-prose,
[lang^="zh"] .policy-text, [lang="ja"] .policy-text, [lang="ko"] .policy-text, [lang="th"] .policy-text {
  line-height: 1.85;
}

/* Korean must break at word boundaries, never inside a word: the default
   break-anywhere behaviour splits 멀티시그 into 멀 / 티시그. */
[lang="ko"] {
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* Long compounds in German/Russian/Vietnamese can overflow narrow grid cells. */
[lang="de"] .feature-card h3, [lang="de"] .pil-body h3, [lang="de"] .doc-index-card h3,
[lang="ru"] .feature-card h3, [lang="ru"] .pil-body h3, [lang="ru"] .doc-index-card h3,
[lang="de"] .coin-body span, [lang="ru"] .coin-body span, [lang="vi"] .coin-body span {
  overflow-wrap: anywhere;
}

/* ==========================================================================
   Optical size of the micro-label scale.
   0.60–0.74rem is tuned for uppercase Latin in a mono face: simple shapes, and at
   0.72rem about 8px of cap height. The identical box has to hold up to 20 strokes
   of a Han glyph, or a Thai loop carrying a stacked vowel and a tone mark, so the
   same number reads a size smaller. Step the whole scale up for those scripts.

   This moves only the labels that carry TRANSLATED copy — nav, tags, breadcrumbs,
   table headers, captions, bylines, plan badges, the console mock. Counters, chain
   tickers (BTC), avatar initials and the numeric rails keep their literal rem
   values in the component CSS, so the Latin design's numbering stays put.

   ×1.14 for CJK. Thai takes ×1.19: it carries the least ink per em, and its
   ascenders and tone marks need the extra body to stay apart.
   ========================================================================== */
:is([lang^="zh"], [lang="ja"], [lang="ko"]) {
  --ms-1: 0.68rem;
  --ms-2: 0.71rem;
  --ms-3: 0.73rem;
  --ms-4: 0.75rem;
  --ms-5: 0.78rem;
  --ms-6: 0.80rem;
  --ms-7: 0.82rem;
  --ms-8: 0.84rem;
}
[lang="th"] {
  --ms-1: 0.71rem;
  --ms-2: 0.74rem;
  --ms-3: 0.76rem;
  --ms-4: 0.79rem;
  --ms-5: 0.81rem;
  --ms-6: 0.83rem;
  --ms-7: 0.86rem;
  --ms-8: 0.88rem;
}
/* The mobile drawer sets .site-nav a to 1.5rem inside @media (max-width: 960px),
   which comes after the token-driven rule and so still wins there. */

/* JA hero panel head: "コールドウォレット" (151px at 1.05rem) + the "オフライン" tag
   (~100px) need ~263px, but left:12% locked the row to 247px — both wrapped and
   dropped an orphan glyph. Widening the row only for Japanese clears it. */
[lang="ja"] .panel-top .panel-head { left: 3%; }