/* 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; }

/* Site header: sticky, logo at the start (right), links, demo CTA. */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: saturate(1.4) blur(12px);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s;
}
.site-header.is-scrolled { border-bottom-color: var(--line); }

.site-header .bar { display: flex; align-items: center; gap: 32px; height: 72px; }
.site-nav { display: flex; gap: 4px; margin-inline-end: auto; }
.site-nav a {
  font-size: var(--fs-ui); color: var(--ink-2); text-decoration: none;
  padding: 8px 12px; border-radius: var(--radius-s);
}
.site-nav a:hover { color: var(--ink); background: var(--panel); }
.header-actions { display: flex; align-items: center; gap: 8px; }
.header-actions .login { font-size: var(--fs-ui); color: var(--ink-2); text-decoration: none; padding: 8px 12px; }
.header-actions .login:hover { color: var(--ink); }
.menu-toggle {
  display: none; width: 42px; height: 42px; border-radius: var(--radius-s);
  border: 1px solid var(--line); background: var(--surface); cursor: pointer;
  place-items: center;
}
.menu-toggle span, .menu-toggle span::before, .menu-toggle span::after {
  display: block; width: 18px; height: 2px; background: var(--ink); border-radius: 2px; position: relative; content: "";
}
.menu-toggle span::before { position: absolute; top: -6px; }
.menu-toggle span::after { position: absolute; top: 6px; }
/* open: the three lines become an ✕ */
.menu-toggle span, .menu-toggle span::before, .menu-toggle span::after { transition: background-color 150ms ease, top 150ms var(--ease-out), rotate 150ms var(--ease-out); }
.menu-toggle[aria-expanded="true"] span { background: transparent; }
.menu-toggle[aria-expanded="true"] span::before { top: 0; rotate: 45deg; background: var(--ink); }
.menu-toggle[aria-expanded="true"] span::after { top: 0; rotate: -45deg; background: var(--ink); }
.header-actions .btn-cta { white-space: nowrap; }

@media (max-width: 900px) {
  .site-header .bar { gap: 12px; height: 64px; }
  .site-nav, .header-actions .login { display: none; }
  .header-actions { margin-inline-start: auto; }
  .menu-toggle { display: grid; }
  .site-nav.is-open {
    display: grid; position: absolute; inset-inline: 0; top: 64px;
    background: var(--bg); border-bottom: 1px solid var(--line);
    padding: 8px var(--gutter) 16px; gap: 0;
  }
  .site-nav.is-open a { font-size: var(--fs-body); padding: 16px 4px; border-radius: 0; border-bottom: 1px solid var(--line); }
  .site-nav.is-open a:last-child { border-bottom: 0; }
}
@media (max-width: 380px) {
  .header-actions .btn-sm { padding-inline: 12px 4px; font-size: var(--fs-sm); }
}
/* No room for the arrow circle on the smallest phones, or on phones with the text enlarged: the label keeps one line */
@media (max-width: 340px) {
  .header-actions .btn-cta { padding-inline: 16px; }
  .header-actions .btn-cta .cta-arrow { display: none; }
}
@media (max-width: 560px) {
  .a11y-size-1 .header-actions .btn-cta, .a11y-size-2 .header-actions .btn-cta { padding-inline: 14px; }
  .a11y-size-1 .header-actions .btn-cta .cta-arrow, .a11y-size-2 .header-actions .btn-cta .cta-arrow { display: none; }
}

/* Hero: centred headline and CTAs on the night panel (hero-night.css), product window below. */
.hero { padding-block: 96px 24px; scroll-margin-top: 72px; position: relative; overflow: hidden; isolation: isolate; background: var(--bg); }
/* The section after the hero sits on --bg-alt: fade into it so there's no hard line under the product window,
   and leave room for the window's shadow above the edge */
.hero:has(+ .section-alt) { padding-bottom: 64px; background: linear-gradient(to bottom, var(--bg) 60%, var(--bg-alt)); }

.hero-copy { text-align: center; max-width: 1080px; margin-inline: auto; }
.hero h1 { font-size: var(--fs-display); letter-spacing: -.02em; line-height: var(--lh-tight); max-width: 15em; margin-inline: auto; text-wrap: balance; }
.hero-sub { font-size: var(--fs-lead); line-height: 1.6; color: var(--ink-2); max-width: 760px; margin: 24px auto 0; text-wrap: balance; }

/* Button row (the round .btn-cta lives in base.css), and a short reassurance line under it */
.hero-ctas { display: flex; justify-content: center; align-items: center; gap: 24px; flex-wrap: wrap; margin-top: 32px; }

/* Entrance, once on page load: copy rises in line by line, then the window rises with the glow switching on behind it.
   @starting-style gives the first-render values, so there's no JS and nothing is hidden if it isn't supported.
   Nothing waits on it: the buttons work from the first frame. hero-product.js starts the bubbles after the window lands. */
.hero h1, .hero-sub, .hero-ctas, .product {
  transition: opacity 500ms var(--ease-out), transform 500ms var(--ease-out);
}
.hero-sub { transition-delay: 60ms; }
.hero-ctas { transition-delay: 120ms; }
.product { transition-duration: 600ms; transition-delay: 270ms; }
@starting-style {
  .hero h1, .hero-sub, .hero-ctas { opacity: 0; transform: translateY(8px); }
  .product { opacity: 0; transform: translateY(16px); }
}
@media (prefers-reduced-motion: reduce) {
  .hero h1, .hero-sub, .hero-ctas, .product { transition: opacity 200ms var(--ease-out); }
  @starting-style {
    .hero h1, .hero-sub, .hero-ctas, .product { transform: none; }
  }
}

/* Stage: no backdrop of its own. The frosted-glass frame and the full, rounded window carry the look;
   the padding leaves room for the request bubbles that hang over the window edges. */
.hero-stage {
  margin-top: 32px; position: relative; isolation: isolate;
  padding: 72px 96px 64px;
}
.product::before { /* light frame around the window, on the plain page background */
  content: ""; position: absolute; inset: -12px; z-index: -1;
  border-radius: calc(var(--radius-l) + 12px);
  background: rgba(16, 42, 67, .03); border: 1px solid var(--line);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .product::before { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .12); }
}
:root[data-theme="dark"] .product::before { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .12); }
.product { position: relative; }

/* Product window: a trimmed copy of the real "company summary" screen, in the product's own palette and font */
.app {
  position: relative;
  --p-bg: #FFFFFF; --p-card: #FFFFFF; --p-muted: #F5F3EF; --p-border: #E1DFDA;
  --p-ink: #221F1B; --p-ink-2: #767168; --p-primary: #548575; --p-primary-wash: #EEF3F1;
  --p-success: #519962; --p-warning: #D99E4D; --p-danger: #D93632; --p-settled: #8A6DC3;
  --p-chart-1: #268E6E; --p-chart-2: #8059BB; --p-chart-3: #C48800;
  margin: 0; display: grid; grid-template-columns: 196px 1fr;
  background: var(--p-bg); color: var(--p-ink);
  font-family: "Assistant", var(--font); font-size: var(--px-base); line-height: 1.4;
  border-radius: var(--radius-l); overflow: hidden;
  box-shadow: 0 0 0 1px rgba(16, 42, 67, .08), 0 12px 32px -12px rgba(16, 42, 67, .18);
}
.app .i { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.app .num { font-variant-numeric: tabular-nums; }
.app-side { position: relative; background: var(--p-card); border-inline-end: 1px solid var(--p-border); padding: 14px 10px; display: grid; align-content: start; gap: 2px; }
.app-brand { padding: 2px 8px 16px; }
.app-brand svg { height: 26px; width: auto; color: var(--p-ink); }
.nav-item { position: relative; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; color: var(--p-ink-2); transition: color 200ms ease; }
.nav-item.is-active { background: var(--p-primary-wash); color: var(--p-primary); font-weight: 700; }
/* With JS the selection is a pill that slides between items (hero-product.js sets its position) */
.nav-pill { display: none; }
.js .nav-pill {
  display: block; position: absolute; inset-inline: 10px; top: 0; height: var(--pill-h, 35px); border-radius: 8px;
  background: var(--p-primary-wash); transform: translateY(var(--pill-y, 0px)); transition: transform 450ms var(--ease-glide);
}
.js .nav-item.is-active { background: none; }

.app-body { min-width: 0; display: grid; grid-template-rows: auto 1fr; }
.app-top {
  height: 48px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding-inline: 14px;
  border-bottom: 1px solid var(--p-border); background: var(--p-card);
}
.top-co { display: flex; align-items: center; gap: 12px; color: var(--p-ink-2); }
.top-co .co { display: inline-flex; align-items: center; gap: 6px; color: var(--p-ink); font-weight: 600; white-space: nowrap; }
.top-co .co .i { width: 13px; height: 13px; color: var(--p-ink-2); }
.top-icons { justify-self: end; display: flex; align-items: center; gap: 6px; color: var(--p-ink-2); }
.top-icons .me { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--p-muted); color: var(--p-ink); font-size: var(--px-xs); font-weight: 700; }
.month { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--p-border); border-radius: 8px; padding: 5px 12px; font-weight: 600; white-space: nowrap; }
.month b { width: 7px; height: 7px; border-radius: 50%; background: var(--p-success); }
.month .i { width: 13px; height: 13px; color: var(--p-ink-2); }

.app-main { --am-t: 18px; --am-i: 20px; --am-b: 22px; padding: var(--am-t) var(--am-i) var(--am-b); display: grid; align-content: start; }
/* Screens stack in one cell; the current one shows. Switching is a crossfade: the screens overlap briefly and a
   2px blur on both bridges them into one smooth change (no empty window, no double image). The new one rises 4px. */
.app-screen { grid-area: 1 / 1; display: grid; gap: 14px; align-content: start; min-width: 0; }
.app-screen:not(.is-current) {
  opacity: 0; visibility: hidden; transform: translateY(4px); filter: blur(2px);
  transition: opacity 240ms var(--ease-out), transform 240ms var(--ease-out), filter 240ms var(--ease-out), visibility 0s 240ms;
}
.app-screen.is-current { transition: opacity 320ms var(--ease-out) 60ms, transform 400ms var(--ease-out) 60ms, filter 320ms var(--ease-out) 60ms, visibility 0s; }
.company { font-size: var(--px-xl); font-weight: 700; }
.row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.panel { background: var(--p-card); border: 1px solid var(--p-border); border-radius: 12px; padding: 16px; min-width: 0; }
.panel header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.panel h5 { margin: 0; font-size: var(--px-base); font-weight: 700; }
.to-checks { font-size: var(--px-sm); font-weight: 600; color: #FFFFFF; background: var(--p-primary); border-radius: 6px; padding: 3px 9px; }
.k { display: flex; align-items: center; gap: 6px; font-size: var(--px-sm); color: var(--p-ink-2); }
.k i { width: 7px; height: 7px; border-radius: 50%; background: var(--c); flex: none; }

.stats { display: grid; grid-template-columns: 1fr 1fr; }
.stats > div { display: grid; gap: 1px; padding: 8px 12px; }
.stats > div:nth-child(odd) { border-inline-end: 1px solid var(--p-border); padding-inline-start: 0; }
.stats > div:nth-child(-n+2) { border-bottom: 1px solid var(--p-border); }
.stats b { font-size: var(--px-2xl); font-weight: 600; line-height: 1.2; text-align: right; }
.stats small, .kpi small, .moves small { font-size: var(--px-xs); color: var(--p-ink-2); }

.moves-body { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: end; }
.moves ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.moves li { display: flex; justify-content: space-between; align-items: center; padding: 6px 8px; border-radius: 8px; }
.moves li.is-on { background: var(--p-muted); }
.moves li span { display: grid; font-weight: 600; font-size: var(--px-sm); }
.moves li b { font-weight: 600; font-size: var(--px-md); }
.bars { display: flex; align-items: flex-end; gap: 4px; height: 112px; }
.bars i { flex: 1; height: var(--h); background: #B7D3C8; border-radius: 2px 2px 0 0; }
.bars i:last-child { background: var(--p-chart-1); } /* current month: time runs right to left, so it is last */

.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.kpi { display: grid; gap: 2px; padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, var(--c) 6%, var(--p-card)); box-shadow: inset 0 0 0 1.5px var(--c); }
.kpi.is-plain { --c: var(--p-border); background: var(--p-card); }
.kpi.is-plain .k i { background: none; box-shadow: inset 0 0 0 1px var(--p-ink-2); }
.kpi b { font-size: var(--px-lg); font-weight: 600; }
.kpi em { font-style: normal; font-weight: 600; color: var(--p-ink); }
.chart { display: block; width: 100%; height: 84px; margin-top: 12px; overflow: visible; }
.chart .grid { stroke: var(--p-border); stroke-width: 1; fill: none; vector-effect: non-scaling-stroke; }
.chart .line { fill: none; stroke-width: 2; vector-effect: non-scaling-stroke; }
.chart .line.employer { stroke: var(--p-chart-3); } .chart .area.employer { fill: url(#g-employer); }
.chart .line.gross { stroke: var(--p-chart-2); } .chart .area.gross { fill: url(#g-gross); }
.chart .line.net { stroke: var(--p-chart-1); } .chart .area.net { fill: url(#g-net); }
.chart-x { display: flex; justify-content: space-between; font-size: var(--px-xs); color: var(--p-ink-2); margin-top: 6px; }

/* The summary's head: the company, and the month's main action, closing it */
.home-head { display: flex; align-items: center; gap: 8px; }
.home-head .company { margin-inline-end: auto; }

/* Employees screen, as in the product: the list column and the payslip editor. It runs edge to edge in the window
   (cancelling .app-main's padding), like the product's three-column layout. */
.emp-screen { grid-template-columns: 172px minmax(0, 1fr); gap: 0; align-items: stretch; margin: calc(var(--am-t) * -1) calc(var(--am-i) * -1) calc(var(--am-b) * -1); }
.emp-list { display: grid; gap: 10px; align-content: start; padding: 14px 10px; border-inline-end: 1px solid var(--p-border); background: var(--p-card); min-width: 0; }
.emp-list header { display: grid; }
.emp-list h5 { margin: 0; font-size: var(--px-md); font-weight: 700; }
.emp-list header small { font-size: var(--px-xs); color: var(--p-ink-2); }
.el-search { display: flex; align-items: center; gap: 6px; border: 1px solid var(--p-border); border-radius: 8px; padding: 6px 8px; font-size: var(--px-xs); color: var(--p-ink-2); white-space: nowrap; overflow: hidden; }
.el-search .i { width: 13px; height: 13px; }
.cs-chips span { font-size: var(--px-2xs); padding: 2px 7px; border: 1px solid var(--p-border); border-radius: 999px; color: var(--p-ink-2); white-space: nowrap; }
.cs-chips .is-on { background: var(--p-primary-wash); color: var(--p-primary); border-color: transparent; font-weight: 700; }
.emp-list ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.emp-list li { display: grid; grid-template-columns: 26px minmax(0, 1fr) 6px; align-items: center; gap: 8px; padding: 6px; border-radius: 8px; transition: background-color 250ms ease; }
.emp-list li.is-on { background: var(--p-primary-wash); }
.emp-list .av { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--p-muted); color: var(--p-ink-2); font-size: var(--px-2xs); font-weight: 700; transition: background-color 250ms ease, color 250ms ease; }
.emp-list li.is-on .av { background: var(--p-primary); color: #FFFFFF; }
.emp-list .nm { display: grid; font-size: var(--px-sm); font-weight: 600; line-height: 1.25; white-space: nowrap; overflow: hidden; }
.emp-list .nm small { font-size: var(--px-2xs); font-weight: 400; color: var(--p-ink-2); }
.emp-list li > i { width: 6px; height: 6px; border-radius: 50%; background: var(--p-info, #4A7FC1); }

.emp-editor { display: grid; gap: 12px; align-content: start; padding: 16px 18px 20px; min-width: 0; transition: opacity 140ms var(--ease-out); }
.emp-editor.is-switching { opacity: .3; } /* moving to the next employee: a short dip while the editor fills with them */
.ee-head { display: flex; align-items: center; gap: 10px; }
.ee-who { display: grid; }
.ee-who small { font-size: var(--px-xs); color: var(--p-ink-2); }
.ee-btns { margin-inline-start: auto; display: flex; gap: 6px; }
.ee-btn { display: inline-flex; align-items: center; gap: 4px; padding: 5px 10px; border: 1px solid var(--p-border); border-radius: 8px; background: var(--p-card); color: var(--p-ink); font-size: var(--px-xs); font-weight: 600; white-space: nowrap; }
.ee-btn.is-primary { background: var(--p-primary); border-color: transparent; color: #FFFFFF; }
.ee-btn .i { width: 12px; height: 12px; }
.ee-tabs { display: flex; gap: 16px; border-bottom: 1px solid var(--p-border); font-size: var(--px-sm); color: var(--p-ink-2); white-space: nowrap; overflow: hidden; }
.ee-tabs span { display: inline-flex; align-items: center; gap: 5px; padding: 0 2px 8px; margin-bottom: -1px; border-bottom: 2px solid transparent; transition: color 200ms ease, border-color 200ms ease; }
.ee-tabs .is-on { color: var(--p-ink); font-weight: 700; border-bottom-color: var(--p-primary); }
.ee-tabs .i { width: 13px; height: 13px; }
/* Tabs: the panes share one cell and crossfade (hero-product.js can switch them) */
.ee-kpis .num, .pv .num { transition: opacity 100ms var(--ease-out); } /* figures that change swap with a short fade */
.ee-kpis .num.is-swapping, .pv .num.is-swapping { opacity: 0; }
.ee-panes { display: grid; }
.ee-pane { grid-area: 1 / 1; display: grid; gap: 12px; align-content: start; min-width: 0; transition: opacity 240ms var(--ease-out), visibility 0s; }
.ee-pane:not(.is-current) { opacity: 0; visibility: hidden; transition: opacity 200ms var(--ease-out), visibility 0s 200ms; }

/* Payslip tab: the totals strip, the editable components, work days and absences */
.ee-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.ee-kpis > div { display: grid; gap: 2px; padding: 10px 12px; border: 1px solid var(--p-border); border-radius: 10px; min-width: 0; }
.ee-kpis span { font-size: var(--px-2xs); color: var(--p-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ee-kpis b { font-size: var(--px-lg); font-weight: 700; }
.ee-kpis .is-net { background: var(--p-primary-wash); border-color: transparent; }
.ee-kpis .is-net b { color: var(--p-primary); }
.ee-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 12px; align-items: start; }
.ee-side { display: grid; gap: 12px; }
.ee-comps { padding: 0; overflow: hidden; }
.ee-comps header { padding: 14px 16px 2px; }
.cr { display: grid; grid-template-columns: minmax(0, 1fr) 124px; gap: 10px; align-items: center; padding: 8px 16px; border-top: 1px solid var(--p-border); font-size: var(--px-sm); font-weight: 600; }
.cr small { display: block; font-size: var(--px-2xs); font-weight: 400; color: var(--p-ink-2); }
.cr-head { padding-block: 6px; background: var(--p-muted); color: var(--p-ink-2); font-size: var(--px-xs); }
.cr-add { display: flex; gap: 6px; color: var(--p-primary); font-size: var(--px-xs); }
.cr-add .i { width: 12px; height: 12px; }
.ai-mark { display: inline-block; margin-inline-start: 8px; padding: 1px 5px; border-radius: 4px; background: var(--mark); color: var(--mark-ink); font-size: var(--px-2xs); font-style: normal; font-weight: 700; line-height: 1.3; vertical-align: 1px; }
/* Employer contributions: label and amount rows */
.pv { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 6px 0; border-top: 1px solid var(--p-border); font-size: var(--px-sm); }
.ee-prov header + .pv { border-top: 0; padding-top: 0; }
.pv small { margin-inline-start: 6px; font-size: var(--px-2xs); color: var(--p-ink-2); }
.pv b { font-weight: 600; }
.pv.is-total { font-weight: 700; }
.pv.is-total b { font-weight: 700; }

/* What the AI changed is marked in lime, the site's colour for "the AI did this": an "AI" tag that appears with the
   change, and a lime wash that fades out (hero-product.js adds .is-in / .is-ai / .is-fixed) */
@keyframes ai-wash { from { background-color: color-mix(in srgb, var(--mark) 32%, transparent); } to { background-color: transparent; } }
.js .fund-new.is-in .fr:not(.fr-head) { animation: ai-wash 2s var(--ease-out) 300ms both; }
.js .abs-reserve.is-ai .in, .js .tr.is-flag.is-fixed { animation: ai-wash 2s var(--ease-out) both; }
.js .abs-reserve .ai-mark, .js .tr.is-flag .ai-mark { opacity: 0; transition: opacity 250ms var(--ease-out); }
.js .abs-reserve.is-ai .ai-mark, .js .tr.is-flag.is-fixed .ai-mark { opacity: 1; }

/* Inputs, as the product's: a bordered field with its unit at the end */
.in { display: inline-flex; align-items: center; justify-content: space-between; gap: 6px; min-width: 0; height: 30px; padding: 0 10px; border: 1px solid var(--p-border); border-radius: 8px; background: var(--p-card); font-variant-numeric: tabular-nums; }
.in i { font-style: normal; font-size: var(--px-xs); color: var(--p-ink-2); }
/* The AI types into a field: a lime focus ring and a caret while the value is typed in (hero-product.js) */
.in { transition: border-color 150ms ease, box-shadow 150ms ease; }
.in.is-typing { border-color: #9BCB14; box-shadow: 0 0 0 3px color-mix(in srgb, var(--mark) 35%, transparent); }
.in.is-typing .tv::after { content: ""; display: inline-block; width: 1px; height: 1em; margin-inline-start: 1px; vertical-align: -2px; background: var(--p-ink); }
.in.is-ro { background: var(--p-muted); color: var(--p-ink-2); }
.fld { display: grid; gap: 4px; font-size: var(--px-sm); }
.fld label { font-size: var(--px-xs); color: var(--p-ink-2); }
.fld small { font-size: var(--px-2xs); color: var(--p-ink-2); }
.panel > .fld + .fld { margin-top: 10px; }
.fld-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fr + .fld-grid { margin-top: 14px; }
/* The AI's new component: closed (no height) until the request adds it, then the row opens and fades in */
.js .comp-new {
  max-height: 0; padding-block: 0; border-top-width: 0; overflow: hidden; opacity: 0; transform: translateY(-6px);
  transition: max-height 400ms var(--ease-out), padding 400ms var(--ease-out), opacity 300ms var(--ease-out) 100ms, transform 300ms var(--ease-out) 100ms, background-color 600ms ease;
}
.js .comp-new.is-in { max-height: 60px; padding-block: 8px; border-top-width: 1px; opacity: 1; transform: none; animation: ai-wash 2s var(--ease-out) 300ms both; }

/* Pension funds tab */
.fr { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, 80px); gap: 8px; align-items: center; padding: 8px 0; border-top: 1px solid var(--p-border); font-size: var(--px-sm); }
.fr-head { border-top: 0; padding-top: 0; color: var(--p-ink-2); font-size: var(--px-xs); }
.fr b { display: block; font-weight: 600; }
.fr small { font-size: var(--px-2xs); color: var(--p-ink-2); }
.fld-toggle { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: var(--px-sm); }
.tg { position: relative; width: 28px; height: 16px; border-radius: 999px; background: var(--p-border); }
.tg::after { content: ""; position: absolute; top: 2px; inset-inline-start: 2px; width: 12px; height: 12px; border-radius: 50%; background: #FFFFFF; }
.tg.is-on { background: var(--p-primary); }
.tg.is-on::after { inset-inline-start: auto; inset-inline-end: 2px; }

/* Yasmin's new pension fund: the tab is empty until the request adds it, then the fund opens in */
.fund-empty { margin: 0; padding: 6px 0 2px; font-size: var(--px-sm); color: var(--p-ink-2); }
html:not(.js) .fund-empty, .js .ee-pane:has(.fund-new.is-in) .fund-empty { display: none; }
.js .fund-new { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows 450ms var(--ease-out), opacity 300ms var(--ease-out) 150ms; }
.js .fund-new.is-in { grid-template-rows: 1fr; opacity: 1; }
.fund-new > div { min-height: 0; overflow: hidden; }

/* Absences tab */
.seg { display: inline-flex; border: 1px solid var(--p-border); border-radius: 8px; overflow: hidden; font-size: var(--px-xs); }
.seg span { padding: 3px 9px; color: var(--p-ink-2); }
.seg .is-on { background: var(--p-primary-wash); color: var(--p-primary); font-weight: 700; }
.bal { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.bal > div { display: grid; gap: 2px; padding: 10px; border: 1px solid var(--p-border); border-radius: 8px; }
.bal span { font-size: var(--px-xs); color: var(--p-ink-2); }
.bal b { font-size: var(--px-lg); font-weight: 700; }

.kpi { position: relative; }

/* Before/after pairs: both states share one cell and crossfade, so nothing in the layout moves */
.swap { display: inline-grid; }
.swap > * { grid-area: 1 / 1; transition: opacity 250ms var(--ease-out), transform 250ms var(--ease-out); }
.swap > .s-after { opacity: 0; transform: translateY(3px); }
.swap.is-in > .s-before { opacity: 0; }
.swap.is-in > .s-after { opacity: 1; transform: none; }

/* The payslip's state next to the employee's name: a draft until the AI's change is saved */
.slip-state { font-size: var(--px-xs); font-weight: 600; }
.slip-state > * { border-radius: 999px; padding: 3px 10px; justify-self: start; }
.slip-state .s-before { background: #FAEEDA; color: #805307; }
.slip-state .s-after { background: var(--p-primary-wash); color: var(--p-primary); }
/* Yossi's reserve duty: the days fill in from the attached form, which shows next to them */
.abs-reserve { position: relative; }
.file-chip { margin-inline-start: 6px; font-size: var(--px-2xs); font-weight: 600; color: var(--p-ink-2); background: var(--p-muted); border-radius: 6px; padding: 1px 6px; }
.js .abs-reserve .file-chip { opacity: 0; transition: opacity 250ms var(--ease-out); }
.js .abs-reserve.is-ai .file-chip { opacity: 1; }

/* Controls screen, as in the product: totals, the review panel with its findings, and the employees table */
.cs-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 12px; align-items: start; }
.cs-review { display: grid; gap: 10px; }
.cs-review header { margin-bottom: 0; }
.cs-count { font-size: var(--px-xs); color: var(--p-ink-2); }
.cs-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.cs-find, .cs-find.ctl-ron > div { display: grid; gap: 4px; }
.cs-find { padding: 10px; border: 1px solid var(--p-border); border-radius: 8px; font-size: var(--px-xs); line-height: 1.5; color: var(--p-ink-2); transition: background-color 250ms ease, border-color 250ms ease; }
/* Ron's finding opens only when the controls catch him (hero-product.js adds .is-found) */
.js .ctl-ron { grid-template-rows: 0fr; padding-block: 0; border-color: transparent; opacity: 0; transition: grid-template-rows 400ms var(--ease-out), padding 400ms var(--ease-out), opacity 300ms var(--ease-out) 100ms, border-color 300ms ease, background-color 250ms ease; }
.js .ctl-ron.is-found { grid-template-rows: 1fr; padding-block: 10px; border-color: var(--p-border); opacity: 1; }
.cs-find.ctl-ron > div { min-height: 0; overflow: hidden; }
.cs-find.ctl-ron.is-in { background: var(--p-primary-wash); border-color: var(--p-primary); }
.sev-swap { margin-inline-start: auto; }
.sev-swap .sev { margin: 0; justify-self: end; }
.cf-who { display: flex; align-items: center; gap: 6px; }
.cf-who b { color: var(--p-ink); font-size: var(--px-sm); }
.cf-title { color: var(--p-ink); font-size: var(--px-sm); font-weight: 700; }
.sev, .st { font-style: normal; font-size: var(--px-2xs); font-weight: 700; border-radius: 999px; padding: 1px 7px; white-space: nowrap; }
.sev { margin-inline-start: auto; }
.sev.is-err, .st.is-err { background: #FBE9E8; color: #B42A26; }
.sev.is-info { background: #E8F0FA; color: #3C6AA6; }
.st.is-ok, .sev.is-ok { background: #E6F2EA; color: #3D7A4C; }
.st.is-wait { background: var(--p-muted); color: var(--p-ink-2); }
/* Each row's status: "checking…", then passed (or caught, then fixed). The states share one cell and crossfade. */
.sts { display: inline-grid; justify-items: start; }
.sts > * { grid-area: 1 / 1; opacity: 0; transition: opacity 200ms var(--ease-out); }
html:not(.js) .sts > .is-ok, .js .tr:not(.is-checked) .sts > .is-wait,
.js .tr.is-checked:not(.is-flag) .sts > .is-ok, .js .tr.is-flag.is-fixed .sts > .is-ok,
.js .tr.is-flag.is-checked:not(.is-fixed) .sts > .is-err { opacity: 1; }
.ctl-detail { display: grid; }
.cs-table { padding: 0; overflow: hidden; }
.cs-tools { display: flex; align-items: center; gap: 8px; padding: 12px 14px; }
.cs-tools h5 { margin: 0; font-size: var(--px-base); font-weight: 700; }
.cs-tools .el-search { margin-inline-start: auto; }
.tr { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) repeat(2, minmax(0, .9fr)); gap: 8px; align-items: center; padding: 9px 14px; border-top: 1px solid var(--p-border); font-size: var(--px-xs); }
.tr > .num { text-align: left; }
.tr > span:first-child { display: flex; align-items: center; gap: 6px; min-width: 0; white-space: nowrap; font-weight: 600; color: var(--p-ink); }
.tr.th, .tr-total { background: var(--p-muted); }
.tr.th > span { color: var(--p-ink-2); font-weight: 600; }
.tr { transition: background-color 300ms ease; }
.js .tr.is-flag.is-checked:not(.is-fixed) { background: #FFF8F7; }
.tr-total { font-weight: 700; }

/* The AI cursor (an arrow with a lime dot) that operates the product for each request (hero-product.js moves it with transform only) */
.ai-cursor {
  position: absolute; top: 0; left: 0; z-index: 1; pointer-events: none; /* above the screens, below the request bubbles */
  display: flex; align-items: flex-start; gap: 2px; direction: ltr; /* the dot trails the arrow (bottom-right), never over the target */
  opacity: 0; will-change: transform;
  transition: transform 700ms var(--ease-glide), opacity 300ms var(--ease-out); /* duration is set per move by hero-product.js */
}
.ai-cursor.is-on { opacity: 1; }
.ai-cursor svg { width: 20px; height: 20px; fill: #221F1B; stroke: #FFFFFF; stroke-width: 1.5; stroke-linejoin: round; transition: transform 120ms var(--ease-out); }
.ai-cursor b { width: 9px; height: 9px; margin: 15px 0 0 -2px; border-radius: 50%; background: var(--orb); animation: orb-spin 4s linear infinite; box-shadow: 0 0 0 2px #FFFFFF, 0 1px 3px rgba(16, 42, 67, .3); } /* the AI's orb, as in the feed */
.ai-cursor i { position: absolute; top: 2px; left: 4px; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; border: 2px solid var(--mark); opacity: 0; }
.ai-cursor.is-click svg { transform: scale(.9); }
/* Its name tag, as on a collaborator's cursor: this is the AI working, not the visitor */
.ai-name {
  position: absolute; top: 18px; left: 24px; /* below and right of the arrow; off the flow, so the arrow's tip stays put */
  padding: 2px 8px; border-radius: 999px; direction: rtl; white-space: nowrap;
  font-style: normal; font-size: var(--px-xs); font-weight: 700; color: var(--mark-ink);
  background: linear-gradient(90deg, var(--aurora-teal), var(--mark)); box-shadow: 0 1px 3px rgba(16, 42, 67, .25);
}
.ai-cursor.is-flip .ai-name { left: auto; right: calc(100% - 10px); } /* near the right edge: below and left of the arrow */
.ai-cursor.is-click i { animation: ai-click 450ms var(--ease-out); }
@keyframes ai-click { from { opacity: .9; transform: scale(.4); } to { opacity: 0; transform: scale(1.6); } }
/* Closing the month is the user's own click: a plain arrow, without the AI's orb and name tag, with a violet ring */
.ai-cursor.is-user b, .ai-cursor.is-user .ai-name { display: none; }
.ai-cursor.is-user i { border-color: var(--aurora-violet); }

/* Request bubbles floating over the window edges: things people ask the AI to do, with the AI's status */
.blob {
  position: relative;
  background: var(--surface); color: var(--ink); border: 1px solid var(--line);
  border-radius: 18px; border-start-start-radius: 4px; /* chat-bubble corner, toward the sender */
  padding: 10px 14px; font-size: var(--fs-sm); line-height: 1.4;
  box-shadow: 0 1px 2px rgba(14, 18, 38, .06); /* a hairline only: frames, not shadows, carry the site */
  display: grid; gap: 6px; justify-items: start;
}
.blob .who { display: flex; align-items: center; gap: 8px; font-size: var(--fs-2xs); color: var(--ink-3); }
.blob .who i.is-ai { background: var(--orb); } /* the AI's own steps: its orb in place of a sender's initials */
.blob .who i { font-style: normal; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-size: var(--fs-micro); font-weight: var(--w-head); }
.blob p { text-wrap: balance; } /* short two-liners: even lines, no lone word */
.blob .ai-text { white-space: nowrap; } /* one line, so the pill hugs its text; keep the statuses short enough to fit */
.blob p { font-weight: var(--w-head); }
.blob .file { font-size: var(--fs-2xs); font-weight: var(--w-head); color: var(--ink-2); background: var(--panel); border-radius: 6px; padding: 4px 8px; }
.blob .ai {
  display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-2xs); font-weight: var(--w-head);
  background: color-mix(in srgb, var(--mark) 30%, var(--surface)); color: var(--ink);
  border-radius: 999px; padding: 4px 12px 4px 6px;
}
.blob .ai b { width: 16px; height: 16px; border-radius: 5px; background: var(--mark); display: grid; place-items: center; flex: none; }
.blob .ai b::before { content: ""; width: 10px; height: 10px; background: var(--mark-ink); -webkit-mask: var(--tick) center / contain no-repeat; mask: var(--tick) center / contain no-repeat; }
.blob .ai.is-working { background: var(--panel); color: var(--ink-2); }
/* While it works, the pill's badge is the AI's orb, spinning */
.blob .ai.is-working b { border-radius: 50%; background: var(--orb); animation: orb-spin 1.2s linear infinite; }
.blob .ai.is-working b::before { content: none; }
/* The "working → handled" switch: text crossfades through a light blur, the pill turns lime, the badge grows in */
.blob .ai { transition: background-color 200ms var(--ease-out), color 200ms var(--ease-out); }
.blob .ai b { transition: transform 200ms var(--ease-out); }
.blob .ai:not(.is-working) b { animation: tick-in 260ms var(--ease-out); } /* the ✓ grows in as the pulse ends */
@keyframes tick-in { from { transform: scale(.7); opacity: 0; } }
.blob .ai-text { transition: opacity 200ms var(--ease-out), filter 200ms var(--ease-out); }
.blob .ai-text.is-swapping { opacity: 0; filter: blur(2px); transition-duration: 120ms; }

/* The AI's queue hangs off the window's top corner (start = right in RTL), its bottom over the sidebar's logo and just
   above its first item, so the selection can still be seen moving. All four requests are always listed: waiting ones
   dim, done ones with a lime ✓, and the one being handled open as its bubble. A row opens and closes its own height
   (0fr → 1fr), and the next one opens as the last closes, so the queue keeps its size while its rows glide.
   The AI shows as an aurora orb (--orb): in the status pill while it works, and on the AI cursor. */
.hero { --orb: conic-gradient(var(--aurora-teal), var(--mark), var(--aurora-blue), var(--aurora-teal)); }
@keyframes orb-spin { to { rotate: 360deg; } }
/* One panel: the email is its header, the tasks grow out of it below. On desktop it docks low over the sidebar's
   empty lower part, below the menu items the cursor clicks, hanging a little past the window's edge; without a
   sidebar (≤1100px) only the request being handled shows, low over the window. It shows only while it holds something (.is-empty, hero-product.js). */
.ai-queue {
  position: absolute; z-index: 2; bottom: 16px; inset-inline-start: -64px; width: 256px;
  list-style: none; margin: 0; padding: 4px 12px 10px; display: grid; pointer-events: none;
  background: var(--bg-alt); border: 1px solid var(--line); border-radius: 16px;
  box-shadow: 0 1px 2px rgba(14, 18, 38, .06), 0 12px 28px -18px rgba(14, 18, 38, .25);
  transition: opacity 300ms var(--ease-out), transform 300ms var(--ease-out);
}
.js .ai-queue.is-empty { opacity: 0; transform: translateY(6px); }
/* What closes fades out first (150ms), and what opens fades in only once its space is nearly open (from 350ms), so
   nothing shows while it's still cut off by its row */
.q-line, .q-body { display: grid; transition: grid-template-rows 550ms var(--ease-in-out), opacity 150ms var(--ease-out); }
.q-row.is-active .q-body, .q-row:not(.is-active) .q-line { transition: grid-template-rows 550ms var(--ease-in-out), opacity 200ms var(--ease-out) 350ms; }
.q-line > * { min-height: 0; overflow: hidden; }
/* The bubble is clipped exactly to its row; padding inside the clip leaves room for its shadow, and the negative
   margins give all of it back, so a closed row takes no space and an open one is its bubble plus a 6px gap */
.q-body > * { min-height: 0; overflow: hidden; padding: 0 24px 26px; margin: 0 -24px -26px; }
.q-body .blob { margin-bottom: 6px; }
.q-line { grid-template-rows: 1fr; } /* explicit, so it animates to and from 0fr */
.q-body { grid-template-rows: 0fr; opacity: 0; }
.q-row.is-active .q-line { grid-template-rows: 0fr; opacity: 0; }
.q-row.is-active .q-body { grid-template-rows: 1fr; opacity: 1; }
/* Before a round the queue is empty: the lines arrive one by one (each opens its height, then fades in), and at the
   round's end they close again, quickly, last first (hero-product.js adds and removes .is-out) */
.js .q-row.is-out .q-line { grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows 450ms var(--ease-in-out), opacity 150ms var(--ease-out); }
/* The client's one email, the panel's header: it opens first, then the tasks grow out of it and its subtitle turns
   from the attachments to the request count */
.q-mail { display: grid; }
.mail-row { display: grid; grid-template-rows: 1fr; transition: grid-template-rows 500ms var(--ease-in-out), opacity 300ms var(--ease-out); }
.mail-row > div { min-height: 0; overflow: hidden; }
.js .q-mail.is-out .mail-row { grid-template-rows: 0fr; opacity: 0; }
.mail-in { display: flex; align-items: center; gap: 10px; padding: 8px 0; }
.mail-in i { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); flex: none; }
.mail-in > span { display: grid; min-width: 0; line-height: 1.3; }
.mail-in b { font-size: var(--fs-sm); font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mail-sub small { font-size: var(--fs-2xs); color: var(--ink-2); }
/* The email's body, which the AI reads: each request in it lights up in lime as it turns into a task below. Open only
   while the AI reads (.is-reading, hero-product.js); otherwise folded into the header. */
.mail-body { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows 500ms var(--ease-in-out), opacity 300ms var(--ease-out); }
.mail-body > div { min-height: 0; overflow: hidden; }
.js .q-mail.is-reading .mail-body { grid-template-rows: 1fr; opacity: 1; }
.mail-body p { margin: 0 0 10px; font-size: var(--fs-2xs); line-height: 1.7; color: var(--ink-2); text-wrap: pretty; }
.mp { padding: 1px 2px; border-radius: 4px; -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: background-color 250ms var(--ease-out), color 250ms var(--ease-out); }
.mp.is-hl { background: color-mix(in srgb, var(--mark) 45%, transparent); color: var(--ink); }
/* The AI's own steps sit under a divider, apart from the email's requests; their waiting mark is the AI's orb */
.q-sep { display: grid; grid-template-rows: 1fr; transition: grid-template-rows 400ms var(--ease-in-out), opacity 250ms var(--ease-out); }
.q-sep > div { min-height: 0; overflow: hidden; }
.js .q-sep.is-out { grid-template-rows: 0fr; opacity: 0; }
.q-sep > div > span { display: block; padding: 10px 2px 2px; border-top: 1px solid var(--line); font-size: var(--fs-micro); font-weight: 700; color: var(--ink-2); }
.q-sep + .q-row .q-line b { border-top: 0; }
/* The user's step, in the "you approve" violet: their avatar in the bubble, and a still dot while it waits for them */
.q-mail svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* A task line inside the panel: waiting (grey, an empty ring) or done (a lime ✓), split by hairlines */
.q-line b {
  display: flex; align-items: center; gap: 8px; padding: 6px 2px; border-top: 1px solid var(--line);
  font-size: var(--fs-xs); font-weight: var(--w-ui); color: var(--ink-2);
  transition: color 300ms var(--ease-out);
}
.q-line b::before {
  content: ""; display: grid; place-items: center; width: 15px; height: 15px; box-sizing: border-box; flex: none;
  border-radius: 50%; border: 1.5px solid var(--line);
  font-size: var(--fs-micro); font-weight: var(--w-head); color: var(--mark-ink);
}
.q-row.is-done .q-line b { color: var(--ink); }
.q-row.is-aistep .q-line b::before { width: 12px; height: 12px; margin-inline: 1.5px; border: 0; background: var(--orb); }
.q-row.is-done .q-line b::before { width: 15px; height: 15px; margin-inline: 0; border: 0; border-radius: 5px; background: var(--tick-ink) center / 10px no-repeat, var(--mark); }
.hero.is-paused .blob .ai b, .hero.is-paused .ai-cursor b { animation-play-state: paused; }

/* Pause/play for the hero's motion (WCAG 2.2.2): bottom corner of the stage, quiet until hovered or focused */
.hero-pause {
  position: absolute; bottom: 16px; inset-inline-end: 16px; z-index: 3;
  display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  background: var(--surface); color: var(--ink-2); border: 1px solid var(--line); cursor: pointer;
  transition: color 150ms ease, border-color 150ms ease;
}
.hero-pause[hidden] { display: none; }
@media (hover: hover) and (pointer: fine) { .hero-pause:hover { color: var(--ink); border-color: var(--ink-3); } }
.hero-pause svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hero-pause .i-play { fill: currentColor; stroke: none; display: none; }
.hero-pause[aria-pressed="true"] .i-play { display: block; }
.hero-pause[aria-pressed="true"] .i-pause { display: none; }
@media (max-width: 900px) { .hero-pause { bottom: 12px; inset-inline-end: 12px; } }

/* Reduced motion: keep the one-at-a-time story, but as a plain crossfade with no movement or blur */
@media (prefers-reduced-motion: reduce) {
  .q-line, .q-body, .q-row.is-active .q-body, .q-row:not(.is-active) .q-line, .js .q-row.is-out .q-line, .js .fund-new, .js .ctl-ron, .mail-row, .mail-body, .q-sep { transition: opacity 200ms var(--ease-out); }
  .ai-cursor { display: none; }
  .blob .ai.is-working b, .blob .ai:not(.is-working) b, .js .comp-new.is-in, .js .fund-new.is-in .fr, .js .abs-reserve.is-ai .in, .js .tr.is-flag.is-fixed { animation: none; }
  .blob .ai-text.is-swapping { filter: none; }
  .app-screen, .app-screen:not(.is-current) { filter: none; }
  .swap > .s-after { transform: none; }
  .app-screen, .app-screen:not(.is-current), .js .comp-new { transform: none; }
  .js .nav-pill { transition: none; }
}

@media (max-width: 1240px) {
  .hero-stage { padding-inline: 64px; }
  .ai-queue { inset-inline-start: -44px; width: 236px; } /* still within the sidebar's width */
}
@media (max-width: 1100px) {
  .app { grid-template-columns: 1fr; }
  .app-side { display: none; }
  /* no sidebar to dock the panel over: just the request being handled, low over the window, as on phones */
  .ai-queue { bottom: 24px; inset-inline-start: 12px; padding: 0; background: none; border: 0; box-shadow: none; }
  .q-row:not(.is-active), .q-sep { display: none; }
  /* the email stays, as a small card above the request being handled (not over the AI's own steps) */
  .ai-queue .q-mail {
    margin-bottom: 6px; padding: 0 12px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line);
    box-shadow: 0 1px 2px rgba(14, 18, 38, .06); transition: opacity 300ms var(--ease-out), visibility 0s;
  }
  .js .ai-queue .q-mail.is-out { opacity: 0; visibility: hidden; transition: opacity 200ms var(--ease-out), visibility 0s 200ms; }
  .ai-queue:has(.q-row.is-aistep.is-active) .q-mail { display: none; }
  .ai-queue.is-top { top: 58px; bottom: auto; } /* when the step's change is in the window's lower half (hero-product.js) */
}
@media (max-width: 900px) {
  .hero { padding-top: 64px; }
  .hero-stage { padding: 48px 24px 64px; } /* room below the window for the pause button */
  .row-2 { grid-template-columns: 1fr; }
  .moves { display: none; }
  .kpis { grid-template-columns: 1fr 1fr; }
  .emp-screen { grid-template-columns: 1fr; }
  .emp-list { display: none; }
  .ee-kpis { grid-template-columns: 1fr 1fr; }
  .ee-grid, .cs-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .hero h1 { font-size: clamp(32px, 10.1vw, 38px); } /* largest size that keeps the headline on 2 lines */
  .hero-sub { margin-top: 16px; }
  .hero-ctas { margin-top: 24px; }
  .hero-ctas .btn { flex: 1 1 100%; }
  .hero, .hero:has(+ .section-alt) { padding-bottom: 0; }
  .hero + .section { padding-top: 48px; } /* the window's pause button already spaces it from the next heading */
  .hero-stage { margin-top: 16px; padding: 48px 16px 56px; margin-inline: calc(var(--gutter) * -.5); }
  .product::before { inset: -8px; border-radius: calc(var(--radius-l) + 8px); }
  .app-main { --am-t: 14px; --am-i: 12px; --am-b: 16px; }

  .stats b { font-size: var(--fs-h4); }
  .kpi b { font-size: var(--fs-sm); }
  .kpi small { display: none; }
  .chart { height: 110px; }
  .ee-btns, .ee-tabs .i { display: none; }
  .tr { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, .9fr); }
  /* The window has to fit one phone screen, so the queue at its bottom is seen with it: only what the story uses stays.
     Summary without its chart; the payslip without its totals, contributions and "add" row; six employees in controls. */
  .chart, .chart-x, .ee-kpis, .ee-prov, .cr-add { display: none; }
  .home-head .company { white-space: nowrap; }
  .cs-table .tr:not(.th):not(.tr-total):nth-child(n + 9) { display: none; }
  .fr { grid-template-columns: repeat(3, minmax(0, 1fr)); } /* the fund's name on its own row, its three rates below */
  .fr > :first-child { grid-column: 1 / -1; }
  .tr > :nth-child(3) { display: none; }
  .blob { font-size: var(--fs-xs); }
  .ai-queue { width: min(290px, calc(100% - 32px)); bottom: 16px; inset-inline-start: 16px; }
  }

/* Night hero: the copy sits in a dark, rounded panel lit by a live WebGL shader (hero-night.js): soft navy/blue smoke
   with teal and lime aurora curtains, the site's northern-lights theme. The product window hangs over the panel's
   bottom edge, with a lime beam running round its frame. */

.hero-night { position: absolute; z-index: -1; pointer-events: none;
  top: 8px; inset-inline: 12px; bottom: 36%;
  border-radius: var(--radius-xl); overflow: hidden; background: var(--night);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
}
.hero-night canvas { display: block; width: 100%; height: 100%; opacity: 0; transition: opacity 1200ms var(--ease-out); }
.hero-night.is-on canvas { opacity: 1; } /* the navy panel shows at once; the light fades in once the shader has drawn */

.hero-copy { --ink: #FFFFFF; --ink-2: rgba(237, 239, 248, .74); --ink-3: rgba(237, 239, 248, .5); color: var(--ink); }
.hero-copy :focus-visible { outline-color: #FFFFFF; } /* the brand-coloured ring doesn't show on the night panel */
.hero h1 { color: #FFFFFF; }

/* CTA turns lime on the dark panel, with an ink arrow */
.hero-ctas .btn-primary { background: var(--mark); color: var(--mark-ink); box-shadow: 0 12px 32px -10px rgba(177, 230, 30, .3); }
.hero-ctas .btn-primary:hover { background: #C3F03A; }
.hero-ctas .cta-arrow { background: var(--brand); color: #FFFFFF; }

/* The window's frame reads as glass on the dark panel */
.product::before { background: rgba(110, 122, 165, .12); border-color: rgba(110, 122, 165, .3); } /* a cool veil that reads on the navy panel and on the light page below it, so the window pops off both */

/* A lime beam runs round the window's frame */
@property --beam { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.product::after {
  content: ""; position: absolute; inset: -12px; z-index: -1; pointer-events: none;
  border-radius: calc(var(--radius-l) + 12px); padding: 1.5px;
  background: conic-gradient(from var(--beam), transparent 0deg 250deg, rgba(177, 230, 30, .25) 290deg, #B1E61E 340deg, #F2FFC4 352deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: beam 7s linear infinite;
}
@keyframes beam { to { --beam: 360deg; } }

/* Pause (the hero's pause button) and reduced motion stop it */
.hero.is-paused .product::after { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .product::after { animation: none; --beam: 120deg; }
}

@media (max-width: 900px) {
  .hero-night { inset-inline: 8px; bottom: 44%; border-radius: var(--radius-l); }
}

/* How it works, step 02 (#ai-agents): the app doing the work, with the request in a dock (layout in ai-flow.css). Sample data.
   Three threads, one per kind of output (actions, a report, a form); ai-chat.js plays one at a time and the buttons in
   States: .is-playing on .ai-chat hides every .ai-step until it gets .is-in; a tool with
   .is-working shows its spinner. */

.ai-chat { position: relative; margin: 0; }

.ai-thread { padding: 24px 24px 8px; display: grid; gap: 16px; line-height: 1.7; }
.ai-msg { margin: 0; }
.ai-msg.is-user {
  justify-self: start; max-width: 82%; padding: 12px 16px; background: var(--accent-soft);
  border-radius: 18px; border-start-start-radius: 4px; /* chat-bubble corner, toward the sender */
}
.ai-msg.is-ai p { margin: 0; }
.ai-tools { list-style: none; margin: 12px 0; padding: 0; display: grid; gap: 8px; }
.ai-tool {
  display: flex; align-items: center; gap: 12px; padding: 8px 12px; font-size: var(--fs-sm);
  background: var(--bg-alt); border: 1px solid var(--line); border-radius: var(--radius-m);
}
.ai-tool-ic { width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; flex: none; background: var(--mark); color: var(--mark-ink); }
.ai-tool-ic .icon { width: 14px; height: 14px; stroke-width: 2.6; }
.ai-tag { margin-inline-start: auto; font-size: var(--fs-2xs); padding: 2px 8px; border-radius: 99px; white-space: nowrap; background: var(--ok-soft); color: var(--ok); }
/* The kinds of output: a quiet list under the step's text, on one thin vertical line. The stretch of line beside the
   current one fills as a timer (ai-chat.js sets --dur and .is-timing), and the next kind plays when it is full. On
   phones they lie in one row, each on its own line, so they don't push the visual down. */
.ai-thread[hidden] { display: none; }
p.ai-tool { margin: 12px 0 0; }

/* A report the AI produced: a small table */
.ai-report { width: 100%; margin: 12px 0 0; border-collapse: collapse; font-size: var(--fs-sm); line-height: 1.4; border: 1px solid var(--line); border-radius: var(--radius-m); overflow: hidden; }
.ai-report th, .ai-report td { padding: 8px 12px; text-align: start; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.ai-report thead th { font-size: var(--fs-2xs); font-weight: var(--w-ui); color: var(--ink-3); background: var(--bg-alt); }
.ai-report tbody th { font-weight: var(--w-ui); }
.ai-report td:last-child { text-align: end; }
.ai-report tfoot > tr > * { border-bottom: 0; font-weight: var(--w-head); background: var(--bg-alt); }

/* Playing: steps come in one by one; a working tool shows a spinner and a neutral tag */
.ai-step { transition: opacity 360ms var(--ease-out), translate 360ms var(--ease-out); }
.ai-chat.is-playing .ai-step:not(.is-in) { opacity: 0; translate: 0 6px; }
.ai-tool.is-working .ai-tool-ic { background: transparent; border: 2px solid var(--line); border-top-color: var(--brand); border-radius: 50%; animation: ai-spin 800ms linear infinite; }
.ai-tool.is-working .ai-tool-ic .icon { display: none; }
.ai-tool.is-working .ai-tag { background: var(--panel); color: var(--ink-3); }
.ai-tool .ai-tool-ic { transition: background-color 200ms ease; }
@keyframes ai-spin { to { rotate: 360deg; } }

@media (prefers-reduced-motion: reduce) {
  .ai-step { transition: none; animation: none !important; }
}
@media (max-width: 560px) {
  .ai-thread { padding-inline: 16px; }
  .ai-report th, .ai-report td { padding-inline: 8px; }
  .ai-tool { font-size: var(--fs-xs); align-items: flex-start; }
  .ai-msg.is-user { max-width: 92%; }
}

/* How it works, step 03 (#controls): a trimmed copy of the product's payroll-controls screen, in the product's
   own palette and font (like the hero) and always light. The rows the AI changed in step 02 are marked with lime;
   pointing at a finding marks its row (.is-hl, controls-screen.js). Sample data. */
.cx {
  --p-bg: #FFFFFF; --p-card: #FFFFFF; --p-muted: #F5F3EF; --p-border: #E1DFDA;
  --p-ink: #221F1B; --p-ink-2: #767168; --p-primary: #548575; --p-primary-wash: #EEF3F1;
  --p-success: #519962; --p-warning: #D99E4D; --p-danger: #D93632; --p-info: #4A7FC1;
  margin: 0; overflow: hidden; color: var(--p-ink); background: var(--p-bg);
  font-family: "Assistant", var(--font); font-size: var(--px-base); line-height: 1.4;
  border: 1px solid var(--line); border-radius: var(--radius-l); box-shadow: var(--frame);
  color-scheme: light;
}
.cx .num { font-variant-numeric: tabular-nums; }
.cx-bar { display: flex; align-items: center; gap: 7px; padding: 10px 16px; background: var(--p-card); border-bottom: 1px solid var(--p-border); color: var(--p-ink-2); font-size: var(--px-sm); }
.cx-bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--p-border); }
.cx-bar span { margin-inline-start: 8px; }
/* Product windows show the product's logo in the title bar, like the hero window's sidebar, instead of window dots */
.win-logo { height: 15px; width: auto; flex: none; color: var(--p-ink, var(--ink)); }
.cx-body { padding: 18px; display: grid; gap: 14px; }

.cx-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.cx-kpis > div { display: grid; gap: 1px; padding: 10px 12px; background: var(--p-card); border: 1px solid var(--p-border); border-radius: 10px; }
.cx-kpis small { font-size: var(--px-sm); color: var(--p-ink-2); }
.cx-kpis b { font-size: var(--px-lg); font-weight: 700; }
.cx-kpis em { font-style: normal; font-size: var(--px-xs); color: var(--p-ink-2); }

.cx-panel { background: var(--p-card); border: 1px solid var(--p-border); border-radius: 10px; min-width: 0; }

/* Employees */

.cx-table { width: 100%; border-collapse: collapse; }
.cx-table th, .cx-table td { padding: 8px 12px; text-align: start; border-bottom: 1px solid var(--p-border); white-space: nowrap; }
.cx-table tbody tr:last-child > * { border-bottom: 0; }
.cx-table thead th { font-size: var(--px-sm); font-weight: 600; color: var(--p-ink-2); background: var(--p-muted); }
.cx-table td { font-size: var(--px-base); }
.cx-table tbody th { font-weight: 600; } /* stays a table cell, so its bottom line meets the others */

.cx-table tbody th small { display: flex; align-items: center; gap: 5px; font-weight: 400; font-size: var(--px-xs); color: var(--p-ink-2); }
.cx-table tbody th > span { display: inline-grid; vertical-align: middle; }
.cx-table tbody tr { transition: background-color 200ms ease; }
.cx-table tbody tr.is-hl { background: var(--p-primary-wash); }
.cx-table mark { background: var(--mark); color: var(--mark-ink); border-radius: 4px; padding: 0 4px; }

.cx-ai { display: inline-block; font-size: var(--px-2xs); font-weight: 700; line-height: 1; padding: 2px 5px; border-radius: 4px; background: var(--mark); color: var(--mark-ink); font-family: var(--font); }

@media (max-width: 640px) {
  .cx-body { padding: 12px; }
  .cx-kpis { grid-template-columns: 1fr 1fr; }

  .cx-table th:nth-child(2), .cx-table td:nth-child(2) { display: none; } /* drop gross on phones */
  .cx-table th, .cx-table td { padding-inline: 10px; }

}

/* The notification a control raises when it catches something: what was caught, and a button to handle it. It opens from
   the middle of the window, on a light red, in the hero (hero-product.js) and in how-it-works step 03 (ai-flow.js). */
.ctl-alert {
  position: absolute; z-index: 3; top: 50%; left: 50%; translate: -50% -50%; width: min(360px, calc(100% - 32px));
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 14px;
  border-radius: 14px; background: #FDF1F0; border: 1px solid #F3CFCC; color: #221F1B;
  box-shadow: 0 24px 56px -18px rgba(14, 18, 38, .45); font-size: var(--px-xs, 12px); line-height: 1.35;
  transition: opacity 240ms var(--ease-out), scale 240ms var(--ease-out), visibility 0s;
}
.ctl-alert-ic { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #FFFFFF; color: #D93632; }
.ctl-alert-ic svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ctl-alert-text { display: grid; min-width: 0; }
.ctl-alert-text small { color: #A82623; font-size: inherit; font-weight: 600; }
.ctl-alert-text b { font-weight: 700; }
.ctl-alert-text span { color: #6B5F5C; }
.ctl-alert-cta { padding: 7px 12px; border-radius: 8px; background: #44705F; color: #FFFFFF; font-weight: 600; white-space: nowrap; }
/* While it's up, the rest of the window dims behind it. A plain tint: it covers the whole window, so a blur would be costly. */
.ctl-scrim {
  position: absolute; inset: 0; z-index: 2; border-radius: inherit; pointer-events: none;
  background: rgba(14, 18, 38, .32); opacity: 0; transition: opacity 240ms var(--ease-out);
}
.app:has(.ctl-alert.is-in) .ctl-scrim, .af-checks.is-alert .ctl-scrim { opacity: 1; }
.app:has(.ctl-alert.is-in) .ai-cursor { z-index: 4; } /* the cursor stays above it, to click its button */
.af-checks .ctl-scrim { z-index: 3; } /* over the dock too */
.af-checks .ctl-alert { z-index: 4; }
/* Hidden until it's raised. Without JS the hero doesn't show it; step 03 does, as it is what the step is about. */
.ctl-alert.is-hero { display: none; }
.js .ctl-alert.is-hero { display: grid; }
.js .ctl-alert.is-hero:not(.is-in), .af-checks.is-cycling:not(.is-alert) .ctl-alert {
  opacity: 0; scale: .92; visibility: hidden; transition: opacity 200ms var(--ease-out), scale 200ms var(--ease-out), visibility 0s 200ms;
}
@media (prefers-reduced-motion: reduce) { .ctl-alert, .js .ctl-alert.is-hero:not(.is-in), .af-checks.is-cycling:not(.is-alert) .ctl-alert { scale: none; } }
@media (max-width: 560px) {
  .ctl-alert { width: calc(100% - 16px); grid-template-columns: auto minmax(0, 1fr); }
  .ctl-alert-cta { grid-column: 1 / -1; text-align: center; }
}

/* Full payroll system (#basics): a copy of the product's employees screen, between the heading and the four columns: the
   rail, the list and the full payslip editor. Uses the controls screen's product palette and frame (.cx in controls.css),
   always light. The window keeps one height; the editor scrolls inside it (employee-screen.js moves .es-body). The change
   the AI made is marked in lime. Sample data. */
.es { margin: 0 0 24px; box-shadow: none; } /* no frame: it stands on the dark section by itself */
.es { position: relative; }
.es > .hero-pause { top: 4px; bottom: auto; inset-inline-end: 12px; width: 30px; height: 30px; } /* loop-pause.js: at the empty end of the window's top bar */
.es .cx-table th, .es .cx-table td { padding: 6px 12px; }
.es-i { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }

.es-app { position: relative; display: grid; grid-template-columns: 48px 186px minmax(0, 1fr); height: 740px; }

.es-rail { display: grid; gap: 4px; align-content: start; justify-items: center; padding: 12px 0; border-inline-end: 1px solid var(--p-border); }
.es-rail span { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; color: var(--p-ink-2); }
.es-rail span.is-on { background: var(--p-muted); color: var(--p-ink); }
.es-rail svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.es-emps { display: grid; gap: 8px; align-content: start; padding: 12px 10px; border-inline-end: 1px solid var(--p-border); overflow: hidden; min-width: 0; }
.es-emps header { display: grid; }
.es-emps h5 { margin: 0; font-size: var(--px-md); font-weight: 700; }
.es-emps header small, .es-group-label { font-size: var(--px-xs); color: var(--p-ink-2); }
.es-search { padding: 5px 8px; border: 1px solid var(--p-border); border-radius: 8px; font-size: var(--px-xs); color: var(--p-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.es-pills { display: flex; gap: 4px; }
.es-pills em { font-style: normal; font-size: var(--px-2xs); white-space: nowrap; padding: 2px 6px; border: 1px solid var(--p-border); border-radius: 99px; color: var(--p-ink-2); }
.es-pills em.is-on { background: var(--p-primary-wash); border-color: transparent; color: var(--p-primary); font-weight: 600; }
.es-emps ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.es-emps li { display: grid; grid-template-columns: 28px minmax(0, 1fr) 6px; align-items: center; gap: 8px; padding: 5px 6px; border-radius: 8px; transition: background-color 200ms ease; }
.es-emps li.is-on { background: var(--p-primary-wash); }
.es-emps .av { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--p-muted); color: var(--p-ink-2); font-size: var(--px-2xs); font-weight: 700; transition: background-color 200ms ease, color 200ms ease; }
.es-emps li.is-on .av { background: var(--p-primary); color: #FFFFFF; }
.es-emps .nm { display: grid; font-size: var(--px-sm); font-weight: 600; line-height: 1.25; white-space: nowrap; overflow: hidden; }
.es-emps .nm small { font-size: var(--px-2xs); font-weight: 400; color: var(--p-ink-2); }
.es-emps li > i { width: 6px; height: 6px; border-radius: 50%; background: var(--p-success); }

/* The editor: one per employee, stacked, the current one showing. Its header and tabs stay; the rest scrolls. */
.es-stage { display: grid; min-width: 0; min-height: 0; }
.es-slip { grid-area: 1 / 1; display: grid; grid-template-rows: auto auto minmax(0, 1fr); min-width: 0; min-height: 0; transition: opacity 180ms var(--ease-out); }
.es-slip:not(.is-current) { opacity: 0; visibility: hidden; transition: none; } /* gone at once: two dense screens crossing would smudge */

.es-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px 8px; }
.es-head h3 { margin: 0; font-size: var(--px-xl); font-weight: 700; white-space: nowrap; }
.es-head > small { font-size: var(--px-xs); color: var(--p-ink-2); }
.es-badge { font-style: normal; font-size: var(--px-2xs); font-weight: 600; white-space: nowrap; padding: 2px 7px; border-radius: 99px; background: #E9EFF8; color: #33609A; }
.es-status { display: inline-flex; align-items: center; gap: 5px; font-size: var(--px-xs); white-space: nowrap; padding: 2px 8px; border-radius: 99px; background: var(--p-primary-wash); color: var(--p-primary); font-weight: 600; }
.es-status i { width: 6px; height: 6px; border-radius: 50%; background: var(--p-success); }
.es-btns { margin-inline-start: auto; display: flex; gap: 6px; }
.es-btn { display: inline-flex; align-items: center; padding: 5px 10px; border: 1px solid var(--p-border); border-radius: 8px; font-size: var(--px-xs); font-weight: 600; white-space: nowrap; }
.es-btn.is-primary { background: var(--p-primary); border-color: transparent; color: #FFFFFF; }

.es-tabs { display: flex; gap: 4px; margin: 0; padding: 0 10px; list-style: none; border-bottom: 1px solid var(--p-border); overflow: hidden; }
.es-tabs li { padding: 5px 10px 7px; font-size: var(--px-sm); color: var(--p-ink-2); white-space: nowrap; }
.es-tabs li.is-on { color: var(--p-ink); font-weight: 600; box-shadow: inset 0 -2px 0 var(--p-primary); }

/* Scrollable as it is; once the script drives it, .is-live takes the scrolling over so it can't catch the page's wheel */
.es-scroll { overflow-y: auto; min-height: 0; }
.es.is-live .es-scroll { overflow: hidden; }
.es-scroll:focus-visible { outline: 2px solid var(--p-primary); outline-offset: -2px; } /* drawn inside: the window clips its edges */
.es-body { display: grid; gap: 10px; padding: 12px 16px 16px; transition: transform var(--es-scroll, 0ms) cubic-bezier(.45, 0, .2, 1); }

.es-kpis { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); border: 1px solid var(--p-border); border-radius: 10px; overflow: hidden; }
.es-kpis > div { display: grid; gap: 1px; padding: 7px 10px; min-width: 0; border-inline-start: 1px solid var(--p-border); }
.es-kpis > div:first-child { border-inline-start: 0; }
.es-kpis small { font-size: var(--px-2xs); color: var(--p-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.es-kpis b { font-size: var(--px-base); font-weight: 700; }
.es-kpis .is-net { background: var(--p-primary-wash); }
.es-kpis .is-net b { color: var(--p-primary); }

.es-panel-head { padding: 8px 12px; font-size: var(--px-base); font-weight: 700; border-bottom: 1px solid var(--p-border); }
.es-panel-head small { margin-inline-start: 8px; font-size: var(--px-xs); font-weight: 400; color: var(--p-ink-2); }

/* Components, with the product's fields: a base rate you can type over, gross-up and the total */
.es-comps thead th, .es-comps td, .es-comps tbody th { font-size: var(--px-sm); }
.es-comps th:nth-child(2), .es-comps td:nth-child(2) { width: 124px; }
.es-comps .es-gu { width: 48px; text-align: center; }
.es-comps th.num, .es-comps td.num { width: 88px; text-align: end; }
.es .es-group th { padding-block: 4px; font-size: var(--px-xs); font-weight: 600; color: var(--p-ink-2); background: var(--p-muted); }
.es-in { display: inline-flex; align-items: center; justify-content: space-between; gap: 6px; min-width: 56px; padding: 3px 7px; border: 1px solid var(--p-border); border-radius: 6px; background: #FFFFFF; font-size: var(--px-sm); }
.es-in i { font-style: normal; color: var(--p-ink-2); }
.es-comps .es-in { width: 100%; box-sizing: border-box; }
.es-check { display: inline-block; width: 14px; height: 14px; vertical-align: middle; border: 1px solid #B9B5AD; border-radius: 3px; }
.es-check.is-on { position: relative; background: var(--p-primary); border-color: var(--p-primary); }
.es-check.is-on::after { content: ""; position: absolute; inset: 1px 4px 3px; border: solid #FFFFFF; border-width: 0 1.6px 1.6px 0; rotate: 45deg; }
.es-add { display: flex; align-items: center; gap: 6px; padding: 7px 12px; font-size: var(--px-xs); color: var(--p-ink-2); border-top: 1px solid var(--p-border); }

.es-two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.es-flds { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; padding: 10px 12px; }
.es-fld { display: grid; gap: 3px; min-width: 0; align-content: start; }
.es-fld label { font-size: var(--px-xs); color: var(--p-ink-2); }
.es-fld-row { display: flex; align-items: center; gap: 6px; font-size: var(--px-xs); }
.es-fld-row .es-in { flex: 1; min-width: 0; }
.es-fld-row > i { font-style: normal; font-weight: 600; }
.es-cal { display: grid; place-items: center; width: 24px; height: 24px; border: 1px solid var(--p-border); border-radius: 6px; color: var(--p-ink-2); }
.es-fld small { font-size: var(--px-2xs); color: var(--p-ink-2); }

.es-calc-head { display: flex; align-items: center; gap: 6px; }
.es-calc-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 20px; padding: 2px 12px 8px; }
.es-calc h4 { margin: 8px 0 2px; font-size: var(--px-sm); font-weight: 700; line-height: inherit; text-wrap: inherit; }
.es-list { margin: 0; padding: 0; list-style: none; }
.es-list li { display: flex; justify-content: space-between; gap: 8px; padding: 3px 0; font-size: var(--px-sm); border-bottom: 1px solid var(--p-border); }
.es-list span { color: var(--p-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.es-list b { font-weight: 400; }
.es-list li.is-sum { font-weight: 700; background: var(--p-muted); margin-inline: -6px; padding-inline: 6px; }
.es-list li.is-sum span { color: var(--p-ink); }
.es-list li.is-sum b { font-weight: 700; }
.es-ni { padding: 0 12px 10px; }
.es-ni table { border: 1px solid var(--p-border); }
.es-ni th, .es-ni td { font-size: var(--px-sm); }
.es-ni tbody th small { display: inline; margin-inline-start: 6px; }
.es-netbar { display: flex; justify-content: space-between; align-items: center; margin: 0 12px 12px; padding: 8px 12px; border-radius: 8px; background: var(--p-primary-wash); font-weight: 700; }
.es-netbar b { font-size: var(--px-lg); color: var(--p-primary); }

/* The accountant's cursor: plain, without the AI's orb or name */
.es-cursor { position: absolute; top: 0; left: 0; z-index: 2; width: 20px; height: 20px; opacity: 0; pointer-events: none; transition: translate 650ms cubic-bezier(.45, 0, .2, 1), opacity 200ms ease; }
.es-cursor.is-on { opacity: 1; }
.es-cursor svg { display: block; width: 20px; height: 20px; fill: #221F1B; stroke: #FFFFFF; stroke-width: 1.5; stroke-linejoin: round; transition: scale 120ms var(--ease-out); }
.es-cursor i { position: absolute; top: -9px; left: -9px; width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--p-primary); opacity: 0; }
.es-cursor.is-click svg { scale: .9; }
.es-cursor.is-click i { animation: es-click 400ms var(--ease-out); }
@keyframes es-click { 0% { opacity: .8; scale: .4; } 100% { opacity: 0; scale: 1.2; } }

@media (max-width: 1100px) {
  .es-app { grid-template-columns: 170px minmax(0, 1fr); }
  .es-rail { display: none; }
  .es-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .es-kpis > div:nth-child(5) { border-inline-start: 0; }
  .es-kpis > div:nth-child(n+5) { border-top: 1px solid var(--p-border); }
}
/* Narrow: the list becomes a row of the two employees above the editor, with no cursor */
@media (max-width: 800px) {
  .es-app { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); height: 660px; }
  .es-emps { display: block; padding: 8px 12px; border-inline-end: 0; border-bottom: 1px solid var(--p-border); }
  .es-emps header, .es-search, .es-pills, .es-group-label { display: none; }
  .es-emps ul { display: flex; gap: 8px; }
  .es-emps li { display: block; padding: 0; background: none !important; }
  .es-emps li:not([data-emp]), .es-emps .nm, .es-emps li > i { display: none; }
  .es-cursor { display: none; }
  .es-btns { display: none; }
  .es-two { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .es-app { height: 600px; }
  .es-head { flex-wrap: wrap; padding: 10px 12px 6px; gap: 6px 8px; }
  .es-head > small { display: none; }
  .es-tabs { padding: 0 4px; }
  .es-tabs li:nth-child(n+4) { display: none; }
  .es-body { padding: 10px 12px 12px; }
  .es-kpis > div { padding: 6px 8px; }
  /* Gross, income tax, net and employer cost, two by two */
  .es-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .es-kpis > div:nth-child(n+3):nth-child(-n+6) { display: none; }
  .es-kpis > div:nth-child(7) { border-inline-start: 0; }
  .es-kpis > div:nth-child(n+7) { border-top: 1px solid var(--p-border); }
  .es-comps .es-gu, .es .es-comps th:nth-child(2), .es .es-comps td:nth-child(2) { display: none; }
  .es .cx-table th, .es .cx-table td { padding-inline: 10px; }
  .es-panel-head small { display: block; margin: 2px 0 0; }
  .es-flds, .es-calc-cols { grid-template-columns: 1fr; }
  .es-ni { display: none; }
  .es-netbar { margin-top: 8px; }
}

/* This screen is read by screen readers too, so its muted and primary colours are a touch darker than the product's, for AA contrast */
.cx.es { --p-ink-2: #69645C; --p-primary: #44705F; }

/* How it works (#ai-role): a centred intro, then four steps. On wide screens the texts scroll past one pinned visual;
   on narrow ones each text sits above its visual. Every visual is the same stage: the product window (the hero's .app,
   sidebar copied from it by ai-flow.js) in a glass frame on a soft grey gradient, with a dock floating over it, so the four read as one product
   moving through the work: requests (01), results (02, ai-agents.css), controls (03), approval (04). Lime marks what the
   AI did. ai-flow.js plays them while they are on screen; without JS or with reduced motion they show finished. */
.af-intro { max-width: 780px; margin: 0 auto var(--head-gap); }

.af { list-style: none; margin: 0; padding: 0; display: grid; gap: 96px; }
/* A row: text in the narrower column on the reading side (right), the visual beside it; even rows swap sides */
.af-step { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 64px; row-gap: 48px; align-items: center; }
.af-step:nth-child(even) { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.af-step:nth-child(even) .af-text { order: 2; }
.af-text { max-width: 46ch; scroll-margin-top: 96px; }
.af-step h3 { font-size: var(--fs-h3); line-height: var(--lh-snug); letter-spacing: -.01em; margin: 0 0 12px; text-wrap: balance; }
.af-desc { margin: 0; color: var(--ink-2); font-size: var(--fs-body); line-height: var(--lh-body); text-wrap: pretty; }

/* Pinned layout (wide screens, when ai-flow.js adds .is-pinned): the step texts scroll down the right column while their
   visuals share one pinned spot on the left; the step whose text reaches the middle of the screen is .is-on, its visual
   fades in and its text comes to full strength. Each <li> becomes display: contents so its parts join the .af grid. The
   controls screen leaves the pinned spot and follows the steps at full width, so it can be read. */
.af.is-pinned { grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr); column-gap: 56px; row-gap: 0; }
.af.is-pinned > .af-step { display: contents; }
.af.is-pinned .af-text {
  grid-column: 1; min-height: 50vh; display: grid; align-content: center;
}
.af.is-pinned > .af-step:nth-child(1) .af-text { grid-row: 1; align-content: start; } /* starts level with its visual */
.af.is-pinned > .af-step:nth-child(2) .af-text { grid-row: 2; }
.af.is-pinned > .af-step:nth-child(3) .af-text { grid-row: 3; }
.af.is-pinned > .af-step:nth-child(4) .af-text { grid-row: 4; } /* as tall as its visual (ai-flow.js), so the two end centred on each other */
/* The current step at full strength, the others quieter but still readable */
.af.is-pinned .af-text > * { transition: opacity 450ms var(--ease-out); }
.af.is-pinned .af-step:not(.is-on) .af-text > * { opacity: .85; } /* dimmed, but still above 4.5:1 for the description text */
.af-card > .hero-pause { top: 14px; bottom: auto; } /* in the empty end of the row above the window (loop-pause.js), clear of the dock */

.af.is-pinned .af-card {
  grid-column: 2; grid-row: 1 / span 4; align-self: start; position: sticky; top: 120px; margin-top: 0;
  opacity: 0; visibility: hidden;
  transition: opacity 450ms var(--ease-out), visibility 0s 450ms;
}
.af.is-pinned .af-step.is-on .af-card { opacity: 1; visibility: visible; z-index: 1; transition-delay: 0s; }
@media (prefers-reduced-motion: reduce) {
  .af.is-pinned .af-card, .af.is-pinned .af-text > * { transition: none; }
}

/* The stage: a soft grey gradient of one size, so the pinned visuals crossfade in place. Always light. */
.fl-stage {
  --font: "Assistant", "IBM Plex Sans Hebrew", Arial, sans-serif;
  --bg: #FFFFFF; --bg-alt: #F5F3EF; --surface: #FFFFFF; --panel: #F5F3EF; --line: #E1DFDA;
  --ink: #221F1B; --ink-2: #767168; --ink-3: #8F8A81;
  --brand: #548575; --brand-glow: #548575; --accent: #548575; --accent-soft: #EEF3F1; --brand-ink: #FFFFFF;
  --ok: #3F8150; --ok-soft: #E6F1E8;
  --top: 64px; --win-x: 24px;
  position: relative; height: clamp(540px, calc(100vh - 112px), 600px); isolation: isolate; overflow: hidden;
  border-radius: var(--radius-xl); color-scheme: light; box-shadow: inset 0 0 0 1px rgba(16, 42, 67, .05);
  background: linear-gradient(var(--wash-dir, 135deg), #F1F3F7, #DDE0E8);
  font-family: var(--font); font-size: var(--px-base); color: var(--ink);
}

/* The window's shadow: a light green-to-violet glow, sitting behind it */
.fl-stage::after {
  content: ""; position: absolute; z-index: -1; top: calc(var(--top) + 8px); inset-inline: var(--win-x); bottom: 0; pointer-events: none;
  background: linear-gradient(var(--wash-dir, 135deg), var(--aurora-teal), var(--aurora-violet));
  border-radius: var(--radius-l) var(--radius-l) 0 0; filter: blur(24px); opacity: .5;
}

/* The gradient turns a little from step to step */
.af-step:nth-child(2) .fl-stage { --wash-dir: 225deg; }
.af-step:nth-child(3) .fl-stage { --wash-dir: 45deg; }
.af-step:nth-child(4) .fl-stage { --wash-dir: 315deg; }

/* The row above the window */
.fl-top {
  position: absolute; top: 0; inset-inline: 24px; height: var(--top); margin: 0;
  display: flex; align-items: center; gap: 8px; color: var(--ink); font-size: var(--fs-sm); font-weight: var(--w-ui);
}
.fl-live { width: 8px; height: 8px; border-radius: 50%; background: var(--aurora-teal); animation: fl-live 1.8s ease-out infinite; }
@keyframes fl-live {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--aurora-teal) 55%, transparent); }
  70%, 100% { box-shadow: 0 0 0 7px transparent; }
}

/* The window runs off the bottom of the stage, so it reads as the app itself rather than a card */
.fl-app {
  position: absolute; top: var(--top); inset-inline: var(--win-x); bottom: 0; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr);
  border-radius: var(--radius-l) var(--radius-l) 0 0; box-shadow: none;
}
.fl-side { display: none; }
.fl-app .app-body { position: relative; min-height: 0; }
.fl-main { gap: 12px; overflow: hidden; }
@media (min-width: 1180px) {
  .js .fl-app { grid-template-columns: 148px minmax(0, 1fr); }
  .js .fl-side { display: grid; padding-inline: 8px; }
  .fl-side .app-brand svg { height: 21px; }
  .fl-side .nav-item { padding: 8px; gap: 8px; font-size: var(--px-sm); white-space: nowrap; }
}
/* The current screen in the sidebar, from data-nav on the window (ai-chat.js changes it in step 02) */
.fl-app[data-nav="home"] .nav-item[data-nav="home"], .fl-app[data-nav="controls"] .nav-item[data-nav="controls"],
.fl-app[data-nav="employees"] .nav-item[data-nav="employees"], .fl-app[data-nav="docs"] .nav-item[data-nav="docs"] {
  background: var(--p-primary-wash); color: var(--p-primary); font-weight: 700;
}

/* The dock: floats over the bottom of the screen, in frosted white. An aurora line along its top marks it as the AI's. */
.fl-dock {
  position: absolute; inset-inline: 12px; bottom: 12px; z-index: 2; padding: 12px 16px; display: grid; gap: 8px;
  background: rgba(255, 255, 255, .86); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
  border-radius: var(--radius-m); box-shadow: 0 0 0 1px rgba(16, 42, 67, .08), 0 16px 40px -12px rgba(6, 17, 31, .4);
  overflow: hidden; line-height: 1.5;
}
.fl-dock::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 2px;
  background: linear-gradient(90deg, var(--aurora-teal), var(--mark), var(--aurora-blue));
}
.fl-reply { display: flex; align-items: center; gap: 8px; margin: 0; font-weight: 600; }
.fl-orb {
  width: 14px; height: 14px; border-radius: 50%; flex: none;
  background: radial-gradient(circle at 35% 30%, var(--mark), var(--aurora-teal) 60%, var(--aurora-blue));
}

/* 01 the deck: the current request in front, the next one peeking out behind it, the rest out of sight. The window behind is dimmed. */
.fl-asks .fl-app::after { content: ""; position: absolute; inset: 0; z-index: 1; background: rgba(255, 255, 255, .38); }
.fl-asks .fl-app > * { filter: blur(1.5px); }
.fl-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.fl-kpis > div { display: grid; gap: 2px; padding: 12px; border: 1px solid var(--p-border); border-radius: 12px; }
.fl-kpis small { color: var(--p-ink-2); font-size: var(--px-xs); }
.fl-kpis b { font-size: var(--px-lg); }
.fl-kpis.is-plain { margin-top: 8px; }
.fl-kpis.is-plain > div { padding: 0; border: 0; }

.fl-reqs { position: absolute; z-index: 2; inset-inline: 64px; top: calc(var(--top) + 48px); bottom: 72px; margin: 0; padding: 0; list-style: none; display: grid; }
.fl-req {
  grid-area: 1 / 1; align-self: center; padding: 16px 24px 24px; background: #FFFFFF; border-radius: var(--radius-l);
  box-shadow: 0 0 0 1px rgba(16, 42, 67, .07), 0 20px 48px -16px rgba(16, 42, 67, .34);
  opacity: 0; translate: 0 24px; scale: .98; pointer-events: none;
  transition: opacity 500ms var(--ease-out), translate 500ms var(--ease-out), scale 500ms var(--ease-out);
}
.fl-req.is-on { opacity: 1; translate: none; scale: 1; z-index: 2; }
.fl-req.is-next { opacity: .5; translate: 0 -16px; scale: .94; z-index: 1; }
.fl-req.is-next > * { opacity: 0; }
.fl-req > * { transition: opacity 300ms var(--ease-out); }
.fl-req header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.fl-src { display: inline-flex; align-items: center; gap: 8px; font-size: var(--px-sm); font-weight: 600; color: var(--ink-2); }
.fl-kind { font-size: var(--px-xs); font-weight: 600; padding: 2px 8px; border-radius: 99px; background: var(--accent-soft); color: var(--accent); }
.fl-req p { margin: 0; font-size: var(--fs-h4); font-weight: 600; line-height: 1.5; text-wrap: balance; }
.af-file { display: flex; align-items: center; gap: 8px; width: fit-content; margin-bottom: 8px; padding: 8px 12px; border-radius: var(--radius-s); background: var(--panel); font-size: var(--fs-sm); font-weight: 600; }
.af-file .icon { width: 16px; height: 16px; color: var(--ok); }

.af-channels {
  position: absolute; z-index: 2; inset-inline: 16px; bottom: 24px; margin: 0; padding: 0; list-style: none;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; font-size: var(--fs-2xs); font-weight: var(--w-ui);
}
.af-channels li {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 99px; color: var(--ink);
  background: rgba(255, 255, 255, .78); box-shadow: 0 0 0 1px rgba(16, 42, 67, .07); transition: background-color 300ms ease, color 300ms ease;
}
.af-channels li.is-on { background: #102A43; color: #FFFFFF; }
.af-logo { width: 13px; height: 13px; flex: none; fill: currentColor; }
.af-logo.is-line { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.af-logo.lg-whatsapp { color: #25D366; }
.af-logo.lg-claude { color: #D97757; }
.af-logo.lg-gemini { color: #A58FCB; }

/* 02 each thread is a screen with a dock */
.fl-do .ai-thread { padding: 0; gap: 12px; line-height: 1.5; }
.fl-do .ai-tools { margin: 0; border: 1px solid var(--p-border); border-radius: 12px; overflow: hidden; gap: 0; }
.fl-do .ai-tools .ai-tool { background: none; border: 0; border-radius: 0; padding: 12px; font-size: var(--px-base); }
.fl-do .ai-tools .ai-tool + .ai-tool { border-top: 1px solid var(--p-border); }
.fl-do .ai-tool b { font-weight: 700; }
.fl-do .fl-dock .ai-tool { margin: 0; padding: 8px 12px; }
.fl-do .ai-msg.is-user { justify-self: stretch; max-width: none; padding: 8px 12px; border-radius: 10px; }
.fl-do .ai-report { margin: 0; font-size: var(--px-base); }
.fl-do .ai-report th, .fl-do .ai-report td { padding: 7px 12px; }
.fl-do .ai-report td.fl-bar-col, .fl-do .ai-report th.fl-bar-col { width: 34%; padding-inline: 0; }
.fl-bar { display: block; height: 8px; width: var(--w); border-radius: 99px; background: linear-gradient(90deg, var(--aurora-teal), var(--mark)); transition: width 700ms var(--ease-out) 200ms; }
.ai-chat.is-playing .ai-report:not(.is-in) .fl-bar { width: 0; }
.fl-form { display: grid; grid-template-columns: 124px minmax(0, 1fr); gap: 12px; align-items: start; }
.fl-doc {
  position: relative; overflow: hidden; display: grid; gap: 8px; align-content: start; aspect-ratio: 1 / 1.3; padding: 12px;
  background: #FFFFFF; border: 1px solid var(--p-border); border-radius: 8px; box-shadow: 0 8px 16px -8px rgba(16, 42, 67, .2); font-size: var(--px-xs);
}
.fl-doc > i { display: block; height: 6px; border-radius: 3px; background: var(--p-muted); }
.fl-doc > i.is-mark { background: var(--mark); width: 72%; }
.fl-scan { position: absolute; inset-inline: 0; top: 0; height: 40%; background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--aurora-teal) 24%, transparent)); border-bottom: 2px solid var(--aurora-teal); translate: 0 -100%; }
.ai-chat.is-playing .fl-doc.is-in .fl-scan { animation: fl-scan 1.6s var(--ease-in-out) 1 forwards; }
@keyframes fl-scan { 0% { translate: 0 -100%; opacity: 1; } 90% { opacity: 1; } 100% { translate: 0 260%; opacity: 0; } }

/* 03 the checks, in the dock; the table's employees pass one by one */
.af-check-groups { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.af-check-groups ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; align-content: start; }
.af-check-group { font-size: var(--px-xs); color: var(--ink-2); font-weight: 600; margin-bottom: 2px; }
.af-check { position: relative; padding-inline-start: 20px; font-size: var(--px-sm); line-height: 1.5; font-weight: 600; transition: color 250ms ease; }
.af-check::before { /* a green tick once checked */
  content: ""; position: absolute; inset-inline-start: 0; top: 3px; width: 14px; height: 14px; border-radius: 50%; box-sizing: border-box;
  background: var(--ok-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23157A4C' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 9px no-repeat;
}
.af-checks.is-cycling .af-check:not(.is-done) { color: var(--ink-3); font-weight: 400; }
.af-checks.is-cycling .af-check:not(.is-done)::before { background: none; border: 1.5px solid var(--line); }
.af-checks.is-cycling .af-check.is-run { color: var(--ink); font-weight: 600; }
.af-checks.is-cycling .af-check.is-run::before { border-color: var(--line); border-top-color: var(--accent); animation: ai-spin 700ms linear infinite; } /* ai-spin comes from ai-agents.css */
.af-checks .tr.is-now { background: var(--p-primary-wash); }

/* 04 the review */
.af-review-head b { display: block; font-size: var(--px-xl); font-weight: 700; }
.af-review-head small { color: var(--ink-2); font-size: var(--px-sm); }
.af-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; }
.af-stats > div { padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--radius-s); }
.af-stats dt { font-size: var(--px-xs); color: var(--ink-2); }
.af-stats dd { margin: 0; font-size: var(--px-lg); font-weight: 700; font-variant-numeric: tabular-nums; }
.af-changes { list-style: none; margin: 0; padding: 0; display: grid; border: 1px solid var(--line); border-radius: var(--radius-m); overflow: hidden; }
.af-changes li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 8px 12px; transition: background-color 400ms ease; }
.af-changes li + li { border-top: 1px solid var(--line); }
.af-changes li.is-flag { background: #FDF6EC; }
.af-review.is-fixed .af-changes li.is-flag { background: none; }
.af-who { display: grid; gap: 2px; min-width: 0; }
.af-who b { font-weight: 700; }
.af-who small { display: flex; align-items: center; gap: 6px; color: var(--ink-2); font-size: var(--px-xs); }
.af-who small.fl-swap { display: inline-grid; }
.af-who small.fl-swap > span { display: flex; align-items: center; gap: 6px; }
.af-ai { font-size: var(--px-2xs); font-weight: 700; line-height: 1; padding: 2px 4px; border-radius: 4px; background: var(--mark); color: var(--mark-ink); }
.af-dot { width: 7px; height: 7px; border-radius: 50%; background: #D99E4D; flex: none; }
.af-diff { display: inline-flex; align-items: baseline; gap: 8px; font-variant-numeric: tabular-nums; font-weight: 600; }
.af-diff s { color: var(--ink-3); font-weight: 400; }
.af-diff > span { background: var(--mark); color: var(--mark-ink); border-radius: 4px; padding: 0 4px; }
.af-ok, .af-flag { display: inline-flex; align-items: center; justify-content: center; gap: 4px; padding: 2px 8px; border-radius: 99px; font-size: var(--px-xs); font-weight: 700; white-space: nowrap; }
.af-ok { background: var(--ok-soft); color: var(--ok); }
.af-ok .icon { width: 13px; height: 13px; stroke-width: 2.6; }
.af-flag { background: #FBEBD3; color: #8A5A16; }
.af-need { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px 4px 10px; border-radius: 99px; font-size: var(--fs-2xs); font-weight: var(--w-head); background: #FFF1D6; color: #8A5A00; transition: background-color 400ms ease, color 400ms ease; }
.af-need i { width: 7px; height: 7px; border-radius: 50%; background: #D99E4D; animation: af-pulse 1.8s ease-out infinite; transition: background-color 400ms ease; }
@keyframes af-pulse { 0% { box-shadow: 0 0 0 0 rgba(217, 158, 77, .6); } 70%, 100% { box-shadow: 0 0 0 6px rgba(217, 158, 77, 0); } }
.af-review.is-approved .af-need { background: var(--mark); color: var(--mark-ink); }
.af-review.is-approved .af-need i { background: var(--mark-ink); animation: none; }
.fl-approve { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.af-trail { margin: 0; color: var(--ink-2); font-size: var(--px-sm); text-wrap: balance; }
.af-actions { display: flex; gap: 8px; white-space: nowrap; }
.af-btn { font-size: var(--px-base); font-weight: 600; padding: 8px 16px; border-radius: 99px; box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); transition: background-color 300ms ease, color 300ms ease, scale 200ms var(--ease-out), opacity 300ms ease; }
.af-btn.is-primary { background: var(--brand); color: var(--brand-ink); box-shadow: none; }
.af-review.is-press .af-btn.is-primary { scale: .95; }
.af-review.is-approved .af-btn.is-primary { background: var(--mark); color: var(--mark-ink); }
.af-review.is-approved .fl-open { opacity: .4; }

/* Two texts in one spot, B replacing A; the stage's state says which */
.fl-swap { display: inline-grid; justify-items: center; }
.af-who .fl-swap, .af-need .fl-swap { justify-items: start; }
.af-need .fl-swap { white-space: nowrap; overflow: hidden; transition: width 400ms var(--ease-out); } /* ai-flow.js sets the width to the text showing */
.fl-swap > * { grid-area: 1 / 1; transition: opacity 300ms var(--ease-out); }
.fl-swap > .is-b { opacity: 0; }
.af-review.is-fixed .af-changes .fl-swap > .is-a, .af-review.is-approved .af-need .fl-swap > .is-a, .af-review.is-approved .af-actions .fl-swap > .is-a { opacity: 0; }
.af-review.is-fixed .af-changes .fl-swap > .is-b, .af-review.is-approved .af-need .fl-swap > .is-b, .af-review.is-approved .af-actions .fl-swap > .is-b { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .fl-req, .fl-bar, .af-channels li, .af-check, .af-changes li, .af-btn, .fl-swap > * { transition: none !important; }
  .fl-live, .af-need i, .fl-scan { animation: none !important; }
}
@media (max-width: 900px) {
  .af { gap: 64px; }
  .af-step, .af-step:nth-child(even) { grid-template-columns: minmax(0, 1fr); row-gap: 32px; }
  .af-step:nth-child(even) .af-text { order: 0; }
}
@media (max-width: 640px) {
  .af { gap: 48px; }
  .fl-stage { --top: 56px; --win-x: 12px; height: 560px; border-radius: var(--radius-l); margin-inline: calc(var(--gutter) * -.5); }
  .fl-do { height: 616px; } /* the longest result and the review list need the room above their docks */
  .af-review { height: 600px; }
  .fl-top { inset-inline: 16px; }
  .fl-app .top-co, .fl-app .top-icons { display: none; }
  .fl-app .app-top { grid-template-columns: minmax(0, 1fr); justify-items: center; height: 44px; }
  .fl-reqs { inset-inline: 24px; top: calc(var(--top) + 44px); bottom: 104px; }
  .fl-req { padding: 16px; }
  .fl-req p { font-size: var(--fs-body); }
  .af-channels { inset-inline: 16px; bottom: 16px; }
  .fl-do .ai-report td.fl-bar-col, .fl-do .ai-report th.fl-bar-col { display: none; }
  .fl-form { grid-template-columns: minmax(0, 1fr); }
  .fl-doc { display: none; }
  .af-checks .tr { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, .9fr); }
  .af-checks .tr > .num:nth-child(3) { display: none; }
  /* The dock shows one group at a time: the one running (ai-flow.js marks it) */
  .js .af-check-groups { grid-template-columns: minmax(0, 1fr); }
  .js .af-checks.is-cycling .af-check-groups ul:not(.is-cur) { display: none; }
  .af-review .af-stats { display: none; } /* room for the four rows above the dock */
  .af-changes li { grid-template-columns: minmax(0, 1fr) auto; gap: 2px 8px; }
  .af-changes .af-diff:empty { display: none; }
  .af-changes .af-diff { grid-column: 1; grid-row: 2; }
  .af-changes li > :last-child { grid-column: 2; grid-row: 1 / span 2; }
  .fl-approve { grid-template-columns: minmax(0, 1fr); }
  .af-trail { display: none; }
  .af-actions { justify-content: stretch; }
  .af-actions .af-btn { flex: 1; text-align: center; }
}

/* The migration card shares the stage's product palette and font (always light) */
.mg-card {
  --font: "Assistant", "IBM Plex Sans Hebrew", Arial, sans-serif;
  --bg: #FFFFFF; --bg-alt: #F5F3EF; --surface: #FFFFFF; --panel: #F5F3EF; --line: #E1DFDA;
  --ink: #221F1B; --ink-2: #767168; --ink-3: #8F8A81;
  --brand: #548575; --brand-glow: #548575; --accent: #548575; --accent-soft: #EEF3F1; --brand-ink: #FFFFFF;
  --ok: #3F8150; --ok-soft: #E6F1E8;
  font-family: var(--font); color: var(--ink); color-scheme: light; background: var(--bg);
}

/* Migration (#migration): copy and CTA beside a data import card that shows the current system and the product side
   by side, under a strip of the months imported; the copy is three ticked promises. migration.js loops the card while it is
   on screen: the months fill in and the data crosses over row by row, each row is checked, and the success line lands. Sample data. */
.mg-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 64px; align-items: center; }
.mg-copy h2 { font-size: var(--fs-h2); letter-spacing: -.015em; }
.mg-h2-more { display: block; font-weight: 700; } /* the mid-year switch: its own line, a step heavier */
/* The three promises, ticked like the matching rows in the pilot card */
.mg-points { list-style: none; margin: 32px 0; padding: 0; display: grid; gap: 16px; font-size: var(--fs-lead); color: var(--ink-2); line-height: 1.45; }
.mg-points li { position: relative; padding-inline-start: 40px; text-wrap: pretty; }
.mg-points li::before, .mg-points li::after { content: ""; position: absolute; inset-inline-start: 0; top: .05em; width: 26px; height: 26px; }
.mg-points li::before { border-radius: 50%; background: var(--ok-soft); }
.mg-points li::after { background: var(--ok); -webkit-mask: var(--tick) center / 14px no-repeat; mask: var(--tick) center / 14px no-repeat; }
.mg-points b { color: var(--ink); font-weight: var(--w-head); }

/* The import card: the current system and the product as two windows side by side */
.mg-card { margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l); padding: 8px var(--card-pad) var(--card-pad); }
.mg-card > .hero-pause { top: 20px; bottom: auto; inset-inline-end: var(--card-pad); } /* loop-pause.js: at the end of the head row, which makes room for it */
.mg-card:has(> .hero-pause) .mg-head { padding-inline-end: 48px; }
.mg-card .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.mg-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 0; }
.mg-head b { display: block; font-weight: var(--w-head); font-size: var(--fs-body); }
.mg-head small { font-size: var(--fs-xs); color: var(--ink-3); }
.mg-phase { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-2xs); color: var(--ink-2); background: var(--panel); padding: 4px 12px; border-radius: 999px; white-space: nowrap; }
.mg-phase i { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); transition: background-color 200ms var(--ease-out); }
.mg-card.is-busy .mg-phase i { background: var(--accent); animation: mg-pulse 1s var(--ease-in-out) infinite alternate; }
@keyframes mg-pulse { to { opacity: .3; } }

/* The months being imported: each fills in as the data moves, so the import reads as the whole year and not one month */
.mg-months { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 4px; margin: 0 0 16px; padding: 0; list-style: none; font-size: var(--fs-2xs); color: var(--ink-2); text-align: center; }
.mg-months li { white-space: nowrap; transition: color 240ms var(--ease-out); }
.mg-months li::before { content: ""; display: block; height: 4px; margin-bottom: 4px; border-radius: 2px; background: var(--brand); transition: background-color 240ms var(--ease-out); }
.mg-card.is-playing .mg-months li:not(.is-on) { color: var(--ink-3); }
.mg-card.is-playing .mg-months li:not(.is-on)::before { background: var(--line); }

/* --bw is the gap between the windows, where the data crosses and the result sits */
.mg-stage { --bw: 56px; display: grid; grid-template-columns: minmax(0, 1fr) var(--bw) minmax(0, 1fr); font-size: var(--fs-sm); }
.mg-win { grid-row: 1 / 8; border: 1px solid var(--line); border-radius: var(--radius-m); }
.mg-win.is-old { grid-column: 1; background: var(--bg-alt); }
.mg-win.is-new { grid-column: 3; background: var(--surface); }
.mg-bar { grid-row: 1; display: flex; align-items: center; gap: 8px; height: 38px; padding-inline: 12px; font-size: var(--fs-2xs); font-weight: var(--w-ui); border-radius: var(--radius-m) var(--radius-m) 0 0; }
.mg-bar.is-old { grid-column: 1; margin: 1px 1px 0; color: var(--ink-3); background: var(--panel); border-bottom: 1px solid var(--line); }
.mg-bar.is-new { grid-column: 3; margin: 0; color: var(--brand-ink); background: var(--brand); }
.mg-bar.is-new svg { height: 20px; width: auto; }
.mg-dots { display: inline-flex; gap: 4px; }
.mg-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--line); }
.mg-arrow { grid-row: 1; grid-column: 2; display: grid; place-items: center; color: var(--ink-3); }
.mg-arrow svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.mg-row { display: contents; }
.mg-row > * { grid-row: var(--r); }
.mg-cell { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; min-width: 0; padding: 10px 12px; border-top: 1px solid var(--line); }
.mg-arrow + .mg-row .mg-cell { border-top: 0; } /* the first row, right under the title bars */
.mg-cell.is-old { grid-column: 1; margin-inline: 1px; color: var(--ink-2); transition: background-color 240ms var(--ease-out); }
.mg-cell.is-new { grid-column: 3; margin-inline: 1px; }
.mg-cell b { font-weight: var(--w-ui); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mg-cell.is-old b { font-weight: var(--w-body); }
.mg-cell > span { font-variant-numeric: tabular-nums; white-space: nowrap; }
.mg-amt { font-weight: var(--w-ui); border-radius: 4px; }

.mg-more .mg-cell { font-size: var(--fs-2xs); color: var(--ink-3); }

/* The link between the two windows: a dashed line, the datum crossing it, the result on top */
.mg-link { grid-column: 2; position: relative; display: grid; place-items: center; }
.mg-link::before { content: ""; position: absolute; inset-inline: 0; top: 50%; border-top: 1px dashed var(--line); }
.mg-dot { position: absolute; inset-inline-start: 0; top: calc(50% - 3px); width: 6px; height: 6px; border-radius: 50%; background: var(--accent); opacity: 0; }
.mg-res { position: relative; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font-size: var(--fs-2xs); font-weight: 700; line-height: 1; background: var(--ok-soft); color: var(--ok); }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .mg-bar.is-new { background: var(--brand-glow); }
}
:root[data-theme="dark"] .mg-bar.is-new { background: var(--brand-glow); }

.mg-sum { margin: 16px 0 0; padding-top: 16px; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.mg-sum b { position: relative; display: inline-flex; align-items: center; gap: 8px; font-weight: var(--w-head); font-size: var(--fs-body); }
.mg-sum-tick { width: 22px; height: 22px; flex: none; border-radius: 50%; background: var(--mark) var(--tick-ink) center / 13px no-repeat; }
.mg-sum > span { font-size: var(--fs-sm); color: var(--ink-3); }
/* The small celebration: the success line rises in, its tick pops, and a few lime sparks leave it */
.mg-sum { transition: opacity 320ms var(--ease-out), translate 320ms var(--ease-out); }
.mg-card.is-playing:not(.is-done) .mg-sum { opacity: 0; translate: 0 6px; }
.mg-card.is-done .mg-sum-tick { animation: mg-pop 420ms var(--ease-out); }
@keyframes mg-pop { 0% { scale: .4; } 60% { scale: 1.2; } 100% { scale: 1; } }
.mg-spark { position: absolute; inset-inline-start: 8px; top: 50%; width: 6px; height: 6px; border-radius: 50%; background: var(--mark); opacity: 0; pointer-events: none; }
.mg-card.is-done .mg-spark { animation: mg-spark 640ms var(--ease-out) var(--sd, 0ms); }
@keyframes mg-spark { 0% { opacity: 1; translate: 0 -3px; scale: 1; } 100% { opacity: 0; translate: var(--sx) var(--sy); scale: .4; } }

/* Playing. Copy: each row's datum crosses from the current system (.is-moving), and its employee appears in the product
   with the amount still blank (.is-copied). Check: the amount fills in and the result pops (.is-in). */
.mg-cell.is-new > *, .mg-amt, .mg-res { transition: opacity 320ms var(--ease-out), translate 320ms var(--ease-out), scale 320ms var(--ease-out), color 240ms var(--ease-out), background-color 240ms var(--ease-out); }
.mg-card.is-playing .mg-row:not(.is-copied) .mg-cell.is-new > * { opacity: 0; translate: 6px 0; }
.mg-card.is-playing .mg-row:not(.is-in) .mg-amt { color: transparent; background-color: var(--panel); }
.mg-card.is-playing .mg-row:not(.is-in) .mg-res { opacity: 0; scale: .5; }
.mg-row.is-moving .mg-cell.is-old { background-color: var(--accent-soft); }
.mg-row.is-moving .mg-dot { animation: mg-cross 560ms var(--ease-in-out); }
@keyframes mg-cross {
  0% { opacity: 0; translate: 0 0; }
  20%, 80% { opacity: 1; }
  100% { opacity: 0; translate: calc(6px - var(--bw)) 0; }
}

/* The three steps, across the full width */

@media (prefers-reduced-motion: reduce) {
  .mg-cell.is-new > *, .mg-amt, .mg-res, .mg-cell.is-old, .mg-sum, .mg-months li, .mg-months li::before { transition: none; }
}
@media (max-width: 960px) {
  .mg-split { grid-template-columns: 1fr; gap: 48px; }
}
@media (max-width: 480px) {
  .mg-head { flex-wrap: wrap; }
  .mg-months { gap: 2px; }
  .mg-stage { --bw: 30px; font-size: var(--fs-xs); }
  .mg-cell { flex-direction: column; align-items: flex-start; gap: 0; padding: 8px 9px; }
  .mg-cell b { max-width: 100%; }
  .mg-bar { padding-inline: 9px; font-size: var(--fs-2xs); }
  .mg-dots { display: none; }
}

/* A full payroll system (#basics): tells payroll accountants that everything they rely on in their current software is here.
   Four equal cards (by law / day to day / data & permissions / month end, the last one #files). Security &
   privacy (#compliance) follows as its own band. */
/* Dark, like the compliance band right after it: the two make one dark block */
.bs-section { background: var(--brand-deep); color: #FFFFFF; padding-bottom: 64px; border-top: 1px solid transparent; }
.bs-section .section-head h2 { color: #FFFFFF; }
.bs-section .section-head .lead { color: rgba(255, 255, 255, .74); }
.bs-kicker { font-size: var(--fs-sm); font-weight: var(--w-head); color: var(--mark); margin: 0 0 12px; } /* also above the security heading */
/* Four equal cards, each with its own aurora colour (--tone): icon and heading, then the items in two
   columns. All the items stay in view: this section's message is how many details are covered. */
.bs-stages { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.bs-stage {
  --tone: var(--aurora-teal);
  display: grid; align-content: start; gap: 16px; padding: var(--card-pad); scroll-margin-top: 96px; border-radius: var(--radius-l);
  background: linear-gradient(160deg, color-mix(in srgb, var(--tone) 16%, var(--brand-deep)), color-mix(in srgb, #FFFFFF 4%, var(--brand-deep)) 55%);
  border: 1px solid color-mix(in srgb, var(--tone) 34%, rgba(255, 255, 255, .1));
}
.bs-stage:nth-child(2) { --tone: var(--aurora-blue); }
.bs-stage:nth-child(3) { --tone: var(--aurora-violet); }
.bs-stage:nth-child(4) { --tone: var(--mark); }
.bs-card-top { display: flex; align-items: center; gap: 12px; }
.bs-ic { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 12px; color: var(--tone); background: color-mix(in srgb, var(--tone) 18%, transparent); }
.bs-ic svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.bs-stage h3 { margin: 0; font-size: var(--fs-h4); font-weight: var(--w-head); color: #FFFFFF; line-height: var(--lh-snug); letter-spacing: -.005em; }

/* Tasks: a lime tick each (the site's "done" mark), no divider lines. The tick is an SVG centred in the circle,
   so it sits in the middle whatever the font or direction. */
.bs-tasks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; align-content: start; }
.bs-tasks li { position: relative; padding-inline-start: 24px; }
.bs-tasks li::before { /* a little lighter than the panel's text: it supports the list, it doesn't lead it */
  content: ""; position: absolute; inset-inline-start: 0; top: 3px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--mark) 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") center / 9px no-repeat;
}
.bs-tasks b { display: block; font-size: var(--fs-ui); font-weight: var(--w-ui); line-height: 1.4; color: #FFFFFF; }
.bs-tasks small { display: block; margin-top: 1px; font-size: var(--fs-sm); line-height: 1.4; color: rgba(255, 255, 255, .58); }

/* File kind next to month-end items: one neutral style for all of them */
.bs-kind {
  display: inline-block; margin-inline-start: 6px; padding: 2px 6px; border-radius: 5px; vertical-align: 1px;
  font-size: var(--fs-micro); font-weight: var(--w-head); line-height: 1.2; color: rgba(255, 255, 255, .82);
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .18);
}

/* The note about the files sits under the month-end items it refers to */
.bs-note { margin: 0; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .12); font-size: var(--fs-sm); line-height: 1.5; color: rgba(255, 255, 255, .66); }

/* The cards build right to left as it scrolls into view (basics.js): the cards stay put, their content
   arrives. Only JS adds .is-wait, so without it everything shows. Reduced motion keeps the fade, without the movement. */
.bs-stage.is-wait .bs-card-top, .bs-stage.is-wait .bs-tasks li, .bs-stage.is-wait .bs-note { opacity: 0; translate: 12px 0; }
.bs-stage.is-wait .bs-tasks li::before { scale: .6; }
.bs-stage.is-play .bs-card-top, .bs-stage.is-play .bs-tasks li, .bs-stage.is-play .bs-note {
  transition: opacity 500ms var(--ease-out) var(--d, 0ms), translate 500ms var(--ease-out) var(--d, 0ms);
}
.bs-stage.is-play .bs-tasks li::before { transition: scale 400ms var(--ease-out) calc(var(--d, 0ms) + 100ms); }
@media (prefers-reduced-motion: reduce) {
  .bs-stage.is-wait .bs-card-top, .bs-stage.is-wait .bs-tasks li, .bs-stage.is-wait .bs-note { translate: none; }
  .bs-stage.is-wait .bs-tasks li::before { scale: none; }
}

/* Regulation & security (#compliance): continues the basics section's dark background, so the two read as one dark
   block, split by a hairline. A silver shine slides along the block's bottom edge; reduced motion keeps a plain line. */
.trust-band {
  position: relative; padding-block: 0 64px; scroll-margin-top: 72px; color: #FFFFFF;
  background: radial-gradient(60% 120% at 85% 100%, var(--brand-glow), var(--brand-deep) 70%);
  --bs-silver: rgba(214, 222, 235, .28); --bs-silver-light: #F2F5FA;
}
.trust-band > .wrap { position: relative; padding-top: 64px; }
.trust-band > .wrap::before { /* the hairline spans the content column, not the gutters, so it lines up with the sheet above */
  content: ""; position: absolute; top: 0; inset-inline: var(--gutter); border-top: 1px solid rgba(255, 255, 255, .1);
}
.trust-band::after {
  content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, var(--bs-silver) 0 35%, var(--bs-silver-light) 50%, var(--bs-silver) 65% 100%) 0 0 / 300% 100%;
  animation: bs-shine 9s linear infinite;
}
@keyframes bs-shine { from { background-position: 100% 0; } to { background-position: 0% 0; } }
@media (prefers-reduced-motion: reduce) { .trust-band::after { animation: none; background: var(--bs-silver); } }
.trust-band .bs-seals { color: #E6EBF3; }
.trust-band .bs-trust-copy p { color: rgba(255, 255, 255, .74); }
.trust-band .bs-points li { color: rgba(255, 255, 255, .66); }
.trust-band .bs-points b { color: #FFFFFF; }
/* The three points as short columns under the description: label, one line, thin dividers between, no icons */
.bs-points { list-style: none; margin: 24px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, auto); justify-content: start; }
.bs-points li { padding-inline-end: 24px; margin-inline-end: 24px; border-inline-end: 1px solid rgba(255, 255, 255, .14); font-size: var(--fs-sm); line-height: 1.45; }
.bs-points li:last-child { padding: 0; margin: 0; border: 0; }
.bs-points b { display: block; font-size: var(--fs-ui); font-weight: var(--w-head); }
.trust-band svg { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.bs-trust-top { display: flex; align-items: center; justify-content: space-between; gap: 64px; }
.bs-trust-top .bs-seals { order: 2; } /* headline on the reading side, seals across from it */
.bs-seals { list-style: none; margin: 0; padding: 0; display: flex; gap: 24px; flex: none; color: var(--ink); }
.bs-seal { position: relative; width: 132px; height: 132px; display: grid; place-items: center; }
.bs-seal img { width: 100%; height: 100%; object-fit: contain; }
.bs-seal svg { position: absolute; inset: 0; width: 100%; height: 100%; stroke-width: 1.4; }
.bs-seal.is-iso img { filter: brightness(0) invert(1); opacity: .92; } /* the logo is dark blue: white reads on the band */
.bs-trust-copy h2 { margin: 0; font-size: var(--fs-h3); line-height: var(--lh-snug); letter-spacing: -.01em; }
.bs-trust-copy p { margin: 16px 0 0; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink-2); max-width: 54ch; }
.trust-band .bs-trust-copy .bs-kicker { margin: 0 0 12px; font-size: var(--fs-sm); color: var(--mark); }


@media (max-width: 900px) { .bs-stages { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .bs-tasks { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .trust-band { padding-block: 0 48px; }
  .trust-band > .wrap { padding-top: 48px; }
  .bs-trust-top { flex-direction: column; align-items: flex-start; gap: 24px; }
  .bs-trust-top .bs-seals { order: 0; }
  .bs-seal { width: 104px; height: 104px; }
  .bs-points { grid-template-columns: 1fr; gap: 12px; }
  .bs-points li { padding: 0; margin: 0; border: 0; }
}


/* FAQ (#faq): the heading on the reading side, the questions beside it as native <details> (no JS). The plus turns
   into a minus when a question is open. Stacked on narrow screens. */
.fq-layout { display: grid; grid-template-columns: minmax(0, .6fr) minmax(0, 1.4fr); gap: 64px; align-items: start; }
.fq-head { position: sticky; top: 120px; margin: 0; }
.fq-list { border-top: 1px solid var(--line); }
.fq-list details { border-bottom: 1px solid var(--line); }
.fq-list summary {
  position: relative; display: block; cursor: pointer; list-style: none; padding: 24px 0; padding-inline-end: 48px;
  font-size: var(--fs-lg); font-weight: var(--w-head); line-height: 1.45; transition: color 150ms ease;
}
.fq-list summary::-webkit-details-marker { display: none; }
.fq-list summary:hover { color: var(--accent); }
.fq-list summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 4px; }
.fq-list summary::before, .fq-list summary::after { /* plus / minus */
  content: ""; position: absolute; inset-inline-end: 6px; top: 50%; width: 14px; height: 2px; border-radius: 2px;
  background: currentColor; transition: rotate 200ms var(--ease-out);
}
.fq-list summary::after { rotate: 90deg; }
.fq-list details[open] summary::after { rotate: 0deg; }
.fq-list details p { margin: -6px 0 0; padding: 0 0 24px; padding-inline-end: 48px; max-width: 68ch; color: var(--ink-2); line-height: 1.7; }

@media (prefers-reduced-motion: reduce) { .fq-list summary::after { transition: none; } }
@media (max-width: 900px) {
  .fq-layout { grid-template-columns: 1fr; gap: 24px; }
  .fq-head { position: static; }
}
@media (max-width: 560px) {
  .fq-list summary { font-size: var(--fs-body); padding-block: 16px; }
  .fq-list details p { padding-inline-end: 0; }
}

/* Closing CTA (#demo): a quiet strip on the night panel, the pitch and the hero's lime button at the start (right), the
   logo's mark at the far end (aurora.css). The button opens the demo form in the modal (demo-modal.js); the form styles below are for that form. */
.cta {
  --ink: #FFFFFF; --ink-2: rgba(237, 239, 248, .74); --ink-3: rgba(237, 239, 248, .5);
  display: flex; align-items: center; justify-content: space-between; gap: 56px;
  padding: 16px 40px; color: var(--ink);
}
.cta-copy { min-width: 0; max-width: 680px; display: grid; justify-items: start; }
.cta h2 { color: #FFFFFF; font-size: clamp(26px, 2.7vw, 34px); letter-spacing: -.015em; text-wrap: balance; }
.cta .lead { font-size: var(--fs-body); color: var(--ink-2); margin-top: 8px; text-wrap: pretty; width: 0; min-width: 100%; } /* takes the title's width, never widens the column */
.cta .btn-cta { margin-top: 20px; background: var(--mark); color: var(--mark-ink); box-shadow: 0 12px 32px -10px rgba(177, 230, 30, .3); }
.cta .btn-cta:hover { background: #C3F03A; }
.cta .cta-arrow { background: var(--brand); color: #FFFFFF; }
.cta :focus-visible { outline-color: #FFFFFF; } /* the brand-coloured ring doesn't show on the night panel */

.demo-form { display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; position: relative; }
/* Each field spans three shared rows (label, input, error), so inputs stay level with their neighbour when a label wraps or an error shows */
.field { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; padding-bottom: 16px; }
.field-full { grid-column: 1 / -1; }
.field label { align-self: end; margin-bottom: 6px; font-size: var(--fs-sm); font-weight: var(--w-head); }
.req { margin-inline-start: 2px; }
.form-hint { margin-bottom: 16px; font-size: var(--fs-sm); color: var(--ink-2); }
.field input, .field select {
  font: inherit; font-size: var(--fs-body); color: var(--ink); background: var(--bg);
  border: 1px solid var(--ink-3); border-radius: var(--radius-s); padding: 12px 16px; width: 100%; /* --ink-3: at least 3:1, so the field's edge can be seen */
  transition: border-color .15s, box-shadow .15s;
}
.field input[dir="ltr"] { text-align: right; }
.field select { /* our own chevron, inset from the edge like the text (the native one sits flush against the border) */
  appearance: none; -webkit-appearance: none; cursor: pointer; padding-inline-end: 48px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2380869E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-size: 16px; background-position: left 16px center;
}
.field input:focus, .field select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.field input[aria-invalid="true"] { border-color: #D14343; }
.demo-form .btn { margin-top: 4px; }

.field-error { margin-top: 6px; font-size: var(--fs-sm); color: #D14343; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .field-error { color: #FF8A8A; } }
:root[data-theme="dark"] .field-error { color: #FF8A8A; }

.form-done { position: absolute; inset: 0; background: var(--surface); display: grid; place-content: center; justify-items: center; text-align: center; gap: 8px; }
.form-done[hidden] { display: none; }
.done-mark { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--mark); color: var(--mark-ink); font-size: var(--fs-h3); font-weight: var(--w-head); margin-bottom: 8px; }
/* Thank-you entrance: the panel fades in over the form, then the lime check lands */
.form-done { transition: opacity 200ms var(--ease-out); }
.done-mark { transition: transform 300ms var(--ease-out) 80ms; }
@starting-style {
  .form-done { opacity: 0; }
  .done-mark { transform: scale(0.9); }
}
@media (prefers-reduced-motion: reduce) {
  @starting-style { .done-mark { transform: none; } }
}
.form-done h3 { font-size: var(--fs-h3); }
.form-done p { color: var(--ink-2); }

@media (max-width: 900px) {
  .cta { flex-direction: column; align-items: flex-start; gap: 24px; padding: 16px; }
  .cta h2 { text-wrap: pretty; } /* fills the width, so the description under it doesn't run past it */
}
@media (max-width: 560px) {
  .cta { padding-inline: 8px; }
  .demo-form { grid-template-columns: 1fr; }
}

/* Demo modal: the demo form in a <dialog>, opened from the header and hero buttons (demo-modal.js).
   Desktop: centred card that grows in from 96% with a fade. Phone: a sheet that slides up from the bottom.
   Entry uses @starting-style; exit uses display/overlay with allow-discrete. Browsers without them open and close instantly. */
.demo-modal {
  width: min(560px, calc((100vw - 32px) / var(--zoom, 1))); max-width: none; max-height: calc((100dvh - 48px) / var(--zoom, 1)); /* --zoom: the text size (a11y.css) */
  margin: auto; padding: 0; overflow: auto; overscroll-behavior: contain;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius-l); box-shadow: var(--shadow);
  opacity: 0; transform: scale(.96);
  transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out), overlay 180ms allow-discrete, display 180ms allow-discrete;
}
.demo-modal[open] { opacity: 1; transform: none; transition-duration: 250ms; } /* opens a little slower than it closes */
@starting-style { .demo-modal[open] { opacity: 0; transform: scale(.96); } }

.demo-modal::backdrop {
  background: rgba(10, 27, 44, 0);
  transition: background-color 250ms var(--ease-out), overlay 250ms allow-discrete, display 250ms allow-discrete;
}
.demo-modal[open]::backdrop { background: rgba(10, 27, 44, .45); }
@starting-style { .demo-modal[open]::backdrop { background: rgba(10, 27, 44, 0); } }
html:has(.demo-modal[open]) { overflow: hidden; } /* the page behind doesn't scroll */

.demo-modal-inner { position: relative; padding: 32px; }
.demo-modal h2 { font-size: var(--fs-h3); letter-spacing: -.01em; padding-inline-end: 48px; }
.demo-modal-lead { color: var(--ink-2); margin: 8px 0 24px; }
.demo-modal-close {
  position: absolute; top: 16px; inset-inline-end: 16px;
  display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  border: 0; background: var(--panel); color: var(--ink-2); cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease;
}
.demo-modal-close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
@media (hover: hover) and (pointer: fine) { .demo-modal-close:hover { background: var(--line); color: var(--ink); } }

/* Phone: a bottom sheet */
@media (max-width: 560px) {
  .demo-modal {
    width: 100%; max-height: calc(92dvh / var(--zoom, 1)); margin: auto 0 0;
    border-radius: var(--radius-l) var(--radius-l) 0 0; border-bottom: 0;
    opacity: 1; transform: translateY(100%);
    transition: transform 220ms var(--ease-out), overlay 220ms allow-discrete, display 220ms allow-discrete;
  }
  .demo-modal[open] { transform: none; transition-duration: 320ms; transition-timing-function: var(--ease-drawer); }
  @starting-style { .demo-modal[open] { transform: translateY(100%); } }
  .demo-modal-inner { padding: 24px 16px calc(24px + env(safe-area-inset-bottom)); }
  .demo-modal h2 { font-size: var(--fs-h3); }
}

/* Reduced motion: no growing or sliding, just a short fade */
@media (prefers-reduced-motion: reduce) {
  .demo-modal, .demo-modal[open] {
    transform: none;
    transition: opacity 200ms var(--ease-out), overlay 200ms allow-discrete, display 200ms allow-discrete;
  }
  .demo-modal:not([open]) { opacity: 0; }
  @starting-style { .demo-modal[open] { opacity: 0; transform: none; } }
}

/* Site footer: logo and links, legal line underneath. */
.site-footer { padding-top: 64px; font-size: var(--fs-ui); }
.footer-grid { display: grid; grid-template-columns: 1fr 1.6fr; gap: 48px; }
.footer-brand p { color: var(--ink-2); margin-top: 16px; max-width: 30ch; }
.footer-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.footer-links h2 { font-size: var(--fs-sm); color: var(--ink-2); margin-bottom: 12px; }
.footer-links a { display: block; color: var(--ink-2); text-decoration: none; padding: 4px 0; }
.footer-links a:hover { color: var(--ink); }
.footer-base { margin-top: 64px; padding-block: 24px; color: var(--ink-2); font-size: var(--fs-sm); }

@media (max-width: 760px) {
  .footer-grid { grid-template-columns: 1fr; gap: 48px; }
  .footer-links { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .footer-base { padding-bottom: 80px; } /* the last line clears the floating accessibility button */
}

/* Northern lights, the site's theme. Only the hero moves (a WebGL shader, hero-night.js); the other night panels use
   this lighter CSS version: blurred teal, lime and blue glows on --night. The basics + security block is still; the
   demo panel at the end carries the logo's mark instead. The light sections get only hints: a faint glow at the top of the tinted
   sections and a short aurora line under the small labels above headings. */

/* Demo (#demo): the page closes on night, like it opens. A quiet strip on a flat night panel, the site's 1200px wide, with
   one still graphic: the logo's mark, large and cropped by the panel's far end, a sheet of frosted glass on the night (a faint fill, a lit rim and a soft shadow, drawn in the page's SVG) so the
   button stays the one bright thing. */
#demo { position: relative; isolation: isolate; padding-block: 48px; }
.aurora-sky {
  position: absolute; z-index: -1; pointer-events: none; overflow: hidden;
  inset-block: 16px; inset-inline: max(12px, (100% - var(--wrap)) / 2); border-radius: var(--radius-xl);
  background: var(--night); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
}
.cta-mark { position: absolute; left: -2%; top: 50%; height: 155%; width: auto; aspect-ratio: 236 / 246; transform: translateY(-46%); }
.cta-mark-shadow { color: rgba(0, 0, 0, .55); } /* the symbol's own soft shadow, showing through the glass */
.cta-mark-rim { color: transparent; } /* outline only: the path's fill follows currentColor */
/* Stacked, there's no free side, so it sits in the corner, under the text */
@media (max-width: 900px) {
  .aurora-sky { inset-block: 8px; inset-inline: 8px; border-radius: var(--radius-l); }
  .cta-mark { left: -13%; top: auto; bottom: -20%; height: 56%; transform: none; }
}

/* Basics + security (#basics, #compliance): one calm night block with still aurora, a glow along the top of the
   basics sheet and one behind the security seals */
.bs-section {
  background:
    radial-gradient(40% 180px at 25% 0, color-mix(in srgb, var(--aurora-teal) 18%, transparent), transparent),
    radial-gradient(30% 140px at 60% 0, color-mix(in srgb, var(--mark) 9%, transparent), transparent),
    radial-gradient(40% 200px at 85% 0, color-mix(in srgb, var(--aurora-blue) 16%, transparent), transparent),
    var(--night);
}
.bs-stage { background: color-mix(in srgb, #FFFFFF 4%, var(--night)); }
.trust-band {
  background:
    radial-gradient(34% 90% at 14% 100%, color-mix(in srgb, var(--aurora-teal) 16%, transparent), transparent),
    radial-gradient(26% 70% at 28% 100%, color-mix(in srgb, var(--mark) 8%, transparent), transparent),
    var(--night);
}

/* Hints on the light sections */
.section-alt {
  background:
    radial-gradient(36% 160px at 20% 0, color-mix(in srgb, var(--aurora-teal) 7%, transparent), transparent),
    radial-gradient(30% 140px at 70% 0, color-mix(in srgb, var(--mark) 7%, transparent), transparent),
    var(--bg-alt);
}
/* ...except the section right after the hero: the hero already fades into --bg-alt, so that section starts flat in the
   exact same colour, with no glow line where the two meet */
.hero + .section-alt { background: var(--bg-alt); }

/* Frames on the light sections, the same as the hero window's (hero.css, .product::before): each illustration card
   sits in a plain light frame 12px out (a faint fill and a hairline) and takes the hero window's soft shadow instead
   of a border. The AI chat window clips its edges, so its frame hangs on its container, .ai-chat. Product copies
   (.cx) keep --frame. */
.mg-card { isolation: isolate; position: relative; }
.mg-card::before {
  content: ""; position: absolute; inset: -12px; z-index: -1; pointer-events: none;
  border-radius: calc(var(--radius-l) + 12px);
  background: rgba(16, 42, 67, .03); border: 1px solid #E3E6F0;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .mg-card::before { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .12); }
}
:root[data-theme="dark"] .mg-card::before { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .12); }
.mg-card { border-color: transparent; box-shadow: var(--win-shadow); }

/* 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; }