/* ============================================================
   PalMed landing page
   Palette + type inherited from palmed-branding/palmed-theme.css
   ============================================================ */

/* Dark is the DEFAULT theme for every visitor, regardless of OS setting --
   a deliberate brand decision, not a prefers-color-scheme follow. Light stays
   fully available via [data-theme="light"], set by the header toggle. Keep the
   two palettes below in sync: same token names, different values, nothing else. */
:root{
  /* surfaces */
  --paper:#171114;
  --surface:#1F181B;
  --surface-2:#2A2024;
  --rule:#382A2F;
  --rule-strong:#4B383F;
  --ink:#F3EDEC;
  --ink-2:#BFB2B6;
  --ink-3:#9E9297;
  --brand:#EC93AC;
  --brand-deep:#F0A8BC;
  --band-bg:#2A0F19;
  --brand-lift:#F2A6B9;
  --brand-solid:#A8264E;
  --brand-wash:#33202A;
  --on-brand:#FFFFFF;
  --safe:#74C9B7;
  --safe-wash:#17302C;
  --shadow:18px 24px 60px -34px rgba(0,0,0,.75);
  --shadow-sm:0 2px 10px -4px rgba(0,0,0,.5);
  color-scheme:dark;

  --f-display:'Noto Kufi Arabic','Noto Sans Arabic',system-ui,sans-serif;
  --f-body:'Noto Sans Arabic','Inter',system-ui,-apple-system,sans-serif;
  --f-num:'Inter','Noto Sans Arabic',system-ui,sans-serif;

  --wrap:1280px;
  --gutter:clamp(20px,5vw,40px);
}

/* Opt-in light theme. */
:root[data-theme="light"]{
  --paper:#FAF8F7;
  --surface:#FFFFFF;
  --surface-2:#F5F0EE;
  --rule:#E8E4E2;
  --rule-strong:#D9D1CE;
  --ink:#241B1E;
  --ink-2:#5F5559;
  --ink-3:#6E686C;
  --brand:#821B3B;
  --brand-deep:#5C1329;
  --band-bg:#5C1329;
  --brand-lift:#A8264E;
  --brand-solid:#821B3B;
  --brand-wash:#F8EDF1;
  --on-brand:#FFFFFF;
  --safe:#1F6F63;
  --safe-wash:#E9F2F0;
  --shadow:18px 24px 60px -32px rgba(36,27,30,.38);
  --shadow-sm:0 2px 10px -4px rgba(36,27,30,.22);
  color-scheme:light;
}


*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:1rem;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,svg{max-width:100%}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--f-display);font-weight:700;line-height:1.28;text-wrap:balance;margin:0;letter-spacing:-.01em}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
:focus-visible{outline:2px solid var(--brand-lift);outline-offset:3px;border-radius:2px}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.num{font-family:var(--f-num);font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}

/* ---------- eyebrow / section head ---------- */
.eyebrow{
  font-family:var(--f-num);
  font-size:.75rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--brand);display:flex;align-items:center;gap:10px;
}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--brand-lift);flex:none;border-radius:2px}
.sec-head{max-width:62ch;display:flex;flex-direction:column;gap:16px}
.sec-head h2{font-size:clamp(1.65rem,4.2vw,2.5rem)}
.sec-head p{color:var(--ink-2);font-size:clamp(1rem,2.2vw,1.125rem)}
section{padding-block:clamp(56px,9vw,110px)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--f-body);font-size:.9375rem;font-weight:600;
  padding:13px 24px;border-radius:8px;border:1px solid transparent;
  text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:transform .18s ease,background-color .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.btn-primary{background:var(--brand-solid);color:var(--on-brand);box-shadow:0 6px 18px -10px rgba(130,27,59,.9)}
.btn-primary:hover{background:var(--brand-lift);transform:translateY(-2px)}
.btn-ghost{border-color:var(--rule-strong);color:var(--ink);background:transparent}
.btn-ghost:hover{border-color:var(--brand);color:var(--brand);transform:translateY(-2px)}
.btn svg{flex:none}

/* ---------- header ---------- */
.site-header{
  position:sticky;top:0;z-index:60;
  background:color-mix(in srgb,var(--paper) 88%,transparent);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;transition:border-color .25s ease,box-shadow .25s ease;
}
.site-header.stuck{border-bottom-color:var(--rule);box-shadow:0 1px 20px -14px rgba(36,27,30,.6)}
.hdr{display:flex;align-items:center;gap:20px;height:72px}
.logo{display:flex;align-items:center;gap:10px;color:var(--brand);text-decoration:none;flex:none}
.logo svg{width:118px;height:auto;display:block}
.nav{display:flex;align-items:center;gap:4px;margin-inline-start:auto}
.nav a{
  text-decoration:none;color:var(--ink-2);font-size:.9375rem;font-weight:500;
  padding:8px 12px;border-radius:6px;transition:color .18s ease,background-color .18s ease;
}
.nav a:hover{color:var(--brand);background:var(--brand-wash)}
.hdr .btn{margin-inline-start:12px}

/* The header spans the full browser width so the logo and the CTA anchor to the
   window edges instead of floating in with the 1280px content column. Content
   itself stays at --wrap; only this bar is full-bleed. */
.site-header .hdr{max-width:none}

/* Theme toggle. Dark is the default, so the SUN (switch to light) is what shows
   first; the moon appears once the visitor has chosen light. */
.theme-toggle{
  flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:8px;cursor:pointer;
  background:none;border:1px solid var(--rule-strong);color:var(--ink-2);
  transition:color .18s ease,border-color .18s ease,background-color .18s ease;
}
.theme-toggle:hover{color:var(--brand);border-color:var(--brand);background:var(--brand-wash)}
.theme-toggle svg{width:17px;height:17px;display:block}
.theme-toggle .i-moon{display:none}
:root[data-theme="light"] .theme-toggle .i-sun{display:none}
:root[data-theme="light"] .theme-toggle .i-moon{display:block}
.burger{
  display:none;margin-inline-start:auto;background:none;border:1px solid var(--rule-strong);
  border-radius:8px;width:42px;height:42px;align-items:center;justify-content:center;cursor:pointer;color:var(--ink);
}
.burger span{display:block;width:18px;height:1.5px;background:currentColor;position:relative}
.burger span::before,.burger span::after{content:"";position:absolute;inset-inline:0;height:1.5px;background:currentColor}
.burger span::before{top:-6px}.burger span::after{top:6px}
.mobile-nav{display:none;border-top:1px solid var(--rule);background:var(--surface);padding:12px var(--gutter) 20px}
.mobile-nav.open{display:block}
.mobile-nav a{display:block;padding:12px 4px;text-decoration:none;color:var(--ink);font-weight:500;border-bottom:1px solid var(--rule)}
.mobile-nav .btn{width:100%;margin-top:16px}

/* ---------- hero ---------- */
.hero{padding-block:clamp(44px,7vw,86px) clamp(40px,6vw,72px);position:relative;overflow:hidden}
.hero::before{
  content:"";position:absolute;inset-block-start:-260px;inset-inline-start:-180px;
  width:620px;height:620px;border-radius:50%;
  background:radial-gradient(circle,var(--brand-wash) 0%,transparent 68%);
  pointer-events:none;
}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,64px);align-items:center;position:relative}
.hero h1{font-size:clamp(2.05rem,5.6vw,3.5rem);line-height:1.2;margin-block:20px 0}
.hero h1 em{
  font-style:normal;color:var(--brand);white-space:nowrap;
  /* an absolutely-positioned bar collides with Arabic descenders (the ع in
     "تمنع"). a real underline with an offset clears them and skips glyph ink. */
  text-decoration:underline;
  text-decoration-color:color-mix(in srgb,var(--brand-lift) 38%,transparent);
  text-decoration-thickness:.075em;
  text-underline-offset:.24em;
}
.hero-lede{margin-top:22px;font-size:clamp(1.03rem,2.4vw,1.19rem);color:var(--ink-2);max-width:52ch}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.hero-meta{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:28px;color:var(--ink-3);font-size:.875rem}
.hero-meta li{display:flex;align-items:center;gap:7px}
.hero-meta svg{color:var(--safe);flex:none}

/* record cards (hero visual) */
.record-stack{display:flex;flex-direction:column;gap:16px}
.card{
  background:var(--surface);border:1px solid var(--rule);border-radius:14px;
  box-shadow:var(--shadow);overflow:hidden;
}
.card-top{
  display:flex;align-items:center;gap:10px;padding:13px 18px;
  border-bottom:1px solid var(--rule);background:var(--surface-2);
}
.card-top strong{font-size:.875rem;font-weight:600}
.card-top .id{
  margin-inline-start:auto;font-family:var(--f-num);font-size:.75rem;font-weight:600;
  color:var(--ink-3);letter-spacing:.03em;
}
.dot{width:7px;height:7px;border-radius:50%;background:var(--safe);flex:none}
.alert{
  display:flex;align-items:flex-start;gap:11px;margin:16px 18px;padding:12px 14px;
  background:var(--brand-wash);border:1px solid color-mix(in srgb,var(--brand-lift) 26%,transparent);
  border-radius:10px;
}
.alert svg{color:var(--brand-lift);flex:none;margin-top:2px}
.alert b{display:block;font-size:.8125rem;color:var(--brand);font-weight:700}
.alert span{font-size:.8125rem;color:var(--ink-2);line-height:1.5}
.rx{padding:0 18px 18px;display:flex;flex-direction:column;gap:0}
.rx-row{display:flex;align-items:baseline;gap:12px;padding:11px 0;border-bottom:1px dashed var(--rule)}
.rx-row:last-child{border-bottom:none}
.rx-row .k{font-size:.75rem;color:var(--ink-3);width:74px;flex:none}
.rx-row .v{font-size:.875rem;font-weight:500}
.tag{
  display:inline-flex;align-items:center;gap:6px;font-size:.6875rem;font-weight:600;
  padding:3px 9px;border-radius:20px;letter-spacing:.02em;
}
.tag-safe{background:var(--safe-wash);color:var(--safe)}
.tag-brand{background:var(--brand-wash);color:var(--brand)}
.card-lite{padding:16px 18px;display:flex;align-items:center;gap:14px}
.card-lite .ico{
  width:38px;height:38px;border-radius:10px;background:var(--safe-wash);color:var(--safe);
  display:grid;place-items:center;flex:none;
}
.card-lite b{display:block;font-size:.875rem;font-weight:600}
.card-lite span{font-size:.8125rem;color:var(--ink-2)}

/* ---------- stat band ---------- */
.band{background:var(--band-bg);color:#fff;padding-block:clamp(38px,6vw,62px)}
.band-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,4vw,48px)}
.stat .fig{
  font-family:var(--f-num);font-size:clamp(2.1rem,5.5vw,3.1rem);font-weight:700;
  line-height:1;letter-spacing:-.02em;color:#fff;display:block;
}
.stat .fig small{font-size:.62em;font-weight:700;letter-spacing:0;margin-inline-start:2px;vertical-align:baseline}
.stat{display:flex;flex-direction:column;height:100%}
.stat p{margin-top:12px;font-size:.9375rem;line-height:1.6;color:rgba(255,255,255,.82);max-width:30ch}
.stat cite{
  display:block;margin-top:auto;padding-top:14px;font-family:var(--f-num);font-size:.6875rem;font-style:normal;
  letter-spacing:.07em;text-transform:uppercase;color:rgba(255,255,255,.5);
}
.band-grid .stat + .stat{border-inline-start:1px solid rgba(255,255,255,.14);padding-inline-start:clamp(24px,4vw,48px)}

/* ---------- risk cards ---------- */
.risks{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px;margin-top:48px}
.risk{
  background:var(--surface);border:1px solid var(--rule);border-radius:14px;padding:26px 24px;
  display:flex;flex-direction:column;gap:12px;transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;
}
.risk:hover{transform:translateY(-3px);border-color:var(--rule-strong);box-shadow:var(--shadow-sm)}
.risk .ico{width:40px;height:40px;border-radius:10px;background:var(--brand-wash);color:var(--brand);display:grid;place-items:center}
.risk h3{font-size:1.0625rem}
.risk p{color:var(--ink-2);font-size:.9375rem;line-height:1.7}
.scribble{margin-top:4px;color:var(--ink-3);opacity:.7}

/* ---------- evidence spine ---------- */
.evidence{background:var(--surface-2)}
.spine{margin-top:52px;position:relative;padding-inline-start:0}
.spine::before{
  content:"";position:absolute;inset-block:8px 40px;inset-inline-start:71px;
  width:1px;background:linear-gradient(var(--rule-strong) 0 88%,transparent);
}
.entry{display:grid;grid-template-columns:72px 1fr;gap:0 28px;padding-block:0 30px;position:relative}
.entry .year{
  font-family:var(--f-num);font-size:.9375rem;font-weight:700;color:var(--brand);
  text-align:start;padding-top:22px;position:relative;
}
.entry .year::after{
  content:"";position:absolute;inset-inline-start:-6px;top:29px;width:11px;height:11px;
  border-radius:50%;background:var(--brand-lift);border:3px solid var(--surface-2);
}
.entry .body{
  background:var(--surface);border:1px solid var(--rule);border-radius:14px;padding:24px 26px;
  transition:transform .2s ease,box-shadow .2s ease;
}
.entry .body:hover{transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.entry .claim{font-family:var(--f-display);font-weight:700;font-size:clamp(1.06rem,2.4vw,1.3rem);line-height:1.5}
.entry .claim b{color:var(--brand);font-family:var(--f-num);font-weight:700;font-variant-numeric:tabular-nums}
.entry .note{margin-top:12px;color:var(--ink-2);font-size:.9375rem;line-height:1.7}
.entry .src{
  margin-top:16px;padding-top:14px;border-top:1px solid var(--rule);
  font-family:var(--f-num);font-size:.75rem;color:var(--ink-3);letter-spacing:.01em;
  /* NOT a flex row: `gap` would insert a space before the comma that follows
     the <i> journal name, e.g. "J Am Med Inform Assoc , 2013". */
  direction:ltr;text-align:left;line-height:1.6;
}
.entry .src i{font-style:italic}
.disclaimer{
  margin-top:8px;display:flex;gap:12px;align-items:flex-start;
  background:var(--surface);border:1px solid var(--rule);border-inline-start:3px solid var(--brand-lift);
  border-radius:10px;padding:18px 20px;color:var(--ink-2);font-size:.9375rem;line-height:1.7;
}
.disclaimer svg{color:var(--brand);flex:none;margin-top:3px}

/* ---------- mapping risk -> mechanism ---------- */
.map{margin-top:48px;border:1px solid var(--rule);border-radius:16px;overflow:hidden;background:var(--surface)}
.map-row{display:grid;grid-template-columns:1fr 44px 1fr;align-items:center;gap:0;border-bottom:1px solid var(--rule)}
.map-row:last-child{border-bottom:none}
.map-row > div{padding:22px 24px}
.map-risk{color:var(--ink);font-weight:600;font-size:.9375rem;display:flex;gap:11px;align-items:flex-start}
.map-risk .bullet{width:8px;height:8px;border-radius:50%;background:var(--brand-lift);flex:none;margin-top:8px}
.map-arrow{
  display:grid;place-items:center;color:var(--ink-3);padding:0!important;
  background:var(--surface-2);align-self:stretch;
}
.map-fix{background:var(--surface);font-size:.9375rem;color:var(--ink-2);line-height:1.7}
.map-fix b{color:var(--safe);font-weight:600}

/* ---------- features ---------- */
.feat{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:2px;margin-top:48px;
  background:var(--rule);border:1px solid var(--rule);border-radius:16px;overflow:hidden}
.feat li{background:var(--surface);padding:26px 24px;display:flex;flex-direction:column;gap:10px;
  transition:background-color .2s ease}
.feat li:hover{background:var(--surface-2)}
.feat .ico{color:var(--brand)}
.feat h3{font-size:1rem;font-family:var(--f-body);font-weight:700}
.feat p{color:var(--ink-2);font-size:.875rem;line-height:1.65}

/* ---------- local ---------- */
.local{background:var(--surface-2)}
.local-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(32px,5vw,64px);align-items:center}
.local-list{display:flex;flex-direction:column;gap:2px;border-radius:14px;overflow:hidden;border:1px solid var(--rule)}
.local-list li{background:var(--surface);padding:20px 22px;display:flex;gap:14px;align-items:flex-start;
  border-bottom:1px solid var(--rule)}
.local-list li:last-child{border-bottom:none}
.local-list .ico{width:32px;height:32px;border-radius:8px;background:var(--brand-wash);color:var(--brand);
  display:grid;place-items:center;flex:none}
.local-list b{display:block;font-size:.9375rem;font-weight:600;margin-bottom:3px}
.local-list span{font-size:.875rem;color:var(--ink-2);line-height:1.6}

/* ---------- pricing ---------- */
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px;margin-top:48px}
.plan{background:var(--surface);border:1px solid var(--rule);border-radius:16px;padding:28px 26px;
  display:flex;flex-direction:column;gap:8px;position:relative;transition:transform .2s ease,box-shadow .2s ease}
.plan:hover{transform:translateY(-3px);box-shadow:var(--shadow-sm)}
.plan.best{border-color:var(--brand);box-shadow:0 0 0 1px var(--brand)}
.plan .flag{position:absolute;top:-11px;inset-inline-start:26px;background:var(--brand-solid);color:var(--on-brand);
  font-size:.6875rem;font-weight:700;padding:4px 11px;border-radius:20px;letter-spacing:.02em}
.plan h3{font-size:1rem;font-family:var(--f-body);font-weight:700;color:var(--ink-2)}
.plan .price{font-family:var(--f-num);font-size:2.4rem;font-weight:700;color:var(--ink);line-height:1.1;letter-spacing:-.02em}
.plan .price sup{font-size:.42em;font-weight:600;vertical-align:super;margin-inline-end:3px}
.plan .per{font-size:.8125rem;color:var(--ink-3)}
.plan .save{font-size:.8125rem;color:var(--safe);font-weight:600}
.price-note{margin-top:26px;color:var(--ink-2);font-size:.9375rem;display:flex;flex-wrap:wrap;gap:8px 26px}
.price-note li{display:flex;gap:8px;align-items:center}
.price-note svg{color:var(--safe);flex:none}

/* ---------- contact ---------- */
.contact-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(32px,5vw,60px);align-items:start}
.channels{display:flex;flex-direction:column;gap:14px;margin-top:32px}
.channel{display:flex;gap:14px;align-items:flex-start;text-decoration:none;
  background:var(--surface);border:1px solid var(--rule);border-radius:12px;padding:18px 20px;
  transition:border-color .2s ease,transform .2s ease}
.channel:hover{border-color:var(--brand);transform:translateY(-2px)}
.channel .ico{width:36px;height:36px;border-radius:9px;background:var(--brand-wash);color:var(--brand);
  display:grid;place-items:center;flex:none}
.channel b{display:block;font-size:.9375rem;font-weight:600}
.channel span{font-size:.875rem;color:var(--ink-2);font-family:var(--f-num);direction:ltr;display:block;text-align:start}
form{background:var(--surface);border:1px solid var(--rule);border-radius:16px;padding:clamp(22px,4vw,34px);
  box-shadow:var(--shadow-sm)}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{display:flex;flex-direction:column;gap:7px}
.field.full{grid-column:1/-1}
label{font-size:.8125rem;font-weight:600;color:var(--ink-2)}
label .opt{font-weight:400;color:var(--ink-3)}
input,textarea,select{
  font-family:var(--f-body);font-size:.9375rem;color:var(--ink);
  background:var(--paper);border:1px solid var(--rule-strong);border-radius:9px;
  padding:12px 14px;width:100%;transition:border-color .18s ease,box-shadow .18s ease;
}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-wash)}
textarea{resize:vertical;min-height:112px;line-height:1.7}
form .btn{margin-top:20px;width:100%}
.form-note{margin-top:14px;font-size:.8125rem;color:var(--ink-3);line-height:1.6;text-align:center}
.form-ok{
  margin-top:16px;background:var(--safe-wash);color:var(--safe);border-radius:9px;
  padding:13px 16px;font-size:.875rem;font-weight:500;display:none;line-height:1.6;
}
.form-ok.show{display:block}

/* ---------- final CTA ---------- */
.final{background:var(--band-bg);color:#fff;text-align:center;position:relative;overflow:hidden}
.final::before{
  content:"";position:absolute;inset-block-start:-40%;inset-inline-start:50%;transform:translateX(-50%);
  width:min(900px,120%);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.09) 0%,transparent 62%);pointer-events:none;
}
.final .inner{position:relative;display:flex;flex-direction:column;align-items:center;gap:20px;max-width:62ch;margin-inline:auto}
.final h2{font-size:clamp(1.7rem,4.6vw,2.6rem);color:#fff}
.final p{color:rgba(255,255,255,.8);font-size:1.0625rem}
.final .btn-primary{background:#fff;color:var(--band-bg);box-shadow:none}
.final .btn-primary:hover{background:#fff;opacity:.9}
.final .btn-ghost{border-color:rgba(255,255,255,.35);color:#fff}
.final .btn-ghost:hover{border-color:#fff;color:#fff}
.final .row{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:6px}

/* ---------- footer ---------- */
footer{background:var(--paper);border-top:1px solid var(--rule);padding-block:40px}
.foot{display:flex;flex-wrap:wrap;gap:24px;align-items:center}
.foot .logo{color:var(--brand)}
.foot nav{display:flex;flex-wrap:wrap;gap:6px 18px;margin-inline-start:auto}
.foot nav a{
  text-decoration:none;color:var(--ink-2);font-size:.875rem;
  /* padding, not line-height: these are the only nav links on a phone once the
     header nav collapses, and they were landing at a 25px tap target. */
  display:inline-block;padding:9px 4px;
}
.foot nav a:hover{color:var(--brand)}
.copy{width:100%;color:var(--ink-3);font-size:.8125rem;padding-top:22px;margin-top:8px;border-top:1px solid var(--rule)}

/* ---------- reveal ----------
   Progressive enhancement: content is visible by default. Only once JS has
   confirmed it is running (html.js) do we hide it to animate it in. Without
   this, a JS failure or a slow chunk leaves the whole page blank. */
.reveal{transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1)}
.js .reveal{opacity:0;transform:translateY(18px)}
.js .reveal.in{opacity:1;transform:none}
.hero .reveal{transition-delay:var(--d,0ms)}

/* ---------- responsive ---------- */
@media (max-width:960px){
  .hero-grid,.local-grid,.contact-grid{grid-template-columns:1fr}
  .local-grid .sec-head{max-width:none}
  .band-grid{grid-template-columns:1fr}
  .band-grid .stat + .stat{border-inline-start:none;padding-inline-start:0;
    border-top:1px solid rgba(255,255,255,.14);padding-top:26px}
  .nav{display:none}
  .hdr .btn{display:none}
  .burger{display:flex;margin-inline-start:8px}
  .theme-toggle{margin-inline-start:auto;width:42px;height:42px}
  .record-stack{max-width:520px}
}
@media (max-width:640px){
  .hdr{height:64px}
  .logo svg{width:100px}
  .map-row{grid-template-columns:1fr}
  .map-arrow{display:none}
  .map-fix{border-top:1px solid var(--rule);background:var(--surface-2)}
  .map-row > div{padding:18px 20px}
  .fields{grid-template-columns:1fr}
  .spine::before{inset-inline-start:5px}
  .entry{grid-template-columns:1fr;gap:12px}
  .entry .year{padding-top:0;padding-inline-start:26px}
  .entry .year::after{inset-inline-start:0;top:6px}
  .entry .body{margin-inline-start:26px}
  .hero-meta{gap:8px 16px}
  .foot nav{margin-inline-start:0;width:100%}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
  .reveal,.js .reveal{opacity:1;transform:none}
}

/* ============================================================
   SUB-PAGE COMPONENTS
   ============================================================ */

/* compact page hero for inner pages */
.page-hero{
  padding-block:clamp(44px,7vw,80px) clamp(34px,5vw,56px);
  border-bottom:1px solid var(--rule);
  background:var(--surface);position:relative;overflow:hidden;
}
.page-hero::before{
  content:"";position:absolute;inset-block-start:-300px;inset-inline-end:-160px;
  width:560px;height:560px;border-radius:50%;
  background:radial-gradient(circle,var(--brand-wash) 0%,transparent 68%);pointer-events:none;
}
.page-hero .wrap{position:relative}
.page-hero h1{font-size:clamp(1.9rem,5vw,3rem);margin-block:18px 0}
.page-hero .lede{margin-top:20px;color:var(--ink-2);font-size:clamp(1rem,2.3vw,1.15rem);max-width:60ch}
.crumbs{display:flex;gap:8px;align-items:center;font-size:.8125rem;color:var(--ink-3);margin-bottom:6px}
.crumbs a{color:var(--ink-3);text-decoration:none}
.crumbs a:hover{color:var(--brand)}

/* role cards */
.roles{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px;margin-top:48px}
.role{
  background:var(--surface);border:1px solid var(--rule);border-radius:16px;overflow:hidden;
  display:flex;flex-direction:column;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.role:hover{transform:translateY(-3px);box-shadow:var(--shadow-sm);border-color:var(--rule-strong)}
.role header{
  display:flex;align-items:center;gap:12px;padding:20px 24px;
  border-bottom:1px solid var(--rule);background:var(--surface-2);
}
.role header .ico{width:36px;height:36px;border-radius:9px;background:var(--brand-wash);color:var(--brand);display:grid;place-items:center;flex:none}
.role header h3{font-size:1.0625rem}
.role ul{padding:20px 24px 24px;display:flex;flex-direction:column;gap:11px}
.role li{display:flex;gap:10px;align-items:flex-start;font-size:.9375rem;color:var(--ink-2);line-height:1.65}
.role li svg{color:var(--safe);flex:none;margin-top:5px}
/* a restriction ("no permission to prescribe") is still a selling point, but a
   green tick beside it reads as the opposite of what the line says. */
.role li.restrict svg{color:var(--brand)}

/* FAQ */
.faq{margin-top:44px;border:1px solid var(--rule);border-radius:16px;overflow:hidden;background:var(--surface)}
.faq details{border-bottom:1px solid var(--rule)}
.faq details:last-child{border-bottom:none}
.faq summary{
  list-style:none;cursor:pointer;padding:22px 24px;display:flex;align-items:center;gap:14px;
  font-family:var(--f-display);font-weight:700;font-size:1rem;line-height:1.5;
  transition:background-color .18s ease;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{background:var(--surface-2)}
.faq summary::after{
  content:"";margin-inline-start:auto;flex:none;width:10px;height:10px;
  border-inline-end:2px solid var(--brand);border-block-end:2px solid var(--brand);
  transform:rotate(45deg);transition:transform .2s ease;margin-block-end:4px;
}
.faq details[open] summary::after{transform:rotate(-135deg);margin-block:4px 0}
.faq .answer{padding:0 24px 24px;color:var(--ink-2);font-size:.9375rem;line-height:1.8;max-width:70ch}
.faq .answer p + p{margin-top:12px}

/* callout */
.callout{
  margin-top:48px;background:var(--brand-wash);border:1px solid color-mix(in srgb,var(--brand-lift) 24%,transparent);
  border-radius:16px;padding:clamp(24px,4vw,36px);display:flex;flex-wrap:wrap;gap:24px;align-items:center;
}
.callout .txt{flex:1 1 320px;display:flex;flex-direction:column;gap:10px}
.callout h3{font-size:clamp(1.15rem,3vw,1.5rem);color:var(--brand)}
.callout p{color:var(--ink-2);font-size:.9375rem;line-height:1.7}
.callout .btn{flex:none}

/* comparison table */
.tbl-scroll{overflow-x:auto;margin-top:44px;border:1px solid var(--rule);border-radius:16px;background:var(--surface)}
table{border-collapse:collapse;width:100%;min-width:560px}
th,td{text-align:start;padding:16px 20px;border-bottom:1px solid var(--rule);font-size:.9375rem;vertical-align:top}
thead th{
  background:var(--surface-2);font-family:var(--f-num);font-size:.75rem;font-weight:600;
  letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap;
}
tbody tr:last-child td{border-bottom:none}
td:first-child{font-weight:600;color:var(--ink)}
td.yes{color:var(--safe);font-weight:600}
td.no{color:var(--ink-3)}

/* simple prose block */
.prose{max-width:68ch;color:var(--ink-2);font-size:1.0625rem;line-height:1.85;display:flex;flex-direction:column;gap:20px}
.prose h3{color:var(--ink);font-size:1.25rem;margin-top:12px}
.prose strong{color:var(--ink);font-weight:600}
.prose ul{display:flex;flex-direction:column;gap:10px}
.prose ul li{display:flex;gap:11px;align-items:flex-start}
.prose ul li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--brand-lift);flex:none;margin-top:11px}

/* section tint helper */
.tint{background:var(--surface-2)}

/* active nav state */
.nav a.active{color:var(--brand);background:var(--brand-wash)}
.mobile-nav a.active{color:var(--brand)}