/* 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); }
/* Security carries more weight than its neighbours: it is what a buyer and a
   data protection officer come here for, and it is the largest body of
   material on the site. Weight and colour rather than a badge, so it reads as
   emphasis and not as a notification. */
.nav-link.is-key { font-weight:700; color:var(--color-brand-700); }
.nav-link.is-key:hover { color:var(--color-brand-800); }
.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); }
.lang-note { font-size:var(--text-xs); color:var(--color-text-muted); align-self:center; }

.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; }
/* The anchor is invisible until the heading is hovered, but it still occupies
   layout — and on a narrow screen a long heading plus a trailing '#' pushes the
   page a few pixels wide. It is also unusable on a touch device, where there is
   no hover. So below the reading width it is not rendered at all. */
@media (max-width: 700px) { .anchor { display:none; } }

.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); }
/* The wrapper scrolls, but a table whose own content will not wrap still pushes
   it wider than the viewport. Swedish is where this showed up — one guide table
   was 5px over at 390. Let long words break rather than widen the page. */
.doc table th, .doc table td { overflow-wrap:anywhere; }
.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; }
}
/* Between the burger breakpoint and a wide desktop the bar has to give
   something up, and it is the three external marketing links: they are the
   longest items in it and they appear in the footer of every page. Adding the
   Security link is what made this necessary.

   1400 rather than the 1180 this was first set to, because 1180 was measured
   against English. Every other language is longer — Swedish was 147px over at
   1200 and German 132 — so the cutoff is set where the widest of the nine
   fits, not where the shortest does. */
@media (max-width: 1400px) {
  .nav-link-ext { display:none; }
}
/* Just above the burger breakpoint the bar is tight, and how tight depends on
   the language: the Turkish blueprint nav is 754px against the English 738,
   which is the difference between fitting at 1024 and being 19px over. Rather
   than collapse every language early for the sake of the longest one, the bar
   gives up some of its own spacing in that band. */
@media (max-width: 1100px) {
  .nav-links { gap:var(--space-3); }
  /* The button keeps its text on one line: a two-line pill in a nav bar reads
     as a bug rather than as a tight fit. It gives up padding instead. */
  .nav-links .btn-sm { padding-inline:var(--space-3); white-space:nowrap; }
}
/* The burger arrives at 1040 rather than the original 820. The bar was sized
   for four items; the blueprint pages now carry seven, and in Turkish they
   need every pixel above 1024. The breakpoint is set where the widest bar was
   measured to fit rather than where it looked about right — 980 was the
   latter, and Turkish was 20px over at 981. */
@media (max-width: 1040px) {
  .burger { display:flex; }
  /* inside the burger menu there is room for them again */
  .nav-link-ext { display:block; }
  .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); }
/* The security card carries more weight than its seven neighbours: it is what
   a buyer, a data protection officer and a security reviewer come here for.
   Magenta is the third brand colour and is unused elsewhere in this band, so
   it reads as "this one is different" rather than as an alert. */
.bp-card.is-key {
  background:linear-gradient(180deg, #fdf6fd 0%, #fff 62%);
  border-color:var(--color-magenta-500); box-shadow:0 1px 0 var(--color-magenta-500) inset;
}
.bp-card.is-key:hover { border-color:var(--color-magenta-600); box-shadow:var(--shadow-lg); }
.bp-card.is-key em { color:var(--color-magenta-600); }
.bp-card.is-key b { color:var(--color-magenta-600); font-size:var(--text-xl); }
.bp-card.is-key > span { color:var(--color-text-primary); }

/* ------------------------------------------------ jurisdiction picker
   Lives here rather than in blueprints.css because the landing page loads
   only this stylesheet and carries the picker too. The --role variables are
   set by blueprints.css on the inner pages and are absent on the landing
   page, so every use of one carries a fallback. */
.jpick { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-5); }
.jpick a { display: block; text-decoration: none; border: 1px solid var(--color-border-strong);
           border-radius: var(--radius-xl); background: var(--color-surface); padding: var(--space-6);
           transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease; }
.jpick a:hover { border-color: var(--role, var(--color-brand-500)); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.jpick em { font-style: normal; display: block; font-family: var(--font-mono); font-size: 11px;
            text-transform: uppercase; letter-spacing: var(--tracking-widest); color: var(--color-text-muted); }
.jpick b { display: block; font-family: var(--font-display); font-size: var(--text-xl);
           color: var(--color-text-primary); margin: var(--space-2) 0 var(--space-1); }
.jpick i { font-style: normal; display: block; font-size: var(--text-sm); font-weight: 600;
           color: var(--role-deep, var(--color-brand-800)); margin-bottom: var(--space-3); }
.jpick span { display: block; font-size: var(--text-sm); color: var(--color-text-secondary); line-height: var(--leading-relaxed); }
.jpick ul { margin: var(--space-4) 0 0; padding: 0; list-style: none; display: grid; gap: var(--space-2); }
.jpick li { font-size: var(--text-sm); color: var(--color-text-secondary); padding-left: var(--space-5); position: relative; }
.jpick li::before { content: '\203A'; position: absolute; left: 0; color: var(--role, var(--color-brand-500)); font-weight: 700; }

/* The security card leads the picker and is deliberately the odd one out:
   it is the shared material every country page sits on, not a country. Same
   magenta the blueprint band uses for its emphasised card, so the two read
   as one idea rather than two accents. */
.jpick a.is-key { background: linear-gradient(180deg, #fdf6fd 0%, var(--color-surface) 62%);
                  border-color: var(--color-magenta-500); box-shadow: 0 1px 0 var(--color-magenta-500) inset; }
.jpick a.is-key:hover { border-color: var(--color-magenta-600); box-shadow: var(--shadow-lg); }
.jpick a.is-key em, .jpick a.is-key b, .jpick a.is-key i { color: var(--color-magenta-600); }
.jpick a.is-key li::before { color: var(--color-magenta-500); }

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