/* Raznameh Clinics — guideline site
 * Built on the Raznameh Group design system: three brand colours, the
 * emerald→blue→magenta gradient, Poppins / Inter / JetBrains Mono, pill
 * buttons, 16px cards, alternating white and subtle sections, dark navy
 * reserved for the hero and the footer.
 */

:root {
  /* ROYAL BLUE (primary) */
  --color-brand-50:#eaf1fb; --color-brand-100:#cbddf5; --color-brand-200:#9cbcea;
  --color-brand-300:#6695db; --color-brand-400:#356fc4; --color-brand-500:#0f4ea0;
  --color-brand-600:#073f86; --color-brand-700:#003777; --color-brand-800:#002a5c; --color-brand-900:#001b3d;

  /* EMERALD (accent) */
  --color-accent-50:#e0faf2; --color-accent-100:#b5f2e1; --color-accent-200:#79e8c8;
  --color-accent-300:#2fd9ab; --color-accent-400:#00d0a7; --color-accent-500:#00b88c;
  --color-accent-600:#009a74; --color-accent-700:#007a5c; --color-accent-800:#005c46; --color-accent-900:#00402f;

  /* MAGENTA (gradient terminus) */
  --color-magenta-500:#a1239d; --color-magenta-600:#851c83;

  /* NEUTRAL */
  --color-neutral-0:#ffffff; --color-neutral-50:#f8fafc; --color-neutral-100:#f1f4f9;
  --color-neutral-200:#e3e8f0; --color-neutral-300:#cdd5e1; --color-neutral-400:#97a3b6;
  --color-neutral-500:#687587; --color-neutral-600:#4a5568; --color-neutral-700:#344256;
  --color-neutral-800:#1d293c; --color-neutral-900:#0f1828;

  /* DARK NAVY */
  --color-dark-700:#0a2546; --color-dark-800:#07213f; --color-dark-900:#04142a;

  /* GRADIENTS */
  --gradient-brand: linear-gradient(120deg, var(--color-accent-500) 0%, var(--color-brand-500) 55%, var(--color-magenta-500) 100%);
  --gradient-cta:   linear-gradient(120deg, var(--color-accent-500), var(--color-magenta-500));
  --gradient-mark:  linear-gradient(135deg, var(--color-accent-400), var(--color-brand-600));

  /* SEMANTIC */
  --color-text-primary:var(--color-neutral-900); --color-text-secondary:var(--color-neutral-600);
  --color-text-muted:var(--color-neutral-400); --color-text-brand:var(--color-brand-700);
  --color-bg-default:var(--color-neutral-0); --color-bg-subtle:var(--color-neutral-50);
  --color-border-default:var(--color-neutral-200); --color-border-strong:var(--color-neutral-300);

  /* TYPE */
  --font-display:'Poppins', system-ui, sans-serif;
  --font-body:'Inter', system-ui, sans-serif;
  --font-mono:'JetBrains Mono', ui-monospace, monospace;
  --text-xs:.75rem; --text-sm:.875rem; --text-base:1rem; --text-lg:1.125rem;
  --text-xl:1.25rem; --text-2xl:1.5rem; --text-3xl:1.875rem; --text-4xl:2.25rem;
  --leading-tight:1.2; --leading-snug:1.35; --leading-normal:1.5; --leading-relaxed:1.65;
  --tracking-tight:-.02em; --tracking-tighter:-.04em; --tracking-widest:.16em;

  /* SPACE */
  --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem; --space-5:1.25rem;
  --space-6:1.5rem; --space-8:2rem; --space-10:2.5rem; --space-12:3rem; --space-16:4rem;
  --space-20:5rem; --space-24:6rem;
  --max-width-content:1280px;

  /* EFFECTS */
  --radius-md:8px; --radius-lg:12px; --radius-xl:16px; --radius-2xl:24px; --radius-3xl:32px; --radius-full:9999px;
  --shadow-sm:0 2px 4px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.04);
  --shadow-md:0 4px 12px rgba(0,0,0,.08),0 2px 4px rgba(0,0,0,.04);
  --shadow-lg:0 8px 24px rgba(0,0,0,.10),0 4px 8px rgba(0,0,0,.06);
  --shadow-xl:0 16px 48px rgba(0,0,0,.12),0 8px 16px rgba(0,0,0,.08);
  --shadow-brand:0 4px 20px rgba(7,63,134,.28);
  --shadow-brand-lg:0 8px 40px rgba(7,63,134,.36);
  --ease-default:cubic-bezier(.4,0,.2,1);
  --transition-fast:150ms var(--ease-default);
  --transition-normal:250ms var(--ease-default);
}

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

body {
  margin:0;
  font-family:var(--font-body);
  color:var(--color-text-primary);
  background:var(--color-bg-default);
  line-height:var(--leading-normal);
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4 {
  font-family:var(--font-display);
  margin:0;
  line-height:var(--leading-tight);
  letter-spacing:var(--tracking-tight);
}

a { color:var(--color-brand-500); text-decoration:none; }
a:hover { color:var(--color-accent-600); }

.wrap { width:min(100% - 2.5rem, var(--max-width-content)); margin-inline:auto; }
.grad-text { background:var(--gradient-cta); -webkit-background-clip:text; background-clip:text; color:transparent; }
.eyebrow {
  font-size:var(--text-xs); font-weight:700; letter-spacing:var(--tracking-widest);
  text-transform:uppercase; color:var(--color-accent-600); margin:0 0 var(--space-3);
}
.center { text-align:center; }

/* ---------------------------------------------------------------- buttons */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2);
  height:48px; padding-inline:var(--space-8); border-radius:var(--radius-full);
  font-family:var(--font-body); font-size:var(--text-base); font-weight:600;
  border:1px solid transparent; cursor:pointer;
  transition:transform var(--transition-fast), box-shadow var(--transition-normal), filter var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}
.btn-sm { height:40px; padding-inline:var(--space-6); font-size:var(--text-sm); }
.btn-primary { background:var(--gradient-cta); color:#fff; box-shadow:var(--shadow-brand); }
.btn-primary:hover { filter:brightness(1.07); transform:translateY(-2px); box-shadow:var(--shadow-brand-lg); color:#fff; }
.btn-ghost { background:var(--color-neutral-0); border-color:var(--color-border-strong); color:var(--color-text-primary); }
.btn-ghost:hover { border-color:var(--color-accent-500); color:var(--color-accent-600); transform:translateY(-2px); }
.btn-ghost.on-dark { background:transparent; border-color:rgba(255,255,255,.35); color:#fff; }
.btn-ghost.on-dark:hover { border-color:var(--color-accent-400); color:var(--color-accent-300); }
.btn-invert { background:#fff; color:var(--color-brand-700); }
.btn-invert:hover { transform:translateY(-2px); box-shadow:var(--shadow-lg); }

/* -------------------------------------------------------------------- nav */
.nav {
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.82); backdrop-filter:blur(16px);
  border-bottom:1px solid var(--color-border-subtle, var(--color-neutral-100));
}
.nav-inner { height:76px; display:flex; align-items:center; gap:var(--space-6); }
.brand { display:flex; align-items:center; gap:var(--space-3); color:inherit; }
.mark {
  width:38px; height:38px; border-radius:var(--radius-md); background:var(--gradient-mark);
  display:grid; place-items:center; box-shadow:var(--shadow-brand); overflow:hidden; position:relative; flex:none;
}
.mark img { width:100%; height:100%; object-fit:cover; position:absolute; inset:0; background:#fff; }
.mark-letter { font-family:var(--font-display); font-weight:800; color:#fff; font-size:var(--text-lg); }
.wordmark { font-family:var(--font-display); font-weight:700; font-size:var(--text-lg); letter-spacing:var(--tracking-tight); white-space:nowrap; }
.wm-a { color:var(--color-accent-500); }
.wm-b { color:var(--color-brand-700); }

.nav-links { margin-left:auto; display:flex; align-items:center; gap:var(--space-5); }
.nav-link {
  font-size:var(--text-sm); font-weight:500; color:var(--color-text-secondary);
  display:inline-flex; align-items:center; gap:var(--space-1);
  background:none; border:0; font-family:inherit; cursor:pointer; padding:0;
}
.nav-link:hover { color:var(--color-brand-600); }
.nav-links > .nav-link, .nav-link { white-space:nowrap; }
.has-menu { position:relative; }
.menu {
  position:absolute; top:calc(100% + 14px); left:-var(--space-4); min-width:320px;
  background:#fff; border:1px solid var(--color-border-default); border-radius:var(--radius-xl);
  box-shadow:var(--shadow-xl); padding:var(--space-2); display:none;
}
.has-menu.is-open .menu { display:block; }
.menu-item { display:block; padding:var(--space-3) var(--space-4); border-radius:var(--radius-md); color:inherit; }
.menu-item:hover, .menu-item.is-active { background:var(--color-brand-50); color:inherit; }
.menu-title { display:block; font-weight:600; font-size:var(--text-sm); color:var(--color-text-primary); }
.menu-sub { display:block; font-size:var(--text-xs); color:var(--color-text-secondary); margin-top:2px; }

/* Languages sit on their own strip rather than in a menu: a reader who cannot
   read the page cannot read the word that would open the menu either. */
.langstrip { background:var(--color-brand-50); border-bottom:1px solid var(--color-brand-100); }
.langstrip-inner { display:flex; align-items:center; gap:var(--space-3); min-height:36px; flex-wrap:wrap; }
.langstrip-label {
  font-size:var(--text-xs); font-weight:700; text-transform:uppercase;
  letter-spacing:var(--tracking-widest); color:var(--color-brand-600);
}
.langbar { display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-1); }
.lang {
  font-size:var(--text-xs); font-weight:600; letter-spacing:.01em;
  color:var(--color-text-muted); padding:var(--space-1) var(--space-2);
  border-radius:var(--radius-full); white-space:nowrap;
  transition:color var(--transition-fast), background var(--transition-fast);
}
.lang:hover { color:var(--color-brand-600); background:var(--color-brand-50); }
.lang.is-current { color:#fff; background:var(--gradient-cta); }

.notice {
  border:1px solid var(--color-accent-200); border-radius:var(--radius-xl);
  background:var(--color-accent-50); padding:var(--space-5) var(--space-6);
  margin-bottom:var(--space-8);
}
.notice strong { display:block; color:var(--color-accent-800); font-family:var(--font-display); font-size:var(--text-lg); }
.notice p { margin:var(--space-2) 0 var(--space-3); color:var(--color-neutral-700); font-size:var(--text-sm); }
.notice a { font-size:var(--text-sm); font-weight:600; }

.burger { display:none; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer; padding:var(--space-2); }
.burger span { width:22px; height:2px; background:var(--color-neutral-700); border-radius:2px; }

/* ------------------------------------------------------------------- hero */
.hero { position:relative; background:var(--color-dark-800); color:#fff; overflow:hidden; padding-block:clamp(var(--space-16), 7vw, var(--space-24)); }
.hero::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(60% 50% at 88% 8%, rgba(0,184,140,.28), transparent 60%),
    radial-gradient(55% 55% at 10% 92%, rgba(161,35,157,.26), transparent 62%),
    radial-gradient(70% 60% at 50% 45%, rgba(15,78,160,.35), transparent 70%);
}
.hero > * { position:relative; }
.hero-grid { display:grid; grid-template-columns:1.05fr .95fr; gap:var(--space-16); align-items:center; }
.hero h1 { font-size:clamp(2.4rem, 5.2vw, 4rem); font-weight:800; letter-spacing:var(--tracking-tighter); }
.hero .lede { color:rgba(255,255,255,.78); font-size:var(--text-lg); line-height:var(--leading-relaxed); margin:var(--space-5) 0 var(--space-8); max-width:52ch; }
.hero-actions { display:flex; flex-wrap:wrap; gap:var(--space-4); }

.hero-panel { display:grid; }
.panel-card {
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16);
  border-radius:var(--radius-2xl); padding:var(--space-5); backdrop-filter:blur(16px);
  box-shadow:0 24px 64px rgba(0,0,0,.28);
}
.panel-head { display:flex; gap:6px; padding:0 var(--space-2) var(--space-4); }
.panel-head .dot { width:9px; height:9px; border-radius:var(--radius-full); background:rgba(255,255,255,.28); }
.panel-row {
  display:flex; align-items:center; gap:var(--space-4); padding:var(--space-4);
  border-radius:var(--radius-lg); color:#fff; transition:background var(--transition-fast), transform var(--transition-fast);
}
.panel-row + .panel-row { margin-top:var(--space-2); }
.panel-row:hover { background:rgba(255,255,255,.10); transform:translateX(3px); color:#fff; }
.panel-row span strong { display:block; font-size:var(--text-sm); font-weight:600; }
.panel-row span em { display:block; font-style:normal; font-size:var(--text-xs); color:rgba(255,255,255,.6); }
.panel-row > span:nth-child(2) { flex:1; }
.panel-row svg:last-child { color:rgba(255,255,255,.45); flex:none; }
.panel-icon { width:36px; height:36px; border-radius:var(--radius-md); background:var(--gradient-mark); display:grid; place-items:center; flex:none; }
.panel-icon svg { width:18px; height:18px; color:#fff; }

/* ------------------------------------------------------------------ bands */
.band { padding-block:clamp(var(--space-16), 6vw, var(--space-24)); }
.band-subtle { background:var(--color-bg-subtle); }
.section-title { font-size:clamp(1.8rem, 3vw, var(--text-4xl)); font-weight:700; }
.section-lede { color:var(--color-text-secondary); max-width:62ch; margin:var(--space-4) auto var(--space-12); font-size:var(--text-lg); line-height:var(--leading-relaxed); }

.stats { display:grid; grid-template-columns:repeat(4, 1fr); gap:var(--space-6); }
.stat { text-align:center; border:1px solid var(--color-border-default); border-radius:var(--radius-xl); padding:var(--space-8) var(--space-4); position:relative; overflow:hidden; background:#fff; }
.stat::before { content:''; position:absolute; inset:0 0 auto; height:4px; background:var(--gradient-cta); }
.stat-num { display:block; font-family:var(--font-display); font-weight:800; font-size:clamp(2rem, 4vw, 3rem); background:var(--gradient-cta); -webkit-background-clip:text; background-clip:text; color:transparent; }
.stat-label { display:block; font-size:var(--text-sm); color:var(--color-text-secondary); margin-top:var(--space-2); }

/* ------------------------------------------------------------ category cards */
.cat-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(320px, 1fr)); gap:var(--space-6); }
.cat-card {
  position:relative; background:#fff; border:1px solid var(--color-border-default);
  border-radius:var(--radius-xl); padding:var(--space-8); overflow:hidden;
  transition:transform var(--transition-normal), box-shadow var(--transition-normal);
  display:flex; flex-direction:column;
}
.cat-card::after { content:''; position:absolute; inset:0 0 auto; height:4px; background:var(--gradient-cta); transform:scaleX(0); transform-origin:left; transition:transform var(--transition-normal); }
.cat-card:hover { transform:translateY(-5px); box-shadow:var(--shadow-xl); }
.cat-card:hover::after { transform:scaleX(1); }
.cat-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--space-5); }
.cat-index { font-family:var(--font-mono); font-size:var(--text-sm); color:var(--color-text-muted); }
.icon-tile { width:56px; height:56px; border-radius:var(--radius-lg); background:var(--gradient-mark); display:grid; place-items:center; box-shadow:var(--shadow-brand); }
.icon-tile svg { width:26px; height:26px; color:#fff; }
.cat-card h3 { font-size:var(--text-2xl); font-weight:700; }
.cat-card h3 a { color:var(--color-text-brand); }
.cat-tagline { color:var(--color-text-secondary); margin:var(--space-3) 0 var(--space-4); line-height:var(--leading-relaxed); }
.cat-audience { font-size:var(--text-sm); color:var(--color-text-muted); margin:0 0 var(--space-5); }
.cat-audience span { font-weight:700; color:var(--color-accent-600); text-transform:uppercase; font-size:var(--text-xs); letter-spacing:var(--tracking-widest); margin-right:var(--space-2); }
.cat-subs { list-style:none; margin:0 0 var(--space-4); padding:0; display:grid; gap:var(--space-2); }
.cat-subs li { font-size:var(--text-sm); padding-left:var(--space-5); position:relative; }
.cat-subs li::before { content:''; position:absolute; left:0; top:.55em; width:7px; height:7px; border-radius:var(--radius-full); background:var(--color-accent-400); }
.cat-subs a { color:var(--color-text-secondary); }
.cat-subs a:hover { color:var(--color-brand-600); }
.cat-more { font-size:var(--text-sm); color:var(--color-text-muted); margin:0 0 var(--space-6); }
.cat-card .btn { margin-top:auto; align-self:flex-start; }

/* -------------------------------------------------------------------- CTA */
.cta { background:var(--gradient-brand); border-radius:var(--radius-3xl); padding:clamp(var(--space-10), 5vw, var(--space-20)); text-align:center; color:#fff; }
.cta h2 { font-size:clamp(1.8rem, 3.4vw, var(--text-4xl)); font-weight:700; }
.cta p { color:rgba(255,255,255,.85); max-width:56ch; margin:var(--space-4) auto var(--space-8); font-size:var(--text-lg); }
.cta-actions { display:flex; gap:var(--space-4); justify-content:center; flex-wrap:wrap; }

/* -------------------------------------------------------------- page head */
.page-head { position:relative; background:var(--color-dark-800); color:#fff; overflow:hidden; padding-block:var(--space-12) var(--space-16); }
.page-head::before {
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(60% 60% at 90% 10%, rgba(0,184,140,.24), transparent 60%),
    radial-gradient(50% 60% at 6% 95%, rgba(161,35,157,.22), transparent 62%),
    radial-gradient(70% 60% at 45% 40%, rgba(15,78,160,.32), transparent 72%);
}
.page-head > * { position:relative; }
.page-head h1 { font-size:clamp(2rem, 4.4vw, 3.2rem); font-weight:800; letter-spacing:var(--tracking-tighter); }
.page-head .lede { color:rgba(255,255,255,.78); font-size:var(--text-lg); margin:var(--space-4) 0 0; max-width:60ch; }
.crumbs { display:flex; gap:var(--space-2); font-size:var(--text-sm); color:rgba(255,255,255,.55); margin-bottom:var(--space-6); }
.crumbs a { color:rgba(255,255,255,.75); }
.crumbs a:hover { color:var(--color-accent-300); }
.head-stats { display:flex; gap:var(--space-8); margin-top:var(--space-8); flex-wrap:wrap; }
.head-stats span { font-size:var(--text-sm); color:rgba(255,255,255,.62); }
.head-stats strong { font-family:var(--font-display); font-size:var(--text-xl); color:#fff; display:block; font-weight:700; }

/* ------------------------------------------------------------- doc layout */
.doc-grid { display:grid; grid-template-columns:300px minmax(0, 1fr); gap:var(--space-12); align-items:start; padding-block:var(--space-16); }
.toc { position:sticky; top:136px; max-height:calc(100vh - 166px); overflow:auto; }
.toc-inner { border:1px solid var(--color-border-default); border-radius:var(--radius-xl); padding:var(--space-4); background:#fff; }
.toc-filter { display:flex; align-items:center; gap:var(--space-2); border:1px solid var(--color-border-default); border-radius:var(--radius-full); padding:var(--space-2) var(--space-4); margin-bottom:var(--space-4); color:var(--color-text-muted); }
.toc-filter input { border:0; outline:0; font-family:inherit; font-size:var(--text-sm); width:100%; background:transparent; color:var(--color-text-primary); }
.toc-list, .toc-list ul { list-style:none; margin:0; padding:0; }
.toc-list > li > a { display:flex; gap:var(--space-3); padding:var(--space-2) var(--space-3); border-radius:var(--radius-md); font-size:var(--text-sm); color:var(--color-text-secondary); }
.toc-list > li > a:hover { background:var(--color-brand-50); color:var(--color-brand-700); }
.toc-list > li > a.is-current { background:var(--color-brand-50); color:var(--color-brand-700); font-weight:600; }
.toc-num { font-family:var(--font-mono); font-size:var(--text-xs); color:var(--color-text-muted); min-width:1.6em; }
.toc-list ul { margin:0 0 var(--space-2) var(--space-8); display:none; }
.toc-list > li.is-open ul { display:block; }
.toc-list ul a { display:block; padding:var(--space-1) var(--space-2); font-size:var(--text-xs); color:var(--color-text-muted); }
.toc-list ul a:hover { color:var(--color-brand-600); }

.doc { min-width:0; font-size:var(--text-base); line-height:var(--leading-relaxed); color:var(--color-neutral-700); }
.doc h2 { display:flex; align-items:baseline; gap:var(--space-4); font-size:clamp(1.5rem, 2.6vw, var(--text-3xl)); font-weight:700; color:var(--color-text-brand); margin:var(--space-16) 0 var(--space-5); scroll-margin-top:146px; }
.doc .section:first-child h2 { margin-top:0; }
.sec-num { font-family:var(--font-mono); font-size:var(--text-sm); color:#fff; background:var(--gradient-cta); border-radius:var(--radius-md); padding:.25em .55em; flex:none; }
.doc h3 { font-size:var(--text-xl); font-weight:600; color:var(--color-neutral-800); margin:var(--space-10) 0 var(--space-3); scroll-margin-top:146px; }
.doc h4 { font-size:var(--text-lg); font-weight:600; margin:var(--space-8) 0 var(--space-2); }
.doc p { margin:0 0 var(--space-4); }
.doc strong { color:var(--color-neutral-900); font-weight:600; }
.doc ul, .doc ol { margin:0 0 var(--space-5); padding-left:var(--space-6); }
.doc li { margin-bottom:var(--space-2); }
.doc hr { border:0; border-top:1px solid var(--color-border-default); margin:var(--space-12) 0; }
.anchor { margin-left:var(--space-3); color:var(--color-neutral-300); font-weight:400; opacity:0; transition:opacity var(--transition-fast); font-size:var(--text-base); }
h2:hover .anchor, h3:hover .anchor, h4:hover .anchor { opacity:1; }

.doc blockquote { margin:0 0 var(--space-5); padding:var(--space-4) var(--space-6); border-left:4px solid var(--color-brand-200); background:var(--color-bg-subtle); border-radius:0 var(--radius-lg) var(--radius-lg) 0; color:var(--color-text-secondary); }
.doc blockquote p:last-child { margin-bottom:0; }

.brief { display:grid; gap:var(--space-3); margin:0 0 var(--space-8); padding:var(--space-6); border:1px solid var(--color-border-default); border-left:4px solid var(--color-accent-500); border-radius:0 var(--radius-xl) var(--radius-xl) 0; background:linear-gradient(180deg, var(--color-accent-50), #fff 70%); }
.brief-row { display:grid; grid-template-columns:196px 1fr; gap:var(--space-4); }
.brief-label { font-size:var(--text-xs); font-weight:700; letter-spacing:.10em; text-transform:uppercase; color:var(--color-accent-700); padding-top:.2em; }
.brief-text { color:var(--color-neutral-700); }

.meta { border:1px solid var(--color-border-default); border-radius:var(--radius-xl); padding:var(--space-6); margin-bottom:var(--space-12); background:var(--color-bg-subtle); display:grid; gap:var(--space-3); }
.meta-row { display:grid; grid-template-columns:190px 1fr; gap:var(--space-4); font-size:var(--text-sm); }
.meta-label { font-weight:700; color:var(--color-text-brand); }
.meta-value { color:var(--color-text-secondary); }

.table-wrap { overflow-x:auto; margin:0 0 var(--space-6); border:1px solid var(--color-border-default); border-radius:var(--radius-xl); }
.doc table { border-collapse:collapse; width:100%; font-size:var(--text-sm); }
.doc th { background:var(--color-brand-50); color:var(--color-text-brand); text-align:left; font-weight:600; padding:var(--space-3) var(--space-4); border-bottom:1px solid var(--color-border-default); white-space:nowrap; }
.doc td { padding:var(--space-3) var(--space-4); border-bottom:1px solid var(--color-border-subtle, var(--color-neutral-100)); vertical-align:top; }
.doc tbody tr:nth-child(even) { background:var(--color-neutral-50); }
.doc tbody tr:last-child td { border-bottom:0; }

.doc code { font-family:var(--font-mono); font-size:.86em; background:var(--color-neutral-100); padding:.15em .4em; border-radius:var(--radius-sm, 4px); color:var(--color-brand-700); }
.doc pre.code, .doc pre.mermaid { background:var(--color-neutral-50); border:1px solid var(--color-border-default); border-radius:var(--radius-lg); padding:var(--space-5); overflow-x:auto; margin:0 0 var(--space-6); }
.doc pre.code code { background:none; padding:0; color:var(--color-neutral-700); font-size:var(--text-xs); line-height:var(--leading-snug); }
.doc pre.mermaid { text-align:left; }
.doc pre.mermaid svg { display:block; margin-inline:auto; max-width:100%; height:auto; }

.shot { margin:var(--space-8) 0; text-align:center; }
.shot img { max-width:100%; height:auto; border:1px solid var(--color-border-default); border-radius:var(--radius-xl); box-shadow:var(--shadow-md); }
.shot-phone img { max-width:250px; }
.shot figcaption { font-family:var(--font-mono); font-size:var(--text-xs); color:var(--color-text-muted); margin-top:var(--space-3); }

/* ----------------------------------------------------------------- footer */
.footer { background:var(--color-dark-900); color:rgba(255,255,255,.55); padding-block:var(--space-16) var(--space-8); margin-top:var(--space-16); }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:var(--space-10); }
.footer h4 { color:#fff; font-size:var(--text-sm); font-weight:600; margin-bottom:var(--space-4); }
.footer ul { list-style:none; margin:0; padding:0; display:grid; gap:var(--space-2); font-size:var(--text-sm); }
.footer a { color:rgba(255,255,255,.55); }
.footer a:hover { color:var(--color-accent-400); }
.footer-brand .wm-b { color:#fff; }
.footer-blurb { font-size:var(--text-sm); line-height:var(--leading-relaxed); margin-top:var(--space-4); max-width:44ch; }
.footer-base { display:flex; justify-content:space-between; gap:var(--space-4); flex-wrap:wrap; font-size:var(--text-xs); border-top:1px solid rgba(255,255,255,.10); margin-top:var(--space-12); padding-top:var(--space-6); }

/* ------------------------------------------------------------- responsive */
@media (max-width: 1080px) {
  .hero-grid { grid-template-columns:1fr; gap:var(--space-10); }
  .doc-grid { grid-template-columns:1fr; gap:var(--space-8); }
  .toc { position:static; max-height:none; }
  .toc-list ul { display:none !important; }
  .stats { grid-template-columns:repeat(2, 1fr); }
  .footer-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width: 820px) {
  .burger { display:flex; }
  .nav-links {
    position:absolute; top:112px; left:0; right:0; background:#fff; flex-direction:column;
    align-items:stretch; gap:var(--space-3); padding:var(--space-5);
    border-bottom:1px solid var(--color-border-default); box-shadow:var(--shadow-lg); display:none;
  }
  .nav-links.is-open { display:flex; }
  .menu { position:static; display:block; box-shadow:none; border:0; padding:0; min-width:0; }
  .langstrip-inner { gap:var(--space-2); padding-block:var(--space-2); }
  .brief-row, .meta-row { grid-template-columns:1fr; gap:var(--space-1); }
}
@media (max-width: 560px) {
  .stats, .footer-grid { grid-template-columns:1fr; }
}

/* ------------------------------------------- landing: the system blueprints
   Every edition's landing page links the English overview pages: the
   architecture brief, the session-flow page and the four role blueprints.
   The mini stack is a small echo of the four-layer diagram on the
   architecture page — enough to show the shape, clickable as a whole. */
.mini-stack { display:grid; gap:var(--space-2); max-width:880px; margin:0 auto var(--space-12); }
.mini-layer {
  display:grid; grid-template-columns:auto 1fr; gap:var(--space-4); align-items:center;
  border:1px solid var(--color-border-default); border-left:4px solid var(--ms-accent, var(--color-brand-500));
  border-radius:var(--radius-lg); background:#fff; padding:var(--space-4) var(--space-5); color:inherit;
}
.mini-layer i {
  font-style:normal; font-family:var(--font-mono); font-size:var(--text-xs); font-weight:700;
  width:26px; height:26px; border-radius:var(--radius-full); display:grid; place-items:center;
  background:var(--ms-accent, var(--color-brand-500)); color:#fff; flex:none;
}
.mini-layer b { display:block; font-family:var(--font-display); font-size:var(--text-sm); font-weight:700; }
.mini-layer b span { display:block; font-family:var(--font-body); font-weight:400; font-size:var(--text-xs); color:var(--color-text-secondary); margin-top:2px; }
.ms-1 { --ms-accent:var(--color-accent-500); }
.ms-2 { --ms-accent:var(--color-brand-500); }
.ms-3 { --ms-accent:var(--color-magenta-500); }
.ms-4 { --ms-accent:var(--color-neutral-500); }
.mini-join { text-align:center; font-family:var(--font-mono); font-size:var(--text-xs); color:var(--color-text-muted); line-height:1; }

.bp-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:var(--space-5); }
.bp-card {
  display:block; color:inherit; background:#fff; padding:var(--space-6);
  border:1px solid var(--color-border-default); border-radius:var(--radius-xl);
  transition:transform var(--transition-fast), box-shadow var(--transition-normal), border-color var(--transition-fast);
}
.bp-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-lg); border-color:var(--color-accent-400); color:inherit; }
.bp-card em {
  font-style:normal; font-family:var(--font-mono); font-size:10px; font-weight:700;
  letter-spacing:var(--tracking-widest); text-transform:uppercase; color:var(--color-accent-600);
}
.bp-card b { display:block; font-family:var(--font-display); font-size:var(--text-lg); font-weight:700; margin:var(--space-2) 0 var(--space-2); }
.bp-card > span { display:block; font-size:var(--text-sm); color:var(--color-text-secondary); line-height:var(--leading-snug); }
.bp-en {
  display:inline-block; margin-top:var(--space-4); font-size:10px; font-weight:700;
  letter-spacing:var(--tracking-widest); text-transform:uppercase;
  padding:2px var(--space-3); border-radius:var(--radius-full);
  background:var(--color-brand-50); color:var(--color-brand-700);
}

@media (max-width: 1180px) {
  .bp-grid { grid-template-columns:repeat(3, 1fr); }
}
@media (max-width: 900px) {
  .bp-grid { grid-template-columns:repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .bp-grid { grid-template-columns:1fr; }
}

@media print {
  .nav, .langstrip, .toc, .footer, .page-head::before { display:none !important; }
  .doc-grid { display:block; }
  .page-head { background:#fff; color:#000; padding-block:var(--space-6); }
  .page-head h1, .page-head .lede { color:#000; }
  a { color:#000; }
}