/* Nvestiv canonical implementation tokens — documented by Nvestiv_Design_Gospel.html */
@layer theme, base, components, utilities;
/* Card border beam: a registered angle so the conic gradient can turn (B039). */
@property --card-beam-angle { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@property --illus-margin { syntax: '<length>'; inherits: true; initial-value: 0px; } /* registered so src/site.js reads it in px */
@font-face { font-family: 'Founders Grotesk Text'; src: url('fonts/founders-grotesk/TestFoundersGroteskText-Regular-BF66175e96b041f.woff2') format('woff2'); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: 'Founders Grotesk Text'; src: url('fonts/founders-grotesk/TestFoundersGroteskText-Medium-BF66175e96eb196.woff2') format('woff2'); font-style: normal; font-weight: 500; font-display: swap; }
@font-face { font-family: 'Founders Grotesk Text'; src: url('fonts/founders-grotesk/TestFoundersGroteskText-Semibold-BF66175e96b4a62.woff2') format('woff2'); font-style: normal; font-weight: 600; font-display: swap; }
@font-face { font-family: 'Founders Grotesk Text'; src: url('fonts/founders-grotesk/TestFoundersGroteskText-Bold-BF66175e9680b73.woff2') format('woff2'); font-style: normal; font-weight: 700; font-display: swap; }

:root {
  /* Primitive palette */
  --navy-50: #F3F4F7; --navy-100: #E7E9EE; --navy-200: #CFD4DE; --navy-300: #A0A9BC; --navy-400: #707E9B; --navy-500: #40537A; --navy-600: #112858; --navy-700: #0D2047; --navy-800: #0A1835; --navy-900: #071023;
  --navy-grey-900: #101A26; --navy-grey-800: #151E29; --navy-grey-700: #19222C;
  --teal-50: #EAF2F6; --teal-100: #D6E5ED; --teal-200: #ADCBDB; --teal-300: #84B2C8; --teal-400: #5B98B6; --teal-500: #327EA4; --teal-600: #286583; --teal-700: #1E4C62; --teal-800: #143242; --teal-900: #0A1921;
  --peri-50: #FAFBFC; --peri-100: #F5F7F9; --peri-200: #E2EEF4; --peri-300: #E2E6EE; --peri-400: #D9DDE9; --peri-500: #CFD5E3; --peri-600: #A6AAB6; --peri-700: #7C8088; --peri-800: #53555B; --peri-900: #282B2D;
  --white: #FFFFFF; --black: #000000;

  /* Semantic colour roles */
  --surface-canvas: var(--navy-grey-900); --surface-raised: var(--navy-grey-800); --surface-card: var(--navy-grey-700); --surface-quiet: var(--navy-600);
  --surface-nav: rgb(16 26 38 / 92%); --surface-nav-open: var(--navy-grey-800); --nav-top-fill: var(--navy-grey-900); --elevation-shadow: rgb(0 0 0 / 25%);
  --content-heading: var(--peri-50); --content-body: var(--type-body-color);
  /* Type hierarchy cascade (owner, 2026-10-10): size, weight and colour each step down H1 → H2 → H3 → H4 → body → small.
     Colours are opacity steps of the heading white, so they stay one hue. Body/small keep ≥4.5:1 over the background. */
  --type-h1-size: var(--display-md); --type-h1-weight: var(--weight-bold); --type-h1-color: var(--white); /* only H1 is pure white (owner, 2026-10-14) */
  --type-h2-size: var(--display-sm); --type-h2-weight: var(--weight-bold); --type-h2-color: rgb(250 251 252 / 88%);
  --type-h3-size: clamp(1.25rem, 1.167rem + .37vw, 1.5rem); --type-h3-weight: var(--weight-regular); --type-h3-color: rgb(250 251 252 / 84%);
  --type-h4-size: clamp(1.125rem, 1.083rem + .185vw, 1.25rem); --type-h4-weight: var(--weight-semibold); --type-h4-color: rgb(250 251 252 / 80%);
  --type-body-size: var(--text-md); --type-body-weight: var(--weight-regular); --type-body-color: rgb(250 251 252 / 76%);
  /* Root scale (owner, 2026-10-10): above the 1440px design canvas the root font grows with the window, so every rem
     (type, spacing, padding, controls, nav) scales in proportion, until a 1620px window (112.5% = 18px), then holds (owner, 2026-10-11: 133.333% read too large).
     Percentages keep the user's text-size setting. */
  --root-size: clamp(100%, 100vw / 90, 112.5%);
  --type-small-size: var(--text-sm); --type-small-color: rgb(250 251 252 / 66%);
  /* Card type (owner, 2026-10-11): card content steps one level below site content, so cards read as a separate layer.
     Card titles take the H4 size in the display face; card text takes the small size and colour. */
  --type-card-title-size: var(--type-h4-size); --type-card-body-size: var(--type-small-size); --type-card-body-color: var(--type-small-color); --content-primary: var(--navy-50); --content-secondary: var(--navy-200); --content-tertiary: var(--navy-300); --content-inverse: #162138;
  --border-subtle: var(--navy-600); --border-strong: var(--navy-500); --interactive-default: var(--teal-500); --interactive-hover: var(--teal-400); --interactive-pressed: var(--teal-600); --focus-ring: var(--teal-400);
  --control-hover: var(--navy-600); --action-fill: var(--navy-50); --action-rest: rgb(243 244 247 / 72%); --action-hover: var(--white); --action-content: #162138; --signal-status: var(--teal-400); --decorative-wash: var(--navy-600);

  /* Type */
  --font-display: Georgia, 'Times New Roman', serif; --font-ui: 'Founders Grotesk Text', Inter, Arial, sans-serif;
  --icon-size: var(--space-4); --icon-stroke: 2;
  --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700;
  --display-2xl: clamp(3.25rem, 7vw, 4.5rem); --display-xl: clamp(2.75rem, 6vw, 3.75rem); --display-lg: clamp(2.25rem, 5vw, 3rem); --display-md: clamp(2.125rem, 1.667rem + 2.037vw, 3.5rem); --display-sm: clamp(1.75rem, 1.417rem + 1.481vw, 2.75rem); --display-xs: clamp(1.25rem, 1.125rem + .556vw, 1.625rem);
  /* Fluid type, 360–1440px, after Apple's text-style ratios (HIG typography); rem terms keep user text scaling. */
  --text-xl: clamp(1.125rem, 1.042rem + .37vw, 1.375rem); --text-lg: clamp(1.25rem, 1.125rem + .556vw, 1.625rem); --text-md: clamp(1rem, .958rem + .185vw, 1.125rem); --text-sm: clamp(.8125rem, .792rem + .093vw, .875rem); --text-xs: .75rem;
  --leading-display: 1.15; --leading-h1: 1.1; --leading-h3: 1.25; --leading-body: 1.5; --tracking-heading: -.01em; --tracking-h1: var(--tracking-heading); --tracking-h2: var(--tracking-heading); --tracking-h3: var(--tracking-heading); --tracking-h4: var(--tracking-heading); --tracking-display-lg: -.02em; --tracking-display-md: -.015em; --tracking-label: .05em;

  /* Spacing hierarchy: each grouping level gets about 1.5–2× the space of the level inside it (HIG layout: group with
     negative space). Fluid values scale 360–1440px. */
  /* Pill → H2 and paragraph → actions are double H2 → paragraph (owner, 2026-10-10). */
  --gap-heading-body: 1rem; --gap-eyebrow: calc(var(--gap-heading-body) * 2); --gap-body-actions: calc(var(--gap-heading-body) * 2); --gap-controls: .75rem;
  --gap-header-content: clamp(2.5rem, 2.167rem + 1.481vw, 3.5rem); --gap-grid: clamp(1rem, .667rem + 1.481vw, 2rem); --pad-card: clamp(1.25rem, 1rem + 1.111vw, 2rem);
  --pad-section: clamp(6rem, 5.333rem + 2.963vw, 8rem); --target-min: 2.75rem;

  /* Layout and component contracts */
  --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem; --space-32: 8rem;
  --radius-sm: .375rem; --radius-md: .375rem; --radius-lg: .375rem; --radius-xl: .375rem; --radius-pill: 9999px;
  /* Content is 80% of the window, the floating nav 85% (owner, 2026-10-10). Guardrail (owner): both stop growing at a
     1920px window — 85.333rem = 1536px and 90.667rem = 1632px with the root held at 112.5% (18px). */
  --container-width: min(80%, 85.333rem); --reading-max: 42rem; --newsletter-max: 24rem; --social-logo-size: var(--space-5); --social-logo-rest: .64; /* owner, 2026-10-30 (B097): footer signup field width */ --grid-gap: var(--space-6); --nav-height: 4rem; /* owner, 2026-10-11: tighter bar (was 5rem) */
  --nav-inset: calc((var(--nav-height) - var(--button-height)) / 2); /* same gap on all four sides of the buttons */
  --card-surface: var(--surface-card); --card-border: var(--border-subtle); --card-radius: var(--radius-lg); --card-padding: var(--space-6); --card-media-ratio: 16 / 10; --card-gap: var(--space-5);
  --feature-card-radius: var(--space-4); --feature-card-border: var(--nav-glass-edge); --feature-card-border-width: 1px; --feature-card-padding: var(--pad-card); --feature-card-gap: var(--gap-grid); --feature-card-media-ratio: 16 / 9;
  --free-split-gap: clamp(2.5rem, 1.5rem + 4.444vw, 5rem); --free-split-media-min: calc(var(--space-32) * 2.5);
  --bento-tile-min: calc(var(--space-32) * 1.75); --bento-scrim: color-mix(in srgb, var(--navy-grey-900) 88%, transparent); --bento-scrim-reach: var(--space-16); --bento-scrim-blur: var(--space-2); --bento-inner-radius: calc(var(--feature-card-radius) - var(--feature-card-border-width));
  --gallery-duration: var(--duration-slow); --gallery-ease: var(--ease-snap); --gallery-rest: 8.5s; /* B061: open transition + rest = one 9s illustration loop per panel (was 3s) */ --bento-gap: calc(var(--gap-grid) / 2);
  --tip-width: 22rem; --tip-visual: 6rem; --tip-gap: var(--space-4); --tip-edge: var(--space-5); --tip-rise: var(--space-2); --tip-scale: .95;
  --audience-interval: 5s; --audience-dim: .6; --audience-marker-size: var(--space-10); --audience-marker-scale: 1.1; --audience-rise: var(--space-16); --audience-tilt: 20deg; --audience-perspective: 60rem;
  --gallery-height: clamp(24rem, 20rem + 10vw, 32rem); --gallery-height-stacked: 36rem; --gallery-panel-min: 4rem; --gallery-grow: 7; --gallery-gap: var(--space-2); --gallery-text-width: 22rem; --gallery-icon-size: var(--target-min); --gallery-scrim: linear-gradient(transparent 45%, rgb(16 26 38 / 85%)); --gallery-scrim-side: linear-gradient(90deg, rgb(16 26 38 / 85%) 35%, transparent);
  /* Orbit (connected apps): ring n has radius step × (n + .75); the orb radius is 1.25 steps; centre on the section's bottom edge. */
  --orbit-step: min(11vw, 7rem, calc((50vw - var(--orbit-chip)) / 4.75)); /* B114: outer ring (4.75 steps) + chip stays half a chip inside the screen */ --orbit-chip: clamp(2rem, 1.6rem + 1.8vw, 3rem); --orbit-logo: calc(var(--orbit-chip) * .58); --orbit-duration: 24s; --orbit-ring-stroke: var(--nav-divider); --orbit-particle: var(--teal-300); --orbit-glow: rgb(30 76 98 / 55%);
  /* Animated illustrations: the loop and beam tokens live with the springs under Motion (owner rules 2026-10-12, B054). */
  --icon-button-size: var(--target-min); --link-glow: 0 0 .75em rgb(255 255 255 / 45%);
  --testimonial-interval: 6s; --testimonial-rise: var(--space-5); --testimonial-quote-size: clamp(1.5rem, 1.25rem + 1.111vw, 2.25rem); --testimonial-index-size: clamp(6rem, 3rem + 13.333vw, 14rem); --testimonial-index-color: rgb(250 251 252 / 4%); --testimonial-rail-gap: var(--space-12); --testimonial-track-length: var(--space-32); --testimonial-rule: var(--space-8);
  --section-pill-pad-y: .375rem; --section-pill-leading: 1.15; --section-pill-padding: var(--section-pill-pad-y) var(--space-3); --section-pill-border-width: 1px; --section-pill-fill: var(--nav-glass-fill); --section-pill-content: var(--peri-500); --section-pill-gradient: linear-gradient(90deg, var(--teal-300) 3%, var(--teal-500) 33%, transparent 60%, var(--teal-600) 100%);
  --feature-card-lift: var(--space-2); --feature-card-media-scale: 1.1; --feature-card-elevation: 0 var(--space-5) var(--space-8) var(--elevation-shadow); --feature-card-duration: var(--duration-slow); --feature-card-media-duration: var(--duration-slow); --feature-card-ease: var(--ease-spring);
  --card-beam-color: var(--teal-100); --card-beam-width: calc(var(--feature-card-border-width) * 2); --card-beam-length: 15%; --card-beam-duration: 5s; --card-beam-reveal: var(--duration-slow); --card-beam-ease: var(--ease-enter);
  --field-height: var(--button-height); /* owner, 2026-10-30 (B115): fields match the header buttons */ --field-label-rise: var(--space-3); --field-label-scale: .75; --field-fill: color-mix(in srgb, var(--black) 55%, transparent); --field-action-inset: var(--space-1); --icon-button-grow: 1.08;
  --button-radius: var(--radius-pill); --button-height: calc(var(--space-10) + var(--space-1)); --button-padding-inline: var(--space-8); --button-label-shift: var(--space-2); --button-wash-scale: 1.5; --button-border-width: 1px;
  --nav-menu-width: 38rem; --nav-menu-padding: var(--space-3); --nav-menu-detail-padding: var(--space-6);
  /* Floating nav is 85% of the viewport (owner, 2026-10-10), not the content width; 1rem minimum gutter. */
  --nav-float-inset: max(var(--space-4), 7.5%, (100% - 90.667rem) / 2); --nav-float-top: var(--space-4); --nav-float-radius: calc(var(--nav-height) / 2 + 1px); --nav-morph-distance: 15rem;
  --nav-glass-fill: rgb(16 26 38 / 50%); --card-glass-fill: rgb(16 26 38 / 55%); --card-glass-well: transparent; --nav-glass-highlight: rgb(243 244 247 / 14%); --nav-glass-edge: rgb(207 213 227 / 24%); --nav-glass-shadow: rgb(0 0 0 / 32%);
  --nav-glass-blur: var(--space-6); --nav-glass-saturation: 1.35; --nav-glass-sheen: linear-gradient(135deg, var(--nav-glass-highlight), transparent 45%, rgb(207 213 227 / 4%));
  --nav-glass-elevation: 0 var(--space-3) var(--space-8) var(--nav-glass-shadow), inset 0 1px 0 var(--nav-glass-highlight), inset 0 -1px 0 var(--nav-glass-highlight);
  --nav-morph-duration: var(--duration-slow); --nav-morph-ease: var(--ease-spring); --nav-fade-in-ease: var(--ease-enter); --nav-chevron-duration: var(--duration-standard); --nav-close-grace: 200ms;
  --nav-hover-fill: rgb(207 213 227 / 12%); --nav-divider: rgb(207 213 227 / 15%); --nav-wordmark-size: var(--display-xs); /* Logomark lockup after the brand full logo: mark bottom on the wordmark baseline, gap .27 × mark height.
     Height 1rem keeps the mark at the 24px minimum width (579:379). Georgia's baseline sits .35em below its line centre. */
  --nav-logomark-height: 1rem; --nav-logomark-gap: calc(var(--nav-logomark-height) * .27); --nav-wordmark-baseline: .35em; --nav-layer: 100; --nav-panel-radius: var(--space-5);

  /* Site background grain strength (owner's micro1 reference, 2026-10-10). 1 = as designed; lower to soften. */
  --site-grain-opacity: .5;

  /* Motion */
  /* Apple-guided motion (HIG motion: purposeful, brief, interruptible). Durations follow Core Animation's 0.25s default and
     SwiftUI's 0.5s default spring; curves are Core Animation ease-in-out / ease-in and a critically damped spring. */
  --duration-instant: 100ms; --duration-fast: 150ms; --duration-standard: 250ms; --duration-moderate: 350ms; --duration-slow: 500ms; --duration-exit: 200ms;
  --ease-in-out: cubic-bezier(.42, 0, .58, 1); --ease-enter: cubic-bezier(.32, .72, 0, 1); --ease-exit: cubic-bezier(.42, 0, 1, 1);
  /* Snap (owner, 2026-10-10): eases in and out, then settles with a small overshoot at the end. */
  --ease-snap: cubic-bezier(.6, 0, .2, 1.12);
  --ease-spring: linear(0, .131 10%, .358 20%, .562 30%, .715 40%, .821 50%, .89 60%, .934 70%, .961 80%, .977 90%, 1);
  /* SwiftUI .snappy / .bouncy springs (duration .5s, bounce .15 / .3: stiffness (2π/.5)², damping ratio 1 − bounce), sampled to
     linear(). Use with --duration-spring (they settle at ~700 / ~820ms). Illustration owner rules 2026-10-12 (B054). */
  --ease-spring-snappy: linear(0, .075 5%, .233 10%, .411 15%, .573 20%, .707 25%, .81 30%, .884 35%, .935 40%, .967 45%, .987 50%, .998 55%, 1.004 60%, 1.006 65%, 1.006 70%, 1.005 75%, 1.004 80%, 1.003 85%, 1.002 90%, 1.002 95%, 1);
  --ease-spring-bouncy: linear(0, .103 5%, .319 10%, .55 15%, .745 20%, .887 25%, .977 30%, 1.025 35%, 1.044 40%, 1.045 45%, 1.037 50%, 1.026 55%, 1.016 60%, 1.009 65%, 1.003 70%, 1 75%, .998 80%, .998 85%, .998 90%, .999 95%, 1);
  --duration-spring: 700ms; --duration-spring-bouncy: 820ms; --illus-loop: 9s; --illus-beam-period: 1.5s;
  /* Parallax (owner, 2026-10-11, after Osmo's parallax-scrolling): one formula on every page. A layer's lag = depth ×
     viewport height per viewport of scroll, max ± depth × viewport height, so equal depths always travel equal distances.
     Deeper layers lag more (Osmo: 70 / 40 / 10 %). No easing, no duration: position follows scroll directly. */
  --parallax-depth-1: .7; --parallax-depth-2: .4; --parallax-depth-3: .1; --parallax-depth-4: .04;
  --parallax-scrim: rgb(16 26 38 / 65%); --parallax-fade-height: 30%; --parallax-focus: 45% 50%;
  /* Light rays (owner, 2026-10-11, after jatin-yadav05 "elegant-dark-pattern"): diagonal beams from the top-left corner.
     Body text keeps ≥4.5:1 over the brightest sky because the copy sits on --parallax-copy-shade (see the gospel). */
  --rays-color: var(--teal-100); /* Ray falloff (B045): full core to ±35% of the half-width, then 85 / 55 / 25 / 7% at ±50 / 62 / 74 / 86%, clear at the edge. */
  --rays-haze-1: color-mix(in srgb, var(--rays-color) 7%, transparent); --rays-haze-2: color-mix(in srgb, var(--rays-color) 25%, transparent); --rays-haze-3: color-mix(in srgb, var(--rays-color) 55%, transparent); --rays-haze-4: color-mix(in srgb, var(--rays-color) 85%, transparent); --rays-strength: .45;
  /* The rays' source sits this far outside the scene's top-left corner, so their convergence is never on screen. */
  --rays-origin-x: 20%; --rays-origin-y: 30%; --rays-reach: 75%; --rays-cycle: 6s; --rays-swing: 5deg;
  /* Copy shade: canvas glow behind scene copy, so the rays can be bright everywhere else. */
  --parallax-copy-shade: rgb(16 26 38 / 40%);
  /* Scroll choreography (owner, 2026-10-12): an element enters while it crosses into the viewport, starting once
     --reveal-from of it is in view and settled by --reveal-to, so content holds still for as long as possible.
     Linear: position tracks the scroll 1:1. Staggers start later inside the same window. */
  --reveal-distance: clamp(1.5rem, 1rem + 2vw, 3rem); --reveal-tilt: 3deg; --reveal-grow: .92; --reveal-ease: linear;
  --reveal-from: 25%; --reveal-to: 75%; --reveal-stagger: 5%;
  /* Card media drifts ±4% inside its frame; the 1.1 scale keeps the frame covered. */
  --reveal-drift: 4%; --reveal-drift-scale: 1.1;
  /* Magic text (owner, 2026-10-12, after preetsuthar17 "magic-text", MIT): words brighten one by one from
     --magic-text-dim while the heading's top rises from 80% to 50% of the viewport (start 20vh, span 30vh). */
  /* Section hand-over lag = the hero copy's depth, so every section leaves the way the hero does; it runs only over
     the last --section-lag-span of the section's scroll (its foot rising through the top 30% of the viewport). */
  --section-lag: var(--parallax-depth-2); --section-lag-span: 30vh; /* owner, 2026-10-30 (B115): shorter exit fade (was 60vh) */
  /* Soft section edges (owner, 2026-10-12): content fades out inside the section's own padding instead of being cut at
     a hard line, the way scene photographs fade. 70% of the padding, so content at rest (depth shift up to 4vh) stays
     clear of the fade. */
  --section-edge-fade: calc(var(--pad-section) * .7);
  /* Status hues (owner-approved 2026-10-12, B063): success / attention. Status only (badges, ticks, signals), never an action. */
  --status-success: #3FB68B; --status-attention: #E5A13A;
  /* Illustration kit (gospel #illustration-contract): ink and hairline steps on the stage, the translucent UI-black card,
     and the stage sizes in stage px (src/site.js scales a stage to its slot with --k). Any page or slide reuses these. */
  --illus-ink: var(--peri-50); --illus-ink-2: rgb(250 251 252 / 72%); --illus-ink-3: rgb(250 251 252 / 50%); --illus-ink-4: rgb(250 251 252 / 36%);
  --illus-hair: rgb(255 255 255 / 10%); --illus-hair-2: rgb(255 255 255 / 6%); --illus-well: rgb(255 255 255 / 3.5%);
  /* Foreground UI is solid (owner, 2026-10-13): the card base is opaque UI black with a hint of teal, the tone the old 50% black read as over the stage. */
  --illus-card-fill: linear-gradient(180deg, rgb(255 255 255 / 5%), rgb(255 255 255 / 1%)), color-mix(in srgb, var(--teal-900) 25%, var(--black));
  --illus-margin: var(--space-6); /* visual content to its frame edge: the margin the feature-card visuals show (owner, 2026-10-13) */
  /* Icon tile (owner, 2026-10-13, B070): the illustrations' app-icon tile, shared with page components (accordion). */
  --icon-tile-size: var(--space-10); --icon-tile-radius: var(--space-3); --icon-tile-glyph: calc(var(--icon-size) * 1.25);
  --icon-tile-fill: linear-gradient(180deg, rgb(255 255 255 / 8%), rgb(255 255 255 / 2%)), rgb(0 0 0 / 50%);
  --icon-tile-shadow: inset 0 1px 0 rgb(255 255 255 / 8%), 0 1px 3px rgb(0 0 0 / 30%), 0 10px 24px -8px rgb(0 0 0 / 50%);
  --illus-stage-w: 960px; --illus-stage-h: 540px; --illus-stage-square: 540px;
  --illus-accent: rgb(91 152 182 / 45%); --illus-accent-fill: rgb(91 152 182 / 14%); --illus-shade: rgb(3 7 15 / 55%); --illus-device: rgb(0 0 0 / 85%); --illus-hair-strong: rgb(255 255 255 / 28%); --illus-attention-halo: rgb(229 161 58 / 18%);
  --illus-avatar-fill: linear-gradient(160deg, #33476E, #1A2744); --illus-orb-fallback: radial-gradient(circle at 42% 38%, #1F6886, #134A64 42%, #162138 72%, #0D1526);
  /* Black-teal stage (owner, 2026-10-12, B063): a teal glow fading into black. Illustration stages and the footer. */
  --surface-stage: radial-gradient(60% 85% at 15% 8%, rgb(30 76 98 / 50%), transparent 65%), linear-gradient(160deg, var(--teal-900), var(--black) 70%);
  /* Muted glass stage (owner, 2026-10-13): visual backgrounds are never solid. The same black-teal, translucent, so the card
     glass and the scene behind it show through. --surface-stage stays solid for the footer and reduced transparency. */
  --illus-stage-fill: radial-gradient(60% 85% at 15% 8%, rgb(30 76 98 / 28%), transparent 65%), linear-gradient(160deg, color-mix(in srgb, var(--teal-900) 40%, transparent), color-mix(in srgb, var(--black) 30%, transparent) 70%);
  --footer-edge-fade: calc(var(--section-edge-fade) * .2); /* an "80% hard" top edge: a fifth of a section's soft fade */
  --magic-text-dim: .2; --magic-text-start: 20vh; --magic-text-span: 30vh;
  /* Hero with a stage (owner, 2026-10-13, B066): the H1 centre sits on the viewport centre at load. Distance from the
     copy top to the H1 centre = pill + eyebrow gap + half the one-line H1; never closer to the top than the nav. */
  --hero-h1-top: max(calc(var(--nav-height) + var(--space-8)), calc(50dvh - var(--type-h1-size) * var(--leading-h1) / 2)); /* heroes carry no pill (owner, 2026-10-14) */
  /* Pinned section (owner, 2026-10-13, B066): a --pin-track tall section holds its copy full-screen; the words light
     between --pin-reveal-from and --pin-reveal-to of the hold, then the copy holds lit and leaves with the hand-over lag. */
  --pin-track: 300vh; --pin-reveal-from: 10%; --pin-reveal-to: 70%; --pin-pull: 0px;
}
/* Phones hold a pinned section for one screen, not two (owner, 2026-10-30, B115), and pull its neighbours into the empty
   space its centred copy leaves above and below (--pin-pull, owner B116: tighter on phones only). */
@media (max-width: 47.99rem) { :root { --pin-track: 200vh; --pin-pull: 25dvh; } }


/* Shared Flow button: guide and site use the same contract without another request. */
@layer components {
  .content-card, .form--card { position: relative; isolation: isolate; display: flex; flex-direction: column; min-width: 0; border: var(--feature-card-border-width) solid var(--feature-card-border); border-radius: var(--feature-card-radius); background: var(--nav-glass-sheen), var(--card-glass-fill); box-shadow: inset 0 1px 0 var(--nav-glass-highlight); transition: transform var(--feature-card-duration) var(--feature-card-ease); }
  .content-card::before { content: ''; position: absolute; z-index: -1; inset: 0; border-radius: inherit; box-shadow: var(--feature-card-elevation); opacity: 0; pointer-events: none; transition: opacity var(--feature-card-duration) var(--feature-card-ease); }
  /* Border beam (appica-dev border-beam, rebuilt without React): a conic-gradient ring masked to the border (2px; 1px
     reads too faint on dark glass) and turned by --card-beam-angle. It fades in with the lift (fine-pointer hover, focus within) and turns only while shown;
     siblings start at staggered angles. No beam under Reduce Motion. */
  .content-card::after { content: ''; position: absolute; inset: calc(var(--feature-card-border-width) * -1); padding: var(--card-beam-width); border-radius: inherit; background: conic-gradient(from var(--card-beam-angle), transparent, var(--card-beam-color) var(--card-beam-length), transparent calc(var(--card-beam-length) * 1.2)); -webkit-mask: linear-gradient(var(--white) 0 0) content-box, linear-gradient(var(--white) 0 0); -webkit-mask-composite: xor; mask: linear-gradient(var(--white) 0 0) content-box, linear-gradient(var(--white) 0 0); mask-composite: exclude; opacity: 0; pointer-events: none; animation: card-beam var(--card-beam-duration) linear var(--card-beam-delay, 0s) infinite paused; transition: opacity var(--card-beam-reveal) var(--card-beam-ease); }
  .content-card:nth-child(3n + 2)::after { --card-beam-delay: calc(var(--card-beam-duration) * -.4); }
  .content-card:nth-child(3n + 3)::after { --card-beam-delay: calc(var(--card-beam-duration) * -.8); }
  @keyframes gallery-text-in { from { opacity: 0; transform: translateX(var(--space-6)); } }
  @keyframes gallery-title-in { from { opacity: 0; } }
  @keyframes card-beam { to { --card-beam-angle: 360deg; } }
  /* Free section (owner, 2026-10-10: only real cards are cards): copy and one visual sit on the page, no wrapper card.
     Stacks copy-first and centred below 48rem; two columns above, side alternates with --reverse. */
  .free-split { display: grid; gap: var(--gap-header-content); align-items: center; }
  .free-split__copy { text-align: center; }
  .free-split__copy > * + * { margin-top: var(--gap-heading-body); }
  .free-split__copy > .section-label + * { margin-top: var(--gap-eyebrow); }
  .free-split__copy .actions { justify-content: center; margin-top: var(--gap-body-actions); }
  .free-split__visual { min-height: var(--free-split-media-min); }
  /* Split card (owner, 2026-10-13, B069): one card, copy column + one visual. Stacks copy-first below 48rem; two equal
     columns above. Inherits the content-card surface, lift and border beam. */
  .content-card.split-card { display: grid; gap: var(--free-split-gap); align-items: center; padding: var(--feature-card-padding); }
  .split-card__copy > * + * { margin-top: var(--gap-header-content); }
  .split-card__copy > p + p { margin-top: var(--gap-heading-body); } /* body paragraphs read as one passage, as in free sections */
  .split-card__copy > .actions { margin-top: var(--gap-body-actions); } /* body to its actions, as in free sections (B092) */
  .split-card__copy > .actions + .actions { margin-top: var(--gap-controls); } /* a second row (contact chips) sits a control gap below */
  /* Accordion (B069): native <details name> items, so one is open at a time with no script; summary = Lucide icon,
     label, chevron. Panels open on ::details-content where supported (instant elsewhere and under Reduce Motion). */
  .accordion { border-top: 1px solid var(--nav-divider); interpolate-size: allow-keywords; }
  .accordion__item { border-bottom: 1px solid var(--nav-divider); }
  .accordion__item > summary { display: flex; align-items: center; gap: var(--space-3); width: 100%; min-height: var(--target-min); padding-block: var(--space-3); border-radius: var(--radius-sm); color: var(--content-primary); font-size: var(--text-md); font-weight: var(--weight-medium); list-style: none; }
  .accordion__item > summary::-webkit-details-marker { display: none; }
  .accordion__item > summary:hover { background: none; }
  .accordion__tile { display: grid; flex: none; place-items: center; width: var(--icon-tile-size); height: var(--icon-tile-size); border: 1px solid var(--illus-hair); border-radius: var(--icon-tile-radius); background: var(--icon-tile-fill); box-shadow: var(--icon-tile-shadow); color: var(--content-primary); }
  .accordion__tile > :is(.lucide-icon, img) { width: var(--icon-tile-glyph); height: var(--icon-tile-glyph); }
  .accordion__chevron { margin-inline-start: auto; color: var(--content-tertiary); transition: transform var(--duration-fast) var(--ease-exit); }
  .accordion__item[open] .accordion__chevron { transform: rotate(180deg); transition-duration: var(--duration-standard); transition-timing-function: var(--ease-enter); }
  .accordion__panel { padding: 0 0 var(--space-4) calc(var(--icon-tile-size) + var(--space-3)); }
  .accordion__panel > * + * { margin-top: var(--space-3); }
  /* Link chip (B071): a contact value as a tappable pill (tel:, wa.me, mailto:), at least --target-min tall. */
  .link-chip { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--target-min); padding-inline: var(--space-4); border: 1px solid var(--nav-glass-edge); border-radius: var(--radius-pill); background: var(--nav-glass-fill); color: var(--content-primary); font-size: var(--text-sm); font-weight: var(--weight-medium); font-variant-numeric: tabular-nums; text-decoration: none; transition: background var(--duration-fast) var(--ease-exit); }
  .link-chip:hover { background: var(--nav-hover-fill); }
  .link-chip .lucide-icon { color: var(--content-tertiary); }
  .link-chip > img { width: var(--icon-size); height: var(--icon-size); }
  .accordion__item::details-content { block-size: 0; overflow: clip; transition: block-size var(--duration-fast) var(--ease-exit), content-visibility var(--duration-fast) var(--ease-exit) allow-discrete; }
  .accordion__item[open]::details-content { block-size: auto; transition-duration: var(--duration-standard); transition-timing-function: var(--ease-enter); }
  @media (prefers-reduced-motion: reduce) { .accordion__item::details-content, .accordion__chevron { transition: none; } }
  @media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
    .content-card, .gallery__panel { background: var(--card-surface); -webkit-backdrop-filter: none; backdrop-filter: none; }
  }
  @media (min-width: 48rem) {
    .free-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--free-split-gap); }
    .free-split__copy { text-align: start; }
    .free-split__copy .actions { justify-content: flex-start; }
    .free-split--reverse > .free-split__visual { order: -1; }
    .content-card.split-card { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  }
  /* Floating-label field (owner, 2026-10-12, B063): a glass pill as tall as --field-height. The label sits inside the
     field and rises (--field-label-rise, --field-label-scale) on focus or once there is a value; placeholder=" " drives
     :placeholder-shown. The label stays the accessible name. Hover = the grey edge; focus = the site focus ring. */
  .field { position: relative; flex: 1 1 14rem; min-width: 0; }
  .field__input { width: 100%; height: var(--field-height); padding: var(--space-4) var(--space-5) var(--space-1); border: 1px solid var(--nav-glass-edge); border-radius: var(--button-radius); background: var(--field-fill); color: var(--content-primary); font: inherit; transition: border-color var(--duration-fast) var(--ease-in-out); }
  .field__input:hover { border-color: var(--content-tertiary); }
  .field__label { position: absolute; top: 50%; left: var(--space-5); color: var(--content-tertiary); pointer-events: none; transform-origin: left center; translate: 0 -50%; transition: translate var(--duration-fast) var(--ease-enter), scale var(--duration-fast) var(--ease-enter), color var(--duration-fast) var(--ease-enter); }
  .field__input:is(:focus, :not(:placeholder-shown)) + .field__label { color: var(--content-secondary); translate: 0 calc(-50% - var(--field-label-rise)); scale: var(--field-label-scale); }
  /* Field with its action inside (owner, 2026-10-12, B063 reference): a round primary submit sits in the pill's right end,
     inset evenly (--field-action-inset); the text stops short of it. */
  .field--action .field__input { padding-inline-end: calc(var(--field-height) + var(--field-action-inset)); }
  /* reCAPTCHA v3 badge hidden; the forms carry Google's notice in their text instead, as Google allows (B115). */
  .grecaptcha-badge { visibility: hidden; }
  .field .field__action { position: absolute; top: var(--field-action-inset); right: var(--field-action-inset); width: calc(var(--field-height) - var(--field-action-inset) * 2); height: calc(var(--field-height) - var(--field-action-inset) * 2); }
  .field__action::after { content: ''; position: absolute; inset: calc(var(--field-action-inset) * -1); } /* hit area = the full field height (B115) */
  /* Primary icon button (owner exception to round-secondary, B063): the primary Flow fill in a circle; white and slightly larger (--icon-button-grow) on hover/focus; the arrow stays centred. */
  .icon-button.icon-button--primary { border-color: transparent; background: var(--action-rest); color: var(--action-content); transition: background-color var(--duration-fast) var(--ease-in-out), scale var(--duration-fast) var(--ease-enter); }
  .icon-button.icon-button--primary:is(:hover, :focus-visible, :active) { background: var(--action-hover); scale: var(--icon-button-grow); }
  @media (prefers-reduced-motion: reduce) { .field__label, .icon-button.icon-button--primary { transition: none; } }
  /* Newsletter (owner, 2026-10-12, B063; N08): one action field (email + round Subscribe) and a small note below.
     No endpoint yet: src/site.js keeps the address on the page and reveals the status line already in the HTML. */
  .newsletter { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); width: 100%; max-width: var(--newsletter-max); }
  .newsletter__note { flex-basis: 100%; color: var(--type-small-color); font-size: var(--type-small-size); }
  /* Links (owner, 2026-10-10): a text variant of the buttons for page links. No underline; on hover and keyboard
     focus the text glows to pure white. */
  .link { color: var(--type-body-color); text-decoration: none; transition: color var(--duration-fast) var(--ease-in-out), text-shadow var(--duration-fast) var(--ease-in-out); }
  .link:is(:hover, :focus-visible) { background: transparent; color: var(--white); text-shadow: var(--link-glow); }
  /* A link inside running text is underlined so it reads as a link without colour (owner, 2026-10-30, B112); links that
     stand alone in nav lists, the footer and the "On this page" list stay plain. */
  :is(p, td, dd, address) .link { text-decoration: underline; text-underline-offset: var(--space-1); }
  @media (prefers-reduced-motion: reduce) { .link { transition: none; } }
  /* Icon-only control: a square secondary Flow button (same border, fill and invert), 44px target. */
  .icon-button { display: inline-grid; place-items: center; width: var(--icon-button-size); height: var(--icon-button-size); padding: 0; border: var(--button-border-width) solid var(--action-rest); border-radius: var(--radius-pill); background: transparent; color: var(--action-fill); cursor: pointer; transition: background-color var(--duration-fast) var(--ease-in-out), color var(--duration-fast) var(--ease-in-out); }
  .icon-button:is(:hover, :focus-visible, :active) { background: var(--action-rest); color: var(--action-content); }
  /* Pause/Play toggle: both Lucide icons in the HTML; aria-pressed="true" means paused, so Play shows. */
  .icon-button[aria-pressed="true"] .icon-button__pause, .icon-button[aria-pressed="false"] .icon-button__play { display: none; }
  /* Services bento (Tommy Jepsen feature-section-with-bento-grid, rebuilt): real cards, so they keep the glass card.
     1 column, 2 at 48rem, 3 at 80rem where rows alternate wide + square / square + wide. */
  .bento { display: grid; gap: var(--bento-gap); }
  /* Two states (owner, 2026-10-11): at rest the visual fills the tile and only label + H3 sit at the bottom on a dark
     diffused scrim; hover/focus within adds the card lift + border beam, and the description opens under the H3
     (grid rows 0fr -> 1fr), pushing the header up while the text eases up. Touch shows the open state statically. */
  .bento__tile { justify-content: flex-end; min-height: var(--bento-tile-min); }
  .bento__visual { position: absolute; inset: 0; z-index: 0; margin: 0; border-radius: var(--bento-inner-radius); overflow: clip; }
  .bento__tile > .bento__copy { position: relative; isolation: isolate; flex: none; padding-top: calc(var(--feature-card-padding) + var(--bento-scrim-reach)); }
  .bento__copy::before { content: ''; position: absolute; inset: 0; z-index: -1; border-end-start-radius: var(--bento-inner-radius); border-end-end-radius: var(--bento-inner-radius); background: linear-gradient(to top, var(--bento-scrim) 55%, transparent); pointer-events: none; }
  .bento__copy > .bento__reveal { display: grid; grid-template-rows: 0fr; margin-top: 0; transition: grid-template-rows var(--feature-card-duration) var(--feature-card-ease), margin-top var(--feature-card-duration) var(--feature-card-ease); }
  .bento__reveal > p { min-height: 0; overflow: hidden; opacity: 0; transform: translateY(var(--space-3)); transition: opacity var(--feature-card-duration) var(--feature-card-ease), transform var(--feature-card-duration) var(--feature-card-ease); }
  .bento__tile:focus-within .bento__copy > .bento__reveal { grid-template-rows: 1fr; margin-top: var(--space-3); }
  .bento__tile:focus-within .bento__reveal > p { opacity: 1; transform: none; }
  @media (hover: hover) and (pointer: fine) {
    .bento__tile:hover .bento__copy > .bento__reveal { grid-template-rows: 1fr; margin-top: var(--space-3); }
    .bento__tile:hover .bento__reveal > p { opacity: 1; transform: none; }
  }
  @media (hover: none), (pointer: coarse) {
    .bento__copy > .bento__reveal { grid-template-rows: 1fr; margin-top: var(--space-3); }
    .bento__reveal > p { opacity: 1; transform: none; }
  }
  @media (prefers-reduced-motion: reduce) { .bento__reveal, .bento__reveal > p { transition: none; } }
  /* Tablet tiles are square so the whole visual clears the copy (owner, B063); desktop wide tiles take the row height. */
  @media (min-width: 48rem) { .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bento__tile { aspect-ratio: 1; } }
  /* Tablet: an odd last tile spans both columns instead of sitting beside an empty half row (B115). */
  @media (min-width: 48rem) and (max-width: 79.99rem) { .bento__tile:last-child:nth-child(odd) { grid-column: 1 / -1; aspect-ratio: 2; } }
  @media (min-width: 80rem) {
    .bento { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .bento__tile--wide { grid-column: span 2; aspect-ratio: auto; }
  }

  /* Terminal gallery (minhxthanh interactive-selector, rebuilt): one panel open at a time; it grows while the others
     shrink. Row at 48rem and up, column below. All text is in the HTML; JS only moves aria-pressed. */
  .gallery { display: flex; flex-direction: column; gap: var(--gallery-gap); height: var(--gallery-height-stacked); }
  .gallery__panel { position: relative; flex: 1 1 0; min-height: var(--gallery-panel-min); overflow: hidden; border: var(--feature-card-border-width) solid var(--feature-card-border); border-radius: var(--feature-card-radius); background: var(--nav-glass-sheen), var(--card-glass-fill); box-shadow: inset 0 1px 0 var(--nav-glass-highlight); transition: flex-grow var(--gallery-duration) var(--gallery-ease), border-color var(--gallery-duration) var(--gallery-ease); }
  .gallery__panel:has([aria-pressed="true"]) { flex-grow: var(--gallery-grow); border-color: var(--content-tertiary); }
  .gallery__visual { position: absolute; inset: 0; display: grid; place-items: start center; padding: var(--space-5); color: var(--content-secondary); font-size: var(--text-sm); text-align: center; opacity: 0; transition: opacity var(--duration-moderate) var(--ease-enter); }
  .gallery__panel:has([aria-pressed="true"]) .gallery__visual { opacity: 1; }
  /* Closed panels (owner, 2026-10-22, B086): no visual, only the icon and title; a cropped visual read as parts spilling out. */
  .gallery__trigger { position: absolute; inset: 0; display: flex; align-items: center; gap: var(--space-3); width: 100%; padding: var(--space-3) var(--space-4); border: 0; border-radius: inherit; background: var(--gallery-scrim-side); color: var(--type-h3-color); font: inherit; text-align: start; cursor: pointer; }
  .gallery__trigger[aria-pressed="true"] { align-items: flex-end; background: var(--gallery-scrim); cursor: default; }
  .gallery__trigger:focus-visible { outline-offset: calc(var(--space-1) * -1); }
  .gallery__icon { display: grid; flex: none; place-items: center; width: var(--gallery-icon-size); height: var(--gallery-icon-size); border: var(--feature-card-border-width) solid var(--nav-glass-edge); border-radius: var(--radius-pill); background: var(--nav-glass-fill); }
  .gallery__text { display: grid; gap: var(--space-3); min-width: 0; }
  /* Panel text = card text (owner, 2026-10-11): card title + card body, as .content-card__copy. */
  .gallery__title { color: var(--type-h3-color); font-family: var(--font-display); font-size: var(--type-card-title-size); font-weight: var(--type-h3-weight); line-height: var(--leading-h3); letter-spacing: var(--tracking-h3); text-wrap: pretty; }
  .gallery__desc { display: none; color: var(--type-card-body-color); font-size: var(--type-card-body-size); }
  .gallery__trigger[aria-pressed="true"] .gallery__desc { display: block; }
  @media (hover: hover) and (pointer: fine) { .gallery__trigger[aria-pressed="false"]:hover { background: var(--nav-hover-fill); } }
  @media (min-width: 48rem) {
    .gallery { flex-direction: row; height: var(--gallery-height); }
    .gallery__panel { min-width: var(--gallery-panel-min); min-height: 0; }
    .gallery__trigger { align-items: flex-end; padding: var(--space-4); background: var(--gallery-scrim); }
    .gallery__text { flex: none; width: var(--gallery-text-width); max-width: calc(100% - var(--gallery-icon-size) - var(--space-3)); }
    .gallery__desc { display: block; }
    /* A closed panel is too narrow for a line of text: the title stands vertically above the icon, read bottom to top. */
    .gallery__trigger[aria-pressed="false"] { flex-direction: column-reverse; align-items: flex-start; justify-content: flex-start; }
    .gallery__trigger[aria-pressed="false"] .gallery__text { display: flex; justify-content: center; width: var(--gallery-icon-size); max-width: none; animation: gallery-title-in var(--duration-moderate) var(--ease-enter) both; }
    .gallery__trigger[aria-pressed="false"] .gallery__title { writing-mode: vertical-rl; rotate: 180deg; }
    .gallery__trigger[aria-pressed="false"] .gallery__desc { display: none; }
    .gallery__trigger[aria-pressed="true"] .gallery__text { animation: gallery-text-in var(--duration-moderate) var(--ease-enter) both; }
  }

  /* Testimonials (jatin-yadav05 design-testimonial, rebuilt): free on the page, no card. Without JS every slide shows
     as a list; with JS the slides stack in one grid cell (tallest sets the height, so nothing shifts). */
  /* Audience tabs (owner, 2026-10-11; ayushmxxn feature-section, MIT, rebuilt without React): a looping list of audiences
     beside one feature card per audience. Copy lives in the HTML; site.js only moves aria-pressed / data-active. Without
     JS ([data-ready] absent) every card is listed in order. The next card rises in from below with a slight tilt while
     the old one leaves upward (later siblings wait below, earlier ones above); translate/rotate compose with the lift. */
  .audience-tabs { display: grid; gap: var(--gap-grid); margin-top: var(--gap-header-content); }
  .audience-tabs__stage { display: grid; gap: var(--gap-grid); order: -1; }
  .audience-tabs__list { display: grid; gap: var(--space-1); margin: 0; padding: 0; list-style: none; }
  .audience-tabs__trigger { display: flex; align-items: flex-start; gap: var(--space-4); width: 100%; padding: var(--space-3); border: 0; border-radius: var(--radius-md); background: transparent; color: inherit; font: inherit; text-align: start; cursor: pointer; }
  .audience-tabs__trigger[aria-pressed="true"] { cursor: default; }
  @media (hover: hover) and (pointer: fine) { .audience-tabs__trigger[aria-pressed="false"]:hover { background: var(--nav-hover-fill); } }
  .audience-tabs__marker { display: grid; flex: none; place-items: center; width: var(--audience-marker-size); height: var(--audience-marker-size); border: var(--feature-card-border-width) solid var(--nav-glass-edge); border-radius: var(--radius-pill); color: var(--content-secondary); font-size: var(--text-sm); font-weight: var(--weight-semibold); transition: transform var(--duration-slow) var(--ease-in-out); }
  .audience-tabs__marker > * { grid-area: 1 / 1; }
  .audience-tabs__marker .lucide-icon, li:has(~ li [aria-pressed="true"]) .audience-tabs__number, [aria-pressed="true"] .audience-tabs__number { visibility: hidden; }
  li:has(~ li [aria-pressed="true"]) .audience-tabs__marker .lucide-icon, [aria-pressed="true"] .audience-tabs__marker .lucide-icon { visibility: visible; }
  [aria-pressed="true"] .audience-tabs__marker { border-color: transparent; background: var(--action-rest); color: var(--action-content); transform: scale(var(--audience-marker-scale)); }
  .audience-tabs__text { display: grid; align-self: center; min-width: 0; opacity: var(--audience-dim); transition: opacity var(--duration-slow) var(--ease-in-out); }
  .audience-tabs__name { color: var(--type-h3-color); font-family: var(--font-display); font-size: var(--type-card-title-size); font-weight: var(--type-h3-weight); line-height: var(--leading-h3); }
  .audience-tabs__line { display: grid; grid-template-rows: 0fr; margin-top: 0; transition: grid-template-rows var(--duration-slow) var(--ease-in-out), margin-top var(--duration-slow) var(--ease-in-out); }
  .audience-tabs__line > span { min-height: 0; overflow: hidden; color: var(--type-card-body-color); font-size: var(--type-card-body-size); }
  [aria-pressed="true"] > .audience-tabs__text { opacity: 1; }
  [aria-pressed="true"] .audience-tabs__line { grid-template-rows: 1fr; margin-top: var(--space-1); }
  .audience-tabs__uses { padding-inline-start: var(--space-5); color: var(--type-card-body-color); font-size: var(--type-card-body-size); list-style: disc; }
  .audience-tabs__uses li + li { margin-top: var(--space-1); }
  .audience-tabs__uses li::marker { color: var(--content-tertiary); }
  [data-ready].audience-tabs .audience-tabs__stage { perspective: var(--audience-perspective); }
  [data-ready].audience-tabs .audience-tabs__panel { grid-area: 1 / 1; opacity: 0; visibility: hidden; translate: 0 calc(var(--audience-rise) * -1); rotate: x var(--audience-tilt); transition: opacity var(--duration-slow) var(--ease-in-out), translate var(--duration-slow) var(--ease-in-out), rotate var(--duration-slow) var(--ease-in-out), visibility 0s var(--duration-slow), transform var(--feature-card-duration) var(--feature-card-ease); }
  [data-ready].audience-tabs .audience-tabs__panel[data-active] ~ .audience-tabs__panel { translate: 0 var(--audience-rise); rotate: x calc(var(--audience-tilt) * -1); }
  [data-ready].audience-tabs .audience-tabs__panel[data-active] { opacity: 1; visibility: visible; translate: none; rotate: none; transition: opacity var(--duration-slow) var(--ease-in-out), translate var(--duration-slow) var(--ease-in-out), rotate var(--duration-slow) var(--ease-in-out), visibility 0s, transform var(--feature-card-duration) var(--feature-card-ease); }
  @media (min-width: 48rem) {
    .audience-tabs { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; }
    .audience-tabs__stage { order: 0; }
  }
  @media (prefers-reduced-motion: reduce) {
    .audience-tabs__marker, .audience-tabs__text, .audience-tabs__line, [data-ready].audience-tabs .audience-tabs__panel { transition: none !important; }
  }
  /* Tooltip system (owner, 2026-10-12; behaviour after minhxthanh hover-preview, rebuilt): [data-tip] shows the
     popover="manual" .tip it names while the mouse is on it; site.js keeps it centred above the pointer (flipping below
     near the top, --tip-edge inside the viewport). Top layer, so transformed or clipped parents never cut it off. No
     `display` here: the UA hides closed popovers, and an author display would override that. */
  .tip { position: fixed; inset: 0 auto auto 0; width: var(--tip-width); max-width: calc(100vw - var(--tip-edge) * 2); margin: 0; padding: var(--space-3); overflow: visible; border: var(--feature-card-border-width) solid var(--feature-card-border); border-radius: var(--feature-card-radius); background: var(--nav-glass-sheen), var(--nav-glass-fill); box-shadow: inset 0 1px 0 var(--nav-glass-highlight), var(--feature-card-elevation); -webkit-backdrop-filter: blur(var(--nav-glass-blur)) saturate(var(--nav-glass-saturation)); backdrop-filter: blur(var(--nav-glass-blur)) saturate(var(--nav-glass-saturation)); color: var(--content-body); text-align: start; pointer-events: none; translate: var(--tip-x, 0) var(--tip-y, 0); opacity: 0; transform: translateY(var(--tip-rise)) scale(var(--tip-scale)); transition: opacity var(--duration-standard) var(--ease-enter), transform var(--duration-standard) var(--ease-snap), display var(--duration-standard) allow-discrete, overlay var(--duration-standard) allow-discrete; }
  .tip:popover-open { display: grid; grid-template-columns: minmax(0, 1fr) var(--tip-visual); align-items: center; gap: var(--space-4); opacity: 1; transform: none; }
  @starting-style { .tip:popover-open { opacity: 0; transform: translateY(var(--tip-rise)) scale(var(--tip-scale)); } }
  .tip__copy { min-width: 0; padding-inline-start: var(--space-1); }
  .tip__title { margin: 0; color: var(--type-h3-color); font-family: var(--font-display); font-size: var(--type-card-title-size); font-weight: var(--type-h3-weight); line-height: var(--leading-h3); }
  .tip__text { margin: var(--space-1) 0 0; color: var(--type-card-body-color); font-size: var(--type-card-body-size); }
  .tip__visual { display: block; width: 100%; height: auto; aspect-ratio: 1; padding: var(--space-4); border-radius: var(--radius-md); background: var(--nav-hover-fill); object-fit: contain; }
  @media (prefers-reduced-motion: reduce) { .tip { transform: none; transition: none; } }
  .testimonials { position: relative; display: flex; gap: var(--testimonial-rail-gap); overflow: hidden; }
  .testimonials__rail, .testimonials__controls { display: none; }
  .testimonials__main { flex: 1; min-width: 0; }
  .testimonials__slides { display: grid; gap: var(--space-12); }
  .testimonials__slide { position: relative; }
  .testimonials__index { position: absolute; inset-block-start: 50%; inset-inline-end: 0; color: var(--testimonial-index-color); font-family: var(--font-display); font-size: var(--testimonial-index-size); font-weight: var(--weight-bold); line-height: 1; transform: translateY(-50%); pointer-events: none; }
  .testimonials__chip { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--type-small-color); font-size: var(--type-small-size); text-transform: uppercase; letter-spacing: var(--tracking-label); }
  .testimonials__chip span { width: var(--space-2); height: var(--space-2); border-radius: var(--radius-pill); background: var(--signal-status); }
  .testimonials__quote { margin: var(--space-6) 0 var(--space-8); }
  .testimonials__quote p { color: var(--type-h3-color); font-family: var(--font-display); font-size: var(--testimonial-quote-size); line-height: var(--leading-display); letter-spacing: var(--tracking-h3); text-wrap: pretty; }
  .testimonials__author { display: grid; gap: var(--space-4); }
  .testimonials__rule { width: var(--testimonial-rule); height: 1px; background: var(--content-tertiary); transform-origin: left; }
  .testimonials__author cite { display: block; color: var(--type-h4-color); font-size: var(--type-h4-size); font-style: normal; font-weight: var(--type-h4-weight); }
  .testimonials__author cite + span { color: var(--type-small-color); font-size: var(--type-small-size); }
  [data-ready].testimonials .testimonials__controls { display: flex; justify-content: flex-end; gap: var(--gap-controls); margin-top: var(--space-8); }
  [data-ready].testimonials .testimonials__slides { gap: 0; }
  [data-ready].testimonials .testimonials__slide { grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateY(var(--testimonial-rise)); transition: opacity var(--duration-exit) var(--ease-exit), transform var(--duration-exit) var(--ease-exit), visibility 0s var(--duration-exit); }
  [data-ready].testimonials .testimonials__slide[data-active] { opacity: 1; visibility: visible; transform: none; transition: opacity var(--duration-slow) var(--ease-enter) var(--duration-exit), transform var(--duration-slow) var(--ease-enter) var(--duration-exit), visibility 0s; }
  .icon-button .lucide-icon { width: var(--icon-size); height: var(--icon-size); }
  @media (min-width: 48rem) {
    [data-ready].testimonials .testimonials__rail { display: flex; flex-direction: column; align-items: center; gap: var(--space-8); padding-inline-end: var(--testimonial-rail-gap); border-inline-end: 1px solid var(--nav-divider); }
    .testimonials__label { color: var(--type-small-color); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-label); writing-mode: vertical-rl; }
    .testimonials__track { position: relative; width: 1px; height: var(--testimonial-track-length); background: var(--nav-divider); }
    .testimonials__fill { position: absolute; inset: 0; background: var(--content-secondary); transform-origin: top; transform: scaleY(var(--testimonial-progress, 0)); transition: transform var(--duration-slow) var(--ease-enter); }
  }
  @media (prefers-reduced-motion: reduce) {
    .gallery__panel, .gallery__visual, .gallery__text, .testimonials__slide, .testimonials__fill { transition: none !important; }
    .gallery__text, [data-ready].testimonials .testimonials__slide { transform: none !important; }
    .gallery__text { animation: none !important; }
  }
  /* Orbit (shadcnspace orbiting-circles-02, rebuilt): app logos orbit semicircle rings around a half-visible particle
     orb whose centre is the section's bottom edge. Logos are an HTML list (names in alt); motion is CSS transforms only,
     paused off screen ([data-paused], set by site.js) and under Reduce Motion (still frame at each logo's phase). */
  .orbit-section { overflow-x: clip; }
  .orbit { --orbit-r4: calc(var(--orbit-step) * 4.75); position: relative; height: calc(var(--orbit-r4) + var(--orbit-chip)); margin-top: var(--gap-header-content); margin-bottom: calc(var(--pad-section) * -1); overflow-y: clip; }
  .orbit::before { content: ''; position: absolute; left: 50%; bottom: 0; width: calc(var(--orbit-step) * 6); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, var(--orbit-glow), transparent); transform: translate(-50%, 50%); pointer-events: none; }
  .orbit__rings, .orbit__apps { position: absolute; inset: 0; }
  .orbit__ring { position: absolute; left: 50%; bottom: 0; width: calc(var(--orbit-step) * (var(--ring) + .75) * 2); aspect-ratio: 1; border: 1px solid var(--orbit-ring-stroke); border-radius: 50%; transform: translate(-50%, 50%); }
  .orbit__orb { position: absolute; left: 50%; bottom: 0; width: calc(var(--orbit-step) * 2.5); height: calc(var(--orbit-step) * 1.25); transform: translateX(-50%); }
  .orbit__app { --r: calc(var(--orbit-step) * (var(--ring) + .75)); --dur: calc(var(--orbit-duration) * (1 + var(--ring) * .35)); position: absolute; left: 50%; bottom: 0; display: grid; place-items: center; width: var(--orbit-chip); height: var(--orbit-chip); margin: 0 0 calc(var(--orbit-chip) / -2) calc(var(--orbit-chip) / -2); border: 1px solid var(--nav-glass-edge); border-radius: 50%; background: var(--nav-glass-fill); box-shadow: inset 0 1px 0 var(--nav-glass-highlight); animation: orbit var(--dur) linear calc(var(--dur) * var(--phase) * -1) infinite; animation-direction: var(--dir, normal); }
  .orbit__app > img { width: var(--orbit-logo); height: var(--orbit-logo); border-radius: var(--radius-sm); object-fit: contain; }
  /* Names: real text in each chip for screen readers and crawlers (the logo is decorative); the hover tip (.tip, below)
     shows them. Hovering a chip pauses every orbit so the tip can be read and the rings stay in step. */
  .orbit__name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .orbit:has(.orbit__app:hover) .orbit__app { animation-play-state: paused; }
  @keyframes orbit { from { transform: rotate(-90deg) translateX(var(--r)) rotate(90deg); } to { transform: rotate(270deg) translateX(var(--r)) rotate(-270deg); } }
  .orbit[data-paused] .orbit__app { animation-play-state: paused; }
  @media (prefers-reduced-motion: reduce) { .orbit__app { animation-play-state: paused; } }
  /* Section title pill (owner, 2026-10-12): dark glass like the header and cards (fill, sheen, highlight, blur) with a
     teal gradient hairline. The ring is a masked ::before so the translucent fill never shows the gradient through it. */
  .section-pill { position: relative; isolation: isolate; display: inline-flex; align-items: center; padding: var(--section-pill-padding); border-radius: var(--radius-pill); background: var(--nav-glass-sheen), var(--section-pill-fill); box-shadow: inset 0 1px 0 var(--nav-glass-highlight); color: var(--section-pill-content); font-size: var(--text-sm); font-weight: var(--weight-medium); line-height: var(--section-pill-leading); text-transform: uppercase; }
  .section-pill::before { content: ''; position: absolute; z-index: -1; inset: 0; padding: var(--section-pill-border-width); border-radius: inherit; background: var(--section-pill-gradient); -webkit-mask: linear-gradient(var(--white) 0 0) content-box, linear-gradient(var(--white) 0 0); -webkit-mask-composite: xor; mask: linear-gradient(var(--white) 0 0) content-box, linear-gradient(var(--white) 0 0); mask-composite: exclude; pointer-events: none; }
  .content-card__copy { flex: 1; padding: var(--feature-card-padding); overflow-wrap: anywhere; }
  .content-card__copy > * { margin: 0; }
  .content-card__copy > * + * { margin-top: var(--space-3); }
  /* Row alignment (owner, 2026-10-11): cards side by side share their row heights — visual, title, text and optional
     link — through subgrid, so titles and text start at the same height whatever their line count. Spacing comes from
     margins (a subgrid gap would also open below an empty link row). */
  :is(.card-grid, .feature-card-grid) > .content-card { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; }
  :is(.card-grid, .feature-card-grid) > .content-card > .content-card__copy { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; align-content: start; }
  /* Card titles fill the line (pretty), not balanced to a narrow block (owner, 2026-10-10). */
  .content-card__copy h3 { text-wrap: pretty; color: var(--type-h3-color); font-family: var(--font-display); font-size: var(--type-card-title-size); font-weight: var(--type-h3-weight); line-height: var(--leading-h3); letter-spacing: var(--tracking-h3); }
  .content-card__copy p { color: var(--type-card-body-color); font-size: var(--type-card-body-size); }
  .content-card__copy a { display: inline-flex; align-items: center; min-height: var(--button-height); gap: var(--space-2); color: var(--content-primary); }
  .content-card__copy a .lucide-icon { transition: transform var(--duration-standard) var(--feature-card-ease); }
  .content-card__copy a:is(:hover, :focus-visible) .lucide-icon { transform: translateX(var(--space-1)); }
  .content-card__media { display: grid; aspect-ratio: var(--feature-card-media-ratio); overflow: hidden; border-start-start-radius: var(--feature-card-radius); border-start-end-radius: var(--feature-card-radius); background: var(--card-glass-well); }
  .content-card__visual { display: block; width: 100%; height: 100%; margin: 0; object-fit: cover; transition: transform var(--feature-card-media-duration) var(--feature-card-ease); }
  .content-card__media:has(figcaption) { aspect-ratio: auto; }
  /* Caption text can outgrow the media ratio when enlarged. */
  .content-card__media:has(figcaption)::after { content: ''; grid-area: 1 / 1; aspect-ratio: var(--feature-card-media-ratio); pointer-events: none; }
  .content-card__visual:has(figcaption) { grid-area: 1 / 1; height: auto; min-height: min-content; }
  .content-card:focus-within { transform: translateY(calc(var(--feature-card-lift) * -1)); }
  .content-card:focus-within::before { opacity: 1; }
  .content-card:focus-within::after { opacity: 1; animation-play-state: running; }
  .content-card:focus-within .content-card__visual { transform: scale(var(--feature-card-media-scale)); }
  @media (hover: hover) and (pointer: fine) {
    .content-card:hover { transform: translateY(calc(var(--feature-card-lift) * -1)); }
    .content-card:hover::before { opacity: 1; }
    .content-card:hover::after { opacity: 1; animation-play-state: running; }
    .content-card:hover .content-card__visual { transform: scale(var(--feature-card-media-scale)); }
  }
  @media (prefers-reduced-motion: reduce) {
    .content-card, .content-card__visual, .content-card__copy a .lucide-icon { transform: none !important; transition: none !important; }
    .content-card::before { transition: none !important; }
    .content-card::after { content: none; }
  }
  .lucide-icon { display: block; flex-shrink: 0; width: var(--icon-size); height: var(--icon-size); fill: none; stroke: currentColor; stroke-width: var(--icon-stroke); stroke-linecap: round; stroke-linejoin: round; }
  .button, .btn { position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; min-height: var(--button-height); padding: var(--space-2) var(--button-padding-inline); overflow: hidden; border: 0; border-radius: var(--button-radius); background: var(--action-rest); color: var(--action-content); font-family: var(--font-ui); font-size: var(--text-sm); font-weight: var(--weight-semibold); line-height: var(--leading-body); text-decoration: none; white-space: nowrap; cursor: pointer; }
  .button::before, .btn::before { content: ''; position: absolute; z-index: -1; top: 50%; left: 50%; width: 100%; aspect-ratio: 1; border-radius: 50%; background: var(--action-hover); opacity: 0; transform: translate(-50%, -50%) scale(0); transition: transform var(--duration-moderate) var(--ease-enter), opacity var(--duration-moderate) var(--ease-enter); }
  .button__label { transform: translateX(calc(var(--button-label-shift) * -1)); }
  .button__arrow { position: absolute; width: var(--space-4); text-align: center; }
  .button__arrow--in { left: var(--space-4); opacity: 0; transform: translateX(-200%); }
  .button__arrow--out { right: var(--space-4); }
  .button__label, .button__arrow { transition: transform var(--duration-moderate) var(--ease-enter), opacity var(--duration-moderate) var(--ease-enter); }
  :is(.button, .btn):is(:hover, :focus-visible):not(:disabled)::before { opacity: 1; transform: translate(-50%, -50%) scale(var(--button-wash-scale)); }
  :is(.button, .btn):is(:hover, :focus-visible):not(:disabled) .button__label { transform: translateX(var(--button-label-shift)); }
  :is(.button, .btn):is(:hover, :focus-visible):not(:disabled) .button__arrow--in { opacity: 1; transform: translateX(0); }
  :is(.button, .btn):is(:hover, :focus-visible):not(:disabled) .button__arrow--out { opacity: 0; transform: translateX(200%); }
  .button--secondary, .btn--secondary { border: var(--button-border-width) solid var(--action-rest); background: transparent; color: var(--action-fill); }
  .button--secondary::before, .btn--secondary::before { content: none; }
  :is(.button--secondary, .btn--secondary):is(:hover, :focus-visible, :active):not(:disabled) { background: var(--action-rest); color: var(--action-content); }
  /* Secondary (owner, 2026-10-11): no icon at rest, label centred; on hover/focus one icon slides in left of the label
     (Talk to IRIS: Lucide message-circle; otherwise arrow-right). Markup has no --out arrow. */
  :is(.button--secondary, .btn--secondary) .button__label { transform: none; }
  :is(.button, .btn):disabled { opacity: .5; cursor: not-allowed; }

  /* Parallax: a native scroll timeline moves every [data-depth] layer (below), in step with the scroll on the compositor.
     Browsers without scroll timelines fall back to src/site.js, which writes --parallax-y. `translate` composes with
     hover transforms. */
  [data-depth] { translate: 0 var(--parallax-y, 0); }
  /* Scene: a section that clips its layers so the next section slides over it. The fade stays fixed at the scene's foot
     and blends the photograph into the canvas; the scrim keeps body text ≥4.5:1 over the brightest sky. */
  .parallax-scene { position: relative; isolation: isolate; overflow: clip; }
  /* The backdrop box stays still and fades its own edges to transparent (mask), so the site's mesh and grain show
     through and a scene never starts or ends with an edge; only the photograph inside it moves (data-depth on the img).
     A page's lead scene starts at the top of the page, so it fades at the foot only. Scenes after it are at least one
     viewport tall: then a depth-1 photograph (lag ≤ .7 viewport) can never open a gap at either edge. */
  .parallax-scene:not(:first-child) { min-height: 100vh; }
  .parallax-scene:first-child { --parallax-fade-top: 0%; }
  .parallax-scene__backdrop { position: absolute; z-index: -1; inset: 0; overflow: clip; -webkit-mask-image: linear-gradient(transparent, var(--black) var(--parallax-fade-top, var(--parallax-fade-height)), var(--black) calc(100% - var(--parallax-fade-height)), transparent); mask-image: linear-gradient(transparent, var(--black) var(--parallax-fade-top, var(--parallax-fade-height)), var(--black) calc(100% - var(--parallax-fade-height)), transparent); }
  .parallax-scene__backdrop::after { content: ''; position: absolute; inset: 0; background: var(--parallax-scrim); }
  .parallax-scene__content { position: relative; }
  .parallax-scene__content::before { content: ''; position: absolute; z-index: -1; inset: -20% -25%; background: radial-gradient(closest-side, var(--parallax-copy-shade) 65%, transparent); pointer-events: none; }
  /* Phones take the 1280 photo through a <picture> source (B067); the picture box itself takes no part in layout. */
  .parallax-scene__backdrop picture { display: contents; }
  .parallax-scene__backdrop img { --parallax-bleed: 22vh; position: relative; top: calc(var(--parallax-bleed) * -1); display: block; width: 100%; height: calc(100% + var(--parallax-bleed) * 2); object-fit: cover; object-position: var(--parallax-focus); will-change: transform; }

  /* Scroll choreography: native scroll-driven animations, one rule set for every page. Each element enters on its own
     view timeline (default: rise; components below pick side, curve or grow). Nothing fades out (owner, 2026-10-12): an element only
     reverses its entry when scrolled back up. Individual transform properties compose with hover transforms and the depth `translate` on shells.
     Unsupported browsers and Reduce Motion show everything still and visible. */
  @supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
      /* Section hand-over (owner, 2026-10-12): every section's content lags as the section leaves and is clipped at its
         foot, so the next section seems to slide over it, as #problem does over the hero. No fill: the texture shows.
         The last section in <main> never lags (B114): the page ends before it leaves, so a lag would leave its final
         lines and CTA clipped under the footer. */
      .section-shell { overflow: clip; view-timeline: --section block; }
      /* Depth parallax, same formula as the JS fallback: offset = −p × depth × 100vh, p = (layer centre − viewport centre) ÷
         100vh clamped to ±1. p runs from 1 to −1 between cover 50% ∓ 100vh; `both` holds the clamp outside. Inset 0 so
         the header's scroll-padding does not shift the centre. Owner (2026-10-12): background motion must be smooth. */
      [data-depth] { animation: parallax-depth linear both; animation-timeline: view(block 0px); animation-range: cover calc(50% - 100vh) cover calc(50% + 100vh); }
      [data-depth="1"] { --depth: var(--parallax-depth-1); } [data-depth="2"] { --depth: var(--parallax-depth-2); }
      [data-depth="3"] { --depth: var(--parallax-depth-3); } [data-depth="4"] { --depth: var(--parallax-depth-4); }
      /* Scene backdrop photos span height: calc(100% + 2 * --parallax-bleed) and glide across the full section timeline
         so tall scenes (#what-iris-does, #hero) never clamp mid-section or open an empty edge gap. */
      .parallax-scene:not(:first-child) .parallax-scene__backdrop img { animation: parallax-backdrop linear both; animation-timeline: --section; animation-range: cover 0% cover 100%; }
      /* The lead scene is on screen at load, so its layers start at rest whatever their height (B066): same depth per
         pixel scrolled, capped at depth × 100vh, counted from the top of the page. */
      .parallax-scene:first-child [data-depth] { animation: parallax-lead linear both; animation-timeline: scroll(root); animation-range: 0 100vh; }
      .parallax-scene:first-child .parallax-scene__backdrop img { animation: parallax-backdrop-lead linear both; animation-timeline: --section; animation-range: exit 0% exit 100%; }
      /* Below 80rem the hero visual stacks under the copy, only --pad-section above the clipped foot, so the lead lag (depth 2)
         would push it through the foot while on screen. A shallower depth lets it leave through the top, as on desktop (B115). */
      @media (max-width: 79.99rem) { .parallax-scene:first-child .hero-layout:has(> .hero-layout__visual) { --depth: var(--parallax-depth-3); } }
      .section-shell:not(.parallax-scene:first-child, .hero--compact, .site-footer, .section-pin, main > :last-child) > .shell {
        animation: parallax-depth linear both, section-lag linear both;
        animation-timeline: view(block 0px), --section;
        animation-range: cover calc(50% - 100vh) cover calc(50% + 100vh), cover calc(100% - var(--section-lag-span)) cover 100%;
      }
      main > .section-shell:last-child:not(.parallax-scene:first-child, .hero--compact, .site-footer, .section-pin) > .shell {
        animation: parallax-depth linear both;
        animation-timeline: view(block 0px);
        animation-range: cover calc(50% - 100vh) cover calc(50% + 100vh);
      }
      :is(.section-copy > *, .card-grid > .content-card, .bento__tile, .split-card, .orbit, .gallery__panel, .audience-tabs__list, .audience-tabs__stage, .testimonials, .free-split__copy, .free-split__visual, .footer-grid > *, .footer-bottom) {
        animation: reveal-enter var(--reveal-ease) both;
        animation-timeline: view();
        animation-range: entry calc(var(--reveal-from) + var(--reveal-at, 0%)) entry var(--reveal-to);
      }
      /* The lead scene's copy is on screen at load: no entry, no exit. */
      .parallax-scene:first-child .section-copy > * { animation: none; }
      .section-copy > :nth-child(2), .card-grid > .content-card:nth-child(3n + 2), .bento__tile:nth-child(3n + 2), .gallery__panel:nth-child(2), .audience-tabs__stage, .free-split__visual { --reveal-at: var(--reveal-stagger); }
      .section-copy > :nth-child(3), .card-grid > .content-card:nth-child(3n), .bento__tile:nth-child(3n), .gallery__panel:nth-child(3) { --reveal-at: calc(var(--reveal-stagger) * 2); }
      .section-copy > :nth-child(4), .gallery__panel:nth-child(4) { --reveal-at: calc(var(--reveal-stagger) * 3); }
      .section-copy > :nth-child(n + 5), .gallery__panel:nth-child(n + 5) { --reveal-at: calc(var(--reveal-stagger) * 4); }
      /* Card rows deal in: outer cards curve in along an arc about a point below them, the middle card grows. */
      .card-grid > .content-card:nth-child(3n + 1) { --reveal-y: 0px; --reveal-rotate: calc(var(--reveal-tilt) * -1); transform-origin: 50% 200%; }
      .card-grid > .content-card:nth-child(3n) { --reveal-y: 0px; --reveal-rotate: var(--reveal-tilt); transform-origin: 50% 200%; }
      .card-grid > .content-card:nth-child(3n + 2), .bento__tile, .split-card, .testimonials { --reveal-y: 0px; --reveal-scale: var(--reveal-grow); }
      .orbit { --reveal-y: 0px; --reveal-scale: var(--reveal-grow); transform-origin: 50% 100%; }
      /* Side entries: the outside edge leads. */
      .audience-tabs__list, .free-split__copy, .free-split--reverse .free-split__visual { --reveal-y: 0px; --reveal-x: calc(var(--reveal-distance) * -1); }
      .gallery__panel, .audience-tabs__stage, .free-split__visual, .free-split--reverse .free-split__copy { --reveal-y: 0px; --reveal-x: var(--reveal-distance); }
      /* In-section parallax: card media lags behind its card as both cross the viewport. */
      .content-card__media > .content-card__visual { scale: var(--reveal-drift-scale); animation: reveal-drift linear both; animation-timeline: view(); }
      /* Magic text: the heading's view timeline drives its words and then its paragraph's (numbered by src/site.js).
         No fade-out (owner, 2026-10-12): the heading group only reverses when scrolled back up. */
      [data-magic-text] { timeline-scope: --magic-text; }
      [data-magic-text] > :is(h1, h2).magic-text { view-timeline: --magic-text block; }
      [data-magic-text] > .magic-text { animation: none; }
      [data-magic-text] .magic-text__word {
        animation: magic-text-word linear both;
        animation-timeline: --magic-text;
        animation-range: cover calc(var(--magic-text-start) + var(--magic-text-span) * var(--i) / var(--n)) cover calc(var(--magic-text-start) + var(--magic-text-span) * (var(--i) + 1) / var(--n));
      }
      /* Pinned section (B066): the copy sticks full-screen for the --pin-track; its words light on the section's own
         timeline during the hold (heading, then paragraph), and the copy leaves with the hand-over lag once the hold ends. */
      .section-shell.section-pin { height: var(--pin-track); padding-block: 0; margin-block: calc(var(--pin-pull) * -1); }
      .section-shell.section-pin:first-child { margin-top: 0; }
      /* A pinned lead section (pricing hero, B098): the sticky copy fills the screen itself, so no hero padding. */
      #hero.section-pin { min-height: 0; padding-block: 0; align-items: start; }
      .section-pin > .shell { position: sticky; top: 0; height: 100dvh; display: grid; align-content: center; animation: section-lag linear both; animation-timeline: --section; animation-range: exit 0% exit 100%; }
      .section-pin [data-magic-text] .magic-text__word {
        animation-timeline: --section;
        animation-range: contain calc(var(--pin-reveal-from) + (var(--pin-reveal-to) - var(--pin-reveal-from)) * var(--i) / var(--n)) contain calc(var(--pin-reveal-from) + (var(--pin-reveal-to) - var(--pin-reveal-from)) * (var(--i) + 1) / var(--n));
      }
    }
  }
  @keyframes reveal-enter { from { opacity: 0; translate: var(--reveal-x, 0px) var(--reveal-y, var(--reveal-distance)); scale: var(--reveal-scale, 1); rotate: var(--reveal-rotate, 0deg); } }
  @keyframes parallax-depth { from { translate: 0 calc(var(--depth, 0) * -100vh); } to { translate: 0 calc(var(--depth, 0) * 100vh); } }
  @keyframes parallax-lead { to { translate: 0 calc(var(--depth, 0) * 100vh); } }
  @keyframes parallax-backdrop { from { translate: 0 calc(var(--parallax-bleed, 22vh) * -1); } to { translate: 0 var(--parallax-bleed, 22vh); } }
  @keyframes parallax-backdrop-lead { to { translate: 0 var(--parallax-bleed, 22vh); } }
  @keyframes section-lag { to { opacity: 0; transform: translateY(calc(var(--section-lag) * var(--section-lag-span))); } }
  @keyframes magic-text-word { from { opacity: var(--magic-text-dim); } }
  @keyframes reveal-drift { from { translate: 0 calc(var(--reveal-drift) * -1); } to { translate: 0 var(--reveal-drift); } }

  /* Light rays: three wide shafts with soft but defined edges, fanning out from the top-left corner (top-left → bottom-right), in three beams.
     The container's radial mask fades them with distance from the source. Each beam swings about the corner and
     breathes at an unrelated period, so the light never visibly repeats. Composited properties only (rotate, opacity). */
  .light-rays { position: absolute; z-index: -1; inset: 0; overflow: hidden; pointer-events: none; -webkit-mask-image: radial-gradient(farthest-corner at 0 0, var(--black), transparent var(--rays-reach)); mask-image: radial-gradient(farthest-corner at 0 0, var(--black), transparent var(--rays-reach)); }
  .light-rays__beam { position: absolute; inset: calc(var(--rays-origin-y) * -1) -20% -20% calc(var(--rays-origin-x) * -1); transform-origin: 0 0; background: var(--beam-rays); opacity: var(--rays-strength); animation: light-rays-play var(--beam-duration) var(--ease-in-out) var(--beam-delay) infinite alternate; }
  .light-rays__beam:nth-child(1) { --beam-duration: var(--rays-cycle); --beam-delay: 0s; --beam-rays: conic-gradient(from 90deg at 0 0, transparent 13deg, var(--rays-haze-1) 14.26deg, var(--rays-haze-2) 15.34deg, var(--rays-haze-3) 16.42deg, var(--rays-haze-4) 17.5deg, var(--rays-color) 18.85deg, var(--rays-color) 25.15deg, var(--rays-haze-4) 26.5deg, var(--rays-haze-3) 27.58deg, var(--rays-haze-2) 28.66deg, var(--rays-haze-1) 29.74deg, transparent 31deg); }
  .light-rays__beam:nth-child(2) { --beam-duration: calc(var(--rays-cycle) * 1.37); --beam-delay: calc(var(--rays-cycle) * -.6); --beam-rays: conic-gradient(from 90deg at 0 0, transparent 34.7deg, var(--rays-haze-1) 36deg, var(--rays-haze-2) 37.12deg, var(--rays-haze-3) 38.23deg, var(--rays-haze-4) 39.35deg, var(--rays-color) 40.74deg, var(--rays-color) 47.26deg, var(--rays-haze-4) 48.65deg, var(--rays-haze-3) 49.77deg, var(--rays-haze-2) 50.88deg, var(--rays-haze-1) 52deg, transparent 53.3deg); }
  .light-rays__beam:nth-child(3) { --beam-duration: calc(var(--rays-cycle) * 1.73); --beam-delay: calc(var(--rays-cycle) * -1.1); --beam-rays: conic-gradient(from 90deg at 0 0, transparent 58deg, var(--rays-haze-1) 59.12deg, var(--rays-haze-2) 60.08deg, var(--rays-haze-3) 61.04deg, var(--rays-haze-4) 62deg, var(--rays-color) 63.2deg, var(--rays-color) 68.8deg, var(--rays-haze-4) 70deg, var(--rays-haze-3) 70.96deg, var(--rays-haze-2) 71.92deg, var(--rays-haze-1) 72.88deg, transparent 74deg); }
  .light-rays[data-paused] .light-rays__beam { animation-play-state: paused; }
  @keyframes light-rays-play {
    from { rotate: calc(var(--rays-swing) * -1); opacity: calc(var(--rays-strength) * .35); }
    to { rotate: var(--rays-swing); opacity: var(--rays-strength); }
  }
  @media (prefers-reduced-motion: reduce) { .light-rays__beam { animation: none; } }
  @media (prefers-reduced-motion: reduce) {
    .button::before, .btn::before, .button__label, .button__arrow { transition: none !important; }
  }
}

/* Pages added 2026-10-17 (B080, specs/active/site-pages-build.md): pricing plans, comparison table, segmented switch,
   form fields, legal text. Every value is a token; responsive variants at the 48rem / 80rem thresholds. */
@layer components {
  /* Proposed visual (owner, 2026-10-17): a slot whose designed visual (PV-…) is not built yet shows the closest built
     IL as a stand-in, framed in the attention hue so reviewers see it is not final. data-proposed names the PV id.
     Inset so a clipping parent (card media, gallery panel, bento tile) never cuts it. Remove both when the PV ships. */
  .illus--proposed { outline: .125rem solid var(--status-attention); outline-offset: -.125rem; }
  /* Visually hidden, still read by assistive technology and crawlers (table cell meanings, form legends). */
  .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

  /* Plan card (pricing, after the live nvestiv.com layout): a feature card with name, line, price, one action and a
     feature list. Cards sit in .card-grid (1 / 2 / 3 columns). --featured marks the owner's "Popular" plan with a
     brighter edge and the outline badge; --band is the full-width Enterprise card, copy beside its list from 48rem. */
  .plan { gap: var(--space-5); padding: var(--feature-card-padding); text-align: start; }
  /* In a .card-grid the plan cards share five subgrid rows (head, line, price, action, list), so prices, buttons and
     lists line up across cards (row alignment rule). */
  .card-grid > .content-card.plan { grid-row: span 5; row-gap: var(--space-5); }
  .plan--featured { border-color: var(--content-tertiary); }
  .plan__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); }
  .plan__badge { padding: var(--space-1) var(--space-3); border: 1px solid var(--signal-status); border-radius: var(--radius-pill); color: var(--content-primary); font-size: var(--text-xs); }
  .plan__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2); }
  .plan__amount { color: var(--type-h1-color); font-family: var(--font-display); font-size: var(--display-sm); font-weight: var(--weight-bold); font-variant-numeric: tabular-nums; line-height: 1; }
  .plan__unit { color: var(--type-small-color); font-size: var(--type-small-size); }
  .plan .actions .btn { flex: 1 1 auto; justify-content: center; }
  .plan__features { display: grid; gap: var(--space-3); padding-top: var(--space-5); border-top: 1px solid var(--nav-divider); }
  .plan__features > p { color: var(--content-primary); font-size: var(--type-small-size); font-weight: var(--weight-medium); }
  .plan__features ul { display: grid; gap: var(--space-2); }
  .plan__features li { display: flex; align-items: start; gap: var(--space-2); color: var(--type-card-body-color); font-size: var(--type-card-body-size); }
  .plan__features .lucide-icon { flex: none; margin-top: .2em; color: var(--signal-status); }
  .plans-note { margin-top: var(--gap-grid); color: var(--type-small-color); font-size: var(--type-small-size); text-align: center; }
  .plan--band { margin-top: var(--gap-grid); }

  /* Segmented switch: native radios in a glass track; the checked option takes the primary Flow fill. Keyboard: arrow
     keys move between options (native radio group); the focus ring sits on the option. */
  .segmented { display: inline-flex; flex-wrap: wrap; gap: var(--space-1); margin: 0; padding: var(--space-1); border: 1px solid var(--nav-glass-edge); border-radius: var(--radius-pill); background: var(--nav-glass-fill); }
  .segmented__option { position: relative; display: inline-flex; align-items: center; min-height: var(--target-min); padding-inline: var(--space-5); border-radius: var(--radius-pill); color: var(--content-secondary); font-size: var(--text-sm); font-weight: var(--weight-medium); cursor: pointer; transition: background-color var(--duration-fast) var(--ease-in-out), color var(--duration-fast) var(--ease-in-out); }
  .segmented__option > input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
  .segmented__option:hover { background: var(--nav-hover-fill); color: var(--content-primary); }
  .segmented__option:has(input:checked) { background: var(--action-rest); color: var(--action-content); }
  .segmented__option:has(input:focus-visible) { outline: .1875rem solid var(--focus-ring); outline-offset: var(--space-1); }
  @media (prefers-reduced-motion: reduce) { .segmented__option { transition: none; } }

  /* Comparison table: a segmented switch picks a plan (no script, :has). Desktop and tablet show every column and
     highlight the picked one; phones show the feature column and the picked plan only. Column n + 1 belongs to option n. */
  .compare { display: grid; justify-items: center; gap: var(--gap-grid); margin-top: var(--gap-header-content); }
  .compare__scroll { width: 100%; overflow-x: auto; border: 1px solid var(--feature-card-border); border-radius: var(--feature-card-radius); background: var(--card-glass-fill); }
  .compare__table { width: 100%; border-collapse: collapse; font-size: var(--type-small-size); }
  .compare__table caption { padding: var(--space-4) var(--space-5) 0; color: var(--type-small-color); text-align: start; }
  .compare__table :is(th, td) { padding: var(--space-3) var(--space-5); border-bottom: 1px solid var(--nav-divider); text-align: center; transition: background-color var(--duration-fast) var(--ease-in-out); }
  .compare__table :is(th, td):first-child { text-align: start; }
  .compare__table thead th { color: var(--content-primary); font-family: var(--font-display); font-size: var(--text-md); }
  .compare__table tbody th { color: var(--type-body-color); font-weight: var(--weight-regular); }
  .compare__table td { color: var(--content-primary); font-variant-numeric: tabular-nums; }
  .compare__table tbody tr:last-child > * { border-bottom: 0; }
  .compare__table tbody tr:hover > * { background: var(--nav-hover-fill); }
  .compare__table .lucide-icon { display: inline-block; vertical-align: middle; color: var(--signal-status); }
  .compare__none { color: var(--content-tertiary); }
  .compare:has(.segmented__option:nth-of-type(1) input:checked) .compare__table :is(th, td):nth-child(2),
  .compare:has(.segmented__option:nth-of-type(2) input:checked) .compare__table :is(th, td):nth-child(3),
  .compare:has(.segmented__option:nth-of-type(3) input:checked) .compare__table :is(th, td):nth-child(4),
  .compare:has(.segmented__option:nth-of-type(4) input:checked) .compare__table :is(th, td):nth-child(5) { background: var(--nav-hover-fill); color: var(--white); }
  @media (max-width: 47.99rem) {
    .compare:has(.segmented__option:nth-of-type(1) input:checked) .compare__table :is(th, td):is(:nth-child(3), :nth-child(4), :nth-child(5)),
    .compare:has(.segmented__option:nth-of-type(2) input:checked) .compare__table :is(th, td):is(:nth-child(2), :nth-child(4), :nth-child(5)),
    .compare:has(.segmented__option:nth-of-type(3) input:checked) .compare__table :is(th, td):is(:nth-child(2), :nth-child(3), :nth-child(5)),
    .compare:has(.segmented__option:nth-of-type(4) input:checked) .compare__table :is(th, td):is(:nth-child(2), :nth-child(3), :nth-child(4)) { display: none; }
    .compare__table :is(th, td) { padding-inline: var(--space-4); }
    .segmented__option { padding-inline: var(--space-3); } /* four plans on one row at 402px (B114) */
  }
  @media (prefers-reduced-motion: reduce) { .compare__table :is(th, td) { transition: none; } }

  /* Form (contact): stacked fields with the floating-label field contract; two columns from 48rem for short pairs
     (.form__pair). A select keeps its label raised; a text area grows with the card radius. Hints and errors sit under
     the field; an error shows only after the visitor has interacted (:user-invalid), so no script is needed. */
  .form { display: grid; gap: var(--space-4); }
  .form__pair { display: grid; gap: var(--space-4); }
  /* Two fields side by side only when the form itself is wide enough (B106): beside the hero copy at tablet and small
     laptop widths the form is narrow, and a viewport query split it into clipped halves. */
  .form { container-type: inline-size; }
  @container (min-width: 30rem) { .form__pair { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  /* Contact form as one card (owner, 2026-10-30, B104): the feature-card surface, no hover lift. */
  .form--card { padding: var(--feature-card-padding); }
  .field--select .field__input { appearance: none; padding-inline-end: calc(var(--space-5) * 2 + var(--icon-size)); cursor: pointer; }
  .field--select .field__label { color: var(--content-secondary); translate: 0 calc(-50% - var(--field-label-rise)); scale: var(--field-label-scale); }
  .field--select .field__input option { background: var(--surface-raised); color: var(--content-primary); }
  .field__chevron { position: absolute; top: calc(var(--field-height) / 2); right: var(--space-5); color: var(--content-tertiary); pointer-events: none; translate: 0 -50%; }
  .field--area .field__input { height: auto; min-height: calc(var(--field-height) * 3); padding-top: calc(var(--space-6) + var(--space-1)); border-radius: var(--feature-card-radius); resize: vertical; }
  .field--area .field__label { top: calc(var(--field-height) / 2); }
  .field__hint, .field__error { margin-top: var(--space-2); padding-inline: var(--space-5); font-size: var(--type-small-size); }
  .field__hint { color: var(--type-small-color); }
  .field__error { display: none; color: var(--status-attention); }
  .field:has(.field__input:user-invalid) .field__error { display: block; }
  .field__input:user-invalid { border-color: var(--status-attention); }
  .form__status { padding: var(--space-3) var(--space-5); border: 1px solid var(--status-attention); border-radius: var(--feature-card-radius); color: var(--content-primary); font-size: var(--type-small-size); }
  .form__status[data-form-status="sent"] { border-color: var(--status-success); }
  .form .actions .btn { flex: 1 1 auto; justify-content: center; }

  /* Legal text (privacy, terms, AUP, cookies): an "On this page" list beside the document from 80rem (sticky), above
     it below. Reading width --reading-max; headings step down from the site cascade; tables scroll inside their box. */
  .legal-layout { display: grid; gap: var(--gap-header-content); }
  .toc { padding: var(--feature-card-padding); border: 1px solid var(--feature-card-border); border-radius: var(--feature-card-radius); background: var(--card-glass-fill); font-size: var(--type-small-size); }
  .toc__title { margin-bottom: var(--space-3); color: var(--content-primary); font-family: var(--font-ui); font-size: var(--type-small-size); font-weight: var(--weight-medium); letter-spacing: normal; }
  .toc ol { display: grid; gap: var(--space-1); }
  .toc .link { display: inline-flex; min-height: var(--target-min); align-items: center; color: var(--type-small-color); }
  @media (pointer: fine) { .toc ol { gap: 0; } .toc .link { min-height: var(--space-6); } } /* 24px rows (WCAG 2.5.8): 24 items fit a 982px-tall sticky list (B114) */
  /* break-word, not anywhere (B114): `anywhere` lets table columns shrink to one letter; long URLs still wrap. */
  .prose { max-width: var(--reading-max); min-width: 0; overflow-wrap: break-word; }
  .prose > * + * { margin-top: var(--space-4); }
  .prose :is(h2, h3, h4) { scroll-margin-top: calc(var(--nav-height) + var(--space-8)); }
  .prose h2 { margin-top: var(--space-12); font-size: var(--display-xs); }
  .prose h3 { margin-top: var(--space-8); font-size: var(--text-lg); }
  .prose h4 { margin-top: var(--space-6); }
  .prose :is(ul, ol) { display: grid; gap: var(--space-2); padding-inline-start: var(--space-6); color: var(--type-body-color); }
  .prose ul { list-style: disc; }
  .prose ol { list-style: decimal; }
  .prose :is(ul, ol) :is(ul, ol) { margin-top: var(--space-2); }
  .prose strong { color: var(--content-primary); font-weight: var(--weight-medium); }
  .prose code { font-size: .9em; }
  .prose .link { text-decoration: underline; text-underline-offset: var(--space-1); }
  .prose__table { overflow-x: auto; border: 1px solid var(--feature-card-border); border-radius: var(--feature-card-radius); }
  .prose__table table { width: 100%; border-collapse: collapse; font-size: var(--type-small-size); }
  .prose__table :is(th, td) { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--nav-divider); text-align: start; vertical-align: top; color: var(--type-body-color); }
  .prose__table th { color: var(--content-primary); font-weight: var(--weight-medium); }
  .prose__table tr:last-child > * { border-bottom: 0; }

  @media (min-width: 48rem) {
    .plan--band { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: var(--free-split-gap); align-items: start; }
    .plan--band .plan__features { padding-top: 0; padding-inline-start: var(--free-split-gap); border-top: 0; border-inline-start: 1px solid var(--nav-divider); }
    .plan--band .plan__features ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .plan--band > div:first-child > * + * { margin-top: var(--space-5); }
  }
  @media (min-width: 80rem) {
    .legal-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 2.5fr); align-items: start; }
    .toc { position: sticky; top: calc(var(--nav-height) + var(--space-8)); max-height: calc(100dvh - var(--nav-height) - var(--space-16)); overflow-y: auto; }
  }
}