@charset "UTF-8";
/* ==========================================================================
   casinoapi.tech — core stylesheet
   --------------------------------------------------------------------------
   NO CASCADE LAYERS IN THIS FILE. THAT IS DELIBERATE — PLEASE DO NOT ADD ANY.

   This started life organised with @layer reset, tokens, base, components,
   sections, utilities. It read beautifully and it was wrong, twice over:

     · v1.0.0 shipped every section clamped to the theme's 645px content
       width;
     · v1.0.1 shipped dark mode with near-black text on a near-black page.

   Both had the same single cause. WordPress prints its global styles
   unlayered — `body { color: var(--wp--preset--color--contrast) }`,
   `a:where(:not(.wp-element-button)) { color: currentcolor }`, the
   `:where(.is-layout-constrained) > *` max-width rule — and in the cascade
   ANY unlayered declaration beats EVERY layered one, no matter how specific
   the layered selector is. Layer order only settles fights between layers.
   So the layered rules lost on exactly the properties the theme has an
   opinion about (colour, background, width) and won everywhere else, which
   renders as "half the stylesheet worked" and is horrible to diagnose.

   Unlayered, this file competes on specificity and source order, and it is
   enqueued after the theme's global styles, so it wins the ties. Section 7
   goes further and hands the theme's own colour variables our token values,
   so blocks we have never styled follow the theme switch too.

   Contents
     1. reset       — box model, media defaults, motion opt-out
     2. tokens      — design tokens, light + dark, fonts
     3. base        — typography, links, focus, measure
     4. components  — buttons, cards, code panel, tabs, accordion, header, footer
     5. sections    — S2 … S10
     6. utilities   — sr-only, arrow links, spacing helpers
     7. wp bridge   — theme colour variables, full-bleed, template-part breakout
   ========================================================================== */



/* ==========================================================================
   1. RESET
   ========================================================================== */
/* ---- reset ---- */

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

/* `clip` rather than `hidden`: it contains the full-bleed breakout without
   killing position:sticky on the header, which `hidden` would. */
html { overflow-x: clip; -webkit-text-size-adjust: 100%; }

body { margin: 0; overflow-x: clip; }

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

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

:where(h1, h2, h3, h4, p, ul, ol, figure, pre, blockquote) { margin: 0; }
:where(ul, ol) { padding: 0; list-style: none; }

/* Required, not optional (spec 7.5). Final states shown immediately. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}


/* ==========================================================================
   2. TOKENS
   ========================================================================== */
/* ---- tokens ---- */

/* Two families, subset to Latin. Inter is a single variable file covering
   every weight the type scale asks for, so "max 4 weights" costs one
   request rather than four. */
@font-face {
  font-family: "Inter var";
  src: url("../fonts/inter-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/jetbrains-mono.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Neutrals — the page is mostly these */
  --ca-bg:            #FFFFFF;
  --ca-bg-subtle:     #F7F8FA;
  --ca-bg-inset:      #EEF0F4;
  --ca-border:        #E2E5EA;
  --ca-border-strong: #C9CED7;
  --ca-text:          #0E1116;
  --ca-text-muted:    #5A6472;

  /* Brand — deep technical blue, used sparingly */
  --ca-accent:        #1D4ED8;
  --ca-accent-hover:  #1E40AF;
  --ca-accent-soft:   #EFF4FF;
  --ca-on-accent:     #FFFFFF;

  /* Supporting — compliance status and code only */
  --ca-ok:            #0F766E;
  --ca-warn:          #B45309;
  --ca-stop:          #B91C1C;

  /* Code panel — identical in both themes by design */
  --ca-code-bg:       #0E1116;
  --ca-code-text:     #E6E9EF;
  --ca-code-key:      #7DD3FC;
  --ca-code-string:   #A7F3D0;
  --ca-code-number:   #FCD34D;
  --ca-code-muted:    #6B7684;

  --ca-radius:        10px;
  --ca-radius-lg:     16px;
  --ca-shadow-sm:     0 1px 2px rgb(14 17 22 / .06);
  --ca-shadow-md:     0 4px 16px rgb(14 17 22 / .08);

  /* Type scale — fluid between the mobile and desktop ends of spec 7.2 */
  --ca-font-sans: "Inter var", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --ca-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --ca-fs-h1:     clamp(2.125rem, 1.40rem + 3.20vw, 3.5rem);
  --ca-fs-h2:     clamp(1.625rem, 1.28rem + 1.53vw, 2.25rem);
  --ca-fs-h3:     clamp(1.125rem, 1.06rem + 0.28vw, 1.25rem);
  --ca-fs-lede:   clamp(1.0625rem, 0.98rem + 0.42vw, 1.25rem);
  --ca-fs-body:   clamp(1rem, 0.97rem + 0.14vw, 1.0625rem);
  --ca-fs-small:  0.875rem;
  --ca-fs-eyebrow: 0.8125rem;
  --ca-fs-code:   clamp(0.8125rem, 0.79rem + 0.11vw, 0.875rem);

  /* Layout */
  --ca-container:   1200px;
  --ca-gutter:      24px;
  --ca-section-y:   clamp(48px, 6.2vw, 96px);
  --ca-header-h:    68px;

  --ca-ease: cubic-bezier(.2,.6,.2,1);
}

@media (min-width: 1024px) {
  :root { --ca-gutter: 40px; }
}

/* Dark. Declared twice on purpose:
     · the media query serves visitors on the default "follow the system"
       setting, guarded so an explicit light choice still wins;
     · the attribute rule serves the toggle in both directions.
   Only the tokens change — no component redefines a colour of its own. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ca-bg:            #0B0D11;
    --ca-bg-subtle:     #111419;
    --ca-bg-inset:      #171B21;
    --ca-border:        #232830;
    --ca-border-strong: #333A45;
    --ca-text:          #E9ECF1;
    --ca-text-muted:    #98A2B3;
    --ca-accent:        #6D9BFF;
    --ca-accent-hover:  #8FB2FF;
    --ca-accent-soft:   #131A2A;
    --ca-on-accent:     #0B0D11;
    --ca-ok:            #4FD1C5;
    --ca-warn:          #F0B45C;
    --ca-stop:          #F87171;
    --ca-shadow-sm:     0 1px 2px rgb(0 0 0 / .4);
    --ca-shadow-md:     0 4px 16px rgb(0 0 0 / .5);
  }
}

:root[data-theme="dark"] {
  --ca-bg:            #0B0D11;
  --ca-bg-subtle:     #111419;
  --ca-bg-inset:      #171B21;
  --ca-border:        #232830;
  --ca-border-strong: #333A45;
  --ca-text:          #E9ECF1;
  --ca-text-muted:    #98A2B3;
  --ca-accent:        #6D9BFF;
  --ca-accent-hover:  #8FB2FF;
  --ca-accent-soft:   #131A2A;
  --ca-on-accent:     #0B0D11;
  --ca-ok:            #4FD1C5;
  --ca-warn:          #F0B45C;
  --ca-stop:          #F87171;
  --ca-shadow-sm:     0 1px 2px rgb(0 0 0 / .4);
  --ca-shadow-md:     0 4px 16px rgb(0 0 0 / .5);
}

:root { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { color-scheme: dark; }
}


/* ==========================================================================
   3. BASE
   ========================================================================== */
/* ---- base ---- */

body {
  background: var(--ca-bg);
  color: var(--ca-text);
  font-family: var(--ca-font-sans);
  font-size: var(--ca-fs-body);
  line-height: 1.65;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
}

/* Layout and theme-variable overrides live in section 7 at the bottom. */

/* ---- Type ---- */
/* Colour is set explicitly rather than left to inherit from body. The theme
   colours headings from its own rules; relying on inheritance is what left
   them black-on-black in dark mode. */
h1, h2, h3 {
  color: var(--ca-text);
  font-weight: 600;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

h1 { font-size: var(--ca-fs-h1); font-weight: 640; line-height: 1.08; letter-spacing: -0.02em; }
h2 { font-size: var(--ca-fs-h2); font-weight: 620; line-height: 1.15; letter-spacing: -0.015em; }
h3 { font-size: var(--ca-fs-h3); font-weight: 600; line-height: 1.30; letter-spacing: -0.01em; }

p { text-wrap: pretty; }

/* 68ch measure for prose, per spec 7.2. */
.ca-prose > p,
.ca-measure { max-width: 68ch; }

a { color: var(--ca-accent); }

/* Never colour-only (spec 7.4, 7.7). */
.ca-prose a,
.faq__a a,
.ca-inline-link {
  color: var(--ca-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  transition: text-decoration-thickness 120ms var(--ca-ease);
}
.ca-prose a:hover,
.faq__a a:hover,
.ca-inline-link:hover { text-decoration-thickness: 2px; }

/* One focus treatment for the whole page. Never outline: none. */
:where(a, button, summary, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--ca-accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Fixed-position header means in-page anchors need breathing room. */
:target { scroll-margin-top: calc(var(--ca-header-h) + 16px); }

code, pre, kbd, samp { font-family: var(--ca-font-mono); font-size: var(--ca-fs-code); }


/* ==========================================================================
   4. COMPONENTS
   ========================================================================== */
/* ---- components ---- */

/* ---- Container ---- */
.ca-container {
  width: 100%;
  max-width: var(--ca-container);
  margin-inline: auto;
  padding-inline: var(--ca-gutter);
}
.ca-container--narrow { max-width: 860px; }

/* ---- Section rhythm ---- */
.ca-section { padding-block: var(--ca-section-y); }
.ca-section--subtle { background: var(--ca-bg-subtle); }

.ca-section__intro {
  max-width: 62ch;
  margin-top: 16px;
  color: var(--ca-text-muted);
  font-size: var(--ca-fs-lede);
}

/* ---- Skip link ---- */
.skip-link {
  position: absolute;
  left: 16px; top: 8px;
  z-index: 100;
  padding: 10px 16px;
  background: var(--ca-accent);
  color: var(--ca-on-accent);
  font-size: var(--ca-fs-small);
  font-weight: 550;
  border-radius: var(--ca-radius);
  text-decoration: none;
  transform: translateY(-200%);
  transition: transform 140ms var(--ca-ease);
}
.skip-link:focus { transform: translateY(0); }

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 24px;
  border-radius: 12px;
  font-size: var(--ca-fs-body);
  font-weight: 550;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 140ms var(--ca-ease),
              border-color 140ms var(--ca-ease),
              transform 140ms var(--ca-ease);
}

.btn--primary {
  background: var(--ca-accent);
  color: var(--ca-on-accent);
  border: 1px solid var(--ca-accent);
}
.btn--primary:hover { background: var(--ca-accent-hover); border-color: var(--ca-accent-hover); transform: translateY(-1px); }

.btn--secondary {
  background: transparent;
  color: var(--ca-text);
  border: 1px solid var(--ca-border-strong);
}
.btn--secondary:hover { background: var(--ca-bg-inset); }

.btn--sm { padding: 9px 16px; font-size: var(--ca-fs-small); border-radius: 10px; }

/* ---- Card ---- */
.ca-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 26px;
  background: var(--ca-bg);
  border: 1px solid var(--ca-border);
  border-radius: var(--ca-radius-lg);
  box-shadow: var(--ca-shadow-sm);
  transition: border-color 120ms var(--ca-ease), box-shadow 120ms var(--ca-ease);
}
.ca-section--subtle .ca-card { background: var(--ca-bg); }
.ca-card:has(a:hover),
.ca-card:has(a:focus-visible) {
  border-color: var(--ca-border-strong);
  box-shadow: var(--ca-shadow-md);
}
.ca-card p { color: var(--ca-text-muted); }

/* One anchor per card (spec S3): the heading link stretches over the whole
   card, and the trailing arrow is a visual affordance inside that same
   anchor rather than a second link diluting the anchor text. */
.ca-card__link { text-decoration: none; color: inherit; }
.ca-card__link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}
.ca-card { position: relative; }
.ca-card__link:focus-visible { outline: none; }
.ca-card:has(.ca-card__link:focus-visible) {
  outline: 2px solid var(--ca-accent);
  outline-offset: 2px;
}

.ca-card__cta {
  margin-top: auto;
  padding-top: 6px;
  color: var(--ca-accent);
  font-size: var(--ca-fs-small);
  font-weight: 550;
}
.ca-card__cta::after { content: " \2192"; }

.ca-card__icon {
  width: 24px; height: 24px;
  color: var(--ca-accent);
  margin-bottom: 4px;
}

/* ---- Arrow link ---- */
.ca-arrow-link {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  color: var(--ca-accent);
  font-weight: 550;
  text-decoration: none;
}
.ca-arrow-link::after {
  content: "\2192";
  transition: transform 140ms var(--ca-ease);
}
.ca-arrow-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.ca-arrow-link:hover::after { transform: translateX(3px); }

/* ---- Eyebrow ---- */
.eyebrow {
  font-size: var(--ca-fs-eyebrow);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ca-text-muted);
}

/* ---- Disclaimer ---- */
.disclaimer {
  margin-top: 28px;
  padding-top: 16px;
  border-top: 1px solid var(--ca-border);
  font-size: var(--ca-fs-small);
  color: var(--ca-text-muted);
  max-width: 72ch;
}


/* ======================================================================
   HEADER
   ====================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--ca-bg);
  border-bottom: 1px solid transparent;
  transition: border-color 140ms var(--ca-ease), box-shadow 140ms var(--ca-ease);
}
/* Border appears past 8px of scroll. Height never changes — the border is
   drawn on a box that already reserves 1px, so there is nothing to shift. */
.site-header.is-stuck {
  border-bottom-color: var(--ca-border);
  box-shadow: var(--ca-shadow-sm);
}
.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .site-header { top: 46px; } }

.site-header__inner {
  display: flex;
  align-items: center;
  gap: 16px;
  height: var(--ca-header-h);
  /* Above both the mobile scrim (44) and the drawer (45), so the bar keeps
     its normal contrast while the drawer is open and the close button stays
     the topmost hit target rather than sitting under the dimming layer. */
  position: relative;
  z-index: 46;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ca-text);
  text-decoration: none;
  font-weight: 620;
  letter-spacing: -0.02em;
  font-size: 1.0625rem;
  flex-shrink: 0;
}
.logo__mark { color: var(--ca-accent); flex-shrink: 0; }
.logo__tld { color: var(--ca-text-muted); font-weight: 500; }

.nav { margin-left: auto; }
.nav__list { display: flex; align-items: center; gap: 2px; }

.nav__link,
.nav__trigger {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 12px;
  border-radius: 8px;
  color: var(--ca-text);
  font-size: var(--ca-fs-small);
  font-weight: 500;
  text-decoration: none;
  transition: background-color 120ms var(--ca-ease);
}
.nav__link:hover,
.nav__trigger:hover { background: var(--ca-bg-inset); }

.nav__chevron { transition: transform 160ms var(--ca-ease); }
.nav__item.is-open .nav__chevron { transform: rotate(180deg); }

.nav__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.theme-toggle {
  display: inline-grid;
  place-items: center;
  width: 36px; height: 36px;
  border-radius: 9px;
  border: 1px solid var(--ca-border);
  color: var(--ca-text-muted);
  transition: background-color 120ms var(--ca-ease), color 120ms var(--ca-ease);
}
.theme-toggle:hover { background: var(--ca-bg-inset); color: var(--ca-text); }
.theme-toggle__moon { display: none; }
:root[data-theme="dark"] .theme-toggle__sun { display: none; }
:root[data-theme="dark"] .theme-toggle__moon { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle__sun { display: none; }
  :root:not([data-theme="light"]) .theme-toggle__moon { display: block; }
}

.nav__burger { display: none; }


/* ---- Mega panel (desktop) ---- */
.nav__item--has-panel { position: relative; }

.mega {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  translate: -50% 0;
  width: min(720px, calc(100vw - 48px));
  padding: 0;
  background: var(--ca-bg);
  border: 1px solid var(--ca-border);
  border-radius: var(--ca-radius-lg);
  box-shadow: var(--ca-shadow-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 140ms var(--ca-ease),
              transform 140ms var(--ca-ease),
              visibility 140ms;
}

/* With no script, CSS alone drives the panel: :hover for pointers,
   :focus-within for keyboards. Once the script is present BOTH are handed
   over to it and `.is-open` becomes the single source of truth — otherwise
   :hover keeps a panel visible after Escape closed it (pointer is still
   over the trigger) and after a click meant to dismiss it, leaving
   aria-expanded lying about what is on screen. */
html:not(.has-js) .nav__item--has-panel:hover > .mega,
html:not(.has-js) .nav__item--has-panel:focus-within > .mega,
.nav__item.is-open > .mega {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Bridges the 10px gap so the panel does not close as the pointer travels. */
.nav__item--has-panel::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 100%;
  height: 12px;
}

.mega__inner { padding: 24px; }

.mega__lede {
  margin-bottom: 18px;
  font-size: var(--ca-fs-small);
  color: var(--ca-text-muted);
}

.mega__cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 28px;
}

.mega__heading {
  margin-bottom: 8px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ca-text-muted);
}

.mega__list { display: flex; flex-direction: column; gap: 2px; }

.mega__link {
  display: block;
  padding: 9px 10px;
  border-radius: 9px;
  text-decoration: none;
  transition: background-color 120ms var(--ca-ease);
}
.mega__link:hover { background: var(--ca-bg-subtle); }

.mega__link-label {
  display: block;
  color: var(--ca-text);
  font-size: var(--ca-fs-small);
  font-weight: 550;
}
.mega__link-desc {
  display: block;
  margin-top: 2px;
  color: var(--ca-text-muted);
  font-size: 0.8125rem;
  line-height: 1.45;
}

.mega__footer {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--ca-border);
  font-size: var(--ca-fs-small);
}

.nav__scrim { display: none; }


/* ---- Header below 1024px: same DOM, off-canvas layout ---- */
@media (max-width: 1023px) {

  .nav__burger {
    display: inline-grid;
    place-items: center;
    width: 40px; height: 40px;
    border-radius: 9px;
    border: 1px solid var(--ca-border);
    color: var(--ca-text);
  }
  .nav__burger-box {
    display: grid;
    gap: 4px;
    width: 18px;
  }
  .nav__burger-bar {
    display: block;
    height: 1.5px;
    background: currentColor;
    border-radius: 2px;
    transition: transform 160ms var(--ca-ease), opacity 120ms var(--ca-ease);
  }
  .nav__burger[aria-expanded="true"] .nav__burger-bar:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
  .nav__burger[aria-expanded="true"] .nav__burger-bar:nth-child(2) { opacity: 0; }
  .nav__burger[aria-expanded="true"] .nav__burger-bar:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

  .nav {
    position: fixed;
    inset: var(--ca-header-h) 0 0 auto;
    width: min(420px, 100%);
    margin-left: 0;
    background: var(--ca-bg);
    border-left: 1px solid var(--ca-border);
    transform: translateX(100%);
    visibility: hidden;
    transition: transform 200ms var(--ca-ease), visibility 200ms;
    z-index: 45;
  }
  .admin-bar .nav { top: calc(var(--ca-header-h) + 32px); }
  @media (max-width: 782px) { .admin-bar .nav { top: calc(var(--ca-header-h) + 46px); } }

  .nav.is-open { transform: translateX(0); visibility: visible; }

  /* No script? The panel is simply always open and the burger is hidden,
     so every link stays reachable. */
  html:not(.has-js) .nav {
    position: static;
    width: auto;
    transform: none;
    visibility: visible;
    border-left: 0;
    border-top: 1px solid var(--ca-border);
    order: 10;
    flex-basis: 100%;
  }
  html:not(.has-js) .nav__burger { display: none; }
  html:not(.has-js) .site-header__inner { flex-wrap: wrap; height: auto; padding-block: 12px; }
  html:not(.has-js) .site-header { position: static; }

  .nav__scroll {
    height: 100%;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 12px var(--ca-gutter) 40px;
  }

  .nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .nav__link,
  .nav__trigger {
    width: 100%;
    justify-content: space-between;
    padding: 15px 4px;
    font-size: 1.0625rem;
    font-weight: 550;
    border-radius: 0;
    border-bottom: 1px solid var(--ca-border);
  }
  .nav__link:hover,
  .nav__trigger:hover { background: transparent; }

  /* Dropdown becomes an in-flow accordion. */
  .mega {
    position: static;
    width: auto;
    translate: none;
    transform: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    opacity: 1;
    visibility: visible;
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 200ms var(--ca-ease);
  }
  .nav__item.is-open > .mega { grid-template-rows: 1fr; }
  html:not(.has-js) .mega { grid-template-rows: 1fr; }

  /* No padding here. `overflow: hidden` clips to the PADDING box, not the
     content box, so a collapsed 0fr row with 24px of padding still leaks
     24px of the panel's first line into the closed accordion. The spacing
     moves onto the children instead, where it is inside the clip. */
  .mega__inner {
    overflow: hidden;
    min-height: 0;
    padding: 0;
  }
  .mega__lede { display: none; }
  .mega__cols { grid-template-columns: 1fr; gap: 4px; padding-block: 8px 16px; }
  .mega__link { padding: 10px; }
  .mega__link-desc { display: none; }
  .mega__footer { padding-bottom: 18px; }

  .nav__item--has-panel::after { display: none; }

  .nav__scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 44;
    background: rgb(14 17 22 / .4);
    opacity: 0;
    transition: opacity 200ms var(--ca-ease);
  }
  .nav__scrim.is-visible { opacity: 1; }
  .nav__scrim[hidden] { display: none; }
}

@media (max-width: 419px) {
  .logo__text { display: none; }
}


/* ======================================================================
   CODE PANEL + TABS
   ====================================================================== */

.code-panel {
  background: var(--ca-code-bg);
  border: 1px solid #232830;
  border-radius: var(--ca-radius-lg);
  overflow: hidden;
  box-shadow: var(--ca-shadow-md);
}

.code-panel__bar {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 8px 0;
  border-bottom: 1px solid #232830;
}

.code-panel__tabs { display: flex; gap: 2px; flex: 1 1 auto; min-width: 0; overflow-x: auto; }

.code-tab {
  padding: 8px 12px 10px;
  color: var(--ca-code-muted);
  font-family: var(--ca-font-mono);
  font-size: 0.8125rem;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color 120ms var(--ca-ease), border-color 120ms var(--ca-ease);
}
.code-tab:hover { color: var(--ca-code-text); }
.code-tab[aria-selected="true"] {
  color: var(--ca-code-text);
  border-bottom-color: var(--ca-code-key);
}
.code-tab:focus-visible { outline: 2px solid var(--ca-code-key); outline-offset: -2px; }

.code-copy {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 4px 6px;
  padding: 6px 10px;
  border-radius: 7px;
  color: var(--ca-code-muted);
  font-size: 0.75rem;
  border: 1px solid #232830;
  transition: color 120ms var(--ca-ease), background-color 120ms var(--ca-ease);
  flex-shrink: 0;
}
.code-copy:hover { color: var(--ca-code-text); background: #171B21; }
.code-copy:focus-visible { outline: 2px solid var(--ca-code-key); outline-offset: 2px; }

.code-panel__body { position: relative; }

.code-panel pre {
  margin: 0;
  padding: 20px;
  overflow-x: auto;
  color: var(--ca-code-text);
  font-size: var(--ca-fs-code);
  line-height: 1.6;
  tab-size: 2;
}
.code-panel pre:focus-visible { outline: 2px solid var(--ca-code-key); outline-offset: -2px; }

[role="tabpanel"][hidden] { display: none; }

/* No script, no tabs — so rather than leave two panels unreachable behind
   dead buttons, the strip is dropped and all three examples stack. Each one
   opens with its own request line, so they stay self-labelling. */
html:not(.has-js) .code-panel__bar { display: none; }
html:not(.has-js) .code-panel [role="tabpanel"][hidden] { display: block; }
html:not(.has-js) .code-panel [role="tabpanel"] + [role="tabpanel"] { border-top: 1px solid #232830; }

.ca-diagram text { font-family: var(--ca-font-sans); }

/* Pre-computed highlight classes. No runtime highlighter — the spec's JS
   budget would not survive one, and a highlighter that runs on load is a
   text-injected-by-JavaScript failure besides. */
.tok-key    { color: var(--ca-code-key); }
.tok-str    { color: var(--ca-code-string); }
.tok-num    { color: var(--ca-code-number); }
.tok-punct  { color: var(--ca-code-muted); }
.tok-method { color: var(--ca-code-text); font-weight: 600; }
.tok-path   { color: var(--ca-code-string); }
.tok-status { color: var(--ca-code-number); }
.tok-comment{ color: var(--ca-code-muted); }


/* ======================================================================
   FAQ ACCORDION
   ====================================================================== */

.faq {
  margin-top: 32px;
  border-top: 1px solid var(--ca-border);
}

.faq__item { border-bottom: 1px solid var(--ca-border); }

.faq__summary {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 4px;
  cursor: pointer;
  list-style: none;
}
.faq__summary::-webkit-details-marker { display: none; }
.faq__summary::after {
  content: "";
  flex-shrink: 0;
  margin-left: auto;
  width: 12px; height: 12px;
  border-right: 1.5px solid var(--ca-text-muted);
  border-bottom: 1.5px solid var(--ca-text-muted);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 160ms var(--ca-ease);
}
.faq__item[open] .faq__summary::after {
  transform: rotate(225deg) translate(-2px, -2px);
}
.faq__summary:hover .faq__q { color: var(--ca-accent); }

.faq__q {
  font-size: var(--ca-fs-h3);
  font-weight: 550;
  transition: color 120ms var(--ca-ease);
}

.faq__a {
  padding: 0 40px 22px 4px;
  color: var(--ca-text-muted);
  max-width: 72ch;
}


/* ======================================================================
   FOOTER
   ====================================================================== */

.site-footer {
  padding-block: clamp(48px, 5vw, 72px) 32px;
  background: var(--ca-bg-subtle);
  border-top: 1px solid var(--ca-border);
  font-size: var(--ca-fs-small);
}

.footer__cols {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 32px 24px;
}

.footer__summary { list-style: none; }
.footer__summary::-webkit-details-marker { display: none; }

.footer__heading {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ca-text);
}
.footer__chevron { display: none; }

.footer__list {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-top: 14px;
}
.footer__list a {
  color: var(--ca-text-muted);
  text-decoration: none;
  transition: color 120ms var(--ca-ease);
}
.footer__list a:hover { color: var(--ca-accent); text-decoration: underline; text-underline-offset: 2px; }

.footer__disclaimer {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--ca-border);
  color: var(--ca-text-muted);
  max-width: 78ch;
}

.footer__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
  margin-top: 24px;
}

.footer__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ca-text-muted);
}
.footer__brand .logo__mark { color: var(--ca-text-muted); }

.footer__legal { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.footer__legal a { color: var(--ca-text-muted); text-decoration: none; }
.footer__legal a:hover { color: var(--ca-accent); text-decoration: underline; text-underline-offset: 2px; }

.footer__social { display: flex; gap: 10px; margin-left: auto; }
.footer__social a {
  display: inline-grid;
  place-items: center;
  width: 34px; height: 34px;
  border-radius: 9px;
  color: var(--ca-text-muted);
  transition: color 120ms var(--ca-ease), background-color 120ms var(--ca-ease);
}
.footer__social a:hover { color: var(--ca-text); background: var(--ca-bg-inset); }

@media (max-width: 1023px) {
  .footer__cols { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 767px) {
  .footer__cols { grid-template-columns: 1fr; gap: 0; }
  .footer__col { border-bottom: 1px solid var(--ca-border); }
  .footer__col:first-child { border-top: 1px solid var(--ca-border); }
  .footer__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 2px;
    cursor: pointer;
  }
  .footer__chevron {
    display: block;
    color: var(--ca-text-muted);
    transition: transform 160ms var(--ca-ease);
  }
  .footer__col[open] .footer__chevron { transform: rotate(180deg); }
  .footer__list { margin-top: 0; padding-bottom: 18px; }
  .footer__social { margin-left: 0; }
}


/* ==========================================================================
   5. SECTIONS
   ========================================================================== */
/* ---- sections ---- */

/* ---- S2 · Hero ------------------------------------------------------- */
.s-hero {
  padding-block: clamp(40px, 5.5vw, 84px) var(--ca-section-y);
  /* The only gradient on the page, and it is a paint, not an asset — the
     code panel has to stay the LCP element. */
  background:
    radial-gradient(1100px 460px at 78% -8%, var(--ca-accent-soft), transparent 62%);
}

.s-hero__grid {
  display: grid;
  gap: clamp(32px, 4vw, 56px);
  align-items: center;
}

@media (min-width: 1024px) {
  .s-hero__grid { grid-template-columns: 46fr 54fr; }
}

.s-hero__eyebrow { margin-bottom: 14px; }

.hero__lede {
  max-width: 46ch;
  margin-top: 20px;
  font-size: var(--ca-fs-lede);
  line-height: 1.55;
  color: var(--ca-text-muted);
}

.s-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.hero__meta {
  margin-top: 20px;
  font-size: var(--ca-fs-small);
  color: var(--ca-text-muted);
}

.s-hero__code { min-width: 0; }

.s-hero__docs-link {
  margin-top: 16px;
  font-size: var(--ca-fs-small);
}


/* ---- S3 · Audience router ------------------------------------------- */
.s-audience__grid {
  display: grid;
  gap: 20px;
  margin-top: 36px;
}
@media (min-width: 768px) {
  .s-audience__grid { grid-template-columns: repeat(3, 1fr); }
}


/* ---- S4 · Capability grid -------------------------------------------- */
.s-capabilities__grid {
  display: grid;
  gap: 20px;
  margin-top: 36px;
}
@media (min-width: 640px) {
  .s-capabilities__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .s-capabilities__grid { grid-template-columns: repeat(3, 1fr); }
}


/* ---- S5 · Architecture ----------------------------------------------- */
.s-architecture__grid {
  display: grid;
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}
/* Grid items default to min-width:auto, so the track would stretch to the
   diagram's intrinsic 480px and push the page sideways on a 375px screen —
   width:100% on the SVG cannot win against a parent sized by its content. */
.s-architecture__grid > * { min-width: 0; }
@media (min-width: 1024px) {
  .s-architecture__grid { grid-template-columns: 47fr 53fr; }
  /* Diagram left on desktop; prose first in the DOM so mobile reads
     heading → first paragraph → diagram, as the spec asks. */
  .s-architecture__figure { order: -1; position: sticky; top: calc(var(--ca-header-h) + 32px); }
}

.s-architecture__figure {
  padding: 24px;
  background: var(--ca-bg);
  border: 1px solid var(--ca-border);
  border-radius: var(--ca-radius-lg);
}
.ca-section--subtle .s-architecture__figure { background: var(--ca-bg); }

.s-architecture__figure figcaption {
  margin-top: 14px;
  font-size: 0.8125rem;
  color: var(--ca-text-muted);
}

.ca-diagram { width: 100%; height: auto; color: var(--ca-text); }

.ca-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 24px;
  max-width: 68ch;
}
.ca-list li {
  position: relative;
  padding-left: 26px;
  color: var(--ca-text-muted);
}
.ca-list li::before {
  content: "";
  position: absolute;
  left: 2px; top: 0.62em;
  width: 7px; height: 7px;
  border-radius: 2px;
  background: var(--ca-accent);
}
.ca-list strong { color: var(--ca-text); font-weight: 600; }

.s-architecture__links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  margin-top: 28px;
  font-size: var(--ca-fs-small);
}


/* ---- S6 · Compliance -------------------------------------------------- */
.s-compliance__grid {
  display: grid;
  gap: 20px;
  margin-top: 36px;
}
@media (min-width: 768px) {
  .s-compliance__grid { grid-template-columns: repeat(3, 1fr); }
}

.stat {
  padding: 22px;
  background: var(--ca-bg);
  border: 1px solid var(--ca-border);
  border-radius: var(--ca-radius-lg);
}
.ca-section--subtle .stat { background: var(--ca-bg); }
.stat__label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--ca-fs-small);
  font-weight: 600;
  color: var(--ca-text);
}
.stat__label svg { width: 18px; height: 18px; color: var(--ca-accent); flex-shrink: 0; }
.stat p { margin-top: 8px; color: var(--ca-text-muted); font-size: var(--ca-fs-small); }

.s-compliance__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 28px;
  margin-top: 32px;
  padding: 20px 24px;
  background: var(--ca-accent-soft);
  border: 1px solid color-mix(in srgb, var(--ca-accent) 22%, transparent);
  border-radius: var(--ca-radius-lg);
}
.s-compliance__cta .ca-arrow-link { font-size: var(--ca-fs-body); }

.s-compliance__more {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-left: auto;
  font-size: var(--ca-fs-small);
}


/* ---- S7 · Integration steps ------------------------------------------ */
.s-steps__list {
  display: grid;
  gap: 20px;
  margin-top: 36px;
  counter-reset: ca-step;
}
@media (min-width: 768px) {
  .s-steps__list { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1200px) {
  .s-steps__list { grid-template-columns: repeat(4, 1fr); }
}

.step {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px;
  background: var(--ca-bg);
  border: 1px solid var(--ca-border);
  border-radius: var(--ca-radius-lg);
  counter-increment: ca-step;
}
.ca-section--subtle .step { background: var(--ca-bg); }
.step::before {
  content: counter(ca-step);
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  border-radius: 9px;
  background: var(--ca-accent-soft);
  color: var(--ca-accent);
  font-size: 0.875rem;
  font-weight: 640;
  font-variant-numeric: tabular-nums;
}
.step p { color: var(--ca-text-muted); font-size: var(--ca-fs-small); }
.step .ca-arrow-link { margin-top: auto; padding-top: 4px; font-size: var(--ca-fs-small); }

.s-steps__closing {
  margin-top: 28px;
  font-size: var(--ca-fs-small);
  color: var(--ca-text-muted);
}


/* ---- S8 · Solutions --------------------------------------------------- */
.s-solutions__grid {
  display: grid;
  gap: 20px;
  margin-top: 36px;
}
@media (min-width: 900px) {
  .s-solutions__grid { grid-template-columns: repeat(3, 1fr); }
}

.plan__positioning { color: var(--ca-text-muted); }
.plan__best {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--ca-border);
  font-size: var(--ca-fs-small);
}
.plan__best dt {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ca-text-muted);
}
.plan__best dd { margin: 4px 0 0; color: var(--ca-text); }

.s-solutions__compare {
  margin-top: 28px;
  font-size: var(--ca-fs-small);
}


/* ---- S9 · FAQ heading ------------------------------------------------- */
.s-faq__heading { max-width: 20ch; }


/* ---- S10 · Final CTA -------------------------------------------------- */
.s-cta__panel {
  display: grid;
  gap: clamp(28px, 4vw, 48px);
  padding: clamp(28px, 4vw, 48px);
  background: var(--ca-bg-subtle);
  border: 1px solid var(--ca-border);
  border-radius: var(--ca-radius-lg);
}
@media (min-width: 960px) {
  .s-cta__panel { grid-template-columns: 1fr 1fr; align-items: start; }
}

.s-cta__lede {
  margin-top: 16px;
  max-width: 46ch;
  font-size: var(--ca-fs-lede);
  color: var(--ca-text-muted);
}
.s-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.ca-form { display: flex; flex-direction: column; gap: 16px; }

.field { display: flex; flex-direction: column; gap: 6px; }
.field__label {
  font-size: var(--ca-fs-small);
  font-weight: 550;
}
.field__req { color: var(--ca-text-muted); font-weight: 400; }

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 11px 14px;
  background: var(--ca-bg);
  color: var(--ca-text);
  border: 1px solid var(--ca-border-strong);
  border-radius: var(--ca-radius);
  font-size: var(--ca-fs-small);
  transition: border-color 120ms var(--ca-ease), box-shadow 120ms var(--ca-ease);
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--ca-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ca-accent) 18%, transparent);
}
.field textarea { resize: vertical; min-height: 88px; }

.ca-form__privacy {
  font-size: 0.8125rem;
  color: var(--ca-text-muted);
}

/* Honeypot. Off-screen rather than display:none — a bot reading computed
   styles skips hidden fields, but happily fills one it can "see". */
.ca-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
}


/* ==========================================================================
   5b. COMPONENTS ADDED BY /sweepstakes-casino-api/
   --------------------------------------------------------------------------
   No new colours, fonts or button variants — everything below is built from
   the existing tokens.
   ========================================================================== */

/* ---- Breadcrumb ------------------------------------------------------- */

.breadcrumb {
  padding-top: 4px;
  /* The eyebrow that usually follows sits tight to the H1 by design, so
     without this the trail and the eyebrow read as one crowded line. */
  margin-bottom: 18px;
  font-size: var(--ca-fs-small);
  color: var(--ca-text-muted);
}

.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 8px;
}

/* Separator is a pseudo-element, so it is decoration rather than content: a
   screen reader announces "Home, Product, Sweepstakes Casino API", not a
   string of slashes. */
.breadcrumb li + li::before {
  content: "/";
  margin-right: 8px;
  color: var(--ca-border-strong);
}

.breadcrumb li { display: flex; align-items: center; }

.breadcrumb a {
  color: var(--ca-text-muted);
  text-decoration: none;
}
.breadcrumb a:hover {
  color: var(--ca-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.breadcrumb [aria-current="page"] { color: var(--ca-text); }


/* ---- Data table ------------------------------------------------------- */

/* The scroll container, not the table, owns the border and the radius —
   otherwise the table's corners poke out of the rounded box when it scrolls. */
.table-scroll {
  position: relative;
  margin-top: 32px;
  overflow-x: auto;
  border: 1px solid var(--ca-border);
  border-radius: var(--ca-radius-lg);
  background: var(--ca-bg);
  /* Fades the right edge while there is more table to the right, and clears
     itself at the end of the scroll. Purely cosmetic: the container is
     keyboard-scrollable and the content is never hidden. */
  mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent 100%);
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent 100%);
}
.table-scroll.is-scroll-end,
.table-scroll.is-not-scrollable {
  mask-image: none;
  -webkit-mask-image: none;
}
.ca-section--subtle .table-scroll { background: var(--ca-bg); }

.ca-table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font-size: var(--ca-fs-small);
  text-align: left;
}

.ca-table th,
.ca-table td {
  padding: 12px 16px;
  vertical-align: top;
  border-bottom: 1px solid var(--ca-border);
}

.ca-table thead th {
  background: var(--ca-bg-subtle);
  color: var(--ca-text);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  white-space: nowrap;
}

.ca-table tbody tr:last-child th,
.ca-table tbody tr:last-child td { border-bottom: 0; }

.ca-table tbody tr:nth-child(even) td,
.ca-table tbody tr:nth-child(even) th { background: var(--ca-bg-subtle); }

.ca-table tbody th {
  font-weight: 550;
  color: var(--ca-text);
  white-space: nowrap;
}

.ca-table td { color: var(--ca-text-muted); }
.ca-table a { color: var(--ca-accent); }


/* ---- Definition table (S9) -------------------------------------------- */

.def-table {
  width: 100%;
  margin-top: 32px;
  border-collapse: collapse;
  text-align: left;
}

.def-table th,
.def-table td {
  padding: 14px 0;
  vertical-align: top;
  border-bottom: 1px solid var(--ca-border);
}

.def-table th {
  width: 34%;
  padding-right: 24px;
  color: var(--ca-text-muted);
  font-size: var(--ca-fs-small);
  font-weight: 550;
  white-space: nowrap;
}

.def-table td { color: var(--ca-text); font-size: var(--ca-fs-small); }
.def-table tr:last-child th,
.def-table tr:last-child td { border-bottom: 0; }

@media (max-width: 599px) {
  .def-table th, .def-table td { display: block; width: auto; white-space: normal; }
  .def-table th { padding-bottom: 2px; border-bottom: 0; }
  .def-table td { padding-top: 0; }
}


/* ---- Callout ---------------------------------------------------------- */

/* Emphasis, not an alert — accent, never a warning colour. */
.callout {
  margin-top: 28px;
  padding: 20px 22px;
  background: var(--ca-accent-soft);
  border-left: 3px solid var(--ca-accent);
  border-radius: var(--ca-radius);
  max-width: 72ch;
}

.callout__title {
  margin-bottom: 6px;
  font-weight: 620;
  color: var(--ca-text);
}

.callout p { color: var(--ca-text-muted); }


/* ---- Endpoint chip ---------------------------------------------------- */

.endpoint {
  display: inline-block;
  padding: 2px 6px;
  background: var(--ca-bg-inset);
  border-radius: 6px;
  font-family: var(--ca-font-mono);
  font-size: 0.9em;
  white-space: nowrap;
}
.ca-table .endpoint { white-space: nowrap; }


/* ---- Two-column comparison (S11) -------------------------------------- */

.compare {
  display: grid;
  gap: 20px;
  margin-top: 32px;
}
@media (min-width: 768px) {
  .compare { grid-template-columns: 1fr 1fr; }
}

.compare__card {
  display: flex;
  flex-direction: column;
  padding: 26px;
  background: var(--ca-bg);
  border: 1px solid var(--ca-border);
  border-radius: var(--ca-radius-lg);
  box-shadow: var(--ca-shadow-sm);
}
.ca-section--subtle .compare__card { background: var(--ca-bg); }

.compare__card--current {
  border-color: var(--ca-accent);
  background: var(--ca-accent-soft);
}

.compare__head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

/* "You are here" reads as a state, not as a disabled link — a dot plus a
   label, no underline, no link colour, nothing to click. */
.compare__here {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  padding-top: 16px;
  color: var(--ca-text-muted);
  font-size: var(--ca-fs-small);
  font-weight: 550;
}
.compare__here::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--ca-accent);
}

.compare__link { margin-top: auto; padding-top: 16px; font-size: var(--ca-fs-small); }

.compare__rows { margin-top: 14px; }
.compare__rows dt {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ca-text-muted);
}
.compare__rows dd {
  margin: 4px 0 14px;
  color: var(--ca-text);
  font-size: var(--ca-fs-small);
}


/* ---- Two-column feature lists (S7, S10) -------------------------------- */

.split {
  display: grid;
  gap: 24px 40px;
  margin-top: 32px;
}
@media (min-width: 768px) {
  .split { grid-template-columns: 1fr 1fr; }
}

.split__heading {
  margin-bottom: 10px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ca-text-muted);
}


/* ---- Sequence diagram -------------------------------------------------- */

.ca-figure {
  margin-top: 32px;
  padding: 24px;
  background: var(--ca-bg);
  border: 1px solid var(--ca-border);
  border-radius: var(--ca-radius-lg);
}
.ca-section--subtle .ca-figure { background: var(--ca-bg); }

.ca-figure figcaption {
  margin-top: 14px;
  font-size: 0.8125rem;
  color: var(--ca-text-muted);
}

/* Two diagrams, both in the DOM, swapped by width. The wide one is unreadable
   under about 600px and the narrow one wastes space above it; a single
   scaled SVG would be legible at neither end. */
.ca-diagram--wide { display: none; }
.ca-diagram--narrow { display: block; }
@media (min-width: 600px) {
  .ca-diagram--wide { display: block; }
  .ca-diagram--narrow { display: none; }
}


/* ==========================================================================
   5c. COMPONENTS ADDED BY /demo/
   ========================================================================== */

/* ---- Form card --------------------------------------------------------- */

/* More elevated than a content card: on this page the form is the focal
   object, not one item among several. */
.form-card {
  padding: clamp(24px, 3vw, 32px);
  background: var(--ca-bg);
  border: 1px solid var(--ca-border);
  border-radius: var(--ca-radius-lg);
  box-shadow: var(--ca-shadow-md);
}
.ca-section--subtle .form-card { background: var(--ca-bg); }

.form-card__heading { font-size: var(--ca-fs-h3); }

.form-card__intro {
  margin-top: 8px;
  color: var(--ca-text-muted);
  font-size: var(--ca-fs-small);
}

.form-card .ca-form { margin-top: 20px; }


/* ---- Fields ------------------------------------------------------------ */

.ca-form__legend {
  font-size: 0.8125rem;
  color: var(--ca-text-muted);
}

.field__star { color: var(--ca-accent); }

.field__hint {
  margin-bottom: 2px;
  color: var(--ca-text-muted);
  font-size: 0.8125rem;
  line-height: 1.45;
}

/* 16px is not a style choice: anything smaller makes iOS Safari zoom the
   viewport on focus, which on a form this long is genuinely disorienting. */
.field input,
.field select,
.field textarea {
  min-height: 44px;
  padding: 12px 14px;
  font-size: 1rem;
}

.field--error input,
.field--error select,
.field--error textarea { border-color: var(--ca-stop); }

.field__error {
  margin-top: 4px;
  color: var(--ca-stop);
  font-size: 0.8125rem;
  font-weight: 500;
}

/* Native select with a background chevron. No JS-replaced dropdown: the
   native control is accessible for free, works on every platform, and costs
   nothing in the JS budget. */
.field select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 40px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%235A6472' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}
:root[data-theme="dark"] .field select {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%2398A2B3' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .field select {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%2398A2B3' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  }
}


/* ---- Error summary ------------------------------------------------------ */

.ca-form__summary {
  padding: 16px 18px;
  background: color-mix(in srgb, var(--ca-stop) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--ca-stop) 34%, transparent);
  border-radius: var(--ca-radius);
}
.ca-form__summary:focus-visible { outline: 2px solid var(--ca-stop); outline-offset: 2px; }

.ca-form__summary-title { font-weight: 600; font-size: var(--ca-fs-small); }

.ca-form__summary ul {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: var(--ca-fs-small);
}
.ca-form__summary a {
  color: var(--ca-text);
  text-decoration: underline;
  text-underline-offset: 2px;
}


/* ---- The calm route (S3) ------------------------------------------------ */

/* Deliberately not accent-coloured. The demo form is this page's accent
   action; the sandbox alternative is the quiet one sitting beside it, and
   giving both the same emphasis would make neither read as the default. */
.route-alt {
  margin-top: 28px;
  padding: 22px 24px;
  background: var(--ca-bg-inset);
  border-left: 3px solid var(--ca-border-strong);
  border-radius: var(--ca-radius);
}
.route-alt h2 { font-size: var(--ca-fs-h3); }
.route-alt p { margin-top: 10px; color: var(--ca-text-muted); }
.route-alt .btn { margin-top: 18px; }

.route-alt__meta {
  margin-top: 12px;
  font-size: 0.8125rem;
  color: var(--ca-text-muted);
}


/* ---- Inert header CTA --------------------------------------------------- */

/* A greyed-out primary button reads as "broken". A quiet label reads as
   "you are already here". */
.nav__cta--current {
  padding: 9px 4px;
  color: var(--ca-text-muted);
  font-size: var(--ca-fs-small);
  font-weight: 550;
  white-space: nowrap;
  cursor: default;
}


/* ---- Demo page layout --------------------------------------------------- */

.s-demo__grid {
  display: grid;
  gap: clamp(28px, 4vw, 48px);
  align-items: start;
}
.s-demo__grid > * { min-width: 0; }

@media (min-width: 1024px) {
  .s-demo__grid { grid-template-columns: 52fr 48fr; }
}

.s-demo__copy > .hero__lede { max-width: 62ch; }

.s-demo__grid-2x2 {
  display: grid;
  gap: 20px;
  margin-top: 32px;
}
@media (min-width: 768px) {
  .s-demo__grid-2x2 { grid-template-columns: 1fr 1fr; }
}

.ca-prose--narrow > p { max-width: 62ch; }

.link-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 24px;
  max-width: 62ch;
}
.link-list li { color: var(--ca-text-muted); }
.link-list a { font-weight: 550; }


/* ---- Form notices ------------------------------------------------------ */

.ca-form__notice {
  padding: 12px 16px;
  border-radius: var(--ca-radius);
  font-size: var(--ca-fs-small);
}
.ca-form__notice--ok {
  background: var(--ca-accent-soft);
  border: 1px solid color-mix(in srgb, var(--ca-accent) 24%, transparent);
  color: var(--ca-text);
}
.ca-form__notice--error {
  background: color-mix(in srgb, var(--ca-stop) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--ca-stop) 32%, transparent);
  color: var(--ca-text);
}


/* ---- Current-page nav items -------------------------------------------- */

.nav__link--current,
.mega__link--current {
  cursor: default;
  color: var(--ca-text-muted);
}
.mega__link--current { background: var(--ca-bg-subtle); }
.mega__link--current .mega__link-label { color: var(--ca-text-muted); }
.footer__current { color: var(--ca-text-muted); }


/* ==========================================================================
   6. UTILITIES
   ========================================================================== */
/* ---- utilities ---- */

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

.ca-stack-sm > * + * { margin-top: 12px; }
.ca-stack > * + *    { margin-top: 20px; }

.ca-body-lock { overflow: hidden; }

/* One scroll-reveal, and only where it cannot cost layout: opacity and a
   transform, never height or margin. Disabled wholesale under
   prefers-reduced-motion by the reset layer. */
@media (prefers-reduced-motion: no-preference) {
  .ca-reveal {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 260ms var(--ca-ease), transform 260ms var(--ca-ease);
  }
  .ca-reveal.is-visible { opacity: 1; transform: none; }
  html:not(.has-js) .ca-reveal { opacity: 1; transform: none; }
}


/* ==========================================================================
   7. WORDPRESS BRIDGE
   --------------------------------------------------------------------------
   Two jobs, both about coexisting with Twenty Twenty-Five rather than
   fighting it rule by rule.

   7a hands the theme OUR colours through ITS OWN variables. The theme paints
   body text, links, headings and block backgrounds from
   --wp--preset--color--contrast and --wp--preset--color--base. Redefining
   those two per theme means every block on the site — including ones this
   stylesheet has never heard of — follows the light/dark switch, instead of
   us chasing each theme rule with a more specific one forever.

   7b hands the width back on pages built from our sections.
   ========================================================================== */

/* ---- 7a · colour variables ------------------------------------------- */

:root {
  --wp--preset--color--base: #FFFFFF;
  --wp--preset--color--contrast: #0E1116;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --wp--preset--color--base: #0B0D11;
    --wp--preset--color--contrast: #E9ECF1;
  }
}

:root[data-theme="dark"] {
  --wp--preset--color--base: #0B0D11;
  --wp--preset--color--contrast: #E9ECF1;
}

/* The theme sets `a { color: currentcolor }`, so links would take whatever
   their container inherits. Our prose and nav links name their own colour;
   these two make sure the rest still land somewhere readable.
   `:not(.btn)` matters — without it these outrank `.btn--primary` (0,1,1 vs
   0,1,0) and the header's Book-a-demo button loses its white label. */
.site-header a:not(.btn),
.site-footer a:not(.btn) { color: inherit; }

.ca-section a:not(.btn):not(.ca-card__link) { color: var(--ca-accent); }


/* ---- 7b · layout ------------------------------------------------------ */

/* Hand the width back on pages built from our sections. */
.ca-page .entry-content,
.ca-page .wp-block-post-content {
  max-width: none;
}

.ca-page .entry-content > *,
.ca-page .wp-block-post-content > * {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

/* The theme's global padding would double up with each section's own
   gutters. Zeroing the custom properties is enough — `has-global-padding`
   reads them rather than hard-coding a value. */
.ca-page .wp-site-blocks,
.ca-page .wp-site-blocks > main,
.ca-page .entry-content,
.ca-page .wp-block-post-content {
  --wp--style--root--padding-left: 0px;
  --wp--style--root--padding-right: 0px;
  padding-left: 0;
  padding-right: 0;
}

/* Header and footer are template parts, present on every page rather than
   only .ca-page ones, so they break out on their own. Measuring against the
   viewport is safe because html is overflow-x: clip. */
.site-header,
.site-footer {
  width: auto;
  max-width: none;
  margin-inline: calc(50% - 50vw);
  padding-inline: 0;
}

/* A template part wrapped in a constrained Group would otherwise clamp our
   header row back to the content width. */
.wp-block-template-part:has(> .site-header),
.wp-block-template-part:has(> .site-footer) {
  max-width: none;
}

/* position: sticky dies inside an ancestor that scrolls or clips. */
.wp-site-blocks { overflow: visible; }


/* ---- 7c · API-page width guards --------------------------------------- */

/* Unlayered, like everything else in section 7. The table and the diagram are
   this page's two width-sensitive elements: the theme's constrained-layout
   rule clamps any descendant it can reach, and both of these need to fill
   their section and then scroll inside themselves. Belt and braces alongside
   the `.entry-content > *` rules above, because a future edit could nest
   either one inside a constrained Group. */
.ca-page .table-scroll,
.ca-page .ca-figure,
.ca-page .ca-table,
.ca-page .def-table {
  max-width: none;
}

/* The theme styles bare <table> elements. Ours are not block tables and must
   not inherit that treatment. */
.ca-page .ca-table,
.ca-page .def-table {
  width: 100%;
  border-collapse: collapse;
}