/* ===== 01-tokens.css ===== */
/* ==========================================================================
   SAS 2026 — DESIGN TOKENS
   Concept: "Intelligence in Motion"
   Human expertise → Data → Intelligence → Decision → Patient safety

   The palette is derived from the existing SAS brand, not replaced.
   Key insight: the SAS brand green (#61CE70) is, near enough, the green of an
   ECG trace on a patient monitor. It is used throughout as the *signal* colour
   — the thing that carries information — rather than as decoration.
   ========================================================================== */

:root {
  /* ---- Brand core (extracted from the live Elementor kit) ---------------- */
  --brand-primary:      #13085D;  /* Elementor global "primary"   */
  --brand-secondary:    #352088;  /* Elementor global "secondary" */
  --brand-accent:       #61CE70;  /* Elementor global "accent" — SAS green */
  --brand-logo-green:   #79C843;
  --brand-logo-green-d: #4F9E00;

  /* ---- Ground: the deep clinical night ---------------------------------- */
  --ink-950: #04051A;   /* deepest — page ground for dark sections */
  --ink-900: #070A28;
  --ink-850: #0A0E38;
  --ink-800: #0D1046;   /* close to the site's #0D0E67, deepened  */
  --ink-700: #13085D;   /* brand primary                          */
  --ink-600: #241571;
  --ink-500: #352088;   /* brand secondary                        */

  /* ---- Signal: information, life, confirmation -------------------------- */
  --signal-400: #8CF0A3;
  --signal-500: #61CE70;  /* brand accent — the ECG trace          */
  --signal-600: #3FAE55;
  --signal-700: #2C8940;
  --signal-glow: rgba(97, 206, 112, .32);

  /* ---- Data: the secondary analytical accent, used sparingly ------------ */
  --data-400: #7FD4FF;
  --data-500: #46B4E8;
  --data-600: #2A8DBE;

  /* ---- Alert: reserved strictly for deadlines and warnings -------------- */
  --alert-500: #F5A524;
  --alert-600: #D4860B;

  /* ---- Paper: the light surfaces ---------------------------------------- */
  --paper:      #FFFFFF;
  --paper-50:   #FAFAFC;
  --paper-100:  #F3F4F8;
  --paper-200:  #E8EAF1;
  --paper-300:  #D8DBE6;

  /* ---- Semantic: light context ------------------------------------------ */
  --bg:            var(--paper-50);
  --surface:       var(--paper);
  --surface-sunk:  var(--paper-100);
  --border:        var(--paper-200);
  --border-strong: var(--paper-300);
  --text:          #10132E;
  --text-soft:     #3D4260;
  --text-muted:    #6A7090;
  --heading:       var(--ink-700);

  /* ---- Semantic: dark context (set by .is-dark) -------------------------- */
  --d-bg:            var(--ink-950);
  --d-surface:       rgba(255,255,255,.045);
  --d-surface-2:     rgba(255,255,255,.075);
  --d-border:        rgba(255,255,255,.11);
  --d-border-strong: rgba(255,255,255,.20);
  --d-text:          #EEF0FA;
  --d-text-soft:     #B6BCD8;
  --d-text-muted:    #8189AC;

  /* ---- CTA -------------------------------------------------------------- */
  --cta:         var(--signal-500);
  --cta-hover:   var(--signal-400);
  --cta-ink:     #04231A;
  --cta-ghost-border: rgba(255,255,255,.28);

  /* ---- Typography -------------------------------------------------------- */
  --font-display: "Rajdhani", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-serif:   "Newsreader", Georgia, "Times New Roman", serif;
  --font-mono:    ui-monospace, "SFMono-Regular", "Cascadia Mono", Menlo, Consolas, monospace;

  /* Fluid type scale — 375px → 1600px viewport */
  --fs-display:  clamp(3.25rem, 1.3rem + 8.4vw, 9.5rem);
  --fs-h1:       clamp(2.35rem, 1.25rem + 4.7vw, 5.25rem);
  --fs-h2:       clamp(1.9rem,  1.25rem + 2.8vw, 3.5rem);
  --fs-h3:       clamp(1.3rem,  1.05rem + 1.05vw, 1.9rem);
  --fs-h4:       clamp(1.08rem, 0.99rem + 0.4vw, 1.3rem);
  --fs-lede:     clamp(1.06rem, 0.97rem + 0.42vw, 1.32rem);
  --fs-body:     clamp(0.97rem, 0.94rem + 0.13vw, 1.05rem);
  --fs-small:    0.875rem;
  --fs-tiny:     0.78rem;
  --fs-label:    0.72rem;

  --lh-tight: 0.94;
  --lh-snug:  1.12;
  --lh-head:  1.18;
  --lh-body:  1.68;

  --ls-display: -0.022em;
  --ls-head:    -0.012em;
  --ls-label:   0.16em;

  /* ---- Space (8px base, fluid section rhythm) ---------------------------- */
  --s-1:  .25rem;  --s-2:  .5rem;   --s-3: .75rem;  --s-4: 1rem;
  --s-5:  1.5rem;  --s-6:  2rem;    --s-7: 2.5rem;  --s-8: 3rem;
  --s-9:  4rem;    --s-10: 5rem;    --s-11: 6.5rem; --s-12: 8rem;
  --section-y:    clamp(4rem, 2rem + 7vw, 8.5rem);
  --section-y-sm: clamp(2.75rem, 1.6rem + 4.5vw, 5rem);

  /* ---- Layout ------------------------------------------------------------ */
  --wrap:        1280px;
  --wrap-wide:   1520px;
  --wrap-text:   68ch;
  --gutter:      clamp(1.15rem, .5rem + 2.6vw, 3.5rem);
  --header-h:    76px;
  --header-h-sm: 64px;

  /* ---- Radius: restrained. Cards are 4px, not 24px. ---------------------- */
  --r-xs: 2px;
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 10px;
  --r-pill: 999px;

  /* ---- Elevation: light, tinted with the brand navy ---------------------- */
  --sh-1: 0 1px 2px rgba(16,19,46,.06), 0 1px 1px rgba(16,19,46,.04);
  --sh-2: 0 2px 6px rgba(16,19,46,.07), 0 6px 18px rgba(16,19,46,.06);
  --sh-3: 0 10px 34px rgba(16,19,46,.10), 0 2px 8px rgba(16,19,46,.06);
  --sh-4: 0 24px 64px rgba(10,11,51,.16);

  /* ---- Motion ------------------------------------------------------------ */
  --e-out:    cubic-bezier(.22,.61,.36,1);
  --e-inout:  cubic-bezier(.65,.05,.36,1);
  --e-spring: cubic-bezier(.34,1.42,.64,1);
  --t-fast:   .18s;
  --t-base:   .32s;
  --t-slow:   .6s;

  --z-bg: 0; --z-content: 1; --z-sticky: 40; --z-header: 60; --z-overlay: 80; --z-modal: 90;
}

/* Dark context: any section that opts in re-points the semantic tokens.
   Every component reads only the semantic names, so nothing needs a
   dark-mode variant of its own. The components listed alongside .is-dark are
   permanently dark, so they opt in here rather than relying on markup. */
.is-dark,
.hero,
.page-hero,
.finale,
.footer,
.drawer {
  --bg:            var(--d-bg);
  --surface:       var(--d-surface);
  --surface-sunk:  rgba(0,0,0,.28);
  --border:        var(--d-border);
  --border-strong: var(--d-border-strong);
  --text:          var(--d-text);
  --text-soft:     var(--d-text-soft);
  --text-muted:    var(--d-text-muted);
  --heading:       var(--d-text);
  color: var(--text);
  background-color: var(--bg);
}

@media (prefers-reduced-motion: reduce) {
  :root { --t-fast: .01ms; --t-base: .01ms; --t-slow: .01ms; }
}

/* ===== 02-base.css ===== */
/* ==========================================================================
   SAS 2026 — RESET & BASE
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1.5rem);
  -moz-tab-size: 4; tab-size: 4;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1,h2,h3,h4,h5,h6 { margin: 0; font-weight: 600; color: var(--heading); line-height: var(--lh-head); }
p, ul, ol, dl, figure, blockquote, pre, table { margin: 0; }
ul, ol { padding: 0; list-style: none; }

img, picture, svg, video, canvas {
  display: block; max-width: 100%; height: auto;
}
svg { fill: currentColor; }

/* Icons carry an intrinsic, text-relative size. A viewBox-only <svg> has no
   intrinsic width and would otherwise stretch to fill any flex parent. */
.ic { width: 1.15em; height: 1.15em; flex: none; }

a { color: inherit; text-decoration: none; }
a:not([class]) {
  color: var(--signal-700);
  text-decoration: underline;
  text-underline-offset: .18em;
  text-decoration-thickness: .06em;
  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
  transition: text-decoration-color var(--t-fast) var(--e-out);
}
a:not([class]):hover { text-decoration-color: currentColor; }
.is-dark a:not([class]) { color: var(--signal-400); }

button, input, select, textarea { font: inherit; color: inherit; margin: 0; }
button { background: none; border: 0; cursor: pointer; }

hr { border: 0; border-top: 1px solid var(--border); margin: 0; }

table { border-collapse: collapse; width: 100%; }

strong, b { font-weight: 650; }

::selection { background: var(--signal-500); color: #04231A; }

/* ---- Focus: one visible, high-contrast ring everywhere ------------------ */
:focus { outline: none; }
:focus-visible {
  outline: 3px solid var(--signal-500);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}
.is-dark :focus-visible { outline-color: var(--signal-400); }

/* ---- Skip link ---------------------------------------------------------- */
.skip-link {
  position: fixed; top: 0; left: 50%; transform: translate(-50%, -120%);
  z-index: var(--z-modal);
  background: var(--signal-500); color: #04231A;
  padding: .8rem 1.5rem; font-weight: 700; font-size: var(--fs-small);
  border-radius: 0 0 var(--r-md) var(--r-md);
  transition: transform var(--t-base) var(--e-out);
}
.skip-link:focus-visible { transform: translate(-50%, 0); outline-offset: -4px; }

/* ---- Screen-reader-only ------------------------------------------------- */
.sr-only {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ---- Typographic primitives -------------------------------------------- */
.display {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
}
.h1 { font-family: var(--font-display); font-size: var(--fs-h1); font-weight: 700; line-height: var(--lh-snug); letter-spacing: var(--ls-head); }
.h2 { font-family: var(--font-display); font-size: var(--fs-h2); font-weight: 700; line-height: var(--lh-snug); letter-spacing: var(--ls-head); }
.h3 { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 600; letter-spacing: -.008em; }
.h4 { font-family: var(--font-body);    font-size: var(--fs-h4); font-weight: 650; letter-spacing: -.004em; }

.lede {
  font-size: var(--fs-lede);
  line-height: 1.6;
  color: var(--text-soft);
  font-weight: 380;
  max-width: 62ch;
  text-wrap: pretty;
}

/* The label is the connective tissue of the whole design system:
   a monospaced, tracked-out marker that reads like an instrument readout. */
.label {
  display: inline-flex; align-items: center; gap: .55em;
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-muted);
}
.label::before {
  content: ""; width: 1.75rem; height: 1px;
  background: currentColor; opacity: .5; flex: none;
}
.label--plain::before { display: none; }
.label--signal { color: var(--signal-600); }
.is-dark .label--signal { color: var(--signal-500); }

.prose { max-width: var(--wrap-text); }
.prose p + p { margin-top: 1.1em; }
.prose p { text-wrap: pretty; }

.num {
  font-family: var(--font-display);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}

/* A standalone link (one that is not inside a sentence) needs a tap target of
   at least 24x24 CSS px — WCAG 2.5.8. Apply where a link is a cell's or a
   line's entire content. */
.tap { display: inline-flex; align-items: center; min-height: 26px; padding-block: .3rem; }

/* Balanced headline wrapping, where supported */
h1, h2, .display, .h1, .h2 { text-wrap: balance; }

/* ===== 03-layout.css ===== */
/* ==========================================================================
   SAS 2026 — LAYOUT
   ========================================================================== */

.wrap      { width: 100%; max-width: var(--wrap);      margin-inline: auto; padding-inline: var(--gutter); }
.wrap-wide { width: 100%; max-width: var(--wrap-wide); margin-inline: auto; padding-inline: var(--gutter); }

.section    { padding-block: var(--section-y); position: relative; }
.section-sm { padding-block: var(--section-y-sm); position: relative; }
.section--flush-top { padding-top: 0; }
.section--flush-bottom { padding-bottom: 0; }

/* Section head: label + title + optional lede + optional action ----------- */
.section-head { margin-bottom: clamp(2.25rem, 1rem + 3.4vw, 4rem); }
.section-head__top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s-5); }
.section-head .label { margin-bottom: var(--s-4); }
.section-head__title { max-width: 22ch; }
.section-head .lede { margin-top: var(--s-4); }
.section-head--center { text-align: center; }
.section-head--center .section-head__title { max-width: 26ch; margin-inline: auto; }
.section-head--center .lede { margin-inline: auto; }
.section-head--center .label { justify-content: center; }

/* Grid helpers ------------------------------------------------------------ */
.grid { display: grid; gap: var(--s-6); }
.grid-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.grid-auto { grid-template-columns: repeat(auto-fit, minmax(min(15rem,100%), 1fr)); }

/* Editorial split: sticky aside + flowing content ------------------------- */
.split { display: grid; gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: start; }
@media (min-width: 62rem) {
  .split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .split--aside-right { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .split__sticky { position: sticky; top: calc(var(--header-h) + 2.5rem); }
}

@media (max-width: 62rem) {
  .grid-4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .grid-3 { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 40rem) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0,1fr); }
}

.stack > * + * { margin-top: var(--flow, 1rem); }
.center-text { text-align: center; }

/* ---- The monitoring grid: the recurring background texture -------------
   A precision measurement grid, not a "tech" pattern. Very low contrast. */
.grid-bg { position: relative; isolation: isolate; }
.grid-bg::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(to right,  currentColor 1px, transparent 1px),
    linear-gradient(to bottom, currentColor 1px, transparent 1px);
  background-size: 72px 72px;
  opacity: .045;
  mask-image: radial-gradient(ellipse 90% 70% at 50% 40%, #000 25%, transparent 78%);
}
.is-dark .grid-bg::before { opacity: .08; }

/* ---- Hairline rule that reads as a measurement axis --------------------- */
.rule {
  height: 1px; border: 0; background: var(--border);
  position: relative;
}
.rule--ticked::after {
  content: ""; position: absolute; left: 0; top: 0; width: 4rem; height: 1px;
  background: var(--signal-500);
}

/* ---- Reveal-on-scroll base state (JS adds .is-in) ----------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity .7s var(--e-out),
    transform .7s var(--e-out);
  transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal].is-in { opacity: 1; transform: none; }

/* Never hide content if JS fails or motion is reduced */
.no-js [data-reveal],
@media (prefers-reduced-motion: reduce) { }
.no-js [data-reveal] { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; transition: none; }
}

/* ===== 04-components.css ===== */
/* ==========================================================================
   SAS 2026 — COMPONENTS
   ========================================================================== */

/* --------------------------------------------------------------------------
   BUTTONS
   -------------------------------------------------------------------------- */
.btn {
  --btn-bg: var(--signal-500);
  --btn-ink: #04231A;
  --btn-bd: var(--signal-500);
  display: inline-flex; align-items: center; justify-content: center; gap: .65em;
  padding: .95em 1.6em;
  min-height: 46px;
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 650;
  letter-spacing: .01em;
  text-align: center;
  border: 1px solid var(--btn-bd);
  border-radius: var(--r-sm);
  background: var(--btn-bg);
  color: var(--btn-ink);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: background var(--t-fast) var(--e-out),
              border-color var(--t-fast) var(--e-out),
              color var(--t-fast) var(--e-out),
              transform var(--t-fast) var(--e-out),
              box-shadow var(--t-base) var(--e-out);
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 8px 22px var(--signal-glow); }
.btn:active { transform: translateY(0); }
.btn__icon { flex: none; width: 1.05em; height: 1.05em; transition: transform var(--t-base) var(--e-out); }
.btn:hover .btn__icon { transform: translateX(3px); }

.btn--primary { --btn-bg: var(--signal-500); --btn-bd: var(--signal-500); --btn-ink: #04231A; }
.btn--primary:hover { --btn-bg: var(--signal-400); --btn-bd: var(--signal-400); }

.btn--ghost {
  --btn-bg: transparent; --btn-ink: var(--text); --btn-bd: var(--border-strong);
  box-shadow: none;
}
.btn--ghost:hover { --btn-bd: var(--signal-500); --btn-ink: var(--signal-700); box-shadow: none; }
.is-dark .btn--ghost { --btn-ink: var(--d-text); --btn-bd: var(--cta-ghost-border); }
.is-dark .btn--ghost:hover { --btn-ink: var(--signal-400); --btn-bd: var(--signal-500); }

.btn--solid-ink { --btn-bg: var(--ink-700); --btn-bd: var(--ink-700); --btn-ink: #fff; }
.btn--solid-ink:hover { --btn-bg: var(--ink-500); --btn-bd: var(--ink-500); box-shadow: 0 8px 22px rgba(19,8,93,.25); }

.btn--lg { padding: 1.1em 2em; min-height: 54px; font-size: var(--fs-body); }
.btn--sm { padding: .7em 1.15em; min-height: 38px; font-size: var(--fs-tiny); }
.btn--block { display: flex; width: 100%; }

/* Text link with an animated rule — used for "read more" affordances */
.link-arrow {
  display: inline-flex; align-items: center; gap: .5em;
  font-weight: 650; font-size: var(--fs-small);
  color: var(--signal-700);
  min-height: 26px; padding-block: .2rem;
  padding-bottom: 2px;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px; background-repeat: no-repeat; background-position: 0 100%;
  transition: background-size var(--t-base) var(--e-out);
}
.link-arrow:hover { background-size: 100% 1px; }
.link-arrow svg { width: 1em; height: 1em; transition: transform var(--t-base) var(--e-out); }
.link-arrow:hover svg { transform: translateX(3px); }
.is-dark .link-arrow { color: var(--signal-400); }

/* --------------------------------------------------------------------------
   BADGES / PILLS
   -------------------------------------------------------------------------- */
.badge {
  display: inline-flex; align-items: center; gap: .5em;
  padding: .42em .85em;
  font-size: var(--fs-label); font-weight: 650;
  letter-spacing: .1em; text-transform: uppercase;
  border-radius: var(--r-pill);
  border: 1px solid var(--border-strong);
  color: var(--text-soft);
  background: var(--surface);
  white-space: nowrap;
}
.badge--signal { border-color: color-mix(in srgb, var(--signal-500) 45%, transparent); color: var(--signal-700); background: color-mix(in srgb, var(--signal-500) 9%, transparent); }
.is-dark .badge--signal { color: var(--signal-400); background: color-mix(in srgb, var(--signal-500) 12%, transparent); }
.badge--alert  { border-color: color-mix(in srgb, var(--alert-500) 50%, transparent); color: var(--alert-600); background: color-mix(in srgb, var(--alert-500) 10%, transparent); }
.is-dark .badge--alert { color: var(--alert-500); }
.badge__dot { width: .45em; height: .45em; border-radius: 50%; background: currentColor; flex: none; }
.badge__dot--live { animation: pulse-dot 2.4s var(--e-inout) infinite; }
@keyframes pulse-dot { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.8); } }

/* --------------------------------------------------------------------------
   CARD — restrained: hairline border, 4px radius, no heavy shadow at rest
   -------------------------------------------------------------------------- */
.card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: clamp(1.35rem, 1rem + 1.1vw, 2rem);
  transition: border-color var(--t-base) var(--e-out),
              box-shadow var(--t-base) var(--e-out),
              transform var(--t-base) var(--e-out);
}
.card--hover:hover { border-color: var(--border-strong); box-shadow: var(--sh-3); transform: translateY(-3px); }
.card__title { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 600; color: var(--heading); }
.card__text { margin-top: var(--s-3); color: var(--text-soft); font-size: var(--fs-small); line-height: 1.62; }

/* Card with a signal rule that draws in on hover */
.card--ruled { padding-top: calc(clamp(1.35rem,1rem + 1.1vw,2rem) + 4px); }
.card--ruled::before {
  content: ""; position: absolute; inset: 0 auto auto 0; height: 2px; width: 100%;
  background: var(--signal-500);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--t-slow) var(--e-out);
}
.card--ruled:hover::before, .card--ruled:focus-within::before { transform: scaleX(1); }

/* --------------------------------------------------------------------------
   ICON TILE — geometric, drawn, never a "3D blob"
   -------------------------------------------------------------------------- */
.icon-tile {
  width: 2.9rem; height: 2.9rem; flex: none;
  display: grid; place-items: center;
  border: 1px solid color-mix(in srgb, var(--signal-500) 40%, transparent);
  border-radius: var(--r-sm);
  color: var(--signal-600);
  background: color-mix(in srgb, var(--signal-500) 8%, transparent);
}
.icon-tile svg { width: 1.45rem; height: 1.45rem; }
.is-dark .icon-tile { color: var(--signal-400); background: color-mix(in srgb, var(--signal-500) 10%, transparent); }
.icon-tile--lg { width: 3.6rem; height: 3.6rem; }
.icon-tile--lg svg { width: 1.8rem; height: 1.8rem; }

/* --------------------------------------------------------------------------
   HEADER
   -------------------------------------------------------------------------- */
.header {
  position: fixed; inset: 0 0 auto 0; z-index: var(--z-header);
  height: var(--header-h);
  display: flex; align-items: center;
  transition: background var(--t-base) var(--e-out),
              box-shadow var(--t-base) var(--e-out),
              height var(--t-base) var(--e-out),
              border-color var(--t-base) var(--e-out);
  border-bottom: 1px solid transparent;
}
/* Transparent over a dark hero */
.header[data-state="top"] { background: transparent; color: #fff; }
.header[data-state="top"] .header__cta-ghost { border-color: rgba(255,255,255,.3); color: #fff; }
/* Condensed, opaque after scroll */
.header[data-state="scrolled"] {
  background: color-mix(in srgb, var(--ink-950) 88%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  backdrop-filter: blur(14px) saturate(150%);
  border-bottom-color: rgba(255,255,255,.10);
  color: #fff;
  height: var(--header-h-sm);
  box-shadow: 0 6px 30px rgba(4,5,26,.35);
}
/* Pages that start on light ground */
.header--solid { background: var(--ink-950); color: #fff; border-bottom-color: rgba(255,255,255,.1); }

.header__inner { display: flex; align-items: center; gap: var(--s-6); width: 100%; }
.header__brand { display: flex; align-items: center; gap: .75rem; flex: none; }
.header__logo { height: 40px; width: auto; transition: height var(--t-base) var(--e-out); }
.header[data-state="scrolled"] .header__logo { height: 34px; }
.header__brand-text { display: none; }
@media (min-width: 90rem) {
  .header__brand-text { display: block; border-left: 1px solid rgba(255,255,255,.22); padding-left: .75rem; line-height: 1.15; }
  .header__brand-text b { display: block; font-family: var(--font-display); font-size: .95rem; font-weight: 700; letter-spacing: .01em; }
  .header__brand-text span { font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; opacity: .7; }
}

.header__nav { margin-left: auto; display: none; }
@media (min-width: 68rem) { .header__nav { display: block; } }
.header__list { display: flex; align-items: center; gap: .15rem; }
.header__link {
  display: flex; align-items: center; gap: .35em;
  padding: .6rem .75rem;
  font-size: .86rem; font-weight: 550; letter-spacing: .005em;
  border-radius: var(--r-sm);
  position: relative;
  transition: color var(--t-fast) var(--e-out), background var(--t-fast) var(--e-out);
}
.header__link:hover { background: rgba(255,255,255,.09); }
.header__link[aria-current="page"] { color: var(--signal-400); }
.header__link[aria-current="page"]::after {
  content: ""; position: absolute; left: .75rem; right: .75rem; bottom: .3rem;
  height: 1.5px; background: var(--signal-500);
}
.header__caret { width: .6em; height: .6em; opacity: .6; transition: transform var(--t-fast) var(--e-out); }
.header__item--has-menu:hover .header__caret,
.header__item--has-menu:focus-within .header__caret { transform: rotate(180deg); }

/* Dropdown */
.header__item--has-menu { position: relative; }
.header__menu {
  position: absolute; top: 100%; left: 0; min-width: 15rem;
  padding: .45rem; margin-top: .3rem;
  background: var(--ink-900);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--r-md);
  box-shadow: var(--sh-4);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity var(--t-fast) var(--e-out), transform var(--t-fast) var(--e-out), visibility var(--t-fast);
}
.header__item--has-menu:hover > .header__menu,
.header__item--has-menu:focus-within > .header__menu { opacity: 1; visibility: visible; transform: none; }
.header__menu a {
  display: block; padding: .6rem .8rem; border-radius: var(--r-sm);
  font-size: .85rem; color: rgba(255,255,255,.82);
  transition: background var(--t-fast), color var(--t-fast);
}
.header__menu a:hover { background: rgba(255,255,255,.09); color: #fff; }

.header__actions { display: flex; align-items: center; gap: .5rem; margin-left: auto; }
@media (min-width: 68rem) { .header__actions { margin-left: 0; } }
.header__cta { display: none; }
@media (min-width: 48rem) { .header__cta { display: inline-flex; } }

/* Burger */
.burger {
  width: 44px; height: 44px; display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.2); border-radius: var(--r-sm);
}
@media (min-width: 68rem) { .burger { display: none; } }
.burger__box { width: 18px; height: 12px; position: relative; }
.burger__box i {
  position: absolute; left: 0; width: 100%; height: 1.5px; background: currentColor; border-radius: 2px;
  transition: transform var(--t-base) var(--e-out), opacity var(--t-fast) var(--e-out);
}
.burger__box i:nth-child(1) { top: 0; }
.burger__box i:nth-child(2) { top: 5.25px; }
.burger__box i:nth-child(3) { top: 10.5px; }
[aria-expanded="true"] .burger__box i:nth-child(1) { transform: translateY(5.25px) rotate(45deg); }
[aria-expanded="true"] .burger__box i:nth-child(2) { opacity: 0; }
[aria-expanded="true"] .burger__box i:nth-child(3) { transform: translateY(-5.25px) rotate(-45deg); }

/* --------------------------------------------------------------------------
   MOBILE DRAWER
   -------------------------------------------------------------------------- */
.drawer {
  position: fixed; inset: 0; z-index: var(--z-overlay);
  background: var(--ink-950);
  display: flex; flex-direction: column;
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform var(--t-slow) var(--e-inout), visibility var(--t-slow);
  overscroll-behavior: contain;
}
.drawer.is-open { transform: none; visibility: visible; }
.drawer__top { display: flex; align-items: center; justify-content: space-between; height: var(--header-h); flex: none; color: #fff; }
.drawer__body { flex: 1; overflow-y: auto; padding-block: var(--s-5) var(--s-8); -webkit-overflow-scrolling: touch; }
.drawer__list { border-top: 1px solid rgba(255,255,255,.1); }
.drawer__item { border-bottom: 1px solid rgba(255,255,255,.1); }
.drawer__link {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  width: 100%; padding: 1.05rem .25rem;
  font-family: var(--font-display); font-size: 1.4rem; font-weight: 600;
  color: #fff; text-align: left;
}
.drawer__link svg { width: 1rem; height: 1rem; opacity: .55; transition: transform var(--t-base) var(--e-out); }
.drawer__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.drawer__sub { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--t-base) var(--e-out); }
.drawer__sub > div { overflow: hidden; }
.drawer__toggle[aria-expanded="true"] + .drawer__sub { grid-template-rows: 1fr; }
.drawer__sub a {
  display: block; padding: .6rem .25rem .6rem 1rem;
  font-size: .95rem; color: rgba(255,255,255,.7);
  border-left: 1px solid rgba(255,255,255,.15); margin-left: .25rem;
}
.drawer__sub a:hover { color: var(--signal-400); }
.drawer__sub > div > :last-child { margin-bottom: .85rem; }
.drawer__foot { margin-top: var(--s-7); display: grid; gap: .65rem; }
.drawer__meta { margin-top: var(--s-7); color: rgba(255,255,255,.55); font-size: var(--fs-small); display: grid; gap: .35rem; }
.drawer__meta a { display: inline-flex; align-items: center; min-height: 26px; padding-block: .3rem; }
body.is-locked { overflow: hidden; }

/* --------------------------------------------------------------------------
   FOOTER
   -------------------------------------------------------------------------- */
.footer { background: var(--ink-950); color: var(--d-text); position: relative; overflow: hidden; }
.footer__cta {
  padding-block: clamp(3rem, 2rem + 4vw, 5.5rem);
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.footer__cta-inner { display: grid; gap: var(--s-6); align-items: center; }
@media (min-width: 55rem) { .footer__cta-inner { grid-template-columns: 1fr auto; } }
.footer__cta-title { font-family: var(--font-display); font-size: var(--fs-h2); font-weight: 700; line-height: 1.08; letter-spacing: var(--ls-head); color: #fff; max-width: 18ch; }
.footer__cta-actions { display: flex; flex-wrap: wrap; gap: .75rem; }

.footer__main { padding-block: clamp(2.75rem, 2rem + 3vw, 4.5rem); }
.footer__grid { display: grid; gap: clamp(2rem,1rem + 3vw,3.5rem); }
@media (min-width: 48rem) { .footer__grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 68rem) { .footer__grid { grid-template-columns: 1.6fr repeat(3, 1fr); } }
.footer__logo { height: 46px; width: auto; }
.footer__about { color: var(--d-text-muted); font-size: var(--fs-small); line-height: 1.6; margin-top: var(--s-4); max-width: 34ch; }
.footer__col-title {
  font-size: var(--fs-label); font-weight: 700; letter-spacing: var(--ls-label);
  text-transform: uppercase; color: rgba(255,255,255,.5); margin-bottom: var(--s-4);
}
/* Standalone navigation links carry their own padding so the tap target clears
   WCAG 2.5.8 (24x24 CSS px). Links inside running prose are exempt and keep
   their natural inline size. */
.footer__links { display: grid; gap: .15rem; }
.footer__links a {
  font-size: var(--fs-small); color: var(--d-text-soft);
  transition: color var(--t-fast); width: fit-content;
  padding-block: .35rem; min-height: 26px; display: flex; align-items: center;
}
.footer__links a:hover { color: var(--signal-400); }
.footer__contact { display: grid; gap: .7rem; margin-top: var(--s-5); font-size: var(--fs-small); color: var(--d-text-soft); }
.footer__contact-row { display: flex; gap: .6rem; align-items: flex-start; }
.footer__contact-row svg { width: 1rem; height: 1rem; flex: none; margin-top: .28em; color: var(--signal-500); }
.footer__bottom {
  border-top: 1px solid rgba(255,255,255,.1);
  padding-block: var(--s-5);
  display: flex; flex-wrap: wrap; gap: var(--s-4) var(--s-6);
  align-items: center; justify-content: space-between;
  font-size: var(--fs-tiny); color: var(--d-text-muted);
}
.footer__legal { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); }
.footer__legal a { padding-block: .35rem; min-height: 26px; display: inline-flex; align-items: center; }
.footer__legal a:hover { color: var(--signal-400); }

/* --------------------------------------------------------------------------
   PAGE HERO (inner pages)
   -------------------------------------------------------------------------- */
.page-hero {
  position: relative; isolation: isolate;
  background: var(--ink-950); color: #fff;
  padding-top: calc(var(--header-h) + clamp(3rem, 2rem + 4vw, 6rem));
  padding-bottom: clamp(2.75rem, 2rem + 3vw, 5rem);
  overflow: hidden;
}
.page-hero::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 45%; z-index: -1;
  background: linear-gradient(to top, color-mix(in srgb, var(--ink-700) 55%, transparent), transparent);
}
.page-hero__inner { position: relative; z-index: 1; }
.page-hero__title { font-family: var(--font-display); font-size: var(--fs-h1); font-weight: 700; line-height: 1.02; letter-spacing: var(--ls-display); text-transform: uppercase; color: #fff; max-width: 18ch; }
.page-hero__lede { margin-top: var(--s-5); color: rgba(255,255,255,.72); max-width: 56ch; font-size: var(--fs-lede); line-height: 1.6; }
.page-hero .label { color: var(--signal-500); margin-bottom: var(--s-4); }

/* Breadcrumb */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-size: var(--fs-tiny); color: rgba(255,255,255,.55); margin-bottom: var(--s-5); }
.crumbs a { transition: color var(--t-fast); padding-block: .3rem; display: inline-flex; align-items: center; min-height: 26px; }
.crumbs a:hover { color: var(--signal-400); }
.crumbs li { display: flex; align-items: center; gap: .5rem; }
.crumbs li + li::before { content: "/"; opacity: .45; }
.crumbs [aria-current="page"] { color: rgba(255,255,255,.85); }

/* --------------------------------------------------------------------------
   ECG / WAVEFORM — the signature motif
   -------------------------------------------------------------------------- */
.ecg { display: block; width: 100%; height: auto; overflow: visible; }
.ecg__trace { fill: none; stroke: var(--signal-500); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ecg__trace--soft { stroke: color-mix(in srgb, var(--signal-500) 35%, transparent); stroke-width: 1.25; }

/* Draws the trace once when it enters the viewport */
.ecg--draw .ecg__trace {
  stroke-dasharray: var(--len, 2000);
  stroke-dashoffset: var(--len, 2000);
}
.ecg--draw.is-in .ecg__trace { animation: ecg-draw 2.6s var(--e-out) forwards; }
@keyframes ecg-draw { to { stroke-dashoffset: 0; } }

/* The travelling blip that rides the trace */
.ecg__blip { fill: var(--signal-400); filter: drop-shadow(0 0 6px var(--signal-500)); }

@media (prefers-reduced-motion: reduce) {
  .ecg--draw .ecg__trace { stroke-dasharray: none; stroke-dashoffset: 0; animation: none; }
  .ecg__blip { display: none; }
}

/* --------------------------------------------------------------------------
   NOTICE / CALLOUT
   -------------------------------------------------------------------------- */
.notice {
  display: flex; gap: var(--s-4); align-items: flex-start;
  padding: var(--s-5);
  border: 1px solid var(--border);
  border-left: 3px solid var(--signal-500);
  border-radius: var(--r-sm);
  background: var(--surface);
  font-size: var(--fs-small); line-height: 1.6; color: var(--text-soft);
}
.notice svg { width: 1.15rem; height: 1.15rem; flex: none; margin-top: .2em; color: var(--signal-600); }
.notice--alert { border-left-color: var(--alert-500); }
.notice--alert svg { color: var(--alert-600); }
.notice strong { color: var(--heading); display: block; margin-bottom: .25rem; font-weight: 650; }

/* --------------------------------------------------------------------------
   EMPTY STATE — used wherever content is genuinely not published yet.
   Honest, designed, never a broken-looking gap.
   -------------------------------------------------------------------------- */
.empty {
  text-align: center;
  padding: clamp(2.5rem, 2rem + 4vw, 5rem) var(--s-5);
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-md);
  background: var(--surface);
}
.empty__icon { width: 3rem; height: 3rem; margin-inline: auto; color: var(--text-muted); opacity: .5; }
.empty__title { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 600; margin-top: var(--s-4); color: var(--heading); }
.empty__text { margin-top: var(--s-3); color: var(--text-muted); font-size: var(--fs-small); max-width: 46ch; margin-inline: auto; line-height: 1.6; }
.empty__actions { margin-top: var(--s-6); display: flex; flex-wrap: wrap; gap: .65rem; justify-content: center; }

/* --------------------------------------------------------------------------
   FORMS
   -------------------------------------------------------------------------- */
.field { display: grid; gap: .45rem; }
.field__label { font-size: var(--fs-small); font-weight: 600; color: var(--heading); }
.field__hint { font-size: var(--fs-tiny); color: var(--text-muted); }
.field__req { color: var(--alert-600); }
.input, .textarea, .select {
  width: 100%;
  padding: .8rem .95rem;
  min-height: 46px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  color: var(--text);
  font-size: var(--fs-small);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.input::placeholder, .textarea::placeholder { color: var(--text-muted); opacity: .8; }
.input:focus, .textarea:focus, .select:focus {
  border-color: var(--signal-500);
  box-shadow: 0 0 0 3px var(--signal-glow);
  outline: none;
}
.textarea { min-height: 8rem; resize: vertical; line-height: 1.6; }
.is-dark .input, .is-dark .textarea, .is-dark .select { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.18); color: #fff; }

/* --------------------------------------------------------------------------
   TABLE — responsive, becomes stacked rows on small screens
   -------------------------------------------------------------------------- */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table { width: 100%; font-size: var(--fs-small); }
.table th, .table td { padding: 1rem 1.1rem; text-align: left; border-bottom: 1px solid var(--border); vertical-align: top; }
.table thead th {
  font-size: var(--fs-label); letter-spacing: var(--ls-label); text-transform: uppercase;
  color: var(--text-muted); font-weight: 700; border-bottom-color: var(--border-strong);
}
.table tbody tr { transition: background var(--t-fast); }
.table tbody tr:hover { background: var(--surface-sunk); }

/* ===== 05-hero.css ===== */
/* ==========================================================================
   SAS 2026 — HOME HERO
   The opening statement. Cinematic, but every fact a visitor needs
   (what / when / where / what to do) is legible in the first viewport.
   ========================================================================== */

.hero {
  position: relative;
  isolation: isolate;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--ink-950);
  color: #fff;
  overflow: hidden;
  padding-top: var(--header-h);
}

/* ---- Layer 1: atmospheric ground -------------------------------------- */
.hero__ground {
  position: absolute; inset: 0; z-index: -3;
  background:
    radial-gradient(120% 80% at 78% 8%,  color-mix(in srgb, var(--ink-500) 62%, transparent) 0%, transparent 58%),
    radial-gradient(90%  70% at 12% 92%, color-mix(in srgb, var(--ink-700) 78%, transparent) 0%, transparent 62%),
    linear-gradient(175deg, var(--ink-900) 0%, var(--ink-950) 62%);
}

/* ---- Layer 2: the measurement grid ------------------------------------ */
.hero__grid {
  position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background-image:
    linear-gradient(to right,  rgba(255,255,255,.9) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.9) 1px, transparent 1px);
  background-size: 84px 84px;
  opacity: .05;
  mask-image: radial-gradient(ellipse 78% 62% at 50% 46%, #000 8%, transparent 74%);
}

/* ---- Layer 3: the ECG field --------------------------------------------
   Three traces at different depths, each a wide SVG that translates left by
   exactly one tile-width so the loop is seamless. GPU-composited transform
   only — no layout, no paint, no JS.

   On desktop the field is confined to the right of the measure, so the
   headline always sits on clean ground: the page reads left-to-right as
   human expertise → data, which is the whole argument of the conference. */
.hero__ecg { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
@media (min-width: 62rem) {
  .hero__ecg { left: 44%; }
}
.hero__ecg-lane {
  position: absolute; left: 0; width: 200%;
  display: flex;
  will-change: transform;
  animation: ecg-scroll linear infinite;
}
.hero__ecg-lane svg { width: 50%; height: 100%; flex: none; }
.hero__ecg-lane--a { top: 14%; height: 13vmin; opacity: .45; animation-duration: 26s; }
.hero__ecg-lane--b { top: 42%; height: 22vmin; opacity: .8;  animation-duration: 17s; }
.hero__ecg-lane--c { top: 70%; height: 11vmin; opacity: .3;  animation-duration: 38s; }

@keyframes ecg-scroll { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }

.hero__ecg .ecg__trace  { stroke: var(--signal-500); stroke-width: 1.6; opacity: .5; }
.hero__ecg-lane--b .ecg__trace { stroke-width: 2.2; opacity: .78; filter: drop-shadow(0 0 10px var(--signal-glow)); }
.hero__ecg-lane--c .ecg__trace { stroke: var(--data-500); }

/* Feather every edge so the field dissolves rather than stopping at a line */
.hero__ecg { mask-image: linear-gradient(to bottom, transparent 0%, #000 14%, #000 86%, transparent 100%); }
@media (min-width: 62rem) {
  .hero__ecg {
    mask-image:
      linear-gradient(to bottom, transparent 0%, #000 14%, #000 86%, transparent 100%),
      linear-gradient(to right,  transparent 0%, #000 26%);
    mask-composite: intersect;
    -webkit-mask-composite: source-in;
  }
}
/* Below the desktop breakpoint the field sits behind the type, so it is
   pushed much further back and a scrim guarantees text contrast. */
@media (max-width: 62rem) {
  .hero__ecg { opacity: .5; }
  .hero__body::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(to right, var(--ink-950) 0%, color-mix(in srgb, var(--ink-950) 72%, transparent) 55%, transparent 100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__ecg-lane { animation: none; }
}

/* ---- Content ------------------------------------------------------------ */
.hero__body {
  flex: 1;
  display: flex; align-items: center;
  padding-block: clamp(.75rem, 2.4svh, 2.75rem);
  position: relative; z-index: 2;
}
.hero__inner { width: 100%; }
/* Keep the copy clear of the data field on the right */
@media (min-width: 62rem) {
  .hero__eyebrow, .hero__theme, .hero__lede, .hero__actions { max-width: 52%; }
}

.hero__eyebrow {
  display: flex; flex-wrap: wrap; align-items: center; gap: .8rem;
  margin-bottom: clamp(.7rem, 1.9svh, 1.75rem);
}
.hero__edition {
  display: inline-flex; align-items: baseline; gap: .3em;
  font-family: var(--font-display); font-weight: 700;
  font-size: .95rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--signal-500);
  padding: .3em .7em;
  border: 1px solid color-mix(in srgb, var(--signal-500) 40%, transparent);
  border-radius: var(--r-sm);
}
.hero__society {
  font-size: var(--fs-label); font-weight: 600;
  letter-spacing: var(--ls-label); text-transform: uppercase;
  color: rgba(255,255,255,.6);
}

/* ---- The wordmark: the identity dominates ------------------------------
   Sized against BOTH axes. The svh term caps the type on short viewports so
   the vitals strip below is never pushed past the fold — the identity stays
   the biggest thing on the page without costing the visitor the facts.    */
.hero__title { margin: 0; --hero-word: clamp(2.4rem, min(10.2vw, 11.1svh), 9.5rem); }
.hero__word {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  line-height: .86;
  letter-spacing: -.028em;
  white-space: nowrap;
  color: #fff;
  font-size: var(--hero-word);
}
.hero__word--lg { font-size: calc(var(--hero-word) * 1.155); }
/* "AI" inside ANESTHESIA — the conference's own idea, made deliberate */
.hero__ai {
  color: var(--signal-500);
  position: relative;
  text-shadow: 0 0 34px var(--signal-glow);
}
.hero__word--anesthesia { position: relative; }

.hero__theme {
  margin-top: clamp(.6rem, 1.7svh, 1.5rem);
  display: flex; align-items: center; gap: .9rem;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, .85rem + .85vw, 1.75rem);
  font-weight: 600; letter-spacing: .01em;
  color: rgba(255,255,255,.9);
}
.hero__theme::before {
  content: ""; width: clamp(1.5rem,3vw,3.5rem); height: 2px; flex: none;
  background: var(--signal-500);
}

.hero__lede {
  margin-top: clamp(.65rem, 1.8svh, 1.6rem);
  max-width: 54ch;
  color: rgba(255,255,255,.7);
  font-size: var(--fs-lede); line-height: 1.62; font-weight: 380;
}

.hero__actions {
  margin-top: clamp(1rem, 2.6svh, 2.5rem);
  display: flex; flex-wrap: wrap; gap: .75rem;
}

/* ---- The vitals strip --------------------------------------------------
   The instrument readout. This is where the hero stops being a poster and
   starts being useful: what / when / where / deadline / countdown, always
   in the first viewport, at full contrast.                                */
.vitals {
  position: relative; z-index: 2;
  border-top: 1px solid rgba(255,255,255,.14);
  background: color-mix(in srgb, var(--ink-950) 72%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.vitals__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
}
.vitals__cell {
  padding: clamp(.7rem, 1.7svh, 1.5rem) 0;
  padding-right: var(--s-5);
  position: relative;
}
.vitals__cell + .vitals__cell { padding-left: var(--s-5); }
.vitals__cell + .vitals__cell::before {
  content: ""; position: absolute; left: 0; top: 20%; bottom: 20%; width: 1px;
  background: rgba(255,255,255,.14);
}
.vitals__k {
  display: flex; align-items: center; gap: .45em;
  font-size: var(--fs-label); font-weight: 650;
  letter-spacing: var(--ls-label); text-transform: uppercase;
  color: rgba(255,255,255,.5);
}
.vitals__k svg { width: .95em; height: .95em; color: var(--signal-500); }
.vitals__v {
  margin-top: .4rem;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, .9rem + .55vw, 1.4rem);
  font-weight: 700; letter-spacing: .005em;
  color: #fff;
}
.vitals__v small { display: block; font-family: var(--font-body); font-size: var(--fs-tiny); font-weight: 400; letter-spacing: 0; color: rgba(255,255,255,.55); margin-top: .15rem; }
.vitals__v--signal { color: var(--signal-500); }
.vitals__v--alert  { color: var(--alert-500); }

@media (max-width: 40rem) {
  .vitals__grid { grid-template-columns: 1fr 1fr; }
  .vitals__cell { padding-right: var(--s-4); }
  .vitals__cell:nth-child(odd) { padding-left: 0; }
  .vitals__cell:nth-child(odd)::before { display: none; }
  .vitals__cell:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,.12); }
}

/* ---- Scroll cue --------------------------------------------------------- */
.hero__cue {
  position: absolute; left: 50%; bottom: calc(100% + 1.4rem); transform: translateX(-50%);
  display: none; align-items: center; gap: .5rem;
  font-size: var(--fs-label); letter-spacing: var(--ls-label); text-transform: uppercase;
  color: rgba(255,255,255,.45);
}
@media (min-height: 46rem) and (min-width: 48rem) { .hero__cue { display: flex; } }
.hero__cue svg { width: 1rem; height: 1rem; animation: cue-bob 2.4s var(--e-inout) infinite; }
@keyframes cue-bob { 0%,100% { transform: translateY(-2px); opacity: .5; } 50% { transform: translateY(3px); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .hero__cue svg { animation: none; } }

/* ===== 06-sections.css ===== */
/* ==========================================================================
   SAS 2026 — SECTIONS
   ========================================================================== */

/* --------------------------------------------------------------------------
   COUNTDOWN
   -------------------------------------------------------------------------- */
.countdown { background: var(--ink-900); color: #fff; border-bottom: 1px solid rgba(255,255,255,.08); }
.countdown__inner { display: grid; gap: var(--s-6); align-items: center; padding-block: clamp(2rem, 1.5rem + 2.4vw, 3.5rem); }
@media (min-width: 62rem) { .countdown__inner { grid-template-columns: auto 1fr auto; gap: var(--s-9); } }
.countdown__label { color: rgba(255,255,255,.55); }
.countdown__label b { display: block; font-family: var(--font-display); font-size: 1.15rem; font-weight: 650; color: #fff; letter-spacing: .01em; margin-top: .3rem; }

.countdown__clock { display: flex; gap: clamp(.5rem, .3rem + 1.2vw, 1.5rem); }
.cd-unit { flex: 1; text-align: center; position: relative; }
.cd-unit + .cd-unit::before {
  content: ":"; position: absolute; left: calc(-.5 * clamp(.5rem,.3rem + 1.2vw,1.5rem)); top: .1em;
  transform: translateX(-50%);
  font-family: var(--font-display); font-size: clamp(1.4rem,3vw,2.4rem); font-weight: 700;
  color: rgba(255,255,255,.2);
}
.cd-unit__n {
  display: block;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2.1rem, 1.2rem + 3.6vw, 4.2rem);
  line-height: 1; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  color: #fff;
}
.cd-unit__k {
  display: block; margin-top: .5rem;
  font-size: var(--fs-label); font-weight: 650;
  letter-spacing: var(--ls-label); text-transform: uppercase;
  color: rgba(255,255,255,.45);
}
.cd-unit--now .cd-unit__n { color: var(--signal-500); }

/* The deadline chip beside the clock */
.countdown__aside { display: grid; gap: .7rem; }
@media (max-width: 62rem) { .countdown__aside { grid-auto-flow: column; grid-auto-columns: 1fr; } }
@media (max-width: 34rem) { .countdown__aside { grid-auto-flow: row; } }

/* --------------------------------------------------------------------------
   THE CHAIN — "Intelligence in Motion" told as a sequence
   Human expertise → Data → Intelligence → Decision → Patient safety
   -------------------------------------------------------------------------- */
.chain { background: var(--bg); }
.chain__trace { height: clamp(2.5rem, 5vw, 4.5rem); margin-bottom: -1px; opacity: .55; }
.chain__trace .ecg { height: 100%; }
.chain__list {
  display: grid; gap: 0;
  counter-reset: chain;
  border-top: 1px solid var(--border);
}
@media (min-width: 62rem) {
  .chain__list { grid-template-columns: repeat(5, 1fr); border-top: 0; }
}
.chain__step {
  counter-increment: chain;
  position: relative;
  padding: clamp(1.5rem, 1.2rem + 1.4vw, 2.4rem) 0;
  border-bottom: 1px solid var(--border);
}
@media (min-width: 62rem) {
  .chain__step { border-bottom: 0; border-top: 1px solid var(--border); padding-right: var(--s-6); }
  .chain__step::before {
    content: ""; position: absolute; top: -1px; left: 0; height: 2px; width: 0;
    background: var(--signal-500);
    transition: width 1.1s var(--e-out);
    transition-delay: var(--chain-delay, 0ms);
  }
  .chain__list.is-in .chain__step::before { width: 100%; }
}
.chain__n {
  font-family: var(--font-display); font-size: var(--fs-label); font-weight: 700;
  letter-spacing: var(--ls-label); color: var(--signal-600);
}
.chain__n::before { content: "0" counter(chain); }
.chain__t {
  margin-top: .7rem;
  font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 650;
  color: var(--heading); line-height: 1.15;
}
.chain__d { margin-top: .55rem; font-size: var(--fs-small); color: var(--text-soft); line-height: 1.6; max-width: 30ch; }
.is-dark .chain__n { color: var(--signal-500); }

/* --------------------------------------------------------------------------
   PILLARS — an interactive exhibit, not a card grid.
   Desktop: a row of vertical panels; the active one expands.
   Mobile:  an accordion.
   -------------------------------------------------------------------------- */
.pillars { background: var(--ink-950); color: #fff; }
.pillars .section-head__title, .pillars .h2 { color: #fff; }

.pillars__rack { display: grid; gap: 2px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.1); border-radius: var(--r-md); overflow: hidden; }
@media (min-width: 62rem) {
  .pillars__rack {
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    min-height: 27rem;
    transition: grid-template-columns var(--t-slow) var(--e-inout);
  }
  .pillars__rack:has(.pillar[aria-expanded="true"]) { grid-auto-columns: minmax(0, .62fr); }
  .pillars__rack:has(.pillar[aria-expanded="true"]) .pillar[aria-expanded="true"] { grid-column: span 1; }
}

.pillar {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--ink-900);
  color: #fff;
  text-align: left;
  padding: clamp(1.25rem, 1rem + 1vw, 2rem);
  transition: background var(--t-base) var(--e-out), flex-grow var(--t-slow) var(--e-inout);
  min-width: 0;
}
.pillar:hover { background: var(--ink-850); }
.pillar[aria-expanded="true"] { background: var(--ink-800); }

@media (min-width: 62rem) {
  .pillars__rack { display: flex; }
  .pillar { flex: 1 1 0; }
  .pillar[aria-expanded="true"] { flex-grow: 2.35; }
}

.pillar__n {
  font-family: var(--font-display); font-size: var(--fs-label); font-weight: 700;
  letter-spacing: var(--ls-label); color: rgba(255,255,255,.4);
}
.pillar__icon { margin-top: auto; padding-top: var(--s-6); }
.pillar__icon svg { width: 2.1rem; height: 2.1rem; color: var(--signal-500); transition: transform var(--t-slow) var(--e-out); }
.pillar[aria-expanded="true"] .pillar__icon svg { transform: scale(1.12); }
.pillar__t {
  margin-top: var(--s-4);
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1rem + .55vw, 1.6rem);
  font-weight: 650; line-height: 1.1; color: #fff;
}
.pillar__d {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows var(--t-slow) var(--e-inout), opacity var(--t-base) var(--e-out);
  opacity: 0;
}
.pillar__d > span { overflow: hidden; display: block; }
.pillar[aria-expanded="true"] .pillar__d { grid-template-rows: 1fr; opacity: 1; }
.pillar__d span span { display: block; padding-top: .8rem; font-size: var(--fs-small); line-height: 1.62; color: rgba(255,255,255,.72); max-width: 32ch; }
/* the active marker */
.pillar::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--signal-500);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--t-slow) var(--e-out);
}
.pillar[aria-expanded="true"]::after { transform: scaleX(1); }

@media (max-width: 62rem) {
  .pillar { padding-block: 1.1rem; }
  .pillar__icon { padding-top: 0; margin-top: 0; position: absolute; right: 1rem; top: 1.1rem; }
  .pillar__icon svg { width: 1.5rem; height: 1.5rem; }
  .pillar__t { margin-top: .35rem; padding-right: 2.5rem; }
}

/* --------------------------------------------------------------------------
   OBJECTIVES — an editorial numbered list, not a grey slab
   -------------------------------------------------------------------------- */
.objectives__list { counter-reset: obj; border-top: 1px solid var(--border); }
.obj {
  counter-increment: obj;
  display: grid; gap: var(--s-3) var(--s-6);
  grid-template-columns: auto 1fr;
  align-items: start;
  padding-block: clamp(1.1rem, .9rem + .9vw, 1.75rem);
  border-bottom: 1px solid var(--border);
  transition: background var(--t-base);
}
.obj:hover { background: color-mix(in srgb, var(--signal-500) 4%, transparent); }
.obj__n {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2.4rem);
  line-height: 1; letter-spacing: -.02em;
  color: color-mix(in srgb, var(--signal-500) 90%, var(--text));
  min-width: 2.2ch;
  font-variant-numeric: tabular-nums;
}
.obj__n::before { content: counter(obj, decimal-leading-zero); }
.obj__t {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, .98rem + .6vw, 1.55rem);
  font-weight: 550; line-height: 1.28;
  color: var(--heading);
  max-width: 34ch;
}
.is-dark .obj__t { color: #fff; }
.is-dark .obj:hover { background: rgba(255,255,255,.035); }

/* --------------------------------------------------------------------------
   AI FOCUS — reads like a clinical system panel
   -------------------------------------------------------------------------- */
.aifocus { background: var(--ink-950); color: #fff; position: relative; overflow: hidden; }
.aifocus__panel {
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--r-md);
  background: linear-gradient(160deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
  overflow: hidden;
}
.aifocus__bar {
  display: flex; align-items: center; gap: .75rem;
  padding: .75rem clamp(1rem,2vw,1.5rem);
  border-bottom: 1px solid rgba(255,255,255,.1);
  background: rgba(0,0,0,.25);
  font-size: var(--fs-label); letter-spacing: var(--ls-label); text-transform: uppercase;
  color: rgba(255,255,255,.55);
}
.aifocus__bar-dots { display: flex; gap: .3rem; }
.aifocus__bar-dots i { width: .45rem; height: .45rem; border-radius: 50%; background: rgba(255,255,255,.22); }
.aifocus__bar-dots i:first-child { background: var(--signal-500); }
.aifocus__items { display: grid; }
@media (min-width: 48rem) { .aifocus__items { grid-template-columns: 1fr 1fr; } }
@media (min-width: 75rem) { .aifocus__items { grid-template-columns: repeat(4, 1fr); } }
.aifocus__item {
  padding: clamp(1.35rem, 1.1rem + 1.1vw, 2.1rem) clamp(1rem,2vw,1.5rem);
  border-bottom: 1px solid rgba(255,255,255,.09);
  position: relative;
  transition: background var(--t-base);
}
.aifocus__item:hover { background: rgba(255,255,255,.035); }
@media (min-width: 48rem) {
  .aifocus__item:nth-child(2n) { border-left: 1px solid rgba(255,255,255,.09); }
  .aifocus__item:nth-last-child(-n+2) { border-bottom: 0; }
}
@media (min-width: 75rem) {
  .aifocus__item { border-bottom: 0; border-left: 1px solid rgba(255,255,255,.09); }
  .aifocus__item:first-child { border-left: 0; }
  .aifocus__item:nth-child(2n) { border-left: 1px solid rgba(255,255,255,.09); }
}
.aifocus__metric {
  font-family: var(--font-display); font-size: var(--fs-label); font-weight: 700;
  letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--signal-500);
}
.aifocus__t { margin-top: var(--s-4); font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 650; color: #fff; }
.aifocus__d { margin-top: .6rem; font-size: var(--fs-small); line-height: 1.62; color: rgba(255,255,255,.68); }
.aifocus__spark { margin-top: var(--s-5); height: 2.4rem; }

/* --------------------------------------------------------------------------
   WELCOME — an editorial letter, not a profile card
   -------------------------------------------------------------------------- */
.welcome { background: var(--bg); }
.welcome__grid { display: grid; gap: clamp(2rem, 1.4rem + 3.4vw, 4.5rem); align-items: start; }
@media (min-width: 62rem) { .welcome__grid { grid-template-columns: minmax(0,4fr) minmax(0,7fr); } }

/* The portrait plinth: cut-out portraits over a controlled gradient so every
   person reads consistently regardless of their original photo. */
.plinth {
  position: relative; isolation: isolate;
  border-radius: var(--r-md);
  overflow: hidden;
  background: linear-gradient(168deg, var(--ink-700) 0%, var(--ink-900) 68%, var(--ink-950) 100%);
  aspect-ratio: 1 / 1;
  display: flex; align-items: flex-end; justify-content: center;
}
.plinth::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background-image:
    linear-gradient(to right,  rgba(255,255,255,.85) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.85) 1px, transparent 1px);
  background-size: 34px 34px;
  opacity: .07;
  mask-image: radial-gradient(ellipse 80% 80% at 50% 30%, #000, transparent 72%);
}
.plinth::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 42%; z-index: 2; pointer-events: none;
  background: linear-gradient(to top, color-mix(in srgb, var(--ink-950) 88%, transparent), transparent);
}
.plinth__img {
  position: relative; z-index: 1;
  width: 100%; height: 100%;
  object-fit: contain; object-position: bottom center;
  transition: transform var(--t-slow) var(--e-out);
}
.plinth__ecg { position: absolute; left: 0; right: 0; bottom: 8%; z-index: 3; opacity: .45; height: 2rem; }
/* Placeholder state — clearly marked, never a black silhouette */
.plinth--empty { display: grid; place-items: center; }
.plinth__ph { text-align: center; color: rgba(255,255,255,.42); padding: 1rem; }
.plinth__ph svg { width: 2.6rem; height: 2.6rem; margin-inline: auto; opacity: .55; }
.plinth__ph span { display: block; margin-top: .7rem; font-size: var(--fs-label); letter-spacing: var(--ls-label); text-transform: uppercase; }
.plinth__initials {
  font-family: var(--font-display); font-size: clamp(2rem,7vw,3.4rem); font-weight: 700;
  color: rgba(255,255,255,.5); letter-spacing: .02em;
}

.welcome__letter { position: relative; }
.welcome__quote {
  font-family: var(--font-serif);
  font-size: clamp(1.35rem, 1.05rem + 1.5vw, 2.15rem);
  line-height: 1.32; font-weight: 400; font-style: italic;
  color: var(--heading);
  letter-spacing: -.01em;
  padding-left: clamp(1rem, .6rem + 1.6vw, 2rem);
  border-left: 2px solid var(--signal-500);
  text-wrap: pretty;
}
.welcome__body { margin-top: clamp(1.5rem,1.2rem + 1.4vw,2.5rem); }
.welcome__body p { color: var(--text-soft); line-height: 1.72; max-width: 64ch; }
.welcome__body p + p { margin-top: 1.05em; }
.welcome__body p:first-child::first-letter {
  float: left; font-family: var(--font-display); font-weight: 700;
  font-size: 3.1em; line-height: .82; padding: .06em .12em 0 0;
  color: var(--signal-600);
}
.welcome__sign {
  margin-top: clamp(1.75rem,1.4rem + 1.5vw,2.75rem);
  padding-top: var(--s-5);
  border-top: 1px solid var(--border);
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-5);
}
.welcome__sign-name { font-family: var(--font-display); font-size: 1.3rem; font-weight: 700; color: var(--heading); line-height: 1.15; }
.welcome__sign-role { font-size: var(--fs-small); color: var(--signal-700); font-weight: 600; margin-top: .15rem; }
.welcome__sign-title { font-size: var(--fs-tiny); color: var(--text-muted); margin-top: .25rem; max-width: 40ch; }

/* Leadership pair (President + Vice President) — one consistent treatment */
.leaders { display: grid; gap: var(--s-5); }
@media (min-width: 34rem) { .leaders { grid-template-columns: 1fr 1fr; } }
@media (min-width: 62rem) { .leaders { grid-template-columns: 1fr; } }
.leader { display: grid; gap: var(--s-4); grid-template-columns: 5.5rem 1fr; align-items: center; }
.leader .plinth { border-radius: var(--r-sm); }
.leader__name { font-family: var(--font-display); font-size: 1.08rem; font-weight: 700; color: var(--heading); line-height: 1.2; }
.leader__role { font-size: var(--fs-label); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--signal-700); font-weight: 650; margin-top: .3rem; }
.leader__title { font-size: var(--fs-tiny); color: var(--text-muted); margin-top: .35rem; line-height: 1.5; }

/* --------------------------------------------------------------------------
   PEOPLE DIRECTORY
   -------------------------------------------------------------------------- */
.people { display: grid; gap: clamp(1rem, .8rem + .9vw, 1.75rem); }
.people--4 { grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr)); }

.person {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  overflow: hidden;
  text-align: left;
  width: 100%;
  transition: border-color var(--t-base) var(--e-out), box-shadow var(--t-base) var(--e-out), transform var(--t-base) var(--e-out);
}
.person:hover, .person:focus-visible { border-color: var(--border-strong); box-shadow: var(--sh-3); transform: translateY(-3px); }
.person:hover .plinth__img { transform: scale(1.035); }
.person__media { position: relative; }
.person__badge {
  position: absolute; z-index: 4; left: .6rem; top: .6rem;
  padding: .3em .6em; border-radius: var(--r-xs);
  font-size: .64rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  background: var(--signal-500); color: #04231A;
}
.person__badge--member { background: rgba(255,255,255,.16); color: #fff; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.person__body { padding: var(--s-5) var(--s-5) var(--s-6); flex: 1; display: flex; flex-direction: column; }
.person__name { font-family: var(--font-display); font-size: 1.12rem; font-weight: 700; color: var(--heading); line-height: 1.2; letter-spacing: -.005em; }
.person__prefix { color: var(--text-muted); font-weight: 550; }
.person__title { margin-top: .5rem; font-size: var(--fs-tiny); color: var(--text-soft); line-height: 1.55; }
.person__org { margin-top: .45rem; font-size: var(--fs-tiny); color: var(--text-muted); line-height: 1.5; display: flex; gap: .4rem; align-items: flex-start; }
.person__org svg { width: .85rem; height: .85rem; flex: none; margin-top: .25em; opacity: .7; }
.person__more { margin-top: auto; padding-top: var(--s-4); }
.person__tbd { margin-top: .5rem; font-size: var(--fs-tiny); color: var(--text-muted); font-style: italic; }

/* Committee section anchor block */
.committee { scroll-margin-top: calc(var(--header-h) + 2rem); }
.committee + .committee { margin-top: clamp(3rem, 2rem + 4vw, 6rem); }
.committee__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s-4); margin-bottom: var(--s-6); padding-bottom: var(--s-4); border-bottom: 1px solid var(--border-strong); }
.committee__count { font-size: var(--fs-small); color: var(--text-muted); font-variant-numeric: tabular-nums; }

/* Filter bar */
.filters { display: flex; flex-wrap: wrap; gap: .5rem; }
.filter {
  padding: .55em 1em; font-size: var(--fs-small); font-weight: 600;
  border: 1px solid var(--border-strong); border-radius: var(--r-pill);
  color: var(--text-soft); background: var(--surface);
  transition: all var(--t-fast) var(--e-out);
}
.filter:hover { border-color: var(--signal-500); color: var(--signal-700); }
.filter[aria-pressed="true"], .filter[aria-selected="true"] {
  background: var(--ink-700); border-color: var(--ink-700); color: #fff;
}

/* --------------------------------------------------------------------------
   PERSON DIALOG
   -------------------------------------------------------------------------- */
.pdialog {
  border: 0; padding: 0; max-width: min(46rem, calc(100vw - 2rem)); width: 100%;
  background: var(--surface); color: var(--text);
  border-radius: var(--r-md); box-shadow: var(--sh-4);
  overflow: visible;
}
.pdialog::backdrop { background: rgba(4,5,26,.7); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.pdialog__inner { display: grid; }
@media (min-width: 40rem) { .pdialog__inner { grid-template-columns: 15rem 1fr; } }
.pdialog__media { background: var(--ink-900); overflow: hidden; min-width: 0; }
/* The plinth's 1:1 ratio must not drive its width here — the grid column does.
   Left together, aspect-ratio computes the width from the stretched row height,
   so a long biography makes the portrait wide enough to cover the text. */
.pdialog__media .plinth {
  width: 100%; height: 100%;
  aspect-ratio: auto;
  min-height: 15rem;
  border-radius: var(--r-md) 0 0 var(--r-md);
}
@media (max-width: 40rem) {
  .pdialog__media .plinth {
    height: auto; aspect-ratio: 16 / 10; min-height: 0;
    border-radius: var(--r-md) var(--r-md) 0 0;
  }
}
.pdialog__body { padding: clamp(1.5rem,1.2rem + 1.4vw,2.25rem); }
.pdialog__close {
  position: absolute; top: -.85rem; right: -.85rem; z-index: 2;
  width: 2.4rem; height: 2.4rem; display: grid; place-items: center;
  border-radius: 50%; background: var(--ink-950); color: #fff;
  border: 1px solid rgba(255,255,255,.2);
  transition: background var(--t-fast), transform var(--t-fast);
}
.pdialog__close:hover { background: var(--ink-700); transform: rotate(90deg); }
.pdialog__close svg { width: 1rem; height: 1rem; }
.pdialog__name { font-family: var(--font-display); font-size: var(--fs-h2); font-weight: 700; color: var(--heading); line-height: 1.1; }
.pdialog__role { margin-top: .5rem; }
.pdialog__title { margin-top: var(--s-4); color: var(--text-soft); line-height: 1.62; font-size: var(--fs-small); }
.pdialog__meta { margin-top: var(--s-5); padding-top: var(--s-5); border-top: 1px solid var(--border); display: grid; gap: .6rem; font-size: var(--fs-small); }
.pdialog__meta-row { display: flex; gap: .6rem; align-items: flex-start; color: var(--text-soft); }
.pdialog__meta-row svg { width: 1rem; height: 1rem; flex: none; margin-top: .3em; color: var(--signal-600); }

/* --------------------------------------------------------------------------
   PROGRAM
   -------------------------------------------------------------------------- */
.program__bar {
  position: sticky; top: var(--header-h); z-index: var(--z-sticky);
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  padding-block: var(--s-4);
  margin-bottom: var(--s-7);
}
.program__bar-inner { display: flex; flex-wrap: wrap; gap: var(--s-4); align-items: center; justify-content: space-between; }
/* The tab strip is the one element that can exceed a narrow viewport, so it
   scrolls inside itself rather than widening the page. */
.daytabs {
  display: flex; gap: .35rem;
  background: var(--surface-sunk); padding: .3rem;
  border-radius: var(--r-md); border: 1px solid var(--border);
  max-width: 100%; min-width: 0;
  overflow-x: auto; overscroll-behavior-x: contain;
  scrollbar-width: thin; -webkit-overflow-scrolling: touch;
}
.daytab__short { display: none; }
@media (max-width: 34rem) {
  .daytab__long { display: none; }
  .daytab__short { display: inline; }
  .daytab { padding-inline: .8em; }
}
.daytab {
  padding: .6em 1.1em; border-radius: var(--r-sm);
  font-family: var(--font-display); font-size: .95rem; font-weight: 650;
  color: var(--text-soft); white-space: nowrap;
  transition: all var(--t-fast) var(--e-out);
}
.daytab small { display: block; font-family: var(--font-body); font-size: .68rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; opacity: .7; margin-top: .1rem; }
.daytab[aria-selected="true"] { background: var(--ink-700); color: #fff; box-shadow: var(--sh-1); }

/* ---- Track: a titled block of sessions within a day -------------------- */
.track + .track { margin-top: clamp(2.25rem, 1.6rem + 2.6vw, 3.5rem); }
.track__head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem 1rem;
  padding-bottom: .8rem;
  border-bottom: 2px solid var(--signal-500);
}
.track__n {
  font-family: var(--font-display); font-size: var(--fs-label); font-weight: 700;
  letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--signal-700);
}
.track__t {
  font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 650;
  color: var(--heading); line-height: 1.15;
}
.track__chair { margin-left: auto; font-size: var(--fs-tiny); color: var(--text-muted); }
.track__note  { flex-basis: 100%; font-size: var(--fs-tiny); color: var(--text-muted); }
.is-dark .track__n { color: var(--signal-500); }

/* ---- Sessions ----------------------------------------------------------- */
.sessions { margin-top: .25rem; }
.session {
  display: grid; gap: var(--s-2) var(--s-6);
  grid-template-columns: 1fr;
  padding-block: clamp(.95rem, .8rem + .7vw, 1.35rem);
  border-bottom: 1px solid var(--border);
  transition: background var(--t-fast);
}
@media (min-width: 48rem) {
  .session { grid-template-columns: 8.5rem minmax(0,1fr) minmax(0,15rem); align-items: baseline; }
}
.session:hover { background: var(--surface-sunk); }
.session__time {
  font-family: var(--font-display); font-weight: 650; font-size: var(--fs-small);
  color: var(--heading); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.session__t {
  font-family: var(--font-display); font-size: var(--fs-h4); font-weight: 650;
  color: var(--heading); line-height: 1.3;
}
.session__sub { margin-top: .3rem; font-size: var(--fs-small); color: var(--text-soft); font-style: italic; line-height: 1.5; }
.session__flag { margin-left: .6rem; vertical-align: middle; }
.session__people { font-size: var(--fs-small); line-height: 1.5; }
.session__who { font-weight: 600; color: var(--text-soft); }
.session__tbc  { font-size: var(--fs-tiny); color: var(--text-muted); font-style: italic; }
.session__vs {
  display: block; margin: .25rem 0;
  font-family: var(--font-display); font-size: var(--fs-tiny); font-weight: 700;
  letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--signal-700);
}

/* Breaks step back so the scientific content stands out */
.session--break { color: var(--text-muted); }
.session--break .session__time { color: var(--text-muted); font-weight: 550; }
.session--break .session__t {
  font-family: var(--font-body); font-size: var(--fs-small); font-weight: 500;
  color: var(--text-muted); display: inline-flex; align-items: center; gap: .5rem;
}
.session--break:hover { background: none; }

/* Panels are connective, not headline content */
.session--panel .session__t { font-family: var(--font-body); font-size: var(--fs-small); font-weight: 550; color: var(--text-soft); }

/* The feature presentation earns a tint */
.session--feature { background: color-mix(in srgb, var(--signal-500) 7%, transparent); }
.session--feature:hover { background: color-mix(in srgb, var(--signal-500) 11%, transparent); }
.session--ceremony .session__t { color: var(--signal-700); }
.is-dark .session--ceremony .session__t { color: var(--signal-400); }

/* ---- Faculty roster ----------------------------------------------------- */
.faculty { display: grid; gap: .25rem; grid-template-columns: repeat(auto-fill, minmax(min(17rem,100%),1fr)); }
.fac {
  display: flex; align-items: center; gap: .9rem;
  padding: .7rem .25rem; border-bottom: 1px solid var(--border);
}
.fac__initials {
  width: 2.4rem; height: 2.4rem; flex: none; display: grid; place-items: center;
  border-radius: 50%; background: color-mix(in srgb, var(--signal-500) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--signal-500) 30%, transparent);
  font-family: var(--font-display); font-size: .8rem; font-weight: 700;
  color: var(--signal-700); letter-spacing: .02em;
}
.is-dark .fac__initials { color: var(--signal-400); }
.fac__body { min-width: 0; }
.fac__name { display: block; font-weight: 600; font-size: var(--fs-small); color: var(--heading); }
.fac__meta { display: block; font-size: var(--fs-tiny); color: var(--text-muted); margin-top: .1rem; }

/* --------------------------------------------------------------------------
   REGISTRATION
   -------------------------------------------------------------------------- */
.fees { display: grid; gap: var(--s-5); }
@media (min-width: 46rem) { .fees { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 68rem) { .fees { grid-template-columns: repeat(3, 1fr); } }
.fee {
  position: relative; display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-sm); padding: clamp(1.4rem,1.1rem + 1.2vw,2rem);
  transition: border-color var(--t-base), box-shadow var(--t-base), transform var(--t-base);
}
.fee:hover { border-color: var(--border-strong); box-shadow: var(--sh-3); transform: translateY(-3px); }
.fee--featured { border-color: var(--signal-500); box-shadow: 0 0 0 1px var(--signal-500); }
.fee__flag {
  position: absolute; top: -.7rem; left: clamp(1.4rem,1.1rem + 1.2vw,2rem);
  padding: .3em .7em; border-radius: var(--r-xs);
  font-size: .64rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  background: var(--signal-500); color: #04231A;
}
.fee__name { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 650; color: var(--heading); }
.fee__price { margin-top: var(--s-4); display: flex; align-items: baseline; gap: .35rem; }
.fee__amount { font-family: var(--font-display); font-size: clamp(2.4rem,1.8rem + 2.2vw,3.4rem); font-weight: 700; line-height: 1; letter-spacing: -.03em; color: var(--heading); font-variant-numeric: tabular-nums; }
.fee__cur { font-family: var(--font-display); font-size: 1.05rem; font-weight: 650; color: var(--signal-700); letter-spacing: .04em; }
.fee__for { margin-top: var(--s-4); font-size: var(--fs-small); color: var(--text-soft); line-height: 1.6; flex: 1; }
.fee__cta { margin-top: var(--s-6); }

.includes { display: grid; gap: .85rem; }
.includes li { display: flex; gap: .75rem; align-items: flex-start; font-size: var(--fs-small); color: var(--text-soft); line-height: 1.6; }
.includes svg { width: 1.1rem; height: 1.1rem; flex: none; margin-top: .22em; color: var(--signal-600); }

/* --------------------------------------------------------------------------
   STEPS (abstract submission)
   -------------------------------------------------------------------------- */
.steps { display: grid; gap: 0; counter-reset: st; border-top: 1px solid var(--border); }
@media (min-width: 62rem) { .steps { grid-template-columns: repeat(4,1fr); } }
.step { counter-increment: st; position: relative; padding: clamp(1.35rem,1.1rem + 1.2vw,2rem) var(--s-5) clamp(1.35rem,1.1rem + 1.2vw,2rem) 0; border-bottom: 1px solid var(--border); }
@media (min-width: 62rem) { .step { border-bottom: 0; border-top: 1px solid var(--border); margin-top: -1px; } }
.step__n {
  width: 2.4rem; height: 2.4rem; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--signal-500); color: var(--signal-700);
  font-family: var(--font-display); font-weight: 700; font-size: .95rem;
  background: color-mix(in srgb, var(--signal-500) 8%, transparent);
}
.step__n::before { content: counter(st); }
.step__t { margin-top: var(--s-4); font-family: var(--font-display); font-size: var(--fs-h4); font-weight: 650; color: var(--heading); }
.step__d { margin-top: .5rem; font-size: var(--fs-small); color: var(--text-soft); line-height: 1.6; max-width: 32ch; }
.is-dark .step__n { color: var(--signal-400); }
.is-dark .step__t { color: #fff; }

/* --------------------------------------------------------------------------
   AUDIENCE
   -------------------------------------------------------------------------- */
.audience__groups { display: grid; gap: clamp(1.5rem,1.2rem + 1.6vw,2.75rem); }
@media (min-width: 55rem) { .audience__groups { grid-template-columns: repeat(3,1fr); } }
.audgroup__t {
  font-size: var(--fs-label); font-weight: 700; letter-spacing: var(--ls-label);
  text-transform: uppercase; color: var(--signal-700);
  padding-bottom: var(--s-3); border-bottom: 1px solid var(--signal-500);
}
.is-dark .audgroup__t { color: var(--signal-500); }
.audgroup__list { margin-top: var(--s-4); display: grid; gap: 0; }
.audgroup__list li {
  padding-block: .7rem; border-bottom: 1px solid var(--border);
  font-size: var(--fs-small); color: var(--text-soft);
  display: flex; align-items: center; gap: .6rem;
  transition: color var(--t-fast), padding-left var(--t-fast);
}
.audgroup__list li::before {
  content: ""; width: .35rem; height: .35rem; flex: none;
  background: var(--signal-500); border-radius: 50%; opacity: .6;
  transition: opacity var(--t-fast), transform var(--t-fast);
}
.audgroup__list li:hover { color: var(--heading); padding-left: .3rem; }
.audgroup__list li:hover::before { opacity: 1; transform: scale(1.4); }
.is-dark .audgroup__list li:hover { color: #fff; }

/* --------------------------------------------------------------------------
   SPONSORS
   -------------------------------------------------------------------------- */
.sponsor-level + .sponsor-level { margin-top: clamp(2rem,1.5rem + 2.4vw,3.5rem); }
.sponsor-level__head { display: flex; align-items: center; gap: var(--s-4); margin-bottom: var(--s-5); }
.sponsor-level__t { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 700; color: var(--heading); letter-spacing: .02em; text-transform: uppercase; }
.sponsor-level__rule { flex: 1; height: 1px; background: var(--border-strong); }
.sponsor-grid { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fill, minmax(min(11rem,100%),1fr)); }
.sponsor {
  aspect-ratio: 16/9; display: grid; place-items: center; padding: var(--s-5);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm);
  transition: border-color var(--t-base), box-shadow var(--t-base);
}
.sponsor:hover { border-color: var(--border-strong); box-shadow: var(--sh-2); }
.sponsor img { max-height: 100%; width: auto; object-fit: contain; }

/* --------------------------------------------------------------------------
   VENUE
   -------------------------------------------------------------------------- */
.venue__facts { display: grid; gap: 0; border-top: 1px solid var(--border); }
.venue__fact { display: grid; grid-template-columns: auto 1fr; gap: var(--s-4); padding-block: var(--s-5); border-bottom: 1px solid var(--border); align-items: start; }
.venue__fact-k { font-size: var(--fs-label); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--text-muted); font-weight: 650; min-width: 8rem; padding-top: .2em; }
.venue__fact-v { font-size: var(--fs-small); color: var(--text-soft); line-height: 1.6; }
.venue__fact-v b { color: var(--heading); font-weight: 650; display: block; font-family: var(--font-display); font-size: 1.1rem; margin-bottom: .2rem; }

/* --------------------------------------------------------------------------
   NEWS
   -------------------------------------------------------------------------- */
.news-grid { display: grid; gap: clamp(1.25rem,1rem + 1.2vw,2rem); grid-template-columns: repeat(auto-fill, minmax(min(19rem,100%),1fr)); }
.article-card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm); overflow: hidden; transition: border-color var(--t-base), box-shadow var(--t-base), transform var(--t-base); }
.article-card:hover { border-color: var(--border-strong); box-shadow: var(--sh-3); transform: translateY(-3px); }
.article-card__media { aspect-ratio: 16/10; background: var(--ink-900); overflow: hidden; }
.article-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow) var(--e-out); }
.article-card:hover .article-card__media img { transform: scale(1.04); }
.article-card__body { padding: var(--s-5); flex: 1; display: flex; flex-direction: column; }
.article-card__meta { display: flex; flex-wrap: wrap; gap: .5rem .9rem; font-size: var(--fs-tiny); color: var(--text-muted); }
.article-card__t { margin-top: var(--s-3); font-family: var(--font-display); font-size: var(--fs-h4); font-weight: 650; color: var(--heading); line-height: 1.3; }
.article-card__x { margin-top: .6rem; font-size: var(--fs-small); color: var(--text-soft); line-height: 1.6; flex: 1; }
.article-card__more { margin-top: var(--s-5); }

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */
.faq { border-top: 1px solid var(--border); }
.faq__item { border-bottom: 1px solid var(--border); }
.faq__q {
  width: 100%; display: flex; gap: var(--s-5); align-items: flex-start; justify-content: space-between;
  padding-block: clamp(1.05rem,.9rem + .7vw,1.5rem); text-align: left;
  font-family: var(--font-display); font-size: var(--fs-h4); font-weight: 650; color: var(--heading);
  transition: color var(--t-fast);
}
.faq__q:hover { color: var(--signal-700); }
.faq__icon { flex: none; width: 1.5rem; height: 1.5rem; position: relative; margin-top: .12em; }
.faq__icon::before, .faq__icon::after {
  content: ""; position: absolute; inset: 50% 0 auto 0; height: 1.5px; background: currentColor;
  transition: transform var(--t-base) var(--e-out); transform-origin: center;
}
.faq__icon::after { transform: rotate(90deg); }
.faq__q[aria-expanded="true"] .faq__icon::after { transform: rotate(0); }
.faq__q[aria-expanded="true"] { color: var(--signal-700); }
.faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--t-base) var(--e-out); }
.faq__q[aria-expanded="true"] + .faq__a { grid-template-rows: 1fr; }
.faq__a > div { overflow: hidden; }
.faq__a p { padding-bottom: clamp(1.05rem,.9rem + .7vw,1.5rem); padding-right: 3rem; color: var(--text-soft); font-size: var(--fs-small); line-height: 1.7; max-width: 62ch; }

/* --------------------------------------------------------------------------
   FINAL CTA
   -------------------------------------------------------------------------- */
.finale { position: relative; background: var(--ink-950); color: #fff; overflow: hidden; isolation: isolate; text-align: center; }
.finale__ecg { position: absolute; inset: 0; z-index: -1; display: grid; place-items: center; opacity: .18; }
.finale__ecg svg { width: 140%; height: auto; }
.finale__t { font-family: var(--font-display); font-size: var(--fs-h1); font-weight: 700; line-height: 1.02; letter-spacing: var(--ls-display); text-transform: uppercase; color: #fff; max-width: 20ch; margin-inline: auto; }
.finale__d { margin-top: var(--s-5); color: rgba(255,255,255,.72); max-width: 52ch; margin-inline: auto; font-size: var(--fs-lede); line-height: 1.6; }
.finale__actions { margin-top: var(--s-7); display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; }
.finale__meta { margin-top: var(--s-8); padding-top: var(--s-6); border-top: 1px solid rgba(255,255,255,.14); display: flex; flex-wrap: wrap; gap: var(--s-4) var(--s-8); justify-content: center; font-size: var(--fs-small); color: rgba(255,255,255,.6); }
.finale__meta b { color: #fff; font-weight: 650; }

/* --------------------------------------------------------------------------
   STAT ROW
   -------------------------------------------------------------------------- */
.stats { display: grid; gap: var(--s-6); grid-template-columns: repeat(auto-fit, minmax(min(9rem,100%),1fr)); }
.stat__n { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.1rem,1.5rem + 2.4vw,3.4rem); line-height: 1; letter-spacing: -.03em; color: var(--signal-600); font-variant-numeric: tabular-nums; }
.is-dark .stat__n { color: var(--signal-500); }
.stat__k { margin-top: .6rem; font-size: var(--fs-small); color: var(--text-muted); line-height: 1.45; }

/* ===== 07-wordpress.css ===== */
/* ==========================================================================
   SAS 2026 — WORDPRESS-SPECIFIC STYLES
   Only what core markup needs: pagination, editor output, comments, admin bar.
   This part is not used by the standalone HTML build.
   ========================================================================== */

/* ---- Pagination (core's .page-numbers markup, restyled in place) -------- */
.sas-pagination { margin-top: clamp(2rem, 1.5rem + 2vw, 3.5rem); }
.sas-pagination .nav-links {
  display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; align-items: center;
}
.sas-pagination .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.75rem; min-height: 2.75rem; padding: .55em 1em;
  font-size: var(--fs-small); font-weight: 600;
  border: 1px solid var(--border-strong); border-radius: var(--r-pill);
  color: var(--text-soft); background: var(--surface);
  transition: border-color var(--t-fast), color var(--t-fast), background var(--t-fast);
}
.sas-pagination a.page-numbers:hover { border-color: var(--signal-500); color: var(--signal-700); }
.sas-pagination .page-numbers.current {
  background: var(--ink-700); border-color: var(--ink-700); color: #fff;
}
.sas-pagination .page-numbers.dots { border-color: transparent; background: none; min-width: 0; padding-inline: .25rem; }

/* ---- Block / classic editor output inside .prose ------------------------ */
.prose > * + * { margin-top: 1.1em; }
.prose h2 { font-family: var(--font-display); font-size: var(--fs-h2); font-weight: 700; line-height: var(--lh-snug); letter-spacing: var(--ls-head); margin-top: 2.25em; }
.prose h3 { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 650; margin-top: 1.9em; }
.prose h4 { font-size: var(--fs-h4); font-weight: 650; margin-top: 1.6em; }
.prose ul, .prose ol { padding-left: 1.35em; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li { margin-top: .45em; }
.prose li::marker { color: var(--signal-600); }
.prose blockquote {
  margin: 1.75em 0; padding-left: clamp(1rem, .6rem + 1.6vw, 2rem);
  border-left: 2px solid var(--signal-500);
  font-family: var(--font-serif); font-style: italic;
  font-size: clamp(1.15rem, 1rem + .7vw, 1.5rem); line-height: 1.4; color: var(--heading);
}
.prose blockquote cite { display: block; margin-top: .6em; font: 600 var(--fs-small)/1.4 var(--font-body); font-style: normal; color: var(--text-muted); }
.prose img, .prose figure { border-radius: var(--r-sm); }
.prose figure { margin: 2em 0; }
.prose figcaption { margin-top: .7em; font-size: var(--fs-tiny); color: var(--text-muted); }
.prose code { font-family: var(--font-mono); font-size: .9em; background: var(--surface-sunk); padding: .15em .4em; border-radius: var(--r-xs); }
.prose pre { background: var(--ink-950); color: #EEF0FA; padding: 1.25rem; border-radius: var(--r-sm); overflow-x: auto; font-size: var(--fs-small); }
.prose pre code { background: none; padding: 0; color: inherit; }
.prose hr { margin: 2.5em 0; }
.prose table { margin: 2em 0; font-size: var(--fs-small); }
.prose th, .prose td { padding: .8rem 1rem; border-bottom: 1px solid var(--border); text-align: left; }
.prose th { font-weight: 650; color: var(--heading); }

/* WordPress alignment classes */
.alignleft  { float: left;  margin: .35em 1.75em 1.25em 0; }
.alignright { float: right; margin: .35em 0 1.25em 1.75em; }
.aligncenter { display: block; margin-inline: auto; }
.alignwide, .alignfull { margin-inline: auto; }
@media (max-width: 40rem) {
  .alignleft, .alignright { float: none; margin-inline: 0; }
}
.wp-caption { max-width: 100%; }
.wp-caption-text { font-size: var(--fs-tiny); color: var(--text-muted); margin-top: .6em; }
.sticky .article-card { border-color: var(--signal-500); }

/* ---- Comments ----------------------------------------------------------- */
.comments-area { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--border); }
.comment-list { display: grid; gap: 1.5rem; }
.comment-list .children { margin-top: 1.25rem; padding-left: 1.5rem; border-left: 1px solid var(--border); display: grid; gap: 1.25rem; }
.comment-body { font-size: var(--fs-small); line-height: 1.65; }
.comment-author img { border-radius: 50%; }
.comment-meta { font-size: var(--fs-tiny); color: var(--text-muted); margin-bottom: .5rem; }
.comment-form { display: grid; gap: 1rem; max-width: 44rem; margin-top: 1.5rem; }
.comment-form label { font-size: var(--fs-small); font-weight: 600; color: var(--heading); display: block; margin-bottom: .35rem; }
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
  width: 100%; padding: .8rem .95rem; min-height: 46px;
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--r-sm); color: var(--text); font-size: var(--fs-small);
}
.comment-form textarea { min-height: 8rem; resize: vertical; }
.comment-form input:focus, .comment-form textarea:focus {
  border-color: var(--signal-500); box-shadow: 0 0 0 3px var(--signal-glow); outline: none;
}
.comment-form .submit {
  justify-self: start;
  padding: .95em 1.6em; min-height: 46px;
  font-weight: 650; font-size: var(--fs-small);
  border: 1px solid var(--signal-500); border-radius: var(--r-sm);
  background: var(--signal-500); color: #04231A; cursor: pointer;
}

/* ---- Admin bar: keep the fixed header clear of it ----------------------- */
.admin-bar .header { top: 32px; }
.admin-bar .drawer { top: 32px; }
.admin-bar .program__bar { top: calc(var(--header-h) + 32px); }
@media screen and (max-width: 782px) {
  .admin-bar .header { top: 46px; }
  .admin-bar .drawer { top: 46px; }
  .admin-bar .program__bar { top: calc(var(--header-h) + 46px); }
}
/* The admin bar sits above the fixed header, so anchor targets need to clear
   both. scroll-padding-top belongs to the scrolling element, not to body. */
html:has(body.admin-bar) { scroll-padding-top: calc(var(--header-h) + 32px + 1.5rem); }
@media screen and (max-width: 782px) {
  html:has(body.admin-bar) { scroll-padding-top: calc(var(--header-h) + 46px + 1.5rem); }
}

/* ---- Elementor interoperability -----------------------------------------
   Elementor wraps every widget in its own containers. These make a SAS
   section behave as a full-bleed band inside them rather than being boxed. */
.elementor-widget-container > .hero,
.elementor-widget-container > .page-hero,
.elementor-widget-container > .finale,
.elementor-widget-container > .countdown,
.elementor-widget-container > .section,
.elementor-widget-container > .section-sm { margin-inline: 0; }

/* Elementor's editor preview adds outlines; keep our sticky bars usable. */
.elementor-editor-active .program__bar { position: static; }

/* WordPress block editor: give the admin preview the same measure. */
.editor-styles-wrapper { font-family: var(--font-body); }