/* ==========================================================================
   Early Pattern — ep-site.css
   Website skin for Writebase. Plain CSS, no build step, no external URLs.
   Section rules are scoped to .prez-block:not(.is-card). Card blocks get
   outer spacing only.
   ========================================================================== */

/* ---------- Fonts (self-hosted; second src is the same file, relative) ---------- */
@font-face{
  font-family:"Inter";
  src:url("/static/fonts/Inter-VariableFont_opsz_wght.ttf") format("truetype"),
      url("fonts/Inter-VariableFont_opsz_wght.ttf") format("truetype");
  font-weight:100 900;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Inter";
  src:url("/static/fonts/Inter-Italic-VariableFont_opsz_wght.ttf") format("truetype"),
      url("fonts/Inter-Italic-VariableFont_opsz_wght.ttf") format("truetype");
  font-weight:100 900;font-style:italic;font-display:swap;
}
@font-face{
  font-family:"JetBrains Mono";
  src:url("/static/fonts/JetBrainsMono[wght].ttf") format("truetype"),
      url("fonts/JetBrainsMono[wght].ttf") format("truetype");
  font-weight:100 800;font-style:normal;font-display:swap;
}

/* ---------- Tokens (copied from the Early Pattern design system) ---------- */
:root{
  /* Primitives */
  --ep-red-50:#FDEDEC;--ep-red-100:#FAD3D2;--ep-red-400:#E65E5C;--ep-red-500:#E24B4A;
  --ep-red-600:#C63938;--ep-red-700:#9F2A29;
  --ep-green-400:#43B26C;--ep-green-500:#34A853;--ep-green-600:#2A8B45;--ep-green-700:#216E37;--ep-green-800:#184F27;
  --ep-grey-25:#FBFBFC;--ep-grey-50:#F5F5F6;--ep-grey-100:#ECECEE;--ep-grey-200:#D9D9DD;--ep-grey-300:#BFBFC5;
  --ep-grey-400:#9A9AA0;--ep-grey-500:#7C7C83;--ep-grey-600:#616167;--ep-grey-700:#4A4A4F;--ep-grey-800:#333338;
  --ep-grey-900:#1E1E21;--ep-grey-950:#171719;--ep-grey-1000:#0F0F11;
  --ep-white:#FFFFFF;

  /* Semantic roles */
  --ep-bg:var(--ep-grey-25);
  --ep-bg-raised:var(--ep-white);
  --ep-bg-sunken:var(--ep-grey-50);
  --ep-bg-ink:var(--ep-grey-1000);
  --ep-fg-1:var(--ep-grey-900);
  --ep-fg-2:var(--ep-grey-700);
  --ep-fg-3:var(--ep-grey-600);
  --ep-border-1:var(--ep-grey-100);
  --ep-border-2:var(--ep-grey-200);
  --ep-accent:var(--ep-red-500);
  --ep-accent-hover:var(--ep-red-600);
  --ep-accent-press:var(--ep-red-700);
  --ep-state-signal:var(--ep-red-500);
  --ep-state-confirmed:var(--ep-green-500);
  --ep-state-dormant:var(--ep-grey-400);

  /* Type */
  --ep-font-sans:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --ep-font-mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --ep-fvs-text:"opsz" 14;
  --ep-fvs-display:"opsz" 32;
  --ep-tr-display:-0.035em;
  --ep-tr-tight:-0.03em;
  --ep-tr-snug:-0.02em;
  --ep-tr-wide:0.04em;
  --ep-tr-eyebrow:0.14em;

  /* Space, radii, shadows */
  --ep-r-sm:6px;--ep-r-md:10px;--ep-r-lg:14px;--ep-r-xl:20px;--ep-r-pill:999px;
  --ep-shadow-sm:0 1px 2px rgba(15,15,17,0.06),0 2px 6px rgba(15,15,17,0.04);
  --ep-shadow-md:0 4px 10px rgba(15,15,17,0.08),0 2px 4px rgba(15,15,17,0.04);
  --ep-shadow-focus:0 0 0 4px rgba(226,75,74,0.16);
  --ep-shadow-focus-ink:0 0 0 4px rgba(226,75,74,0.24);
  --ep-shadow-inset-hi:inset 0 1px 0 rgba(255,255,255,0.12);
  --ep-edge-signal:5px;

  /* Layout */
  --ep-content-max:1120px;
  --ep-gutter:40px;
  --ep-section-y:clamp(64px, 44px + 4.2vw, 104px);
  --ep-header-h:64px;
  --ep-card-max:720px;

  /* Motion */
  --ep-dur-hover:120ms;
  --ep-ease-out:cubic-bezier(.22,1,.36,1);
}
@media (max-width:719px){
  :root{--ep-gutter:20px;--ep-header-h:56px}
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{
  -webkit-text-size-adjust:100%;text-size-adjust:100%;
  background:var(--ep-bg);
  scroll-padding-top:calc(var(--ep-header-h) + 16px);
}
body{
  margin:0;min-height:100vh;
  background:var(--ep-bg);color:var(--ep-fg-1);
  font-family:var(--ep-font-sans);font-size:16px;line-height:1.6;
  font-variation-settings:var(--ep-fvs-text);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
a{color:var(--ep-accent-hover);text-decoration:none}
a:hover{color:var(--ep-accent-press)}
::selection{background:var(--ep-red-100);color:var(--ep-grey-1000)}
a:focus-visible,button:focus-visible{outline:none;box-shadow:var(--ep-shadow-focus);border-radius:var(--ep-r-sm)}

.skip-link{
  position:absolute;left:var(--ep-gutter);top:-100px;z-index:100;
  padding:10px 16px;border-radius:var(--ep-r-md);
  background:var(--ep-grey-1000);color:var(--ep-white);font-weight:600;font-size:14px;
}
.skip-link:focus{top:12px;color:var(--ep-white)}

/* ---------- Wordmark (live text, green full stop) ---------- */
.logo{
  display:inline-flex;align-items:baseline;
  font-family:var(--ep-font-sans);font-size:21px;line-height:1;font-weight:800;
  font-variation-settings:var(--ep-fvs-display);letter-spacing:var(--ep-tr-tight);
  color:var(--ep-fg-1);white-space:nowrap;
}
.logo::after{content:".";color:var(--ep-state-confirmed)}
.logo:hover{color:var(--ep-fg-1)}

/* ---------- Header ---------- */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(251,251,252,0.82);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--ep-border-1);
}
.header-inner{
  position:relative;
  max-width:calc(var(--ep-content-max) + 2 * var(--ep-gutter));
  height:var(--ep-header-h);margin:0 auto;padding:0 var(--ep-gutter);
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.nav-list{display:flex;align-items:center;gap:4px;margin:0;padding:0;list-style:none}
.nav-list a{
  display:inline-flex;align-items:center;min-height:40px;padding:0 12px;
  border-radius:var(--ep-r-md);
  font-size:14px;font-weight:500;color:var(--ep-fg-2);
  transition:background-color var(--ep-dur-hover) var(--ep-ease-out),color var(--ep-dur-hover) var(--ep-ease-out);
}
.nav-list a:hover{background:var(--ep-bg-sunken);color:var(--ep-fg-1)}
.nav-list a.active{color:var(--ep-fg-1);font-weight:600}
.nav-list a.active::before{
  content:"";width:6px;height:6px;margin-right:8px;border-radius:50%;
  background:var(--ep-state-signal);flex:none;
}
.nav-toggle{
  display:none;align-items:center;min-height:40px;padding:0 14px;
  border:1px solid var(--ep-border-2);border-radius:var(--ep-r-md);
  background:var(--ep-bg-raised);color:var(--ep-fg-1);
  font:600 14px/1 var(--ep-font-sans);cursor:pointer;
}
.nav-toggle:hover{background:var(--ep-bg-sunken)}

@media (max-width:719px){
  .js .nav-toggle{display:inline-flex}
  .js .nav-list{
    display:none;position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    padding:8px var(--ep-gutter) 16px;
    background:var(--ep-bg-raised);border-bottom:1px solid var(--ep-border-1);
    box-shadow:var(--ep-shadow-md);
  }
  .js .site-header.is-open .nav-list{display:flex}
  .js .nav-list a{min-height:48px;width:100%;padding:0 4px;font-size:16px;border-radius:0}
  .js .nav-list li + li a{border-top:1px solid var(--ep-border-1)}
  .js .nav-list a:hover{background:transparent}
}
/* Hem: on a wide screen the logo is the way home, so the link only adds noise.
   It stays in the mobile menu, where the logo is not obviously a link (WRT-T-196). */
@media (min-width:720px){
  .nav-list > li:has(> a[href="/"]){display:none}
}

/* ---------- Content wrapper ---------- */
.content{display:block}
.prez-block{margin:0}
.prez-block > .marpit{display:block}

/* Card blocks: outer spacing only. The card itself is not styled. */
.prez-block.is-card{padding:clamp(24px, 4vw, 64px) var(--ep-gutter);background:var(--ep-bg)}
.prez-block.is-card > .marpit{max-width:min(100%, var(--ep-card-max), var(--card-w, 1080px));margin:0 auto}
.prez-block.is-card + .prez-block.is-card{padding-top:0}

/* ==========================================================================
   Sections — full-bleed bands, centred measure
   ========================================================================== */
.prez-block:not(.is-card) section{
  display:block;position:relative;
  width:auto;height:auto;min-height:0;margin:0;overflow:visible;
  padding-block:var(--ep-section-y);
  padding-inline:max(var(--ep-gutter), calc((100% - var(--ep-content-max)) / 2));
  background:var(--s-bg);color:var(--s-fg-1);
  font-family:var(--ep-font-sans);font-size:16px;line-height:1.6;
  font-variation-settings:var(--ep-fvs-text);
  text-align:left;
}

/* Theme: light */
.prez-block:not(.is-card) section[data-theme="early-pattern"]{
  --s-bg:var(--ep-grey-25);
  --s-head:var(--ep-grey-900);
  --s-fg-1:var(--ep-grey-900);
  --s-fg-2:var(--ep-grey-700);
  --s-fg-3:var(--ep-grey-600);
  --s-fg-4:var(--ep-grey-400);
  --s-rule:var(--ep-grey-100);
  --s-rule-2:var(--ep-grey-200);
  --s-panel:var(--ep-white);
  --s-panel-border:var(--ep-grey-100);
  --s-panel-shadow:var(--ep-shadow-sm);
  --s-sunken:var(--ep-grey-50);
  --s-code:var(--ep-grey-50);
  --s-focus:var(--ep-shadow-focus);
  --s-state:var(--ep-red-500);
  --s-state-text:var(--ep-red-600);
  --s-btn:var(--ep-red-500);--s-btn-hover:var(--ep-red-600);--s-btn-press:var(--ep-red-700);
  --s-btn-fg:var(--ep-white);--s-btn-shadow:none;
}
/* Theme: ink */
.prez-block:not(.is-card) section[data-theme="early-pattern-ink"]{
  --s-bg:var(--ep-grey-1000);
  --s-head:var(--ep-white);
  --s-fg-1:var(--ep-grey-50);
  --s-fg-2:var(--ep-grey-300);
  --s-fg-3:var(--ep-grey-400);
  --s-fg-4:var(--ep-grey-600);
  --s-rule:var(--ep-grey-800);
  --s-rule-2:var(--ep-grey-700);
  --s-panel:var(--ep-grey-900);
  --s-panel-border:var(--ep-grey-800);
  --s-panel-shadow:inset 0 1px 0 rgba(255,255,255,0.05);
  --s-sunken:var(--ep-grey-950);
  --s-stripe:rgba(255,255,255,0.07);
  --s-stripe-hover:rgba(255,255,255,0.11);
  --s-code:var(--ep-grey-900);
  --s-focus:var(--ep-shadow-focus-ink);
  --s-state:var(--ep-red-500);
  --s-state-text:var(--ep-red-400);
  --s-btn:var(--ep-red-500);--s-btn-hover:var(--ep-red-600);--s-btn-press:var(--ep-red-700);
  --s-btn-fg:var(--ep-white);--s-btn-shadow:var(--ep-shadow-inset-hi);
}

/* One signal colour per surface — the state class re-colours everything signal-bearing */
.prez-block:not(.is-card) section[data-theme="early-pattern"].confirmed{
  --s-state:var(--ep-green-600);--s-state-text:var(--ep-green-700);
  --s-btn:var(--ep-green-600);--s-btn-hover:var(--ep-green-700);--s-btn-press:var(--ep-green-800);
}
.prez-block:not(.is-card) section[data-theme="early-pattern-ink"].confirmed{
  --s-state:var(--ep-green-500);--s-state-text:var(--ep-green-400);
  --s-btn:var(--ep-green-500);--s-btn-hover:var(--ep-green-600);--s-btn-press:var(--ep-green-700);
}
.prez-block:not(.is-card) section[data-theme="early-pattern"].dormant{
  --s-state:var(--ep-grey-500);--s-state-text:var(--ep-grey-600);
  --s-btn:var(--ep-grey-900);--s-btn-hover:var(--ep-grey-1000);--s-btn-press:var(--ep-grey-1000);
}
.prez-block:not(.is-card) section[data-theme="early-pattern-ink"].dormant{
  --s-state:var(--ep-grey-400);--s-state-text:var(--ep-grey-400);
  --s-btn:var(--ep-grey-50);--s-btn-hover:var(--ep-grey-100);--s-btn-press:var(--ep-grey-200);
  --s-btn-fg:var(--ep-grey-1000);
}

/* Band modifiers */
.prez-block:not(.is-card) section[data-theme="early-pattern"].quiet{--s-bg:var(--ep-grey-50);--s-panel-border:var(--ep-grey-200)}
.prez-block:not(.is-card) section[data-theme="early-pattern-ink"].quiet{--s-bg:var(--ep-grey-950)}
.prez-block:not(.is-card) section.compact{padding-block:calc(var(--ep-section-y) * 0.6)}
.prez-block:not(.is-card) section.edge::before,
.prez-block:not(.is-card) section.cta::before{
  content:"";position:absolute;left:0;right:0;top:-1px;height:var(--ep-edge-signal);
  background:var(--s-state);
}
.prez-block:not(.is-card) section.cta{padding-block:calc(var(--ep-section-y) * 1.15)}
.prez-block:not(.is-card) section.center{text-align:center}
.prez-block:not(.is-card) section.center h1,
.prez-block:not(.is-card) section.center h2,
.prez-block:not(.is-card) section.center p,
.prez-block:not(.is-card) section.center blockquote{margin-inline:auto}
.prez-block:not(.is-card) section.center p:has(> strong > a){justify-content:center}

/* Transitions: same-theme neighbours get a hairline so the seam looks intended */
.prez-block:not(.is-card):has(section[data-theme="early-pattern"]) + .prez-block:not(.is-card) section[data-theme="early-pattern"]{
  border-top:1px solid var(--ep-grey-100);
}
.prez-block:not(.is-card):has(section[data-theme="early-pattern-ink"]) + .prez-block:not(.is-card) section[data-theme="early-pattern-ink"]{
  border-top:1px solid var(--ep-grey-800);
}

/* ---------- Typography inside sections ---------- */
.prez-block:not(.is-card) section :where(h1,h2,h3,h4,h5,h6,p,ul,ol,blockquote,table,figure,pre){margin-top:0}

/* h6 — eyebrow */
.prez-block:not(.is-card) section h6{
  margin:0 0 16px;
  font-size:12px;line-height:1.4;font-weight:600;
  letter-spacing:var(--ep-tr-eyebrow);text-transform:uppercase;
  color:var(--s-state-text);
}
/* h1 — display line */
.prez-block:not(.is-card) section h1{
  max-width:16em;margin:0 0 24px;
  font-size:clamp(2.25rem, 1.4rem + 2.4vw, 3.5rem);line-height:1.05;font-weight:800;
  font-variation-settings:var(--ep-fvs-display);letter-spacing:var(--ep-tr-tight);
  color:var(--s-head);text-wrap:balance;
}
/* h2 — section head */
.prez-block:not(.is-card) section h2{
  max-width:20em;margin:0 0 16px;
  font-size:clamp(1.75rem, 1.35rem + 1.2vw, 2.25rem);line-height:1.15;font-weight:700;
  font-variation-settings:var(--ep-fvs-display);letter-spacing:var(--ep-tr-snug);
  color:var(--s-head);text-wrap:balance;
}
/* h3 — item head */
.prez-block:not(.is-card) section h3{
  margin:0 0 8px;
  font-size:1.25rem;line-height:1.3;font-weight:600;
  font-variation-settings:var(--ep-fvs-display);letter-spacing:-0.01em;
  color:var(--s-head);text-wrap:balance;
}
.prez-block:not(.is-card) section h4,
.prez-block:not(.is-card) section h5{
  margin:0 0 8px;font-size:1rem;line-height:1.4;font-weight:600;
  font-variation-settings:var(--ep-fvs-display);color:var(--s-head);
}
.prez-block:not(.is-card) section p{
  max-width:68ch;margin:0 0 16px;color:var(--s-fg-2);text-wrap:pretty;
}
/* Lead: a paragraph directly after the display line */
.prez-block:not(.is-card) section h1 + p{font-size:clamp(1.0625rem, 0.95rem + 0.5vw, 1.25rem);line-height:1.55;max-width:640px}
.prez-block:not(.is-card) section :where(p,li,td,h1,h2,h3,h4,h6,blockquote):last-child{margin-bottom:0}

/* em — the accent phrase. Never italic. */
.prez-block:not(.is-card) section em{font-style:normal;color:var(--s-state)}
.prez-block:not(.is-card) section :where(p,li,td) em{color:var(--s-state-text);font-weight:500}
.prez-block:not(.is-card) section strong{font-weight:600;color:var(--s-fg-1)}

/* Text links (onward links use →) */
.prez-block:not(.is-card) section a{
  color:var(--s-state-text);font-weight:600;
  text-decoration:underline;text-decoration-color:transparent;
  text-underline-offset:0.2em;text-decoration-thickness:1px;
  transition:text-decoration-color var(--ep-dur-hover) var(--ep-ease-out),color var(--ep-dur-hover) var(--ep-ease-out);
}
.prez-block:not(.is-card) section a:hover{text-decoration-color:currentColor}
.prez-block:not(.is-card) section a:focus-visible{box-shadow:var(--s-focus)}
.prez-block:not(.is-card) section p:has(> a:only-child){margin-top:24px}

/* Primary button: **[Label](url)** */
.prez-block:not(.is-card) section p:has(> strong > a){
  display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-top:32px;
}
.prez-block:not(.is-card) section p > strong > a{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;padding:0 20px;border-radius:var(--ep-r-md);
  background:var(--s-btn);color:var(--s-btn-fg);box-shadow:var(--s-btn-shadow);
  font-size:15px;line-height:1;font-weight:600;letter-spacing:0;
  text-decoration:none;white-space:nowrap;
  transition:background-color var(--ep-dur-hover) var(--ep-ease-out);
}
.prez-block:not(.is-card) section p > strong > a:hover{background:var(--s-btn-hover);color:var(--s-btn-fg)}
.prez-block:not(.is-card) section p > strong > a:active{background:var(--s-btn-press)}
.prez-block:not(.is-card) section p > strong > a:focus-visible{box-shadow:var(--s-btn-shadow),var(--s-focus);border-radius:var(--ep-r-md)}

/* Lists — the dot is the bullet */
.prez-block:not(.is-card) section ul,
.prez-block:not(.is-card) section ol{max-width:68ch;margin:0 0 16px;padding:0;list-style:none;color:var(--s-fg-2)}
.prez-block:not(.is-card) section li{position:relative;margin:0 0 8px;padding-left:22px}
.prez-block:not(.is-card) section ul > li::before{
  content:"";position:absolute;left:2px;top:0.62em;width:7px;height:7px;border-radius:50%;
  background:var(--s-fg-4);
}
.prez-block:not(.is-card) section ol{counter-reset:ep-ol}
.prez-block:not(.is-card) section ol > li{counter-increment:ep-ol;padding-left:32px}
.prez-block:not(.is-card) section ol > li::before{
  content:counter(ep-ol, decimal-leading-zero);position:absolute;left:0;top:0.15em;
  font-family:var(--ep-font-mono);font-size:13px;letter-spacing:var(--ep-tr-wide);color:var(--s-fg-3);
}

/* Pull quote */
.prez-block:not(.is-card) section blockquote{margin:0 0 24px;padding:0;border:0;max-width:28em}
.prez-block:not(.is-card) section blockquote p{
  max-width:none;
  font-size:clamp(1.5rem, 1.15rem + 1.2vw, 2.25rem);line-height:1.25;font-weight:600;
  font-variation-settings:var(--ep-fvs-display);letter-spacing:var(--ep-tr-snug);
  color:var(--s-head);text-wrap:balance;
}
.prez-block:not(.is-card) section blockquote p + p{
  margin-top:20px;font-size:14px;line-height:1.5;font-weight:500;
  letter-spacing:0;font-variation-settings:var(--ep-fvs-text);color:var(--s-fg-3);
}

/* Tables */
.prez-block:not(.is-card) section table{
  width:100%;margin:0 0 24px;border-collapse:collapse;font-size:15px;color:var(--s-fg-2);
}
.prez-block:not(.is-card) section th{
  padding:10px 16px 10px 12px;text-align:left;vertical-align:bottom;
  font-size:12px;font-weight:600;letter-spacing:var(--ep-tr-eyebrow);text-transform:uppercase;
  color:var(--s-fg-3);border-bottom:1px solid var(--s-rule-2);white-space:nowrap;
}
.prez-block:not(.is-card) section td{padding:14px 16px 14px 12px;vertical-align:top;border-bottom:1px solid var(--s-rule)}
/* Every other row a shade darker on light surfaces, lighter on ink (--s-stripe),
   so a row reads as one line across four columns. Plain rgba, not color-mix(),
   which Safari before 16.2 drops; --s-sunken matches the quiet background. */
.prez-block:not(.is-card) section tbody tr:nth-child(even) td{background:var(--s-stripe, rgba(15,15,17,0.07))}
.prez-block:not(.is-card) section td:first-child{color:var(--s-fg-1);font-weight:500}

/* App feel (Thomas 2026-10-06): the table sits in a panel like the Ask boxes —
   rounded, bordered, a sunken header strip, a hover row, and a bold run in the
   first column (e.g. "Idag: **håller delvis.**") rendered as a status badge. */
@media (min-width:720px){
  .prez-block:not(.is-card) section table{
    border-collapse:separate;border-spacing:0;overflow:hidden;
    background:var(--s-panel);border:1px solid var(--s-rule);border-radius:14px;
    box-shadow:var(--s-panel-shadow);
  }
  .prez-block:not(.is-card) section th{
    padding:12px 16px;background:var(--s-sunken);border-bottom:1px solid var(--s-rule);
    font-family:var(--ep-font-mono);font-size:11px;font-weight:500;letter-spacing:.12em;
  }
  .prez-block:not(.is-card) section td{padding:18px 16px}
  .prez-block:not(.is-card) section tbody tr:last-child td{border-bottom:0}
  .prez-block:not(.is-card) section tbody tr{transition:background-color .15s}
  .prez-block:not(.is-card) section tbody tr:hover td{background:var(--s-stripe-hover, rgba(15,15,17,0.11))}
}
.prez-block:not(.is-card) section td:first-child strong{
  display:inline-block;margin-top:8px;padding:3px 10px;border-radius:999px;
  font-size:12px;font-weight:600;line-height:1.4;letter-spacing:.01em;
  color:var(--s-fg-1);background:var(--s-sunken);border:1px solid var(--s-rule-2);
}

/* Below 720px every table row is a card: cells stack, each one labelled by its
   column header (data-label, set in web/tableLabels.js). The thead stays in the
   DOM for screen readers, visually hidden. At >=720px none of this applies. */
@media (max-width:719px){
  .prez-block:not(.is-card) section :is(table,tbody,tr,td),
  .prose-block :is(table,tbody,tr,td){display:block;width:100%}
  .prez-block:not(.is-card) section thead,
  .prose-block thead{
    position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
    clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
  }
  .prez-block:not(.is-card) section tr,
  .prose-block tr{
    border-top:1px solid var(--s-rule, var(--ep-grey-100));padding:16px 12px;
  }
  /* stacked: the stripe sits on the card, not on each cell */
  .prez-block:not(.is-card) section tbody tr:nth-child(even) td{background:none}
  .prez-block:not(.is-card) section tbody tr:nth-child(even){background:var(--s-stripe, rgba(15,15,17,0.07))}
  .prez-block:not(.is-card) section tr:last-child,
  .prose-block tr:last-child{border-bottom:1px solid var(--s-rule, var(--ep-grey-100))}
  .prez-block:not(.is-card) section td,
  .prose-block td{padding:6px 0;border:0;overflow-wrap:anywhere}
  .prez-block:not(.is-card) section td:first-child,
  .prose-block td:first-child{font-size:17px;line-height:1.4;font-weight:600;color:var(--s-fg-1, var(--ep-fg-1))}
  .prez-block:not(.is-card) section td[data-label]:not([data-label=""])::before,
  .prose-block td[data-label]:not([data-label=""])::before{
    content:attr(data-label);display:block;margin-bottom:4px;
    font-family:var(--ep-font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
    color:var(--s-fg-3, var(--ep-fg-3));
  }
}
@media (max-width:719px){
  .prez-block:not(.is-card) section tbody tr,
  .prez-block:not(.is-card) section tbody tr:nth-child(even){
    margin:0 0 12px;padding:16px;border:1px solid var(--s-rule);border-radius:14px;
    background:var(--s-panel);box-shadow:var(--s-panel-shadow);
  }
  .prez-block:not(.is-card) section tbody tr:last-child{border-bottom:1px solid var(--s-rule)}
}

/* Code, media, rules */
.prez-block:not(.is-card) section code{
  font-family:var(--ep-font-mono);font-size:0.875em;
  padding:2px 6px;border-radius:var(--ep-r-sm);background:var(--s-code);color:var(--s-fg-1);
}
.prez-block:not(.is-card) section pre{
  max-width:100%;overflow-x:auto;margin:0 0 24px;padding:20px;
  border:1px solid var(--s-panel-border);border-radius:var(--ep-r-lg);background:var(--s-code);
}
.prez-block:not(.is-card) section pre code{padding:0;background:none;font-size:13px;line-height:1.6}
.prez-block:not(.is-card) section img{
  display:block;max-width:100%;height:auto;
  border:1px solid var(--s-panel-border);border-radius:var(--ep-r-lg);
}
.prez-block:not(.is-card) section p:has(> img:only-child){max-width:none}

/* ep-film — the explainer film in two cuts. Landscape (.ep-film-l) at and above
   the site breakpoint, portrait (.ep-film-p) below it; exactly one is in the
   layout at any width, so the browser fetches metadata for one file only. */
.prez-block:not(.is-card) section .ep-film{max-width:none;margin:0 0 24px}
.prez-block:not(.is-card) section .ep-film video{
  width:100%;height:auto;
  border:1px solid var(--s-panel-border);border-radius:var(--ep-r-lg);background:var(--ep-grey-950);
}
/* Orientation rules carry the `video` type too, so they outrank the shared rule above. */
.prez-block:not(.is-card) section .ep-film video.ep-film-l{display:block;aspect-ratio:16 / 9}
.prez-block:not(.is-card) section .ep-film video.ep-film-p{display:none;aspect-ratio:9 / 16}
@media (max-width:719px){
  .prez-block:not(.is-card) section .ep-film video.ep-film-l{display:none}
  .prez-block:not(.is-card) section .ep-film video.ep-film-p{display:block;max-width:420px;margin:0 auto}
}
.prez-block:not(.is-card) section hr{height:0;margin:48px 0;border:0;border-top:1px solid var(--s-rule)}

/* ==========================================================================
   Layouts — .cols.NAME > .cell   (everything is one column below 720px)
   ========================================================================== */
.prez-block:not(.is-card) section .cols{
  display:grid;grid-template-columns:minmax(0,1fr);gap:24px;margin-top:40px;
}
.prez-block:not(.is-card) section .cols:first-child{margin-top:0}
.prez-block:not(.is-card) section .cols > .cell{min-width:0}
.prez-block:not(.is-card) section .cols > .cell > :first-child{margin-top:0}
.prez-block:not(.is-card) section .cols > .cell > :last-child{margin-bottom:0}

@media (min-width:720px){
  .prez-block:not(.is-card) section .cols{gap:32px}
  .prez-block:not(.is-card) section .cols:is(.two-columns,.grid-2x2,.comparison,.image-left,.image-right,.feature-list,.steps){
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .prez-block:not(.is-card) section .cols:is(.three-columns,.metrics){grid-template-columns:repeat(3,minmax(0,1fr))}
  .prez-block:not(.is-card) section .cols.timeline{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
}
@media (min-width:1024px){
  .prez-block:not(.is-card) section .cols:is(.two-columns,.image-left,.image-right){column-gap:80px}
  .prez-block:not(.is-card) section .cols.steps{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
}

/* two-columns — head left, body right; right column drops to meet the h1 */
.prez-block:not(.is-card) section .two-columns > .cell p{font-size:1.0625rem}
@media (min-width:720px){
  .prez-block:not(.is-card) section .two-columns > .cell:first-child:has(> h6:first-child) + .cell{padding-top:33px}
  .prez-block:not(.is-card) section .two-columns > .cell:first-child h1{margin-bottom:0}
}

/* three-columns — text columns on a hairline */
.prez-block:not(.is-card) section .three-columns > .cell{padding-top:20px;border-top:1px solid var(--s-rule-2)}

/* grid-2x2 & comparison — panels */
.prez-block:not(.is-card) section :is(.grid-2x2,.comparison) > .cell{
  position:relative;overflow:hidden;
  padding:clamp(24px, 2.4vw, 32px);
  background:var(--s-panel);border:1px solid var(--s-panel-border);
  border-radius:var(--ep-r-xl);box-shadow:var(--s-panel-shadow);
}
.prez-block:not(.is-card) section :is(.grid-2x2,.comparison) > .cell p{font-size:15px;line-height:1.6}
@media (min-width:720px){.prez-block:not(.is-card) section .grid-2x2{gap:20px}}

/* comparison — left is what you avoid (signal red edge), right is what you get
   (confirmed green edge). Same states as the trail and the condition blocks. */
.prez-block:not(.is-card) section .comparison > .cell:first-child{background:var(--s-sunken);box-shadow:none}
.prez-block:not(.is-card) section .comparison > .cell:first-child :is(h2,h3){color:var(--s-fg-2)}
.prez-block:not(.is-card) section .comparison > .cell::before{
  content:"";position:absolute;left:0;right:0;top:0;height:var(--ep-edge-signal);background:var(--ep-red-500);
}
.prez-block:not(.is-card) section .comparison > .cell:last-child::before{background:var(--ep-state-confirmed)}

/* steps — numbered sequence on a hairline */
.prez-block:not(.is-card) section .steps{counter-reset:ep-step}
.prez-block:not(.is-card) section .steps > .cell{
  counter-increment:ep-step;padding-top:20px;border-top:1px solid var(--s-rule-2);
}
.prez-block:not(.is-card) section .steps > .cell::before{
  content:counter(ep-step, decimal-leading-zero);display:block;margin-bottom:28px;
  font-family:var(--ep-font-mono);font-size:13px;line-height:1;letter-spacing:var(--ep-tr-wide);
  color:var(--s-state-text);
}
.prez-block:not(.is-card) section .steps > .cell p{font-size:15px}

/* metrics — one figure in mono, in the surface's state colour */
.prez-block:not(.is-card) section .metrics > .cell{padding-top:24px;border-top:1px solid var(--s-rule-2)}
.prez-block:not(.is-card) section .metrics :is(h1,h2){
  max-width:none;margin:0 0 12px;
  font-family:var(--ep-font-mono);font-size:clamp(3.5rem, 2.6rem + 2.6vw, 5.5rem);line-height:1;
  font-weight:700;font-variation-settings:normal;letter-spacing:-0.02em;
  color:var(--s-state);
}
.prez-block:not(.is-card) section .metrics p{max-width:24ch;font-size:1.0625rem;line-height:1.45}

/* feature-list — principles on hairlines, dot bullets */
@media (min-width:720px){.prez-block:not(.is-card) section .feature-list{column-gap:64px;row-gap:0}}
.prez-block:not(.is-card) section .feature-list > .cell{padding:24px 0 28px;border-top:1px solid var(--s-rule-2)}
.prez-block:not(.is-card) section .feature-list{row-gap:0}
.prez-block:not(.is-card) section .feature-list h3{display:flex;align-items:baseline;gap:12px}
.prez-block:not(.is-card) section .feature-list h3::before{
  content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--s-state);
  position:relative;top:-0.1em;
}
.prez-block:not(.is-card) section .feature-list h3 ~ *{padding-left:20px}

/* statement — one idea, large */
.prez-block:not(.is-card) section .statement > .cell{max-width:880px}
.prez-block:not(.is-card) section .statement h1{font-size:clamp(2.5rem, 1.5rem + 3.2vw, 4rem);letter-spacing:var(--ep-tr-display);line-height:1.02;max-width:15em}
.prez-block:not(.is-card) section .statement h1 + p{font-size:clamp(1.0625rem, 0.95rem + 0.5vw, 1.25rem)}

/* start / section / .hero — the opening and divider display lines */
.prez-block:not(.is-card) section.hero{padding-block:clamp(80px, 48px + 6vw, 136px)}
.prez-block:not(.is-card) section:is(.hero) h1,
.prez-block:not(.is-card) section .cols:is(.start,.section) h1{
  font-size:clamp(2.75rem, 1.5rem + 4.2vw, 4.75rem);line-height:0.98;
  letter-spacing:var(--ep-tr-display);max-width:13em;margin-bottom:32px;
}
.prez-block:not(.is-card) section:is(.hero) h1 + p,
.prez-block:not(.is-card) section .cols:is(.start,.section) h1 + p{font-size:clamp(1.125rem, 0.95rem + 0.7vw, 1.375rem);max-width:620px}
.prez-block:not(.is-card) section .cols.section > .cell{padding-block:clamp(16px, 4vw, 48px)}

/* ask (and chat, which shares the cell look) — one app-like panel per question: h3 is the input field carrying the
   question, the first paragraph after it is the answer, "**Detta stämmer när/inte när**"
   paragraphs are condition blocks, and the last of two or more paragraphs is the
   mono provenance line. Two columns side by side from 900px, one below; a single
   cell stays one column. */
.prez-block:not(.is-card) section .cols:is(.ask,.chat){
  grid-template-columns:minmax(0,1fr);gap:24px;max-width:44rem;align-items:stretch;
}
@media (min-width:900px){
  .prez-block:not(.is-card) section .cols.ask{grid-template-columns:repeat(2,minmax(0,1fr));max-width:none}
}
.prez-block:not(.is-card) section .cols.ask:has(> .cell:only-child){grid-template-columns:minmax(0,1fr);max-width:44rem}
.prez-block:not(.is-card) section .cols:is(.ask,.chat) > .cell{
  padding:20px 24px;overflow-wrap:anywhere;
  background:var(--s-panel);border:1px solid var(--s-rule);border-radius:14px;
  box-shadow:var(--s-panel-shadow);
}
/* question = input field: label above the text, send button on the right */
.prez-block:not(.is-card) section .cols:is(.ask,.chat) > .cell > h3{
  position:relative;margin:0;
  padding:14px 52px 14px 16px;
  background:var(--s-sunken);border:1px solid var(--s-rule-2);border-radius:10px;
  font-family:var(--ep-font-sans);font-size:1.0625rem;font-weight:500;line-height:1.4;
  font-variation-settings:var(--ep-fvs-text);letter-spacing:0;
  color:var(--s-head);text-wrap:balance;
}
.prez-block:not(.is-card) section .cols:is(.ask,.chat) > .cell > h3::before{
  content:"Fråga";display:block;margin-bottom:8px;
  font-family:var(--ep-font-mono);font-size:11px;font-weight:500;line-height:1.2;
  letter-spacing:.12em;text-transform:uppercase;color:var(--s-fg-3);
}
.prez-block:not(.is-card) section .cols:is(.ask,.chat) > .cell > h3::after{
  content:"";position:absolute;right:10px;bottom:10px;width:32px;height:32px;border-radius:8px;
  background:var(--ep-red-500) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 13V3M3.5 7.5 8 3l4.5 4.5'/%3E%3C/svg%3E") center/16px 16px no-repeat;
}
/* answer = first paragraph after the question, under a Svar label */
.prez-block:not(.is-card) section .cols:is(.ask,.chat) > .cell > h3 + p{margin:16px 0 0;font-size:1rem;line-height:1.6;color:var(--s-fg-1)}
.prez-block:not(.is-card) section .cols:is(.ask,.chat) > .cell > h3 + p::before{
  content:"Svar";display:block;margin-bottom:8px;
  font-family:var(--ep-font-mono);font-size:11px;font-weight:500;line-height:1.2;
  letter-spacing:.12em;text-transform:uppercase;color:var(--s-fg-3);
}
/* condition = "**Detta stämmer när** …" / "**Detta stämmer inte när** …": a paragraph
   starting with <strong>. First one green, second one signal red. */
.prez-block:not(.is-card) section .cols:is(.ask,.chat) > .cell > p:has(> strong:first-child){
  margin:14px 0 0;max-width:none;padding-left:12px;border-left:2px solid var(--ep-green-500);
  font-size:.9375rem;line-height:1.55;color:var(--s-fg-1);
}
.prez-block:not(.is-card) section .cols:is(.ask,.chat) > .cell > p:has(> strong:first-child) ~ p:has(> strong:first-child){
  border-left-color:var(--ep-red-500);
}
.prez-block:not(.is-card) section .cols:is(.ask,.chat) > .cell > p:has(> strong:first-child) > strong:first-child{
  display:block;font-family:var(--ep-font-mono);font-size:11px;font-weight:500;line-height:1.2;
  letter-spacing:.12em;text-transform:uppercase;color:var(--s-fg-3);
}
/* confidence = `code` after a <br>: a one-line mono chip — in Ask cells and
   in table cells alike, so a label looks the same wherever it sits */
.prez-block:not(.is-card) section .cols:is(.ask,.chat) > .cell > p code,
.prez-block:not(.is-card) section td code{
  display:inline-block;margin-top:6px;padding:2px 8px;white-space:nowrap;
  font-family:var(--ep-font-mono);font-size:12px;line-height:1.5;color:var(--s-fg-2);
  background:var(--s-sunken);border:1px solid var(--s-rule-2);border-radius:6px;
}
/* provenance = last paragraph of a cell with two or more paragraphs (never a condition) */
.prez-block:not(.is-card) section .cols:is(.ask,.chat) > .cell > p:last-of-type:not(:first-of-type):not(:has(> strong:first-child)){
  margin:16px 0 0;max-width:none;padding-top:12px;border-top:1px solid var(--s-rule);
  font-family:var(--ep-font-mono);font-size:13px;line-height:1.5;color:var(--s-fg-3);
}

/* chat — the ask cells take turns in an endless CSS loop. Each cell owns a 9 s
   slot (--slot = 0, 9, 18, 27 s); all cells share grid-area 1/1, so only one
   shows and the box keeps the height of the tallest. Inside a slot: the question
   is typed (h3 wipe, 0.3–1.9 s), three dots pulse (1.9–2.9 s), then the answer
   and its condition and provenance lines fade up 150 ms apart from 3.0 s. The
   cell fades out at 8.6 s. Every inner animation is 9 s long and starts at
   --slot plus its own offset, so it restarts exactly at each slot. Only the
   cell's outer visibility depends on the loop length (cells × 9 s), which is
   why there is one visibility keyframes per cell count. 2–4 cells. */
.prez-block:not(.is-card) section .cols.chat{max-width:44rem}
/* motion only without the reduced-motion preference: under it the cells are
   plain panels, stacked in one column, all visible — no override needed */
@media (prefers-reduced-motion:no-preference){
  .prez-block:not(.is-card) section .cols.chat > .cell{
    grid-area:1/1;position:relative;opacity:0;
    animation-iteration-count:infinite;animation-timing-function:linear;animation-delay:var(--slot);
  }
  .prez-block:not(.is-card) section .cols.chat > .cell:nth-child(1){--slot:0s}
  .prez-block:not(.is-card) section .cols.chat > .cell:nth-child(2){--slot:9s}
  .prez-block:not(.is-card) section .cols.chat > .cell:nth-child(3){--slot:18s}
  .prez-block:not(.is-card) section .cols.chat > .cell:nth-child(4){--slot:27s}
  .prez-block:not(.is-card) section .cols.chat:has(> .cell:nth-child(2)) > .cell{animation-name:ep-chat-show-2;animation-duration:18s}
  .prez-block:not(.is-card) section .cols.chat:has(> .cell:nth-child(3)) > .cell{animation-name:ep-chat-show-3;animation-duration:27s}
  .prez-block:not(.is-card) section .cols.chat:has(> .cell:nth-child(4)) > .cell{animation-name:ep-chat-show-4;animation-duration:36s}
  /* inside a slot: question typed, thinking dots, answer and the rest fading up */
  .prez-block:not(.is-card) section .cols.chat > .cell > h3{
    clip-path:inset(0 100% 0 0);
    animation:ep-chat-type 9s steps(20,end) infinite;animation-delay:calc(var(--slot) + .3s);
  }
  .prez-block:not(.is-card) section .cols.chat > .cell::after{
    content:"•••";position:absolute;left:24px;bottom:16px;opacity:0;
    font-family:var(--ep-font-mono);font-size:18px;line-height:1;letter-spacing:.25em;color:var(--s-fg-3);
    animation:ep-chat-dots 9s steps(1,end) infinite;animation-delay:calc(var(--slot) + 1.9s);
  }
  .prez-block:not(.is-card) section .cols.chat > .cell > p{
    opacity:0;animation:ep-chat-in 9s ease-out infinite;animation-delay:calc(var(--slot) + 3s);
  }
  .prez-block:not(.is-card) section .cols.chat > .cell > p:nth-of-type(2){animation-delay:calc(var(--slot) + 3.15s)}
  .prez-block:not(.is-card) section .cols.chat > .cell > p:nth-of-type(3){animation-delay:calc(var(--slot) + 3.3s)}
  .prez-block:not(.is-card) section .cols.chat > .cell > p:nth-of-type(4){animation-delay:calc(var(--slot) + 3.45s)}
  /* a single cell is not a loop: show it as a plain ask panel */
  .prez-block:not(.is-card) section .cols.chat:has(> .cell:only-child) > .cell{opacity:1;animation:none}
  .prez-block:not(.is-card) section .cols.chat:has(> .cell:only-child) > .cell > h3{clip-path:none;animation:none}
  .prez-block:not(.is-card) section .cols.chat:has(> .cell:only-child) > .cell > p{opacity:1;animation:none}
  .prez-block:not(.is-card) section .cols.chat:has(> .cell:only-child) > .cell::after{display:none}
}
@keyframes ep-chat-show-2{0%,100%{opacity:0}2.222%,47.778%{opacity:1}50%{opacity:0}}
@keyframes ep-chat-show-3{0%,100%{opacity:0}1.481%,31.852%{opacity:1}33.333%{opacity:0}}
@keyframes ep-chat-show-4{0%,100%{opacity:0}1.111%,23.889%{opacity:1}25%{opacity:0}}
@keyframes ep-chat-type{0%{clip-path:inset(0 100% 0 0)}17.778%,100%{clip-path:inset(0 0 0 0)}}
@keyframes ep-chat-dots{
  0%{opacity:1;clip-path:inset(0 66.67% 0 0)}
  3.704%{clip-path:inset(0 33.33% 0 0)}
  7.407%{clip-path:inset(0 0 0 0)}
  11.111%,100%{opacity:0}
}
@keyframes ep-chat-in{0%{opacity:0;transform:translateY(6px)}5%,100%{opacity:1;transform:none}}

/* hero: display line followed by a second statement (## after #) */
.prez-block:not(.is-card) section.hero h1 + h2{
  max-width:18em;margin:clamp(32px, 4vw, 56px) 0 0;
  font-size:clamp(1.75rem, 1.05rem + 2.3vw, 3rem);line-height:1.08;font-weight:800;
  letter-spacing:var(--ep-tr-tight);color:var(--s-head);
}
.prez-block:not(.is-card) section.hero h1 + h2 + p{margin-top:32px;font-size:clamp(1.0625rem, 0.95rem + 0.5vw, 1.25rem);max-width:620px}
/* .mono — display line set in JetBrains Mono, secondary ink, accent in state colour */
.prez-block:not(.is-card) section.mono h1{
  font-family:var(--ep-font-mono);font-weight:700;font-variation-settings:normal;
  letter-spacing:-0.02em;line-height:1.12;max-width:none;color:var(--s-fg-2);
}
.prez-block:not(.is-card) section.mono h1 em{color:var(--s-state)}
/* .mark — the three-state line (signal · bekräftad · vilande), top right of the measure */
.prez-block:not(.is-card) section.mark::after{
  content:"";position:absolute;
  top:clamp(28px, 3.5vw, 56px);right:max(var(--ep-gutter), calc((100% - var(--ep-content-max)) / 2));
  width:132px;height:16px;
  background:
    radial-gradient(circle at 8px 8px, var(--ep-state-signal) 6.5px, transparent 7px),
    radial-gradient(circle at 66px 8px, var(--ep-state-confirmed) 6.5px, transparent 7px),
    radial-gradient(circle at 124px 8px, var(--ep-state-dormant) 6.5px, transparent 7px),
    linear-gradient(var(--s-rule-2), var(--s-rule-2)) center / 100% 1px no-repeat;
}
@media (max-width:719px){
  .prez-block:not(.is-card) section.mark::after{transform:scale(0.75);transform-origin:top right}
}

/* quote — the pull quote as the section */
.prez-block:not(.is-card) section .quote blockquote{max-width:24em;margin:0}
.prez-block:not(.is-card) section .quote blockquote p:first-child{font-size:clamp(1.75rem, 1.2rem + 2vw, 2.75rem);line-height:1.2}

/* image-left / image-right */
.prez-block:not(.is-card) section :is(.image-left,.image-right){align-items:center}
.prez-block:not(.is-card) section :is(.image-left,.image-right) img{width:100%}
@media (max-width:719px){
  .prez-block:not(.is-card) section .image-right > .cell:has(img){order:-1}
}

/* swimlanes — label left, content right, one lane per cell */
.prez-block:not(.is-card) section .swimlanes{gap:0}
.prez-block:not(.is-card) section .swimlanes > .cell{padding:24px 0;border-top:1px solid var(--s-rule-2)}
.prez-block:not(.is-card) section .swimlanes > .cell:last-child{border-bottom:1px solid var(--s-rule-2)}
@media (min-width:720px){
  .prez-block:not(.is-card) section .swimlanes > .cell{
    display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);column-gap:48px;align-items:start;
  }
  .prez-block:not(.is-card) section .swimlanes > .cell > *{grid-column:2}
  .prez-block:not(.is-card) section .swimlanes > .cell > :first-child{grid-column:1;grid-row:1 / span 20;margin:0}
}

/* timeline — dots on a line; vertical on mobile */
.prez-block:not(.is-card) section .timeline > .cell{position:relative}
.prez-block:not(.is-card) section .timeline > .cell::before{
  content:"";position:absolute;width:11px;height:11px;border-radius:50%;
  background:var(--s-state);box-shadow:0 0 0 4px var(--s-bg);
}
@media (max-width:719px){
  .prez-block:not(.is-card) section .timeline{gap:0;margin-left:5px}
  .prez-block:not(.is-card) section .timeline > .cell{padding:0 0 28px 28px;border-left:1px solid var(--s-rule-2)}
  .prez-block:not(.is-card) section .timeline > .cell:last-child{border-left-color:transparent;padding-bottom:0}
  .prez-block:not(.is-card) section .timeline > .cell::before{left:-6px;top:6px}
}
@media (min-width:720px){
  .prez-block:not(.is-card) section .timeline > .cell{padding-top:32px;border-top:1px solid var(--s-rule-2)}
  .prez-block:not(.is-card) section .timeline > .cell::before{left:0;top:-6px}
}
.prez-block:not(.is-card) section .timeline h6{color:var(--s-fg-3);font-family:var(--ep-font-mono);letter-spacing:var(--ep-tr-wide);text-transform:none;font-size:13px;font-weight:500}

/* agenda — numbered rows */
.prez-block:not(.is-card) section .agenda{gap:0;counter-reset:ep-agenda}
.prez-block:not(.is-card) section .agenda > .cell{
  position:relative;counter-increment:ep-agenda;
  padding:20px 0 20px 64px;border-top:1px solid var(--s-rule-2);
}
.prez-block:not(.is-card) section .agenda > .cell:last-child{border-bottom:1px solid var(--s-rule-2)}
.prez-block:not(.is-card) section .agenda > .cell::before{
  content:counter(ep-agenda, decimal-leading-zero);position:absolute;left:0;top:24px;
  font-family:var(--ep-font-mono);font-size:13px;line-height:1.4;letter-spacing:var(--ep-tr-wide);color:var(--s-fg-3);
}
.prez-block:not(.is-card) section .agenda h3{margin-bottom:4px}

/* logo-row — customer or source marks in one row */
.prez-block:not(.is-card) section .cols.logo-row{display:flex;flex-wrap:wrap;align-items:center;gap:24px 48px}
.prez-block:not(.is-card) section .logo-row img{height:28px;width:auto;border:0;border-radius:0;filter:grayscale(1)}
.prez-block:not(.is-card) section .logo-row p{margin:0}

/* cta-band — head and action on one line */
@media (min-width:720px){
  .prez-block:not(.is-card) section .cols.cta-band{grid-template-columns:minmax(0,1fr) auto;align-items:end;column-gap:48px}
  .prez-block:not(.is-card) section .cta-band > .cell:last-child p:has(> strong > a){margin-top:0}
}

/* .cta modifier on a two-columns section: align the action with the headline's foot */
@media (min-width:720px){
  .prez-block:not(.is-card) section.cta .two-columns{align-items:end}
  .prez-block:not(.is-card) section.cta .two-columns > .cell:first-child:has(> h6:first-child) + .cell{padding-top:0}
}

/* ---------- Footer ---------- */
.site-footer{background:var(--ep-grey-1000);color:var(--ep-grey-400);border-top:1px solid var(--ep-grey-800)}
.footer-inner{
  max-width:calc(var(--ep-content-max) + 2 * var(--ep-gutter));margin:0 auto;
  padding:48px var(--ep-gutter) 56px;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 32px;
  font-size:14px;line-height:1.5;
}
.site-footer .logo{color:var(--ep-white);font-size:18px}
.site-footer .logo:hover{color:var(--ep-white)}
.site-footer p{margin:0}
.site-footer a:not(.logo){color:var(--ep-grey-300)}
.site-footer a:not(.logo):hover{color:var(--ep-white)}
.site-footer a:focus-visible{box-shadow:var(--ep-shadow-focus-ink)}
.footer-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 24px}
.footer-url{font-family:var(--ep-font-mono);font-size:13px;letter-spacing:var(--ep-tr-wide)}

/* ---------- Motion preference ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:0s !important;animation-duration:0s !important}
}

/* ==========================================================================
   Addendum 1 (2026-09-28) — articles and menu details
   Written in Claude Code against HANDOVER-2 (Claude Design was unreachable).
   Same tokens and visual language as the sections above.
   ========================================================================== */

/* ---------- Menu: primary action (**[Label](url)** in _site) ---------- */
.nav-list li.nav-cta{margin-left:8px}
.nav-list li.nav-cta a{
  min-height:36px;padding:0 14px;
  background:var(--ep-accent);color:var(--ep-white);font-weight:600;
  box-shadow:var(--ep-shadow-inset-hi);
}
.nav-list li.nav-cta a:hover{background:var(--ep-accent-hover);color:var(--ep-white)}
.nav-list li.nav-cta a:active{background:var(--ep-accent-press)}
.nav-list li.nav-cta a.active::before{display:none}

/* ---------- Menu: sub-list (nested list in _site) ---------- */
.nav-list > li{position:relative}
.nav-list > li:has(> .nav-sub) > a::after{
  content:"";width:6px;height:6px;margin-left:8px;margin-top:-3px;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg);opacity:.6;
}
.nav-sub{
  display:none;position:absolute;top:100%;left:0;z-index:60;
  min-width:240px;margin:0;padding:6px;list-style:none;
  background:var(--ep-bg-raised);border:1px solid var(--ep-border-1);
  border-radius:var(--ep-r-lg);box-shadow:var(--ep-shadow-md);
}
.nav-list > li:hover > .nav-sub,
.nav-list > li:focus-within > .nav-sub{display:block}
.nav-sub a{display:flex;width:100%;min-height:40px;white-space:nowrap}

@media (max-width:719px){
  .js .nav-list li.nav-cta{margin:12px 0 0}
  .js .nav-list li.nav-cta a{
    justify-content:center;min-height:48px;border-radius:var(--ep-r-md);border-top:0;font-size:16px;
  }
  .js .nav-list li.nav-cta a:hover{background:var(--ep-accent-hover)}
  .js .nav-list > li:has(> .nav-sub) > a::after{display:none}
  .nav-sub{
    display:block;position:static;min-width:0;padding:0 0 8px 16px;
    background:none;border:0;border-radius:0;box-shadow:none;
  }
  .js .nav-list .nav-sub a{min-height:40px;font-size:15px;color:var(--ep-fg-3);border-top:0}
}

/* ---------- Articles: plain Markdown between blocks (.prose-block) ---------- */
.prose-block{
  max-width:calc(68ch + 2 * var(--ep-gutter));margin:0 auto;
  padding:0 var(--ep-gutter);
  font-size:clamp(1rem, 0.95rem + 0.25vw, 1.0625rem);line-height:1.7;
  color:var(--ep-grey-800);
}
.prose-block:first-child{padding-top:calc(var(--ep-section-y) * 0.7)}
.prose-block:last-child{padding-bottom:var(--ep-section-y)}
.prose-block + .prez-block.is-card{padding-top:clamp(16px, 3vw, 40px)}
.prez-block.is-card + .prose-block{padding-top:clamp(8px, 2vw, 24px)}
.prose-block :where(h1,h2,h3,h4,p,ul,ol,blockquote,pre,figure,table){margin-top:0}

/* Tables — below 720px they stack into cards (see the table rules in the
   prez section above). At >=720px a normal table. */
.prose-block table{width:100%;margin:0 0 24px;border-collapse:collapse}
/* >=720px: the same panel as a prez section table (WRT-T-197) — left-aligned
   mono eyebrow headers on a sunken strip, row rules, generous cell padding,
   a bold first column. Scoped to the breakpoint so the stacked-card rules
   above (max-width:719px, same specificity) keep winning on small screens. */
@media (min-width:720px){
  .prose-block table{
    border-collapse:separate;border-spacing:0;overflow:hidden;font-size:15px;line-height:1.5;
    color:var(--ep-fg-2);background:var(--ep-white);border:1px solid var(--ep-grey-100);
    border-radius:var(--ep-r-lg);box-shadow:var(--ep-shadow-sm);
  }
  .prose-block th{
    padding:12px 16px;text-align:left;vertical-align:bottom;white-space:nowrap;
    font-family:var(--ep-font-mono);font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
    color:var(--ep-fg-3);background:var(--ep-grey-50);border-bottom:1px solid var(--ep-grey-200);
  }
  .prose-block td{padding:16px;vertical-align:top;border-bottom:1px solid var(--ep-grey-100)}
  .prose-block td:first-child{color:var(--ep-fg-1);font-weight:500}
  .prose-block tbody tr:nth-child(even) td{background:var(--ep-grey-25)}
  .prose-block tbody tr:last-child td{border-bottom:0}
}

/* Title */
.prose-block h1{
  margin:0 0 16px;
  font-size:clamp(2.25rem, 1.5rem + 2.2vw, 3.25rem);line-height:1.08;font-weight:800;
  font-variation-settings:var(--ep-fvs-display);letter-spacing:var(--ep-tr-tight);
  color:var(--ep-fg-1);text-wrap:balance;
}
.prose-block h2{
  margin:56px 0 16px;
  font-size:clamp(1.5rem, 1.25rem + 0.8vw, 1.875rem);line-height:1.2;font-weight:700;
  font-variation-settings:var(--ep-fvs-display);letter-spacing:var(--ep-tr-snug);
  color:var(--ep-fg-1);text-wrap:balance;
}
.prose-block h3{
  margin:40px 0 12px;
  font-size:1.25rem;line-height:1.3;font-weight:600;
  font-variation-settings:var(--ep-fvs-display);letter-spacing:-0.01em;color:var(--ep-fg-1);
}
.prose-block h4{margin:32px 0 8px;font-size:1rem;font-weight:600;color:var(--ep-fg-1)}
.prose-block p{margin:0 0 20px;text-wrap:pretty}

/* Lead: the first paragraph after the card */
.prez-block.is-card + .prose-block > p:first-child{
  font-size:clamp(1.125rem, 1rem + 0.5vw, 1.3125rem);line-height:1.6;color:var(--ep-fg-1);
}

/* In prose, em is emphasis — real italic, same colour. (In sections it is the accent.) */
.prose-block em{font-style:italic}
.prose-block strong{font-weight:600;color:var(--ep-fg-1)}

.prose-block a{
  color:var(--ep-accent-hover);
  text-decoration:underline;text-decoration-color:var(--ep-red-100);
  text-underline-offset:0.2em;text-decoration-thickness:1.5px;
  overflow-wrap:anywhere;
  transition:text-decoration-color var(--ep-dur-hover) var(--ep-ease-out);
}
.prose-block a:hover{color:var(--ep-accent-press);text-decoration-color:currentColor}

/* Lists — the dot is the bullet, as in sections */
.prose-block ul,.prose-block ol{margin:0 0 24px;padding:0;list-style:none}
.prose-block li{position:relative;margin:0 0 8px;padding-left:24px}
.prose-block ul > li::before{
  content:"";position:absolute;left:3px;top:0.72em;width:6px;height:6px;border-radius:50%;
  background:var(--ep-grey-400);
}
.prose-block ol{counter-reset:ep-prose-ol}
.prose-block ol > li{counter-increment:ep-prose-ol;padding-left:34px}
.prose-block ol > li::before{
  content:counter(ep-prose-ol, decimal-leading-zero);position:absolute;left:0;top:0.2em;
  font-family:var(--ep-font-mono);font-size:13px;letter-spacing:var(--ep-tr-wide);color:var(--ep-fg-3);
}
.prose-block li > :where(ul,ol){margin:8px 0 0}

/* Quote — the signal edge marks it */
.prose-block blockquote{
  margin:32px 0;padding:4px 0 4px 20px;
  border-left:3px solid var(--ep-state-signal);
}
.prose-block blockquote p{
  font-size:clamp(1.125rem, 1rem + 0.5vw, 1.375rem);line-height:1.45;font-weight:500;
  color:var(--ep-fg-1);margin-bottom:8px;
}
.prose-block blockquote p:last-child{margin-bottom:0}

.prose-block code{
  font-family:var(--ep-font-mono);font-size:0.875em;
  padding:0.1em 0.35em;border-radius:var(--ep-r-sm);background:var(--ep-bg-sunken);
}
.prose-block pre{
  margin:0 0 24px;padding:16px 20px;overflow-x:auto;
  border-radius:var(--ep-r-md);background:var(--ep-grey-1000);color:var(--ep-grey-100);
}
.prose-block pre code{padding:0;background:none;font-size:13px}
.prose-block hr{margin:48px 0;border:0;border-top:1px solid var(--ep-border-2)}
.prose-block img{display:block;max-width:100%;height:auto;margin:32px 0;border-radius:var(--ep-r-md)}

/* Signature: a paragraph that opens with **Name** and a line break. Type only —
   no rule of its own; a line above or below is the author's own --- (hr). */
.prose-block p:has(> strong:first-child + br){
  margin-top:40px;
  font-size:15px;line-height:1.5;color:var(--ep-fg-3);
}
.prose-block p:has(> strong:first-child + br) strong{font-size:16px}

/* Wide (16:9) cards — early-pattern-insights-wide — run wider than the
   prose measure, like an editorial lead image. */
.prez-block.is-card[style*="--card-w:1920px"] > .marpit{max-width:min(100%, 960px)}