/* =============================================================================
   smartextract.ai — site stylesheet
   Built on the smartextract design system (Claude Design project 69f0f8f1).
   Token values are copied verbatim from tokens/*.css — treat that project as
   the source of truth and re-sync this block if the tokens change.
   ============================================================================= */

/* ---------- fonts (self-hosted; no third-party requests) ------------------- */
@font-face{font-family:"DM Sans";src:url("../fonts/dmsans-latin.woff2") format("woff2");font-weight:100 1000;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"DM Sans";src:url("../fonts/dmsans-latin-ext.woff2") format("woff2");font-weight:100 1000;font-style:normal;font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"JetBrains Mono";src:url("../fonts/jetbrainsmono-latin.woff2") format("woff2");font-weight:100 800;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"JetBrains Mono";src:url("../fonts/jetbrainsmono-latin-ext.woff2") format("woff2");font-weight:100 800;font-style:normal;font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ---------- tokens -------------------------------------------------------- */
:root{
  /* ink & neutrals */
  --ink:#080808; --navy:#22304A; --navy-700:#1B2740; --grey:#A8B2BD; --grey-light:#F3F9FC;
  --white:#FFFFFF; --border:#D1D5DB;
  --neutral-900:#111827; --neutral-700:#374151; --neutral-600:#6B7280; --neutral-400:#9CA3AF;
  --neutral-300:#E5E7EB; --neutral-100:#F4F6F8; --neutral-50:#F8FAFC;

  /* highlighter accents — the signature smartextract pastels */
  --hl-pink:#F8C6C7; --hl-lavender:#CBCFF0; --hl-green:#BEEEDD; --hl-blue:#A1D6F1;

  /* functional blue (product / interactive) */
  --blue-600:#0076F5; --blue-700:#0063CE; --blue-500:#0EA5E9; --blue-100:#E1EDF8;
  --blue-50:#EEF4F9; --blue-mist:#F3F7FA; --blue-panel:#E6F0F9; --blue-panel-border:#D0E1F0;

  /* semantic status */
  --success:#278044; --success-bg:#E6F6EB; --success-border:#6EDC9F; --success-soft:#DAFAE6;
  --info:#2563EB; --info-bg:#EFF6FF; --info-border:#BFDBFE;
  --warning:#F5A623; --warning-bg:#FFF6E6;
  --danger:#EF4444; --danger-bg:#FFFAFA; --danger-strong:#DC2626;

  /* extraction field categories (document viewer bounding boxes) */
  --cat-green:#51973E; --cat-orange:#D9822B; --cat-blue:#3E73E8;
  --cat-yellow:#E0BB24; --cat-red:#DB4453; --cat-purple:#8357DB;

  /* semantic aliases */
  --text-primary:var(--ink); --text-heading:var(--navy); --text-secondary:var(--neutral-700);
  --text-muted:var(--grey); --text-inverse:var(--white);
  --text-link:var(--blue-600); --text-link-hover:var(--blue-700);
  --surface-page:var(--white); --surface-app:var(--blue-50); --surface-card:var(--white);
  --surface-subtle:var(--grey-light); --surface-panel:var(--blue-mist);
  --surface-inverse:var(--navy); --surface-hover:var(--neutral-50);
  --border-default:var(--border); --border-subtle:var(--neutral-300);
  --border-strong:var(--navy); --border-focus:var(--blue-600);
  --action-primary-bg:var(--navy); --action-primary-fg:var(--white); --action-primary-bg-hover:var(--navy-700);
  --action-secondary-bg:var(--white); --action-secondary-fg:var(--navy);
  --action-accent-bg:var(--blue-600); --action-accent-fg:var(--white);

  /* type */
  --font-sans:"DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --text-hero:clamp(40px,4.6vw,64px); --text-h1:44px; --text-h2:32px; --text-h3:24px; --text-h4:18px;
  --text-lead:20px; --text-body:16px; --text-sm:14px; --text-xs:12px; --text-2xs:11px; --text-stat:44px;
  --weight-regular:400; --weight-bold:700;
  --leading-tight:1.1; --leading-snug:1.25; --leading-normal:1.5; --leading-relaxed:1.7;
  --tracking-display:-0.03em; --tracking-tight:-0.015em; --tracking-eyebrow:0.08em; --tracking-mono:0.04em;

  /* space, radii, layout */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px;
  --space-6:32px; --space-7:48px; --space-8:64px; --space-9:96px; --space-10:128px;
  --radius-xs:2px; --radius-sm:4px; --radius-md:6px; --radius-lg:8px; --radius-xl:12px;
  --radius-2xl:16px; --radius-3xl:20px; --radius-pill:999px;
  --container-max:1200px; --container-narrow:720px;
  --gutter:48px; --header-h:68px; --section-y:var(--space-9);

  /* elevation — shallow, cool-tinted, never dramatic */
  --shadow-xs:0 1px 4px rgba(8,8,8,.02); --shadow-sm:0 2px 4px rgba(8,8,8,.05);
  --shadow-card:0 4px 20px rgba(8,8,8,.02); --shadow-md:0 4px 12px rgba(8,8,8,.08);
  --shadow-lg:0 10px 25px rgba(8,8,8,.10); --shadow-xl:0 20px 60px rgba(34,48,74,.18);
  --ring-focus:0 0 0 3px rgba(0,118,245,.25);

  /* motion — short, calm, no bounce */
  --ease-standard:cubic-bezier(.4,0,.2,1); --ease-out:cubic-bezier(0,0,.2,1);
  --duration-fast:.15s; --duration-base:.2s; --duration-slow:.3s;
  --transition-color:color var(--duration-base) var(--ease-standard),
                     background-color var(--duration-base) var(--ease-standard),
                     border-color var(--duration-base) var(--ease-standard);
}

/* ---------- reset / base -------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
body{margin:0;font-family:var(--font-sans);font-weight:var(--weight-regular);font-size:var(--text-body);
  color:var(--text-primary);background:var(--surface-page);-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  /* German compounds (Auftragsverarbeitungsvertrag) must not push the page sideways */
  overflow-wrap:break-word}
img,svg{max-width:100%}
a{color:var(--text-link);text-decoration:none}
a:hover{color:var(--text-link-hover);text-decoration:underline}
h1,h2,h3,h4,p,figure,blockquote{margin:0}
ul{margin:0;padding:0;list-style:none}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--border-focus);outline-offset:2px;border-radius:var(--radius-xs)}
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--navy);color:var(--white);
  padding:12px 20px;border-radius:0 0 var(--radius-lg) 0;font-weight:var(--weight-bold);font-size:var(--text-sm)}
.skip:focus{left:0;text-decoration:none}
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- layout primitives -------------------------------------------- */
.wrap{width:100%;max-width:var(--container-max);margin:0 auto;padding:0 var(--gutter)}
.section{padding:var(--section-y) 0}
.section--subtle{background:var(--grey-light)}
.section--navy{background:var(--navy)}
.section--flush-t{padding-top:0}
.section--flush-b{padding-bottom:0}
.grid{display:grid;gap:var(--space-5)}
.grid--auto{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
/* four plan cards need a smaller minimum to sit on one row at container width */
.grid--plans{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.grid--auto-lg{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.grid--split{grid-template-columns:repeat(auto-fit,minmax(420px,1fr));gap:var(--space-8);align-items:center}
.grid--split-top{grid-template-columns:repeat(auto-fit,minmax(380px,1fr));gap:var(--space-8);align-items:start}
.stack{display:flex;flex-direction:column}
.icon{width:1em;height:1em;flex:none;fill:currentColor;vertical-align:-.125em}

/* ---------- type ---------------------------------------------------------- */
.eyebrow{font-family:var(--font-mono);font-size:var(--text-2xs);text-transform:uppercase;
  letter-spacing:var(--tracking-eyebrow);color:var(--text-muted);margin:0 0 20px}
.eyebrow--tight{margin-bottom:18px}
.h-hero{font-size:var(--text-hero);font-weight:var(--weight-bold);line-height:1.06;
  letter-spacing:var(--tracking-display);color:var(--navy);text-wrap:pretty}
.h1{font-size:var(--text-h1);font-weight:var(--weight-bold);line-height:1.15;
  letter-spacing:var(--tracking-display);color:var(--navy);text-wrap:pretty}
.h2{font-size:var(--text-h2);font-weight:var(--weight-bold);line-height:var(--leading-snug);
  letter-spacing:var(--tracking-tight);color:var(--text-heading);text-wrap:pretty}
.h3{font-size:var(--text-h4);font-weight:var(--weight-bold);letter-spacing:var(--tracking-tight);color:var(--navy)}
.h3--lg{font-size:var(--text-h3)}
.lead{font-size:var(--text-lead);line-height:var(--leading-relaxed);color:var(--text-secondary);text-wrap:pretty}
.body{font-size:var(--text-body);line-height:var(--leading-relaxed);color:var(--text-secondary)}
.small{font-size:var(--text-sm);line-height:1.6;color:var(--text-secondary)}
.mono{font-family:var(--font-mono)}
.muted{color:var(--text-muted)}
.measure{max-width:520px}
.measure-md{max-width:640px}
.measure-lg{max-width:760px}

/* highlighter mark — the brand's one true emphasis device */
.mark{background:var(--hl-blue);color:var(--ink);font-style:normal;padding:2px 8px;
  border-radius:var(--radius-md);box-decoration-break:clone;-webkit-box-decoration-break:clone}
/* A mark ending a line adds its 8px padding beyond the text measure, pushing the
   highlight out of the text column. Reserve that much inside the heading box so
   the highlight always lands inside the measure. */
.h-hero:has(.mark),.h1:has(.mark){padding-right:8px}
.cta-panel .h2:has(.mark){padding-inline:8px}
.mark--pink{background:var(--hl-pink)}
.mark--green{background:var(--hl-green)}
.mark--lavender{background:var(--hl-lavender)}

/* ---------- section heading ---------------------------------------------- */
/* section eyebrows are DM Sans medium — only page-level eyebrows use the mono face */
.sec-head .eyebrow{font-family:var(--font-sans);font-weight:500;margin-bottom:12px}
.sec-head .lead{font-size:var(--text-body);margin-top:14px;max-width:640px}
.sec-head--center{max-width:var(--container-narrow);margin:0 auto;text-align:center}
.sec-head--dark .h2{color:var(--white)}
.sec-head--dark .lead{color:rgba(255,255,255,.7)}

/* ---------- buttons ------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
  font-family:var(--font-sans);font-weight:var(--weight-bold);letter-spacing:.03em;line-height:1.2;
  cursor:pointer;text-decoration:none;padding:10px 24px;font-size:13px;border-radius:var(--radius-lg);
  background:var(--action-primary-bg);color:var(--action-primary-fg);border:1px solid var(--action-primary-bg);
  transition:var(--transition-color)}
.btn:hover{background:var(--action-primary-bg-hover);border-color:var(--action-primary-bg-hover);
  color:var(--action-primary-fg);text-decoration:none}
.btn--secondary{background:var(--action-secondary-bg);color:var(--action-secondary-fg);border-color:var(--border-default)}
.btn--secondary:hover{background:var(--surface-hover);color:var(--navy);border-color:var(--navy)}
.btn--accent{background:var(--action-accent-bg);color:var(--action-accent-fg);border-color:var(--action-accent-bg)}
.btn--accent:hover{background:var(--blue-700);border-color:var(--blue-700)}
.btn--ondark{background:var(--white);color:var(--navy);border-color:var(--white)}
.btn--ondark:hover{background:var(--grey-light);border-color:var(--grey-light);color:var(--navy)}
.btn--ghost{background:transparent;color:var(--text-secondary);border-color:transparent}
.btn--ghost:hover{background:var(--surface-hover);color:var(--navy);border-color:transparent}
.btn--sm{padding:6px 12px;font-size:var(--text-xs);border-radius:var(--radius-sm)}
.btn--lg{padding:14px 32px;font-size:var(--text-body)}
.btn--full{width:100%}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:36px}
.btn-row--center{justify-content:center}

/* ---------- cards --------------------------------------------------------- */
.card{position:relative;overflow:hidden;border-radius:var(--radius-lg);padding:22px;
  background:var(--surface-card);border:1px solid var(--border-default)}
.card--p24{padding:24px} .card--p26{padding:26px} .card--p28{padding:28px}
.card--p30{padding:30px} .card--p32{padding:32px}
.card--elevated{box-shadow:var(--shadow-card)}
.card--subtle{background:var(--surface-subtle);border:none}
.card--tinted{border:none;background:var(--hl-blue)}
.card--pink{background:var(--hl-pink)} .card--lavender{background:var(--hl-lavender)}
.card--green{background:var(--hl-green)} .card--blue{background:var(--hl-blue)}
.card--outlined-strong{border-color:var(--navy)}
.card--ondark{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);color:var(--white)}
.card--ondark .h3{color:var(--white)}
.card--ondark p{color:rgba(255,255,255,.7)}
.card__icon{font-size:20px;color:var(--navy);display:block}
.card--ondark .card__icon{font-size:20px}
.card__title{margin:14px 0 8px}
.card__text{font-size:var(--text-sm);line-height:1.6;color:var(--text-secondary);margin:0}
/* tinted cards carry ink text, not the grey secondary */
.card--tinted .card__text,.card--pink .card__text,.card--lavender .card__text,
.card--green .card__text,.card--blue .card__text{color:var(--ink);opacity:.8}

/* problem stat inside a tinted card */
/* mono figures stay at regular weight; only Stat values are semibold */
.figure{font-family:var(--font-mono);font-weight:var(--weight-regular);
  color:var(--navy);letter-spacing:-1px;line-height:1;overflow-wrap:normal;
  font-size:34px;font-size:clamp(24px,12cqi,34px)}
.figure__label{font-size:var(--text-xs);text-transform:uppercase;letter-spacing:var(--tracking-eyebrow);
  color:var(--navy);margin-top:8px;opacity:.7}

/* ---------- tag / badge --------------------------------------------------- */
.tag{display:inline-block;font-size:var(--text-2xs);font-weight:600;padding:3px 10px;
  border-radius:var(--radius-sm);line-height:1.4;background:var(--navy);color:var(--white)}
.tag--green{background:var(--hl-green);color:var(--ink)}
.tag--pink{background:var(--hl-pink);color:var(--ink)}
.tag--lavender{background:var(--hl-lavender);color:var(--ink)}
.tag--blue{background:var(--hl-blue);color:var(--ink)}
.tag--outline{background:transparent;color:var(--navy);box-shadow:inset 0 0 0 1px var(--border-default)}
.status{padding:4px 12px;border-radius:var(--radius-xl);font-size:var(--text-xs);font-weight:500;
  white-space:nowrap;background:var(--success-bg);color:var(--success)}
.status--progress{background:var(--info-bg);color:var(--info)}
.status--failed{background:var(--danger-bg);color:var(--danger-strong)}
.status--waiting{background:var(--warning-bg);color:#946000}

/* ---------- stat ---------------------------------------------------------- */
.stat{text-align:center;padding:8px 4px}
.stat__value{font-family:var(--font-mono);font-weight:600;font-size:38px;line-height:1;
  letter-spacing:-1px;color:var(--navy)}
.stat__label{font-size:var(--text-xs);color:var(--text-muted);margin-top:6px;font-weight:500}
.stat--dark .stat__value{color:var(--white)}
.stat-band{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:18px;
  border-top:1px solid var(--border-subtle);border-bottom:1px solid var(--border-subtle);padding:24px 0}

/* hero credibility numbers */
.metrics{display:flex;flex-wrap:wrap;gap:var(--space-6);margin-top:var(--space-7);
  padding-top:28px;border-top:1px solid var(--border-subtle)}
.metrics__value{font-family:var(--font-mono);font-size:22px;color:var(--navy);letter-spacing:-.5px}
.metrics__label{font-size:var(--text-xs);color:var(--text-muted);margin-top:4px}

/* ---------- step flow ---------------------------------------------------- */
.steps{display:flex;margin-top:var(--space-7)}
.steps__item{flex:1;position:relative;text-align:center;padding:14px 12px;
  background:var(--surface-subtle);border-right:1px solid var(--border-default)}
.steps__item:first-child{background:var(--hl-green);border-radius:var(--radius-xl) 0 0 var(--radius-xl)}
.steps__item:last-child{border-right:none;border-radius:0 var(--radius-xl) var(--radius-xl) 0}
/* Direction comes from the segment shape, not a floating glyph: each step is
   cut into a chevron so the point of one meets the notch of the next. Only in
   the single-row layout — once the steps wrap they are plain segments again. */
@media (min-width:1201px){
  .steps{gap:3px}
  .steps__item{border-right:none;padding-left:22px;padding-right:22px;
    clip-path:polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%, 10px 50%)}
  .steps__item:first-child{
    clip-path:polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%)}
  .steps__item:last-child{
    clip-path:polygon(0 0, 100% 0, 100% 100%, 0 100%, 10px 50%)}
}
.steps__title{font-size:var(--text-xs);font-weight:var(--weight-bold);color:var(--ink);margin:0 0 4px}
.steps__item:first-child .steps__title{color:var(--navy)}
.steps__detail{font-size:10px;color:var(--text-muted);line-height:1.4;margin:0}

/* ---------- callout ------------------------------------------------------- */
.callout{background:var(--surface-subtle);border-left:3px solid var(--hl-green);padding:12px 18px;
  border-radius:0 var(--radius-lg) var(--radius-lg) 0;font-size:var(--text-sm);line-height:1.6}
.callout--pink{border-left-color:var(--hl-pink)}
.callout--lavender{border-left-color:var(--hl-lavender)}
.callout--blue{border-left-color:var(--hl-blue)}

/* ---------- logo wall & testimonial -------------------------------------- */
/* three across, as specced — two on narrow screens so names never squeeze */
.logowall{display:grid;grid-template-columns:repeat(3,1fr);
  background:var(--surface-subtle);border-radius:var(--radius-lg);padding:10px 24px;
  align-content:space-evenly;min-height:180px}
/* two across once a name like "Maschinenbau KG" no longer fits three to a row */
@media (max-width:900px){.logowall{grid-template-columns:repeat(2,1fr)}}
.logowall__item{display:flex;align-items:center;justify-content:center;padding:8px 12px;
  font-size:var(--text-sm);font-weight:var(--weight-bold);color:var(--navy);opacity:.55;text-align:center}
.quote{margin:0}
.quote__glyph{display:block;font-size:48px;line-height:1;color:var(--navy);opacity:.3;margin-bottom:-12px}
.quote__text{margin:0 0 8px;font-style:italic;font-size:var(--text-sm);line-height:1.6;color:var(--ink);opacity:.7}
.quote__cite{font-size:var(--text-sm);font-weight:var(--weight-bold);color:var(--ink);font-style:normal}
.quote__role{display:block;font-weight:var(--weight-regular);font-size:var(--text-xs);color:var(--text-muted);margin-top:2px}

/* ---------- check / cross lists ------------------------------------------ */
.list{display:flex;flex-direction:column;gap:12px;font-size:var(--text-sm);line-height:1.6;color:var(--text-secondary)}
.list__item{display:flex;gap:10px}
.list__item .icon{font-size:17px;width:17px;height:17px;margin-top:1px}
.list--ink .list__item{color:var(--ink)}
.list--ondark .list__item{color:rgba(255,255,255,.78)}
.list--ondark .icon{color:var(--hl-green)}
.list--lg{gap:16px;font-size:15px}
.list--lg .icon{font-size:19px;width:19px;height:19px}
.ico-ok{color:var(--success)}
.ico-no{color:var(--danger)}
.ico-navy{color:var(--navy)}

/* ---------- header / nav -------------------------------------------------- */
.header{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.92);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid var(--border-default)}
.header__inner{display:flex;align-items:center;gap:40px;height:var(--header-h)}
.logo{display:flex;align-items:center;flex:none;color:var(--navy)}
.logo:hover{text-decoration:none}
.logo svg,.logo img{height:22px;width:auto;display:block}
.nav{display:flex;align-items:center;gap:var(--space-5);flex:1;min-width:0}
.nav a{font-size:var(--text-sm);color:var(--navy);white-space:nowrap;font-weight:var(--weight-regular)}
.nav a:hover{color:var(--blue-600);text-decoration:none}
.nav a[aria-current="page"]{font-weight:var(--weight-bold)}
.header__actions{display:flex;align-items:center;gap:20px;flex:none}
.header__actions .login{font-size:var(--text-sm);color:var(--navy)}
.langsw{display:flex;align-items:center;border:1px solid var(--border-default);
  border-radius:var(--radius-sm);overflow:hidden;flex:none}
/* both cells share one treatment — the current language is a span, not a link */
.langsw a,.langsw .cur{font-family:var(--font-mono);font-size:var(--text-2xs);
  letter-spacing:var(--tracking-mono);padding:5px 9px;line-height:1.4;
  background:var(--white);color:var(--navy)}
.langsw a:hover{text-decoration:none;background:var(--grey-light)}
.langsw .cur{background:var(--navy);color:var(--white)}
.navtoggle{display:none;align-items:center;justify-content:center;width:40px;height:40px;
  background:none;border:1px solid var(--border-default);
  border-radius:var(--radius-sm);cursor:pointer;color:var(--navy);font-size:20px}
/* the `hidden` attribute has no effect on SVG elements — swap the glyphs in CSS */
.navtoggle [data-icon-close]{display:none}
.navtoggle[aria-expanded="true"] [data-icon-open]{display:none}
.navtoggle[aria-expanded="true"] [data-icon-close]{display:block}

/* ---------- footer -------------------------------------------------------- */
.footer{background:var(--grey-light);border-top:1px solid var(--border-default);padding:var(--space-8) 0 40px}
.footer__cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:40px}
.footer__col{display:flex;flex-direction:column;gap:10px}
.footer__head{font-size:var(--text-2xs);text-transform:uppercase;letter-spacing:var(--tracking-eyebrow);
  color:var(--text-muted);margin-bottom:4px}
.footer__col a{font-size:var(--text-sm);color:var(--navy)}
.footer__blurb{font-size:var(--text-sm);line-height:var(--leading-relaxed);color:var(--text-secondary);
  margin:18px 0 0;max-width:300px}
.footer__bar{display:flex;flex-wrap:wrap;gap:var(--space-4);align-items:center;justify-content:space-between;
  margin-top:var(--space-7);padding-top:var(--space-5);border-top:1px solid var(--border-default);
  font-size:var(--text-xs);color:var(--text-muted)}
.footer__dida{display:flex;align-items:center;gap:10px}
.footer__dida .logo-dida{height:16px;width:auto;display:block;color:var(--navy);opacity:.75}

/* ---------- app preview (Data Studio mock) ------------------------------- */
.app{background:var(--surface-app);border-radius:var(--radius-2xl);padding:20px;box-shadow:var(--shadow-card)}
.app--lg{padding:24px;overflow-x:auto}
/* Fractional tracks, not pixel minimums. The comp's minimums (120+180+170+gaps
   = 494px) exceed the ~440-480px the hero's right column can give, which made
   the extraction pane paint outside the card and get clipped at the viewport
   edge. Fractions always fit; the panes' inner text ellipsises instead. */
.app__grid{display:grid;grid-template-columns:0.9fr 1.4fr 1.3fr;gap:12px;height:440px}
.app__grid--full{grid-template-columns:260px minmax(360px,1fr) 380px;gap:16px;height:520px;min-width:1040px}
.app__pane{background:var(--white);border:1px solid var(--border-default);border-radius:var(--radius-lg);
  padding:12px;display:flex;flex-direction:column;gap:8px;min-width:0}
.app__pane--flush{padding:0;gap:0}
.app__pane--p14{padding:14px}
.app__pane--p16{padding:16px;gap:10px}
.app__label{display:flex;align-items:center;gap:6px;font-size:var(--text-2xs);font-weight:var(--weight-bold);
  color:var(--navy);text-transform:uppercase;letter-spacing:var(--tracking-eyebrow)}
.app__label--muted{color:var(--text-muted)}
.app__row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:7px 8px;
  font-size:var(--text-xs);color:var(--text-secondary);border-radius:var(--radius-sm)}
/* the label truncates, the count never does */
.app__row .l{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.app__row .n{font-family:var(--font-mono);font-size:10px;color:var(--text-muted);flex:none}
.app__row--active{background:var(--blue-50);color:var(--blue-600);font-weight:var(--weight-bold)}
.app__row--active .n{color:var(--blue-600)}
.app__foot{margin-top:auto;font-size:var(--text-2xs);color:var(--text-muted);display:flex;
  align-items:center;gap:6px;min-width:0}
.app__foot .l{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.app__filebar{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;gap:10px}
.app__filename{font-family:var(--font-mono);font-size:var(--text-2xs);color:var(--text-secondary);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.app__toolbar{height:60px;border-bottom:1px solid var(--neutral-300);display:flex;align-items:center;
  justify-content:space-between;padding:0 16px;gap:10px}
.app__toolbar-l{display:flex;align-items:center;gap:10px;min-width:0;overflow:hidden}
.app__toolbar-l span{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.app__toolbar-r{display:flex;align-items:center;gap:14px;color:var(--text-secondary);font-size:16px;flex:none}
.app__canvas{flex:1;padding:20px;display:flex;gap:16px;overflow:hidden}
.app__thumbs{width:56px;display:flex;flex-direction:column;gap:8px;flex:none}
.app__thumb{height:72px;border:1px solid var(--neutral-300);border-radius:var(--radius-xs);background:var(--white)}
.app__thumb--active{border:2px solid var(--blue-600)}

/* document facsimile */
.doc{flex:1;background:var(--white);border:1px solid var(--neutral-300);border-radius:var(--radius-sm);
  box-shadow:var(--shadow-md);padding:16px;display:flex;flex-direction:column;gap:9px;min-height:0}
.doc--p20{padding:20px;gap:10px}
.doc--p22{padding:22px;gap:11px}
.doc__line{height:8px;background:var(--neutral-300);border-radius:var(--radius-xs);flex:none}
.doc--p20 .doc__line,.doc--p22 .doc__line{height:9px}
.doc__chip{display:inline-block;align-self:flex-start;border:2px solid var(--cat-blue);
  border-radius:var(--radius-xs);padding:2px 6px;font-family:var(--font-mono);font-size:10px;
  color:var(--cat-blue);flex:none;max-width:100%}
.doc--p20 .doc__chip,.doc--p22 .doc__chip{font-size:var(--text-2xs)}
.doc__chip--green{border-color:var(--cat-green);color:var(--cat-green)}
.doc__chip--orange{border-color:var(--cat-orange);color:var(--cat-orange)}
.doc__chip--purple{border-color:var(--cat-purple);color:var(--cat-purple)}
.doc__chip--end{align-self:flex-end}
.doc__meta{font-family:var(--font-mono);font-size:var(--text-2xs);color:var(--text-muted)}
.mt-auto{margin-top:auto}

/* extraction panel */
.xpanel{background:var(--blue-panel);border:1px solid var(--blue-panel-border);
  border-radius:var(--radius-lg);padding:12px;overflow:hidden;display:flex;flex-direction:column;min-width:0}
.xpanel--p16{padding:16px}
.xpanel__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;gap:8px}
.xpanel__title{font-size:var(--text-2xs);font-weight:var(--weight-bold);color:var(--navy);
  text-transform:uppercase;letter-spacing:var(--tracking-eyebrow)}
.xpanel__count{font-family:var(--font-mono);font-size:var(--text-2xs);color:var(--text-secondary)}
.xpanel__actions{margin-top:auto;display:flex;gap:8px;padding-top:8px}
.xfield{border:1px solid #CDDDE9;border-radius:var(--radius-md);padding:var(--space-3);margin-bottom:var(--space-3)}
.xfield__head{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-2);gap:8px}
.xfield__name{font-size:var(--text-2xs);font-weight:var(--weight-bold);color:#6A7C92;
  text-transform:uppercase;display:flex;align-items:center;gap:6px;min-width:0;flex:1 1 auto}
/* a long label like RECHNUNGSNUMMER truncates instead of pushing the panel wide */
.xfield__label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.xfield__name .icon{color:var(--success);font-size:15px;width:15px;height:15px}
.xfield__conf{font-size:var(--text-2xs);font-weight:var(--weight-bold);color:#4B5E6F;flex:none}
.xfield__conf--warn{color:var(--warning)}
.xfield__box{background:var(--white);border-radius:var(--radius-sm);padding:10px 12px;
  display:flex;flex-direction:column}
.xfield__hint{font-size:10px;font-weight:600;color:var(--neutral-400);margin-bottom:6px;
  text-transform:uppercase;letter-spacing:.5px}
.xfield__value{font-size:var(--text-sm);color:#1A202C;border-bottom:1px solid #E2E8F0;padding-bottom:4px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------- forms --------------------------------------------------------- */
.form{display:grid;gap:18px}
.form__pair{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.field{display:block}
.field__label{display:block;font-size:var(--text-sm);font-weight:600;margin-bottom:var(--space-2);color:#3F4E5E}
.field input,.field select,.field textarea{width:100%;border:1px solid #CED4DA;border-radius:var(--radius-sm);
  padding:12px;font-family:var(--font-sans);font-size:var(--text-sm);color:var(--text-primary);
  background:var(--white);outline:none;transition:border-color var(--duration-base) var(--ease-standard)}
.field textarea{min-height:88px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--border-focus);
  box-shadow:var(--ring-focus);outline:none}
.field input:user-invalid,.field textarea:user-invalid{border-color:var(--danger)}
.form__note{font-size:var(--text-xs);line-height:1.6;color:var(--text-muted);margin:0}
.form__status{font-size:var(--text-sm);line-height:1.6;margin:0;padding:12px 16px;border-radius:var(--radius-md);
  background:var(--success-bg);color:var(--success)}
.form__status[data-state="error"]{background:var(--danger-bg);color:var(--danger-strong)}
.form__status[hidden]{display:none}

/* ---------- Cal.com booking embed ---------------------------------------- */
.cal-embed{width:100%;min-height:660px;overflow:auto;background:var(--white);
  border:1px solid var(--border-default);border-radius:var(--radius-lg)}
/* Cal draws its own chrome once booted; keep our border out of its way */
.cal-embed[data-state="loading"]{background:var(--surface-panel)}
.cal-embed:has(iframe),.cal-embed:has(.cal-embed-loaded){border-color:transparent;background:transparent}
.cal-note{font-size:var(--text-sm);line-height:1.6;color:var(--text-secondary);margin:16px 0 0}
@media (max-width:640px){.cal-embed{min-height:560px}}

/* ---------- reference logo carousel ------------------------------------- */
.marquee{position:relative;overflow:hidden;padding:26px 0;
  border-top:1px solid var(--border-subtle);border-bottom:1px solid var(--border-subtle);
  /* fade the ends so logos enter and leave instead of being sliced by the edge */
  -webkit-mask-image:linear-gradient(to right,transparent,#000 80px,#000 calc(100% - 80px),transparent);
  mask-image:linear-gradient(to right,transparent,#000 80px,#000 calc(100% - 80px),transparent)}
.marquee__track{display:flex;width:max-content;animation:marquee 46s linear infinite}
/* The two sets are identical and each carries its own trailing gap, so a -50%
   shift lands exactly one set along and the loop has no visible jump. Putting
   the gap on the track instead would leave it half a gap short. */
.marquee__set{display:flex;align-items:center;gap:64px;padding-right:64px;flex:none}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.marquee:hover .marquee__track,.marquee:focus-within .marquee__track{animation-play-state:paused}
.marquee__logo{height:28px;width:auto;display:block;flex:none;filter:grayscale(100%);opacity:.55;
  transition:filter var(--duration-fast) var(--ease-standard),
             opacity var(--duration-fast) var(--ease-standard)}
.marquee__logo:hover{filter:grayscale(0);opacity:1}
.marquee__caption{text-align:center;font-size:var(--text-xs);color:var(--text-muted);margin:20px 0 0}
.marquee__label{text-align:center;font-size:var(--text-2xs);text-transform:uppercase;
  letter-spacing:var(--tracking-eyebrow);color:var(--text-muted);margin:0 0 28px}
/* Motion this long and this constant is exactly what reduced-motion is for:
   fall back to a static, centred wall showing each logo once. */
@media (prefers-reduced-motion:reduce){
  .marquee{overflow:visible}
  .marquee__track{animation:none;width:auto;flex-wrap:wrap;justify-content:center}
  .marquee__set{flex-wrap:wrap;justify-content:center;gap:24px 48px;padding-right:0}
  .marquee__set + .marquee__set{display:none}
}
@media (max-width:640px){
  .marquee__set{gap:44px;padding-right:44px}
  .marquee__logo{height:24px}
}

/* placeholder that stands in for a third-party embed until consent */
.gate{border:1px solid var(--border-default);border-radius:var(--radius-lg);
  background:var(--surface-subtle);padding:26px;min-height:280px;display:flex;
  flex-direction:column;justify-content:center;gap:var(--space-3)}
.gate[hidden]{display:none}
.gate__title{font-size:var(--text-h4);font-weight:var(--weight-bold);color:var(--navy);margin:0}
.gate__body{font-size:var(--text-sm);line-height:1.6;color:var(--text-secondary);margin:0;max-width:52ch}
.gate__actions{display:flex;align-items:center;gap:var(--space-4);flex-wrap:wrap;margin-top:var(--space-2)}
.gate__link{font-size:var(--text-sm);color:var(--text-link);text-decoration:underline;
  text-underline-offset:2px}

/* ---------- consent banner ----------------------------------------------- */
.cc{position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--white);
  border-top:1px solid var(--border-default);box-shadow:0 -8px 30px rgba(8,8,8,.06)}
.cc[hidden]{display:none}
.cc__inner{width:100%;max-width:var(--container-max);margin:0 auto;padding:20px var(--gutter);
  display:flex;align-items:flex-start;gap:var(--space-6);flex-wrap:wrap}
.cc__text{flex:1 1 380px;min-width:0}
.cc__title{font-size:var(--text-sm);font-weight:var(--weight-bold);color:var(--navy);margin:0 0 4px}
.cc__body{font-size:var(--text-xs);line-height:1.6;color:var(--text-secondary);margin:0;max-width:60ch}
/* Reject sits next to Accept at the same size: withdrawing has to be as easy
   as agreeing, which rules out hiding it behind the settings panel. */
.cc__actions{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap;flex:none}
.cc__link{background:none;border:none;padding:6px 2px;cursor:pointer;font-family:var(--font-sans);
  font-size:var(--text-xs);color:var(--text-secondary);text-decoration:underline;
  text-underline-offset:2px}
.cc__link:hover{color:var(--navy)}
.cc__details{margin-top:var(--space-4);padding-top:var(--space-4);
  border-top:1px solid var(--border-subtle);display:flex;flex-direction:column;gap:var(--space-3);
  align-items:flex-start}
.cc__details[hidden]{display:none}
.cc__cat{display:flex;gap:10px;font-size:var(--text-xs);line-height:1.5;color:var(--text-secondary);
  cursor:pointer;max-width:60ch}
.cc__cat input{margin:2px 0 0;flex:none;accent-color:var(--navy)}
.cc__cat strong{color:var(--navy)}
@media (max-width:640px){
  .cc__inner{padding:16px var(--gutter);gap:var(--space-4)}
  .cc__actions{width:100%}
  .cc__actions .btn{flex:1 1 auto}
}

/* honeypot: off-screen rather than display:none, which some bots detect */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- pricing / cta ------------------------------------------------ */
/* A word like "Individuell" must never break mid-word (the body-level
   break-word rule for legal compounds would happily do that). Instead the
   figure scales to the width of its own card via container units, falling back
   to a fixed 38px where cqi is unsupported. */
.plan,.card{container-type:inline-size}
.price{font-family:var(--font-mono);font-weight:var(--weight-regular);
  color:var(--navy);letter-spacing:-1px;line-height:1;overflow-wrap:normal;
  font-size:38px;font-size:clamp(26px,13cqi,38px)}
/* the billing unit rides next to the figure at body size, not display size */
.price__per{font-family:var(--font-sans);font-size:var(--text-sm);color:var(--text-muted);
  letter-spacing:0;margin-left:6px;white-space:nowrap}
.price__note{font-size:var(--text-xs);line-height:1.5;color:var(--text-muted);margin-top:6px;
  min-height:calc(2 * 1.5 * var(--text-xs))}
.price__list{margin:26px 0;padding-top:22px;border-top:1px solid var(--border-subtle)}
.plan{display:flex;flex-direction:column}
.plan__head{display:flex;align-items:center;justify-content:space-between;gap:12px}
/* reserve two lines for the blurb and the billing note so the dividers and
   feature lists line up across all four cards regardless of copy length */
.plan__desc{font-size:13px;line-height:1.6;color:var(--text-secondary);margin:8px 0 22px;
  min-height:calc(2 * 1.6 * 13px)}
.plan .btn{margin-top:auto}
.cta-panel{background:var(--grey-light);border-radius:var(--radius-xl);padding:var(--space-8) var(--gutter);text-align:center}
.cta-panel .h2{font-size:44px;line-height:1.15;letter-spacing:var(--tracking-display);max-width:720px;margin:0 auto}
.cta-panel .body{margin:20px auto 0;max-width:520px}
.ref-panel{background:var(--navy);border-radius:var(--radius-xl);padding:56px var(--gutter);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:56px;align-items:center}
.ref-panel .h2{color:var(--white);margin:16px 0}
.ref-panel p{font-size:var(--text-body);line-height:var(--leading-relaxed);color:rgba(255,255,255,.7);
  margin:0;max-width:560px;text-wrap:pretty}

/* use-case card: the field line sits on the card's bottom edge, so the lines
   align across a row however many lines the body copy runs to */
.uc{display:flex;flex-direction:column}
.uc__head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.uc__metric{font-family:var(--font-mono);font-size:var(--text-2xs);color:var(--text-muted)}
.uc__fields{font-size:var(--text-xs);color:var(--text-muted);font-family:var(--font-mono)}
.uc .uc__fields{margin-top:auto;padding-top:18px}

/* legal / prose pages */
.prose{max-width:var(--container-narrow)}
.prose h2{font-size:var(--text-h3);font-weight:var(--weight-bold);color:var(--navy);
  letter-spacing:var(--tracking-tight);margin:var(--space-6) 0 var(--space-3)}
.prose p{font-size:var(--text-body);line-height:var(--leading-relaxed);color:var(--text-secondary);
  margin:0 0 var(--space-4)}
.prose ul{margin:0 0 var(--space-4);padding-left:20px;list-style:disc}
.prose li{font-size:var(--text-body);line-height:var(--leading-relaxed);color:var(--text-secondary);margin-bottom:6px}
/* legal pages are dense with long compounds — let the browser hyphenate them */
.prose{hyphens:auto}
.prose h1,.prose h2{hyphens:manual}

/* --- ported long-form content (blog, comparisons, use cases, glossary) --- */
.prose h2{font-size:var(--text-h3);margin-top:var(--space-7)}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:var(--text-h4);font-weight:var(--weight-bold);color:var(--navy);
  letter-spacing:var(--tracking-tight);margin:var(--space-6) 0 var(--space-2);hyphens:manual}
.prose ol{margin:0 0 var(--space-4);padding-left:20px;list-style:decimal}
.prose li>ul,.prose li>ol{margin:6px 0 0}
.prose strong,.prose b{font-weight:var(--weight-bold);color:var(--ink)}
.prose a{color:var(--text-link);text-decoration:underline;text-underline-offset:2px}
.prose a:hover{color:var(--text-link-hover)}
.prose blockquote{margin:var(--space-5) 0;padding:var(--space-3) var(--space-5);
  border-left:3px solid var(--hl-blue);background:var(--surface-subtle);
  border-radius:0 var(--radius-lg) var(--radius-lg) 0}
.prose blockquote p:last-child{margin-bottom:0}
/* wide tables scroll inside their own box rather than widening the page */
.prose table{width:100%;border-collapse:collapse;margin:0 0 var(--space-5);font-size:var(--text-sm)}
.prose th,.prose td{border:1px solid var(--border-subtle);padding:10px 12px;text-align:left;
  vertical-align:top}
.prose th{background:var(--surface-subtle);font-weight:var(--weight-bold);color:var(--navy)}

/* contract documents: parties block, checkbox lists, wide scrollable tables */
.parties{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--space-5);
  margin:0 0 var(--space-6)}
.party{background:var(--surface-subtle);border-radius:var(--radius-lg);padding:20px}
.party__role{font-size:var(--text-2xs);text-transform:uppercase;
  letter-spacing:var(--tracking-eyebrow);color:var(--text-muted);margin:0 0 10px}
.party p{margin:0 0 2px;font-size:var(--text-sm);line-height:1.6}
.prose .checklist{list-style:none;padding-left:0}
.prose .checklist li{position:relative;padding-left:28px}
.prose .checklist li::before{content:"";position:absolute;left:0;top:5px;width:14px;height:14px;
  border:1px solid var(--border-strong);border-radius:var(--radius-xs)}
/* seven-column subprocessor tables cannot fit a phone: scroll inside the box */
.tablewrap{overflow-x:auto;margin:0 0 var(--space-5);-webkit-overflow-scrolling:touch}
.tablewrap table{margin:0;min-width:560px}

/* teaser card that is itself the link (blog and glossary indexes) */
.teaser{display:block;text-decoration:none;transition:border-color var(--duration-base) var(--ease-standard),
  box-shadow var(--duration-base) var(--ease-standard)}
.teaser:hover{text-decoration:none;border-color:var(--navy);box-shadow:var(--shadow-card)}
.teaser .card__title{color:var(--navy)}
.teaser .card__text{color:var(--text-secondary)}

/* ---------- responsive --------------------------------------------------- */
/* Below this the hero's right column is too narrow for three legible panes, so
   the hero stacks and the preview takes the full width instead of cramping. */
@media (max-width:1150px){
  /* four plans no longer fit one row — 2x2 reads better than 3 plus a stray */
  .grid--plans{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){
  .grid--plans{grid-template-columns:1fr}
}
@media (max-width:1200px){
  /* six steps across need ~172px each; below this they wrap to two rows of three */
  .steps{flex-wrap:wrap}
  .steps__item{flex:1 1 33%;border-radius:0!important;border-bottom:1px solid var(--border-default)}
}
@media (max-width:1100px){
  .grid--split{grid-template-columns:1fr;gap:var(--space-7)}
}
@media (max-width:1080px){
  .app__grid--full{grid-template-columns:220px minmax(320px,1fr) 320px;min-width:900px}
}
@media (max-width:900px){
  :root{--gutter:32px;--section-y:72px;--text-h1:36px;--text-h2:28px}
  .nav,.header__actions .login{display:none}
  .navtoggle{display:inline-flex}
  .header__inner{gap:var(--space-4)}
  .header__actions{gap:12px;margin-left:auto}
  /* the CTA lives in the drawer below this width, so the bar cannot overflow */
  @media (max-width:560px){.header__actions .btn{display:none}}
  .grid--split,.grid--split-top{grid-template-columns:1fr;gap:var(--space-7)}
  /* contact page: intro above the calendar rather than beside it */
  #demo .wrap{grid-template-columns:1fr!important;gap:var(--space-7)!important}
  /* two panes once the inbox list stops being readable */
  .app__grid{grid-template-columns:1.3fr 1.2fr}
  .app__grid > .app__pane:first-child{display:none}
  .cta-panel{padding:var(--space-7) var(--space-5)}
  .cta-panel .h2{font-size:34px}
  .ref-panel{padding:var(--space-7) var(--space-5);gap:var(--space-6)}
}
@media (max-width:640px){
  :root{--gutter:20px;--section-y:64px;--text-hero:clamp(32px,9vw,40px);--text-h1:30px;--text-h2:24px;--text-lead:17px}
  .app{padding:12px;border-radius:var(--radius-xl)}
  .app__grid{grid-template-columns:1fr;height:auto}
  .app__grid > .doc-col{min-height:320px}
  .form__pair{grid-template-columns:1fr}
  /* single column: a 320px grid minimum does not fit inside the panel's own padding */
  .ref-panel{grid-template-columns:1fr;padding:var(--space-6) var(--space-5)}
  .grid--auto-lg{grid-template-columns:1fr}
  .metrics{gap:var(--space-5)}
  .steps__item{flex:1 1 100%}
  .cta-panel .h2{font-size:26px}
  .footer__bar{flex-direction:column;align-items:flex-start}
  .stat__value{font-size:32px}
  .price{font-size:32px}
}

/* mobile drawer */
.mobilenav{display:none}
@media (max-width:900px){
  .mobilenav[data-open="true"]{display:block;position:fixed;inset:var(--header-h) 0 0;z-index:39;
    background:var(--white);padding:var(--space-6) var(--gutter);overflow-y:auto}
  .mobilenav a{display:block;font-size:20px;font-weight:var(--weight-bold);color:var(--navy);
    padding:14px 0;border-bottom:1px solid var(--border-subtle)}
  .mobilenav a:hover{text-decoration:none;color:var(--blue-600)}
  /* the drawer CTA is an <a>: win back the button styling the link rule strips */
  .mobilenav a.btn{display:inline-flex;width:100%;margin-top:var(--space-6);
    padding:14px 32px;font-size:var(--text-body);border-bottom:none;
    color:var(--action-primary-fg)}
  .mobilenav a.btn:hover{color:var(--action-primary-fg)}
  body[data-navopen="true"]{overflow:hidden}
}

@media print{
  .header,.footer,.navtoggle,.mobilenav{display:none}
  .section{padding:24px 0}
}