/* The site's fonts, hosted here (assets/fonts/, SIL Open Font License, see LICENSE.txt). Each file only loads if the page uses a
   character in its unicode-range. Taken from Google Fonts' own definitions on 2026-11-02, without the Cyrillic subset. */
@font-face { font-family: "Assistant"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/assistant-hebrew.woff2") format("woff2"); unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }
@font-face { font-family: "Assistant"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/assistant-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Assistant"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/assistant-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Assistant"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/assistant-hebrew.woff2") format("woff2"); unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }
@font-face { font-family: "Assistant"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/assistant-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Assistant"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/assistant-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Assistant"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/assistant-hebrew.woff2") format("woff2"); unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }
@font-face { font-family: "Assistant"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/assistant-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Assistant"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/assistant-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Sans Hebrew"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/plex-hebrew-400-hebrew.woff2") format("woff2"); unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }
@font-face { font-family: "IBM Plex Sans Hebrew"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/plex-hebrew-400-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Sans Hebrew"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/plex-hebrew-400-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Sans Hebrew"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/plex-hebrew-500-hebrew.woff2") format("woff2"); unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }
@font-face { font-family: "IBM Plex Sans Hebrew"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/plex-hebrew-500-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Sans Hebrew"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/plex-hebrew-500-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Sans Hebrew"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/plex-hebrew-600-hebrew.woff2") format("woff2"); unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }
@font-face { font-family: "IBM Plex Sans Hebrew"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/plex-hebrew-600-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Sans Hebrew"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/plex-hebrew-600-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Sans Hebrew"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/plex-hebrew-700-hebrew.woff2") format("woff2"); unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }
@font-face { font-family: "IBM Plex Sans Hebrew"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/plex-hebrew-700-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Sans Hebrew"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/plex-hebrew-700-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* Design tokens. Every colour, font and size the site uses is defined here, once.
   Brand colour comes from a palette (data-palette on <html>). Lime #B1E61E marks what the AI did. */
:root {
  /* Type: IBM Plex Sans Hebrew for everything, hierarchy by weight (400 body, 500 buttons, 600 headings) */
  --font: "IBM Plex Sans Hebrew", "IBM Plex Sans", "Arial Hebrew", "Segoe UI", Arial, sans-serif;
  --w-head: 600;
  --w-ui: 500;
  --w-body: 400;

  /* Type scale for the site. Every font-size outside the product mock-ups is one of these. */
  --fs-display: clamp(38px, 5vw, 68px);  /* the hero headline only */
  --fs-h2: clamp(30px, 3.6vw, 46px);     /* section headings */
  --fs-h3: clamp(22px, 2.2vw, 28px);     /* sub-headings: steps, the security band, the quotes title, the modal */
  --fs-h4: 20px;                          /* column headings in cards */
  --fs-lead: clamp(17px, 1.6vw, 19px);   /* the paragraph under a heading */
  --fs-lg: 18px;                          /* FAQ questions, quotes */
  --fs-body: 17px;                        /* running text, buttons, form fields (16 on phones, never lower: iOS zooms inputs under 16) */
  --fs-ui: 15px;                          /* nav, footer, text inside cards and mock-up windows */
  --fs-sm: 14px;                          /* small labels, captions, eyebrows */
  --fs-xs: 13px;                          /* meta lines in mock-ups */
  --fs-2xs: 12px;                         /* chips and pills */
  --fs-micro: 11px;                       /* tiny tags ("AI"), initials in avatars */
  --lh-tight: 1.12;  /* display, h2 */
  --lh-snug: 1.3;    /* h3, h4 */
  --lh-body: 1.65;

  /* Type scale for the product mock-ups (hero window, controls and payslip screens): the product's own sizes, in Assistant */
  --px-2xs: 10px;
  --px-xs: 11px;
  --px-sm: 12px;
  --px-base: 13px;
  --px-md: 14px;
  --px-lg: 16px;
  --px-xl: 17px;
  --px-2xl: 24px;

  /* Spacing: paddings, gaps and margins step through 4 · 8 · 12 · 16 · 24 · 32 · 48 · 64 · 96 (2 and 6 only inside
     small chips). The three rhythms that repeat across sections are tokens: */
  --section-y: 112px;      /* top and bottom of every section */
  --head-gap: 56px;        /* section heading block → its content */
  --card-pad: 24px;        /* inside every card */

  /* Brand: values come from the active palette below */
  --brand: #102A43;
  --brand-deep: #0A1B2C;
  --brand-glow: #1F4166;
  --brand-ink: #FFFFFF;
  --mark: #B1E61E;          /* lime: marks what the AI did */
  --mark-ink: #13200A;
  --mark-text: #557300;     /* lime darkened for text on light backgrounds (pre-titles) */
  /* The check mark, drawn rather than the font's ✓ glyph so every tick looks the same. Used as a mask, so it
     takes currentColor; --tick-ink is the same shape pre-coloured in --mark-ink for use on lime backgrounds. */
  --tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
  --tick-ink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2313200A' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");

  /* Northern lights: the site's theme. Night panels (hero, basics + security, demo) with teal and lime aurora */
  --night: #06111F;
  --aurora-teal: #2EB89E;
  --aurora-blue: #6B94C7;
  --aurora-violet: #8B7FD6;   /* the faint violet edge of the aurora: frames only */

  /* Surfaces and text */
  --bg: #FFFFFF;
  --bg-alt: #F5F6FB;
  --surface: #FFFFFF;
  --panel: #F1F3F9;
  --line: #E3E6F0;
  --ink: #0E1226;
  --ink-2: #4A5070;
  --ink-3: #80869E;

  /* Accents derived from the brand */
  --accent: var(--brand);          /* links, emphasis on light backgrounds */
  --accent-soft: #E6ECF2;
  --ai-mark: var(--mark);          /* highlighter for AI-made changes */
  --ok: #157A4C;
  --ok-soft: #E1F3E9;

  /* Layout */
  --wrap: 1200px;
  --gutter: 24px;
  --radius-s: 8px;
  --radius-m: 12px;
  --radius-l: 20px;
  --radius-xl: 32px;
  --shadow: 0 1px 2px rgba(14, 18, 38, .05), 0 24px 60px -24px rgba(14, 18, 38, .35);
  /* Frames: cards and product windows sit in a frame instead of a drop shadow. The illustration cards get a glass
     frame with a faint aurora glow behind it (aurora.css, "Glass frames"); these are its colours. Product copies and
     anything that clips its edges get --frame, a plain glass ring drawn with box-shadow spread (no extra markup;
     keep about 12px clear around it). */
  --glass-hi: rgba(255, 255, 255, .8);      /* the sheen, top corner */
  --glass-lo: rgba(255, 255, 255, .3);      /* the clear middle */
  --glass-rim: rgba(255, 255, 255, .95);    /* the bright outer edge */
  --glass-line: rgba(16, 42, 67, .09);      /* a hairline outside the rim, so the glass holds its edge on white */
  --glow: 10%;                              /* strength of the aurora glow behind a card */
  --frame-neutral: 0 0 0 1px var(--glass-rim), 0 0 0 11px rgba(255, 255, 255, .55), 0 0 0 12px var(--glass-line);
  --frame: var(--frame-neutral);
  /* The hero window's shadow (hero.css, .app), shared by the illustration windows further down */
  --win-shadow: 0 0 0 1px rgba(16, 42, 67, .08), 0 12px 32px -12px rgba(16, 42, 67, .18);

  /* Motion: strong curves for deliberate UI motion */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);        /* entering and leaving */
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);    /* moving across the screen */
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);     /* sheets sliding up from the bottom */
  --ease-glide: cubic-bezier(0.65, 0, 0.35, 1);      /* soft in-out for long glides (the hero cursor, sidebar selection) */
}

/* The rhythms tighten on smaller screens */
@media (max-width: 900px) {
  :root { --section-y: 80px; --head-gap: 40px; }
}
@media (max-width: 560px) {
  :root { --section-y: 64px; --card-pad: 16px; --fs-body: 16px; }
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #090B18;
    --bg-alt: #0E1122;
    --surface: #131729;
    --panel: #0F1324;
    --line: #262B45;
    --ink: #EDEFF8;
    --ink-2: #AEB3CB;
    --ink-3: #7B819D;
    --ok: #55C98F;
    --ok-soft: #12301F;
    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 24px 60px -24px rgba(0, 0, 0, .8);
    --glass-hi: rgba(255, 255, 255, .08);
    --glass-lo: rgba(255, 255, 255, .02);
    --glass-rim: rgba(255, 255, 255, .14);
    --glass-line: rgba(0, 0, 0, .3);
    --glow: 8%;
    --frame-neutral: 0 0 0 1px var(--glass-rim), 0 0 0 11px rgba(255, 255, 255, .04), 0 0 0 12px var(--glass-line);
    --frame: var(--frame-neutral);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #090B18;
  --bg-alt: #0E1122;
  --surface: #131729;
  --panel: #0F1324;
  --line: #262B45;
  --ink: #EDEFF8;
  --ink-2: #AEB3CB;
  --ink-3: #7B819D;
  --ok: #55C98F;
  --ok-soft: #12301F;
  --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 24px 60px -24px rgba(0, 0, 0, .8);
  --glass-hi: rgba(255, 255, 255, .08);
  --glass-lo: rgba(255, 255, 255, .02);
  --glass-rim: rgba(255, 255, 255, .14);
  --glass-line: rgba(0, 0, 0, .3);
  --glow: 8%;
  --frame-neutral: 0 0 0 1px var(--glass-rim), 0 0 0 11px rgba(255, 255, 255, .04), 0 0 0 12px var(--glass-line);
  --frame: var(--frame-neutral);
  color-scheme: dark;
}

/* Palettes around lime #B1E61E. Pick one with data-palette on <html>; "ink" is the default above. */
:root[data-palette="forest"] { --brand: #0E5A3A; --brand-deep: #073523; --brand-glow: #178052; --accent-soft: #E1F0E7; }
:root[data-palette="violet"] { --brand: #4B2FD3; --brand-deep: #2A1785; --brand-glow: #6A50F5; --accent-soft: #ECE8FD; }

/* On dark backgrounds the brand colour is too dark for text, so emphasis switches to a light tint */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --accent: var(--mark); --accent-soft: #1F2A10; --mark-text: var(--mark); }
  :root:not([data-theme="light"])[data-palette="forest"] { --accent: #6FD6A2; --accent-soft: #10301F; }
  :root:not([data-theme="light"])[data-palette="violet"] { --accent: #AE9FFF; --accent-soft: #221A52; }
}
:root[data-theme="dark"] { --accent: var(--mark); --accent-soft: #1F2A10; --mark-text: var(--mark); }
:root[data-theme="dark"][data-palette="forest"] { --accent: #6FD6A2; --accent-soft: #10301F; }
:root[data-theme="dark"][data-palette="violet"] { --accent: #AE9FFF; --accent-soft: #221A52; }

/* Reset, typography and shared components (buttons, layout). */
*, *::before, *::after { box-sizing: border-box; }
html { direction: rtl; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  text-wrap: pretty; /* never leave a lone word on the last line, site-wide */
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-weight: var(--w-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { margin: 0; font-weight: var(--w-head); line-height: var(--lh-tight); text-wrap: balance; }
p { margin: 0; }
a { color: inherit; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.num { font-variant-numeric: tabular-nums; }

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-weight: var(--w-ui); font-size: var(--fs-body); line-height: 1;
  padding: 16px 24px; border-radius: var(--radius-m);
  border: 1px solid transparent; cursor: pointer; text-decoration: none;
  transition: background-color 150ms ease, border-color 150ms ease, transform 160ms var(--ease-out);
}
.btn:active { transform: scale(0.97); }
.btn-primary { background: var(--brand); color: var(--brand-ink); }
.btn-primary:hover { background: var(--brand-deep); }

.btn-sm { padding: 12px 16px; font-size: var(--fs-ui); border-radius: var(--radius-s); }

/* Call-to-action button ("תיאום הדגמה" in the header and hero): fully round, with a lime arrow circle at its end */
.btn-cta { border-radius: 999px; padding-block: 8px; padding-inline: 24px 8px; gap: 12px; font-size: var(--fs-body); min-height: 52px; }
.btn-cta.btn-sm { padding-block: 4px; padding-inline: 16px 4px; gap: 8px; font-size: var(--fs-ui); min-height: 40px; }
.cta-arrow { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--mark); color: var(--mark-ink); }
.btn-sm .cta-arrow { width: 32px; height: 32px; }
.cta-arrow svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform 160ms var(--ease-out); }
.btn-sm .cta-arrow svg { width: 16px; height: 16px; }
@media (hover: hover) and (pointer: fine) {
  .btn-cta:hover .cta-arrow svg { transform: translateX(-2px); } /* nudges forward, which is left in RTL */
}
.btn-cta:focus-visible .cta-arrow svg { transform: translateX(-2px); } /* keyboard focus gets the same forward nudge */

/* Logo (temporary, from Ran). Lettering takes currentColor: brand colour on light, white on dark. */
.logo { display: block; color: var(--brand); line-height: 0; }
.logo svg { height: 30px; width: auto; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .logo { color: var(--ink); } }
:root[data-theme="dark"] .logo { color: var(--ink); }
@media (max-width: 560px) { .logo svg { height: 24px; } }

@media (max-width: 560px) {
  :root { --gutter: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn:active { transform: none; opacity: .85; }
  .btn-cta:hover .cta-arrow svg, .btn-cta:focus-visible .cta-arrow svg { transform: none; }
}

/* Sections: shared spacing and the heading block every section opens with */
.section { padding-block: var(--section-y); scroll-margin-top: 72px; }
.section-alt { background: var(--bg-alt); }
.section-head { max-width: 720px; margin-bottom: var(--head-gap); }
.section-head.is-center { text-align: center; margin-inline: auto; }
.eyebrow { font-size: var(--fs-sm); font-weight: var(--w-head); color: var(--mark-text); margin-bottom: 12px; } /* same lime as the dark-section pre-titles (.bs-kicker), darkened to read on light */
.section-head h2 { font-size: var(--fs-h2); letter-spacing: -.015em; }
.section-head .lead { font-size: var(--fs-lead); color: var(--ink-2); margin-top: 16px; text-wrap: pretty; }
.section-head.is-center .lead { margin-inline: auto; max-width: 56ch; }
.icon { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
@media (max-width: 900px) { .section { scroll-margin-top: 64px; } }

/* An inline check mark (<i class="tick">), sized by font-size and coloured by currentColor */
.tick { display: inline-block; width: 1em; height: 1em; flex: none; vertical-align: -.125em; background: currentColor; -webkit-mask: var(--tick) center / contain no-repeat; mask: var(--tick) center / contain no-repeat; }

/* Accessibility: the skip link, the menu (a11y.js) and what its switches do, plus the accessibility statement page. */
.skip-link {
  position: fixed; z-index: 200; top: 8px; inset-inline-start: 8px; padding: 12px 16px; border-radius: var(--radius-s);
  background: var(--ink); color: var(--bg); font-size: var(--fs-ui); translate: 0 -200%;
}
.skip-link:focus { translate: none; }

.a11y { position: fixed; z-index: 60; bottom: 16px; inset-inline-end: 16px; }
.a11y[hidden] { display: none; }
.a11y-toggle {
  display: grid; place-items: center; width: 48px; height: 48px; border: 0; border-radius: 50%; cursor: pointer;
  background: var(--brand-deep); color: #FFFFFF; box-shadow: 0 8px 24px -8px rgba(14, 18, 38, .5);
}
.a11y-toggle svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* Phones: a little smaller, since it floats over the text, with a light ring that shows it on the dark bands */
@media (max-width: 560px) {
  .a11y-toggle { width: 44px; height: 44px; box-shadow: 0 0 0 2px rgba(255, 255, 255, .55), 0 8px 24px -8px rgba(14, 18, 38, .5); }
  .a11y-toggle svg { width: 24px; height: 24px; }
  .a11y-panel { bottom: 56px; }
}
.a11y-toggle:focus-visible, .a11y-panel button:focus-visible, .a11y-panel a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.a11y-panel {
  position: absolute; bottom: 60px; inset-inline-end: 0; width: 260px; display: grid; gap: 4px; padding: 12px;
  max-height: calc(100dvh - 92px); overflow-y: auto; overscroll-behavior: contain; /* scrolls on short or zoomed screens instead of running off the top */
  background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius-m); box-shadow: 0 24px 48px -16px rgba(14, 18, 38, .4);
}
.a11y-panel[hidden] { display: none; }
.a11y-panel h2 { margin: 4px 8px 8px; font-size: var(--fs-ui); }
.a11y-panel button {
  font: inherit; font-size: var(--fs-ui); text-align: start; padding: 10px 12px; min-height: 44px; border: 0; border-radius: var(--radius-s);
  background: none; color: var(--ink); cursor: pointer;
}
.a11y-panel button:hover { background: var(--panel); }
.a11y-panel button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.a11y-step { font-variant-numeric: tabular-nums; opacity: .8; } /* the text size's current step, "· 125%" (a11y.js) */
.a11y-panel a { padding: 10px 12px; font-size: var(--fs-sm); color: var(--ink-2); }
@media (prefers-reduced-motion: no-preference) { .a11y-panel { animation: a11y-in 160ms var(--ease-out); } }
@keyframes a11y-in { from { opacity: 0; translate: 0 6px; } }

/* What the switches do */
.a11y-size-1 body { zoom: 1.12; }
.a11y-size-2 body { zoom: 1.25; }
.a11y-size-1 { --zoom: 1.12; } /* for sizes tied to the screen (vw, dvh), which zoom would otherwise push past its edges */
.a11y-size-2 { --zoom: 1.25; }
.a11y-size-1 .a11y { zoom: .893; } /* zoom multiplies down the tree: these cancel the body's, so the menu keeps its size */
.a11y-size-2 .a11y { zoom: .8; }
.a11y-contrast { --ink: #000000; --ink-2: #111111; --ink-3: #222222; --line: #000000; }
@media (prefers-color-scheme: dark) {
  :root.a11y-contrast:not([data-theme="light"]) { --ink: #FFFFFF; --ink-2: #F2F2F2; --ink-3: #DDDDDD; --line: #FFFFFF; }
}
:root.a11y-contrast[data-theme="dark"] { --ink: #FFFFFF; --ink-2: #F2F2F2; --ink-3: #DDDDDD; --line: #FFFFFF; }
.a11y-contrast main, .a11y-contrast .site-header, .a11y-contrast .site-footer { filter: contrast(1.25); }
.a11y-links a { text-decoration: underline !important; text-underline-offset: 3px; outline: 1px dashed currentColor; outline-offset: 2px; }
.a11y-font body, .a11y-font body * { font-family: Arial, "Helvetica Neue", sans-serif !important; }
.a11y-still *, .a11y-still *::before, .a11y-still *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }

/* The pause button on the looping illustrations (loop-pause.js): spinners and pulses inside them hold too */
.loops-paused .af-card *, .loops-paused .af-card *::before, .loops-paused .af-card *::after,
.loops-paused .mg-card *, .loops-paused .mg-card *::before, .loops-paused .mg-card *::after { animation-play-state: paused !important; }

/* The accessibility statement page */
.legal { max-width: 720px; padding-block: 64px 96px; }
.legal h1 { font-size: var(--fs-h2); margin-bottom: 16px; }
.legal h2 { font-size: var(--fs-h4); margin-top: 32px; margin-bottom: 8px; }
.legal p, .legal li { color: var(--ink-2); font-size: var(--fs-body); line-height: var(--lh-body); }
.legal ul { padding-inline-start: 20px; }
.legal-draft { padding: 12px 16px; border-radius: var(--radius-s); background: var(--panel); color: var(--ink); font-size: var(--fs-sm); }
.legal-bar { padding-block: 24px; }