/* A verbatim copy of the deployed design's css/styles.css. Do not edit it here:
   home-page exceptions go in home.css, inner-page fit in styles.css. */
/* ==========================================================================
   EasyPay — marketing site
   Tokens follow the live easypay.mu brand (--ep-* variables on the current site).
   ========================================================================== */

:root {
  --navy-950: #00121f;
  --navy-900: #001d31;
  --navy-850: #002843;
  --navy-800: #003d60;
  --navy-700: #004b78;
  --azure: #0066cc;   /* 5.6:1 on white, 4.9:1 on the pale blue fills: AA for small text */
  --sky: #3399ff;
  --cyan: #53d0e0;
  --cyan-300: #8fdee8;
  --cyan-600: #2fb8cc;
  --ink: var(--color-text-heading);      /* legacy short names alias the --color-* tokens below */
  --ink-2: #1e293b;
  --text: var(--color-text-body);
  --muted: var(--color-text-muted);
  --line: #e2e8f0;
  --mist: #f5f9fd;
  --ice: #e8f3fc;
  --white: #ffffff;
  --ok: #10b981;
  --warn: #f6aa38;

  --grad-brand: linear-gradient(100deg, var(--azure) 0%, var(--cyan) 100%);
  --grad-text: linear-gradient(95deg, #8fe9f5 0%, #53d0e0 40%, #3a9bff 100%);

  --font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-script: "Caveat", "Brush Script MT", cursive;

  --container: 1240px;
  --gutter: clamp(20px, 5vw, 48px);
  --section-y: clamp(96px, 13vw, 176px);
  /* Corner radii: four steps, plus pills and circles. */
  --radius-xs: 4px;      /* hairline bars, tiny badges, focus ring */
  --radius-sm: 10px;     /* small controls: inputs, example rows, stamps */
  --radius-md: 16px;     /* panels: toasts, tabs, the AI Agent page, chips */
  --radius-lg: 22px;     /* cards, plans, dialogs */
  --radius-pill: 999px;
  --radius: var(--radius-lg);

  /* Type scale. Fixed steps for interface and body text (rem, so the reader's text size applies). */
  --text-3xs: 0.625rem;  /* 10px: only the finale's chapter labels on phones and the AI avatar initials */
  --text-2xs: 0.6875rem; /* 11px */
  --text-xs: 0.75rem;    /* 12px */
  --text-sm: 0.8125rem;  /* 13px */
  --text-md: 0.875rem;   /* 14px */
  --text-base: 0.9375rem;/* 15px */
  --text-lg: 1rem;       /* 16px */
  --text-xl: 1.125rem;   /* 18px */
  --text-2xl: 1.375rem;  /* 22px */
  --text-3xl: 1.75rem;   /* 28px */
  /* Fluid steps for headings and ledes. */
  --text-display: clamp(2.75rem, 7.6vw, 7rem);
  --text-h1: clamp(2.5rem, 5vw, 4.5rem);
  --text-h2: clamp(2.25rem, 5vw, 4.25rem);
  --text-h3: clamp(1.75rem, 3.2vw, 2.875rem);
  --text-h4: clamp(1.5rem, 2.6vw, 2.25rem);
  --text-h5: clamp(1.375rem, 2.2vw, 1.875rem);
  --text-lede: clamp(1.0625rem, 1.4vw, 1.25rem);
  --text-lede-lg: clamp(1.125rem, 1.6vw, 1.375rem);
  --text-script: clamp(1.5rem, 2.2vw, 2rem);
  --text-label-fluid: clamp(0.75rem, 1.5vw, 0.9375rem);
  /* Story props scale with their device (cqh = % of the stage frame's height). */
  --stage-text-xs: clamp(0.4375rem, 1.25cqh, 0.625rem);
  --stage-text-sm: clamp(0.5938rem, 1.7cqh, 0.8125rem);
  --stage-text-md: clamp(0.6875rem, 2cqh, 0.9375rem);
  --stage-text-lg: clamp(0.75rem, 2.4cqh, 1.125rem);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
  --shadow-card: 0 1px 2px rgba(15, 23, 42, .04), 0 24px 60px -24px rgba(0, 75, 120, .28);
  --shadow-float: 0 30px 80px -30px rgba(0, 20, 40, .55);
  --nav-h: 76px;

  /* ---------- Light theme: white + cyan ----------
     Every page colour of the light design lives here. Text/background pairs are WCAG AA:
     heading #0b1f3a and body #475569 on white are 16.0:1 and 7.6:1, accent text #0e7490 is 5.4:1. */
  --color-bg: #ffffff;
  --color-bg-gradient-start: #ecfeff;
  --color-bg-gradient-end: #cffafe;
  --color-accent: #06b6d4;
  --color-accent-bright: #22d3ee;
  --color-accent-text: #0e7490;
  --color-brand-blue: #3a7bd5;      /* EasyPay app gradient start (wwwroot/css/Common/newMaster.css) */
  --color-brand-cyan: #00d2ff;      /* EasyPay app gradient end */
  --color-text-heading: #0b1f3a;
  --color-text-body: #475569;
  --color-text-muted: #64748b;
  --color-night: #031a2f;           /* navy behind the starry orb and the month-end story */
  --color-glass: rgba(255, 255, 255, .78);
  --color-glass-border: rgba(15, 23, 42, .08);
  --grad-page: linear-gradient(180deg, var(--color-bg) 0%, var(--color-bg-gradient-start) 55%, var(--color-bg) 100%);
  --shadow-glass: 0 1px 2px rgba(15, 23, 42, .04), 0 24px 48px -24px rgba(0, 60, 100, .35);

  color-scheme: light;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--nav-h); }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--text-lg);
  line-height: 1.6;
  color: var(--text);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* Plus Jakarta Sans merges "fi" and "fl" into ligatures that drop the dot on the i ("file", "office").
     Turning common ligatures off everywhere keeps every word spelled out letter by letter. */
  font-variant-ligatures: no-common-ligatures;
  overflow-x: hidden;
}
img, video, canvas, svg { display: block; max-width: 100%; }
svg { width: 1em; height: 1em; flex: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, p, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
::selection { background: var(--cyan); color: var(--navy-950); }
:focus-visible { outline: 2px solid var(--azure); outline-offset: 3px; border-radius: var(--radius-xs); }   /* 5.6:1 on white: a visible ring (WCAG 1.4.11) */
:is(.hero, .problem, .reveal-band, .intro, .about, .cta, .footer, .plan--featured) :focus-visible { outline-color: var(--cyan); }
[hidden] { display: none !important; }

.container { width: 100%; max-width: calc(var(--container) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; top: 12px; left: 12px; z-index: 200; padding: 10px 16px; border-radius: var(--radius-sm); background: var(--white); color: var(--ink); font-weight: 700; transform: translateY(-160%); transition: transform .3s var(--ease); }
.skip-link:focus { transform: none; }

/* ---------- Type ---------- */
.display, .h2, .h3, .hero__title {
  color: var(--ink); font-weight: 800; letter-spacing: -.035em; line-height: 1.02; text-wrap: balance;
}
.display { font-size: var(--text-display); line-height: .98; letter-spacing: -.045em; }
.h2 { font-size: var(--text-h2); }
.h3 { font-size: var(--text-h4); letter-spacing: -.03em; line-height: 1.08; }
.display--light, .h2--light { color: var(--white); }
.lede { font-size: var(--text-lede); line-height: 1.6; color: var(--text); max-width: 56ch; text-wrap: pretty; }
.lede--light { color: rgba(226, 238, 250, .74); }
.grad-text { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.fine { margin-top: 44px; text-align: center; font-size: var(--text-sm); color: var(--muted); }

.section-head { margin-bottom: clamp(48px, 7vw, 88px); }
.section-head .lede { margin-top: 24px; }
.section-head--center { text-align: center; }
.section-head--center .lede { margin-inline: auto; }
.section-head--split { display: grid; gap: 28px; align-items: end; }
@media (min-width: 900px) {
  .section-head--split { grid-template-columns: 1.3fr 1fr; gap: 64px; }
  .section-head--split .lede { margin: 0 0 8px; }
}

/* ---------- Buttons ---------- */
.btn {
  --bg: var(--white); --fg: var(--ink);
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 48px; padding: 0 24px; border-radius: var(--radius-pill);
  font-weight: 700; font-size: var(--text-base); letter-spacing: -.005em; white-space: nowrap;
  background: var(--bg); color: var(--fg);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), background-color .25s, color .25s, border-color .25s;
  isolation: isolate; overflow: hidden;
}
.btn__icon { width: 18px; height: 18px; transition: transform .3s var(--ease); }
.btn--sm { height: 40px; padding: 0 18px; font-size: var(--text-md); }
.btn--lg { height: 56px; padding: 0 30px; font-size: var(--text-lg); }
.btn--xl { height: 72px; padding: 0 44px; font-size: var(--text-xl); }
.btn--xl .btn__icon { width: 22px; height: 22px; }

.btn--primary {
  --fg: var(--navy-950);
  background: linear-gradient(100deg, #6fe3f0 0%, var(--cyan) 45%, #3fb6ff 100%);
  box-shadow: 0 0 0 1px rgba(255,255,255,.25) inset, 0 12px 32px -10px rgba(83, 208, 224, .75);
}
.btn--primary::after {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.65) 50%, transparent 70%);
  transform: translateX(-120%); transition: transform .9s var(--ease);
}
.btn--primary:hover::after { transform: translateX(120%); }
.btn--primary:hover { box-shadow: 0 0 0 1px rgba(255,255,255,.35) inset, 0 18px 44px -10px rgba(83, 208, 224, .9); }
.btn--ghost-light { --fg: var(--white); background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.22); }
.btn--ghost-light:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.4); }
.btn--outline { --fg: var(--ink); background: transparent; border: 1.5px solid var(--line); }
.btn--outline:hover { border-color: var(--ink); }

.text-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 24px; font-weight: 700; color: var(--azure); }
.text-link svg { width: 18px; height: 18px; transition: transform .4s var(--ease); }

.tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.tags li { padding: 7px 13px; border-radius: var(--radius-pill); font-size: var(--text-sm); font-weight: 600; color: var(--navy-700); background: var(--ice); }
.tags--light li { color: var(--cyan-300); background: rgba(83, 208, 224, .1); border: 1px solid rgba(83, 208, 224, .2); }

.pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: var(--radius-pill); font-size: var(--text-xs); font-weight: 700; color: var(--navy-700); background: var(--ice); }
.pill--live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 4px rgba(16,185,129,.18); }

/* ---------- Navigation ---------- */
.nav {
  position: fixed; inset: 0 0 auto; z-index: 100;
  padding-top: env(safe-area-inset-top, 0px);
  transition: background-color .5s var(--ease), box-shadow .5s var(--ease), transform .5s var(--ease);
}
.nav__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: var(--nav-h); }
.nav__logo { position: relative; display: block; width: 132px; }
.nav__logo img { width: 100%; height: auto; transition: opacity .4s; }
.nav__logo-light { position: absolute; inset: 0; opacity: 0; }
.nav__links { display: none; gap: 6px; padding: 6px; border-radius: var(--radius-pill); background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.1); transition: background-color .5s, border-color .5s; }
.nav__links a { position: relative; padding: 8px 16px; border-radius: var(--radius-pill); font-size: var(--text-base); font-weight: 600; color: rgba(255,255,255,.82); transition: color .3s, background-color .3s; }
.nav__links a:hover, .nav__links a[aria-current="true"] { color: var(--white); background: rgba(255,255,255,.1); }
.nav__actions { display: flex; align-items: center; gap: 12px; }
.nav__toggle { position: relative; width: 44px; height: 44px; border-radius: 50%; display: grid; place-content: center; gap: 6px; background: rgba(255,255,255,.1); }
.nav__toggle-bar { display: block; width: 18px; height: 2px; border-radius: var(--radius-xs); background: var(--white); transition: transform .4s var(--ease), background-color .3s; }
.nav__toggle[aria-expanded="true"] .nav__toggle-bar:first-of-type { transform: translateY(4px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] .nav__toggle-bar:last-of-type { transform: translateY(-4px) rotate(-45deg); }

.nav.is-scrolled { background: rgba(255,255,255,.78); backdrop-filter: saturate(180%) blur(18px); -webkit-backdrop-filter: saturate(180%) blur(18px); box-shadow: 0 1px 0 rgba(15,23,42,.06), 0 10px 30px -18px rgba(0,40,80,.25); }
.nav.is-scrolled .nav__logo-dark { opacity: 0; }
.nav.is-scrolled .nav__logo-light { opacity: 1; }
.nav.is-scrolled .nav__links { background: transparent; border-color: transparent; }
.nav.is-scrolled .nav__links a { color: var(--ink-2); }
.nav.is-scrolled .nav__links a:hover, .nav.is-scrolled .nav__links a[aria-current="true"] { color: var(--azure); background: var(--ice); }
.nav.is-scrolled .nav__toggle { background: var(--ice); }
.nav.is-scrolled .nav__toggle-bar { background: var(--ink); }
.nav.is-hidden { transform: translateY(-110%); }
/* Over dark sections the bar turns to dark glass instead of white. */
/* No backdrop blur over dark sections: re-blurring the animated WebGL canvas every frame is costly. */
.nav.is-scrolled.is-dark { background: rgba(0,18,31,.86); box-shadow: 0 1px 0 rgba(255,255,255,.06); backdrop-filter: none; -webkit-backdrop-filter: none; }
/* Phones: a live blur behind the nav is recomputed on every scrolled frame, which costs smoothness on
   mobile GPUs. A near-opaque bar looks the same at this size. */
@media (max-width: 959px) { .nav.is-scrolled { background: rgba(255,255,255,.96); backdrop-filter: none; -webkit-backdrop-filter: none; } .nav.is-scrolled.is-dark { background: rgba(0,18,31,.96); } .counters li, .group { backdrop-filter: none; -webkit-backdrop-filter: none; } }
.nav.is-scrolled.is-dark .nav__logo-dark { opacity: 1; }
.nav.is-scrolled.is-dark .nav__logo-light { opacity: 0; }
.nav.is-scrolled.is-dark .nav__links a { color: rgba(255,255,255,.8); }
.nav.is-scrolled.is-dark .nav__links a:hover, .nav.is-scrolled.is-dark .nav__links a[aria-current="true"] { color: var(--white); background: rgba(255,255,255,.1); }
.nav.is-scrolled.is-dark .nav__toggle { background: rgba(255,255,255,.1); }
.nav.is-scrolled.is-dark .nav__toggle-bar { background: var(--white); }
@media (min-width: 960px) {
  .nav__links { display: flex; }
  .nav__toggle { display: none; }
  .nav__logo { width: 140px; }
}

.mobile-menu {
  position: fixed; inset: 0; z-index: 90; display: flex; flex-direction: column; justify-content: center; gap: 36px;
  padding: calc(var(--nav-h) + 24px) var(--gutter) calc(32px + env(safe-area-inset-bottom, 0px));
  background: radial-gradient(120% 70% at 100% 0%, rgba(0,115,230,.35), transparent 60%), var(--navy-950);
}
.mobile-menu nav { display: flex; flex-direction: column; }
.mobile-menu nav a { padding: 10px 0; font-size: var(--text-h3); font-weight: 800; letter-spacing: -.03em; color: var(--white); border-bottom: 1px solid rgba(255,255,255,.08); }
.mobile-menu .btn { align-self: flex-start; }
.mobile-menu__meta { font-size: var(--text-md); color: rgba(255,255,255,.55); }
body.menu-open .nav { background: transparent; box-shadow: none; backdrop-filter: none; }
body.menu-open .nav .nav__logo-dark { opacity: 1; }
body.menu-open .nav .nav__logo-light { opacity: 0; }
body.menu-open .nav .nav__toggle { background: rgba(255,255,255,.1); }
body.menu-open .nav .nav__toggle-bar { background: var(--white); }

/* ---------- WebGL canvas + intro ---------- */
.gl { position: fixed; inset: 0; z-index: 0; width: 100vw; height: 100vh; height: 100lvh; pointer-events: none; opacity: 0; transition: opacity 1.2s var(--ease); }
.gl.is-on { opacity: 1; }
/* The haze behind the orb: fixed like the orb's canvas and shown only while it runs (main.js sets its
   opacity). It is a little taller than the screen so it can drift slower than the scroll. */
.gl-haze { position: fixed; left: 0; right: 0; top: -6vh; bottom: -6vh; z-index: 0; pointer-events: none; opacity: 0; background: url("../assets/img/haze/haze-wide.webp") 50% 40% / cover no-repeat; will-change: transform, opacity; }
@media (max-width: 959px) and (orientation: portrait) { .gl-haze { background-image: url("../assets/img/haze/haze-tall.webp"); background-position: 50% 0; } }
/* .intro stays unpositioned so its background paints beneath the fixed canvas, while its sections paint above it. */
.intro {
  background:
    radial-gradient(70% 55% at 78% 30%, rgba(0, 115, 230, .28), transparent 70%),
    radial-gradient(60% 50% at 10% 90%, rgba(83, 208, 224, .12), transparent 70%),
    linear-gradient(180deg, var(--navy-900) 0%, var(--navy-950) 40%, var(--navy-950) 100%);
  color: var(--white);
}
/* Classes, not child selectors: GSAP wraps pinned sections in a spacer element. */
.hero, .problem, .reveal-band { position: relative; z-index: 1; }
main > section, .footer { position: relative; z-index: 1; }

/* ---------- Hero ---------- */
.hero { min-height: 100vh; min-height: 100svh; display: flex; align-items: center; padding: calc(var(--nav-h) + 40px) 0 120px; overflow: hidden; }
/* Two columns: the copy on the left, an empty column on the right that frames the orb (drawn on the fixed canvas).
   On phones the orb column comes first and the copy sits below it, so the headline never lies over the orb. */
.hero__layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; align-items: center; width: 100%; }
.hero__visual { position: relative; order: -1; height: 54vh; min-height: 320px; pointer-events: none; }
@media (max-width: 959px) {
  /* Phones and tablets: the orb column (which includes the space under the nav) leads, the copy follows. */
  .hero { align-items: flex-start; padding-top: 0; }
}
.hero__content { position: relative; z-index: 2; max-width: 600px; }
.hero__script { font-family: var(--font-script); font-size: var(--text-script); color: var(--cyan); line-height: 1; margin-bottom: 14px; transform: rotate(-2deg); transform-origin: left; }
.hero__title { color: var(--white); font-size: var(--text-h1); line-height: .98; letter-spacing: -.045em; max-width: 11ch; }
.hero__title em { font-style: normal; background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: .06em; }
.line { display: block; overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; }
.line__inner { display: inline-block; }
.hero__lede { margin-top: 26px; max-width: 44ch; font-size: var(--text-lede); color: rgba(226, 238, 250, .78); }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; }
.hero__facts { display: flex; flex-wrap: wrap; gap: 14px 40px; margin-top: 48px; padding-top: 26px; border-top: 1px solid rgba(255,255,255,.1); max-width: 600px; }
.hero__facts li { display: flex; flex-direction: column; gap: 2px; }
.hero__facts strong { color: var(--white); font-size: var(--text-lg); font-weight: 700; letter-spacing: -.01em; }
.hero__facts span { color: rgba(226,238,250,.55); font-size: var(--text-md); }
@media (min-width: 960px) {
  .hero__layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; }
  .hero__visual { order: 0; height: min(78vh, 720px); }
}

.hero__chips { position: absolute; inset: 0; z-index: 2; pointer-events: none; display: none; }
.chip {
  position: absolute; display: grid; grid-template-columns: auto 1fr; column-gap: 12px; row-gap: 2px; align-items: center;
  padding: 14px 20px 14px 16px; border-radius: var(--radius-md); min-width: 210px;
  /* Solid tint instead of backdrop blur: blurring the moving orb behind three cards every frame made it stutter. */
  background: linear-gradient(145deg, rgba(30, 64, 98, .82), rgba(8, 30, 52, .72));
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 30px 60px -30px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.2);
  will-change: transform;
}
.chip__dot { grid-row: span 2; width: 10px; height: 10px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 5px rgba(83,208,224,.16), 0 0 18px var(--cyan); }
.chip__dot--live { background: var(--cyan); animation: pulse 2s infinite; }
.chip__dot--ok { background: var(--ok); box-shadow: 0 0 0 5px rgba(16,185,129,.16), 0 0 18px rgba(16,185,129,.8); }
.chip__label { font-size: var(--text-xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(226,238,250,.6); }
.chip__value { font-size: var(--text-base); font-weight: 700; color: var(--white); }
/* Positions are relative to the orb column, so the cards orbit the sphere instead of the page. */
.chip--a { top: 12%; right: 0; }
.chip--b { top: 50%; left: -6%; }
.chip--c { bottom: 10%; right: 4%; }
@media (min-width: 1100px) { .hero__chips { display: block; } }

.hero__scroll { position: absolute; z-index: 2; left: 50%; bottom: 32px; width: 26px; height: 42px; margin-left: -13px; border: 1.5px solid rgba(255,255,255,.35); border-radius: var(--radius-md); }
.hero__scroll span { position: absolute; left: 50%; top: 8px; width: 3px; height: 8px; margin-left: -1.5px; border-radius: var(--radius-xs); background: var(--cyan); animation: scrollcue 2s var(--ease) infinite; }

@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(83,208,224,.55), 0 0 18px var(--cyan); } 70% { box-shadow: 0 0 0 12px rgba(83,208,224,0), 0 0 18px var(--cyan); } 100% { box-shadow: 0 0 0 0 rgba(83,208,224,0), 0 0 18px var(--cyan); } }
@keyframes scrollcue { 0% { transform: translateY(0); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(16px); opacity: 0; } }

/* ---------- Problem ---------- */
.problem { min-height: 100vh; display: flex; align-items: center; padding: var(--section-y) 0; overflow: hidden; }
.problem__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
/* No opaque overlay here: the section sits above the particle canvas, so the photo stays faint and masked instead. */
.problem__bg img {
  width: 100%; height: 100%; object-fit: cover; opacity: .16; filter: saturate(.5); transform: scale(1.15);
  mask-image: radial-gradient(70% 70% at 65% 50%, #000 20%, transparent 80%); -webkit-mask-image: radial-gradient(70% 70% at 65% 50%, #000 20%, transparent 80%);
}
.problem__inner { display: grid; gap: 56px; }
.problem__intro { position: relative; }
.problem__intro::before { content: ""; position: absolute; inset: -30% -25% -30% -40%; z-index: -1; background: radial-gradient(closest-side, rgba(0,18,31,.85), rgba(0,18,31,.5) 55%, transparent); pointer-events: none; }
.problem__sub { margin-top: 24px; max-width: 40ch; font-size: var(--text-lede); color: rgba(226,238,250,.7); }
.problem__progress { display: none; align-items: center; gap: 14px; margin-top: 48px; font-size: var(--text-sm); font-weight: 700; letter-spacing: .1em; color: rgba(226,238,250,.5); font-variant-numeric: tabular-nums; }
.problem__progress span:first-child { color: var(--cyan); }
.problem__progress i { position: relative; width: 140px; height: 2px; background: rgba(255,255,255,.12); overflow: hidden; border-radius: var(--radius-xs); }
.problem__progress b { position: absolute; inset: 0; background: var(--grad-brand); transform-origin: left; transform: scaleX(.25); }
.problem__list { display: grid; gap: 20px; }
.pain { position: relative; padding: 28px 28px 30px; border-radius: var(--radius); background: linear-gradient(150deg, rgba(16,44,72,.78), rgba(4,22,40,.66)); border: 1px solid rgba(255,255,255,.09); }
.pain__num { display: block; margin-bottom: 18px; font-size: var(--text-sm); font-weight: 800; letter-spacing: .14em; color: var(--cyan); }
.pain h3 { color: var(--white); font-size: var(--text-h5); font-weight: 800; letter-spacing: -.025em; line-height: 1.12; }
.pain p { margin-top: 12px; color: rgba(226,238,250,.68); max-width: 46ch; }

@media (min-width: 960px) {
  .problem__inner { grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
  .problem__progress { display: flex; }
  html.motion .problem__list { position: relative; min-height: 340px; }
  html.motion .problem .pain { position: absolute; inset: 0 0 auto; padding: 40px 40px 44px; }
  html.motion .pain h3 { font-size: var(--text-h3); }
  html.motion .pain p { font-size: var(--text-xl); }
}

/* ---------- Reveal band ---------- */
.reveal-band { min-height: 120vh; display: flex; align-items: center; text-align: center; padding: var(--section-y) 0 calc(var(--section-y) + 10vh); }
.reveal-band__text { position: relative; z-index: 2; }
.reveal-band .display { max-width: 13ch; margin-inline: auto; }
.reveal-band__sub { margin-top: 32px; font-size: var(--text-lede-lg); color: rgba(226,238,250,.72); }
.reveal-band__fade { position: absolute; inset: auto 0 0; height: 26vh; background: linear-gradient(180deg, transparent, var(--white)); pointer-events: none; z-index: 1; }
.word { display: inline-block; }

/* ==========================================================================
   One payroll month: the story
   With motion (html.story-stage, set by scroll-story.js) a stage sticks to the screen and the copy
   scrolls past it: beside it on wide screens, below it on phones. The stage holds photoreal devices
   whose displays show the real EasyPay screens (js/device-mockup.js). With reduced motion or without
   JavaScript, every scene is a simple block: the copy, then its screen on the device.
   ========================================================================== */
.story { position: relative; background: var(--grad-page); }
.story__stage { display: none; }
.story__scenes { position: relative; z-index: 2; }
.scene { padding: clamp(56px, 10vw, 96px) 0; }
.scene__copy { width: 100%; max-width: calc(var(--container) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.scene--intro .lede { margin-top: 22px; }
.scene__day { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 16px; padding: 6px 12px; border-radius: var(--radius-pill); font-size: var(--text-sm); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--color-accent-text); background: var(--color-bg-gradient-start); border: 1px solid var(--color-bg-gradient-end); }
.scene__title { font-size: var(--text-h3); font-weight: 800; letter-spacing: -.035em; line-height: 1.05; color: var(--color-text-heading); text-wrap: balance; }
.scene__text { margin-top: 16px; max-width: 42ch; font-size: var(--text-lede); color: var(--color-text-body); }
.scene--breath { padding: 40px 0; text-align: center; }
.scene__breath { font-size: var(--text-h3); font-weight: 800; letter-spacing: -.035em; line-height: 1.08; color: var(--color-text-heading); text-wrap: balance; }   /* display-size statements that light up word by word (main.js initStatements) */

/* ---------- Device mockups: a photo with the screen mapped onto its display ---------- */
.mockup { position: relative; }
.mockup__photo { display: block; width: 100%; height: auto; -webkit-user-select: none; user-select: none; }
.mockup__screen { position: absolute; left: 0; top: 0; transform-origin: 0 0; overflow: hidden; background: #050608; }
.mockup__screen-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.mockup--phone .mockup__screen { border-radius: 48.75px; }   /* 12.5% of the 390px screen, measured on the photo */
.mockup__island { position: absolute; z-index: 5; left: 50%; top: 11px; width: 118px; height: 32px; margin-left: -59px; border-radius: var(--radius-md); background: #000; }
.mockup__glare { position: absolute; z-index: 6; inset: 0; pointer-events: none; background: linear-gradient(118deg, rgba(255, 255, 255, .1) 0%, rgba(255, 255, 255, .03) 32%, transparent 48%); }

/* Stills (reduced motion, no JavaScript) */
.scene__still { margin: 32px 0 0; max-width: 760px; }
.scene__still--phone { width: min(280px, 70vw); margin-inline: auto; }

/* Hold to run payroll */
.hold { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 30px; }
.hold__button { position: relative; display: grid; place-items: center; width: 168px; height: 168px; border-radius: 50%; color: var(--white); background: radial-gradient(circle at 30% 25%, #38c4ea, #0a63ad 20%, #053f78); box-shadow: 0 24px 50px -18px rgba(0, 100, 180, .7), inset 0 2px 0 rgba(255, 255, 255, .35); transition: transform .4s var(--ease), box-shadow .4s var(--ease); touch-action: none; -webkit-user-select: none; user-select: none; }
.hold__button.is-holding { transform: scale(.96); }
.hold__button.is-done { background: radial-gradient(circle at 30% 25%, #34d399, #047857 22%, #064e3b); box-shadow: 0 24px 50px -18px rgba(4, 120, 87, .7); }
.hold__ring { position: absolute; inset: -12px; width: calc(100% + 24px); height: calc(100% + 24px); transform: rotate(-90deg); }
.hold__ring circle { fill: none; stroke-width: 5; }
.hold__ring circle:first-child { stroke: rgba(14, 116, 144, .15); }
.hold__progress { stroke: var(--color-accent); stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.hold__label { max-width: 110px; font-size: var(--text-base); font-weight: 800; line-height: 1.2; text-align: center; }
.hold__help { max-width: 22ch; font-size: var(--text-md); color: var(--color-text-muted); }
.hold__result { flex-basis: 100%; min-height: 1.5em; font-size: var(--text-h5); font-weight: 800; letter-spacing: -.02em; color: var(--color-text-heading); font-variant-numeric: tabular-nums; }

/* ---------- The stage ---------- */
html.story-stage .scene__still { display: none; }
html.story-stage .story__stage.is-near { display: block; position: sticky; top: 0; z-index: 1; height: 100vh; height: 100svh; margin-bottom: -100vh; margin-bottom: -100svh; overflow: hidden; pointer-events: none; }
html.story-stage .scene { display: flex; padding: 0; }
html.story-stage .scene__copy { position: sticky; align-self: flex-start; }
.story__glow { position: absolute; right: -10vw; top: 10vh; width: 70vw; height: 80vh; border-radius: 50%; background: radial-gradient(closest-side, rgba(34, 211, 238, .18), rgba(58, 123, 213, .06) 60%, transparent); }

/* The frame: a size container, so everything inside is placed in cqw / cqh of the frame. */
.stage-frame {
  position: absolute; container-type: size;
}
/* Centred with margins, not translate(), because GSAP animates these elements' transforms.
   --laptop-width is the laptop's width; its height follows from the photo (2400 x 1792). */
.stage-frame { --laptop-width: min(90cqw, 118cqh); --phone-height: 92cqh; }
.stage-laptop, .stage-phone { position: absolute; left: 50%; top: 50%; will-change: transform, opacity; }   /* they only move and fade (no scaling), so they stay on the GPU between tweens without going soft */
.stage-laptop { width: var(--laptop-width); aspect-ratio: 2400 / 1792; margin: calc(var(--laptop-width) * -0.3733) 0 0 calc(var(--laptop-width) / -2); }
.stage-laptop__zoom { position: absolute; inset: 0; }
.stage-phone { height: var(--phone-height); aspect-ratio: 1100 / 2330; margin: calc(var(--phone-height) / -2) 0 0 calc(var(--phone-height) * -0.2361); }
.stage-phone .mockup { position: relative; z-index: 2; }
/* The lid / turn frames (js/device-sequence.js) fill the device photo's box, under the photo. The phone's
   frames reach 3% lower for the shadow on the floor (tools/make-device-sequences.py). */
.stage-sequence { display: none; }
html.story-stage .stage-sequence { display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; }
html.story-stage .stage-sequence--phone { z-index: 2; height: 103%; }

.story-pullback { position: absolute; z-index: 6; left: 0; top: 0; width: 0; height: 0; object-fit: cover; object-position: top center; transform-origin: 50% 50%; border-radius: 2px; box-shadow: 0 40px 80px -40px rgba(0, 20, 40, .45); pointer-events: none; will-change: transform, opacity; }

/* Props start hidden; the scene scripts bring them in. Positions are in % of their device. */
.story-terminal, .story-beam, .story-map, .story-toast, .story-leave, .story-fan, .story-payslip, .story-returns { position: absolute; opacity: 0; }

.story-terminal { left: -9%; bottom: 2%; height: 74%; aspect-ratio: 537 / 1400; z-index: 3; filter: drop-shadow(0 24px 24px rgba(11, 31, 58, .3)); }
.story-terminal img { width: 100%; height: 100%; }
.story-terminal__screen { position: absolute; left: 9%; top: 15%; width: 82%; height: 56%; overflow: hidden; border-radius: var(--radius-xs); }
.story-terminal__scan { position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, transparent, #67e8f9, transparent); box-shadow: 0 0 16px 4px rgba(34, 211, 238, .7); opacity: 0; }
.story-terminal__ripple { position: absolute; left: 50%; top: 86%; width: 0; height: 0; }
.story-terminal__ripple i { position: absolute; left: -2.2cqh; top: -2.2cqh; width: 4.4cqh; height: 4.4cqh; border-radius: 50%; border: 2px solid var(--color-accent-bright); box-shadow: 0 0 14px rgba(34, 211, 238, .8); opacity: 0; }
/* The beam's viewBox is the laptop box in percent; pathLength=1 lets the dash offset run 1 -> 0. */
.story-beam { inset: 0; width: 100%; height: 100%; z-index: 4; overflow: visible; filter: drop-shadow(0 0 5px rgba(34, 211, 238, .9)); }
.story-beam path { fill: none; stroke: var(--color-accent-bright); stroke-width: .5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }

.story-map { right: 38%; top: -2%; height: 104%; aspect-ratio: 860 / 994; z-index: 1; }
.story-map__island { width: 100%; height: 100%; }
.story-map__site { position: absolute; left: var(--x); top: var(--y); }
.story-map__site i { position: absolute; left: -7px; top: -7px; width: 14px; height: 14px; border-radius: 50%; background: var(--color-accent); border: 3px solid var(--white); box-shadow: 0 4px 10px rgba(11, 31, 58, .3); }
.story-map__site i::before, .story-map__site i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 9cqh; height: 9cqh; margin: -4.5cqh 0 0 -4.5cqh; border-radius: 50%; border: 2px solid rgba(6, 182, 212, .85); background: rgba(34, 211, 238, .22); animation: fence 3s ease-out infinite; }
.story-map__site i::after { animation-delay: 1.5s; }
.story-map__site b { position: absolute; right: 14px; top: -10px; white-space: nowrap; font-size: var(--stage-text-sm); font-weight: 700; color: var(--color-text-heading); background: var(--color-glass); padding: 2px 8px; border-radius: var(--radius-pill); box-shadow: 0 4px 12px -6px rgba(11, 31, 58, .35); }
.story-map__walker { position: absolute; left: 30%; top: 60%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--color-brand-blue); border: 2px solid var(--white); box-shadow: 0 0 0 6px rgba(58, 123, 213, .25); }
@keyframes fence { from { transform: scale(.4); opacity: 1; } to { transform: scale(1.5); opacity: 0; } }
.story-toast { left: 0; right: 0; width: max-content; margin-inline: auto; top: 9%; z-index: 4; display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: var(--radius-md); white-space: nowrap; font-size: var(--stage-text-md); font-weight: 700; color: #166534; background: var(--white); border: 1px solid #bbf7d0; box-shadow: var(--shadow-glass); }
.story-toast i { width: 10px; height: 10px; border-radius: 50%; background: #16a34a; box-shadow: 0 0 0 4px rgba(22, 163, 74, .2); }

.story-leave { left: -2%; top: 4%; z-index: 4; display: grid; gap: 1.6cqh; width: 30%; }
.leave-card { position: relative; display: grid; gap: 2px; padding: 1.8cqh 2cqh; border-radius: var(--radius-md); background: var(--white); border: 1px solid var(--line); box-shadow: var(--shadow-glass); }
.leave-card b { font-size: var(--stage-text-md); color: var(--color-text-heading); }
.leave-card span { font-size: var(--stage-text-sm); color: var(--color-text-muted); }
.leave-card__stamp { position: absolute; right: -10%; top: calc(50% - 1.6cqh); padding: .5cqh 1.2cqh; border-radius: var(--radius-sm); font-style: normal; font-size: var(--stage-text-sm); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #15803d; background: #f0fdf4; border: 2px solid #16a34a; opacity: 0; }
.leave-calendar { padding: 1.4cqh 1.8cqh; border-radius: var(--radius-md); background: var(--white); border: 1px solid var(--line); box-shadow: var(--shadow-glass); }
.leave-calendar p { font-size: var(--stage-text-sm); font-weight: 700; color: var(--color-text-heading); margin-bottom: 1cqh; }
.leave-calendar ol { display: grid; grid-template-columns: repeat(7, 1fr); gap: .5cqh; }
.leave-calendar li { height: 2.6cqh; border-radius: var(--radius-xs); font-size: var(--stage-text-xs); line-height: 2.6cqh; text-align: center; color: var(--color-text-muted); background: #f1f5f9; }

.story-fan { left: 18%; bottom: -6%; z-index: 4; width: 64%; height: 56%; }
.story-fan img { position: absolute; left: 50%; bottom: 0; width: 24%; margin-left: -12%; border-radius: var(--radius-xs); box-shadow: 0 16px 30px -12px rgba(11, 31, 58, .45); transform-origin: 50% 120%; }

.story-payslip { left: 50%; top: 50%; z-index: 6; height: 94cqh; aspect-ratio: 2100 / 2975; margin: -47cqh 0 0 -33.18cqh; perspective: 1400px; }
.story-payslip img { width: 100%; height: 100%; border-radius: var(--radius-sm); box-shadow: 0 50px 90px -30px rgba(11, 31, 58, .55), 0 0 0 1px rgba(11, 31, 58, .06); transform-style: preserve-3d; will-change: transform; }
html.story-stage .story-payslip.is-interactive { pointer-events: auto; }

.story-returns { left: -3%; top: 6%; z-index: 4; width: 34%; height: 86%; }
.return-doc { position: absolute; left: 0; top: 0; display: grid; gap: 2px; width: 76%; padding: 2cqh 2cqh 5cqh; border-radius: var(--radius-sm); background: var(--white); border: 1px solid var(--line); box-shadow: var(--shadow-glass); }
.return-doc b { font-size: var(--stage-text-lg); font-weight: 800; color: var(--color-text-heading); }
.return-doc span { font-size: var(--stage-text-sm); color: var(--color-text-muted); }
.return-folder { position: absolute; left: 0; bottom: 0; width: 92%; height: 44%; border-radius: var(--radius-xs) var(--radius-md) var(--radius-md) var(--radius-md); background: linear-gradient(160deg, var(--color-accent-bright), var(--color-accent-text)); box-shadow: 0 30px 50px -24px rgba(14, 116, 144, .7); }
.return-folder__tab { position: absolute; left: 0; top: -2.4cqh; width: 40%; height: 3cqh; border-radius: var(--radius-sm) var(--radius-sm) 0 0; background: var(--color-accent-bright); }
.return-folder__label { position: absolute; left: 8%; bottom: 10%; font-size: var(--stage-text-md); font-weight: 700; color: var(--white); }
.return-stamp { position: absolute; right: -6%; bottom: 30%; padding: 1cqh 1.6cqh; border-radius: var(--radius-sm); font-style: normal; font-size: var(--stage-text-lg); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #15803d; background: rgba(240, 253, 244, .95); border: 3px solid #16a34a; opacity: 0; }

/* Wide screens: the frame fills the right of the screen, the copy sticks on the left. */
@media (min-width: 960px) {
  /* The left edge clips 2.5vw outside the frame: the copy ends at 32vw, so a zoomed-in laptop never slides
     under the text, while the terminal (which hangs a little left of the laptop) still fits. */
  .stage-frame { left: 35vw; right: 1vw; top: calc(var(--nav-h) + 2vh); bottom: 3vh; clip-path: inset(-100vh -100vw -100vh -2.5vw); }
  /* The copy is anchored to the left edge of the screen (not the centred page container), so on very
     wide screens it still ends before the stage frame, which starts at 35vw. */
  html.story-stage .scene__copy { top: 30vh; max-width: none; margin-inline: 0; padding-left: max(var(--gutter), 4vw); padding-right: 0; }
  html.story-stage .scene__copy > * { max-width: 28vw; }
  html.story-stage .scene__title { font-size: var(--text-h3); }
  html.story-stage .scene--intro .scene__copy { top: 26vh; }
  html.story-stage .scene--breath .scene__copy { top: 44vh; }
  html.story-stage .scene--breath { text-align: left; }
}

/* Phones and tablets: the frame sits in the top half, the copy sticks in the lower half on a light panel. */
@media (max-width: 959px) {
  .stage-frame { left: 3vw; right: 3vw; top: calc(var(--nav-h) + 1svh); height: 47svh; }
  .stage-frame { --laptop-width: min(96cqw, 120cqh); }
  html.story-stage .scene__copy { top: calc(var(--nav-h) + 50svh); max-width: 640px; }
  html.story-stage .scene__copy > :first-child { margin-top: 0; }
  html.story-stage .scene:not(.scene--breath) .scene__copy { padding: 16px var(--gutter) 18px; background: linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(255, 255, 255, .97)); border-radius: var(--radius-lg) var(--radius-lg) 0 0; box-shadow: 0 -12px 30px -24px rgba(11, 31, 58, .3); }
  html.story-stage .scene__title { font-size: var(--text-h5); }
  html.story-stage .scene__text { margin-top: 10px; font-size: var(--text-base); }
  html.story-stage .scene__day { margin-bottom: 10px; }
  html.story-stage .hold { margin-top: 14px; gap: 10px 16px; }
  html.story-stage .hold__button { width: 104px; height: 104px; }
  html.story-stage .hold__label { font-size: var(--text-sm); max-width: 80px; }
  html.story-stage .hold__result { font-size: var(--text-xl); }

  /* The stage sits above the copy, on a solid backdrop that covers the devices' half of the screen, so a
     chapter's text slides away under the devices instead of over them. Taps still reach the copy (the
     stage ignores pointer events). The story's background is flat here, so the backdrop matches it. */
  html.story-stage .story { background: var(--color-bg); }
  /* The stage is only as tall as the devices' half of the screen, and clips there: nothing on it (a zoomed
     laptop) reaches into the copy below. */
  html.story-stage .story__stage.is-near { z-index: 3; height: calc(var(--nav-h) + 50svh); margin-bottom: calc(-1 * (var(--nav-h) + 50svh)); }
  html.story-stage .story__stage::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: calc(var(--nav-h) + 50svh); background: linear-gradient(180deg, var(--color-bg) calc(100% - 10px), rgba(255, 255, 255, 0)); }
}
/* Short phones (iPhone SE and similar): the payroll panel has to fit the title, text and button. */
@media (max-width: 959px) and (max-height: 720px) {
  html.story-stage .scene__text { font-size: var(--text-md); line-height: 1.5; }
  html.story-stage .hold { margin-top: 10px; }
  html.story-stage .hold__button { width: 84px; height: 84px; }
  html.story-stage .hold__label { font-size: var(--text-xs); max-width: 66px; }
  html.story-stage .hold__help { display: none; }
}

/* Day counter */
/* Story chapters (wide screens): slides down under the nav while the story is on screen. The underline
   slides to the chapter being read; it is a 2px bar, so scaling it never distorts it. */
.chapter-bar { position: fixed; z-index: 59; top: var(--nav-h); left: 0; right: 0; width: max-content; margin-inline: auto; display: none; gap: 4px; padding: 6px; border-radius: 0 0 var(--radius-md) var(--radius-md); background: rgba(255, 255, 255, .96); border: 1px solid var(--line); border-top: 0; box-shadow: var(--shadow-glass); visibility: hidden; transform: translateY(-110%); transition: transform .3s var(--ease), visibility 0s .3s; }
.chapter-bar.is-visible { visibility: visible; transform: none; transition: transform .3s var(--ease); }
.chapter-bar a { position: relative; z-index: 1; padding: 8px 14px; border-radius: var(--radius-pill); font-size: var(--text-sm); font-weight: 700; color: var(--color-text-muted); transition: color .25s; }
.chapter-bar a.is-active, .chapter-bar a:hover { color: var(--color-text-heading); }
.chapter-bar__underline { position: absolute; left: 0; bottom: 6px; width: 100px; height: 2px; border-radius: var(--radius-xs); background: var(--grad-brand); transform-origin: left; transform: translateX(0) scaleX(0); transition: transform .25s var(--ease); }
@media (min-width: 960px) and (min-height: 720px) { .chapter-bar { display: flex; } .day-counter { display: none; } }

.day-counter { position: fixed; right: 24px; bottom: 24px; z-index: 60; display: grid; gap: 4px; min-width: 150px; padding: 12px 16px; border-radius: var(--radius-md); background: rgba(255, 255, 255, .94); border: 1px solid var(--color-glass-border); box-shadow: var(--shadow-glass); opacity: 0; transform: translateY(16px); transition: opacity .5s var(--ease), transform .5s var(--ease); pointer-events: none; }
.day-counter.is-visible { opacity: 1; transform: none; }
@media (max-width: 959px) { .day-counter { right: 10px; top: calc(var(--nav-h) + 6px); bottom: auto; min-width: 0; padding: 5px 12px; border-radius: var(--radius-pill); } .day-counter__month, .day-counter__track { display: none; } .day-counter__day { font-size: var(--text-sm); } }
.day-counter__month { font-size: var(--text-2xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--color-text-muted); }
.day-counter__day { font-size: var(--text-2xl); font-weight: 800; letter-spacing: -.02em; color: var(--color-text-heading); font-variant-numeric: tabular-nums; }
.day-counter__track { height: 3px; border-radius: var(--radius-xs); background: var(--line); overflow: hidden; }
.day-counter__track i { display: block; height: 100%; width: 100%; background: var(--grad-brand); transform: scaleX(.03); transform-origin: left; transition: transform .35s var(--ease); }

/* ---------- PAYE simulator ---------- */
.simulator { padding: var(--section-y) 0; background: radial-gradient(50% 60% at 90% 30%, var(--color-bg-gradient-end), transparent 70%), var(--color-bg); }
.simulator__inner { display: grid; gap: 40px; align-items: center; }
.simulator__copy .lede { margin-top: 22px; }
.simulator__note { margin-top: 22px; max-width: 46ch; font-size: var(--text-md); color: var(--color-text-body); }
.simulator__card { display: grid; gap: 22px; padding: clamp(22px, 3vw, 36px); border-radius: var(--radius-lg); background: var(--white); border: 1px solid var(--line); box-shadow: var(--shadow-card); }
.simulator__row { display: grid; gap: 16px; grid-template-columns: 1fr; }
.simulator__field { display: grid; gap: 8px; }
.simulator__field label { display: flex; justify-content: space-between; align-items: baseline; font-size: var(--text-md); font-weight: 700; color: var(--ink-2); }
.simulator__field output { font-size: var(--text-2xl); font-weight: 800; color: var(--color-text-heading); font-variant-numeric: tabular-nums; }
.simulator__field input[type="number"], .simulator__field select { width: 100%; padding: 12px 14px; border-radius: var(--radius-sm); font: 600 15.5px var(--font); color: var(--ink); background: var(--mist); border: 1.5px solid var(--line); }
.simulator__field input[type="range"] { width: 100%; accent-color: var(--color-brand-blue); height: 28px; }
.simulator__bars { display: grid; gap: 14px; }
.sim-bar { display: grid; grid-template-columns: 80px 1fr; align-items: center; gap: 12px; }
.sim-bar dt { font-size: var(--text-md); font-weight: 700; color: var(--ink-2); }
.sim-bar dd { margin: 0; display: grid; grid-template-columns: 1fr 108px; align-items: center; gap: 12px; }
.sim-bar__track { height: 12px; border-radius: var(--radius-sm); background: #eef2f7; overflow: hidden; }
.sim-bar__track i { display: block; height: 100%; width: 0; border-radius: var(--radius-sm); background: linear-gradient(90deg, #8fb8e8, var(--color-brand-blue)); width: 100%; transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
.sim-bar--net .sim-bar__track i { background: linear-gradient(90deg, var(--color-accent-bright), var(--color-accent-text)); }
.sim-bar b { text-align: right; font-size: var(--text-base); font-weight: 800; color: var(--color-text-heading); font-variant-numeric: tabular-nums; }
/* Net pay's odometer: each digit is a 10-line strip in a one-line window that slides to its digit. */
.odo { display: inline-block; height: 1.15em; line-height: 1.15em; overflow: hidden; vertical-align: bottom; }
.odo__strip { display: block; transition: transform .35s var(--ease); }
.sim-bar--net b { font-size: var(--text-xl); }
.simulator__gross { font-size: var(--text-md); color: var(--color-text-muted); }
.simulator__gross b { color: var(--color-text-heading); }
@media (min-width: 640px) { .simulator__row { grid-template-columns: 1.4fr 1fr; } }
@media (min-width: 960px) { .simulator__inner { grid-template-columns: .9fr 1.1fr; gap: 80px; } }

/* ---------- Finale: the month in one circle, then a payslip ----------
   Without motion (no html.finale-motion) the chapters show as a simple row of bubbles and the card shows its
   back (logo and call to action) flat. With motion, scene-finale.js places the bubbles on the circle. */
.finale { position: relative; background: var(--grad-page); }
.finale__pin { position: relative; display: grid; place-items: center; gap: 40px; padding: 96px var(--gutter); overflow: hidden; }
.finale__circle { position: relative; width: min(720px, 88vw); }
.finale__ring { display: none; }
.finale__bubbles { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.finale__bubble { display: grid; justify-items: center; gap: 2px; padding: 12px 18px; border-radius: var(--radius-pill); text-align: center; font-size: var(--text-base); font-weight: 700; color: var(--color-text-heading); background: var(--white); border: 1px solid var(--line); box-shadow: var(--shadow-glass); white-space: nowrap; }
.finale__bubble small { font-size: var(--text-2xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--color-accent-text); }
.finale__card { position: relative; width: min(340px, 80vw); aspect-ratio: 2100 / 2975; perspective: 1600px; }
.finale__card-float, .finale__card-tilt, .finale__card-spin { position: absolute; inset: 0; transform-style: preserve-3d; }
.finale__face { position: absolute; inset: 0; border-radius: var(--radius-md); overflow: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden; box-shadow: 0 50px 90px -30px rgba(11, 31, 58, .55), 0 0 0 1px rgba(11, 31, 58, .06); }
.finale__face--front img { width: 100%; height: 100%; }
.finale__face--back { display: grid; place-content: center; justify-items: center; gap: 22px; padding: 28px; text-align: center; color: var(--white); background: radial-gradient(90% 60% at 100% 0%, rgba(83, 208, 224, .35), transparent 70%), linear-gradient(160deg, var(--navy-800), var(--navy-950)); }
.finale__logo { width: 70%; height: auto; }
.finale__title { font-size: var(--text-h5); font-weight: 800; letter-spacing: -.03em; line-height: 1.1; color: var(--white); }
/* Without motion the card simply shows its back. */
html:not(.finale-motion) .finale__face--front { display: none; }

/* With motion: a pinned, full-screen circle; the card waits hidden in the middle. */
html.finale-motion .finale__pin { height: 100vh; height: 100svh; display: block; padding: 0; }
html.finale-motion .finale__circle { --circle-size: min(78vh, 86vw); position: absolute; left: 50%; top: 50%; width: var(--circle-size); aspect-ratio: 1; margin: calc(var(--circle-size) / -2) 0 0 calc(var(--circle-size) / -2); }
@media (max-width: 719px) { html.finale-motion .finale__circle { --circle-size: min(60vh, 60vw); } html.finale-motion .finale__bubble { padding: 7px 11px; font-size: var(--text-2xs); } .finale__bubble small { font-size: var(--text-3xs); } }
html.finale-motion .finale__ring { display: block; position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.finale__ring-track { fill: none; stroke: rgba(14, 116, 144, .18); stroke-width: .35; stroke-dasharray: 1.2 1.6; }
.finale__ring-progress { fill: none; stroke: var(--color-accent); stroke-width: .7; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; filter: drop-shadow(0 0 1.5px rgba(34, 211, 238, .8)); }
html.finale-motion .finale__bubbles { display: block; position: absolute; inset: 0; }
html.finale-motion .finale__bubble { position: absolute; left: 50%; top: 50%; padding: 10px 16px; font-size: var(--text-label-fluid); will-change: transform; }
html.finale-motion .finale__card { position: absolute; left: 50%; top: 50%; width: auto; height: min(70vh, 112vw); margin: calc(min(70vh, 112vw) / -2) 0 0 calc(min(70vh, 112vw) * -0.353); visibility: hidden; }
html.finale-motion .finale__face--back { -webkit-transform: rotateY(180deg); transform: rotateY(180deg); }

.essentials { padding: clamp(80px, 9vw, 120px) 0 clamp(96px, 10vw, 140px); text-align: center; overflow: hidden; background: var(--mist); position: relative; z-index: 1; }
.marquee { margin-top: 12px; mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.marquee__track { display: flex; gap: 14px; width: max-content; animation: marquee 48s linear infinite; }
.marquee__track li { padding: 16px 26px; border-radius: var(--radius-pill); white-space: nowrap; font-size: var(--text-lede-lg); font-weight: 700; letter-spacing: -.01em; color: var(--ink); background: var(--white); border: 1px solid var(--line); box-shadow: 0 10px 30px -20px rgba(0,40,80,.35); }
.marquee:hover .marquee__track, .marquee.is-paused .marquee__track { animation-play-state: paused; }
/* Pause control for the moving list (WCAG 2.2.2): a round button at the row's right end, outside its fade. */
.marquee__toggle { position: absolute; z-index: 2; right: max(var(--gutter), 12px); bottom: clamp(30px, 4vw, 48px); display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: var(--ink); background: var(--white); border: 1px solid var(--line); box-shadow: var(--shadow-card); transition: transform .3s var(--ease), border-color .3s; }
.marquee__icon { width: 18px; height: 18px; fill: currentColor; }
.marquee__icon--play, .marquee__toggle[aria-pressed="true"] .marquee__icon--pause { display: none; }
.marquee__toggle[aria-pressed="true"] .marquee__icon--play { display: block; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- EasyPay AI Agent ----------
   The agent window copies the real AI Agent page: wwwroot/css/Chatbot/chatbot.css (chat), helpPanel.css and
   site.css (top bar), with the app's Poppins font. Only the section around it uses the website's style. */
.ai { position: relative; padding: var(--section-y) 0; overflow: hidden; background: radial-gradient(45% 40% at 85% 10%, rgba(139, 92, 246, .1), transparent 70%), radial-gradient(50% 50% at 10% 90%, var(--color-bg-gradient-end), transparent 70%), var(--color-bg); }
.ai__head { max-width: 760px; margin-bottom: clamp(36px, 5vw, 56px); }
.ai__head .lede { margin-top: 22px; }
.hero__badge span { padding: 4px 10px; border-radius: var(--radius-pill); font-size: var(--text-xs); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--white); background: linear-gradient(90deg, #6d28d9, #1d6fd8); }
.text-accent { color: var(--azure); }
.ai__claim { display: flex; align-items: center; gap: 12px; margin-top: 22px; font-size: var(--text-lede); font-weight: 700; color: var(--color-text-heading); text-wrap: balance; }
.ai__claim svg { width: 22px; height: 22px; color: #8b5cf6; }
.ai__note { margin-top: 16px; text-align: center; font-size: var(--text-sm); color: var(--color-text-body); }

.agent { font-family: "Poppins", var(--font); font-size: var(--text-sm); color: var(--ink-2); border-radius: var(--radius-md); overflow: hidden; background: #e9eff4; border: 1px solid #dbe4ee; box-shadow: 0 50px 100px -40px rgba(0, 40, 80, .45), 0 0 0 1px rgba(255, 255, 255, .6) inset; }
.agent svg { width: 1em; height: 1em; }
.agent__topbar { display: flex; align-items: center; height: 48px; padding: 0 16px 0 22px; color: var(--white); background: linear-gradient(180deg, #005e95, #00456e); }
.agent__crumb { font-size: var(--text-sm); font-weight: 600; }
.agent__topbar-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.agent__help { position: relative; display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--radius-sm); font-size: var(--text-lg); color: rgba(255, 255, 255, .8); }
.agent__help::after { content: ""; position: absolute; top: 4px; right: 4px; width: 9px; height: 9px; background: linear-gradient(135deg, #a5f0f8, var(--cyan)); clip-path: polygon(50% 0%, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0% 50%, 38% 38%); }
.agent__pill { display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px; border-radius: var(--radius-sm); font-size: var(--text-sm); background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16); }
.agent__avatar { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font-size: var(--text-3xs); font-style: normal; font-weight: 700; background: linear-gradient(135deg, #2563c4, #0373b0); }
.agent__body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; height: clamp(520px, 62vh, 640px); padding: 16px; }
.agent-rail { display: none; flex-direction: column; align-items: center; gap: 22px; margin: -16px 0 -16px -16px; padding-top: 22px; font-size: var(--text-2xl); color: rgba(255, 255, 255, .55); background: linear-gradient(180deg, #00456e, #002438); }
.agent-list { display: none; flex-direction: column; gap: 10px; padding: 14px 10px 10px; border-radius: var(--radius-md); background: var(--white); border: 1px solid #e8eef6; box-shadow: 0 1px 3px rgba(0, 40, 80, .04), 0 4px 12px rgba(0, 40, 80, .06); }
.agent-list__new { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 14px; border-radius: var(--radius-sm); font-size: var(--text-sm); font-weight: 600; color: var(--white); background: linear-gradient(90deg, #2563c4, #0373b0);   /* the app's blue-to-cyan, deepened so the white label reads (5:1+) */ box-shadow: 0 4px 14px rgba(10, 195, 248, .3); }
.agent-list ul { display: grid; gap: 2px; }
.agent-list__group { margin: 10px 8px 4px; font-size: var(--text-2xs); letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-body); }
.agent-list__item { display: grid; gap: 1px; padding: 8px 10px; border-radius: var(--radius-sm); font-size: var(--text-sm); color: #334155; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.agent-list__item small { font-size: var(--text-2xs); color: var(--color-text-body); }
.agent-list__item.is-open { font-weight: 600; color: var(--navy-700); background: linear-gradient(90deg, rgba(10, 195, 248, .12), rgba(48, 138, 220, .04)); box-shadow: inset 3px 0 0 var(--cyan); }
.agent-page { display: flex; flex-direction: column; min-width: 0; min-height: 0; border-radius: var(--radius-md); border: 1px solid #e8eef6; box-shadow: 0 1px 3px rgba(0, 40, 80, .04), 0 4px 12px rgba(0, 40, 80, .06); background: radial-gradient(640px circle at 0% 0%, rgba(10, 195, 248, .10), transparent 60%), radial-gradient(720px circle at 100% 100%, rgba(48, 138, 220, .11), transparent 60%), var(--white); }
.agent-bar { display: flex; align-items: center; gap: 12px; padding: 6px 10px 6px 18px; min-height: 42px; border-bottom: 1px solid #f1f5f9; }
.agent-bar__label { font-size: var(--text-2xs); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--color-text-body); }
.agent-bar__beta { margin-left: 4px; padding: 1px 5px; border-radius: var(--radius-xs); font-size: var(--text-2xs); letter-spacing: .04em; background: #f1f5f9; }
.agent-bar__credits { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-xs); font-weight: 600; color: var(--color-text-body); }
.agent-bar__credits svg { width: 14px; height: 12px; fill: var(--cyan); }
.agent-messages { flex: 1; min-height: 0; overflow-y: auto; padding: 22px clamp(16px, 4vw, 48px); scroll-behavior: smooth; }
.agent-messages > * { max-width: 760px; min-width: 0; margin-inline: auto; }
.agent-welcome { display: grid; justify-items: center; text-align: center; padding-top: clamp(8px, 3vh, 32px); }
.agent-welcome__mark { display: grid; place-items: center; width: 58px; height: 58px; border-radius: var(--radius-md); font-size: var(--text-3xl); color: var(--white); background: linear-gradient(90deg, var(--color-brand-blue) -25%, var(--color-brand-cyan) 125%); box-shadow: 0 10px 30px rgba(10, 195, 248, .35); }
.agent-welcome__title { margin-top: 18px; font-size: var(--text-3xl); font-weight: 600; letter-spacing: -.01em; color: var(--navy-700); }
.agent-welcome__subtitle { margin-top: 6px; font-size: var(--text-base); color: var(--color-text-body); }
.agent-welcome__examples { display: grid; grid-template-columns: 1fr; gap: 10px; width: 100%; max-width: 640px; margin-top: 26px; text-align: left; }
.agent-example { display: flex; align-items: center; gap: 12px; padding: 13px 14px; border-radius: var(--radius-sm); font-size: var(--text-md); color: #334155; background: rgba(255, 255, 255, .85); border: 1px solid var(--line); transition: transform .25s, border-color .25s, box-shadow .25s; }
.agent-example:focus-visible { transform: translateY(-2px); border-color: var(--cyan); box-shadow: 0 8px 20px -12px rgba(0, 60, 100, .35); }
.agent-example i { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: var(--radius-sm); font-size: var(--text-base); color: #308adc; background: #eef8fd; }
.agent-msg { display: flex; margin-bottom: 18px; animation: agent-in .35s var(--ease); }
.agent-msg--user { justify-content: flex-end; }
.agent-msg--user .agent-bubble { max-width: 88%; padding: 11px 16px; border-radius: var(--radius-md) var(--radius-md) var(--radius-xs) var(--radius-md); font-size: var(--text-md); color: #0f3d5e; background: linear-gradient(135deg, #e6f3fd, #e4f8fd); }
.agent-msg--assistant .agent-bubble { width: 100%; padding: 0 2px; font-size: var(--text-md); line-height: 1.7; color: var(--ink-2); }
.agent-bubble p + p { margin-top: 10px; }
.agent-bubble strong { font-weight: 600; }
.agent-li { display: block; padding-left: 8px; }
.agent-table { margin-top: 12px; overflow-x: auto; border: 1px solid #e8eef6; border-radius: var(--radius-sm); background: var(--white); box-shadow: 0 1px 3px rgba(0, 40, 80, .04); }
.agent-table table { width: 100%; border-collapse: collapse; }
.agent-table th { padding: 8px 16px; text-align: left; font-size: var(--text-xs); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--navy-700); background: #f3f8fd; }
.agent-table td { padding: 8px 16px; font-size: var(--text-sm); font-variant-numeric: tabular-nums; border-top: 1px solid #f1f5f9; white-space: nowrap; }
.agent-report-buttons { display: flex; gap: 8px; margin-top: 12px; }
.agent-report-buttons span { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: var(--radius-sm); font-size: var(--text-xs); color: #334155; background: var(--white); border: 1px solid var(--line); }
.agent-report-buttons svg { color: var(--color-brand-blue); }
.agent-typing { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.agent-typing__dots { display: inline-flex; gap: 5px; }
.agent-typing__dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); animation: agent-bounce 1.2s infinite; }
.agent-typing__dots i:nth-child(2) { animation-delay: .15s; } .agent-typing__dots i:nth-child(3) { animation-delay: .3s; }
.agent-typing__status { font-size: var(--text-xs); font-style: italic; color: var(--color-text-body); }
@keyframes agent-bounce { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-6px); } }
@keyframes agent-in { from { opacity: 0; transform: translateY(8px); } }
.agent-input { display: flex; align-items: flex-end; gap: 10px; max-width: 808px; width: calc(100% - 32px); margin: 0 auto; padding: 0 0 6px; }
.agent-input__box { flex: 1; min-width: 0; min-height: 64px; padding: 14px 18px; border-radius: var(--radius-md); font: inherit; font-size: var(--text-lg); color: var(--ink-2); background: var(--white); border: 1px solid #dbe4ee; box-shadow: 0 1px 3px rgba(0, 40, 80, .04), 0 6px 18px rgba(0, 40, 80, .06); outline: none; }
.agent-input__box::placeholder { color: var(--color-text-muted); }
.agent-input__box:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(10, 195, 248, .14); }
.agent-suggestions { display: flex; gap: 8px; overflow-x: auto; max-width: 808px; width: calc(100% - 32px); margin: 0 auto 10px; padding-bottom: 2px; scrollbar-width: none; }
.agent-suggestions::-webkit-scrollbar { display: none; }
.agent-suggestions[hidden] { display: none; }
.agent-suggestions button { flex: none; padding: 7px 12px; border-radius: var(--radius-pill); font-size: var(--text-sm); color: #334155; background: rgba(255, 255, 255, .9); border: 1px solid var(--line); transition: border-color .2s, transform .2s; }
.agent-suggestions button:focus-visible { border-color: var(--cyan); transform: translateY(-1px); }
.agent-input__box.is-typing { color: var(--ink-2); border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(10, 195, 248, .14); }
.agent-input__send { display: grid; place-items: center; flex: none; width: 48px; height: 48px; margin-bottom: 8px; cursor: pointer; border-radius: var(--radius-sm); font-size: var(--text-md); color: var(--white); background: linear-gradient(90deg, var(--color-brand-blue) -25%, var(--color-brand-cyan) 125%); box-shadow: 0 6px 16px rgba(10, 195, 248, .35); }
.agent-disclaimer { padding: 4px 0 12px; text-align: center; font-size: var(--text-xs); color: var(--color-text-body); }
@media (max-width: 719px) {
  .agent__pill { display: none; }
  /* Phones: the suggestions stay in one row the reader swipes through, so the answer keeps the room.
     The right edge fades out to show there is more to swipe to. */
  .agent-suggestions { scroll-snap-type: x proximity; padding-right: 36px; -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent); mask-image: linear-gradient(90deg, #000 82%, transparent); }
  .agent-suggestions button { scroll-snap-align: start; }
}
@media (min-width: 720px) { .agent-welcome__examples { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px) {
  .agent__body { grid-template-columns: 56px 240px minmax(0, 1fr); }
  .agent-rail { display: flex; }
  .agent-list { display: flex; }
}

.hero__badge { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 22px; padding: 6px 14px 6px 6px; border-radius: var(--radius-pill); font-size: var(--text-md); font-weight: 600; color: var(--white); background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.14); transition: background .3s, border-color .3s; }
.hero__badge:hover { background: rgba(255,255,255,.12); border-color: rgba(139,92,246,.6); }
.hero__badge svg { width: 16px; height: 16px; transition: transform .4s var(--ease); }
.nav__links a.nav__ai::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 7px; border-radius: 50%; vertical-align: middle; background: linear-gradient(135deg, #8b5cf6, var(--cyan)); box-shadow: 0 0 8px rgba(139,92,246,.9); }

/* ---------- Hardware ---------- */
.hardware { position: relative; padding: var(--section-y) 0; overflow: hidden; background: radial-gradient(55% 50% at 70% 45%, var(--color-bg-gradient-end), transparent 70%), var(--grad-page); }
.hardware__glow { position: absolute; left: 50%; top: 55%; width: 1100px; height: 1100px; margin: -550px 0 0 -550px; border-radius: 50%; background: conic-gradient(from 0deg, transparent, rgba(34,211,238,.16), transparent 30%, rgba(58,123,213,.12), transparent 60%); filter: blur(60px); animation: spin 24s linear infinite; pointer-events: none; will-change: transform; }
@keyframes spin { to { transform: rotate(360deg); } }
.devices { position: relative; display: grid; gap: 32px; }
.devices__tabs { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
.devices__tabs::-webkit-scrollbar { display: none; }
.device-tab { flex: none; text-align: left; padding: 16px 20px; border-radius: var(--radius-md); border: 1px solid var(--line); background: var(--color-glass); transition: background .25s, border-color .25s, transform .3s var(--ease); }
.device-tab__name { display: block; font-size: var(--text-xl); font-weight: 800; letter-spacing: -.01em; color: var(--color-text-heading); }
.device-tab__tag { display: block; margin-top: 2px; font-size: var(--text-md); color: var(--color-text-muted); }
.device-tab:hover { background: var(--white); }
.device-tab[aria-selected="true"] { background: var(--white); border-color: var(--color-accent); box-shadow: var(--shadow-glass); }
.device { display: grid; gap: 32px; align-items: center; }
.device__img { position: relative; display: grid; grid-template-rows: minmax(0, 1fr); place-items: center; height: clamp(360px, 52vw, 600px); perspective: 1200px; }   /* the definite row lets the photo's 88% height resolve, so it never spills onto the text */
.device__img::before { content: ""; position: absolute; width: 70%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgba(34,211,238,.35), rgba(58,123,213,.12) 55%, transparent 72%); filter: blur(10px); }
.device__img::after { content: ""; position: absolute; bottom: 4%; width: 46%; height: 26px; border-radius: 50%; background: radial-gradient(closest-side, rgba(11,31,58,.28), transparent); filter: blur(6px); }
.device__img img { position: relative; height: 88%; width: auto; filter: drop-shadow(0 40px 40px rgba(11,31,58,.28)); transform-style: preserve-3d; will-change: transform; animation: float 7s var(--ease-io) infinite; }
@keyframes float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -14px; } }
.device__copy h3 { font-size: var(--text-h3); font-weight: 800; letter-spacing: -.035em; line-height: 1.05; color: var(--color-text-heading); }
.device__copy p { margin-top: 18px; max-width: 46ch; font-size: var(--text-xl); color: var(--color-text-body); }
.hw-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1px; margin-top: clamp(56px, 7vw, 96px); border-radius: var(--radius); overflow: hidden; background: var(--line); border: 1px solid var(--line); box-shadow: var(--shadow-card); }
.hw-facts li { padding: 28px; background: var(--white); }
.hw-facts strong { display: block; font-size: var(--text-h4); font-weight: 800; letter-spacing: -.03em; color: var(--color-text-heading); }
.hw-facts span { color: var(--color-text-muted); font-size: var(--text-base); }
@media (min-width: 960px) {
  .devices { grid-template-columns: 300px 1fr; gap: 56px; align-items: center; }
  .devices__tabs { flex-direction: column; overflow: visible; }
  .device-tab:hover, .device-tab[aria-selected="true"] { transform: translateX(6px); }
  .device { grid-template-columns: 1.05fr 1fr; gap: 48px; }
}

/* ---------- How it works ---------- */
.how { padding: var(--section-y) 0; background: var(--white); }
.steps { position: relative; display: grid; gap: 40px; }
.steps__line { position: absolute; left: 27px; top: 8px; bottom: 8px; width: 2px; background: var(--line); }
.steps__line i { position: absolute; inset: 0; background: linear-gradient(180deg, var(--azure), var(--cyan)); transform-origin: top; }
.step { position: relative; padding-left: 84px; }
.step__num { position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; font-size: var(--text-lg); font-weight: 800; color: var(--azure); background: var(--white); border: 1.5px solid var(--line); box-shadow: 0 0 0 8px var(--white); transition: all .6s var(--ease); }
.step.is-active .step__num { color: var(--white); border-color: transparent; background: linear-gradient(140deg, var(--azure), var(--cyan)); box-shadow: 0 0 0 8px var(--white), 0 14px 30px -10px rgba(0,115,230,.6); }
.step h3 { padding-top: 12px; font-size: var(--text-2xl); font-weight: 800; letter-spacing: -.02em; color: var(--ink); }
.step p { margin-top: 10px; max-width: 34ch; }
@media (min-width: 960px) {
  .steps { grid-template-columns: repeat(4, 1fr); gap: 32px; }
  .steps__line { left: 28px; right: 28px; top: 27px; bottom: auto; width: auto; height: 2px; }
  .steps__line i { background: linear-gradient(90deg, var(--azure), var(--cyan)); transform-origin: left; }
  .step { padding: 88px 16px 0 0; }
  .step h3 { padding-top: 0; }
}

/* ---------- Value ---------- */
.value { position: relative; padding: var(--section-y) 0 calc(var(--section-y) + 22vh); background: radial-gradient(60% 60% at 100% 0%, rgba(83,208,224,.25), transparent 70%), linear-gradient(180deg, var(--ice), #f2f8fe); }
.outcomes { border-top: 1px solid rgba(0,75,120,.14); counter-reset: o; }
.outcome { position: relative; display: grid; gap: 8px; padding: 30px 0; border-bottom: 1px solid rgba(0,75,120,.14); counter-increment: o; }
.outcome h3 { font-size: var(--text-h3); font-weight: 800; letter-spacing: -.04em; line-height: 1.04; color: var(--navy-850); transition: color .3s, transform .35s var(--ease); }
.outcome p { font-size: var(--text-lg); max-width: 44ch; }
.outcome::before { content: "0" counter(o); font-size: var(--text-sm); font-weight: 800; letter-spacing: .14em; color: var(--azure); }
@media (min-width: 960px) {
  .outcome { grid-template-columns: 80px 1fr; align-items: center; gap: 24px; padding: 30px 0; }
  .outcome:hover h3 { color: var(--azure); transform: translateX(10px); }
}
.counters { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: clamp(56px, 7vw, 96px); }
.counters li { padding: 28px 24px; border-radius: var(--radius); background: rgba(255,255,255,.75); border: 1px solid rgba(255,255,255,.9); box-shadow: var(--shadow-card); backdrop-filter: blur(8px); }
.counters strong { display: block; font-size: var(--text-h2); font-weight: 800; letter-spacing: -.05em; line-height: 1; color: var(--azure); font-variant-numeric: tabular-nums; }
.counters strong small { font-size: .42em; letter-spacing: -.02em; }
.counters span:not([data-count]) { display: block; margin-top: 12px; font-size: var(--text-base); }
@media (min-width: 960px) { .counters { grid-template-columns: repeat(4, 1fr); } }

/* ---------- About ---------- */
.about { position: relative; padding: var(--section-y) 0; color: var(--white); overflow: hidden; background: var(--navy-950); }
.about__media { position: absolute; inset: 0; }
.about__media img, .about__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.about__media video { opacity: 0; transition: opacity 1.2s; }
.about__media video.is-playing { opacity: 1; }
.about__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,18,31,.95) 0%, rgba(0,18,31,.82) 45%, rgba(0,29,49,.35) 100%), linear-gradient(0deg, rgba(0,18,31,.9), transparent 40%); }
.about__inner { position: relative; display: grid; gap: 56px; }
.about__copy .lede { margin-top: 24px; }
.proof { display: grid; gap: 18px; margin-top: 40px; }
.proof li { display: flex; gap: 14px; align-items: flex-start; max-width: 56ch; color: rgba(226,238,250,.75); font-size: var(--text-lg); }
.proof svg { width: 24px; height: 24px; padding: 5px; margin-top: 1px; border-radius: 50%; color: var(--navy-950); background: var(--cyan); }
.proof strong { color: var(--white); }
.group { align-self: end; padding: 32px; border-radius: var(--radius); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.group__parent { width: 220px; height: auto; filter: brightness(0) invert(1); opacity: .95; }
.group__label { margin: 26px 0 14px; font-size: var(--text-xs); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(226,238,250,.5); }
.group__logos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.group__logos li { display: grid; place-items: center; height: 76px; padding: 12px; border-radius: var(--radius-md); background: rgba(255,255,255,.92); }
.group__logos img { max-height: 48px; width: auto; }
@media (min-width: 960px) { .about__inner { grid-template-columns: 1.25fr .75fr; gap: 72px; } }

/* ---------- Pricing ---------- */
.pricing { padding: var(--section-y) 0; background: var(--white); }
.plans { display: grid; gap: 16px; }
.plan { position: relative; z-index: 1; display: flex; flex-direction: column; padding: 34px 30px; border-radius: var(--radius-lg); border: 1px solid var(--line); background: var(--white); transition: transform .35s var(--ease), box-shadow .35s var(--ease), opacity .35s var(--ease); }
.plan h3 { font-size: var(--text-2xl); font-weight: 800; color: var(--ink); letter-spacing: -.02em; }
.plan__for { margin-top: 6px; font-size: var(--text-base); }
.plan__price { margin: 28px 0 24px; font-size: var(--text-3xl); font-weight: 800; letter-spacing: -.03em; line-height: 1.1; color: var(--ink); }
.plan__price span { display: block; margin-top: 6px; font-size: var(--text-md); font-weight: 600; letter-spacing: 0; color: var(--muted); }
.plan ul { display: grid; gap: 12px; margin-bottom: 32px; flex: 1; }
.plan li { position: relative; padding-left: 28px; font-size: var(--text-base); color: var(--ink-2); }
.plan li::before { content: ""; position: absolute; left: 0; top: 4px; width: 16px; height: 16px; border-radius: 50%; background: var(--ice) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4L18 8' fill='none' stroke='%230073e6' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/11px no-repeat; }
.plan .btn { width: 100%; }
.plan--featured { color: rgba(226,238,250,.75); background: radial-gradient(90% 60% at 100% 0%, rgba(83,208,224,.3), transparent 70%), linear-gradient(160deg, var(--navy-800), var(--navy-950)); border-color: transparent; box-shadow: 0 40px 80px -30px rgba(0,40,80,.6); }
/* Once the plans have risen, a cyan light runs once round Pro's border (main.js adds .is-traced). */
@property --trace-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.plan--featured::before { content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit; padding: 1.5px; pointer-events: none; opacity: 0;
  background: conic-gradient(from var(--trace-angle), transparent 0deg, transparent 250deg, var(--cyan) 330deg, 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, linear-gradient(#000 0 0); mask-composite: exclude; }
.plans.is-traced .plan--featured::before { animation: trace 1.4s var(--ease-io) both; }
@keyframes trace { 0% { --trace-angle: 0deg; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { --trace-angle: 360deg; opacity: 0; } }
.plan--featured h3, .plan--featured .plan__price, .plan--featured li { color: var(--white); }
.plan--featured .plan__price span { color: rgba(226,238,250,.6); }
.plan--featured li::before { background-color: rgba(83,208,224,.2); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4L18 8' fill='none' stroke='%2353d0e0' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.plan__badge { position: absolute; top: 24px; right: 24px; padding: 6px 12px; border-radius: var(--radius-pill); font-size: var(--text-xs); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--navy-950); background: var(--cyan); }
@media (min-width: 960px) { .plans { grid-template-columns: repeat(3, 1fr); align-items: stretch; } .plan--featured { transform: scale(1.03); } }
/* Hover movement (mouse and trackpad only: on a touch screen a tap would leave it stuck mid-move). */
@media (hover: hover) and (pointer: fine) {
  .btn:hover .btn__icon { transform: translateX(4px); }
  .text-link:hover svg { transform: translateX(4px); }
  .hold__button:not(.is-holding):hover { transform: translateY(-2px); }
  .marquee__toggle:hover { transform: scale(1.06); border-color: var(--cyan-600); }
  .hero__badge:hover svg { transform: translateX(3px); }
  .demo__close:hover { background: var(--ice); transform: rotate(90deg); }
  .agent-example:hover { transform: translateY(-2px); border-color: var(--cyan); box-shadow: 0 8px 20px -12px rgba(0, 60, 100, .35); }
  .agent-suggestions button:hover { border-color: var(--cyan); transform: translateY(-1px); }
  .footer__social a:hover { transform: translateY(-3px); }
}
/* Hovering a plan lifts it out over its neighbours, which step back a little. Mouse and trackpad only:
   on touch screens a tap would leave a card stuck in the hover state. */
@media (hover: hover) and (min-width: 960px) {
  .plans:hover .plan { transform: scale(.96); opacity: .72; }
  .plans:hover .plan:hover { z-index: 2; transform: translateY(-12px) scale(1.09); opacity: 1; box-shadow: 0 50px 90px -30px rgba(0, 40, 80, .45); }
}

/* ---------- FAQ ---------- */
.faq { position: relative; padding: var(--section-y) 0 calc(var(--section-y) + 22vh); background: var(--mist); }
/* Light to dark: instead of a hard edge, the light sections above About and the closing call to action
   dim into navy over their last 22vh, so scrolling into the dark section feels like the lights going down. */
.faq::after, .value::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 22vh; pointer-events: none; background: linear-gradient(180deg, rgba(0, 18, 31, 0), rgba(0, 18, 31, .55) 55%, var(--navy-950)); }
.faq__inner { display: grid; gap: 48px; }
.faq__intro .lede { margin-top: 24px; }
.acc { border-bottom: 1px solid rgba(0,75,120,.14); }
.acc:first-child { border-top: 1px solid rgba(0,75,120,.14); }
.acc__btn { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 26px 0; text-align: left; font-size: var(--text-lede); font-weight: 700; letter-spacing: -.015em; color: var(--ink); transition: color .3s; }
.acc__btn:hover { color: var(--azure); }
.acc__btn svg { width: 36px; height: 36px; padding: 9px; border-radius: 50%; color: var(--azure); background: var(--white); border: 1px solid var(--line); transition: transform .5s var(--ease), background .4s, color .4s; }
.acc__btn[aria-expanded="true"] svg { transform: rotate(135deg); color: var(--white); background: var(--azure); border-color: var(--azure); }
.acc__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s var(--ease); }
.acc__panel > div { overflow: hidden; }
.acc__panel p { padding: 0 60px 28px 0; font-size: var(--text-lg); max-width: 64ch; }
.acc.is-open .acc__panel { grid-template-rows: 1fr; }
@media (min-width: 960px) { .faq__inner { grid-template-columns: .8fr 1.2fr; gap: 96px; } .faq__intro { position: sticky; top: calc(var(--nav-h) + 40px); align-self: start; } }

/* ---------- Final CTA ---------- */
.cta { position: relative; padding: clamp(140px, 18vw, 240px) 0; text-align: center; color: var(--white); overflow: hidden; background: var(--navy-950); isolation: isolate; }
.cta__bg { position: absolute; inset: 0; z-index: -1; }
.cta__bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); }
.cta__bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 70% at 50% 50%, rgba(0,18,31,.55), rgba(0,18,31,.92) 80%), linear-gradient(180deg, var(--navy-950), transparent 30%, transparent 70%, var(--navy-950)); }
/* The orb's return: a second particle canvas behind the closing line. While it runs, the poster photo
   steps back so the orb sits on plain navy. */
/* The closing orb's particles rain in from above the section (gl.js rainDown): the canvas's top edge fades,
   so they drift in out of the dark instead of appearing at a hard line. */
.cta__gl { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; pointer-events: none; opacity: 0; transition: opacity .6s var(--ease); -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22%); mask-image: linear-gradient(to bottom, transparent 0, #000 22%); }
.cta.has-orb .cta__gl { opacity: 1; }
.cta.has-orb .cta__bg img { opacity: 0; }
.cta__inner { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; }
.cta .display { max-width: 13ch; }
.cta__lede { margin-top: 28px; max-width: 56ch; font-size: var(--text-lede); color: rgba(226,238,250,.78); }
.cta .btn--xl { margin-top: 48px; }
.cta__sub { margin-top: 26px; font-family: var(--font-script); font-size: var(--text-script); color: var(--cyan); }
.cta__alt { margin-top: 10px; font-size: var(--text-base); color: rgba(226,238,250,.55); }
.cta__alt a { color: var(--white); font-weight: 600; border-bottom: 1px solid rgba(255,255,255,.3); }

/* ---------- Footer ---------- */
.footer { padding: clamp(80px, 9vw, 120px) 0 calc(32px + env(safe-area-inset-bottom, 0px)); color: rgba(226,238,250,.62); background: var(--navy-950); border-top: 1px solid rgba(255,255,255,.06); overflow: hidden; }
.footer__top { display: grid; gap: 48px; }
.footer__brand img { width: 150px; height: auto; }
.footer__brand p { margin-top: 20px; max-width: 36ch; font-size: var(--text-base); }
.footer__social { display: flex; gap: 10px; margin-top: 24px; }
.footer__social a { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; color: var(--white); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); transition: background .3s, color .3s, transform .4s var(--ease); }
.footer__social a:hover { background: var(--cyan); color: var(--navy-950); }
.footer__social svg { width: 18px; height: 18px; }
.footer__col { display: flex; flex-direction: column; gap: 12px; }
.footer__col h3 { margin-bottom: 6px; font-size: var(--text-sm); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--white); }
.footer__col a { display: inline-flex; align-items: center; gap: 10px; font-size: var(--text-base); transition: color .3s; }
.footer__col a:hover { color: var(--cyan); }
.footer__col svg { width: 17px; height: 17px; color: var(--cyan); }
.footer__mark { margin: clamp(56px, 8vw, 96px) 0 clamp(20px, 3vw, 32px); font-size: clamp(5rem, 21vw, 18.75rem); font-weight: 800; letter-spacing: -.06em; line-height: .8; text-align: center; background: linear-gradient(180deg, rgba(83,208,224,.35), rgba(83,208,224,0) 85%); -webkit-background-clip: text; background-clip: text; color: transparent; user-select: none; }
.footer__bottom { display: flex; flex-wrap: wrap; gap: 16px 32px; justify-content: space-between; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.08); font-size: var(--text-md); }
.footer__bottom nav { display: flex; flex-wrap: wrap; gap: 24px; }
.footer__bottom a:hover { color: var(--white); }
/* Phones: the legal links get a full 44px tap height (they were 22px tall). */
@media (max-width: 719px) { .footer__bottom nav { gap: 4px 24px; } .footer__bottom nav a { display: inline-flex; align-items: center; min-height: 44px; } }
@media (min-width: 960px) { .footer__top { grid-template-columns: 1.6fr 1fr 1fr 1.4fr; gap: 56px; } }

/* ---------- Demo dialog ---------- */
.demo {
  width: min(1040px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); padding: 0; border: 0; border-radius: var(--radius-lg); overflow: hidden;
  background: var(--white); color: var(--text); box-shadow: 0 60px 140px -40px rgba(0,10,25,.7);
}
.demo[open] { display: grid; animation: dialog-in .35s var(--ease); }
.demo::backdrop { background: rgba(0,18,31,.6); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); animation: fade-in .4s var(--ease); }
@keyframes dialog-in { from { opacity: 0; transform: translateY(30px) scale(.97); } }
@keyframes fade-in { from { opacity: 0; } }
.demo__aside { display: none; }
.demo__main { position: relative; overflow-y: auto; max-height: calc(100dvh - 24px); overscroll-behavior: contain; }
.demo__close { position: absolute; top: 16px; right: 16px; z-index: 2; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; background: var(--mist); color: var(--ink); transition: background .3s, transform .4s var(--ease); }
.demo__close svg { width: 20px; height: 20px; }
.demo__form, .demo__success { padding: clamp(28px, 4vw, 48px); }
.demo__title { font-size: var(--text-h4); font-weight: 800; letter-spacing: -.035em; line-height: 1.05; color: var(--ink); }
.demo__intro { margin-top: 10px; }
.fields { display: grid; gap: 16px; margin-top: 28px; }
.field { display: grid; gap: 6px; }
.field label { font-size: var(--text-md); font-weight: 700; color: var(--ink-2); }
.field__opt { font-weight: 500; color: var(--muted); }
.field input, .field textarea {
  width: 100%; padding: 13px 15px; border-radius: var(--radius-sm); font: 500 15.5px var(--font); color: var(--ink);
  background: var(--mist); border: 1.5px solid var(--line); outline: none; transition: border-color .25s, background .25s, box-shadow .25s; resize: vertical;
}
.field input:focus, .field textarea:focus { background: var(--white); border-color: var(--azure); box-shadow: 0 0 0 4px rgba(0,115,230,.12); }
.field.is-invalid input, .field.is-invalid textarea { border-color: #dc2626; background: #fff7f7; }
.field__err { min-height: 0; font-size: var(--text-sm); font-weight: 600; color: #b91c1c; }
.field__err:empty { display: none; }
.field--hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.demo__status { margin-top: 20px; }
.demo__status:empty { display: none; }
.demo__status .alert { padding: 14px 16px; border-radius: var(--radius-sm); font-size: var(--text-base); line-height: 1.5; color: #7f1d1d; background: #fef2f2; border: 1px solid #fecaca; }
.demo__status .alert a { font-weight: 700; text-decoration: underline; }
.demo__submit { width: 100%; margin-top: 24px; }
.spinner { display: none; width: 20px; height: 20px; border-radius: 50%; border: 2.5px solid rgba(0,18,31,.25); border-top-color: var(--navy-950); animation: spin .8s linear infinite; }
.demo__submit.is-loading .spinner { display: block; }
.demo__submit.is-loading { pointer-events: none; opacity: .85; }
.demo__legal { margin-top: 14px; font-size: var(--text-sm); color: var(--muted); text-align: center; }
.demo__legal a { text-decoration: underline; }
.demo__success { min-height: 420px; display: grid; place-content: center; justify-items: center; text-align: center; gap: 14px; outline: none; }
.demo__success h2 { font-size: var(--text-h4); font-weight: 800; letter-spacing: -.03em; color: var(--ink); }
.demo__success p { max-width: 38ch; margin-bottom: 16px; }
.demo__success-icon { display: grid; place-items: center; width: 76px; height: 76px; border-radius: 50%; color: var(--white); background: linear-gradient(140deg, var(--azure), var(--cyan)); box-shadow: 0 0 0 12px rgba(83,208,224,.15); }
.demo__success-icon svg { width: 36px; height: 36px; }
@media (min-width: 640px) { .fields { grid-template-columns: 1fr 1fr; } .field--full { grid-column: 1 / -1; } }
@media (min-width: 900px) {
  .demo[open] { grid-template-columns: 340px 1fr; }
  .demo__aside { display: flex; flex-direction: column; gap: 22px; padding: 44px 36px; color: rgba(226,238,250,.75); background: radial-gradient(90% 60% at 0% 0%, rgba(83,208,224,.35), transparent 70%), linear-gradient(170deg, var(--navy-800), var(--navy-950)); }
  .demo__aside img { width: 130px; height: auto; }
  .demo__aside-title { margin-top: 24px; font-size: var(--text-3xl); font-weight: 800; letter-spacing: -.03em; line-height: 1.15; color: var(--white); }
  .demo__aside ul { display: grid; gap: 14px; }
  .demo__aside li { display: flex; gap: 12px; font-size: var(--text-base); }
  .demo__aside li svg { width: 20px; height: 20px; padding: 4px; border-radius: 50%; color: var(--navy-950); background: var(--cyan); flex: none; margin-top: 2px; }
  .demo__aside-meta { margin-top: auto; font-size: var(--text-md); color: rgba(226,238,250,.5); }
}

/* ---------- Reveal states (only when motion is allowed and JS is running) ---------- */
html.motion [data-reveal] { opacity: 0; transform: translateY(24px); }

/* The hero entrance runs in CSS from the first paint, not after the scripts load,
   so the headline and its lines appear as early as possible (Largest Contentful Paint). */
@keyframes hero-line-in { from { transform: translateY(110%); } to { transform: none; } }
@keyframes hero-fade-in { from { opacity: 0; transform: translateY(32px); } to { opacity: 1; transform: none; } }
html.motion .hero__title .line__inner { animation: hero-line-in 1.5s var(--ease) .25s both; }
html.motion .hero__title .line:nth-child(2) .line__inner { animation-delay: .37s; }
html.motion .hero [data-hero-fade] { animation: hero-fade-in 1.2s var(--ease) both; animation-delay: calc(.6s + var(--hero-order, 0) * .1s); }
.hero__badge { --hero-order: 0; } .hero__script { --hero-order: 1; } .hero__lede { --hero-order: 2; } .hero__ctas { --hero-order: 3; } .hero__facts { --hero-order: 4; }
html.motion .chip { opacity: 0; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .marquee__track { flex-wrap: wrap; justify-content: center; width: auto; }
  .marquee__track li[aria-hidden="true"] { display: none; }
  .marquee__toggle { display: none; }   /* the list does not move, so there is nothing to pause */
  .gl { display: none; }
}