/* Insyt design tokens, version 4.2.0 (Brand Kit v4.1 APPROVED 10th October 2026; Void default by Mia's decision,
   10th October 2026). Primitives are Colour System 2.3 exactly. Components use the semantic tokens only.
   The page is Void by default. The light (Mist) ground applies only when the viewer turns it on, which sets
   data-theme="light" on the root element. :root holds the light values; the Void scope redefines the same names;
   every Snow card restores the light values (a light island, 2.3 rule 7).
   Do not add colours here without Mia's decision. */

:root {
  --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: 68ch;

  /* 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: 1088px;
  --gutter: 28px;
  --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: 76px;
  --button-height: 48px;
  --control-height: 48px;
  --target-min: 44px;
  --focus-width: 3px;
  --focus-offset: 2px;
  --wordmark-height: 44px;
}

@media (max-width: 520px) {
  :root { --gutter: 20px; --wordmark-height: 36px; }
}

/* Void scope: the default page, plus the header, footer and any dark band */
:root:not([data-theme="light"]),
.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;
}

/* A Snow card on Void is a light island (2.3 rule 7). Every .card inside .on-void restores the light tokens
   automatically (4.1.1), so dark text and light-ground controls never depend on an extra class. */
.surface-light,
.on-void .card,
:root:not([data-theme="light"]) .card,
.table-scroll {
  --surface-page: var(--mist);
  --surface-sunken: var(--mist);
  --surface-hover: rgba(23, 21, 31, 0.05);
  --text-primary: var(--ink);
  --text-secondary: var(--ink-muted);
  --text-link: var(--ink);
  --text-disabled: var(--ink-muted);
  --border-subtle: rgba(23, 21, 31, 0.12);
  --border-control: var(--ink-muted);
  --third: var(--blue);
  --focus-ring: var(--ink);
  --key-gradient: var(--gradient-light);
  --eyebrow-text: var(--text-primary);
  --eyebrow-tab-display: block;
  --chart-context: var(--ink-muted);
}

.hbg{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:48px;padding:0 22px;border-radius:14px;border:2px solid var(--ghb);background:var(--ghbg);color:var(--ghtx);font:600 16px/1 Inter,system-ui,sans-serif;white-space:nowrap;cursor:pointer}
.dn{max-width:1200px;margin:0 auto;padding:var(--sg) 24px 0}
.dn-head{max-width:720px}
.dn-eb{margin:0 0 14px;font:700 12.5px/1.2 Inter,sans-serif;letter-spacing:2.5px;color:var(--dn-pk)}
.dn-head h2{margin:0;font:700 clamp(32px,4.4vw,52px)/1.08 Lora,Georgia,serif;color:var(--tx);text-wrap:balance}
.dn-lede{margin:16px 0 0;font:400 17px/1.6 Inter,sans-serif;color:var(--mu);max-width:62ch}
.dn-ic{display:inline-grid;place-items:center;width:16px;height:16px;flex:none}
.dn-ic svg{width:14px;height:14px;display:block}
.dn-role{color:var(--dn-pk)}
.dn-work{color:var(--dn-pu)}
.dn-skill{color:var(--dn-cy)}
.dn-tool{color:var(--mu)}
.dn-practice{color:var(--tx)}
.dn-tabs{display:inline-flex;gap:4px;padding:4px;border-radius:14px;border:2px solid var(--dn-line)}
.dn-tabs button{min-height:40px;padding:0 16px;border-radius:10px;border:0;background:transparent;color:var(--mu);font:600 14px Inter,sans-serif;cursor:pointer}
.dn-tabs button[aria-selected="true"]{background:var(--tx);color:var(--g0,#0B0C1A)}
.dn-det h3{margin:6px 0 0;font:700 26px/1.15 Lora,Georgia,serif;color:var(--tx)}
.dn-k{display:flex;align-items:center;gap:8px;margin:0;font:700 12px/1 Inter,sans-serif;letter-spacing:1.6px;text-transform:uppercase;color:var(--mu)}
.dn-d{margin:10px 0 0;font:400 15px/1.55 Inter,sans-serif;color:var(--mu)}
.dn-f{margin:10px 0 0;font:500 13.5px/1.4 Inter,sans-serif;color:var(--mu)}
.dn-c{margin:12px 0 0;font:400 14px/1.4 Inter,sans-serif;color:var(--mu)}
.dn-c b{color:var(--tx);font-weight:700}
.dn-go{margin-top:18px}
.dn-note{display:flex;gap:10px;align-items:baseline;margin:14px 0 0;font:400 13px/1.5 Inter,sans-serif;color:var(--mu)}
.dn-lbl{flex:none;padding:3px 8px;border-radius:6px;border:1px solid var(--dn-line);font:600 11px/1.2 Inter,sans-serif;letter-spacing:.6px;color:var(--tx)}
.dn-h1{display:grid;grid-template-columns:300px minmax(0,1fr);gap:24px;margin-top:40px;padding:24px;border-radius:20px;background:var(--dn-panel);border:1px solid var(--dn-line)}
.dn-card{display:grid;align-content:start;gap:22px;padding-right:24px;border-right:1px solid var(--dn-line)}
.dn-map{position:relative;min-width:0}
.dn-th{position:absolute;inset:0;pointer-events:none;overflow:visible}
.dn-th path{fill:none;stroke-width:2;stroke-dasharray:600;stroke-dashoffset:600;animation:dnDraw .9s cubic-bezier(.4,0,.2,1) forwards;animation-delay:var(--d)}
.dn-lanes{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:40px}
.dn-lane ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.dn-lh{display:flex;align-items:center;gap:8px;margin:0 0 12px;font:700 12px/1.2 Inter,sans-serif;letter-spacing:1.6px;text-transform:uppercase;color:var(--mu)}
.dn-node,.dn-pick{width:100%;display:flex;align-items:center;gap:10px;min-height:44px;padding:8px 12px;border-radius:12px;border:1.5px solid transparent;background:transparent;color:var(--dn-dim);font:500 14px/1.3 Inter,sans-serif;text-align:left;cursor:pointer;transition:color .25s,border-color .25s,background .25s}
.dn-node .dn-ic{opacity:.55}
.dn-node.on{color:var(--tx);border-color:var(--dn-line);background:rgba(255,255,255,.03)}
.dn-node.on .dn-ic{opacity:1}
.dn-node.sel,.dn-pick.sel{border-color:var(--dn-pk);color:var(--tx);font-weight:600}
.dn-node:hover,.dn-pick:hover{color:var(--tx)}
@media (prefers-reduced-motion:reduce){.dn-th path{animation:none;stroke-dashoffset:0}}
.dn-h2{display:grid;grid-template-columns:300px minmax(0,1fr);gap:0;margin-top:40px;border-radius:20px;background:var(--dn-panel);border:1px solid var(--dn-line);overflow:hidden}
.dn-side{display:grid;align-content:start;gap:14px;padding:20px;border-right:1px solid var(--dn-line)}
.dn-search{display:flex;align-items:center;gap:8px;min-height:44px;padding:0 12px;border-radius:12px;border:1.5px solid var(--dn-line)}
.dn-search svg{width:16px;height:16px;fill:none;stroke:var(--mu);stroke-width:2.2;stroke-linecap:round;flex:none}
.dn-search input{flex:1;min-width:0;border:0;background:transparent;color:var(--tx);font:400 15px Inter,sans-serif;outline:none}
.dn-search:focus-within{border-color:var(--dn-pk)}
.dn-list ul{list-style:none;margin:0 0 6px;padding:0;display:grid;gap:2px}
.dn-g{margin:10px 0 6px;font:700 11.5px/1.2 Inter,sans-serif;letter-spacing:1.4px;text-transform:uppercase;color:var(--mu)}
.dn-pick{color:var(--tx);min-height:40px}
.dn-empty{color:var(--mu);font:400 14px Inter,sans-serif}
.dn-right{display:grid;grid-template-rows:auto auto;min-width:0}
.dn-stage{padding:12px 16px 0}
.dn-con{display:block;width:100%;height:auto;max-height:460px}
.dn-e{fill:none;stroke-width:1.6;opacity:.9}
.dn-e-role{stroke:var(--dn-pk)}
.dn-e-work{stroke:var(--dn-pu)}
.dn-e-skill{stroke:var(--dn-cy)}
.dn-e-tool{stroke:var(--mu)}
.dn-n{cursor:pointer;outline:none}
.dn-n text{fill:var(--tx);font:500 14px Inter,sans-serif}
.dn-n text.bt{font:700 18px Lora,Georgia,serif}
.dn-n:hover text,.dn-n:focus-visible text{text-decoration:underline;text-decoration-color:var(--dn-pk);text-decoration-thickness:2px;text-underline-offset:4px}
.dn-row{padding:20px 24px 24px;border-top:1px solid var(--dn-line)}
.dn-down{display:block;width:2px;height:22px;margin:4px 0 4px 18px;background:linear-gradient(var(--dn-pk),var(--dn-cy))}
@media (max-width:960px){.dn-h1,.dn-h2{grid-template-columns:1fr}
.dn-card{padding-right:0;border-right:0;border-bottom:1px solid var(--dn-line);padding-bottom:20px}
.dn-side{border-right:0;border-bottom:1px solid var(--dn-line)}
.dn-lanes{gap:24px}}
@media (max-width:960px){.dn-lanes{display:block}
.dn-lane ul{display:flex;flex-wrap:wrap;gap:8px}
.dn-lane li{flex:0 1 auto}
.dn-node{width:auto}
.dn-th{display:none}
.dn-mlanes .dn-lane ul{display:flex;flex-wrap:wrap;gap:8px}
.dn-h2 .dn-list{display:flex;flex-wrap:wrap;gap:8px}
.dn-h2 .dn-g{display:none}
.dn-h2 .dn-list ul{display:contents}
.dn-h2 .dn-pick{width:auto;border-color:var(--dn-line)}
.dn-h2 .dn-pick.sel{border-color:var(--dn-pk)}}
@media (max-width:760px){.dn-h1{padding:16px}
.dn-lanes{display:block}
.dn-lane ul{display:flex;flex-wrap:wrap;gap:8px}
.dn-lane li{flex:0 1 auto}
.dn-node{width:auto}
.dn-th{display:none}
.dn-list{max-height:260px;overflow:auto}
.dn-stage{padding:16px}
.dn-mlanes .dn-lane ul{display:flex;flex-wrap:wrap;gap:8px}
.dn-det h3{font-size:23px}}
.hdframes .dn-host[hidden]{display:none}
.dn-gh{fill:var(--mu);font:700 11.5px Inter,sans-serif;letter-spacing:1.4px}
.dn-bl{fill:var(--dn-panel);stroke:var(--dn-line)}
.dn-con{max-height:none}
.dn-card{min-width:0}
.dn-go{white-space:normal;text-align:left;height:auto;min-height:48px;padding:10px 18px;line-height:1.25;max-width:100%}
@media (min-width:961px){.dn-h1{grid-template-columns:280px minmax(0,1fr)}
.dn-lanes{gap:28px}}
.dn-cols{margin-top:40px;border-radius:20px;background:var(--dn-panel);border:1px solid var(--dn-line)}
.dn-sbar{display:grid;gap:14px;padding:20px 24px;border-bottom:1px solid var(--dn-line)}
.dn-types{display:flex;flex-wrap:wrap;gap:6px}
.dn-types button{min-height:40px;padding:0 14px;border-radius:999px;border:1.5px solid var(--dn-line);background:transparent;color:var(--mu);font:600 14px Inter,sans-serif;cursor:pointer}
.dn-types button[aria-checked="true"]{border-color:var(--dn-pk);color:var(--tx);background:rgba(255,17,134,.1)}
.dn-combo{position:relative}
.dn-cols .dn-search{min-height:52px;border-width:2px;border-radius:14px;padding:0 14px}
.dn-cols .dn-search input{font-size:16px}
.dn-cols .dn-search input::placeholder{color:var(--dn-dim)}
.dn-clear{width:32px;height:32px;border:0;border-radius:8px;background:transparent;color:var(--mu);font-size:14px;cursor:pointer}
.dn-clear:hover{color:var(--tx)}
.dn-res{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:30;margin:0;padding:6px;list-style:none;max-height:360px;overflow:auto;border-radius:14px;background:var(--rail,#1A1B28);border:1.5px solid var(--dn-line);box-shadow:0 18px 40px rgba(0,0,0,.45)}
.dn-res li[role=option]{display:flex;align-items:center;gap:10px;min-height:48px;padding:8px 12px;border-radius:10px;cursor:pointer;color:var(--tx);font:500 15px/1.3 Inter,sans-serif}
.dn-res li[aria-selected="true"]{background:rgba(255,255,255,.07);outline:2px solid var(--dn-pk);outline-offset:-2px}
.dn-rt{flex:1;min-width:0}
.dn-rt small{display:block;margin-top:2px;font:400 13px Inter,sans-serif;color:var(--mu)}
.dn-rk{flex:none;font:500 12.5px Inter,sans-serif;color:var(--mu);text-align:right;max-width:45%}
.dn-res mark{background:transparent;color:inherit;font-weight:700;text-decoration:underline;text-decoration-color:var(--dn-pk);text-decoration-thickness:2px;text-underline-offset:3px}
.dn-none{padding:12px;color:var(--mu);font:400 14px Inter,sans-serif}
.dn-cols .dn-map{padding:24px}
.dn-cols .dn-lanes{grid-template-columns:repeat(4,minmax(0,1fr));gap:48px}
.dn-cols .dn-row{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:8px 32px;align-items:end}
.dn-cols .dn-row>*{grid-column:1}
.dn-cols .dn-row .dn-c,.dn-cols .dn-row .dn-go{grid-column:2;justify-self:start}
.dn-cols .dn-row .dn-c{grid-row:3}
.dn-cols .dn-row .dn-go{grid-row:4;margin-top:6px}
.dn-pl{display:flex;align-items:center;gap:8px;color:var(--mu);font:400 14px Inter,sans-serif}
@media (max-width:960px){.dn-cols .dn-map{padding:20px}
.dn-cols .dn-lanes{display:block}
.dn-cols .dn-row{display:block}
.dn-sbar{padding:16px}}
.dn-sbar{grid-template-columns:minmax(0,1fr)}
.dn-sbar>*,.dn-combo,.dn-search{min-width:0;max-width:100%;box-sizing:border-box}
.dn-search input:focus,.dn-search input:focus-visible{outline:none}
.dn-more{padding:8px 12px 4px;color:var(--mu);font:400 13px Inter,sans-serif}
.dn-trow{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 16px}
.dn-stg{display:inline-flex;flex-wrap:wrap;gap:4px;padding:4px;border-radius:14px;border:1.5px solid var(--dn-line)}
.dn-stg button{min-height:36px;padding:0 12px;border:0;border-radius:10px;background:transparent;color:var(--mu);font:600 13.5px Inter,sans-serif;cursor:pointer}
.dn-stg button[aria-checked="true"]{background:var(--tx);color:var(--g0,#0B0C1A)}
.dn-lh small{margin-left:4px;padding:2px 7px;border-radius:999px;border:1px solid var(--dn-line);font:600 11px/1.2 Inter,sans-serif;letter-spacing:0;color:var(--mu)}
.dn-cols .dn-node.on{background:var(--dn-panel)}
.dn-cols .dn-node.nx{color:var(--mu);border-style:dashed}
.dn-sub{margin:8px 0 0;font:700 11px/1.2 Inter,sans-serif;letter-spacing:1.4px;text-transform:uppercase;color:var(--mu)}
.dn-more2{min-height:40px;padding:0 12px;border:0;background:transparent;color:var(--tx);font:600 14px Inter,sans-serif;text-decoration:underline;text-decoration-color:var(--dn-pk);text-decoration-thickness:2px;text-underline-offset:4px;cursor:pointer}
.dn-th path.dn-skip{stroke-width:1.2;opacity:.55}
.dn-f b{color:var(--tx);font-weight:600}
@media (max-width:960px){.dn-sub{width:100%}
.dn-cols .dn-lane ul{align-items:center}}
.dn-lanes.hov .dn-node:not(.lit){color:var(--dn-dim);border-color:transparent}
.dn-lanes.hov .dn-node.lit{border-color:var(--dn-line);color:var(--tx)}
.dn-hint{margin:0;padding:14px 24px 0;font:400 13.5px Inter,sans-serif;color:var(--mu)}
@media (max-width:960px){.dn-hint{display:none}}
@keyframes dnDraw{to{stroke-dashoffset:0}}
/* ===== A1 overrides (26th October 2026). Colours come only from tokens-v4.css (Brand Kit v4.1, Colour System 2.3). ===== */
:root{--a1-gut:32px;--a1-sec:64px;--a1-hh:60px}
@media (max-width:1023px){:root{--a1-gut:24px;--a1-sec:56px}}
@media (max-width:640px){:root{--a1-gut:16px;--a1-sec:44px}}
html{scroll-padding-top:76px}

/* ----- layout: one 1280px container, gutters 32/24/16 ----- */
#root .wrap-wide,#root .an-disc .dn{width:100%!important;max-width:calc(1280px + 2 * var(--a1-gut))!important;margin-left:auto!important;margin-right:auto!important;padding-left:var(--a1-gut)!important;padding-right:var(--a1-gut)!important}
#root section#join .wrap-wide.grid{width:calc(100% - 2 * var(--a1-gut))!important;max-width:1280px!important;padding:56px!important}
@media (max-width:1023px){#root section#join .wrap-wide.grid{padding:40px 24px!important}}
[data-testid="landing-page"] .chapter-title,[data-testid="landing-page"] .section-lede,[data-testid="landing-page"] .lede{max-width:none!important}
html body [data-testid="landing-page"] section:not(#top){padding-top:var(--a1-sec)!important;padding-bottom:0!important;margin-top:0!important;margin-bottom:0!important}
html body [data-testid="landing-page"] section#join{padding-bottom:var(--a1-sec)!important}
.an-main{display:block}
.an-main:focus{outline:none}

/* ----- real app nav (PR #25, Plan 11), fixed on the homepage ----- */
[data-testid="landing-page"] .an-site,.an-site{position:relative;z-index:50!important}
.an-site .site-header{position:fixed;top:0;left:0;right:0;z-index:40;background:var(--void);border-bottom:1px solid var(--border-subtle);--gutter:var(--a1-gut)}
.an-site .site-header .an-wrap{flex-wrap:nowrap}
.an-site .brand img{height:var(--wordmark-height);width:auto}
.an-site .button.button-nav{min-width:max-content;display:inline-flex;align-items:center;justify-content:center;color:var(--text-on-action,var(--white));text-decoration:none;font:600 15px/1 var(--font-body);border:0}
.an-site .nav-link{white-space:nowrap}
.an-site .nav-link::after{content:none!important;display:none!important}
.an-site .skip-link{position:fixed;left:-9999px;top:8px;z-index:200;padding:10px 14px;border-radius:var(--radius-control);background:var(--snow);color:var(--ink);font:600 15px/1.2 var(--font-body);text-decoration:none}
.an-site .skip-link:focus{left:var(--a1-gut)}

/* ----- hero ----- */
.hx{padding-top:calc(var(--a1-hh) + 48px)!important}
.hx-stars{display:none!important}

/* ----- mock-ups are labelled as examples ----- */
.hx-dev-phone::before,.hx-dev-tab::before{content:"Example";position:absolute;z-index:5;bottom:-28px;padding:3px 9px;border-radius:var(--radius-pill);background:var(--void);border:1px solid var(--border-control);color:var(--white);font:600 11px/1.2 var(--font-body);letter-spacing:.5px}
.hx-dev-tab::before{left:12px}
.hx-dev-phone::before{left:50%;transform:translateX(-50%)}
#tailor .studio-search{display:none!important}
#tailor .studio-request{min-height:32px}

/* ----- eyebrows: Void eyebrow (pink words, capitals, no pill) ----- */
[data-testid="landing-page"] section:not(#top) .ask{background:none!important;border:0!important;padding:0!important;box-shadow:none!important}
[data-testid="landing-page"] section:not(#top) .ask .ask-q{color:var(--eyebrow-text,var(--pink-on-void-text))!important;font:700 var(--type-eyebrow)/1.2 var(--font-body)!important;letter-spacing:var(--tracking-eyebrow)!important;text-transform:uppercase}

/* ----- one accent moment: the hero keyword; no gradient text or gradient cards elsewhere ----- */
#root section:not(#top) .key,#root .gap-key,#root .chapter-title span{background:none!important;-webkit-background-clip:border-box!important;background-clip:border-box!important;-webkit-text-fill-color:currentColor!important;color:var(--white)!important}
#root .key{background:none!important;-webkit-background-clip:border-box!important;background-clip:border-box!important;-webkit-text-fill-color:currentColor!important;color:var(--white)!important}

/* ----- cards: Void with a hairline border ----- */
#root .h6-card,#root .glass,section#join .wrap-wide.grid,#gap .gap-table::after{background:var(--void)!important;border:1px solid var(--border-subtle)!important;box-shadow:none!important}

/* ----- why insyt ----- */
#gap .gap-table .gap-course{display:none!important}
#gap .gap-table>.grid>*:not(.gap-course){grid-row:1!important}
#gap .gap-table::after{content:"On Insyt you practice all five on realistic data from a fictional company. Coming soon: Role Twin, a colleague who reacts to your work."!important;padding-left:20px!important}
.join-btns::after{content:"Insyt is free to use."!important}

/* ----- discover tree, on tokens ----- */
.an-disc{--dn-pk:var(--pink-on-void-text);--dn-pu:var(--purple);--dn-cy:var(--cyan);--dn-dim:var(--on-void-caption);--dn-line:var(--border-subtle);--dn-panel:var(--void);--g0:var(--void);--ghb:var(--border-control);--ghbg:transparent;--ghtx:var(--white);--mu:var(--on-void-muted);--rail:var(--void);--tx:var(--white);--sg:0px;position:relative}
.an-disc .dn-head{max-width:none!important;text-align:center;margin-inline:auto}
.an-disc .dn-lede{max-width:none!important}
.an-disc .dn-head h2{font-family:var(--font-title)}
.an-disc .dn-lh{min-height:24px;display:flex;align-items:center}
.an-disc .dn-search input{min-height:44px}
.an-disc .dn-node.sel,.an-disc .dn-pick.sel{border-color:var(--white)!important}
.an-disc .dn-types button[aria-checked="true"],.an-disc .dn-stg button[aria-checked="true"]{box-shadow:none!important;border-color:var(--white)!important}
.an-disc .dn-cols,.an-disc .dn-map{border-color:var(--border-subtle)!important}

/* ----- links: in sentences white and underlined (insyt.css a); standalone links without underline ----- */
[data-testid="landing-page"] p a,[data-testid="landing-page"] li a:not([class]),.an-disc .dn-note a{color:var(--text-link,var(--white))!important;text-decoration:underline!important;text-decoration-thickness:1px!important;text-underline-offset:.18em}
.ft a,.ft-legal a,footer a{display:inline-block;padding-block:4px;color:var(--on-void-muted)!important;text-decoration:none!important}
.ft a:hover,.ft-legal a:hover,footer a:hover{color:var(--white)!important}
.dn-more2{color:var(--white)!important;text-decoration:none!important;border-bottom:0!important;box-shadow:none!important}
.dn-more2::after{content:" \2192";color:var(--pink-on-void-text)}

/* ----- buttons: primary is Signal Pink; secondary is neutral with a hairline control border ----- */
[data-testid="landing-page"] .hx-btn-ghost,section#join .join-btns .btn-secondary,.an-disc .hbg{border:0!important;box-shadow:inset 0 0 0 1px var(--border-control)!important;color:var(--white)!important;background:transparent!important}
[data-testid="landing-page"] .hx-btn-ghost:hover,section#join .join-btns .btn-secondary:hover,.an-disc .hbg:hover{background:var(--surface-hover)!important}
#tailor [aria-pressed="true"],#tailor .is-picked{border-color:var(--white)!important}

/* ----- focus ----- */
:focus-visible{outline:var(--focus-width,3px) solid var(--focus-ring,var(--cyan))!important;outline-offset:var(--focus-offset,2px)!important}

/* ----- light theme: the page is drawn for Void; this approximation inverts it (to be replaced by the approved light tokens) ----- */
html[data-theme="light"]{filter:invert(1) hue-rotate(180deg);background:var(--void)}
html[data-theme="light"] img,html[data-theme="light"] video,html[data-theme="light"] .ld{filter:invert(1) hue-rotate(180deg)}

/* ----- loader (from v4, chosen 21st October 2026) ----- */
.ld{position:fixed;inset:0;z-index:100;background:var(--void);pointer-events:none}
.ld .mark{display:flex;align-items:flex-start;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
.ld .sl{display:block;flex:none;background-repeat:no-repeat;will-change:width,opacity}
.ld .spk{position:absolute;background-repeat:no-repeat;background-size:100% 100%;transform:translate(-50%,-50%);will-change:left,top,width,height,opacity}
html.loading{overflow:hidden}