.an-site {
  --insyt-tokens-version: "4.3.0";

  /* 1. Primitives: Colour System 2.3, section 6, exactly */
  --pink: #E20575;
  --purple: #9B41FF;
  --blue: #046CFE;
  --cyan: #20C9F4;
  --void: #0B0C1A;
  --mist: #ECEFF3;
  --snow: #FCFDFF;
  --ink: #17151F;
  --white: #FFF;
  --gradient-light: linear-gradient(100deg in oklch, #E20575, #9B41FF 50%, #046CFE);
  --gradient-dark: linear-gradient(100deg in oklch, #FF1186, #B267FF 50%, #19D2FF);

  /* Approved neutrals (brand kit v3 and insyt.se), not new colours */
  --ink-muted: #5E5A6E;
  --on-void-muted: #B8B5C9;
  --on-void-caption: #8E8AA8;
  --pink-on-void-text: #FF1186;   /* 4.3.0: the 2.3 Void gradient's pink stop, 5.2:1 on Void; eyebrow words only (kit Amendment A2) */

  /* 2. Semantic colour, light scope (Mist page, Snow cards) */
  --surface-page: var(--mist);
  --surface-raised: var(--snow);
  --surface-sunken: var(--mist);        /* pills and wells inside a Snow card */
  --surface-inverse: var(--void);
  --surface-hover: rgba(23, 21, 31, 0.05);
  --text-primary: var(--ink);
  --text-secondary: var(--ink-muted);
  --text-on-action: var(--white);
  --text-link: var(--ink);
  --text-disabled: var(--ink-muted);
  --border-subtle: rgba(23, 21, 31, 0.12);   /* decorative card and table hairline */
  --border-control: var(--ink-muted);        /* form controls: 6.5:1 on Snow */
  --border-invalid: var(--pink);
  --action: var(--pink);
  --structure: var(--purple);
  --third: var(--blue);                      /* light only */
  --focus-ring: var(--ink);                  /* 4.1.0: Ink on light (15.6:1 on Mist), PM recommendation 3 */
  --nav-current: var(--pink);
  --key-gradient: var(--gradient-light);
  --tab: var(--pink);
  --eyebrow-text: var(--text-primary);   /* light grounds: Ink words with the Pink tab (Pink text is 4.04:1 on Mist) */
  --eyebrow-tab-display: block;

  /* Charts: one finding, grey context (v3 rule). Context greys are existing approved neutrals. */
  --chart-finding: var(--pink);
  --chart-context: var(--ink-muted);         /* 5.8:1 on Mist, 6.5:1 on Snow */

  /* 3. Elevation */
  --shadow-0: none;
  --shadow-1: 0 1px 2px rgba(11, 12, 26, 0.04), 0 8px 24px rgba(11, 12, 26, 0.06);
  --shadow-2: 0 2px 4px rgba(11, 12, 26, 0.06), 0 16px 40px rgba(11, 12, 26, 0.12);

  /* 4. Typography */
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-title: "Lora", Georgia, "Times New Roman", serif;
  --font-code: Consolas, "Cascadia Mono", Menlo, monospace;
  --type-h1: clamp(38px, 6vw, 62px);
  --type-h1-phone: clamp(30px, 8.6vw, 44px);
  --type-h2: clamp(26px, 4.2vw, 34px);
  --type-card-title: 24px;
  --type-item-title: 20px;
  --type-lede: 18px;
  --type-body: 16px;
  --type-small: 14px;
  --type-caption: 13px;
  --type-label: 12px;
  --type-eyebrow: 12.5px;
  --tracking-eyebrow: 2.5px;
  --tracking-h1: -0.5px;
  --leading-h1: 1.08;
  --leading-title: 1.2;
  --leading-body: 1.6;
  --measure: 72ch;              /* plan 11 (Mia, 26th October 2026): readable lines inside the wider container */

  /* 5. Space, layout and shape */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --wrap: 1280px;               /* plan 11: site-wide container, header to footer */
  --gutter: 32px;               /* 1024px and up; 24px on tablet, 16px on phones (below) */
  --grid-gap: 20px;
  --grid-card-min: 260px;
  --grid-dest-min: 280px;
  --section-top: 44px;
  --section-bottom: 56px;
  --card-pad-y: 20px;
  --card-pad-x: 22px;
  --radius: 14px;
  --radius-control: 8px;
  --radius-focus: 4px;
  --radius-pill: 999px;
  --header-min: 60px;           /* plan 11 (Mia, 26th October 2026): compact bar; 56px on phones */
  --nav-control-height: 38px;
  --explore-h: 48px;            /* plan 11: open Explore panel height; site-nav.js sets the measured value */   /* plan 11: Get started and the light-background switch in the bar */
  --button-height: 48px;
  --control-height: 48px;
  --target-min: 44px;
  --focus-width: 3px;
  --focus-offset: 2px;
  --wordmark-height: 34px;      /* plan 11: scaled with the bar (was 44px at 76px) */
}

@media (max-width: 1023px) {
  .an-site { --gutter: 24px; }
}
@media (max-width: 759px) {
  .an-site { --header-min: 56px; --wordmark-height: 30px; }
}
@media (max-width: 599px) {
  .an-site { --gutter: 16px; }
}

/* Void scope: the default page, plus the header, footer and any dark band */
.on-void {
  --surface-page: var(--void);
  --surface-sunken: var(--void);
  --surface-hover: rgba(255, 255, 255, 0.08);
  --text-primary: var(--white);
  --text-secondary: var(--on-void-muted);
  --text-caption: var(--on-void-caption);
  --text-link: var(--white);
  --text-disabled: var(--on-void-muted);
  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-control: var(--on-void-muted);
  --third: var(--cyan);                      /* Void only */
  --focus-ring: var(--cyan);
  --key-gradient: var(--gradient-dark);
  --chart-context: var(--on-void-caption);   /* 4.1.0: replaces the v3 context grey (2.2:1); Caption is 5.9:1 on Void */
  --eyebrow-text: var(--pink-on-void-text);   /* Void: pink words, no tab (Mia, 10th October 2026) */
  --eyebrow-tab-display: none;
}

.site-header { background: var(--surface-page); color: var(--text-primary); }
.site-header .an-wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4) var(--space-6); min-height: var(--header-min); padding-block: 0; flex-wrap: wrap; }
.brand { display: inline-flex; align-items: center; }
.brand img { display: block; height: var(--wordmark-height); width: auto; }
.site-header { position: relative; }
.site-header .an-wrap { position: relative; }
.site-nav { margin-left: auto; }
.nav-list { list-style: none; display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-1); margin: 0; padding: 0; }
.nav-link { position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: var(--target-min); padding: 10px 12px; border: 0; border-radius: var(--radius-control); background: transparent; color: var(--text-secondary); font: 400 var(--type-body)/1.2 var(--font-body); text-decoration: none; cursor: pointer; transition: color 0.2s ease; }
.nav-link[aria-current="page"]::before, .nav-link.is-current::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; border-radius: 2px; background: var(--nav-current); }
.nav-label { display: inline-flex; flex-direction: column; align-items: center; }
.nav-label::after { content: attr(data-text); height: 0; overflow: hidden; visibility: hidden; font-weight: 700; pointer-events: none; user-select: none; }
.nav-link:hover, .nav-link:focus-visible, .nav-link[aria-current="page"], .nav-link.is-current, .nav-explore-button[aria-expanded="true"] { color: var(--text-primary); }
.nav-link:hover .nav-label, .nav-link:focus-visible .nav-label, .nav-link[aria-current="page"] .nav-label, .nav-link.is-current .nav-label, .nav-explore-button[aria-expanded="true"] .nav-label { font-weight: 700; }
/* The chevron is a fixed 12px box that only rotates (about its own centre), so hover and open never move the bar.
   The open state changes no padding, border or width. */
.nav-chevron { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 12px; width: 12px; height: 12px; transform-origin: 50% 50%; transition: transform 0.2s ease; }
.nav-chevron svg { display: block; width: 12px; height: 12px; }
.nav-explore-button { font-family: var(--font-body); }
.nav-explore-button[aria-expanded="true"] .nav-chevron { transform: rotate(180deg); }

/* Explore panel (laptop and tablet): spans the content width under the bar */
.explore-menu { position: absolute; top: calc(100% + var(--space-1)); left: var(--gutter); right: var(--gutter); z-index: 30; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-1); margin: 0; padding: 6px; list-style: none; background: linear-gradient(var(--surface-hover), var(--surface-hover)), var(--void); border: 1px solid var(--border-subtle); border-radius: var(--radius); box-shadow: var(--shadow-2); opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s linear 0.15s; }
.explore-menu > li { flex: 1 1 auto; min-width: 0; }
.explore-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -28px; height: 28px; }
.nav-explore.is-open .explore-menu,
.site-nav:not(.nav-ready) .nav-explore:hover .explore-menu,
.site-nav:not(.nav-ready) .nav-explore:focus-within .explore-menu { opacity: 1; visibility: visible; transform: none; transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s; }
.explore-item { display: flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 34px; padding: 6px var(--space-2); border-radius: var(--radius-control); color: var(--text-secondary); font: 400 var(--type-body)/1.2 var(--font-body); text-decoration: none; white-space: nowrap; transition: background-color 0.15s ease, color 0.15s ease; }
.nav-icon { flex: none; color: var(--pink-on-void-text); }
.explore-item:hover, .explore-item:focus-visible { background: var(--surface-hover); color: var(--text-primary); }
.explore-item:hover .nav-label, .explore-item:focus-visible .nav-label, .explore-item[aria-current="page"] .nav-label { font-weight: 700; }
.explore-item[aria-current="page"] { color: var(--text-primary); box-shadow: inset 0 -3px 0 var(--nav-current); }
.explore-item:focus-visible { outline-offset: -3px; }

/* Laptop and tablet: the open panel is a second header row. The header grows by the panel's height (measured by
   site-nav.js into --explore-h) plus a 12px gap, so the page moves down instead of sitting under the panel.
   The growth animates unless reduced motion is asked for (the global rule makes it instant). */
@media (min-width: 760px) {
  .site-header { transition: padding-bottom 0.2s ease; }
  .site-header.explore-open { padding-bottom: calc(var(--explore-h) + var(--space-1) + var(--space-3)); }
}

/* Nav buttons: no arrows. Pink pill: a pink to purple gradient slides in on hover. Outline: a subtle fill. */
.nav-cta { margin-left: var(--space-2); }
.button.button-nav { min-height: var(--nav-control-height); padding: 8px 18px; border-radius: var(--radius-pill); white-space: nowrap; background-color: var(--pink); background-image: linear-gradient(100deg in oklch, var(--pink) 0%, var(--pink) 50%, var(--purple) 100%); background-size: 200% 100%; background-position: 0 0; transition: background-position 0.35s ease; }
.button.button-nav:hover, .button.button-nav:focus-visible { background-position: 100% 0; filter: none; }
.button.button-nav:active { filter: brightness(0.94); }
.nav-menu-button { display: none; align-items: center; gap: var(--space-2); min-height: var(--target-min); padding: var(--space-2) var(--space-3); border: 1px solid var(--border-control); border-radius: var(--radius-control); background: transparent; color: var(--text-primary); font: 600 var(--type-small)/1.2 var(--font-body); cursor: pointer; transition: background-color 0.2s ease; }
.nav-menu-button:hover, .nav-menu-button[aria-expanded="true"] { background: var(--surface-hover); }
.nav-menu-button[hidden] { display: none; }
/* Light/dark switch: icon only, a rounded square the height of the bar's buttons; 44px on phones. */
.site-header .theme-toggle { display: inline-flex; align-items: center; justify-content: center; flex: none; width: var(--nav-control-height); min-height: var(--nav-control-height); height: var(--nav-control-height); padding: 0; margin-left: calc(var(--space-2) - var(--space-6)); }
.theme-icon { display: block; flex: none; }
.theme-icon-moon { display: none; }
:root[data-theme="light"] .theme-icon-sun { display: none; }
:root[data-theme="light"] .theme-icon-moon { display: block; }
.site-header .theme-toggle[hidden] { display: none; }

/* Tablet: tighter spacing, and the Explore panel sets its seven items in two even, centred rows. */
@media (min-width: 760px) and (max-width: 1023px) {
  .site-header .an-wrap { gap: var(--space-4); }
  .site-header .theme-toggle { margin-left: calc(var(--space-2) - var(--space-4)); }
  .nav-list { gap: 0; }
  .nav-link { padding-inline: var(--space-2); }
  .button.button-nav { padding-inline: var(--space-4); }
  .explore-menu > li { flex: 0 0 calc((100% - 3 * var(--space-1)) / 4); }
}

/* Phone: a menu button opens a full-width panel with the same items in the same order; Explore expands inline as
   a list. Without script the list simply wraps. */
@media (max-width: 759px) {
  .site-nav.nav-ready .nav-menu-button:not([hidden]) { display: inline-flex; }
  .site-nav.nav-ready .nav-list { display: none; position: absolute; left: 0; right: 0; top: 100%; z-index: 30; flex-direction: column; align-items: stretch; flex-wrap: nowrap; gap: 2px; padding: var(--space-3) var(--gutter) var(--space-5); background: var(--surface-page); border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); box-shadow: var(--shadow-2); max-height: calc(100vh - var(--header-min)); overflow-y: auto; }
  .site-nav.nav-ready.is-open .nav-list { display: flex; }
  .site-nav.nav-ready .nav-link { display: flex; width: 100%; justify-content: flex-start; }
  .site-nav.nav-ready .nav-link::before { right: auto; width: 48px; }
  .site-nav.nav-ready .nav-label { align-items: flex-start; }
  .site-nav.nav-ready .nav-explore-button { justify-content: space-between; }
  .site-nav.nav-ready .explore-menu { position: static; display: none; margin: 2px 0 var(--space-2); padding: var(--space-1) 0 var(--space-1) var(--space-3); background: transparent; border: 0; border-left: 1px solid var(--border-subtle); border-radius: 0; box-shadow: none; opacity: 1; visibility: visible; transform: none; transition: none; }
  .site-nav.nav-ready .explore-menu::before { display: none; }
  .site-nav.nav-ready .nav-explore.is-open .explore-menu { display: grid; justify-content: stretch; }
  .site-nav.nav-ready .explore-item { justify-content: flex-start; gap: var(--space-3); min-height: var(--target-min); padding: 10px var(--space-3); }
  .site-nav.nav-ready .explore-item .nav-label { align-items: flex-start; }
  .site-nav.nav-ready .explore-item[aria-current="page"] { box-shadow: inset 3px 0 0 var(--nav-current); }
  .site-nav.nav-ready .nav-cta { margin: var(--space-3) 0 0; }
  .site-nav.nav-ready .button-nav { width: 100%; min-height: var(--target-min); }
  .site-header .theme-toggle { width: var(--target-min); height: var(--target-min); min-height: var(--target-min); margin-left: calc(var(--space-2) - var(--space-6)); }
}
/* Light-background toggle (Void is the default; data-theme="light" is set only by the viewer) */
.theme-toggle { background: transparent; color: var(--text-link); border: 1px solid var(--border-control); border-radius: var(--radius-control); min-height: var(--target-min); padding: var(--space-2) var(--space-3); font: 600 var(--type-small)/1.2 var(--font-body); cursor: pointer; transition: background-color 0.2s ease; }
.theme-toggle:hover { background: var(--surface-hover); }