/* Angry Muppet Consulting — angrymuppet.com
   Design tokens are the canonical set from amc-os design-system/.
   Everything below tokens is page-specific. One file: no import waterfall. */

/* ─── tokens: typography ─────────────────────────────────────────── */
/* ================================================================
   TYPOGRAPHY  —  two families, three jobs
   Space Grotesk  → display + UI + body   (techy, trustworthy)
   JetBrains Mono → labels, code, AI/system readouts
   NOTE: webfonts are loaded from Google Fonts (no local binaries
   shipped yet). Swap this @import for @font-face + self-hosted
   .woff2 files when brand fonts are finalized.
   ================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  /* ---- families ---- */
  --amc-font-sans: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --amc-font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* ---- weights ---- */
  --amc-w-regular: 400;
  --amc-w-medium: 500;
  --amc-w-semibold: 600;
  --amc-w-bold: 700;

  /* ---- type scale (px) ---- */
  --amc-fs-micro: 10px;   /* mono eyebrow / legal */
  --amc-fs-xs: 12px;
  --amc-fs-sm: 13px;
  --amc-fs-base: 15px;    /* body default */
  --amc-fs-md: 17px;
  --amc-fs-lg: 20px;
  --amc-fs-xl: 24px;
  --amc-fs-2xl: 30px;
  --amc-fs-3xl: 38px;
  --amc-fs-4xl: 50px;
  --amc-fs-5xl: 64px;
  --amc-fs-6xl: 82px;     /* hero display */

  /* ---- line heights ---- */
  --amc-lh-solid: 1;
  --amc-lh-tight: 1.08;
  --amc-lh-snug: 1.2;
  --amc-lh-normal: 1.5;
  --amc-lh-relaxed: 1.65;

  /* ---- letter spacing ---- */
  --amc-tr-display: -0.03em;  /* big Space Grotesk headings pull tight */
  --amc-tr-tight: -0.01em;
  --amc-tr-normal: 0;
  --amc-tr-label: 0.16em;     /* mono UPPERCASE labels / eyebrows */
  --amc-tr-wide: 0.42em;      /* the "CONSULTING" tag lockup */

  /* ---- semantic aliases ---- */
  --font-display: var(--amc-font-sans);
  --font-body: var(--amc-font-sans);
  --font-mono: var(--amc-font-mono);
  --text-hero: var(--amc-fs-6xl);
  --text-heading: var(--amc-fs-3xl);
  --text-body: var(--amc-fs-base);
  --text-label: var(--amc-fs-micro);
}
/* ─── tokens: color ──────────────────────────────────────────────── */
/* ================================================================
   COLOR  —  electric neon on near-black
   Cyan is the hero. Lime + magenta are limited support accents.
   Everything lives on a near-black base; light "paper" tokens
   exist only for print/docs on white.
   ================================================================ */
:root {
  /* ---- base / surfaces (dark) ---- */
  --amc-black: #0A0A0F;       /* app + brand background */
  --amc-deep: #0D0D13;        /* inset / footer panels */
  --amc-surface: #16161D;     /* cards, raised panels */
  --amc-surface-2: #1F1F29;   /* higher surface, inputs, hover */
  --amc-surface-3: #2A2A36;   /* active / pressed fill */

  /* ---- hairlines / borders ---- */
  --amc-line: rgba(255, 255, 255, 0.09);
  --amc-line-2: rgba(255, 255, 255, 0.16);
  --amc-line-strong: rgba(255, 255, 255, 0.28);

  /* ---- text on dark ---- */
  --amc-text: #F4F4F6;                     /* primary */
  --amc-text-dim: rgba(244, 244, 246, 0.62); /* secondary / body-muted */
  --amc-text-mute: rgba(244, 244, 246, 0.40);/* captions, placeholders */
  --amc-text-faint: rgba(244, 244, 246, 0.22);

  /* ---- PRIMARY neon: cyan ---- */
  --amc-cyan: #34E7FF;
  --amc-cyan-bright: #6BF0FF;   /* hover / highlight */
  --amc-cyan-deep: #12A9C4;     /* pressed / on-light */
  --amc-cyan-ink: #04141A;      /* text sitting ON cyan fills */
  --amc-cyan-glow: rgba(52, 231, 255, 0.45);
  --amc-cyan-wash: rgba(52, 231, 255, 0.12); /* tint fills, focus rings */

  /* ---- support accents (use sparingly) ---- */
  --amc-lime: #C7FB50;          /* positive / "shipped" / success */
  --amc-lime-ink: #12180A;
  --amc-magenta: #FF3D9A;       /* emphasis / "angry" moments / alerts */
  --amc-magenta-ink: #1A0410;
  --amc-amber: #FFC24B;         /* warning */
  --amc-red: #FF5C46;           /* destructive / error */

  /* ---- light "paper" (print, docs, one-pagers on white) ---- */
  --amc-paper: #F7F7F4;
  --amc-paper-2: #ECECE6;
  --amc-ink: #0A0A0F;
  --amc-ink-dim: rgba(10, 10, 15, 0.62);

  /* ---- semantic aliases ---- */
  --bg-app: var(--amc-black);
  --surface-card: var(--amc-surface);
  --border-hairline: var(--amc-line);
  --text-default: var(--amc-text);
  --text-muted: var(--amc-text-dim);
  --accent: var(--amc-cyan);
  --accent-ink: var(--amc-cyan-ink);
  --success: var(--amc-lime);
  --warning: var(--amc-amber);
  --danger: var(--amc-red);
  --emphasis: var(--amc-magenta);
}
/* ─── tokens: spacing ────────────────────────────────────────────── */
/* ================================================================
   SPACING & LAYOUT  —  4px base grid
   ================================================================ */
:root {
  --amc-space-0: 0;
  --amc-space-1: 4px;
  --amc-space-2: 8px;
  --amc-space-3: 12px;
  --amc-space-4: 16px;
  --amc-space-5: 20px;
  --amc-space-6: 24px;
  --amc-space-7: 32px;
  --amc-space-8: 40px;
  --amc-space-9: 48px;
  --amc-space-10: 64px;
  --amc-space-11: 80px;
  --amc-space-12: 112px;
  --amc-space-13: 160px;

  /* ---- content widths ---- */
  --amc-width-prose: 68ch;    /* readable text column */
  --amc-width-content: 1120px;/* marketing / app content max */
  --amc-width-wide: 1320px;   /* full-bleed sections */

  /* ---- gutters ---- */
  --amc-gutter-mobile: 20px;
  --amc-gutter: 40px;

  /* ---- semantic aliases ---- */
  --space-inset: var(--amc-space-6);      /* default card padding */
  --space-stack: var(--amc-space-4);       /* vertical rhythm */
  --space-section: var(--amc-space-12);    /* between page sections */
}
/* ─── tokens: effects ────────────────────────────────────────────── */
/* ================================================================
   EFFECTS  —  radii, borders, shadows, and the signature neon GLOW
   The glow is the brand's core visual device: cyan light bleeding
   off eyes, marks, focus states, and primary actions. Use it with
   restraint — one or two glowing elements per view, never everything.
   ================================================================ */
:root {
  /* ---- radii ---- */
  --amc-r-xs: 6px;
  --amc-r-sm: 8px;
  --amc-r-md: 12px;
  --amc-r-lg: 16px;
  --amc-r-xl: 22px;
  --amc-r-2xl: 30px;   /* squircle heads / large tiles */
  --amc-r-pill: 999px;

  /* ---- borders ---- */
  --amc-border: 1px solid var(--amc-line);
  --amc-border-2: 1px solid var(--amc-line-2);
  --amc-ring: 3px solid rgba(52, 231, 255, 0.6);   /* the eye-ring device */

  /* ---- elevation (dark UI: shadows read as depth of black) ---- */
  --amc-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
  --amc-shadow-card: 0 1px 3px rgba(0, 0, 0, 0.5), 0 12px 32px rgba(0, 0, 0, 0.38);
  --amc-shadow-pop: 0 8px 24px rgba(0, 0, 0, 0.55), 0 24px 64px rgba(0, 0, 0, 0.45);

  /* ---- the signature GLOW ---- */
  --amc-glow-xs: 0 0 8px rgba(52, 231, 255, 0.5);
  --amc-glow-sm: 0 0 12px rgba(52, 231, 255, 0.5);
  --amc-glow: 0 0 22px rgba(52, 231, 255, 0.45);
  --amc-glow-lg: 0 0 40px rgba(52, 231, 255, 0.4);
  --amc-glow-lime: 0 0 20px rgba(199, 251, 80, 0.45);
  --amc-glow-magenta: 0 0 20px rgba(255, 61, 154, 0.5);

  /* ---- focus ring ---- */
  --amc-focus: 0 0 0 3px rgba(52, 231, 255, 0.35);

  /* ---- motion ---- */
  --amc-ease: cubic-bezier(0.2, 0.7, 0.2, 1);      /* default UI easing */
  --amc-ease-out: cubic-bezier(0.16, 1, 0.3, 1);   /* entrances */
  --amc-dur-fast: 120ms;
  --amc-dur: 200ms;
  --amc-dur-slow: 380ms;

  /* ---- semantic aliases ---- */
  --radius-card: var(--amc-r-lg);
  --radius-control: var(--amc-r-md);
  --shadow-card: var(--amc-shadow-card);
  --glow-accent: var(--amc-glow);
}
/* ─── page ───────────────────────────────────────────────────────── */
html{scroll-behavior:smooth}
body{margin:0;background:#0A0A0F;color:#F4F4F6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:#34E7FF}a:hover{color:#6BF0FF}
::selection{background:rgba(52,231,255,.35)}
input::placeholder{color:rgba(244,244,246,.4)}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* Story revision: hierarchy, chapter wayfinding, report preview, offer layout. */
*{box-sizing:border-box}
[data-screen-label="hero"] h1{display:flex;flex-direction:column;gap:14px}
.hero-category{display:block;font-size:clamp(21px,2.15vw,30px);line-height:1.18;font-weight:500;color:var(--amc-text)}
.hero-promise{display:block;font-size:clamp(38px,4.55vw,64px);line-height:1.04;letter-spacing:-.04em}
.story-progress{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);z-index:30;display:flex;gap:6px;padding:6px;border:1px solid var(--amc-line-2);border-radius:var(--amc-r-pill);background:var(--amc-deep);box-shadow:var(--amc-shadow-card);transition:opacity .2s}
.story-progress a{display:flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:var(--amc-r-pill);color:var(--amc-text-dim);text-decoration:none;font-family:var(--amc-font-mono);font-size:11px;letter-spacing:.04em}
.story-progress a::before{content:'';width:5px;height:5px;background:var(--amc-text-mute);border-radius:50%}
.story-progress a[aria-current="step"]{color:var(--amc-cyan);background:var(--amc-cyan-wash)}
.story-progress a[aria-current="step"]::before{background:var(--amc-cyan)}
a:focus-visible{outline:3px solid var(--amc-cyan);outline-offset:4px}
.report-preview{padding:28px 32px!important;display:block!important}
.report-intro{display:flex;justify-content:space-between;align-items:start;gap:24px;margin-bottom:24px}
.report-intro p{max-width:480px}
.report-tag,.report-eyebrow{font:10px var(--amc-font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--amc-text-dim)}
.report-tag{border:1px solid var(--amc-line-2);padding:8px 10px;border-radius:6px;white-space:nowrap}
.report-slides{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.report-slide{border:1px solid var(--amc-line-2);background:var(--amc-surface);border-radius:12px;padding:20px;min-width:0}
.report-slide h3{font-size:19px;letter-spacing:-.02em;margin:10px 0 18px;font-weight:500}
.workflow{display:flex;align-items:center;gap:6px;margin:24px 0 16px}
.workflow span{flex:1;text-align:center;border:1px solid var(--amc-line-2);border-radius:6px;padding:12px 2px;font-size:11px}
.workflow span.hot{border-color:var(--amc-cyan);color:var(--amc-cyan);background:var(--amc-cyan-wash)}
.workflow i{font-style:normal;color:var(--amc-text-mute)}
.report-note{font-size:12px;line-height:1.6;color:var(--amc-text-dim);margin:0}
.priority-list{list-style:none;margin:0;padding:0;display:grid;gap:0}
.priority-list li{display:flex;gap:12px;padding:10px 0;border-top:1px solid var(--amc-line);font-size:12px;line-height:1.45}
.priority-list b{font:11px var(--amc-font-mono);color:var(--amc-cyan)}
.priority-list span{display:block;color:var(--amc-text-dim);font-size:11px;margin-top:3px}
.report-matrix{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--amc-line-2);border:1px solid var(--amc-line-2);border-radius:6px;overflow:hidden;margin-bottom:16px}
.report-matrix span{padding:10px;background:var(--amc-deep);font-size:10px;color:var(--amc-text-dim)}
.report-matrix span:first-child{background:var(--amc-cyan-wash);color:var(--amc-cyan)}
.offer-columns{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)!important}
.offer-price{background:var(--amc-deep)!important}
.offer-price [data-price]{color:var(--amc-text)!important;text-shadow:none!important}
.offer-guarantee{padding:16px!important;border:1px solid var(--amc-line-2)!important;border-radius:12px;background:var(--amc-surface)}
.offer-guarantee strong{display:block;font-size:21px;line-height:1.25;margin-bottom:8px}
.offer-process{grid-column:1 / -1}
.offer-process-steps{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px 36px}
.offer-process-steps>div{border-bottom:none!important;align-items:flex-start}
.offer-process-steps strong{display:block;margin-bottom:6px}
#offer,#next,#about,#questions,#book{scroll-margin-top:64px}
@media(min-width:760px){[data-screen-label="hero"]{padding-bottom:64px!important}}
@media(max-width:759px){
 [data-screen-label="the story"]{padding:0 24px!important}
 [data-screen-label="hero"]{height:auto!important;min-height:100svh;padding-top:300px!important;padding-bottom:110px!important;gap:16px!important}
 .hero-category{font-size:21px}.hero-promise{font-size:38px}
 .story-progress{bottom:12px;gap:0;padding:4px;max-width:calc(100% - 24px)}
 .story-progress a{font-size:10px;padding:0 12px;gap:6px}
 .report-intro{display:block}.report-tag{display:inline-block;margin-top:12px}
 .report-slides,.offer-columns{grid-template-columns:1fr!important}
 .report-preview,.offer-columns>div{padding:24px!important}
 .offer-process-steps{grid-template-columns:1fr 1fr}
 #offer,#next,#about,#questions{padding:64px 24px!important}
 #offer>div,#next>div,#about>div,#questions>div{gap:24px!important}
 nav>div{padding:0 20px!important;gap:12px!important}
 nav>div>a:last-child{padding:0 16px!important;min-height:44px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}


#about .firm-copy{display:grid!important;grid-template-columns:minmax(0,1.25fr) minmax(0,.85fr);gap:24px 40px!important;align-items:start}
#about .firm-copy h2{grid-column:1/-1}
#about .firm-credentials{grid-column:1/-1;display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr));gap:20px!important;margin-top:8px;padding-top:24px!important}
#about .firm-name{border-left:1px solid var(--amc-line-2);padding-left:24px}
@media(max-width:759px){#about .firm-copy{grid-template-columns:1fr}#about .firm-credentials{grid-template-columns:repeat(2,minmax(0,1fr))}#about .firm-name{border-left:0;border-top:1px solid var(--amc-line);padding:24px 0 0}}

.process-demo{margin:18px 0 14px;--flow-speed:1.6s}
.process-demo svg{display:block;width:100%;overflow:visible}
.process-edge{fill:none;stroke:var(--amc-cyan);color:var(--amc-cyan);stroke-width:1;opacity:.32;transition:stroke .8s,opacity .8s}
.process-packet{fill:var(--amc-cyan);filter:drop-shadow(0 0 3px var(--amc-cyan));transition:fill .6s}
.process-block rect{fill:var(--amc-deep);stroke:var(--amc-line-2);stroke-width:1;transition:fill .6s,stroke .6s}
.process-block text{fill:var(--amc-text-dim);font:11px var(--amc-font-sans);text-anchor:middle;transition:fill .6s}
.process-block.is-stuck rect{stroke:var(--amc-amber)!important;fill:rgba(255,194,75,.09);animation:process-alert 1.2s ease-in-out infinite}
.process-block.is-stuck text{fill:var(--amc-amber)}
.process-block.is-fixed rect{stroke:var(--amc-lime)!important;fill:rgba(199,251,80,.08)}
.process-block.is-fixed text{fill:var(--amc-lime)}
.process-loop-label{text-anchor:middle;fill:var(--amc-text-mute);font:8px var(--amc-font-mono);letter-spacing:1px}
.process-readout{min-height:40px;display:flex;align-items:center;gap:8px;padding-top:12px;border-top:1px solid var(--amc-line);font:10px var(--amc-font-mono);color:var(--amc-text-dim)}
.process-state-dot{width:5px;height:5px;background:var(--amc-cyan);border-radius:50%;flex:none;transition:background .5s}
.process-output{display:flex;gap:4px;margin-left:auto}
.process-output i{width:4px;height:12px;border-radius:2px;background:var(--amc-cyan);animation:process-output var(--flow-speed) ease-in-out infinite}
.process-output i:nth-child(2){animation-delay:.2s}.process-output i:nth-child(3){animation-delay:.4s}
.process-demo[data-mode="slow"]{--flow-speed:4.8s}
.process-demo[data-mode="slow"] .process-state-dot,.process-demo[data-mode="halt"] .process-state-dot{background:var(--amc-amber)}
.process-demo[data-mode="halt"] .process-output i{animation-play-state:paused;opacity:.16;background:var(--amc-amber)}
.process-demo[data-mode="repair"] .process-state-dot{background:var(--amc-lime)}
@keyframes process-alert{0%,100%{stroke-opacity:.55;filter:drop-shadow(0 0 0px transparent)}50%{stroke-opacity:1;filter:drop-shadow(0 0 3px rgba(255,194,75,.55))}}
@keyframes process-output{0%,100%{opacity:.22;transform:scaleY(.45)}50%{opacity:1;transform:scaleY(1)}}
@media(prefers-reduced-motion:reduce){.process-output i,.process-block.is-stuck rect{animation:none!important}}
@media(max-width:759px){.process-block text{font-size:15px}.process-loop-label{font-size:10px}.process-readout{line-height:1.5}}

.hero-v2 h1{font-size:clamp(48px,5.6vw,78px)!important;line-height:1.02!important;letter-spacing:-.045em!important;font-weight:500!important;margin:0!important;display:block!important;color:var(--amc-text)}
.hero-v2 h1>span{color:var(--amc-text);text-shadow:0 0 8px rgba(52,231,255,.65),0 0 24px rgba(52,231,255,.55),0 0 52px rgba(52,231,255,.32)}
.v2-intro{font-size:18px;line-height:1.6;color:var(--amc-text-dim);max-width:33ch;margin:0}
.v2-offer{margin-top:4px;border-top:1px solid var(--amc-line-2);padding-top:22px;max-width:390px}
.v2-offer-title{margin:0 0 8px;font-size:18px;font-weight:500;letter-spacing:-.02em}
.v2-terms{margin:0;font-size:14px;line-height:1.6;color:var(--amc-text-dim);max-width:38ch}
.v2-action{display:inline-flex;gap:28px;align-items:center;min-height:48px;padding:0 22px;margin-top:20px;border:1px solid var(--amc-cyan);border-radius:8px;background:var(--amc-cyan);color:var(--amc-cyan-ink);font-size:15px;font-weight:600;text-decoration:none;transition:box-shadow .2s,background .2s}
.v2-action:hover{color:var(--amc-cyan-ink);background:var(--amc-cyan-bright);box-shadow:var(--amc-glow-sm)}
nav>div>a:last-child{border-radius:8px!important;box-shadow:none!important}
nav>div>a:last-child:hover{box-shadow:var(--amc-glow-sm)!important}
@media(max-width:759px){.hero-v2 h1{font-size:48px!important;line-height:1.04!important}.hero-v2{gap:22px!important;padding-top:280px!important}.v2-intro{font-size:16px}.v2-offer{padding-top:18px}.v2-terms{font-size:13px}}
.hero-v2 h1{font-size:clamp(44px,4.7vw,66px)!important;line-height:1.06!important}.hero-v2 .v2-intro{font-size:clamp(18px,1.7vw,23px);line-height:1.5;max-width:none;color:var(--amc-text)}.hero-v2 .v2-offer{border-top:0;padding-top:0;margin-top:8px}.hero-v2 .v2-terms{font-size:15px}.hero-v2 .v2-action{margin-top:18px}@media(max-width:759px){.hero-v2 h1{font-size:40px!important}.hero-v2 .v2-intro{font-size:18px}}
@media(min-width:760px){.hero-v2{margin-left:clamp(24px,3vw,48px)}}
.process-demo[data-mode="halt"] .is-stuck rect{stroke:#ff626d!important;fill:rgba(255,98,109,.12);animation-name:process-stop}
.process-demo[data-mode="halt"] .is-stuck text{fill:#ff8089}
.process-demo[data-mode="halt"] .process-state-dot,.process-demo[data-mode="halt"] .process-output i{background:#ff626d}
@keyframes process-stop{0%,100%{stroke-opacity:.65;filter:drop-shadow(0 0 2px rgba(255,98,109,.3))}50%{stroke-opacity:1;filter:drop-shadow(0 0 6px rgba(255,98,109,.85))}}
.process-solution{opacity:0;transition:opacity .6s}.process-solution rect{fill:#102b31;stroke:#34e7ff;stroke-width:1}.process-solution text{fill:#b8f8ff;font-size:10px;font-family:var(--amc-font-mono);text-anchor:middle}.process-solution path{fill:none;stroke:#34e7ff;stroke-width:1.5;stroke-dasharray:3 4}.process-demo[data-mode="repair"] .process-solution{opacity:1}.process-demo[data-mode="repair"] .process-loop-label{opacity:0}
@media(max-width:540px){.offer-process-steps{grid-template-columns:1fr;gap:8px}}
/* ─── hover states (were inline style-hover in the design preview) ─ */
.h1:hover{color:var(--amc-text)}
.h2:hover{color:var(--amc-text)}
.h3:hover{color:var(--amc-text)}
.h4:hover{color:var(--amc-text)}
.h5:hover{background:var(--amc-cyan-bright);box-shadow:0 0 30px rgba(52,231,255,.6)}
.h6:hover{background:var(--amc-cyan-bright);box-shadow:0 0 34px rgba(52,231,255,.6)}
.h7:hover{background:var(--amc-cyan-bright);box-shadow:0 0 38px rgba(52,231,255,.65)}

/* ─── form + checkout controls (added when the page was wired up) ─────────── */
.lead-input{
  width:100%;
  box-sizing:border-box;
  background:var(--amc-surface-2);
  border:1px solid var(--amc-line-2);
  border-radius:10px;
  padding:12px 14px;
  color:var(--amc-text);
  font-family:inherit;
  font-size:15px;
  line-height:1.4;
  transition:border-color .15s, box-shadow .15s;
}
.lead-input:focus{
  outline:none;
  border-color:var(--amc-cyan);
  box-shadow:0 0 0 3px var(--amc-cyan-wash);
}
.lead-input:disabled{opacity:.55;cursor:not-allowed}

[data-lead-submit]:hover:not(:disabled){
  background:var(--amc-cyan-bright);
  box-shadow:0 0 30px rgba(52,231,255,.55);
}
[data-lead-submit]:disabled{opacity:.6;cursor:progress}

[data-buy]:hover:not(:disabled){
  background:var(--amc-cyan-wash);
  color:var(--amc-cyan-bright);
  box-shadow:0 0 26px rgba(52,231,255,.28);
}
[data-buy]:disabled{opacity:.6;cursor:progress}

/* The design preview declared the brand faces as tokens but never applied one
   to <body>, because the canvas that hosted it supplied a font of its own.
   Standalone, that falls back to the browser default serif. */
body{
  font-family:var(--amc-font-sans);
}