/* ==========================================================================
   TrayTool — Design System
   traytool.com · "Typeset like a specification."
   --------------------------------------------------------------------------
   0. Tokens            5. Hero & product mockups
   1. Reset & base      6. Section components (verbs, dual demo, editions…)
   2. Layout primitives 7. Paper section (honest baseline)
   3. Nav & footer      8. Sub-page components (dev / download / share)
   4. Atoms (btn, chip  9. Motion & responsive
      badge, table, ticker)
   Brand: Spirit Cyan #38E1D8 · confidence blue #4A7CC7 · amber #E0A850
   Status: green #40D0A0 · red #E05060 · orange #C08030  (product tokens)
   ========================================================================== */

/* ---------- 0. Tokens ---------- */
:root {
  --bg:        #060a09;
  --bg-1:      #0a100f;
  --bg-2:      #0e1514;
  --bg-3:      #121a18;
  --bg-inset:  #07100e;
  --line:      #1b2624;
  --line-2:    #243230;

  --ink:       #ecf5f2;
  --ink-2:      #a9bab4;
  --ink-3:      #6f817b;

  --cyan:      #38e1d8;
  --cyan-hi:   #6ff0e9;
  --cyan-soft: rgba(56, 225, 216, .12);
  --cyan-line: rgba(56, 225, 216, .35);

  --blue:      #4a7cc7;
  --amber:     #e0a850;
  --green:     #40d0a0;
  --red:       #e05060;
  --orange:    #c08030;

  --paper:     #f2f4f3;
  --paper-2:   #e9edeb;
  --paper-ink: #16211e;
  --paper-ink2:#4c5a55;
  --paper-line:#d4dcd9;

  --font-d: "General Sans", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", "Noto Sans JP", sans-serif;
  --font-b: "General Sans", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", "Noto Sans JP", sans-serif;
  --font-m: "JetBrains Mono", "SFMono-Regular", Consolas, "Courier New", monospace;

  --r-s: 8px; --r-m: 12px; --r-l: 16px; --r-xl: 22px;
  --shadow-1: 0 2px 10px rgba(0,0,0,.28);
  --shadow-2: 0 14px 44px rgba(0,0,0,.42);
  --shadow-3: 0 30px 90px rgba(0,0,0,.55);
  --glow: 0 0 0 1px rgba(56,225,216,.18), 0 8px 40px rgba(56,225,216,.10);
  --nav-h: 68px;
  --ease: cubic-bezier(.22,.61,.2,1);
}

/* ---------- 1. Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 16px); -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-b);
  font-size: 16px; line-height: 1.7;
  color: var(--ink-2);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
::selection { background: rgba(56,225,216,.28); color: #fff; }

h1, h2, h3, h4 { font-family: var(--font-d); color: var(--ink); font-weight: 600; line-height: 1.12; letter-spacing: -.02em; }
h1 { font-size: clamp(2.4rem, 5.4vw, 4.35rem); font-weight: 600; }
h2 { font-size: clamp(1.75rem, 3.4vw, 2.7rem); }
h3 { font-size: 1.18rem; letter-spacing: -.01em; }
p  { max-width: 66ch; }
strong { color: var(--ink); font-weight: 600; }
em { font-style: normal; color: var(--cyan); }
code, kbd {
  font-family: var(--font-m); font-size: .86em;
  background: var(--bg-inset); border: 1px solid var(--line);
  border-radius: 6px; padding: .1em .42em; color: var(--cyan-hi);
}
:lang(zh) body, :lang(ja) body { letter-spacing: .01em; }
:lang(zh) h1, :lang(zh) h2, :lang(ja) h1, :lang(ja) h2 { letter-spacing: 0; }

/* Entrance state for [reveal] elements, deliberately placed here (before any
   component :hover rule) rather than down in the motion section.
   The resting transform reads a custom property instead of being set
   directly by .is-in: .reveal.is-in has THREE classes (.js.reveal.is-in),
   so a direct "transform: none" there would outrank any two-class hover
   rule below it (.card:hover, .chain-row:hover) by specificity, not just
   source order — permanently killing every hover-lift on every revealed
   card, for good, after the one-time reveal. Toggling only the variable
   keeps the actual "transform" declaration on the two-class base rule,
   where source order — not an unwinnable specificity fight — decides ties
   with hover rules declared later.
   Gated on html.js (set by an inline <head> script): if scripting never
   runs, the class never lands and every section stays visible — the
   entrance animation is the enhancement, not the content. */
.js .reveal {
  --reveal-y: 22px;
  opacity: 0; transform: translateY(var(--reveal-y));
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.js .reveal.is-in { opacity: 1; --reveal-y: 0px; }
.reveal-d1 { transition-delay: .08s; } .reveal-d2 { transition-delay: .16s; } .reveal-d3 { transition-delay: .24s; }

/* ---------- 2. Layout primitives ---------- */
.container { width: min(1180px, calc(100% - 48px)); margin-inline: auto; }
.section { padding: clamp(76px, 9vw, 128px) 0; position: relative; }
.section--tight { padding: clamp(56px, 6vw, 84px) 0; }
.section--alt { background: var(--bg-1); border-block: 1px solid var(--line); }

.eyebrow {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-m); font-size: 11.5px; font-weight: 500;
  letter-spacing: .22em; text-transform: uppercase; color: var(--ink-3);
  margin-bottom: 22px;
}
.eyebrow::before { content: ""; width: 18px; height: 1px; background: var(--cyan); flex: none; }
.eyebrow .idx { color: var(--cyan); }

.section-head { max-width: 860px; margin-bottom: clamp(36px, 5vw, 56px); }
.section-head h2 { margin-bottom: 18px; }
.section-head .lead { font-size: clamp(1.02rem, 1.5vw, 1.16rem); color: var(--ink-2); }
.grid { display: grid; gap: 22px; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }

/* Background texture: cyan aurora + hairline grid + noise */
.bg-fx { position: fixed; inset: 0; z-index: -1; pointer-events: none; }
.bg-fx::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(900px 480px at 82% -8%, rgba(56,225,216,.10), transparent 62%),
    radial-gradient(700px 420px at -12% 32%, rgba(74,124,199,.07), transparent 60%),
    radial-gradient(1000px 640px at 50% 118%, rgba(56,225,216,.05), transparent 64%);
}
.bg-fx::after {
  content: ""; position: absolute; inset: 0; opacity: .5;
  background-image:
    linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(1200px 800px at 50% 0%, #000 30%, transparent 78%);
}

/* ---------- 3. Nav ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 90;
  height: var(--nav-h);
  background: rgba(6,10,9,.72);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease), background .3s var(--ease);
}
.nav.is-scrolled { border-bottom-color: var(--line); background: rgba(6,10,9,.88); }
.nav-inner { height: 100%; display: flex; align-items: center; gap: 28px; }
.brand { display: flex; align-items: center; gap: 11px; margin-right: 6px; flex: none; }
.brand-mark {
  width: 30px; height: 30px; flex: none; border-radius: 8.5px;
  background: linear-gradient(135deg, #2bd4cb, #1fa8a1);
  display: grid; place-items: center;
  box-shadow: 0 0 0 1px rgba(56,225,216,.35), 0 4px 18px rgba(56,225,216,.22);
}
.brand-mark svg { width: 16px; height: 16px; }
.brand-name { font-family: var(--font-d); font-weight: 600; font-size: 17px; color: var(--ink); letter-spacing: -.01em; }
.brand-name b { color: var(--cyan); font-weight: 600; }

.nav-links { display: flex; align-items: center; gap: 4px; flex: 1; }
.nav-links a {
  font-size: 13.5px; font-weight: 500; color: var(--ink-3);
  padding: 8px 12px; border-radius: 8px; transition: color .2s, background .2s;
}
.nav-links a:hover { color: var(--ink); background: rgba(255,255,255,.045); }
.nav-links a.is-active { color: var(--cyan); }

.nav-cta { display: flex; align-items: center; gap: 12px; flex: none; }
.lang-switch {
  display: flex; align-items: center; border: 1px solid var(--line);
  border-radius: 8px; overflow: hidden; background: var(--bg-1);
}
.lang-switch button {
  font-family: var(--font-b); font-size: 12px; font-weight: 600;
  color: var(--ink-3); padding: 6px 10px; transition: all .2s var(--ease);
}
.lang-switch button + button { border-left: 1px solid var(--line); }
.lang-switch button:hover { color: var(--ink); }
.lang-switch button.on { color: #04211f; background: var(--cyan); }

.nav-toggle { display: none; width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 8px; place-items: center; }
.nav-toggle svg { width: 18px; height: 18px; stroke: var(--ink-2); }
.nav-mobile { display: none; }

/* ---------- 4. Atoms ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--font-d); font-weight: 600; font-size: 14.5px;
  padding: 12px 22px; border-radius: 10px; white-space: nowrap;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), background .18s, border-color .18s, color .18s;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--cyan); color: #04211f; box-shadow: 0 6px 24px rgba(56,225,216,.22); }
.btn-primary:hover { background: var(--cyan-hi); transform: translateY(-1px); box-shadow: 0 10px 34px rgba(56,225,216,.3); }
.btn-ghost { border: 1px solid var(--line-2); color: var(--ink-2); background: rgba(255,255,255,.02); }
.btn-ghost:hover { border-color: var(--cyan-line); color: var(--ink); transform: translateY(-1px); }
.btn-lg { padding: 15px 28px; font-size: 15.5px; border-radius: 12px; }
.btn .sub { display: block; font-family: var(--font-m); font-size: 10px; font-weight: 500; letter-spacing: .08em; opacity: .72; margin-top: 1px; }
.btn-column { flex-direction: column; gap: 2px; padding-top: 10px; padding-bottom: 10px; }
.btn .arrow { transition: transform .18s var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }

.chip {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-m); font-size: 11.5px; letter-spacing: .02em;
  color: var(--ink-3); border: 1px solid var(--line);
  background: var(--bg-1); border-radius: 100px; padding: 5.5px 13px;
}
.chip .k { color: var(--ink); font-weight: 500; }

.badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-m); font-size: 10.5px; font-weight: 600; letter-spacing: .06em;
  border-radius: 6px; padding: 3.5px 9px; white-space: nowrap;
}
.badge-signed   { color: var(--cyan); background: var(--cyan-soft); border: 1px solid rgba(56,225,216,.3); }
.badge-unsigned { color: var(--amber); background: rgba(224,168,80,.1); border: 1px solid rgba(224,168,80,.32); }
.badge-reviewed  { color: var(--green); background: rgba(64,208,160,.09); border: 1px solid rgba(64,208,160,.3); }
.badge-plan      { color: var(--blue); background: rgba(74,124,199,.12); border: 1px solid rgba(74,124,199,.4); }
.badge-moat      { color: #04211f; background: linear-gradient(135deg, #2bd4cb, #1fa8a1); border: 1px solid rgba(56,225,216,.5); }

.dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.dot-ok    { background: var(--green); box-shadow: 0 0 8px rgba(64,208,160,.6); }
.dot-warn  { background: var(--amber); box-shadow: 0 0 8px rgba(224,168,80,.55); }
.dot-no    { background: var(--red);   box-shadow: 0 0 8px rgba(224,80,96,.5); }
.dot-plan  { background: var(--blue); }
.dot-hollow{ background: transparent; border: 1.5px solid var(--ink-3); }
.dot-cyan  { background: var(--cyan); box-shadow: 0 0 8px rgba(56,225,216,.55); }

.ticker {
  border-block: 1px solid var(--line); background: var(--bg-1);
  overflow: hidden; padding: 15px 0; position: relative;
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.ticker-track { display: flex; gap: 0; width: max-content; animation: marquee 46s linear infinite; }
.ticker:hover .ticker-track { animation-play-state: paused; }
.ticker-item {
  display: inline-flex; align-items: center; gap: 10px; white-space: nowrap;
  font-family: var(--font-m); font-size: 12px; letter-spacing: .04em; color: var(--ink-2);
  padding: 0 26px; position: relative;
}
.ticker-item::after { content: ""; width: 4px; height: 4px; background: var(--cyan); border-radius: 1px; transform: rotate(45deg); position: absolute; right: -2px; top: 50%; margin-top: -2px; opacity: .7; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* Tables */
.tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.tbl th {
  font-family: var(--font-m); font-size: 11px; font-weight: 500; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-3); text-align: left;
  padding: 12px 16px; border-bottom: 1px solid var(--line-2);
}
.tbl td { padding: 13px 16px; border-bottom: 1px solid var(--line); vertical-align: top; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl .num { font-family: var(--font-m); font-size: 13px; color: var(--ink); white-space: nowrap; }

/* Cards */
.card {
  background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
  border: 1px solid var(--line); border-radius: var(--r-l);
  padding: 28px; position: relative;
  transition: border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.card:hover { border-color: var(--line-2); transform: translateY(-3px); box-shadow: var(--shadow-2); }
.card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 1px; border-radius: 1px;
  background: linear-gradient(90deg, transparent, rgba(56,225,216,.28), transparent);
  opacity: 0; transition: opacity .3s;
}
.card:hover::before { opacity: 1; }

/* FAQ */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 18px;
  padding: 22px 4px; font-family: var(--font-d); font-weight: 600; font-size: 1.05rem;
  color: var(--ink); transition: color .2s;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--cyan); }
.faq summary .mark {
  flex: none; width: 22px; height: 22px; border: 1px solid var(--line-2); border-radius: 6px;
  display: grid; place-items: center; transition: all .25s var(--ease);
  font-family: var(--font-m); font-size: 14px; color: var(--cyan); font-weight: 400;
}
.faq details[open] summary .mark { background: var(--cyan-soft); border-color: var(--cyan-line); transform: rotate(45deg); }
.faq .answer { padding: 0 4px 24px 40px; color: var(--ink-2); max-width: 76ch; }

/* ---------- 5. Hero ---------- */
.hero { padding: calc(var(--nav-h) + clamp(52px, 8vw, 96px)) 0 clamp(60px, 7vw, 96px); position: relative; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.hero-eyebrow { margin-bottom: 26px; }
.hero h1 { margin-bottom: 24px; }
.hero h1 .accent { color: var(--cyan); }
.hero .lead { font-size: clamp(1.04rem, 1.6vw, 1.18rem); color: var(--ink-2); margin-bottom: 34px; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 30px; }
.hero-chips { display: flex; flex-wrap: wrap; gap: 9px; }

/* Product mockup — the tray host window */
.mock-stage { position: relative; }
.mock-stage::before {
  content: ""; position: absolute; inset: -12% -14%;
  background: radial-gradient(520px 340px at 60% 30%, rgba(56,225,216,.13), transparent 68%);
  filter: blur(8px); z-index: -1;
}
.tray-window {
  border: 1px solid var(--line-2); border-radius: var(--r-xl);
  background: linear-gradient(178deg, #0d1514 0%, #0a100f 100%);
  box-shadow: var(--shadow-3), inset 0 1px 0 rgba(255,255,255,.035);
  overflow: hidden;
}
.tw-bar {
  display: flex; align-items: center; gap: 12px; padding: 11px 16px;
  border-bottom: 1px solid var(--line); background: rgba(255,255,255,.018);
}
.tw-dots { display: flex; gap: 6px; }
.tw-dots i { width: 10px; height: 10px; border-radius: 50%; background: #223029; border: 1px solid #2c3a33; }
.tw-title { font-family: var(--font-m); font-size: 11px; color: var(--ink-3); letter-spacing: .04em; flex: 1; text-align: center; }
.tw-edition { font-family: var(--font-m); font-size: 10px; color: var(--cyan); border: 1px solid var(--cyan-line); background: var(--cyan-soft); border-radius: 5px; padding: 2.5px 8px; letter-spacing: .08em; }

.tw-body { display: grid; grid-template-columns: 54px 1fr; }
.tw-rail { border-right: 1px solid var(--line); padding: 14px 0; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.tw-rail i {
  width: 30px; height: 30px; border-radius: 9px; border: 1px solid var(--line);
  background: var(--bg-2); display: grid; place-items: center;
}
.tw-rail i svg { width: 14px; height: 14px; stroke: var(--ink-3); fill: none; stroke-width: 1.6; }
.tw-rail i.on { border-color: var(--cyan-line); background: var(--cyan-soft); box-shadow: 0 0 12px rgba(56,225,216,.18); }
.tw-rail i.on svg { stroke: var(--cyan); }

.tw-main { padding: 20px 22px 18px; }
.tw-greet { font-family: var(--font-d); font-size: 15px; font-weight: 600; color: var(--ink); margin-bottom: 14px; }
.tw-prompt { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 16px; }
.sprite-avatar {
  width: 34px; height: 34px; flex: none; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #6ff0e9, #1fa8a1 62%, #14706b);
  box-shadow: 0 0 0 1px rgba(56,225,216,.4), 0 0 18px rgba(56,225,216,.32);
  display: grid; place-items: center; position: relative;
}
.sprite-avatar::after {
  content: ""; position: absolute; inset: -5px; border-radius: 50%;
  border: 1px solid rgba(56,225,216,.25); animation: pulse-ring 2.6s var(--ease) infinite;
}
@keyframes pulse-ring { 0% { transform: scale(.92); opacity: .9; } 70% { transform: scale(1.18); opacity: 0; } 100% { opacity: 0; } }
.tw-input {
  flex: 1; border: 1px solid var(--line-2); background: var(--bg-inset);
  border-radius: 11px; padding: 10px 14px; font-size: 13.5px; color: var(--ink-2);
  display: flex; align-items: center; gap: 8px;
}
.tw-input .caret { width: 7px; height: 15px; background: var(--cyan); flex: none; animation: caret 1.1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.tw-conf { display: flex; gap: 14px; margin-bottom: 18px; }
.tw-conf span { font-family: var(--font-m); font-size: 10.5px; color: var(--ink-3); display: inline-flex; align-items: center; gap: 5px; }
.conf-glyph { font-size: 12px; line-height: 1; }

.tw-plugins { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 16px; }
.tw-plugin {
  display: flex; align-items: center; gap: 9px; border: 1px solid var(--line);
  background: var(--bg-1); border-radius: 9px; padding: 8.5px 11px;
}
.tw-plugin .glyph { width: 22px; height: 22px; border-radius: 6px; background: var(--bg-3); display: grid; place-items: center; flex: none; }
.tw-plugin .glyph svg { width: 12px; height: 12px; stroke: var(--cyan); fill: none; stroke-width: 1.7; }
.tw-plugin .name { font-size: 12px; font-weight: 600; color: var(--ink-2); flex: 1; line-height: 1.25; }
.tw-plugin .tag { font-family: var(--font-m); font-size: 9.5px; color: var(--ink-3); }
.tw-plugin.live { border-color: rgba(64,208,160,.22); }
.tw-plugin.plan { border-style: dashed; }

.tw-status {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  border-top: 1px solid var(--line); padding-top: 12px;
  font-family: var(--font-m); font-size: 10.5px; color: var(--ink-3); letter-spacing: .03em;
}
.tw-status span { display: inline-flex; align-items: center; gap: 6px; }

/* Floating agent-call card */
.agent-card {
  position: absolute; right: -18px; bottom: -30px; width: min(320px, 82%);
  border: 1px solid var(--line-2); border-radius: 14px;
  background: rgba(10,16,15,.94); backdrop-filter: blur(10px);
  box-shadow: var(--shadow-3); padding: 14px 16px; z-index: 2;
  animation: float 7s ease-in-out infinite;
}
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
.agent-card .head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-family: var(--font-m); font-size: 10.5px; color: var(--cyan); letter-spacing: .05em; }
.agent-card .head .dot { margin-left: auto; }
.agent-card pre {
  font-family: var(--font-m); font-size: 11px; line-height: 1.75; color: var(--ink-2);
  white-space: pre-wrap; margin: 0;
}
.agent-card pre b { color: var(--cyan-hi); font-weight: 500; }
.agent-card pre i { color: var(--amber); font-style: normal; }
.agent-card pre u { color: var(--blue); text-decoration: none; }

/* ---------- 6. Section components ---------- */
/* 01 — the gap */
.gap-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(30px, 5vw, 64px); align-items: center; }
.cost-curve { border: 1px solid var(--line); border-radius: var(--r-l); background: var(--bg-2); padding: 26px 26px 20px; }
.cost-row { margin-bottom: 20px; }
.cost-row .lbl { display: flex; justify-content: space-between; font-family: var(--font-m); font-size: 11px; color: var(--ink-3); margin-bottom: 9px; letter-spacing: .04em; }
.cost-row .lbl .val { color: var(--ink); }
.cost-track { position: relative; height: 12px; border-radius: 6px; background: var(--bg-inset); border: 1px solid var(--line); overflow: hidden; }
.cost-fill { position: absolute; inset: 0 auto 0 0; border-radius: 5px; }
.cf-build { background: linear-gradient(90deg, rgba(64,208,160,.85), rgba(64,208,160,.5)); width: 34%; }
.cf-dist  { background: linear-gradient(90deg, rgba(224,168,80,.8), rgba(224,168,80,.45)); width: 96%; }
.cf-invoke{ background: linear-gradient(90deg, rgba(224,80,96,.75), rgba(224,80,96,.4)); width: 96%; }
.cost-note { font-family: var(--font-m); font-size: 10.5px; color: var(--ink-3); border-top: 1px dashed var(--line); padding-top: 12px; letter-spacing: .03em; }
.cost-note b { color: var(--green); font-weight: 500; }

.pain-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: clamp(30px, 4vw, 46px); }
.pain-card { border: 1px solid var(--line); border-radius: var(--r-l); background: var(--bg-2); padding: 26px; }
.pain-card .who { font-family: var(--font-m); font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 14px; display: flex; align-items: center; gap: 8px; }
.pain-card h3 { font-size: 1.14rem; margin-bottom: 10px; }
.pain-card p { font-size: 14.5px; }
.pain-card q { display: block; margin-top: 14px; padding-left: 14px; border-left: 2px solid var(--cyan-line); color: var(--ink-3); font-size: 13.5px; font-style: italic; }

/* 02 — verbs */
.verb-card { padding: 30px 28px; }
.verb-card .verb {
  font-family: var(--font-m); font-size: 12px; font-weight: 600; letter-spacing: .2em;
  color: var(--cyan); margin-bottom: 16px; display: flex; align-items: center; gap: 10px;
}
.verb-card .verb .n { color: var(--ink-3); font-weight: 400; }
.verb-card h3 { margin-bottom: 12px; }
.verb-card p { font-size: 14.5px; }
.verb-card .badge { margin-top: 18px; }
.verb-card--moat { border-color: rgba(56,225,216,.3); background: linear-gradient(180deg, rgba(56,225,216,.055), var(--bg-1)); }

.arch-strip { margin-top: 26px; border: 1px solid var(--line); border-radius: var(--r-l); overflow: hidden; }
.arch-row { display: grid; grid-template-columns: 150px 1fr; border-bottom: 1px solid var(--line); }
.arch-row:last-child { border-bottom: 0; }
.arch-row .k { font-family: var(--font-m); font-size: 11px; letter-spacing: .14em; color: var(--cyan); padding: 15px 20px; border-right: 1px solid var(--line); display: flex; align-items: center; background: var(--bg-2); text-transform: uppercase; }
.arch-row .v { padding: 15px 20px; font-size: 13.5px; color: var(--ink-2); display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.arch-row .v .sep { color: var(--ink-3); opacity: .6; }

/* 03 — dual-state demo */
.dual-demo { border: 1px solid var(--line-2); border-radius: var(--r-xl); background: linear-gradient(180deg, var(--bg-2), var(--bg-1)); overflow: hidden; box-shadow: var(--shadow-2); }
.dual-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 16px 22px; border-bottom: 1px solid var(--line); flex-wrap: wrap;
}
.dual-bar .hint { font-family: var(--font-m); font-size: 11px; color: var(--ink-3); letter-spacing: .05em; }
.seg { display: flex; border: 1px solid var(--line-2); border-radius: 10px; background: var(--bg-inset); padding: 3px; }
.seg button {
  font-family: var(--font-d); font-size: 13px; font-weight: 600; color: var(--ink-3);
  padding: 7px 20px; border-radius: 8px; transition: all .22s var(--ease);
}
.seg button.on { background: var(--cyan); color: #04211f; box-shadow: 0 2px 12px rgba(56,225,216,.3); }
.dual-view { display: none; padding: clamp(22px, 3.4vw, 38px); min-height: 330px; }
.dual-view.on { display: block; animation: view-in .4s var(--ease); }
@keyframes view-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* simple view */
.dv-simple { display: grid; gap: 22px; }
.dv-prompt {
  border: 1px solid var(--cyan-line); border-radius: 14px; background: var(--bg-inset);
  padding: 22px; box-shadow: var(--glow);
}
.dv-prompt .q { font-family: var(--font-d); font-size: clamp(1.15rem, 2vw, 1.45rem); font-weight: 600; color: var(--ink); margin-bottom: 14px; }
.dv-prompt .line { display: flex; align-items: center; gap: 10px; font-size: 14.5px; color: var(--ink-2); }
.dv-prompt .line .caret { width: 8px; height: 16px; background: var(--cyan); animation: caret 1.1s steps(1) infinite; }
.dv-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.dv-action {
  border: 1px solid var(--line-2); border-radius: 12px; background: var(--bg-2);
  padding: 18px; text-align: left; transition: all .2s var(--ease); display: flex; flex-direction: column; gap: 6px;
}
.dv-action:hover { border-color: var(--cyan-line); transform: translateY(-2px); }
.dv-action .t { font-family: var(--font-d); font-weight: 600; font-size: 15px; color: var(--ink); }
.dv-action .d { font-size: 12.5px; color: var(--ink-3); }
.dv-run { display: flex; align-items: center; gap: 14px; }
.dv-caption { font-size: 13.5px; color: var(--ink-3); font-style: italic; }

/* pro view */
.dv-pro { display: grid; gap: 18px; }
.node-list { display: grid; gap: 10px; }
.node-row {
  display: grid; grid-template-columns: 26px 1.25fr 1fr auto; gap: 14px; align-items: center;
  border: 1px solid var(--line); border-radius: 11px; background: var(--bg-2); padding: 12px 16px;
}
.node-row .idx { width: 26px; height: 26px; border-radius: 8px; background: var(--bg-inset); border: 1px solid var(--line-2); display: grid; place-items: center; font-family: var(--font-m); font-size: 11px; color: var(--cyan); }
.node-row .nm { font-family: var(--font-d); font-weight: 600; font-size: 14px; color: var(--ink); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.node-row .params { display: flex; gap: 7px; flex-wrap: wrap; }
.param { font-family: var(--font-m); font-size: 10.5px; color: var(--ink-3); border: 1px solid var(--line); background: var(--bg-inset); padding: 3px 8px; border-radius: 5px; }
.node-row .outs { font-family: var(--font-m); font-size: 10.5px; color: var(--ink-3); }
.dv-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.dv-box { border: 1px solid var(--line); border-radius: 11px; background: var(--bg-inset); padding: 14px 16px; }
.dv-box .h { font-family: var(--font-m); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 10px; }
.dv-box pre { font-family: var(--font-m); font-size: 11.5px; line-height: 1.8; color: var(--ink-2); margin: 0; white-space: pre-wrap; }
.dv-box pre .k { color: var(--cyan-hi); }
.dv-box pre .s { color: var(--amber); }
.dv-box pre .c { color: var(--ink-3); }
.foot-note { margin-top: 20px; display: flex; align-items: center; gap: 12px; font-size: 13.5px; color: var(--ink-3); }
.foot-note::before { content: ""; width: 22px; height: 1px; background: var(--cyan); }

/* 04 — editions */
.edition-card { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.ed-art { position: relative; aspect-ratio: 16 / 8.6; border-bottom: 1px solid var(--line); background: radial-gradient(320px 180px at 70% 20%, rgba(56,225,216,.09), transparent 70%), var(--bg-inset); }
.ed-art svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ed-art .ed-id { position: absolute; top: 14px; left: 16px; font-family: var(--font-m); font-size: 10px; letter-spacing: .14em; color: var(--cyan); }
.ed-body { padding: 22px 24px 24px; display: flex; flex-direction: column; flex: 1; }
.ed-body h3 { margin-bottom: 8px; display: flex; align-items: baseline; gap: 10px; }
.ed-body .desc { font-size: 14px; margin-bottom: 14px; }
.ed-task {
  border-left: 2px solid var(--cyan-line); padding: 2px 0 2px 13px; margin-bottom: 16px;
  font-size: 13px; color: var(--ink-3); font-style: italic;
}
.ed-status { margin-top: auto; display: flex; align-items: center; gap: 8px; padding-top: 14px; border-top: 1px dashed var(--line); font-family: var(--font-m); font-size: 11px; color: var(--ink-3); flex-wrap: wrap; }
.editions-note { margin-top: 26px; }

/* 05 — chains */
.chain-list { display: grid; gap: 12px; }
.chain-row {
  display: grid; grid-template-columns: 76px 1.1fr 2fr 118px; gap: 18px; align-items: center;
  border: 1px solid var(--line); border-radius: var(--r-m); background: var(--bg-2);
  padding: 15px 20px; transition: border-color .22s var(--ease), transform .22s var(--ease);
}
.chain-row:hover { border-color: var(--line-2); transform: translateX(4px); }
.chain-id { font-family: var(--font-m); font-size: 11px; color: var(--cyan); letter-spacing: .08em; }
.chain-name { font-family: var(--font-d); font-weight: 600; font-size: 14.5px; color: var(--ink); }
.chain-pipe { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pipe-step { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-2); }
.pipe-step.plan { color: var(--ink-3); }
.pipe-arrow { color: var(--ink-3); opacity: .55; font-size: 11px; }
.chain-status { font-family: var(--font-m); font-size: 11px; color: var(--ink-3); text-align: right; display: flex; align-items: center; justify-content: flex-end; gap: 7px; }

/* 06 — dev teaser */
.dev-teaser { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(30px, 5vw, 60px); align-items: center; }
.dev-constellation { position: relative; border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--bg-2); overflow: hidden; aspect-ratio: 16/10.5; }
.dev-constellation svg { width: 100%; height: 100%; }
.dev-facts { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 24px; }

/* pricing */
.price-grid { align-items: stretch; }
.price-card { display: flex; flex-direction: column; padding: 30px 28px; }
.price-card--hero { border-color: rgba(56,225,216,.34); background: linear-gradient(180deg, rgba(56,225,216,.06), var(--bg-1)); box-shadow: var(--glow); }
.price-tier { font-family: var(--font-m); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--cyan); margin-bottom: 10px; }
.price-name { font-size: 1.3rem; margin-bottom: 4px; }
.price-for { font-size: 13px; color: var(--ink-3); margin-bottom: 20px; min-height: 40px; }
.price-val { font-family: var(--font-d); font-size: 2.1rem; font-weight: 600; color: var(--ink); margin-bottom: 4px; }
.price-val small { font-size: .95rem; font-weight: 400; color: var(--ink-3); }
.price-note { font-family: var(--font-m); font-size: 11px; color: var(--ink-3); margin-bottom: 20px; }
.price-list { list-style: none; display: grid; gap: 10px; margin-bottom: 26px; }
.price-list li { display: flex; gap: 10px; font-size: 14px; align-items: baseline; }
.price-list li::before { content: "—"; color: var(--cyan); font-family: var(--font-m); flex: none; }
.price-list li.off { color: var(--ink-3); }
.price-card .btn { margin-top: auto; }

/* final CTA */
.cta-final { border: 1px solid var(--line-2); border-radius: var(--r-xl); background:
  radial-gradient(640px 300px at 18% 0%, rgba(56,225,216,.09), transparent 64%),
  linear-gradient(180deg, var(--bg-2), var(--bg-1));
  padding: clamp(36px, 5vw, 64px); }
.cta-final-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 52px); align-items: center; }
.cta-final h2 { margin-bottom: 14px; }
.cta-aud { display: grid; gap: 12px; }
.cta-aud a {
  display: flex; align-items: center; gap: 16px; border: 1px solid var(--line-2);
  border-radius: 14px; padding: 18px 22px; background: var(--bg-inset);
  transition: all .22s var(--ease);
}
.cta-aud a:hover { border-color: var(--cyan-line); transform: translateY(-2px); box-shadow: var(--shadow-2); }
.cta-aud .t { font-family: var(--font-d); font-weight: 600; font-size: 15px; color: var(--ink); }
.cta-aud .d { font-size: 12.5px; color: var(--ink-3); }
.cta-aud .arrow { margin-left: auto; color: var(--cyan); transition: transform .2s var(--ease); }
.cta-aud a:hover .arrow { transform: translateX(4px); }

/* ---------- 7. Paper section (honest baseline) ---------- */
.paper {
  background: var(--paper); color: var(--paper-ink2);
  border-block: 1px solid #d8e2de;
  position: relative;
}
.paper::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: repeating-linear-gradient(0deg, transparent, transparent 27px, rgba(22,33,30,.035) 28px);
  mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent);
}
.paper .eyebrow { color: #7a8a84; }
.paper h2, .paper h3, .paper strong { color: var(--paper-ink); }
.paper .lead { color: var(--paper-ink2); }
.paper .section-head { margin-bottom: 40px; }

.baseline-wrap { background: #fbfcfc; border: 1px solid var(--paper-line); border-radius: var(--r-l); box-shadow: 0 1px 2px rgba(22,33,30,.05), 0 18px 44px rgba(22,33,30,.07); overflow: hidden; }
.baseline-wrap .tbl th { color: #6c7c76; border-bottom: 1px solid var(--paper-line); }
.baseline-wrap .tbl td { border-bottom: 1px solid #e3eae7; }
.baseline-wrap .tbl tr:last-child td { border-bottom: 0; }
.baseline-wrap .num { color: var(--paper-ink); }
.paper .dot-ok { box-shadow: 0 0 0 3px rgba(64,208,160,.16); }
.paper .dot-no { box-shadow: 0 0 0 3px rgba(224,80,96,.12); }
.paper .dot-plan { box-shadow: 0 0 0 3px rgba(74,124,199,.14); }
.paper .dot-warn { box-shadow: 0 0 0 3px rgba(224,168,80,.16); }

.baseline-cols th:nth-child(2), .baseline-cols td:nth-child(2) { background: rgba(56,225,216,.035); }
.baseline-meta { display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; padding: 13px 18px; border-top: 1px solid var(--paper-line); background: #f6f8f7; font-family: var(--font-m); font-size: 10.5px; color: #7a8a84; letter-spacing: .05em; }

.roadmap { margin-top: 46px; }
.roadmap-track { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0; position: relative; }
.roadmap-track::before { content: ""; position: absolute; top: 7px; left: 8px; right: 8px; height: 2px; background: var(--paper-line); }
.phase { position: relative; padding: 26px 14px 0 0; }
.phase .pt { display: block; width: 16px; height: 16px; border-radius: 50%; background: #fbfcfc; border: 2px solid #b9c6c1; position: relative; z-index: 1; }
.phase .pid { font-family: var(--font-m); font-size: 12px; font-weight: 700; color: var(--paper-ink); margin-bottom: 6px; margin-top: 12px; letter-spacing: .06em; }
.phase .pd { font-size: 12.5px; line-height: 1.55; color: var(--paper-ink2); }
.phase--now .pt { border-color: #1fa8a1; background: #38e1d8; box-shadow: 0 0 0 5px rgba(56,225,216,.18); }
.phase--now .pid { color: #0d948c; }
.phase--now .pd { color: #11615c; }

.paper-quote {
  margin-top: 46px; border-left: 3px solid #38e1d8; padding: 6px 0 6px 22px;
  font-family: var(--font-d); font-size: clamp(1.05rem, 1.8vw, 1.28rem); font-weight: 500;
  color: var(--paper-ink); line-height: 1.5; max-width: 60ch;
}
.paper-quote .src { display: block; margin-top: 10px; font-family: var(--font-m); font-size: 11px; font-weight: 400; color: #7a8a84; letter-spacing: .06em; }

/* ---------- 8. Sub-page components ---------- */
/* developers */
.pain-num { font-family: var(--font-m); font-size: 11px; color: var(--red); letter-spacing: .12em; margin-bottom: 14px; }
.get-table .st { white-space: nowrap; }
.st-pill { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-m); font-size: 11px; border-radius: 100px; padding: 3.5px 11px; border: 1px solid var(--line-2); color: var(--ink-2); background: var(--bg-inset); }
.st-pill.now { color: var(--green); border-color: rgba(64,208,160,.35); }
.st-pill.p1 { color: var(--cyan); border-color: var(--cyan-line); }
.st-pill.p2 { color: var(--blue); border-color: rgba(74,124,199,.45); }
.st-pill.p3 { color: var(--amber); border-color: rgba(224,168,80,.4); }

.trust-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.trust-card { padding: 26px; }
.trust-card .sig { font-size: 21px; margin-bottom: 14px; font-family: var(--font-m); }
.trust-card .sig.warn { color: var(--amber); }
.trust-card .sig.ok { color: var(--cyan); }
.trust-card .sig.rev { color: var(--green); }
.trust-card h3 { font-size: 1.02rem; margin-bottom: 10px; }
.trust-card p { font-size: 13.5px; }
.trust-card .cap { margin-top: 14px; font-family: var(--font-m); font-size: 10.5px; color: var(--ink-3); border-top: 1px dashed var(--line); padding-top: 12px; letter-spacing: .04em; }

.rev-models { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.rev-model { border: 1px solid var(--line); border-radius: var(--r-m); background: var(--bg-2); padding: 18px; }
.rev-model .m { font-family: var(--font-d); font-weight: 600; font-size: 14px; color: var(--ink); margin-bottom: 6px; }
.rev-model .d { font-size: 12px; color: var(--ink-3); line-height: 1.55; }

.pioneer {
  border: 1px solid rgba(56,225,216,.3); border-radius: var(--r-xl);
  background: radial-gradient(700px 320px at 85% 10%, rgba(56,225,216,.1), transparent 62%), linear-gradient(180deg, var(--bg-2), var(--bg-1));
  padding: clamp(32px, 5vw, 56px); text-align: center;
}
.pioneer h2 { margin-bottom: 14px; }
.pioneer p { margin-inline: auto; }
.pioneer .hero-ctas { justify-content: center; margin-top: 28px; }

/* download */
.dl-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(30px, 5vw, 64px); align-items: start; }
.dl-card { border: 1px solid var(--cyan-line); border-radius: var(--r-l); background: linear-gradient(180deg, rgba(56,225,216,.05), var(--bg-1)); padding: 28px; }
.dl-meta { display: grid; gap: 9px; margin: 22px 0; font-family: var(--font-m); font-size: 12px; color: var(--ink-3); }
.dl-meta div { display: flex; justify-content: space-between; gap: 16px; border-bottom: 1px dashed var(--line); padding-bottom: 9px; }
.dl-meta div:last-child { border-bottom: 0; padding-bottom: 0; }
.dl-meta b { color: var(--ink-2); font-weight: 500; }
.req-list { display: grid; gap: 11px; }
.req-list li { display: flex; gap: 11px; font-size: 14px; align-items: baseline; list-style: none; }
.req-list li::before { content: "—"; color: var(--cyan); font-family: var(--font-m); flex: none; }

.plugin-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.plugin-card { padding: 24px; }
.plugin-card .glyph { width: 38px; height: 38px; border-radius: 11px; border: 1px solid var(--cyan-line); background: var(--cyan-soft); display: grid; place-items: center; margin-bottom: 15px; }
.plugin-card .glyph svg { width: 18px; height: 18px; stroke: var(--cyan); fill: none; stroke-width: 1.6; }
.plugin-card h3 { font-size: 1.02rem; margin-bottom: 7px; }
.plugin-card .d { font-size: 13px; color: var(--ink-2); margin-bottom: 14px; min-height: 44px; }
.plugin-card .foot { display: flex; justify-content: space-between; align-items: center; border-top: 1px dashed var(--line); padding-top: 12px; }

.steps { counter-reset: step; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.step { border: 1px solid var(--line); border-radius: var(--r-l); background: var(--bg-2); padding: 26px; counter-increment: step; position: relative; }
.step::before {
  content: "0" counter(step); font-family: var(--font-m); font-size: 26px; font-weight: 600;
  color: transparent; -webkit-text-stroke: 1px var(--cyan-line); position: absolute; top: 18px; right: 20px;
}
.step h3 { font-size: 1.04rem; margin-bottom: 8px; }
.step p { font-size: 13.5px; }

.notice {
  border: 1px solid rgba(224,168,80,.35); border-radius: var(--r-m);
  background: rgba(224,168,80,.06); padding: 20px 24px;
  display: flex; gap: 15px; align-items: flex-start;
}
.notice .ic { flex: none; width: 26px; height: 26px; border-radius: 8px; border: 1px solid rgba(224,168,80,.4); display: grid; place-items: center; font-family: var(--font-m); color: var(--amber); font-size: 14px; }
.notice .tt { font-family: var(--font-d); font-weight: 600; color: var(--ink); font-size: 14px; margin-bottom: 4px; }
.notice .tb { font-size: 13.5px; color: var(--ink-2); }

/* share page (w.html) */
.share-hero { padding: calc(var(--nav-h) + clamp(48px, 7vw, 84px)) 0 clamp(40px, 5vw, 64px); }
.share-grid { display: grid; grid-template-columns: .92fr 1.08fr; gap: clamp(30px, 5vw, 60px); align-items: start; }
.manifest { border: 1px solid var(--line-2); border-radius: var(--r-xl); background: var(--bg-2); overflow: hidden; box-shadow: var(--shadow-2); }
.manifest-head { padding: 20px 24px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 14px; flex-wrap: wrap; background: var(--bg-1); }
.manifest-head .tt-l { font-family: var(--font-d); font-weight: 600; color: var(--ink); font-size: 16px; }
.manifest-head .badge { margin-left: auto; }
.mf-row { display: grid; grid-template-columns: 1.3fr auto 1.4fr; gap: 16px; align-items: center; padding: 17px 24px; border-bottom: 1px solid var(--line); transition: background .2s; }
.mf-row:hover { background: rgba(255,255,255,.018); }
.mf-row:last-of-type { border-bottom: 0; }
.mf-name { display: flex; align-items: center; gap: 11px; }
.mf-name .glyph { width: 30px; height: 30px; border-radius: 9px; background: var(--bg-3); border: 1px solid var(--line-2); display: grid; place-items: center; flex: none; }
.mf-name .glyph svg { width: 14px; height: 14px; stroke: var(--cyan); fill: none; stroke-width: 1.6; }
.mf-name .n { font-family: var(--font-d); font-weight: 600; font-size: 14px; color: var(--ink); }
.mf-name .v { font-family: var(--font-m); font-size: 10.5px; color: var(--ink-3); margin-top: 1px; }
.mf-perms { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.perm { font-family: var(--font-m); font-size: 10px; color: var(--ink-3); border: 1px solid var(--line); background: var(--bg-inset); padding: 2.5px 8px; border-radius: 5px; letter-spacing: .02em; }
.manifest-foot { padding: 20px 24px; border-top: 1px solid var(--line); background: var(--bg-1); display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.manifest-foot .note { font-family: var(--font-m); font-size: 10.5px; color: var(--ink-3); flex: 1; min-width: 220px; letter-spacing: .03em; }
.share-notes { display: grid; gap: 12px; margin-top: 28px; }

/* footer */
.footer { border-top: 1px solid var(--line); background: var(--bg-1); padding: clamp(48px, 6vw, 72px) 0 36px; }
.footer-grid { display: grid; grid-template-columns: 1.5fr repeat(4, 1fr); gap: 36px; margin-bottom: 48px; }
.footer .brand { margin-bottom: 16px; }
.footer-tag { font-size: 13px; color: var(--ink-3); max-width: 30ch; line-height: 1.65; }
.footer-col h4 { font-family: var(--font-m); font-size: 10.5px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 16px; }
.footer-col ul { list-style: none; display: grid; gap: 10px; }
.footer-col a { font-size: 13.5px; color: var(--ink-2); transition: color .2s; }
.footer-col a:hover { color: var(--cyan); }
.footer-bottom {
  border-top: 1px solid var(--line); padding-top: 26px;
  display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;
}
.footer-bottom .fine { font-family: var(--font-m); font-size: 11px; color: var(--ink-3); letter-spacing: .04em; }

/* ---------- 9. Motion & responsive ---------- */
/* The .reveal rules themselves live up in section 1 — see the note there.
   This section is everything else motion-related: reduced-motion overrides
   and the responsive breakpoints. */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  /* transform/opacity for .reveal are already cleared by .is-in (section 1);
     JS adds .is-in to every .reveal immediately when reduced motion is on,
     so no extra override is needed here. */
}

@media (max-width: 1080px) {
  .grid-3, .plugin-grid, .steps, .trust-grid { grid-template-columns: repeat(2, 1fr); }
  .rev-models { grid-template-columns: repeat(3, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr 1fr; gap: 30px; }
  .footer-brand-col { grid-column: 1 / -1; }
  .chain-row { grid-template-columns: 66px 1fr auto; }
  .chain-pipe { display: none; }
  .hero-grid, .gap-grid, .dev-teaser, .dl-grid, .share-grid { grid-template-columns: 1fr; }
  .agent-card { right: 8px; }
  .roadmap-track { grid-template-columns: repeat(3, 1fr); row-gap: 26px; }
  .roadmap-track::before { display: none; }
}
@media (max-width: 760px) {
  .nav-links, .nav-cta .btn { display: none; }
  .nav-toggle { display: grid; }
  .nav-cta { gap: 8px; }
  .nav.is-open .nav-mobile {
    display: block; position: fixed; top: var(--nav-h); left: 0; right: 0;
    background: rgba(6,10,9,.97); backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--line); padding: 18px 24px 26px; z-index: 89;
  }
  .nav-mobile a { display: block; padding: 13px 6px; font-size: 15px; font-weight: 500; color: var(--ink-2); border-bottom: 1px solid var(--line); }
  .nav-mobile a:last-of-type { border-bottom: 0; }
  .nav-mobile .btn { width: 100%; margin-top: 14px; }
  .grid-2, .grid-3, .pain-pair, .dv-actions, .dv-meta, .plugin-grid, .steps, .trust-grid, .rev-models, .price-grid, .cta-final-grid { grid-template-columns: 1fr; }
  .tw-plugins { grid-template-columns: 1fr; }
  .tw-conf { flex-wrap: wrap; gap: 8px 14px; }
  .node-row { grid-template-columns: 26px 1fr; }
  .node-row .params, .node-row .outs { grid-column: 2; }
  .arch-row { grid-template-columns: 1fr; }
  .arch-row .k { border-right: 0; border-bottom: 1px solid var(--line); padding-bottom: 8px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .container { width: calc(100% - 40px); }
  .agent-card { position: relative; right: auto; bottom: auto; width: 100%; margin-top: 16px; animation: none; }
  .mock-stage { padding-bottom: 0; }
  .roadmap-track { grid-template-columns: 1fr 1fr; }
  .faq .answer { padding-left: 0; }
}
@media (max-width: 460px) {
  .roadmap-track { grid-template-columns: 1fr; }
  .hero-ctas .btn { width: 100%; }
}

/* ---------- 10. Accessibility & runtime chrome (added with the pages) ---------- */

/* Skip link — visible only when focused */
.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 200;
  background: var(--cyan); color: #04211f;
  font-family: var(--font-d); font-weight: 600; font-size: 14px;
  padding: 11px 18px; border-radius: 0 0 10px 10px;
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 0; }

/* One consistent focus ring for every interactive element. Keyboard only —
   :focus-visible keeps mouse clicks clean. */
a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
  border-radius: 6px;
}
.paper a:focus-visible, .paper button:focus-visible { outline-color: #0d948c; }

/* Language switch — the third locale needs room, so it moves into the
   drawer on small screens rather than crowding the brand. */
.nav-mobile .lang-switch { margin-top: 16px; width: 100%; }
.nav-mobile .lang-switch button { flex: 1; padding: 9px 8px; font-size: 13px; }

/* Auto-switch notice: quiet, reversible, bottom-left so it never covers a CTA */
.lang-toast {
  position: fixed; left: 20px; bottom: 20px; z-index: 120;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  max-width: min(420px, calc(100vw - 40px));
  border: 1px solid var(--line-2); border-radius: var(--r-m);
  background: rgba(10,16,15,.96); backdrop-filter: blur(12px);
  box-shadow: var(--shadow-3);
  padding: 14px 16px;
  font-size: 13.5px; color: var(--ink-2);
  opacity: 0; transform: translateY(12px);
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.lang-toast.is-in { opacity: 1; transform: none; }
.lang-toast .lt-msg { flex: 1; min-width: 180px; line-height: 1.5; }
.lang-toast .lt-undo {
  font-family: var(--font-d); font-weight: 600; font-size: 13px;
  color: var(--cyan); white-space: nowrap;
  border-bottom: 1px solid var(--cyan-line); padding-bottom: 1px;
}
.lang-toast .lt-undo:hover { color: var(--cyan-hi); }
.lang-toast .lt-x {
  flex: none; width: 24px; height: 24px; border-radius: 6px;
  color: var(--ink-3); font-size: 17px; line-height: 1;
  display: grid; place-items: center;
}
.lang-toast .lt-x:hover { color: var(--ink); background: rgba(255,255,255,.06); }

/* Download page: keep the acquisition card in view while the requirements
   list scrolls past it. */
@media (min-width: 1081px) {
  .dl-card { position: sticky; top: calc(var(--nav-h) + 24px); }
}

/* The share page stacks its notes as separate lines, not a chip row */
.share-notes .chip { align-items: flex-start; line-height: 1.55; padding: 9px 14px; }
.share-notes .chip .dot { margin-top: 6px; }

@media (max-width: 760px) {
  .nav-cta .lang-switch { display: none; }
  .lang-toast { left: 12px; right: 12px; bottom: 12px; max-width: none; }
}

/* Tables never break the page: each wrapper scrolls on its own */
.baseline-wrap > div[style*="overflow"], .card > div[style*="overflow"] { -webkit-overflow-scrolling: touch; }

@media print {
  .nav, .footer, .ticker, .bg-fx, .lang-toast, .skip-link, .agent-card { display: none !important; }
  body { background: #fff; color: #111; }
  .section { padding: 18px 0; }
}

/* ---------- 11. CJK typography & composition refinements ---------- */

/* Latin display sizes are too large for Han/Kana: the glyphs carry far more
   ink per character, so the same cap height reads as shouting and the extra
   width forces breaks mid-word. Tighten the scale and forbid the breaks
   Chinese and Japanese line-breaking rules already disallow. */
:lang(zh) h1, :lang(ja) h1 { font-size: clamp(2.05rem, 3.9vw, 3.35rem); line-height: 1.24; }
:lang(zh) h2, :lang(ja) h2 { font-size: clamp(1.55rem, 2.7vw, 2.2rem);  line-height: 1.32; }
:lang(zh) h3, :lang(ja) h3 { line-height: 1.4; }
:lang(zh) .hero .lead, :lang(ja) .hero .lead,
:lang(zh) .section-head .lead, :lang(ja) .section-head .lead { line-height: 1.85; }
:lang(zh) h1, :lang(ja) h1, :lang(zh) h2, :lang(ja) h2,
:lang(zh) .price-val, :lang(ja) .price-val {
  line-break: strict;
  overflow-wrap: normal;
}
/* CJK paragraphs read better a little narrower than 66ch of Latin text */
:lang(zh) p, :lang(ja) p { max-width: 44em; }

/* Keep the floating agent card mostly below the host window instead of
   sitting on top of the plugin grid and status row it is meant to comment on.
   The stage reserves the card's height as padding, so the card hangs off the
   bottom-right corner and only clips it by a deliberate ~25px. */
.mock-stage { padding-bottom: 140px; }
.agent-card { bottom: 0; right: -14px; }

/* The hero headline sets the page's whole tempo. At the Latin display scale a
   ~570px column ran to six lines, which reads as a paragraph rather than a
   statement; this trims it to four or five and lets the browser even out the
   rag where it supports doing so. */
.hero h1 { font-size: clamp(2.25rem, 4.3vw, 3.55rem); }
h1, h2 { text-wrap: balance; }
.hero .lead, .section-head .lead { text-wrap: pretty; }

@media (max-width: 1080px) {
  .mock-stage { padding-bottom: 126px; }
}
@media (max-width: 760px) {
  .mock-stage { padding-bottom: 0; }
}

/* The pull-quotes carry their own quotation marks in the copy (curly for
   Latin, 「」 for CJK) so the UA-generated pair has to be switched off, or
   every quote renders inside two sets of marks. */
q { quotes: none; }
q::before, q::after { content: ""; }

/* .dot and the roadmap marker are used as <span>/<i>, which are inline by
   default — width/height are ignored there and the marker collapses into a
   thin bar. They are only ever decorative, so force the box explicitly. */
.dot { display: inline-block; }
.tw-dots i, .tw-rail i { display: grid; }

/* .n / .v are spans inside .mf-name; the margin-top on .v shows they were
   meant to stack, which needs an explicit box on an inline element. */
.mf-name .n, .mf-name .v { display: block; }

/* ---------- 12. Nav dropdown, hover-line, sweep buttons, micro-interactions ---------- */
/* Homage to eloqwnt.com's interaction quality: underline reveal on nav links,
   an icon+label+description mega-menu, a fill-sweep on buttons, a grow-from-
   baseline hover panel on list rows, and a micro-scale entrance on the hero.
   All of it is pure CSS — no JS dependency, so it degrades to "just works"
   the moment scripting or a stylesheet fails. */

/* -- nav-link underline reveal -- */
.nav-links a, .dd-trigger {
  position: relative;
}
.nav-links a::after, .dd-trigger::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 6px; height: 1px;
  background: var(--cyan); transform: scaleX(0); transform-origin: left;
  transition: transform .32s cubic-bezier(.65,0,.35,1);
}
.nav-links a:hover::after, .nav-links a:focus-visible::after, .nav-links a.is-active::after,
.dd-trigger:hover::after, .dd-trigger:focus-visible::after, .has-dd:hover > .dd-trigger::after {
  transform: scaleX(1);
}

/* -- Product dropdown (mega-menu) -- */
.has-dd { position: relative; }
.dd-trigger {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 13.5px; font-weight: 500; color: var(--ink-3);
  padding: 8px 12px; border-radius: 8px; transition: color .2s, background .2s;
}
.dd-trigger:hover, .dd-trigger:focus-visible { color: var(--ink); background: rgba(255,255,255,.045); }
.dd-trigger .care { width: 9px; height: 9px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8;
  transition: transform .25s var(--ease); }
.has-dd:hover > .dd-trigger .care, .has-dd:focus-within > .dd-trigger .care { transform: rotate(180deg); }

.dd-panel {
  position: absolute; top: calc(100% + 12px); left: 50%;
  transform: translateX(-50%) translateY(-6px);
  width: min(30rem, 84vw); padding: 10px; z-index: 95;
  border: 1px solid var(--line-2); border-radius: var(--r-l);
  background: rgba(9,14,13,.97); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  box-shadow: var(--shadow-3);
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
}
.has-dd:hover > .dd-panel, .has-dd:focus-within > .dd-panel {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0);
}
/* small invisible bridge so the pointer can travel from trigger to panel without the gap closing it */
.has-dd::after {
  content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 12px;
}
.dd-item {
  display: flex; gap: 10px; align-items: flex-start; padding: 10px 11px;
  border-radius: 10px; transition: background .18s var(--ease);
}
.dd-item:hover, .dd-item:focus-visible { background: rgba(255,255,255,.05); }
.dd-item .ic {
  width: 30px; height: 30px; flex: none; border-radius: 8px;
  background: var(--bg-2); border: 1px solid var(--line); display: grid; place-items: center;
}
.dd-item .ic svg { width: 14px; height: 14px; stroke: var(--cyan); fill: none; stroke-width: 1.6; }
.dd-item .copy { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.dd-item .t { display: block; font-family: var(--font-d); font-weight: 600; font-size: 13.5px; color: var(--ink); }
.dd-item .d { display: block; font-size: 11.5px; color: var(--ink-3); line-height: 1.4; }

.nav-mobile .dd-sub-label {
  font-family: var(--font-m); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-3); padding: 14px 6px 4px;
}
.nav-mobile .dd-sub-link { padding-left: 20px !important; font-size: 14px !important; }

/* -- pill-button fill sweep (ghost buttons) -- */
.btn-ghost {
  position: relative; overflow: hidden; isolation: isolate;
}
.btn-ghost::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, var(--cyan-soft), rgba(56,225,216,.05));
  transform: translateY(102%);
  transition: transform .45s cubic-bezier(.65,0,.35,1);
}
.btn-ghost:hover::before, .btn-ghost:focus-visible::before { transform: translateY(0); }

/* -- primary-button shine sweep -- */
.btn-primary { position: relative; overflow: hidden; isolation: isolate; }
.btn-primary::after {
  content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
  background: linear-gradient(115deg, transparent, rgba(255,255,255,.4), transparent);
  transform: skewX(-18deg); transition: left .6s cubic-bezier(.4,0,.2,1); pointer-events: none;
}
.btn-primary:hover::after, .btn-primary:focus-visible::after { left: 130%; }

/* -- row-grow hover background (chain rows / manifest rows / table rows) -- */
.chain-row, .mf-row, .dd-item {
  isolation: isolate;
}
.chain-row { position: relative; overflow: hidden; }
.chain-row::before {
  content: ""; position: absolute; inset: auto 0 0 0; height: 0%; z-index: -1;
  background: linear-gradient(180deg, transparent, rgba(56,225,216,.07));
  transition: height .5s cubic-bezier(.4,0,.2,1);
}
.chain-row:hover::before { height: 100%; }

/* -- hero micro-scale entrance -- */
@keyframes heroPop {
  from { opacity: 0; transform: scale(.94) translateY(16px); }
  to   { opacity: 1; transform: none; }
}
.js .mock-stage { animation: heroPop .85s cubic-bezier(.16,1,.3,1) both; animation-delay: .1s; }
.js .hero-eyebrow, .js .hero h1, .js .hero .lead, .js .hero-ctas, .js .hero-chips {
  animation: heroPop .7s cubic-bezier(.16,1,.3,1) both;
}
.js .hero h1        { animation-delay: .04s; }
.js .hero .lead      { animation-delay: .1s; }
.js .hero-ctas        { animation-delay: .16s; }
.js .hero-chips        { animation-delay: .21s; }

/* -- subtle hover-scale on diagrams and imagery (never on text blocks) -- */
.tray-window, .dev-constellation, .cost-curve, .arch-strip, .ed-art svg,
.plugin-card .glyph, .mf-name .glyph, .tw-plugin {
  transition: transform .5s cubic-bezier(.22,.61,.2,1), border-color .25s var(--ease), box-shadow .4s;
}
.mock-stage:hover .tray-window { transform: scale(1.012); }
.dev-teaser:hover .dev-constellation { transform: scale(1.015); }
.dev-constellation:hover svg { transform: scale(1.03); }
.dev-constellation svg { transition: transform .6s cubic-bezier(.22,.61,.2,1); }
.gap-grid:hover .cost-curve { transform: scale(1.008); }
.arch-strip:hover { transform: scale(1.006); }
.edition-card:hover .ed-art svg { transform: scale(1.04); }

@media (prefers-reduced-motion: reduce) {
  .js .mock-stage, .js .hero-eyebrow, .js .hero h1, .js .hero .lead, .js .hero-ctas, .js .hero-chips {
    animation: none;
  }
  .btn-primary::after, .btn-ghost::before, .chain-row::before { transition: none; }
}

@media (max-width: 1080px) {
  .dd-panel { left: 0; transform: translateX(0) translateY(-6px); width: min(26rem, 90vw); }
  .has-dd:hover > .dd-panel, .has-dd:focus-within > .dd-panel { transform: translateX(0) translateY(0); }
}
@media (max-width: 760px) {
  .has-dd, .dd-panel { display: none; }
}

/* ---------- 13. Legal document typography (TT7-01/02/03) ---------- */

/* -- long-form reading measure -- */
.law-doc { max-width: 82ch; font-size: 15px; line-height: 1.85; color: var(--ink-2); }
.law-doc > * + * { margin-top: 14px; }
.law-doc p strong { color: var(--ink); font-weight: 600; }
.law-doc code {
  font-family: var(--font-m); font-size: .86em; color: var(--cyan-hi);
  background: var(--cyan-soft); border: 1px solid var(--line-2);
  border-radius: 5px; padding: 1px 5px; white-space: nowrap;
}
.law-doc ol, .law-doc ul { margin: 6px 0 0; padding-left: 22px; display: grid; gap: 8px; }
.law-doc li::marker { font-family: var(--font-m); font-size: 12px; color: var(--cyan); }

/* -- chapter blocks -- */
.law-sec { margin-top: 44px; scroll-margin-top: calc(var(--nav-h) + 24px); }
.law-sec > h3 {
  display: flex; align-items: baseline; gap: 12px;
  font-size: 1.06rem; font-weight: 600; letter-spacing: 0;
  padding-bottom: 10px; margin-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
.law-sec > h3 .cn {
  font-family: var(--font-m); font-size: 12px; font-weight: 500; color: var(--cyan);
  letter-spacing: .08em; flex: none; transform: translateY(-1px);
}
.law-sec h4 { font-size: .95rem; margin: 20px 0 8px; color: var(--ink); }
.law-sub { margin-top: 26px; scroll-margin-top: calc(var(--nav-h) + 24px); }
.law-sub > h4 {
  display: flex; align-items: baseline; gap: 10px;
  font-size: .95rem; font-weight: 600; margin-bottom: 8px;
}
.law-sub > h4 .sn { font-family: var(--font-m); font-size: 11.5px; color: var(--cyan); flex: none; }

/* -- numbered clause paragraphs -- */
.law-clause { display: flex; gap: 12px; align-items: baseline; margin-top: 12px; }
.law-clause .no {
  font-family: var(--font-m); font-size: 11.5px; color: var(--ink-3); flex: none;
  min-width: 3.2ch; text-align: right; transform: translateY(1px);
}
.law-clause p { min-width: 0; }

/* -- compact table variant for dense legal tables -- */
.law-tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; margin-top: 12px; }
.law-tbl th {
  text-align: left; font-family: var(--font-m); font-weight: 500; font-size: 10.5px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3);
  padding: 8px 12px; border-bottom: 1px solid var(--line-2); white-space: nowrap;
}
.law-tbl td {
  padding: 9px 12px; border-bottom: 1px solid var(--line);
  vertical-align: top; line-height: 1.6; color: var(--ink-2);
}
.law-tbl td:first-child { color: var(--ink); }
.law-tbl tr:last-child td { border-bottom: 0; }
.law-tbl .kw { font-family: var(--font-m); font-size: 12px; color: var(--cyan); white-space: nowrap; }
.law-tbl .neg { color: var(--amber); }
.law-tbl-wrap { overflow-x: auto; }

/* -- pull quote / editorial note -- */
.law-quote {
  margin-top: 16px; padding: 14px 18px;
  border-left: 2px solid var(--cyan-line);
  background: linear-gradient(90deg, var(--cyan-soft), transparent 72%);
  font-size: 13.5px; line-height: 1.75; color: var(--ink-2);
  border-radius: 0 var(--r-s) var(--r-s) 0;
}
.law-quote strong { color: var(--ink); }
.law-quote .qk {
  display: block; font-family: var(--font-m); font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--cyan); margin-bottom: 6px;
}

/* -- pending marker 【待定：…】 -- */
.pending-marker {
  font-family: var(--font-m); font-size: .84em; color: var(--amber);
  background: rgba(224,168,80,.09); border: 1px dashed rgba(224,168,80,.45);
  border-radius: 5px; padding: 0 5px; white-space: nowrap;
}

/* -- status banner (draft · pending review · not in force) -- */
.doc-status {
  display: flex; align-items: flex-start; gap: 12px;
  margin-top: 26px; padding: 13px 16px;
  background: rgba(224,168,80,.07); border: 1px solid rgba(224,168,80,.35);
  border-radius: var(--r-m); font-size: 13px; line-height: 1.6; color: var(--ink-2);
}
.doc-status .ic {
  flex: none; width: 24px; height: 24px; border-radius: 7px; margin-top: 1px;
  border: 1px solid rgba(224,168,80,.4); display: grid; place-items: center;
  font-family: var(--font-m); font-size: 13px; color: var(--amber); font-weight: 600;
}
.doc-status .tb strong { color: var(--amber); font-weight: 600; }
.doc-status code {
  font-family: var(--font-m); font-size: .9em; color: var(--amber);
  background: rgba(224,168,80,.1); border-radius: 4px; padding: 0 4px;
}

/* -- document TOC card -- */
.doc-toc {
  margin-top: 26px; padding: 18px 20px 14px;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-m);
}
.doc-toc .toc-t {
  font-family: var(--font-m); font-size: 10.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: 10px;
  display: flex; align-items: center; gap: 10px;
}
.doc-toc .toc-t::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.doc-toc ol {
  list-style: none; display: grid; gap: 2px;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.doc-toc a {
  display: flex; gap: 8px; align-items: baseline;
  padding: 4px 6px; border-radius: 6px; font-size: 13px; color: var(--ink-2);
  transition: background .18s var(--ease), color .18s var(--ease);
}
.doc-toc a:hover, .doc-toc a:focus-visible { background: rgba(255,255,255,.05); color: var(--ink); }
.doc-toc a .n { font-family: var(--font-m); font-size: 10.5px; color: var(--cyan); flex: none; min-width: 2.2ch; }

/* -- appendix template block (verbatim reply formats) -- */
.law-tmpl {
  margin-top: 14px; padding: 16px 18px;
  font-family: var(--font-m); font-size: 12.5px; line-height: 1.75;
  color: var(--ink-2); background: var(--bg-inset);
  border: 1px solid var(--line-2); border-radius: var(--r-m);
  white-space: pre-wrap; word-break: break-word; overflow-x: auto;
}
.law-tmpl-label {
  display: inline-block; margin-top: 18px;
  font-family: var(--font-m); font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-3);
}
.law-tmpl-label + .law-tmpl { margin-top: 8px; }

/* -- definition / redline key row emphasis -- */
.law-tbl td.law-key { font-weight: 600; color: var(--ink); }

/* -- CJK typography adjustment for legal text -- */
:lang(zh) .law-doc, :lang(ja) .law-doc { line-height: 1.95; letter-spacing: .01em; }
:lang(zh) .law-tbl td, :lang(ja) .law-tbl td { line-height: 1.75; }
:lang(zh) .law-quote, :lang(ja) .law-quote { line-height: 1.85; }
:lang(zh) .pending-marker, :lang(ja) .pending-marker { font-family: var(--font-b); font-size: .88em; }

@media (max-width: 760px) {
  .law-toc-sticky { display: none; }
  .doc-toc ol { grid-template-columns: 1fr; }
  .law-clause .no { min-width: 2.6ch; }
}