:root {
  --navy-950: #04111f;
  --navy-900: #061a2e;
  --navy-800: #0b2945;
  --navy-700: #123d62;
  --blue-600: #0757b4;
  --green-500: #00a957;
  --green-400: #25c779;
  --green-600: #058a48;
  --green-100: #dff8ea;
  --ice-50: #f7fafc;
  --ice-100: #edf3f7;
  --ice-200: #dae5ed;
  --slate-500: #647589;
  --slate-700: #33465b;
  --white: #fff;
  --ink: #07182a;
  --line: rgba(7, 32, 55, .12);
  --shadow-sm: 0 6px 20px rgba(4, 25, 45, .07);
  --shadow-md: 0 20px 60px rgba(4, 25, 45, .12);
  --shadow-deep: 0 45px 100px rgba(2, 16, 30, .24);
  --radius-sm: .45rem;
  --radius-md: .75rem;
  --radius-lg: 1.15rem;
  --radius-xl: 1.8rem;
  --content: 1180px;
  --font-body: "Manrope", system-ui, sans-serif;
  --font-display: "Montserrat", system-ui, sans-serif;
  --text-xs: clamp(.75rem, .72rem + .12vw, .82rem);
  --text-sm: clamp(.86rem, .82rem + .18vw, .96rem);
  --text-base: clamp(1rem, .96rem + .18vw, 1.1rem);
  --text-lg: clamp(1.15rem, 1.02rem + .55vw, 1.45rem);
  --text-xl: clamp(1.7rem, 1.4rem + 1.25vw, 2.45rem);
  --text-2xl: clamp(2.35rem, 1.55rem + 3vw, 4rem);
  --text-hero: clamp(3rem, 1.4rem + 5.8vw, 6.8rem);
  --ease: 260ms cubic-bezier(.16, 1, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 6rem; -webkit-text-size-adjust: none; text-size-adjust: none; }
body { margin: 0; min-height: 100dvh; overflow-x: clip; color: var(--ink); background: var(--ice-50); font-family: var(--font-body); font-size: var(--text-base); line-height: 1.65; -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { line-height: 1.08; text-wrap: balance; }
h1, h2 { font-family: var(--font-display); letter-spacing: -.045em; }
p { text-wrap: pretty; }
:focus-visible { outline: 3px solid var(--green-500); outline-offset: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.skip-link { position: fixed; z-index: 1000; left: 1rem; top: 1rem; transform: translateY(-160%); padding: .65rem 1rem; background: var(--white); border-radius: var(--radius-sm); font-weight: 800; }
.skip-link:focus { transform: none; }
.eyebrow { margin-bottom: 1rem; color: var(--green-500); font-size: var(--text-xs); font-weight: 800; letter-spacing: .16em; line-height: 1.3; }
.icon { width: 1.2em; height: 1.2em; flex: 0 0 auto; }
.button { min-height: 3.2rem; display: inline-flex; align-items: center; justify-content: center; gap: .65rem; padding: .78rem 1.2rem; color: var(--white); background: var(--navy-900); border: 1px solid var(--navy-900); border-radius: var(--radius-sm); text-decoration: none; font-size: var(--text-sm); font-weight: 800; box-shadow: 0 7px 18px rgba(3, 29, 52, .14); transition: transform var(--ease), background var(--ease), box-shadow var(--ease); }
.button:hover { transform: translateY(-2px); background: var(--navy-800); box-shadow: 0 12px 28px rgba(3, 29, 52, .2); }
.button-small { min-height: 2.65rem; padding: .55rem .9rem; color: var(--white) !important; }
.button-secondary { color: var(--navy-900); background: transparent; box-shadow: none; }
.button-secondary:hover { color: var(--white); }
.button-light { color: var(--navy-950); background: var(--white); border-color: var(--white); }
.button-light:hover { color: var(--navy-950); background: var(--green-100); }
.text-link { display: inline-flex; align-items: center; gap: .5rem; color: var(--navy-900); text-decoration: none; font-size: var(--text-sm); font-weight: 800; }
.text-link .icon, .button .icon { transition: transform var(--ease); }
.text-link:hover .icon, .button:hover .icon { transform: translateX(.25rem); }

.site-header { position: sticky; z-index: 100; top: 0; border-bottom: 1px solid transparent; background: rgba(247, 250, 252, .9); backdrop-filter: blur(18px); transition: box-shadow var(--ease), border-color var(--ease); }
.site-header.is-scrolled { border-color: var(--line); box-shadow: 0 10px 35px rgba(4, 25, 45, .06); }
.nav-shell { width: min(calc(100% - 2.5rem), var(--content)); min-height: 4.8rem; margin: auto; display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.brand { display: inline-flex; align-items: center; gap: 1.1rem; color: var(--navy-900); text-decoration: none; }
.brand img { flex: none; width: 2.6rem; height: 2.6rem; }
.brand span { display: grid; gap: .3rem; padding-left: 1.1rem; line-height: 1.1; border-left: 1px solid var(--line); }
.brand strong { max-width: 30ch; font-family: var(--font-display); font-size: .98rem; line-height: 1.08; letter-spacing: .01em; }
.brand small { color: var(--slate-500); font-size: .62rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.site-nav { display: flex; align-items: center; gap: 1.55rem; }
.site-nav > a { color: var(--slate-700); text-decoration: none; font-size: var(--text-sm); font-weight: 700; }
.site-nav > a:not(.button):hover, .site-nav > a[aria-current="page"] { color: var(--green-500); }
.nav-toggle { display: none; width: 2.75rem; height: 2.75rem; padding: .65rem; border: 0; background: transparent; }
.nav-toggle > span:not(.sr-only) { display: block; height: 2px; margin: .28rem 0; background: var(--navy-900); transition: transform var(--ease), opacity var(--ease); }

.hero { width: min(calc(100% - 2.5rem), 1320px); margin: auto; }
.home-hero { min-height: min(850px, calc(100vh - 4.8rem)); padding: clamp(4rem, 8vw, 8rem) 0 clamp(5rem, 9vw, 8rem); display: grid; grid-template-columns: .82fr 1.18fr; align-items: center; gap: clamp(3rem, 6vw, 6rem); }
.home-hero > * { min-width: 0; }
.hero-copy { position: relative; z-index: 5; max-width: 620px; }
.hero-system-status { width: fit-content; margin: 0 0 2rem; padding: .55rem .7rem; display: flex; align-items: center; gap: .65rem; color: var(--navy-900); background: rgba(255, 255, 255, .68); border: 1px solid rgba(7, 32, 55, .1); border-radius: 999px; box-shadow: 0 14px 40px rgba(4, 25, 45, .08); backdrop-filter: blur(16px); font-size: .58rem; font-weight: 800; letter-spacing: .11em; }
.hero-system-status i { width: .45rem; height: .45rem; background: var(--green-500); border-radius: 50%; box-shadow: 0 0 0 .35rem rgba(0, 169, 87, .12); animation: status-pulse 2.4s ease-in-out infinite; }
.hero-system-status b { padding-left: .65rem; color: var(--slate-500); border-left: 1px solid var(--line); font-size: inherit; }
.hero-platform-lockup { width: fit-content; margin-bottom: 2rem; display: flex; align-items: center; gap: 1rem; }
.hero-platform-lockup img { width: 3.6rem; height: 3.6rem; filter: drop-shadow(0 14px 24px rgba(4, 35, 65, .18)); animation: logo-breathe 5s ease-in-out infinite; }
.hero-platform-lockup span { display: grid; line-height: 1.05; }
.hero-platform-lockup small { color: var(--slate-500); font-size: .62rem; font-weight: 800; letter-spacing: .15em; }
.hero-platform-lockup strong { max-width: 29ch; color: var(--navy-900); font-family: var(--font-display); font-size: 1.12rem; line-height: 1.08; letter-spacing: .01em; }
.hero-copy h1 { margin-bottom: 1.6rem; color: var(--navy-950); font-size: var(--text-hero); line-height: .94; }
.hero-copy h1 em { color: var(--green-500); font-style: normal; }
.hero-lede { max-width: 59ch; margin-bottom: 2rem; color: var(--slate-700); }
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 1.4rem; margin-bottom: 1.3rem; }
.hero-note { max-width: 50ch; color: var(--slate-500); font-size: var(--text-xs); }

/* ---- Hero product stage: a real 3D scene. The scene rests at rotateX(12deg)
   rotateY(-18deg) so depth is obvious before any interaction; the pointer adds
   --rx/--ry on top. A perspective floor grid, a dark slab behind the window
   (visible thickness) and three floating cards at different translateZ make
   the geometry unmistakable. ---- */
.product-stage { --rx: 0deg; --ry: 0deg; --px: 0; --py: 0; --scroll-depth: 0; --base-rx: 12deg; --base-ry: -18deg; --floor-line: rgba(7, 87, 180, .16); position: relative; width: 730px; margin: 0; padding: 4.5rem 3.25rem 2.5rem 2.75rem; perspective: 1400px; perspective-origin: 62% 38%; isolation: isolate; }
.product-stage::before { content: ""; position: absolute; z-index: -3; inset: -4% -6% 6% -8%; border-radius: 48% 52% 42% 58% / 56% 42% 58% 44%; background: radial-gradient(circle at 63% 28%, rgba(37, 199, 121, .38), transparent 24%), radial-gradient(circle at 40% 55%, rgba(7, 87, 180, .26), transparent 44%), linear-gradient(145deg, rgba(6, 26, 46, .05), rgba(255, 255, 255, .5)); transform: rotate(-5deg) scale(1.03); }
.stage-atmosphere { position: absolute; z-index: -2; inset: 1rem; transform-style: preserve-3d; pointer-events: none; }
.stage-atmosphere i { position: absolute; inset: 8%; border: 1px solid rgba(0, 169, 87, .3); border-radius: 50%; transform: rotateX(67deg) rotateZ(12deg) translateZ(-25px); animation: orbit-spin 18s linear infinite; }
.stage-atmosphere i:nth-child(2) { inset: 16% -2%; border-color: rgba(7, 87, 180, .22); transform: rotateY(70deg) rotateZ(-8deg) translateZ(-45px); animation-duration: 24s; animation-direction: reverse; }
.stage-atmosphere i:nth-child(3) { inset: -2% 18%; border-color: rgba(7, 32, 55, .14); transform: rotateX(74deg) rotateZ(70deg) translateZ(-65px); animation-duration: 30s; }
.stage-floor { position: absolute; z-index: -1; left: -18%; right: -10%; top: 34%; bottom: -14%; background: linear-gradient(90deg, var(--floor-line) 1px, transparent 1px) 0 0 / 3.2rem 3.2rem, linear-gradient(180deg, var(--floor-line) 1px, transparent 1px) 0 0 / 3.2rem 3.2rem; border-top: 1px solid var(--floor-line); transform: rotateX(72deg) translateZ(-120px); transform-origin: center 60%; mask: radial-gradient(ellipse at 55% 45%, #000 30%, transparent 78%); -webkit-mask: radial-gradient(ellipse at 55% 45%, #000 30%, transparent 78%); pointer-events: none; }
.stage-shadow { position: absolute; z-index: -1; inset: 30% 0 -6% 12%; background: rgba(7, 40, 70, .38); filter: blur(48px); transform: translateZ(-80px) rotateX(68deg); pointer-events: none; }
.stage-scene { position: relative; transform-style: preserve-3d; transform: rotateX(calc(var(--base-rx) + var(--rx))) rotateY(calc(var(--base-ry) + var(--ry))); transition: transform 700ms cubic-bezier(.16, 1, .3, 1); will-change: transform; }
.product-stage.is-tilting .stage-scene { transition-duration: 140ms; }
.stage-identity { position: absolute; z-index: 9; top: -3.2rem; left: -1.4rem; display: grid; grid-template-columns: auto auto; grid-template-rows: 1fr 1fr; align-items: center; column-gap: .7rem; transform: translateZ(170px) translateY(calc(var(--scroll-depth) * -10px)); filter: drop-shadow(0 26px 30px rgba(4, 17, 31, .26)); }
.stage-identity > span { grid-row: 1 / 3; width: 3.6rem; height: 3.6rem; padding: .35rem; display: grid; place-items: center; background: rgba(255, 255, 255, .94); border: 1px solid rgba(255, 255, 255, .8); border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(7, 32, 55, .08); backdrop-filter: blur(16px); }
.stage-identity img { width: 100%; height: 100%; }
.stage-identity b { align-self: end; color: var(--navy-950); font-family: var(--font-display); font-size: 1.15rem; letter-spacing: .12em; }
.stage-identity small { align-self: start; color: var(--slate-500); font-size: .52rem; font-weight: 800; letter-spacing: .12em; }
.app-slab { position: absolute; inset: 0; border-radius: 1.3rem; background: linear-gradient(160deg, var(--navy-700), var(--navy-950)); box-shadow: 0 40px 80px rgba(2, 16, 30, .35); transform: translate3d(1.6rem, 1.7rem, -34px); transform-style: preserve-3d; }
.app-slab::before, .app-slab::after { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 1px solid rgba(37, 199, 121, .35); background: rgba(6, 26, 46, .35); transform: translate3d(1.1rem, 1.2rem, -46px); }
.app-slab::after { border-color: rgba(7, 87, 180, .3); background: rgba(6, 26, 46, .18); transform: translate3d(2.2rem, 2.4rem, -92px); }
.app-window { position: relative; z-index: 2; overflow: hidden; background: rgba(255, 255, 255, .98); border: 1px solid rgba(255, 255, 255, .85); border-radius: 1.3rem; box-shadow: 0 2.4rem 5rem rgba(2, 16, 30, .3), 0 0 0 1px rgba(7, 32, 55, .06), inset 0 1px 0 rgba(255, 255, 255, .95); transform: translateZ(calc(30px + var(--scroll-depth) * 14px)); }
.app-topbar { height: 3.5rem; display: flex; align-items: center; gap: .7rem; padding: 0 1rem; border-bottom: 1px solid var(--line); color: var(--slate-700); font-size: .72rem; }
.app-topbar > strong { min-width: 9ch; }
.app-mark { width: 1.75rem; height: 1.75rem; display: grid; place-items: center; color: var(--white); background: var(--navy-900); border-radius: 50%; font-weight: 800; }
.app-tabs { display: flex; gap: .3rem; margin-left: .4rem; }
.app-tabs i { width: 1.1rem; height: .28rem; background: var(--ice-200); border-radius: 1rem; transition: width var(--ease), background var(--ease); }
.app-tabs i.on { width: 2rem; background: var(--green-500); }
.live-pill { margin-left: auto; display: flex; align-items: center; gap: .4rem; padding: .3rem .55rem; background: var(--green-100); border-radius: 999px; color: #08743d; font-weight: 800; }
.live-pill i { width: .4rem; height: .4rem; background: var(--green-500); border-radius: 50%; }
.app-layout { min-height: 430px; display: grid; grid-template-columns: 3.4rem 1fr; }
.app-rail { display: flex; flex-direction: column; align-items: center; gap: 1rem; padding-top: 1.2rem; background: var(--navy-900); }
.app-rail b, .app-rail span { width: 1.2rem; height: .18rem; background: rgba(255, 255, 255, .28); border-radius: 2rem; transition: height var(--ease), background var(--ease); }
.app-rail b { height: 1.2rem; margin-bottom: .6rem; border: 1px solid rgba(255, 255, 255, .45); background: transparent; border-radius: .25rem; }
.app-rail .active { height: 1.2rem; background: var(--green-400); }
.app-screens { position: relative; display: grid; min-width: 0; background: #f4f7fa; perspective: 1100px; transform-style: preserve-3d; overflow: hidden; }
.app-screen { grid-area: 1 / 1; min-width: 0; opacity: 0; visibility: hidden; transform: translateX(14%) rotateY(-26deg) translateZ(-110px); transform-origin: left center; transition: transform 680ms cubic-bezier(.16, 1, .3, 1), opacity 460ms ease, visibility 0s linear 680ms; backface-visibility: hidden; }
.app-screen.from-left { transform: translateX(-14%) rotateY(26deg) translateZ(-110px); transform-origin: right center; }
.app-screen.is-active { z-index: 2; opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.app-dashboard { padding: 1.55rem 1.55rem 4.6rem; }
.app-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.2rem; }
.app-heading small { color: var(--slate-500); font-size: .57rem; font-weight: 800; letter-spacing: .12em; }
.app-heading h2 { margin: .25rem 0 0; font-family: var(--font-body); font-size: 1.25rem; letter-spacing: -.03em; }
.app-heading button { padding: .55rem .8rem; color: var(--white); background: var(--navy-900); border: 0; border-radius: .35rem; font-size: .65rem; font-weight: 800; }
.metric-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; }
.metric-row article { padding: .8rem; background: var(--white); border: 1px solid rgba(6, 36, 60, .08); border-radius: .6rem; box-shadow: 0 5px 12px rgba(5, 29, 48, .04); }
.metric-row small, .metric-row span { display: block; color: var(--slate-500); font-size: .57rem; }
.metric-row strong { display: block; margin: .1rem 0; color: var(--navy-900); font-size: 1.2rem; }
.dashboard-grid { display: grid; grid-template-columns: 1.25fr .75fr; gap: .75rem; margin-top: .75rem; }
.schedule-card, .activity-card { min-height: 210px; padding: 1rem; background: var(--white); border: 1px solid rgba(6, 36, 60, .08); border-radius: .6rem; }
.schedule-card header, .activity-card header { display: flex; justify-content: space-between; font-size: .67rem; }
.schedule-card header span, .activity-card header span { color: var(--blue-600); font-size: .57rem; font-weight: 700; }
.schedule-card ol { margin: .7rem 0 0; padding: 0; list-style: none; }
.schedule-card li { display: grid; grid-template-columns: 2.4rem .55rem 1fr; align-items: center; gap: .5rem; padding: .55rem 0; border-top: 1px solid var(--line); }
.schedule-card time { color: var(--slate-500); font-size: .57rem; }
.schedule-card li > i { width: .5rem; height: .5rem; background: var(--ice-200); border-radius: 50%; }
.schedule-card li > i.done { background: var(--green-500); }
.schedule-card li > i.now { background: var(--blue-600); box-shadow: 0 0 0 .2rem #d9e9fa; }
.schedule-card li div { display: grid; line-height: 1.35; }
.schedule-card li strong { font-size: .65rem; }
.schedule-card li span { color: var(--slate-500); font-size: .55rem; }
.mini-chart { height: 118px; display: flex; align-items: end; justify-content: space-between; gap: .3rem; padding-top: 1rem; border-bottom: 1px solid var(--line); }
.mini-chart i { width: 12%; height: 42%; background: var(--ice-200); border-radius: .2rem .2rem 0 0; transform-origin: bottom; }
.app-screen.is-active .mini-chart i { animation: bar-rise 700ms cubic-bezier(.16, 1, .3, 1) both; animation-delay: calc(var(--n, 0) * 60ms); }
.mini-chart i:nth-child(2) { --n: 1; } .mini-chart i:nth-child(3) { --n: 2; } .mini-chart i:nth-child(4) { --n: 3; } .mini-chart i:nth-child(5) { --n: 4; } .mini-chart i:nth-child(6) { --n: 5; } .mini-chart i:nth-child(7) { --n: 6; }
.mini-chart i:nth-child(2), .mini-chart i:nth-child(6) { height: 68%; }
.mini-chart i:nth-child(3) { height: 52%; }
.mini-chart i:nth-child(4) { height: 86%; background: var(--green-500); }
.mini-chart i:nth-child(5) { height: 72%; }
.mini-chart i:nth-child(7) { height: 95%; background: var(--navy-800); }
.mini-chart-2 i:nth-child(1) { height: 30%; } .mini-chart-2 i:nth-child(2) { height: 48%; } .mini-chart-2 i:nth-child(3) { height: 64%; } .mini-chart-2 i:nth-child(4) { height: 58%; background: var(--ice-200); } .mini-chart-2 i:nth-child(5) { height: 80%; } .mini-chart-2 i:nth-child(6) { height: 74%; background: var(--green-500); } .mini-chart-2 i:nth-child(7) { height: 96%; }
.mini-chart-3 i:nth-child(1) { height: 22%; } .mini-chart-3 i:nth-child(2) { height: 36%; } .mini-chart-3 i:nth-child(3) { height: 78%; background: var(--green-500); } .mini-chart-3 i:nth-child(4) { height: 44%; background: var(--ice-200); } .mini-chart-3 i:nth-child(5) { height: 62%; } .mini-chart-3 i:nth-child(6) { height: 88%; } .mini-chart-3 i:nth-child(7) { height: 70%; background: var(--blue-600); }
.mini-chart-4 i { height: 100%; background: var(--green-100); } .mini-chart-4 i:nth-child(odd) { background: var(--green-500); } .mini-chart-4 i:nth-child(7) { background: var(--navy-800); }
.activity-card footer { display: flex; justify-content: space-between; align-items: center; margin-top: .65rem; color: var(--slate-500); font-size: .56rem; }
.activity-card footer strong { color: var(--navy-900); font-size: 1rem; }
/* Lower third on the mock itself: kicker + title follow the active screen. */
.screen-lower-third { position: absolute; z-index: 6; left: 4.4rem; bottom: 1rem; min-width: 58%; max-width: calc(100% - 5.4rem); display: grid; grid-template-columns: auto minmax(0, 1fr) auto; color: var(--white); filter: drop-shadow(0 18px 30px rgba(4, 17, 31, .35)); }
.lt-slab { width: .7rem; background: var(--green-400); transform: skewX(-14deg); transform-origin: bottom; }
.lt-text { min-width: 0; padding: .55rem 1rem .6rem .9rem; display: grid; background: linear-gradient(100deg, var(--navy-950), var(--navy-800)); }
.lt-text small { color: var(--green-400); font-size: .5rem; font-weight: 800; letter-spacing: .16em; line-height: 1.3; }
.lt-text strong { overflow: hidden; font-family: var(--font-display); font-size: .95rem; line-height: 1.15; letter-spacing: -.01em; white-space: nowrap; text-overflow: ellipsis; }
.lt-count { padding: 0 .8rem; display: grid; place-items: center; color: var(--navy-900); background: var(--white); font-size: .6rem; font-weight: 800; letter-spacing: .08em; }
.lt-count b { color: var(--green-600); font-size: .8rem; }
.lt-progress { grid-column: 1 / -1; height: 3px; overflow: hidden; background: rgba(255, 255, 255, .25); }
.lt-progress i { display: block; height: 100%; background: var(--green-400); transform: scaleX(0); transform-origin: left; }
.lt-progress i.running { animation: bar-progress 5.2s linear forwards; }
.screen-lower-third.is-live .lt-text { animation: lt-wipe 620ms cubic-bezier(.16, 1, .3, 1) both; }
.screen-lower-third.is-live .lt-text small { animation: lt-rise 520ms cubic-bezier(.16, 1, .3, 1) 120ms both; }
.screen-lower-third.is-live .lt-text strong { animation: lt-rise 560ms cubic-bezier(.16, 1, .3, 1) 200ms both; }
.screen-lower-third.is-live .lt-count { animation: lt-wipe 520ms cubic-bezier(.16, 1, .3, 1) 260ms both; }
.depth-card { --z: 150px; position: absolute; z-index: 8; display: flex; align-items: center; gap: .65rem; padding: .8rem 1rem; background: rgba(255, 255, 255, .9); border: 1px solid rgba(255, 255, 255, .9); border-radius: .75rem; box-shadow: 0 30px 60px rgba(4, 25, 45, .26), inset 0 1px 0 rgba(255, 255, 255, .95); backdrop-filter: blur(18px); transform: translate3d(0, 0, var(--z)); animation: card-float 6s ease-in-out infinite; }
.depth-card > span { width: 2.2rem; height: 2.2rem; display: grid; place-items: center; color: var(--green-600); background: var(--green-100); border-radius: .45rem; }
.depth-card div { display: grid; line-height: 1.35; }
.depth-card small { color: var(--slate-500); font-size: .56rem; }
.depth-card strong { font-size: .7rem; white-space: nowrap; }
.depth-card-ai { --z: 150px; top: 12%; right: -7%; }
.depth-card-pay { --z: 200px; left: -6%; bottom: 10%; animation-delay: -2s; }
.depth-card-consent { --z: 105px; right: 4%; bottom: -8%; animation-delay: -4s; }
.stage-controls { position: relative; z-index: 12; margin: 2.6rem 0 0 .25rem; display: flex; align-items: center; gap: .6rem; }
.stage-controls > button { width: 2.5rem; height: 2.5rem; display: grid; place-items: center; color: var(--navy-900); background: var(--white); border: 1px solid var(--line); border-radius: 50%; box-shadow: var(--shadow-sm); transition: transform var(--ease), background var(--ease), color var(--ease); }
.stage-controls > button:hover { color: var(--white); background: var(--navy-900); transform: translateY(-2px); }
.stage-dots { margin: 0; padding: 0; display: flex; gap: .4rem; list-style: none; }
.stage-dots button { padding: .45rem .1rem; background: transparent; border: 0; }
.stage-dots button i { display: block; width: 1.25rem; height: .38rem; background: var(--ice-200); border-radius: 1rem; transition: width 380ms cubic-bezier(.16, 1, .3, 1), background var(--ease); }
.stage-dots button:hover i { background: var(--slate-500); }
.stage-dots button[aria-current="true"] i { width: 2.8rem; background: var(--green-500); }
.stage-caption { margin-left: auto; color: var(--slate-500); font-size: .56rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }

.trust-strip { color: var(--white); background: var(--navy-900); }
.trust-inner { width: min(calc(100% - 2.5rem), var(--content)); margin: auto; display: grid; grid-template-columns: repeat(3, 1fr); }
.trust-inner p { margin: 0; display: grid; grid-template-columns: auto 1fr; column-gap: .8rem; padding: 2rem; border-left: 1px solid rgba(255, 255, 255, .12); }
.trust-inner p:last-child { border-right: 1px solid rgba(255, 255, 255, .12); }
.trust-inner p > span { grid-row: span 2; color: var(--green-400); font-size: 1.25rem; }
.trust-inner strong { font-size: var(--text-sm); }
.trust-inner small { color: #aab9c8; font-size: var(--text-xs); }

.experience-section, .capabilities-section, .workflow-section, .pricing-section, .faq-section, .security-band, .feature-ledger, .integration-ledger, .integration-principles, .security-map, .compliance-grid, .security-detail, .provision-steps, .pricing-faq { width: min(calc(100% - 2.5rem), var(--content)); margin-inline: auto; padding-block: clamp(5rem, 9vw, 9rem); }
.section-heading { max-width: 760px; margin-bottom: 3rem; }
.section-heading h2, .ai-copy h2, .signature-copy h2, .security-band h2, .pricing-faq h2, .security-detail h2, .provision-steps h2 { margin-bottom: 1.2rem; font-size: var(--text-2xl); }
.section-heading > p:last-child, .split-heading > p { color: var(--slate-700); }
.split-heading { max-width: none; display: grid; grid-template-columns: 1.15fr .85fr; align-items: end; gap: 4rem; }
.split-heading > p { margin-bottom: .4rem; }

.experience-section { max-width: 1320px; }
.experience-heading { margin-bottom: 3rem; display: grid; grid-template-columns: auto 1.2fr .8fr; align-items: end; gap: clamp(2rem, 5vw, 5rem); }
.experience-heading > p { margin-bottom: .3rem; color: var(--slate-700); }
.experience-heading h2 { margin-bottom: 0; font-size: var(--text-2xl); }
.experience-brand { align-self: stretch; min-width: 175px; padding: 1.3rem; display: flex; flex-direction: column; justify-content: space-between; color: var(--white); background: var(--navy-900); box-shadow: .65rem .65rem 0 var(--green-500); }
.experience-brand img { width: 4.6rem; height: 4.6rem; filter: brightness(0) invert(1); }
.experience-brand span { display: grid; margin-top: 3rem; }
.experience-brand small { max-width: 14ch; color: #9eb0c0; font-size: .58rem; font-weight: 800; letter-spacing: .12em; line-height: 1.5; }
.experience-brand strong { max-width: 15ch; margin-top: .35rem; font-family: var(--font-display); font-size: 1.15rem; line-height: 1.08; letter-spacing: .01em; }
.experience-shell { overflow: hidden; color: var(--white); background: var(--navy-950); border: 1px solid rgba(4, 17, 31, .2); box-shadow: var(--shadow-deep); }
.experience-tabs { display: grid; grid-template-columns: repeat(5, 1fr); background: #061a2e; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.experience-tabs button, .journey-tabs button { min-height: 5.5rem; padding: 1rem 1.1rem; display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; gap: .65rem; text-align: left; color: #9dafbe; background: transparent; border: 0; border-right: 1px solid rgba(255, 255, 255, .1); font-size: var(--text-xs); font-weight: 800; transition: color var(--ease), background var(--ease); }
.journey-tabs button { grid-template-columns: auto minmax(0, 1fr) auto; }
.experience-tabs button:last-child, .journey-tabs button:last-child { border-right: 0; }
.experience-tabs button > span:not(.switch) { color: var(--green-400); font-family: var(--font-display); }
.experience-tabs button > b, .journey-tabs button > b { overflow: hidden; font-weight: 800; white-space: nowrap; text-overflow: ellipsis; }
.experience-tabs button > small, .journey-tabs button > small { color: #6d8195; font-size: .5rem; font-weight: 800; letter-spacing: .14em; transition: color var(--ease); }
.experience-tabs button:hover, .journey-tabs button:hover { color: var(--white); background: rgba(255, 255, 255, .04); }
.experience-tabs button[aria-selected="true"], .journey-tabs button[aria-selected="true"] { color: var(--white); background: var(--navy-800); box-shadow: inset 0 -3px 0 var(--green-400); }
.experience-tabs button[aria-selected="true"] > small, .journey-tabs button[aria-selected="true"] > small { color: var(--green-400); }
/* Toggle switch: track + knob. Any [aria-selected="true"], .active or .complete
   ancestor turns it on. */
.switch { position: relative; flex: 0 0 auto; width: 2.4rem; height: 1.3rem; display: inline-block; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .24); border-radius: 999px; font-style: normal; transition: background var(--ease), border-color var(--ease), box-shadow var(--ease); }
.switch i { position: absolute; top: .11rem; left: .11rem; width: .96rem; height: .96rem; background: #9dafbe; border-radius: 50%; box-shadow: 0 2px 6px rgba(0, 0, 0, .4); transition: transform 340ms cubic-bezier(.34, 1.56, .64, 1), background var(--ease); }
[aria-selected="true"] > .switch, .active > .switch, .complete > .switch, [aria-current="step"] > .switch { background: var(--green-500); border-color: var(--green-400); box-shadow: 0 0 0 4px rgba(37, 199, 121, .16), 0 0 18px rgba(37, 199, 121, .4); }
[aria-selected="true"] > .switch i, .active > .switch i, .complete > .switch i, [aria-current="step"] > .switch i { background: var(--white); transform: translateX(1.1rem); }
.complete > .switch { background: var(--green-600); box-shadow: none; }
/* Flip stage: panel swaps rotate out then in around the Y axis. */
[data-flip-stage] { perspective: 1800px; }
[data-flip-stage].flip-out > * { animation: stage-flip-out 260ms ease-in forwards; }
[data-flip-stage].flip-in > * { animation: stage-flip-in 560ms cubic-bezier(.16, 1, .3, 1) both; }
.experience-panels { min-height: 520px; }
.experience-panel { min-height: 520px; display: grid; grid-template-columns: .76fr 1.24fr; align-items: center; gap: clamp(3rem, 7vw, 7rem); padding: clamp(2rem, 5vw, 5rem); background: radial-gradient(circle at 82% 20%, rgba(0, 169, 87, .16), transparent 28%), linear-gradient(135deg, #04111f, #08243e); }
.experience-panel[hidden] { display: none; }
.experience-copy h3 { margin-bottom: 1.3rem; font-family: var(--font-display); font-size: var(--text-xl); letter-spacing: -.04em; }
.experience-copy > p:not(.eyebrow) { color: #b8c6d2; }
.experience-copy .text-link { margin-top: 1rem; color: var(--green-400); }
.experience-stage { --rx: 0deg; --ry: 0deg; --base-rx: 6deg; --base-ry: -16deg; position: relative; transform-style: preserve-3d; transform: perspective(1400px) rotateX(calc(var(--base-rx) + var(--rx))) rotateY(calc(var(--base-ry) + var(--ry))); transition: transform 600ms cubic-bezier(.16, 1, .3, 1); }
.experience-stage.is-tilting { transition-duration: 140ms; }
.experience-stage::before { content: ""; position: absolute; inset: 0; border-radius: var(--radius-lg); border: 1px solid rgba(37, 199, 121, .4); background: linear-gradient(160deg, rgba(0, 169, 87, .28), rgba(6, 26, 46, .5)); transform: translate3d(1.6rem, 1.8rem, -70px); }
.experience-stage::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius-lg); border: 1px solid rgba(255, 255, 255, .12); transform: translate3d(3.2rem, 3.6rem, -140px); }
.experience-screen { position: relative; overflow: hidden; color: var(--ink); background: rgba(255, 255, 255, .98); border: 1px solid rgba(255, 255, 255, .45); border-radius: var(--radius-lg); box-shadow: var(--shadow-deep); transform: translateZ(0); }
.experience-float { position: absolute; z-index: 3; display: grid; gap: .1rem; padding: .8rem 1rem; color: var(--ink); background: rgba(255, 255, 255, .92); border: 1px solid rgba(255, 255, 255, .9); border-radius: .7rem; box-shadow: 0 30px 60px rgba(2, 16, 30, .4); backdrop-filter: blur(16px); animation: card-float 6s ease-in-out infinite; }
.experience-float small { color: var(--green-600); font-size: .52rem; font-weight: 800; letter-spacing: .14em; }
.experience-float strong { font-size: .72rem; white-space: nowrap; }
.experience-float-a { --z: 110px; top: 10%; right: -9%; }
.experience-float-b { --z: 160px; left: -8%; bottom: 14%; grid-template-columns: auto auto; align-items: baseline; gap: .5rem; animation-delay: -3s; }
.experience-float-b b { color: var(--navy-900); font-family: var(--font-display); font-size: 1.5rem; letter-spacing: -.04em; }
.experience-float-b span { font-size: .62rem; font-weight: 800; }
.experience-screen::after { content: ""; position: absolute; top: -40%; left: -20%; width: 35%; height: 180%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .65), transparent); transform: rotate(18deg); animation: screen-sheen 7s ease-in-out infinite; pointer-events: none; }
.experience-screen > header { min-height: 3.4rem; padding: .8rem 1rem; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); color: var(--slate-500); font-size: .65rem; }
.experience-screen > header span { display: flex; align-items: center; gap: .45rem; }
.experience-screen > header img { width: 1.55rem; height: 1.55rem; }
.experience-screen > header b { color: var(--navy-900); font-family: var(--font-display); letter-spacing: .06em; }
.experience-screen > header i { color: #08743d; font-style: normal; font-weight: 800; letter-spacing: .08em; }
.experience-metric { padding: 1.4rem; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1rem; background: var(--ice-100); }
.experience-metric strong { color: var(--navy-900); font-family: var(--font-display); font-size: 2rem; letter-spacing: -.05em; }
.experience-metric span { color: var(--slate-500); font-size: .68rem; }
.experience-metric b { padding: .35rem .55rem; color: #08743d; background: var(--green-100); font-size: .62rem; }
.experience-screen ul { margin: 0; padding: .35rem 1.4rem; list-style: none; }
.experience-screen li { min-height: 4.4rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--line); }
.experience-screen li span { display: grid; }
.experience-screen li strong { font-size: .75rem; }
.experience-screen li small { color: var(--slate-500); font-size: .6rem; }
.experience-screen li > b { color: var(--navy-800); font-size: .7rem; }
.experience-screen > footer { min-height: 3rem; padding: .7rem 1.4rem; display: flex; align-items: center; gap: .4rem; color: var(--slate-500); font-size: .58rem; }
.experience-screen > footer span { margin-right: auto; }
.experience-screen > footer i { width: .45rem; height: .45rem; background: var(--ice-200); border-radius: 50%; }
.experience-screen > footer i:first-of-type { background: var(--green-500); }

.journey-section { width: min(calc(100% - 2.5rem), 1320px); margin: 0 auto clamp(5rem, 9vw, 9rem); color: var(--white); background: var(--navy-950); box-shadow: var(--shadow-deep); }
.journey-heading { padding: clamp(2rem, 5vw, 5rem); display: grid; grid-template-columns: 1.15fr .85fr; gap: 1rem clamp(3rem, 7vw, 7rem); align-items: end; background: radial-gradient(circle at 88% 18%, rgba(0, 169, 87, .22), transparent 30%); }
.journey-heading .eyebrow { grid-column: 1 / -1; color: var(--green-400); }
.journey-heading h2 { margin: 0; font-size: var(--text-2xl); }
.journey-heading > p:last-child { margin: 0 0 .4rem; color: #adbdca; }
.journey-tabs { display: grid; grid-template-columns: repeat(4, 1fr); border-block: 1px solid rgba(255, 255, 255, .12); background: #061a2e; }
.journey-panel { min-height: 610px; padding: clamp(2rem, 5vw, 5rem); display: grid; grid-template-columns: .64fr 1.36fr; gap: clamp(2.5rem, 6vw, 6rem); align-items: center; background: linear-gradient(135deg, #04111f, #08243e); }
.journey-panel[hidden] { display: none; }
.journey-intro h3 { margin-bottom: 1.2rem; font-size: var(--text-xl); }
.journey-intro > p:not(.eyebrow) { color: #adbdca; }
.journey-controls { margin-top: 1.8rem; display: flex; flex-wrap: wrap; gap: .7rem; }
.journey-controls button { min-height: 2.8rem; padding: .65rem .9rem; color: var(--white); background: transparent; border: 1px solid rgba(255, 255, 255, .22); font-size: .7rem; font-weight: 800; }
.journey-controls button:first-child { color: var(--navy-950); background: var(--green-400); border-color: var(--green-400); }
.journey-controls button.running { color: var(--white); background: var(--navy-800); border-color: var(--green-400); }
.journey-workspace { position: relative; display: grid; grid-template-columns: minmax(230px, .8fr) minmax(280px, 1.2fr); border: 1px solid rgba(255, 255, 255, .14); transform-style: preserve-3d; transform: perspective(1600px) rotateY(-11deg) rotateX(4deg); }
.journey-workspace::before { content: ""; position: absolute; inset: 0; border: 1px solid rgba(37, 199, 121, .35); background: rgba(0, 169, 87, .12); transform: translate3d(1.5rem, 1.6rem, -70px); pointer-events: none; }
.journey-result { transform: translateZ(24px); box-shadow: -1.5rem 2.5rem 4rem rgba(2, 13, 25, .5); }
.journey-result.flip-out { animation: card-flip-out 260ms ease-in forwards; }
.journey-result.flip-in { animation: card-flip-in 560ms cubic-bezier(.16, 1, .3, 1) both; }
.journey-steps { transform: translateZ(24px); padding: .8rem; display: grid; align-content: center; gap: .45rem; background: #061a2e; }
.journey-steps button { position: relative; min-height: 5.35rem; padding: .85rem 3.6rem .85rem 3.3rem; display: grid; align-content: center; text-align: left; color: #aebdca; background: transparent; border: 1px solid transparent; }
.journey-steps button::after { content: ""; position: absolute; top: 50%; left: 1.28rem; bottom: -1.15rem; width: 1px; background: rgba(255, 255, 255, .14); }
.journey-steps button:last-child::after { display: none; }
.journey-steps button > span { position: absolute; top: 50%; left: .65rem; width: 1.3rem; height: 1.3rem; display: grid; place-items: center; color: #8397a8; border: 1px solid #4a6276; border-radius: 50%; font-size: .48rem; transform: translateY(-50%); z-index: 1; }
.journey-steps button strong { color: var(--white); font-size: .72rem; }
.journey-steps button small { margin-top: .2rem; color: #879aaa; font-size: .55rem; line-height: 1.35; }
.journey-steps button:hover, .journey-steps button.active { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .14); }
.journey-steps button.active > span { color: var(--navy-950); background: var(--green-400); border-color: var(--green-400); }
.journey-steps button.complete > span { color: var(--white); background: var(--green-600); border-color: var(--green-600); }
.journey-steps button > .switch { position: absolute; top: 50%; right: .75rem; width: 2.1rem; height: 1.15rem; transform: translateY(-50%); }
.journey-steps button > .switch i { width: .84rem; height: .84rem; }
.journey-steps button.active > .switch i, .journey-steps button.complete > .switch i { transform: translateX(.95rem); }
.journey-result { min-height: 430px; display: grid; grid-template-rows: auto 1fr auto; color: var(--ink); background: var(--white); }
.journey-result header { min-height: 4rem; padding: .85rem 1rem; display: flex; align-items: center; gap: .7rem; border-bottom: 1px solid var(--line); }
.journey-result header img { width: 1.9rem; height: 1.9rem; }
.journey-result header span { display: grid; line-height: 1.15; }
.journey-result header strong { color: var(--navy-900); font-size: .65rem; }
.journey-result header small { color: var(--slate-500); font-size: .52rem; }
.journey-result header > b { margin-left: auto; padding: .35rem .5rem; color: #08743d; background: var(--green-100); font-size: .58rem; }
.journey-result-state { padding: clamp(1.6rem, 4vw, 3rem); display: grid; align-content: center; background: radial-gradient(circle at 80% 20%, var(--green-100), transparent 42%); }
.journey-result-state > small { color: var(--green-600); font-size: .56rem; font-weight: 800; letter-spacing: .12em; }
.journey-result-state > strong { margin: .8rem 0; color: var(--navy-950); font-family: var(--font-display); font-size: clamp(2rem, 4vw, 3.7rem); line-height: .98; letter-spacing: -.05em; }
.journey-result-state > p { max-width: 34ch; color: var(--slate-700); font-size: .76rem; }
.journey-result footer { min-height: 3.5rem; padding: .8rem 1rem; display: flex; align-items: center; gap: .6rem; border-top: 1px solid var(--line); }
.journey-result footer span { color: var(--navy-900); font-size: .65rem; font-weight: 800; }
.journey-result footer i { margin-left: auto; width: .45rem; height: .45rem; background: var(--green-500); border-radius: 50%; }
.journey-result footer small { color: var(--slate-500); font-size: .55rem; }

.configurator-section { width: min(calc(100% - 2.5rem), 1280px); margin: 0 auto; padding-block: clamp(5rem, 9vw, 9rem); }
.configurator-heading { margin-bottom: 3rem; display: grid; grid-template-columns: 1.1fr .9fr; gap: 1rem clamp(2rem, 6vw, 6rem); align-items: end; }
.configurator-heading .eyebrow { grid-column: 1 / -1; margin-bottom: 0; }
.configurator-heading h2 { margin: 0; font-size: var(--text-2xl); }
.configurator-heading > p { margin: 0 0 .4rem; color: var(--slate-700); }
.configurator-shell { display: grid; grid-template-columns: .86fr 1.14fr; gap: clamp(1.5rem, 4vw, 4rem); align-items: start; }
.configurator-inputs { padding: clamp(1.4rem, 3vw, 2.4rem); display: grid; gap: 1.35rem; background: var(--white); border: 1px solid var(--line); box-shadow: var(--shadow-md); }
.configurator-field { min-width: 0; margin: 0; padding: 0; border: 0; }
.configurator-field > label, .configurator-field > legend { width: 100%; margin-bottom: .5rem; display: flex; align-items: baseline; justify-content: space-between; color: var(--navy-900); font-size: .72rem; font-weight: 800; }
.configurator-field label small, .configurator-field legend small { color: var(--slate-500); font-size: .55rem; font-weight: 600; }
.configurator-field > input, .configurator-field > select { width: 100%; min-height: 3.25rem; padding: .7rem .85rem; color: var(--navy-900); background: var(--ice-50); border: 1px solid var(--ice-200); border-radius: 0; font-size: .78rem; }
.configurator-field > input:focus, .configurator-field > select:focus { border-color: var(--green-500); box-shadow: 0 0 0 3px rgba(0, 169, 87, .1); outline: 0; }
.configurator-field > span { margin-top: .35rem; display: block; color: var(--slate-500); font-size: .55rem; }
.choice-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: .45rem; }
.choice-row label, .priority-grid label { position: relative; cursor: pointer; }
.choice-row input, .priority-grid input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.choice-row span { min-height: 3rem; display: grid; place-items: center; color: var(--slate-700); background: var(--ice-50); border: 1px solid var(--ice-200); font-size: .72rem; font-weight: 800; transition: color var(--ease), background var(--ease), border-color var(--ease); }
.choice-row input:checked + span { color: var(--white); background: var(--navy-900); border-color: var(--navy-900); }
.choice-row input:focus-visible + span, .priority-grid input:focus-visible + span { outline: 3px solid var(--green-500); outline-offset: 2px; }
.priority-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .45rem; }
.priority-grid span { min-height: 3.15rem; padding: .65rem .7rem .65rem 2.2rem; display: flex; align-items: center; color: var(--slate-700); background: var(--ice-50); border: 1px solid var(--ice-200); font-size: .62rem; font-weight: 700; line-height: 1.3; transition: border-color var(--ease), background var(--ease); }
.priority-grid span::before { content: ""; position: absolute; left: .75rem; width: .78rem; height: .78rem; border: 1px solid var(--slate-500); }
.priority-grid input:checked + span { color: var(--navy-900); background: var(--green-100); border-color: var(--green-500); }
.priority-grid input:checked + span::before { background: var(--green-500); border-color: var(--green-500); box-shadow: inset 0 0 0 2px var(--green-100); }
.configurator-result { position: sticky; top: 6rem; overflow: hidden; color: var(--white); background: var(--navy-950); box-shadow: var(--shadow-deep); }
.configurator-result > header { min-height: 5rem; padding: 1rem 1.3rem; display: flex; align-items: center; gap: .8rem; border-bottom: 1px solid rgba(255, 255, 255, .13); }
.configurator-result > header img { width: 2.35rem; height: 2.35rem; filter: brightness(0) invert(1); }
.configurator-result > header span { display: grid; line-height: 1.15; }
.configurator-result > header small { color: #91a5b7; font-size: .5rem; font-weight: 800; letter-spacing: .08em; }
.configurator-result > header strong { font-size: .75rem; }
.configurator-result > header > b { margin-left: auto; padding: .35rem .5rem; color: var(--green-400); border: 1px solid rgba(37, 199, 121, .35); font-size: .52rem; letter-spacing: .08em; }
.configurator-plan { padding: clamp(1.4rem, 3vw, 2.5rem); display: flex; align-items: end; justify-content: space-between; gap: 1rem; background: radial-gradient(circle at 85% 20%, rgba(0, 169, 87, .2), transparent 36%); }
.configurator-plan > div { display: grid; }
.configurator-plan small, .configurator-output section > small { color: var(--green-400); font-size: .54rem; font-weight: 800; letter-spacing: .11em; }
.configurator-plan > div > strong { font-family: var(--font-display); font-size: clamp(2.6rem, 6vw, 5rem); line-height: .95; letter-spacing: -.06em; }
.configurator-plan > div > span { margin-top: .55rem; color: #adbdca; font-size: .68rem; }
.configurator-plan > p { margin: 0; white-space: nowrap; }
.configurator-plan > p b { font-family: var(--font-display); font-size: 1.5rem; }
.configurator-plan > p span { color: #91a5b7; font-size: .58rem; }
.configurator-reason { margin: 0; padding: 0 clamp(1.4rem, 3vw, 2.5rem) 1.4rem; color: #b8c6d2; font-size: .72rem; }
.configurator-insight { margin: 0 clamp(1.4rem, 3vw, 2.5rem) 1.6rem; padding: .85rem 1rem; display: flex; align-items: center; gap: .75rem; color: var(--navy-950); background: var(--green-100); }
.configurator-insight > span { color: var(--green-600); }
.configurator-insight p { margin: 0; display: grid; }
.configurator-insight small { color: #08743d; font-size: .48rem; font-weight: 800; letter-spacing: .1em; }
.configurator-insight strong { font-size: .62rem; }
.configurator-output { margin: 0 clamp(1.4rem, 3vw, 2.5rem); display: grid; grid-template-columns: 1fr 1fr; border-block: 1px solid rgba(255, 255, 255, .13); }
.configurator-output section { min-width: 0; padding: 1.2rem 0; }
.configurator-output section:first-child { padding-right: 1rem; border-right: 1px solid rgba(255, 255, 255, .13); }
.configurator-output section:nth-child(2) { padding-left: 1rem; }
.configurator-output section:last-child { grid-column: 1 / -1; border-top: 1px solid rgba(255, 255, 255, .13); }
.configurator-output section > strong, .configurator-output section > span { display: block; }
.configurator-output section > strong { margin-top: .4rem; font-size: .72rem; }
.configurator-output section > span { margin-top: .25rem; color: #91a5b7; font-size: .56rem; }
.configurator-modules { margin-top: .45rem; display: flex; flex-wrap: wrap; gap: .3rem; }
.configurator-modules span { padding: .25rem .4rem; color: #c9d5df; background: rgba(255, 255, 255, .07); font-size: .5rem; }
.configurator-output ol { margin: .65rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; list-style: none; counter-reset: rollout; }
.configurator-output li { color: #c9d5df; font-size: .55rem; counter-increment: rollout; }
.configurator-output li::before { content: "0" counter(rollout); margin-right: .35rem; color: var(--green-400); font-weight: 800; }
.configurator-result > .button { margin: 1.5rem clamp(1.4rem, 3vw, 2.5rem) 2rem; background: var(--green-500); border-color: var(--green-500); }
.configurator-result[data-plan="professional"] .configurator-plan { background: radial-gradient(circle at 85% 20%, rgba(7, 87, 180, .34), transparent 40%); }
.configurator-result[data-plan="elite"] .configurator-plan { background: radial-gradient(circle at 85% 20%, rgba(37, 199, 121, .32), transparent 42%), linear-gradient(135deg, transparent, rgba(255, 255, 255, .04)); }

.capability-editorial { display: grid; grid-template-columns: 1.45fr .55fr; gap: 1rem; }
.capability-editorial > article { position: relative; padding: 2.2rem; background: var(--white); border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.capability-editorial > article:not(.capability-primary) { min-height: 260px; padding-top: 5.5rem; display: flex; flex-direction: column; justify-content: flex-end; }
.capability-editorial .capability-primary { grid-row: span 2; min-height: 540px; display: grid; grid-template-columns: .9fr 1.1fr; align-items: end; gap: 2rem; overflow: hidden; color: var(--white); background: var(--navy-900); border-radius: var(--radius-lg) 0 0 var(--radius-lg); }
.cap-number { position: absolute; top: 1.55rem; right: 1.8rem; color: var(--green-500); font-family: var(--font-display); font-size: clamp(1.35rem, 2.2vw, 2rem); font-weight: 800; line-height: 1; }
.capability-editorial > article:not(.capability-primary) h3 { max-width: calc(100% - 4.75rem); }
.capability-editorial h3 { margin-bottom: .8rem; font-size: var(--text-xl); }
.capability-editorial p { color: var(--slate-500); }
.capability-primary p { color: #bdc9d4; }
.capability-primary a { display: inline-flex; align-items: center; gap: .45rem; color: var(--green-400); text-decoration: none; font-size: var(--text-sm); font-weight: 800; }
.mini-patient { align-self: center; padding: 1.2rem; color: var(--ink); background: var(--white); border-radius: var(--radius-md); box-shadow: var(--shadow-deep); transform: rotateY(-8deg) rotateX(3deg); }
.mini-patient header { display: flex; justify-content: space-between; margin-bottom: 1.4rem; color: var(--slate-500); font-size: var(--text-xs); }
.mini-patient header b { color: #08743d; }
.mini-patient > strong { font-size: var(--text-lg); }
.mini-patient > p { color: var(--slate-500); font-size: var(--text-xs); }
.mini-patient dl { margin: 1.5rem 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.mini-patient dl div { padding: .7rem; background: var(--ice-100); }
.mini-patient dt { color: var(--slate-500); font-size: .65rem; }
.mini-patient dd { margin: .2rem 0 0; font-size: .73rem; font-weight: 800; }

.ai-section { display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: clamp(3rem, 8vw, 8rem); padding: clamp(5rem, 9vw, 9rem) max(1.25rem, calc((100vw - var(--content)) / 2)); color: var(--white); background: var(--navy-950); perspective: 1200px; overflow: hidden; }
.ai-console { --rx: 0deg; --ry: 0deg; position: relative; padding: 2rem; background: #0c2944; border: 1px solid rgba(255, 255, 255, .15); box-shadow: 35px 45px 0 rgba(0, 169, 87, .12), var(--shadow-deep); transform: perspective(1400px) rotateX(calc(4deg + var(--rx))) rotateY(calc(12deg + var(--ry))); transform-style: preserve-3d; transition: transform 600ms cubic-bezier(.16, 1, .3, 1); }
.ai-console.is-tilting { transition-duration: 140ms; }
.ai-console::after { content: ""; position: absolute; inset: 0; border: 1px solid rgba(37, 199, 121, .35); transform: translate3d(1.4rem, 1.6rem, -60px); pointer-events: none; }
.ai-console header { display: flex; justify-content: space-between; color: var(--green-400); font-size: var(--text-xs); font-weight: 800; }
.ai-console header span { display: flex; gap: .5rem; }
.ai-console header b { color: #9eb0c0; font-weight: 600; }
.ai-console blockquote { margin: 3rem 0; font-size: var(--text-lg); font-weight: 600; line-height: 1.55; }
.ai-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.ai-actions span { padding: .45rem .7rem; color: #b8c9d7; border: 1px solid rgba(255, 255, 255, .15); font-size: var(--text-xs); }
.ai-copy p:not(.eyebrow), .ai-copy li { color: #b8c5d1; }
.line-list { margin: 1.8rem 0; padding: 0; list-style: none; }
.line-list li { padding: .65rem 0; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.ai-copy .text-link { color: var(--green-400); }

.signature-section { width: min(calc(100% - 2.5rem), var(--content)); margin: auto; padding-block: clamp(6rem, 11vw, 11rem); display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; gap: clamp(3rem, 8vw, 8rem); perspective: 1200px; }
.signature-copy > p:not(.eyebrow) { color: var(--slate-700); }
.careful-note { display: flex; gap: .7rem; padding-top: 1.2rem; border-top: 1px solid var(--line); font-size: var(--text-sm); }
.careful-note .icon { color: var(--green-500); margin-top: .15rem; }
.signature-stack { --rx: 0deg; --ry: 0deg; min-height: 390px; position: relative; transform-style: preserve-3d; transform: perspective(1400px) rotateX(calc(8deg + var(--rx))) rotateY(calc(-14deg + var(--ry))); transition: transform 600ms cubic-bezier(.16, 1, .3, 1); }
.signature-stack.is-tilting { transition-duration: 140ms; }
.signature-stack article { position: absolute; width: 78%; min-height: 160px; padding: 1.7rem; display: flex; flex-direction: column; justify-content: end; background: var(--white); border: 1px solid var(--line); box-shadow: var(--shadow-md); }
.signature-stack article:nth-child(1) { z-index: 3; left: 0; top: 0; transform: translateZ(140px) rotateY(6deg); }
.signature-stack article:nth-child(2) { z-index: 2; right: 0; top: 28%; transform: translateZ(60px) rotateY(-4deg); }
.signature-stack article:nth-child(3) { z-index: 1; left: 8%; bottom: 0; transform: translateZ(-30px) rotateY(3deg); }
.signature-stack small { color: var(--green-500); font-weight: 800; letter-spacing: .12em; }
.signature-stack strong { margin: .4rem 0; font-size: var(--text-lg); }
.signature-stack span { color: var(--slate-500); font-size: var(--text-sm); }

.workflow-section .section-heading { margin-inline: auto; text-align: center; }
.workflow-line { position: relative; margin: 4rem 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); list-style: none; }
.workflow-line::before { content: ""; position: absolute; top: 1.35rem; left: 8%; right: 8%; height: 1px; background: var(--ice-200); }
.workflow-line li { position: relative; display: grid; justify-items: center; text-align: center; }
.workflow-line li > b { z-index: 1; width: 2.7rem; height: 2.7rem; display: grid; place-items: center; margin-bottom: 1.3rem; color: var(--green-500); background: var(--ice-50); border: 1px solid var(--green-500); border-radius: 50%; font-size: var(--text-xs); }
.workflow-line li div { display: grid; }
.workflow-line li span { max-width: 28ch; color: var(--slate-500); font-size: var(--text-sm); }
.integration-wordmark { padding: 1.6rem 0; display: flex; justify-content: center; flex-wrap: wrap; gap: 1rem 2.3rem; border-block: 1px solid var(--line); color: var(--slate-500); font-family: var(--font-display); font-size: var(--text-sm); font-weight: 800; }
.integration-link { margin: 1.6rem 0 0; text-align: center; }

.pricing-section { max-width: 1280px; }
.pricing-compact { padding-top: 4rem; }
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; align-items: stretch; perspective: 1200px; }
.plan { --rx: 0deg; --ry: 0deg; position: relative; padding: 2rem; display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--line); box-shadow: var(--shadow-sm); transform: rotateX(var(--rx)) rotateY(var(--ry)) translateZ(0); transition: transform 500ms cubic-bezier(.16, 1, .3, 1), box-shadow var(--ease), border-color var(--ease); }
.plan.is-tilting { transition-duration: 140ms; }
.plan.hot { margin-block: -1rem; padding-block: 3rem; color: var(--white); background: var(--navy-900); border-color: var(--navy-900); box-shadow: var(--shadow-md); }
.plan.selected { outline: 3px solid var(--green-500); outline-offset: 4px; }
.plan .ribbon { position: absolute; top: .8rem; right: 1rem; color: var(--green-400); font-size: var(--text-xs); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.plan h2, .plan h3 { margin: 0; font-family: var(--font-display); font-size: var(--text-xl); letter-spacing: -.04em; }
.plan .tag { margin: .25rem 0 1.4rem; color: var(--slate-500); font-size: var(--text-sm); font-weight: 700; }
.plan.hot .tag, .plan.hot .blurb, .plan.hot .waiver, .plan.hot li { color: #b7c5d1; }
.price { font-family: var(--font-display); font-size: 2.6rem; font-weight: 800; letter-spacing: -.05em; line-height: 1; }
.price span { margin-left: .25rem; color: var(--slate-500); font-family: var(--font-body); font-size: var(--text-sm); font-weight: 600; letter-spacing: 0; }
.annual, .seats, .waiver { margin: .65rem 0 0; font-size: var(--text-xs); }
.annual { color: #08743d; font-weight: 800; }
.plan.hot .annual { color: var(--green-400); }
.seats { font-weight: 800; }
.waiver { color: var(--slate-500); }
.blurb { min-height: 8.2rem; margin: 1.4rem 0; padding-top: 1.4rem; color: var(--slate-700); border-top: 1px solid var(--line); font-size: var(--text-sm); }
.plan.hot .blurb { border-color: rgba(255, 255, 255, .14); }
.plan ul { margin: 0 0 1.8rem; padding: 0; list-style: none; flex: 1; }
.plan li { display: flex; gap: .55rem; margin: .65rem 0; color: var(--slate-700); font-size: var(--text-xs); line-height: 1.5; }
.plan li .icon { margin-top: .15rem; color: var(--green-500); }
.plan .button { width: 100%; }
.plan.hot .button { color: var(--navy-950); background: var(--green-400); border-color: var(--green-400); }
.plan-note { max-width: 960px; margin: 3.5rem auto 0; color: var(--slate-500); text-align: center; font-size: var(--text-xs); }

.security-band { padding: clamp(4rem, 7vw, 6rem); color: var(--white); background: var(--navy-900); box-shadow: 0 2rem 0 var(--ice-200); }
.security-band > div:first-child { max-width: 760px; }
.security-points { margin: 3rem 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.security-points article { border-top: 1px solid rgba(255, 255, 255, .18); padding-top: 1.5rem; }
.security-points .icon { color: var(--green-400); font-size: 1.35rem; }
.security-points h3 { margin: 1.2rem 0 .65rem; }
.security-points p { color: #b7c5d1; font-size: var(--text-sm); }
.security-band .text-link { color: var(--green-400); }
.faq-section { display: grid; grid-template-columns: .65fr 1.35fr; gap: 5rem; }
.faq-list details { border-top: 1px solid var(--line); }
.faq-list details:last-child { border-bottom: 1px solid var(--line); }
.faq-list summary { position: relative; padding: 1.4rem 2.5rem 1.4rem 0; cursor: pointer; font-weight: 800; list-style: none; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; position: absolute; top: 1.2rem; right: .2rem; color: var(--green-500); font-size: var(--text-lg); }
.faq-list details[open] summary::after { content: "−"; }
.faq-list details p { padding-right: 2rem; color: var(--slate-700); font-size: var(--text-sm); }

.final-cta { padding: 2rem 1.25rem clamp(5rem, 8vw, 8rem); perspective: 1200px; }
.cta-plane { --rx: 0deg; --ry: 0deg; width: min(100%, var(--content)); min-height: 330px; margin: auto; padding: clamp(2.5rem, 6vw, 5rem); display: flex; align-items: end; justify-content: space-between; gap: 3rem; color: var(--white); background: var(--navy-900); box-shadow: 0 1.2rem 0 var(--green-500), var(--shadow-deep); transform: rotateX(calc(6deg + var(--rx))) rotateY(var(--ry)); transition: transform 600ms cubic-bezier(.16, 1, .3, 1); }
.cta-plane.is-tilting { transition-duration: 140ms; }
.cta-plane > div { max-width: 760px; }
.cta-plane h2 { margin-bottom: 1rem; font-size: var(--text-2xl); }
.cta-plane p:not(.eyebrow) { margin-bottom: 0; color: #bac8d4; }
.site-footer { color: #d6e0e8; background: var(--navy-950); }
.footer-main { width: min(calc(100% - 2.5rem), var(--content)); margin: auto; padding: 4rem 0; display: grid; grid-template-columns: 2fr repeat(3, 1fr); gap: 3rem; }
.brand-footer { color: var(--white); }
.brand-footer small { color: #9dafbe; }
.footer-brand p { max-width: 32ch; margin-top: 1.2rem; color: #8fa2b3; font-size: var(--text-sm); }
.footer-main nav { display: flex; flex-direction: column; gap: .55rem; font-size: var(--text-sm); }
.footer-main nav strong { margin-bottom: .5rem; color: var(--white); }
.footer-main nav a { color: #9dafbe; text-decoration: none; }
.footer-main nav a:hover { color: var(--green-400); }
.footer-base { width: min(calc(100% - 2.5rem), var(--content)); margin: auto; padding: 1.3rem 0; display: flex; justify-content: space-between; border-top: 1px solid rgba(255, 255, 255, .1); color: #8195a6; font-size: var(--text-xs); }

.home-page, .interior-page { padding-bottom: 5.6rem; }
.home-page, .interior-page { padding-bottom: 6.8rem; }
body.rail-dismissed .home-page, body.rail-dismissed .interior-page { padding-bottom: 0; }
.sales-rail { position: fixed; z-index: 300; left: 50%; bottom: 0; width: min(100%, 1400px); display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: stretch; color: var(--white); background: linear-gradient(100deg, var(--navy-950), var(--navy-800)); border-top: 1px solid rgba(255, 255, 255, .14); box-shadow: 0 -24px 60px rgba(2, 13, 25, .35); transform: translateX(-50%); transition: transform 460ms cubic-bezier(.16, 1, .3, 1), opacity 300ms ease; }
.sales-rail.is-cut { animation: rail-cut 520ms cubic-bezier(.16, 1, .3, 1); }
.sales-rail.dismissed { opacity: 0; transform: translate(-50%, 110%); pointer-events: none; }
.sales-rail-brand { display: flex; align-items: center; gap: 1rem; padding: .9rem 2rem .9rem 1.4rem; color: var(--navy-950); background: var(--green-400); clip-path: polygon(0 0, 100% 0, calc(100% - 1.3rem) 100%, 0 100%); }
.sales-rail-brand img { width: 2.4rem; height: 2.4rem; }
.sales-rail-brand span { display: grid; gap: .25rem; padding-left: .9rem; line-height: 1.1; border-left: 1px solid rgba(4, 17, 31, .25); }
.sales-rail-brand strong { max-width: 22ch; font-family: var(--font-display); font-size: .68rem; line-height: 1.12; letter-spacing: .01em; }
.sales-rail-brand small { display: flex; align-items: center; gap: .35rem; color: var(--navy-900); font-size: .48rem; font-weight: 800; letter-spacing: .13em; }
.sales-rail-brand small::before { content: ""; width: .45rem; height: .45rem; background: var(--navy-950); border-radius: 50%; animation: status-pulse 1.6s ease-in-out infinite; }
.sales-stories { position: relative; min-height: 5.4rem; overflow: hidden; }
.sales-stories p { position: absolute; inset: 0; margin: 0; padding: .8rem 1.4rem .95rem; display: grid; align-content: center; gap: .15rem; opacity: 0; transform: translateX(110%); transition: opacity 380ms ease, transform 620ms cubic-bezier(.16, 1, .3, 1); pointer-events: none; }
.sales-stories p.reverse { transform: translateX(-110%); }
.sales-stories p.leaving { opacity: 0; transform: translateX(-110%); }
.sales-stories p.leaving.reverse { transform: translateX(110%); }
.sales-stories p.active { opacity: 1; transform: none; pointer-events: auto; }
@media (prefers-reduced-motion: reduce) { .sales-stories p, .sales-stories p.reverse, .sales-stories p.leaving, .sales-stories p.leaving.reverse { transform: none; transition: opacity 300ms ease; } }
.sales-stories small { display: flex; align-items: center; gap: .5rem; color: var(--green-400); font-size: .55rem; font-weight: 800; letter-spacing: .14em; }
.sales-stories small::before { content: ""; width: 1.4rem; height: 2px; background: var(--green-400); }
.sales-stories strong { overflow: hidden; max-width: 70ch; font-family: var(--font-display); font-size: clamp(.95rem, .85rem + .4vw, 1.3rem); line-height: 1.2; letter-spacing: -.01em; white-space: nowrap; text-overflow: ellipsis; }
.sales-rail-actions { display: flex; align-items: center; gap: 1rem; padding: 0 1rem 0 1.4rem; background: rgba(4, 17, 31, .55); border-left: 1px solid rgba(255, 255, 255, .1); }
.sales-story-count { display: flex; align-items: center; gap: .4rem; color: #8298ab; font-size: .58rem; font-weight: 800; letter-spacing: .08em; }
.sales-story-count b { color: var(--white); font-size: .95rem; }
.sales-story-count i { width: 1.4rem; height: 1px; background: rgba(255, 255, 255, .3); }
.sales-rail-nav { display: flex; gap: .35rem; }
.sales-rail-nav button, .sales-rail-dismiss { width: 2.3rem; height: 2.3rem; padding: 0; display: grid; place-items: center; color: #c5d2dd; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .2); border-radius: 50%; transition: color var(--ease), background var(--ease), border-color var(--ease); }
.sales-rail-nav button:hover, .sales-rail-dismiss:hover { color: var(--navy-950); background: var(--green-400); border-color: var(--green-400); }
.sales-rail-nav button[aria-pressed="true"] { color: var(--navy-950); background: var(--green-400); border-color: var(--green-400); }
.sales-rail-nav .when-paused, .sales-rail-nav button[aria-pressed="true"] .when-playing { display: none; }
.sales-rail-nav button[aria-pressed="true"] .when-paused { display: grid; }
.sales-rail-actions > a { display: inline-flex; align-items: center; gap: .4rem; padding: .6rem .95rem; color: var(--navy-950); background: var(--white); text-decoration: none; font-size: .68rem; font-weight: 800; white-space: nowrap; transition: background var(--ease); }
.sales-rail-actions > a:hover { background: var(--green-400); }
.sales-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; overflow: hidden; background: rgba(255, 255, 255, .14); }
.sales-progress i { display: block; width: 100%; height: 100%; background: var(--green-400); transform: scaleX(0); transform-origin: left; }
.sales-progress i.running { animation: bar-progress 6.5s linear forwards; }

.interior-hero { width: min(calc(100% - 2.5rem), var(--content)); margin: auto; padding: clamp(6rem, 11vw, 11rem) 0 clamp(4rem, 7vw, 7rem); }
.interior-hero h1 { max-width: 1000px; margin-bottom: 1.5rem; font-size: var(--text-2xl); }
.interior-hero > p:last-child { max-width: 760px; color: var(--slate-700); }
.feature-ledger { padding-top: 1rem; }
.feature-ledger > article { min-height: 380px; padding: 3.5rem 0; display: grid; grid-template-columns: 1.1fr .9fr; gap: 5rem; border-top: 1px solid var(--line); }
.feature-ledger article header { display: grid; grid-template-columns: auto 1fr; gap: 1.5rem; }
.feature-ledger article header > span { color: var(--green-500); font-family: var(--font-display); font-size: var(--text-xl); font-weight: 800; }
.feature-ledger h2 { font-size: var(--text-xl); }
.feature-ledger article > p { color: var(--slate-700); }
.feature-tags { grid-column: 2; margin: -8rem 0 0; padding: 0; display: flex; align-content: end; flex-wrap: wrap; gap: .5rem; list-style: none; }
.feature-tags li { padding: .4rem .65rem; background: var(--ice-100); border: 1px solid var(--ice-200); font-size: var(--text-xs); font-weight: 700; }
.feature-bridge { padding: clamp(5rem, 10vw, 9rem) max(1.25rem, calc((100vw - var(--content)) / 2)); display: grid; grid-template-columns: .45fr .55fr; align-items: center; gap: 4rem; color: var(--white); background: var(--navy-950); overflow: hidden; }
.feature-bridge h2 { font-size: var(--text-2xl); }
.feature-bridge .product-stage { --floor-line: rgba(255, 255, 255, .13); width: 620px; }
.feature-bridge .product-stage::before { display: none; }
.feature-bridge .stage-caption { color: #9eb0c0; }
.feature-bridge .stage-identity b { color: var(--white); }
.feature-bridge .stage-identity small { color: #9eb0c0; }

.integrations-hero { text-align: center; }
.integrations-hero h1, .integrations-hero > p:last-child { margin-inline: auto; }
.integration-ledger { padding-top: 1rem; display: grid; grid-template-columns: 1fr 1fr; }
.integration-group { min-height: 410px; padding: 3rem; border-top: 1px solid var(--line); border-left: 1px solid var(--line); background: var(--white); }
.integration-group:nth-child(5) { grid-column: 1 / -1; min-height: 320px; }
.integration-group header { display: grid; grid-template-columns: auto 1fr; gap: 1.2rem; }
.integration-group header > span { color: var(--green-500); font-family: var(--font-display); font-size: var(--text-lg); font-weight: 800; }
.integration-group h2 { font-size: var(--text-xl); }
.integration-group > p { color: var(--slate-700); }
.integration-group ul { margin: 1.8rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; }
.integration-group li { display: flex; align-items: center; gap: .35rem; padding: .45rem .65rem; background: var(--ice-100); border: 1px solid var(--ice-200); font-size: var(--text-xs); font-weight: 700; }
.integration-group li .icon { color: var(--green-500); }
.integration-principles { display: grid; grid-template-columns: 1fr 1fr; gap: 6rem; }
.integration-principles h2 { font-size: var(--text-2xl); }
.integration-principles > div:last-child { color: var(--slate-700); }

.security-hero { text-align: center; }
.security-hero h1, .security-hero > p:last-child { margin-inline: auto; }
.security-map { position: relative; display: grid; grid-template-columns: .75fr 1.25fr; gap: 5rem; align-items: center; }
.security-anchor { --rx: 0deg; --ry: 0deg; min-height: 430px; padding: 3rem; display: flex; flex-direction: column; justify-content: end; color: var(--white); background: var(--navy-900); box-shadow: 1.2rem 1.2rem 0 var(--green-500), var(--shadow-deep); transform: perspective(1400px) rotateX(calc(4deg + var(--rx))) rotateY(calc(-10deg + var(--ry))); transition: transform 600ms cubic-bezier(.16, 1, .3, 1); }
.security-anchor.is-tilting { transition-duration: 140ms; }
.security-anchor .icon { width: 3.5rem; height: 3.5rem; margin-bottom: auto; color: var(--green-400); }
.security-anchor h2 { font-size: var(--text-xl); }
.security-anchor p { color: #b7c5d1; }
.security-orbit { display: grid; grid-template-columns: 1fr 1fr; }
.security-orbit article { min-height: 230px; padding: 2rem; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.security-orbit span { color: var(--green-500); font-size: var(--text-xs); font-weight: 800; }
.security-orbit h3 { margin: 2rem 0 .7rem; }
.security-orbit p { color: var(--slate-500); font-size: var(--text-sm); }
.compliance-grid { padding-top: 1rem; display: grid; grid-template-columns: repeat(3, 1fr); }
.compliance-grid article { min-height: 250px; padding: 2rem; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.compliance-grid small { color: var(--green-500); font-weight: 800; letter-spacing: .1em; }
.compliance-grid h3 { margin: 2rem 0 .7rem; }
.compliance-grid p { color: var(--slate-500); font-size: var(--text-sm); }
.security-detail { display: grid; grid-template-columns: 1fr 1fr; gap: 6rem; }
.security-detail > div:last-child { color: var(--slate-700); }
.security-detail > div:last-child p { padding-bottom: 1.4rem; border-bottom: 1px solid var(--line); }
.provision-steps { padding-top: 3rem; }
.provision-steps ol { margin: 3rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); list-style: none; }
.provision-steps li { padding: 1.7rem; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.provision-steps li > span { color: var(--green-500); font-family: var(--font-display); font-size: var(--text-xl); font-weight: 800; }
.provision-steps li strong { display: block; margin: 2rem 0 .7rem; }
.provision-steps li p { color: var(--slate-500); font-size: var(--text-sm); }
.pricing-hero { text-align: center; }
.pricing-hero h1, .pricing-hero > p:last-child { margin-inline: auto; }
.pricing-faq { display: grid; grid-template-columns: .75fr 1.25fr; gap: 5rem; padding-top: 2rem; }

.signup-body { background: var(--navy-950); }
.signup-body .site-header { background: rgba(4, 17, 31, .92); border-color: rgba(255, 255, 255, .1); }
.signup-body .brand { color: var(--white); }
.signup-body .brand small { color: #9dafbe; }
.signup-body .nav-toggle > span:not(.sr-only) { background: var(--white); }
.signup-body .site-nav > a { color: #c4d0da; }
.signup-page { width: min(calc(100% - 2.5rem), var(--content)); margin: auto; padding: clamp(4rem, 8vw, 7rem) 0; display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(3rem, 7vw, 7rem); align-items: start; color: var(--white); }
.signup-context { position: sticky; top: 8rem; }
.back-link { color: var(--green-500); text-decoration: none; font-size: var(--text-sm); font-weight: 800; }
.signup-context .eyebrow { margin-top: 4rem; }
.signup-context h1 { font-size: var(--text-2xl); }
.signup-context > p:not(.eyebrow) { color: #b2c0cb; }
.selected-plan-preview { margin: 2.5rem 0; padding: 1.4rem; display: grid; border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .04); }
.selected-plan-preview small { color: var(--green-400); font-size: var(--text-xs); font-weight: 800; letter-spacing: .1em; }
.selected-plan-preview strong { font-size: var(--text-xl); }
.selected-plan-preview span { color: #9eb0c0; font-size: var(--text-sm); }
.signup-assurances { margin: 0; padding: 0; list-style: none; }
.signup-assurances li { display: flex; gap: .7rem; padding: .65rem 0; color: #b2c0cb; font-size: var(--text-sm); }
.signup-assurances .icon { color: var(--green-400); margin-top: .15rem; }
.signup-card { padding: clamp(2rem, 5vw, 4rem); color: var(--ink); background: var(--white); box-shadow: var(--shadow-deep); }
.signup-card header h2 { margin-bottom: .7rem; font-size: var(--text-xl); }
.signup-card header > p:last-child { color: var(--slate-500); font-size: var(--text-sm); }
.signup-card form { margin-top: 2rem; }
.website-field { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important; white-space: nowrap !important; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.field { margin-bottom: 1rem; }
.field label { display: block; margin-bottom: .4rem; font-size: var(--text-xs); font-weight: 800; }
.field label span { color: var(--slate-500); font-weight: 500; }
.field input, .field select, .field textarea { width: 100%; min-height: 3.1rem; padding: .7rem .8rem; background: var(--ice-50); border: 1px solid var(--ice-200); border-radius: .3rem; }
.field textarea { resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { background: var(--white); border-color: var(--green-500); outline: 2px solid rgba(0, 169, 87, .16); }
.terms-check { display: flex; align-items: flex-start; gap: .8rem; margin: 1rem 0; padding: 1rem; background: var(--ice-100); border: 1px solid var(--ice-200); font-size: var(--text-xs); line-height: 1.55; }
.terms-check input { width: 1.2rem; height: 1.2rem; margin-top: .15rem; flex: 0 0 auto; accent-color: var(--green-500); }
.terms-check a { color: var(--blue-600); font-weight: 800; }
.submit-button { width: 100%; margin-top: .5rem; border: 0; }
.submit-button:disabled { opacity: .6; cursor: wait; transform: none; }
.form-message { min-height: 1.6rem; margin-top: .8rem; font-size: var(--text-sm); font-weight: 700; }
.form-message.ok { color: #08743d; }
.form-message.err { color: #b42318; }

.legal-page, .thanks-page { background: var(--ice-100); }
.legal-document { width: min(calc(100% - 2.5rem), 860px); margin: 4rem auto 7rem; padding: clamp(2rem, 5vw, 4rem); background: var(--white); box-shadow: var(--shadow-md); }
.legal-document h1 { margin: 2rem 0; font-size: var(--text-2xl); }
.legal-document h2 { margin-top: 2.8rem; font-size: var(--text-lg); letter-spacing: -.02em; }
.legal-document p, .legal-document li { color: var(--slate-700); }
.legal-callout { padding: 1.4rem; background: var(--ice-100); border: 1px solid var(--ice-200); }
.thanks-card { width: min(calc(100% - 2.5rem), 680px); margin: 6rem auto 8rem; padding: clamp(2.5rem, 6vw, 5rem); background: var(--white); box-shadow: var(--shadow-deep); }
.thanks-card img { margin-bottom: 2rem; }
.thanks-card h1 { font-size: var(--text-2xl); }
.thanks-card > p:not(.eyebrow) { color: var(--slate-700); }
.thanks-card a { color: var(--blue-600); font-weight: 800; }

@media (min-width: 781px) and (max-height: 950px) {
  .home-hero { min-height: calc(100vh - 4.8rem); padding: 3rem 0 8rem; grid-template-columns: 1fr 1fr; gap: 3rem; }
  .hero-platform-lockup { margin-bottom: 1rem; }
  .hero-copy h1 { font-size: clamp(4rem, 5vw, 4.6rem); white-space: nowrap; }
  .product-stage { width: min(650px, 100%); }
}

@media (max-width: 1050px) {
  .home-hero { grid-template-columns: 1fr; }
  .hero-copy { max-width: 760px; }
  .hero-copy h1 { font-size: clamp(3.3rem, 11vw, 6.5rem); }
  .product-stage { width: min(820px, 100%); margin-inline: auto; }
  .plans { grid-template-columns: 1fr 1fr; }
  .plan:last-child { grid-column: 1 / -1; }
  .plan.hot { margin-block: 0; }
  .capability-editorial { grid-template-columns: 1fr 1fr; }
  .capability-editorial .capability-primary { grid-column: 1 / -1; grid-row: auto; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
  .ai-section, .signature-section, .feature-bridge { grid-template-columns: 1fr; }
  .ai-console { order: 2; }
  .feature-bridge .product-stage { width: min(720px, 100%); }
  .security-map { grid-template-columns: 1fr; }
  .security-anchor { min-height: 340px; }
  .experience-heading { grid-template-columns: auto 1fr; }
  .experience-heading > p { grid-column: 1 / -1; max-width: 760px; }
  .experience-panel { grid-template-columns: 1fr; }
  .experience-screen { width: min(760px, 100%); }
  .journey-panel { grid-template-columns: 1fr; }
  .journey-intro { max-width: 720px; }
  .configurator-shell { grid-template-columns: 1fr; }
  .configurator-result { position: static; }
  .sales-rail { grid-template-columns: auto auto 1fr auto; }
  .sales-rail-brand small { display: none; }
}

@media (max-width: 780px) {
  .home-hero { overflow-x: clip; }
  .product-stage { width: min(690px, 100%); order: -1; padding-inline: 1.5rem; }
  .nav-toggle { display: block; }
  .site-nav { position: absolute; top: calc(100% + 1px); left: 0; right: 0; padding: 1.2rem; display: none; align-items: stretch; flex-direction: column; gap: .25rem; background: var(--ice-50); border-bottom: 1px solid var(--line); box-shadow: var(--shadow-md); }
  .site-nav.is-open { display: flex; }
  .site-nav > a { min-height: 2.9rem; display: flex; align-items: center; padding: .5rem .8rem; }
  .site-nav .button { justify-content: center; margin-top: .5rem; color: var(--white); }
  .nav-toggle[aria-expanded="true"] > span:nth-child(1) { transform: translateY(.39rem) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] > span:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] > span:nth-child(3) { transform: translateY(-.39rem) rotate(-45deg); }
  .signup-body .site-nav { background: var(--navy-900); }
  .home-hero { padding-top: 2.5rem; }
  .trust-inner { grid-template-columns: 1fr; }
  .trust-inner p, .trust-inner p:last-child { border: 0; border-bottom: 1px solid rgba(255, 255, 255, .12); }
  .split-heading, .faq-section, .integration-principles, .security-detail, .pricing-faq, .signup-page { grid-template-columns: 1fr; gap: 2rem; }
  .capability-editorial { grid-template-columns: 1fr; }
  .capability-editorial .capability-primary { grid-column: auto; grid-template-columns: 1fr; min-height: 620px; }
  .mini-patient { width: 100%; }
  .plans { grid-template-columns: 1fr; }
  .plan:last-child { grid-column: auto; }
  .security-points { grid-template-columns: 1fr; }
  .workflow-line { grid-template-columns: 1fr; gap: 2rem; }
  .workflow-line::before { top: 0; bottom: 0; left: 1.35rem; right: auto; width: 1px; height: auto; }
  .workflow-line li { grid-template-columns: auto 1fr; justify-items: start; gap: 1.2rem; text-align: left; }
  .workflow-line li div { justify-items: start; }
  .footer-main { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
  .feature-ledger > article { grid-template-columns: 1fr; gap: 1.5rem; }
  .feature-tags { grid-column: auto; margin: 0; }
  .security-orbit { grid-template-columns: 1fr; }
  .compliance-grid { grid-template-columns: 1fr 1fr; }
  .provision-steps ol { grid-template-columns: 1fr 1fr; }
  .signup-context { position: static; }
  .signup-context .eyebrow { margin-top: 2.5rem; }
  .experience-tabs { overflow-x: auto; grid-template-columns: repeat(5, minmax(145px, 1fr)); scrollbar-width: thin; }
  .experience-tabs button { min-height: 4.5rem; }
  .experience-panel { min-height: 0; }
  .experience-panels { min-height: 0; }
  .journey-heading { grid-template-columns: 1fr; }
  .journey-tabs { overflow-x: auto; grid-template-columns: repeat(4, minmax(175px, 1fr)); scrollbar-width: thin; }
  .journey-panel { min-height: 0; }
  .journey-workspace { grid-template-columns: 1fr; }
  .journey-steps { grid-template-columns: 1fr 1fr; }
  .journey-steps button::after { display: none; }
  .configurator-heading { grid-template-columns: 1fr; }
  .configurator-heading .eyebrow { grid-column: auto; margin-bottom: 0; }
  .sales-rail-brand { display: none; }
  .sales-rail { grid-template-columns: minmax(0, 1fr) auto; }
  .sales-stories { min-height: 4.6rem; }
  .sales-stories strong { white-space: normal; font-size: .9rem; }
  .sales-story-count { display: none; }
  .home-page, .interior-page { padding-bottom: 5.6rem; }
}

@media (max-width: 520px) {
  .nav-shell, .hero, .experience-section, .journey-section, .configurator-section, .capabilities-section, .workflow-section, .pricing-section, .faq-section, .security-band, .signature-section, .feature-ledger, .integration-ledger, .integration-principles, .security-map, .compliance-grid, .security-detail, .provision-steps, .pricing-faq, .interior-hero, .signup-page, .footer-main, .footer-base { width: min(calc(100% - 1.5rem), var(--content)); }
  .brand small { display: none; }
  .nav-shell { min-height: 4.2rem; }
  .brand { gap: .75rem; }
  .brand span { gap: 0; padding-left: .75rem; }
  .brand img { width: 2.4rem; height: 2.4rem; }
  .brand strong { max-width: 23ch; font-size: .72rem; }
  .home-hero { min-height: auto; padding: 1rem 0 7rem; gap: 1.15rem; }
  .hero-system-status { margin-bottom: 1.3rem; }
  .hero-copy .eyebrow { margin-bottom: .85rem; }
  .hero-copy h1 { margin-bottom: 1.2rem; font-size: clamp(2.75rem, 12.8vw, 3.35rem); line-height: .92; }
  .hero-lede { margin-bottom: 1.35rem; font-size: .9rem; line-height: 1.55; }
  .hero-actions { margin-top: 0; align-items: stretch; flex-direction: column; }
  .hero-actions .button { width: 100%; }
  .product-stage { --base-rx: 8deg; --base-ry: -11deg; width: 100%; min-height: 260px; margin: 0 0 1rem; padding: 2.6rem .9rem 1rem 1.1rem; perspective: 900px; }
  .app-slab { transform: translate3d(.9rem, 1rem, -24px); }
  .app-slab::after { display: none; }
  .stage-caption { display: none; }
  .experience-tabs button > span:not(.switch) { display: none; }
  .experience-tabs button, .journey-tabs button { min-height: 4rem; padding: .8rem .9rem; gap: .5rem; }
  .experience-stage { --base-rx: 4deg; --base-ry: -9deg; }
  .experience-float-a { right: -2%; }
  .experience-float-b { left: -2%; }
  .journey-workspace { transform: perspective(1200px) rotateY(-5deg) rotateX(2deg); }
  .product-stage::before { inset: .2rem -.3rem; }
  .stage-atmosphere { inset: 0; }
  .stage-atmosphere i { inset: 15% 4%; }
  .product-stage { padding: 3.9rem .9rem 1rem 1rem; }
  .stage-identity { top: -3.3rem; left: 0; column-gap: .5rem; transform: translateZ(70px); }
  .stage-identity > span { width: 2.45rem; height: 2.45rem; }
  .stage-identity b { font-size: .82rem; }
  .stage-identity small { font-size: .42rem; }
  .app-window { height: auto; border-radius: .9rem; }
  .app-topbar { height: 2.55rem; padding: 0 .65rem; }
  .app-layout { min-height: 0; grid-template-columns: 2.3rem 1fr; }
  .app-rail { gap: .65rem; padding-top: .75rem; }
  .app-dashboard { padding: .8rem .8rem 3.6rem; }
  .app-heading { margin-bottom: .65rem; }
  .app-heading h2 { font-size: .82rem; }
  .app-heading button { display: none; }
  .metric-row { gap: .4rem; }
  .metric-row article { padding: .5rem; }
  .metric-row article:nth-child(3) { display: none; }
  .metric-row { grid-template-columns: repeat(2, 1fr); }
  .dashboard-grid { grid-template-columns: 1fr; gap: .4rem; margin-top: .4rem; }
  .activity-card { display: none; }
  .schedule-card, .activity-card { min-height: 118px; padding: .55rem; }
  .schedule-card li:nth-child(3) { display: none; }
  .schedule-card li { grid-template-columns: 1.8rem .4rem 1fr; gap: .25rem; padding: .3rem 0; }
  .mini-chart { height: 62px; padding-top: .4rem; }
  .depth-card { padding: .45rem .55rem; gap: .45rem; }
  .depth-card > span { width: 1.5rem; height: 1.5rem; }
  .depth-card small { display: none; }
  .depth-card strong { font-size: .55rem; line-height: 1.15; white-space: normal; max-width: 7rem; }
  .depth-card-ai { --z: 70px; top: 3.1rem; right: .4rem; }
  .depth-card-pay { --z: 60px; left: 2rem; bottom: 36%; }
  .depth-card-consent { display: none; }
  .screen-lower-third { left: 2.7rem; right: .5rem; bottom: .5rem; min-width: 0; max-width: none; }
  .lt-slab { width: .45rem; }
  .lt-text { padding: .35rem .6rem .4rem; }
  .lt-text small { font-size: .42rem; }
  .lt-text strong { font-size: .68rem; }
  .lt-count { padding: 0 .5rem; font-size: .5rem; }
  .stage-controls { margin: 1.4rem 0 0; }
  .stage-controls > button { width: 2.6rem; height: 2.6rem; }
  .stage-dots { flex: 1; justify-content: center; }
  .capability-editorial > article, .security-band, .plan, .signup-card { padding: 1.4rem; }
  .capability-editorial .capability-primary { min-height: 590px; }
  .ai-section { padding-inline: .75rem; }
  .ai-console { padding: 1.3rem; box-shadow: 12px 16px 0 rgba(0, 169, 87, .12); }
  .ai-console header { align-items: flex-start; flex-direction: column; gap: .5rem; }
  .signature-stack { min-height: 450px; }
  .signature-stack article { width: 90%; }
  .plans { gap: .75rem; }
  .plan .blurb { min-height: 0; }
  .cta-plane { padding: 2rem 1.4rem; align-items: stretch; flex-direction: column; justify-content: center; }
  .footer-main { grid-template-columns: 1fr; }
  .footer-brand { grid-column: auto; }
  .footer-base { flex-direction: column; gap: .4rem; }
  .provision-steps ol { grid-template-columns: 1fr; }
  .integration-ledger, .compliance-grid { grid-template-columns: 1fr; }
  .integration-group, .integration-group:nth-child(5) { grid-column: auto; min-height: 0; padding: 1.4rem; }
  .form-row { grid-template-columns: 1fr; gap: 0; }
  .legal-document { width: calc(100% - 1.5rem); padding: 1.4rem; }
  .experience-heading { grid-template-columns: 1fr; }
  .experience-heading > p { grid-column: auto; }
  .experience-tabs { overflow: visible; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .experience-tabs button:last-child { grid-column: 1 / -1; }
  .experience-brand { min-height: 180px; flex-direction: row; align-items: end; }
  .experience-brand span { margin-top: 0; }
  .experience-panel { padding: 1.4rem; }
  .experience-screen { transform: none; }
  .experience-metric { grid-template-columns: auto 1fr; }
  .experience-metric b { grid-column: 1 / -1; width: fit-content; }
  .journey-heading, .journey-panel { padding: 1.4rem; }
  .journey-tabs { overflow: visible; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .journey-steps { grid-template-columns: 1fr; }
  .journey-result-state > strong { font-size: 2.45rem; }
  .configurator-inputs { padding: 1.2rem; }
  .priority-grid { grid-template-columns: 1fr; }
  .configurator-plan { align-items: start; flex-direction: column; }
  .configurator-output { grid-template-columns: 1fr; }
  .configurator-output section:first-child { padding-right: 0; border-right: 0; }
  .configurator-output section:nth-child(2) { padding-left: 0; border-top: 1px solid rgba(255, 255, 255, .13); }
  .configurator-output section:last-child { grid-column: auto; }
  .configurator-output ol { grid-template-columns: 1fr; }
  .configurator-result > .button { display: flex; }
  .sales-rail { grid-template-columns: minmax(0, 1fr); }
  .sales-stories { min-height: 3.7rem; }
  .sales-stories p { padding: .55rem .9rem .6rem; }
  .sales-stories strong { font-size: .78rem; line-height: 1.25; }
  .sales-stories small { font-size: .48rem; }
  .sales-rail-actions { justify-content: space-between; gap: .4rem; padding: .35rem .7rem .55rem; border-left: 0; border-top: 1px solid rgba(255, 255, 255, .1); }
  .sales-story-count { display: flex; margin-right: auto; }
  .sales-story-count i { display: none; }
  .sales-rail-nav button, .sales-rail-dismiss { width: 2.15rem; height: 2.15rem; }
  .sales-rail-actions > a { padding: .5rem .6rem; }
  .sales-rail-actions > a span { display: none; }
  .home-page, .interior-page { padding-bottom: 7.8rem; }
}

/* The broadcast bar owns a separate viewport row, never overlaying the page.
   Content scrolls inside the upper row; dismissing releases its space. */
body.has-sales-rail { height: 100dvh; min-height: 0; padding-bottom: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; overflow: hidden; }
.has-sales-rail > .site-viewport { min-height: 0; overflow-y: auto; overflow-x: clip; scroll-behavior: smooth; scroll-padding: 6rem 0 1.5rem; }
.has-sales-rail > .sales-rail { position: relative; left: auto; bottom: auto; width: 100%; margin: 0 auto; transform: none; animation: none; box-shadow: 0 -5px 16px rgba(2, 13, 25, .12); }
.has-sales-rail > .sales-rail.dismissed { display: none; }
.has-sales-rail .sales-stories strong { white-space: normal; }
.home-hero .stage-caption { display: none; }
@media (min-width: 1051px) and (max-height: 950px) {
  .home-hero > .product-stage { zoom: .82; margin-inline: auto; }
}
@media (max-width: 520px) {
  .home-hero > .product-stage { zoom: .86; }
}
@media (min-width: 781px) and (max-width: 1050px) {
  .sales-rail { grid-template-columns: minmax(0, 1fr) auto; }
  .sales-rail-brand { display: none; }
}
@media (hover: none), (pointer: coarse) {
  .depth-card, .experience-float { animation-duration: 9s; }
}

@media (prefers-reduced-motion: reduce) {
  html, .has-sales-rail > .site-viewport { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .depth-card, .experience-float, .stage-atmosphere i, .sales-rail.is-cut { animation: none !important; }
  .lt-progress i.running, .sales-progress i.running { transform: scaleX(1); }
}

@keyframes orbit-spin { to { rotate: 1turn; } }
@keyframes status-pulse { 50% { box-shadow: 0 0 0 .55rem rgba(0, 169, 87, .04); } }

@keyframes logo-breathe {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-4px) scale(1.025); }
}

@keyframes panel-reveal {
  from { opacity: .25; transform: translateY(18px) scale(.992); }
  to { opacity: 1; transform: none; }
}

@keyframes screen-sheen {
  0%, 55% { transform: translateX(-160%) rotate(18deg); }
  78%, 100% { transform: translateX(430%) rotate(18deg); }
}

@keyframes bar-progress {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
@keyframes bar-rise {
  from { transform: scaleY(.15); opacity: .3; }
  to { transform: scaleY(1); opacity: 1; }
}
@keyframes card-float {
  0%, 100% { transform: translate3d(0, 0, var(--z)); }
  50% { transform: translate3d(0, -12px, var(--z)); }
}
@keyframes lt-wipe {
  from { clip-path: inset(0 100% 0 0); transform: translateX(-16px); }
  to { clip-path: inset(0 0 0 0); transform: none; }
}
@keyframes lt-rise {
  from { opacity: 0; transform: translateY(110%); }
  to { opacity: 1; transform: none; }
}
@keyframes stage-flip-out {
  to { opacity: .05; transform: rotateY(-42deg) translateX(-10%) translateZ(-220px); }
}
@keyframes stage-flip-in {
  from { opacity: .05; transform: rotateY(42deg) translateX(10%) translateZ(-220px); }
  to { opacity: 1; transform: none; }
}
@keyframes card-flip-out {
  to { opacity: .15; transform: translateZ(56px) rotateY(-84deg); }
}
@keyframes card-flip-in {
  from { opacity: .15; transform: translateZ(56px) rotateY(84deg); }
  to { opacity: 1; transform: translateZ(56px); }
}
@keyframes rail-cut {
  from { box-shadow: 0 -24px 60px rgba(2, 13, 25, .35), inset 0 3px 0 var(--green-400); }
  to { box-shadow: 0 -24px 60px rgba(2, 13, 25, .35), inset 0 0 0 var(--green-400); }
}

/* ── Smart EHR highlights, the enterprise strip, the e-Prescribing add-on ── */
.highlights-section { max-width: 1280px; }
.highlights-compact { padding-top: 3rem; }
.highlights-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.highlight { position: relative; padding: 2rem; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.highlight .cap-number { position: absolute; top: 1.4rem; right: 1.6rem; color: var(--slate-500); font-family: var(--font-display); font-weight: 800; letter-spacing: -.04em; }
.highlight small { display: inline-block; margin-bottom: .9rem; padding: .3rem .6rem; color: var(--navy-800); background: var(--ice-100); border-radius: 999px; font-size: var(--text-xs); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.highlight.standard small { color: #08743d; background: var(--green-100); }
.highlight h3 { margin: 0 0 .6rem; font-size: var(--text-xl); letter-spacing: -.03em; }
.highlight p { margin: 0; color: var(--slate-700); font-size: var(--text-sm); }
.plan .addon { margin: .45rem 0 0; color: var(--slate-500); font-size: var(--text-xs); font-weight: 700; }
.plan.hot .addon { color: #b7c5d1; }
.enterprise-strip { display: grid; grid-template-columns: 1.2fr 1fr auto; gap: 2rem; align-items: center; margin-top: 1.5rem; padding: 2rem 2.2rem; color: var(--white); background: var(--navy-800); border-radius: var(--radius-lg); }
.enterprise-strip .eyebrow { margin-bottom: .5rem; color: var(--green-400); }
.enterprise-strip h3 { margin: 0 0 .5rem; font-family: var(--font-display); font-size: var(--text-xl); letter-spacing: -.04em; }
.enterprise-strip p { margin: 0; color: #b7c5d1; font-size: var(--text-sm); }
.enterprise-strip ul { margin: 0; padding: 0; list-style: none; }
.enterprise-strip li { display: flex; gap: .55rem; margin: .45rem 0; font-size: var(--text-xs); }
.enterprise-strip li .icon { margin-top: .15rem; color: var(--green-400); }
.enterprise-strip .button { white-space: nowrap; color: var(--white); background: transparent; border-color: rgba(255, 255, 255, .35); }
.addon-check { margin-top: .4rem; }
.addon-check strong { color: var(--ink); }
.signup-total { margin: .6rem 0 0; color: #08743d; font-size: var(--text-sm); font-weight: 800; }
.signup-enterprise { margin-top: 1.4rem; color: var(--slate-500); font-size: var(--text-sm); }
.signup-enterprise a { color: var(--green-600); font-weight: 700; }
@media (max-width: 1050px) { .highlights-grid { grid-template-columns: repeat(2, 1fr); } .enterprise-strip { grid-template-columns: 1fr; } }
@media (max-width: 780px) { .highlights-grid { grid-template-columns: 1fr; } }

/* ── The pitch slideshow ────────────────────────────────────────────── */
.pitch-section { max-width: 1320px; }
.pitch-tier { display: inline-block; margin-left: .5rem; padding: .18rem .5rem; color: var(--navy-800); background: var(--ice-100); border-radius: 999px; font-size: .58rem; font-weight: 800; letter-spacing: .1em; vertical-align: middle; }
.pitch-show { position: relative; overflow: hidden; color: var(--white); background: var(--navy-900); border-radius: var(--radius-xl); box-shadow: var(--shadow-deep); }
.pitch-tabs { display: grid; grid-template-columns: repeat(9, 1fr); background: #061a2e; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.pitch-tabs button { min-height: 4.4rem; padding: .85rem .5rem; display: grid; justify-items: center; align-content: center; gap: .3rem; color: #93a6b8; background: transparent; border: 0; border-right: 1px solid rgba(255, 255, 255, .08); cursor: pointer; font: inherit; text-align: center; transition: color var(--ease), background var(--ease); }
.pitch-tabs button:last-child { border-right: 0; }
.pitch-tabs button span { color: var(--green-400); font-family: var(--font-display); font-size: .72rem; font-weight: 800; }
.pitch-tabs button b { font-size: .54rem; font-weight: 800; letter-spacing: .12em; line-height: 1.3; }
.pitch-tabs button:hover { color: var(--white); background: rgba(255, 255, 255, .05); }
.pitch-tabs button[aria-selected="true"] { color: var(--white); background: var(--navy-800); box-shadow: inset 0 -3px 0 var(--green-400); }
.pitch-slides { min-height: 30rem; }
.pitch-slide { min-height: 30rem; display: grid; grid-template-columns: 1.55fr .45fr; align-items: center; gap: clamp(2rem, 5vw, 4.5rem); padding: clamp(2rem, 4.5vw, 4rem); }
.pitch-slide[hidden] { display: none; }
.pitch-slide.is-active { animation: pitch-in .55s var(--ease-out, ease) both; }
.pitch-copy .eyebrow { margin-bottom: .9rem; color: var(--green-400); }
.pitch-copy h3 { margin: 0 0 1rem; font-family: var(--font-display); font-size: var(--text-2xl); letter-spacing: -.04em; line-height: 1.1; }
.pitch-lede { max-width: 56ch; margin: 0 0 1.6rem; color: #b7c5d1; font-size: var(--text-sm); }
.pitch-copy ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .6rem; }
.pitch-copy li { display: grid; grid-template-columns: auto 1fr; gap: .6rem; align-items: start; font-size: var(--text-sm); }
.pitch-copy li .icon { margin-top: .2rem; color: var(--green-400); }
.pitch-stat { position: relative; padding: 1.8rem 1.4rem; display: grid; justify-items: center; gap: .5rem; text-align: center; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .14); border-radius: var(--radius-lg); }
.pitch-stat strong { font-family: var(--font-display); font-size: clamp(1.9rem, 3.4vw, 2.9rem); font-weight: 800; letter-spacing: -.05em; line-height: 1; color: var(--green-400); }
.pitch-stat span { color: #b7c5d1; font-size: var(--text-xs); }
.pitch-stat i { margin-top: .6rem; color: #6d8195; font-family: var(--font-display); font-size: .78rem; font-style: normal; font-weight: 800; }
.pitch-stat i em { font-style: normal; opacity: .6; }
.pitch-controls { position: relative; display: flex; align-items: center; gap: .75rem; padding: .9rem 1.2rem 1.1rem; background: #061a2e; border-top: 1px solid rgba(255, 255, 255, .12); }
.pitch-nav, .pitch-play { width: 2.4rem; height: 2.4rem; display: inline-flex; align-items: center; justify-content: center; color: var(--white); background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16); border-radius: 50%; cursor: pointer; transition: background var(--ease); }
.pitch-nav:hover, .pitch-play:hover { background: rgba(255, 255, 255, .2); }
.pitch-dots { flex: 1; margin: 0; padding: 0; display: flex; gap: .4rem; list-style: none; }
.pitch-dots li { width: 100%; max-width: 3.2rem; height: 3px; background: rgba(255, 255, 255, .2); border-radius: 2px; transition: background var(--ease); }
.pitch-dots li.on { background: var(--green-400); }
.pitch-play .when-paused { display: none; }
.pitch-show.is-paused .pitch-play .when-playing { display: none; }
.pitch-show.is-paused .pitch-play .when-paused { display: inline-flex; }
.pitch-count { color: #6d8195; font-family: var(--font-display); font-size: .78rem; font-weight: 800; }
.pitch-count b { color: var(--white); }
.pitch-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; overflow: hidden; background: rgba(255, 255, 255, .14); }
.pitch-progress i { display: block; width: 100%; height: 100%; background: var(--green-400); transform: scaleX(0); transform-origin: left; }
.pitch-progress i.running { animation: bar-progress 7s linear forwards; }
@keyframes pitch-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ── Why it is called Smart EHR ─────────────────────────────────────── */
.why-smart { max-width: 1280px; width: min(calc(100% - 2.5rem), var(--content)); margin: auto; padding: clamp(4rem, 7vw, 6rem) 0; }
.why-heading { max-width: 780px; margin-bottom: 3rem; }
.why-heading h2 { margin-bottom: 1.2rem; font-size: var(--text-2xl); }
.why-heading p:last-child { color: var(--slate-700); }
.smart-modules { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.smart-module { padding: 1.8rem; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.smart-module h3 { margin: 0 0 .6rem; font-family: var(--font-display); font-size: var(--text-xl); letter-spacing: -.03em; }
.smart-line { margin: 0 0 .7rem; color: var(--ink); font-size: var(--text-sm); font-weight: 700; }
.smart-detail { margin: 0; color: var(--slate-500); font-size: var(--text-xs); line-height: 1.6; }
.smart-principles { margin-top: 2.5rem; padding: clamp(1.8rem, 4vw, 2.8rem); color: var(--white); background: var(--navy-900); border-radius: var(--radius-lg); }
.smart-principles h3 { margin: 0 0 1.6rem; font-family: var(--font-display); font-size: var(--text-xl); letter-spacing: -.03em; }
.smart-principles ol { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.3rem 2.4rem; }
.smart-principles li { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: start; }
.smart-principles li > span { color: var(--green-400); font-family: var(--font-display); font-size: .85rem; font-weight: 800; }
.smart-principles strong { display: block; margin-bottom: .35rem; font-size: var(--text-sm); }
.smart-principles p { margin: 0; color: #b7c5d1; font-size: var(--text-xs); line-height: 1.6; }

/* ── The exhaustive feature catalog ─────────────────────────────────── */
.feature-catalog { max-width: 1280px; }
.catalog-nav { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2.5rem; }
.catalog-nav a { padding: .45rem .85rem; color: var(--navy-800); background: var(--ice-100); border-radius: 999px; font-size: var(--text-xs); font-weight: 700; text-decoration: none; transition: background var(--ease), color var(--ease); }
.catalog-nav a:hover { color: var(--white); background: var(--navy-800); }
.catalog-groups { display: grid; gap: 1rem; }
.catalog-group { padding: clamp(1.6rem, 3vw, 2.2rem); background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); scroll-margin-top: 6rem; }
.catalog-group header { display: grid; grid-template-columns: auto 1fr; gap: 1.2rem; align-items: start; margin-bottom: 1.4rem; padding-bottom: 1.4rem; border-bottom: 1px solid var(--line); }
.catalog-group header .cap-number { position: static; color: var(--slate-500); font-family: var(--font-display); font-size: 1.4rem; font-weight: 800; letter-spacing: -.04em; }
.catalog-group h3 { margin: .2rem 0 .5rem; font-family: var(--font-display); font-size: var(--text-xl); letter-spacing: -.03em; }
.catalog-group header p:last-child { margin: 0; color: var(--slate-700); font-size: var(--text-sm); }
.catalog-group ul { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: .55rem 2rem; }
.catalog-group li { display: grid; grid-template-columns: auto 1fr; gap: .55rem; align-items: start; color: var(--slate-700); font-size: var(--text-sm); line-height: 1.5; }
.catalog-group li .icon { margin-top: .2rem; color: var(--green-500); }

@media (max-width: 1050px) {
  .pitch-tabs { grid-template-columns: repeat(5, 1fr); }
  .pitch-slide { grid-template-columns: 1fr; }
  .smart-modules { grid-template-columns: repeat(2, 1fr); }
  .smart-principles ol { grid-template-columns: 1fr; }
}
@media (max-width: 780px) {
  .pitch-tabs { grid-template-columns: repeat(3, 1fr); }
  .smart-modules { grid-template-columns: 1fr; }
  .catalog-group ul { grid-template-columns: 1fr; }
  .catalog-group header { grid-template-columns: 1fr; gap: .4rem; }
}
@media (prefers-reduced-motion: reduce) {
  .pitch-slide.is-active { animation: none; }
  .pitch-progress i.running { animation: none; transform: scaleX(1); }
}

/* ── The slideshow, staged in 3D ────────────────────────────────────── */
.pitch-stage { --rx: 0deg; --ry: 0deg; position: relative; perspective: 1600px; transform-style: preserve-3d; }
.pitch-stage .pitch-show { transform: perspective(1600px) rotateX(var(--rx)) rotateY(var(--ry)) translateZ(0); transform-style: preserve-3d; transition: transform 420ms var(--ease); }
.pitch-stage.is-tilting .pitch-show { transition-duration: 140ms; }
.pitch-glow { position: absolute; inset: -12% -6% -18%; z-index: 0; pointer-events: none; filter: blur(70px); opacity: .55; }
.pitch-glow i { position: absolute; display: block; border-radius: 50%; }
.pitch-glow i:first-child { top: -4%; left: 4%; width: 42%; height: 62%; background: rgba(14, 165, 164, .5); }
.pitch-glow i:last-child { right: 2%; bottom: -6%; width: 46%; height: 58%; background: rgba(14, 90, 138, .55); }
.pitch-floor { position: absolute; left: 8%; right: 8%; bottom: -2.2rem; height: 2.4rem; background: radial-gradient(60% 100% at 50% 0%, rgba(3, 29, 52, .34), transparent 72%); filter: blur(12px); }
.pitch-section .pitch-stage { margin-top: .5rem; }
.pitch-slide.is-active { animation: pitch-in-3d .6s var(--ease) both; }
@keyframes pitch-in-3d { from { opacity: 0; transform: translate3d(2.2rem, 10px, -80px) rotateY(7deg); } to { opacity: 1; transform: none; } }

/* ── Advertising economics and the ad itself ────────────────────────── */
.ads-section { max-width: 1280px; }
.econ-grid { display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; gap: 1rem; }
.econ-col { padding: 1.8rem; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.econ-col h3 { margin: 0 0 1.2rem; font-family: var(--font-display); font-size: var(--text-xl); letter-spacing: -.03em; }
.econ-col dl { margin: 0; display: grid; gap: .1rem; }
.econ-col dl > div { display: grid; grid-template-columns: 1fr auto; gap: 1rem; align-items: baseline; padding: .7rem 0; border-top: 1px solid var(--line); }
.econ-col dt { color: var(--slate-500); font-size: var(--text-xs); }
.econ-col dd { margin: 0; font-size: var(--text-sm); font-weight: 800; text-align: right; }
.econ-hot { color: var(--white); background: var(--navy-900); border-color: var(--navy-900); }
.econ-hot dl > div { border-color: rgba(255, 255, 255, .14); }
.econ-hot dt { color: #93a6b8; }
.econ-hot dd { color: var(--green-400); }
.econ-versus { align-self: center; padding: .5rem .8rem; color: var(--slate-500); font-family: var(--font-display); font-size: var(--text-sm); font-weight: 800; }
.econ-saving { display: grid; grid-template-columns: auto 1fr; gap: 1.2rem; align-items: center; max-width: 900px; margin: 1.6rem auto 0; padding: 1.2rem 1.5rem; background: var(--green-100); border-radius: var(--radius-lg); }
.econ-saving strong { color: #08743d; font-family: var(--font-display); font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 800; letter-spacing: -.04em; }
.econ-saving span { color: var(--slate-700); font-size: var(--text-sm); }
.ad-demo { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; margin-top: 3rem; }
.ad-frame { --rx: 0deg; --ry: 0deg; margin: 0; padding: 0 0 1rem; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-deep); overflow: hidden; transform: perspective(1200px) rotateX(var(--rx)) rotateY(var(--ry)); transition: transform 420ms var(--ease); }
.ad-chrome { display: grid; grid-template-columns: auto 1fr; gap: .7rem; align-items: center; padding: .9rem 1rem; }
.ad-avatar { width: 2.4rem; height: 2.4rem; display: grid; place-items: center; color: var(--white); background: var(--navy-900); border-radius: 50%; font-family: var(--font-display); font-size: .78rem; font-weight: 800; }
.ad-chrome b { display: block; font-size: var(--text-sm); }
.ad-chrome small { color: var(--slate-500); font-size: var(--text-xs); }
.ad-body { margin: 0 1rem .9rem; color: var(--ink); font-size: var(--text-sm); line-height: 1.5; }
.ad-media { position: relative; aspect-ratio: 16 / 9; display: grid; place-items: center; background: linear-gradient(135deg, #0b2b45, #0e5a8a 55%, #0ea5a4); }
.ad-play { width: 3.4rem; height: 3.4rem; display: grid; place-items: center; color: var(--navy-950); background: rgba(255, 255, 255, .92); border-radius: 50%; }
.ad-format { position: absolute; left: .7rem; bottom: .7rem; padding: .25rem .55rem; color: var(--white); background: rgba(3, 29, 52, .6); border-radius: 999px; font-size: .58rem; font-weight: 800; letter-spacing: .08em; }
.ad-cta { display: grid; grid-template-columns: 1fr auto; gap: 1rem; align-items: center; padding: .8rem 1rem; background: var(--ice-100); }
.ad-cta small { display: block; color: var(--slate-500); font-size: .6rem; letter-spacing: .08em; text-transform: uppercase; }
.ad-cta b { font-size: var(--text-sm); }
.ad-cta span { padding: .5rem .9rem; color: var(--navy-950); background: #dfe6ec; border-radius: 8px; font-size: var(--text-xs); font-weight: 800; }
.ad-note { margin: .8rem 1rem 0; color: var(--slate-500); font-size: .62rem; line-height: 1.5; }
.ad-steps h3 { margin: .4rem 0 1.4rem; font-family: var(--font-display); font-size: var(--text-2xl); letter-spacing: -.04em; }
.ad-steps ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 1rem; }
.ad-steps li { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: start; }
.ad-steps li > span { color: var(--green-500); font-family: var(--font-display); font-size: .85rem; font-weight: 800; }
.ad-steps strong { display: block; margin-bottom: .25rem; font-size: var(--text-sm); }
.ad-steps p { margin: 0; color: var(--slate-500); font-size: var(--text-xs); line-height: 1.6; }
.ad-own { display: grid; grid-template-columns: auto 1fr; gap: .7rem; align-items: center; margin: 1.6rem 0 0; padding: .9rem 1.1rem; background: var(--ice-100); border-radius: var(--radius-md); color: var(--navy-800); font-size: var(--text-xs); font-weight: 700; }
.ad-own .icon { color: var(--green-500); }

/* ── Phone, tablet, laptop ──────────────────────────────────────────── */
.devices-section { max-width: 1280px; }
.device-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; perspective: 1400px; }
.device-card { --rx: 0deg; --ry: 0deg; padding: 2rem; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); transform: perspective(1400px) rotateX(var(--rx)) rotateY(var(--ry)); transition: transform 420ms var(--ease), box-shadow var(--ease); }
.device-card:hover { box-shadow: var(--shadow-deep); }
.device-shell { display: grid; place-items: center; height: 9rem; margin-bottom: 1.4rem; background: radial-gradient(70% 80% at 50% 25%, var(--ice-100), transparent 75%); }
.device-screen { position: relative; display: grid; align-content: start; gap: .3rem; padding: .55rem; background: var(--navy-900); border: 2px solid var(--navy-800); box-shadow: 0 14px 30px rgba(3, 29, 52, .22); }
.device-screen b { display: block; height: .5rem; background: var(--green-400); border-radius: 2px; }
.device-screen i { display: block; height: .3rem; background: rgba(255, 255, 255, .28); border-radius: 2px; }
.device-phone .device-screen { width: 3.6rem; height: 7rem; border-radius: .7rem; }
.device-tablet .device-screen { width: 6.4rem; height: 8rem; border-radius: .6rem; }
.device-laptop .device-screen { width: 9.5rem; height: 6rem; border-radius: .45rem; }
.device-laptop .device-shell::after { content: ""; width: 12rem; height: .45rem; margin-top: .15rem; background: #cbd5e1; border-radius: 0 0 .4rem .4rem; }
.device-card h3 { margin: 0 0 .35rem; font-family: var(--font-display); font-size: var(--text-xl); letter-spacing: -.03em; }
.device-line { margin: 0 0 .7rem; color: var(--green-600); font-size: var(--text-sm); font-weight: 800; }
.device-detail { margin: 0; color: var(--slate-500); font-size: var(--text-xs); line-height: 1.6; }

/* ── Spotlights ─────────────────────────────────────────────────────── */
.spotlight-section { max-width: 1280px; }
.spotlight-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.spotlight { padding: clamp(1.6rem, 3vw, 2.2rem); background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.spotlight header { margin-bottom: 1.3rem; padding-bottom: 1.3rem; border-bottom: 1px solid var(--line); }
.spotlight h3 { margin: .2rem 0 .6rem; font-family: var(--font-display); font-size: var(--text-xl); letter-spacing: -.03em; }
.spotlight header p:last-child { margin: 0; color: var(--slate-700); font-size: var(--text-sm); }
.spotlight ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .55rem; }
.spotlight li { display: grid; grid-template-columns: auto 1fr; gap: .55rem; align-items: start; color: var(--slate-700); font-size: var(--text-sm); line-height: 1.5; }
.spotlight li .icon { margin-top: .2rem; color: var(--green-500); }

/* ── Illustrative scenarios ─────────────────────────────────────────── */
.voices-section { max-width: 1320px; }
.voices-note { display: grid; grid-template-columns: auto 1fr; gap: .7rem; align-items: start; color: var(--slate-500); font-size: var(--text-xs); line-height: 1.6; }
.voices-note .icon { margin-top: .15rem; color: var(--green-500); }
.voices-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .9rem; }
.voice { margin: 0; display: flex; flex-direction: column; gap: .9rem; padding: 1.3rem; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); }
.voice blockquote { margin: 0; flex: 1; color: var(--ink); font-size: var(--text-sm); line-height: 1.55; }
.voice blockquote::before { content: "\201C"; margin-right: .1rem; color: var(--green-500); font-family: var(--font-display); font-size: 1.2rem; font-weight: 800; }
.voice figcaption { display: grid; gap: .15rem; padding-top: .8rem; border-top: 1px solid var(--line); }
.voice strong { font-size: var(--text-xs); }
.voice span { color: var(--slate-500); font-size: .68rem; }
.voice em { justify-self: start; margin-top: .3rem; padding: .18rem .5rem; color: var(--navy-800); background: var(--ice-100); border-radius: 999px; font-size: .58rem; font-style: normal; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }

@media (max-width: 1050px) {
  .econ-grid { grid-template-columns: 1fr; }
  .econ-versus { justify-self: center; }
  .ad-demo { grid-template-columns: 1fr; }
  .device-grid { grid-template-columns: 1fr; }
  .spotlight-grid { grid-template-columns: 1fr; }
  .voices-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 780px) {
  .econ-saving { grid-template-columns: 1fr; text-align: center; }
  .voices-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .pitch-slide.is-active { animation: none; }
  .pitch-stage .pitch-show, .ad-frame, .device-card { transition: none; }
}

/* ── Investor brief (investors.<site> and /investors) ───────────────── */
.investor-page .inv-hero { width: min(calc(100% - 2.5rem), var(--content)); margin: auto; padding: clamp(4rem, 8vw, 7rem) 0 clamp(2rem, 4vw, 3rem); }
.investor-page h1 { max-width: 20ch; margin: 0 0 1.4rem; font-family: var(--font-display); font-size: clamp(2.1rem, 5.4vw, 3.6rem); font-weight: 800; letter-spacing: -.045em; line-height: 1.05; }
.inv-lede { max-width: 70ch; color: var(--slate-700); font-size: clamp(1rem, 1.6vw, 1.15rem); line-height: 1.6; }
.inv-pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-top: 2.6rem; }
.inv-pillars article { padding: 1.4rem; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.inv-pillars strong { display: block; margin-bottom: .5rem; color: var(--green-600); font-size: var(--text-sm); }
.inv-pillars p { margin: 0; color: var(--slate-700); font-size: var(--text-xs); line-height: 1.6; }
.inv-section { width: min(calc(100% - 2.5rem), var(--content)); max-width: 1280px; margin: auto; padding: clamp(3rem, 6vw, 5rem) 0; }
.inv-dark { width: 100%; max-width: none; padding-inline: clamp(1.25rem, 6vw, 5rem); color: var(--white); background: var(--navy-900); }
.inv-dark .section-heading > p:last-child, .inv-dark .split-heading > p { color: #b7c5d1; }
.inv-dark .eyebrow { color: var(--green-400); }
.inv-problems { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.inv-problem { padding: 1.8rem; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.inv-problem header { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: baseline; margin-bottom: .9rem; }
.inv-problem header span { color: var(--slate-500); font-family: var(--font-display); font-size: 1.1rem; font-weight: 800; }
.inv-problem h3 { margin: 0; font-family: var(--font-display); font-size: var(--text-xl); letter-spacing: -.03em; line-height: 1.2; }
.inv-body { margin: 0 0 .8rem; color: var(--slate-700); font-size: var(--text-sm); line-height: 1.6; }
.inv-source { margin: 0 0 1rem; padding-left: .8rem; border-left: 2px solid var(--line); color: var(--slate-500); font-size: .68rem; line-height: 1.5; }
.inv-sowhat { display: grid; grid-template-columns: auto 1fr; gap: .6rem; align-items: start; margin: 0; padding-top: .9rem; border-top: 1px solid var(--line); color: var(--ink); font-size: var(--text-sm); font-weight: 700; }
.inv-sowhat .icon { margin-top: .2rem; color: var(--green-500); }
.inv-why { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.4rem 2rem; }
.inv-why li { padding-top: 1rem; border-top: 1px solid rgba(255, 255, 255, .18); }
.inv-why strong { display: block; margin-bottom: .45rem; font-size: var(--text-sm); }
.inv-why span { color: #b7c5d1; font-size: var(--text-xs); line-height: 1.6; }
.inv-disclosure { display: grid; grid-template-columns: auto 1fr; gap: .7rem; align-items: start; margin: 0; padding: 1rem 1.2rem; background: var(--green-100); border-radius: var(--radius-md); color: var(--slate-700); font-size: var(--text-xs); line-height: 1.6; }
.inv-disclosure .icon { margin-top: .15rem; color: #08743d; }
.inv-traction { margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 2.4rem; }
.inv-traction > div { padding: 1.1rem 0; border-top: 1px solid var(--line); }
.inv-traction dt { margin-bottom: .35rem; font-size: var(--text-sm); font-weight: 800; }
.inv-traction dd { margin: 0; color: var(--slate-500); font-size: var(--text-xs); line-height: 1.6; }
.inv-moat { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.inv-moat article { padding: 1.6rem; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.inv-moat span { color: var(--green-500); font-family: var(--font-display); font-size: .8rem; font-weight: 800; }
.inv-moat h3 { margin: .5rem 0 .6rem; font-family: var(--font-display); font-size: var(--text-sm); letter-spacing: -.02em; line-height: 1.3; }
.inv-moat p { margin: 0; color: var(--slate-500); font-size: var(--text-xs); line-height: 1.6; }
.inv-anchors { margin: 0 0 2.5rem; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.inv-anchors > div { padding: 1.2rem; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); border-radius: var(--radius-md); }
.inv-anchors dt { color: #93a6b8; font-size: var(--text-xs); }
.inv-anchors dd { margin: .35rem 0; color: var(--green-400); font-family: var(--font-display); font-size: 1.15rem; font-weight: 800; letter-spacing: -.03em; }
.inv-anchors small { color: #6d8195; font-size: .6rem; line-height: 1.4; }
.inv-model { display: grid; grid-template-columns: .8fr 1.2fr; gap: 2rem; align-items: start; }
.inv-assumptions { padding: 1.6rem; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); border-radius: var(--radius-lg); }
.inv-assumptions h3 { margin: 0 0 1rem; font-family: var(--font-display); font-size: var(--text-sm); letter-spacing: .04em; text-transform: uppercase; }
.inv-assumptions ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .1rem; }
.inv-assumptions li { display: grid; grid-template-columns: 1fr auto; gap: 1rem; align-items: baseline; padding: .55rem 0; border-top: 1px solid rgba(255, 255, 255, .12); }
.inv-assumptions span { color: #93a6b8; font-size: var(--text-xs); }
.inv-assumptions b { color: var(--white); font-size: var(--text-xs); }
.inv-caveat { margin: 1.2rem 0 0; color: #b7c5d1; font-size: .68rem; line-height: 1.6; }
.inv-table-wrap { display: grid; gap: 1.6rem; }
.inv-table { width: 100%; border-collapse: collapse; }
.inv-table caption { margin-bottom: .7rem; color: #93a6b8; font-size: .68rem; text-align: left; line-height: 1.5; }
.inv-table th, .inv-table td { padding: .7rem .6rem; border-bottom: 1px solid rgba(255, 255, 255, .14); font-size: var(--text-xs); text-align: left; }
.inv-table thead th { color: var(--green-400); font-size: .6rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.inv-table tbody th { color: var(--white); font-weight: 700; }
.inv-table td { color: #b7c5d1; }
.inv-table .inv-value { color: var(--green-400); font-family: var(--font-display); font-weight: 800; }
.inv-gtm { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.4rem 2rem; }
.inv-gtm li { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: start; padding-top: 1.1rem; border-top: 1px solid var(--line); }
.inv-gtm li > span { color: var(--green-500); font-family: var(--font-display); font-size: .85rem; font-weight: 800; }
.inv-gtm strong { display: block; margin-bottom: .35rem; font-size: var(--text-sm); }
.inv-gtm p { margin: 0; color: var(--slate-500); font-size: var(--text-xs); line-height: 1.6; }
.inv-risks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.inv-risks article { padding: 1.4rem; background: var(--ice-100); border-radius: var(--radius-md); }
.inv-risks h3 { margin: 0 0 .5rem; font-family: var(--font-display); font-size: var(--text-sm); letter-spacing: -.02em; }
.inv-risks p { margin: 0; color: var(--slate-700); font-size: var(--text-xs); line-height: 1.6; }
.inv-cta { display: grid; grid-template-columns: 1fr auto; gap: 2rem; align-items: center; width: min(calc(100% - 2.5rem), var(--content)); max-width: 1280px; margin: 2rem auto; padding: clamp(2rem, 4vw, 3rem); color: var(--white); background: var(--navy-900); border-radius: var(--radius-xl); }
.inv-cta h2 { margin: .4rem 0 .6rem; font-family: var(--font-display); font-size: var(--text-2xl); letter-spacing: -.04em; }
.inv-cta p { margin: 0; color: #b7c5d1; font-size: var(--text-sm); }
.inv-cta .eyebrow { color: var(--green-400); }
.inv-legal { width: min(calc(100% - 2.5rem), var(--content)); max-width: 900px; margin: 0 auto 4rem; padding-top: 2rem; border-top: 1px solid var(--line); }
.inv-legal h2 { margin: 0 0 .8rem; font-size: var(--text-sm); letter-spacing: .06em; text-transform: uppercase; color: var(--slate-500); }
.inv-legal p { margin: 0; color: var(--slate-500); font-size: .68rem; line-height: 1.7; }

@media (max-width: 1050px) {
  .inv-pillars, .inv-anchors { grid-template-columns: repeat(2, 1fr); }
  .inv-problems, .inv-traction, .inv-risks, .inv-moat { grid-template-columns: 1fr; }
  .inv-model { grid-template-columns: 1fr; }
  .inv-cta { grid-template-columns: 1fr; }
}
@media (max-width: 780px) { .inv-pillars, .inv-anchors { grid-template-columns: 1fr; } }

/* ── A real 3D model: geometry in one shared space ──────────────────────
   Every surface is a plane. .scene-world carries preserve-3d, so the lid
   occludes the deck, the phone's sides are visible round its edge, and
   orbiting gives true parallax. Angles are custom properties so the JS in
   /site.js only ever writes two numbers. */
.scene-section { max-width: 1280px; }
.scene-compact { padding-top: 3rem; }
.scene-stage { --oy: -28deg; --ox: 16deg; position: relative; margin: 0; height: clamp(24rem, 46vw, 34rem);
  perspective: 1500px; perspective-origin: 50% 42%; cursor: grab; touch-action: pan-y;
  background: radial-gradient(70% 70% at 50% 34%, var(--ice-100), var(--ice-50) 60%, transparent 78%);
  border-radius: var(--radius-xl); overflow: hidden; }
.scene-stage:active { cursor: grabbing; }
.scene-stage:focus-visible { outline: 3px solid var(--green-500); outline-offset: 3px; }
.scene-world { position: absolute; inset: 0; transform-style: preserve-3d;
  transform: translateY(6%) rotateX(var(--ox)) rotateY(var(--oy)); transition: transform 420ms var(--ease); }
.scene-stage.is-dragging .scene-world { transition: none; }
.scene-world > * { position: absolute; transform-style: preserve-3d; }

/* The desk: one plane laid flat, and a soft contact patch on it. */
.scene-desk { left: 50%; top: 50%; width: 46rem; height: 30rem; margin: -15rem 0 0 -23rem;
  background: linear-gradient(160deg, #e7edf3, #cfd9e3 60%, #bcc8d4);
  transform: rotateX(90deg) translateZ(-7.2rem); box-shadow: inset 0 0 8rem rgba(3, 29, 52, .12); }
.scene-contact { left: 50%; top: 50%; width: 30rem; height: 14rem; margin: -7rem 0 0 -15rem;
  background: radial-gradient(50% 60% at 50% 50%, rgba(3, 29, 52, .34), transparent 72%);
  filter: blur(14px); transform: rotateX(90deg) translateZ(-7rem); }

.obj { left: 50%; top: 50%; }

/* Laptop: deck plane, hinge-rotated lid, front lip. */
.laptop { width: 24rem; height: 16rem; margin: -8rem 0 0 -12rem; }
.lap-deck { position: absolute; inset: 0; border-radius: .7rem;
  background: linear-gradient(170deg, #dfe6ec, #c3ced9 70%, #aebbc8);
  transform: rotateX(90deg) translateZ(-7rem) translateY(-8rem); box-shadow: 0 0 0 1px rgba(3, 29, 52, .16); }
.lap-keys { position: absolute; inset: 1.1rem 1.6rem 5.4rem; display: grid; grid-template-columns: repeat(12, 1fr); gap: .28rem; }
.lap-keys i { display: block; border-radius: .13rem; background: #98a7b5; box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .5); }
.lap-pad { position: absolute; left: 50%; bottom: 1.4rem; width: 7.4rem; height: 3.4rem; margin-left: -3.7rem;
  background: #b7c3ce; border: 1px solid #a2b0bd; border-radius: .3rem; }
.lap-lid { position: absolute; inset: 0; transform-origin: 50% 100%; transform: rotateX(-99deg) translateZ(0); }
.lap-screen { position: absolute; inset: 0; padding: .45rem; overflow: hidden; background: #050f1b;
  border: .45rem solid #1b2b3a; border-radius: .7rem; box-shadow: inset 0 0 2rem rgba(0, 0, 0, .65); backface-visibility: hidden; }
.lap-shell { position: absolute; inset: 0; display: grid; place-items: center;
  background: linear-gradient(200deg, #c9d4de, #9fb0bf); border-radius: .7rem; transform: rotateY(180deg); backface-visibility: hidden; }
.lap-shell span { color: rgba(3, 29, 52, .42); font-family: var(--font-display); font-size: 1.6rem; font-weight: 800; letter-spacing: .1em; }
.lap-front { position: absolute; left: 0; right: 0; bottom: 0; height: .5rem; background: #b3c0cc;
  transform: rotateX(90deg) translateZ(-7rem) translateY(-8rem) translateY(.25rem); }

/* Tablet: a leaning slab with a visible back and bottom edge. */
.tablet { width: 11rem; height: 14.5rem; margin: -6rem 0 0 8.5rem; transform: translateZ(4rem) rotateY(-24deg) rotateX(-68deg); }
.tab-face { position: absolute; inset: 0; padding: .6rem; overflow: hidden; background: #f7fafc;
  border: .35rem solid #20303f; border-radius: .8rem; backface-visibility: hidden; }
.tab-back { position: absolute; inset: 0; background: linear-gradient(200deg, #cbd6e0, #a4b4c2); border-radius: .8rem;
  transform: translateZ(-.5rem) rotateY(180deg); backface-visibility: hidden; }
.tab-edge-b { position: absolute; left: 0; right: 0; bottom: 0; height: .5rem; background: #8f9faf;
  transform-origin: 50% 100%; transform: rotateX(-90deg); }

/* Phone: a true box — face, back and four sides. */
.phone { width: 6.2rem; height: 12.4rem; margin: -1rem 0 0 -20rem; transform: translateZ(5rem) rotateY(22deg) rotateX(-72deg) rotateZ(-6deg); }
.ph-face { position: absolute; inset: 0; padding: .4rem; overflow: hidden; background: #050f1b;
  border: .3rem solid #16232f; border-radius: .85rem; backface-visibility: hidden; }
.ph-back { position: absolute; inset: 0; background: linear-gradient(200deg, #1d2b39, #0d1822); border-radius: .85rem;
  transform: translateZ(-.42rem) rotateY(180deg); backface-visibility: hidden; }
.ph-edge { position: absolute; background: #24323f; }
.ph-l, .ph-r { top: 0; bottom: 0; width: .42rem; }
.ph-l { left: 0; transform-origin: 0 50%; transform: rotateY(90deg); }
.ph-r { right: 0; transform-origin: 100% 50%; transform: rotateY(-90deg); }
.ph-t, .ph-b { left: 0; right: 0; height: .42rem; }
.ph-t { top: 0; transform-origin: 50% 0; transform: rotateX(-90deg); }
.ph-b { bottom: 0; transform-origin: 50% 100%; transform: rotateX(90deg); }

/* The real interface, at model scale. */
.ui-app { height: 100%; display: grid; grid-template-rows: auto 1fr; color: #cfe0ee; font-size: .34rem; line-height: 1.35; }
.ui-top { display: flex; align-items: center; gap: .3rem; padding: .28rem .4rem; background: #0a1a29; border-radius: .25rem .25rem 0 0; }
.ui-mark { display: grid; place-items: center; width: .82rem; height: .82rem; color: #041019; background: var(--green-400); border-radius: .18rem; font-size: .3rem; font-weight: 800; }
.ui-top b { font-size: .4rem; }
.ui-top em { width: .5rem; height: .16rem; margin-left: auto; background: rgba(255, 255, 255, .22); border-radius: .1rem; }
.ui-cols { display: grid; grid-template-columns: .9rem 1fr; gap: .3rem; padding: .3rem; min-height: 0; }
.ui-rail { display: grid; align-content: start; gap: .26rem; }
.ui-rail s { display: block; height: .3rem; background: rgba(255, 255, 255, .16); border-radius: .1rem; text-decoration: none; }
.ui-rail s.on { background: var(--green-400); }
.ui-main { display: grid; grid-template-columns: 1.1fr 1fr; grid-template-rows: auto auto; gap: .3rem; min-height: 0; }
.ui-box, .ui-day { margin: 0; padding: .3rem; list-style: none; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); border-radius: .22rem; }
.ui-box { grid-row: span 2; display: grid; align-content: start; gap: .22rem; }
.ui-box li { display: flex; justify-content: space-between; gap: .3rem; padding-bottom: .18rem; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.ui-box b { color: var(--green-400); }
.ui-panel, .ui-chart { display: grid; gap: .22rem; }
.ui-panel header, .ui-chart header { display: flex; justify-content: space-between; color: #8fa6ba; }
.ui-day { display: grid; gap: .2rem; }
.ui-day li { display: grid; grid-template-columns: .9rem 1fr; gap: .25rem; }
.ui-day i { color: var(--green-400); font-style: normal; }
.ui-day small { grid-column: 2; color: #7e93a6; }
.ui-bars { display: flex; align-items: flex-end; gap: .16rem; height: 1.5rem; padding: .25rem; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); border-radius: .22rem; }
.ui-bars i { flex: 1; background: linear-gradient(180deg, var(--green-400), #0b6f63); border-radius: .08rem .08rem 0 0; }
.ui-phone { height: 100%; display: grid; grid-template-rows: auto 1fr auto; gap: .25rem; color: #cfe0ee; font-size: .32rem; }
.ui-ph-top { display: grid; gap: .05rem; padding: .3rem; background: #0a1a29; border-radius: .3rem; }
.ui-ph-top b { font-size: .4rem; }
.ui-ph-top span { color: var(--green-400); }
.ui-ph-list { margin: 0; padding: 0; list-style: none; display: grid; align-content: start; gap: .22rem; }
.ui-ph-list li { display: grid; gap: .02rem; padding: .22rem .3rem; background: rgba(255, 255, 255, .05); border-radius: .2rem; }
.ui-ph-list small { color: #7e93a6; font-size: .26rem; letter-spacing: .06em; }
.ui-ph-scribe { display: flex; align-items: center; gap: .25rem; padding: .25rem .3rem; color: #041019; background: var(--green-400); border-radius: .25rem; font-weight: 800; }
.ui-ph-scribe i { width: .28rem; height: .28rem; background: #041019; border-radius: 50%; }
.ui-tab { height: 100%; display: grid; grid-template-rows: auto auto 1fr auto; gap: .3rem; color: var(--ink); font-size: .32rem; }
.ui-tab-top { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: .25rem; border-bottom: 1px solid #dbe3ea; }
.ui-tab-top b { font-size: .42rem; }
.ui-tab-top span { color: var(--green-600); }
.ui-tab p { margin: 0; color: var(--slate-500); }
.ui-sign { width: 100%; color: var(--navy-900); }
.ui-tab-foot { display: flex; justify-content: space-between; color: var(--slate-500); font-size: .28rem; }
.ui-tab-foot b { color: #08743d; }

.scene-controls { position: absolute; left: 50%; bottom: .9rem; transform: translateX(-50%);
  display: flex; align-items: center; gap: .5rem; padding: .35rem .5rem; background: rgba(255, 255, 255, .86);
  border: 1px solid var(--line); border-radius: 999px; box-shadow: var(--shadow-sm); backdrop-filter: blur(6px); }
.scene-controls button { min-height: 1.9rem; padding: .25rem .7rem; color: var(--navy-900); background: transparent;
  border: 0; border-radius: 999px; cursor: pointer; font: inherit; font-size: var(--text-xs); font-weight: 700; }
.scene-controls button:hover { background: var(--ice-100); }
.scene-hint { color: var(--slate-500); font-size: .62rem; letter-spacing: .06em; text-transform: uppercase; }
.scene-alt { max-width: 70ch; margin: 1.2rem auto 0; color: var(--slate-500); font-size: var(--text-xs); text-align: center; }

@media (max-width: 780px) {
  .scene-stage { height: 22rem; font-size: .8rem; }
  .scene-hint { display: none; }
}
@media (prefers-reduced-motion: reduce) { .scene-world { transition: none; } }

/* ── Name Your Own Price ─────────────────────────────────────────────────── */
.plan .nyop-link { display: inline-flex; align-items: center; gap: .4rem; margin: .2rem 0 .9rem; color: var(--blue-600); font-size: var(--text-xs); font-weight: 800; text-decoration: none; }
.plan .nyop-link .icon { width: 1rem; height: 1rem; }
.plan .nyop-link:hover { text-decoration: underline; }
.plan.hot .nyop-link { color: var(--green-400); }

.nyop-page { width: min(calc(100% - 2.5rem), var(--content)); margin: auto; padding: clamp(5rem, 9vw, 8rem) 0 clamp(4rem, 7vw, 7rem); }
.nyop-hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; perspective: 1400px; }

/* The lottery sign: a navy marquee with a ring of chasing bulbs, posed in 3D. */
.lotto-sign { --rx: 0deg; --ry: 0deg; --base-rx: 4deg; --base-ry: -8deg; position: relative; padding: clamp(2rem, 4vw, 3.4rem) clamp(1.8rem, 4vw, 3.2rem); color: var(--white); background: radial-gradient(120% 140% at 20% 0%, #123d62 0%, var(--navy-900) 45%, var(--navy-950) 100%); border: 6px solid #c9a227; border-radius: var(--radius-lg); box-shadow: var(--shadow-deep), inset 0 0 0 2px rgba(255, 255, 255, .06), 0 0 60px rgba(201, 162, 39, .25); transform: rotateX(calc(var(--base-rx) + var(--rx))) rotateY(calc(var(--base-ry) + var(--ry))); transform-style: preserve-3d; transition: transform 500ms cubic-bezier(.16, 1, .3, 1); }
.lotto-sign.is-tilting { transition-duration: 140ms; }
.lotto-sign::after { content: ""; position: absolute; inset: -6px; border-radius: inherit; box-shadow: 0 30px 80px rgba(2, 16, 30, .35); transform: translateZ(-40px); pointer-events: none; }
.lotto-bulbs { position: absolute; inset: 6px; border-radius: calc(var(--radius-lg) - 4px); pointer-events: none; }
.lotto-bulbs i { --n: 36; position: absolute; width: 10px; height: 10px; border-radius: 50%; background: #ffd75e; box-shadow: 0 0 10px #ffd75e, 0 0 22px rgba(255, 215, 94, .7); animation: bulb 1.35s steps(1) infinite; animation-delay: calc(var(--i) * -.075s); }
/* Nine bulbs a side, placed along the frame with nth-child arithmetic. */
.lotto-bulbs i:nth-child(-n+9) { top: -5px; left: calc(6% + (var(--i)) * 11%); }
.lotto-bulbs i:nth-child(n+10):nth-child(-n+18) { right: -5px; top: calc(6% + (var(--i) - 9) * 11%); }
.lotto-bulbs i:nth-child(n+19):nth-child(-n+27) { bottom: -5px; right: calc(6% + (var(--i) - 18) * 11%); }
.lotto-bulbs i:nth-child(n+28) { left: -5px; bottom: calc(6% + (var(--i) - 27) * 11%); }
@keyframes bulb { 0%, 55% { opacity: 1; } 56%, 100% { opacity: .22; box-shadow: none; } }
.lotto-kicker { margin: 0 0 .6rem; color: #ffd75e; font-size: var(--text-xs); font-weight: 800; letter-spacing: .18em; }
.lotto-sign h1 { margin: 0 0 1rem; font-size: clamp(2.6rem, 1.4rem + 5vw, 5.2rem); line-height: .95; letter-spacing: -.05em; text-transform: uppercase; text-shadow: 0 6px 30px rgba(0, 0, 0, .45); transform: translateZ(30px); }
.lotto-sub { margin: 0 0 1.2rem; color: #b7c5d1; font-size: var(--text-base); font-weight: 600; transform: translateZ(18px); }
.lotto-waived { display: inline-flex; align-items: center; gap: .55rem; margin: 0; padding: .6rem .9rem; color: var(--navy-950); background: var(--green-400); border-radius: var(--radius-sm); font-size: var(--text-sm); font-weight: 800; transform: translateZ(24px); }
.lotto-waived .icon { width: 1.1rem; height: 1.1rem; }
.nyop-lede .eyebrow { margin-bottom: .8rem; }
.nyop-rules { margin: 0; padding-left: 1.3rem; color: var(--slate-700); font-size: var(--text-sm); line-height: 1.6; }
.nyop-rules li { margin: .55rem 0; }
.nyop-rules strong { color: var(--ink); }

/* Listed price + the life simulator right under it. */
.nyop-listed { margin-top: clamp(3rem, 6vw, 5rem); perspective: 1400px; }
.nyop-plan-tabs { display: inline-flex; gap: .4rem; margin-bottom: 1rem; padding: .35rem; background: var(--ice-100); border: 1px solid var(--ice-200); border-radius: var(--radius-md); }
.nyop-plan-tab { display: grid; gap: .1rem; padding: .6rem 1rem; text-align: left; background: transparent; border: 1px solid transparent; border-radius: var(--radius-sm); }
.nyop-plan-tab strong { font-family: var(--font-display); font-size: var(--text-base); letter-spacing: -.02em; }
.nyop-plan-tab span { color: var(--slate-500); font-size: var(--text-xs); font-weight: 700; }
.nyop-plan-tab.is-active { color: var(--white); background: var(--navy-900); border-color: var(--navy-900); box-shadow: var(--shadow-sm); }
.nyop-plan-tab.is-active span { color: #b7c5d1; }
.nyop-plan-tab:disabled { cursor: not-allowed; opacity: .75; }
.listed-card { --rx: 0deg; --ry: 0deg; display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(1.5rem, 4vw, 3rem); padding: clamp(1.5rem, 4vw, 2.6rem); background: var(--white); border: 1px solid var(--line); box-shadow: var(--shadow-md); transform: rotateX(var(--rx)) rotateY(var(--ry)); transition: transform 500ms cubic-bezier(.16, 1, .3, 1); }
.listed-card.is-tilting { transition-duration: 140ms; }
.listed-price .price { display: flex; align-items: baseline; gap: .3rem; font-family: var(--font-display); font-size: clamp(3rem, 2rem + 4vw, 5.4rem); font-weight: 800; letter-spacing: -.05em; line-height: 1; }
.listed-price .price small { color: var(--slate-500); font-family: var(--font-body); font-size: var(--text-base); font-weight: 700; letter-spacing: 0; }
.listed-band { margin: 1rem 0 .8rem; color: var(--slate-700); font-size: var(--text-sm); }
.listed-price .waiver { display: flex; align-items: center; gap: .5rem; margin: 0; padding: .7rem .9rem; color: #08743d; background: var(--green-100); border-radius: var(--radius-sm); font-size: var(--text-sm); font-weight: 800; }
.listed-price .waiver .icon { width: 1.1rem; height: 1.1rem; flex: 0 0 auto; }
.life-sim { padding: 1.2rem 1.3rem; background: var(--ice-50); border: 1px solid var(--ice-200); border-radius: var(--radius-md); }
.sim-head .eyebrow { margin-bottom: .3rem; }
.sim-hint { margin: 0 0 1rem; color: var(--slate-500); font-size: var(--text-xs); }
.sim-controls { display: grid; grid-template-columns: 1.4fr 1fr; gap: 1rem; align-items: end; margin-bottom: 1rem; }
.sim-field { display: grid; gap: .3rem; font-size: var(--text-xs); font-weight: 800; }
.sim-field small { color: var(--slate-500); font-weight: 600; }
.sim-field input[type="range"] { width: 100%; accent-color: var(--green-500); }
.sim-field output { font-family: var(--font-display); font-size: var(--text-lg); letter-spacing: -.03em; }
.sim-toggle { display: inline-flex; padding: .25rem; background: var(--white); border: 1px solid var(--ice-200); border-radius: var(--radius-sm); }
.sim-toggle button { padding: .55rem .8rem; background: transparent; border: 0; border-radius: .3rem; font-size: var(--text-xs); font-weight: 800; }
.sim-toggle button.is-active { color: var(--white); background: var(--navy-900); }
.sim-toggle button:disabled { cursor: not-allowed; }
.sim-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: .3rem; }
.sim-month { --h: 40%; position: relative; height: 3.2rem; padding: 0; background: var(--white); border: 1px solid var(--ice-200); border-radius: .3rem; overflow: hidden; }
.sim-month::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: var(--h); background: var(--ice-200); transition: height 300ms cubic-bezier(.16, 1, .3, 1); }
.sim-month.y1.bills::before { background: var(--green-400); }
.sim-month.y23.bills::before { background: var(--navy-700); }
.sim-month span { position: relative; z-index: 1; font-size: .7rem; font-weight: 800; color: var(--slate-700); }
.sim-month.y23.bills span { color: var(--white); }
.sim-month.notice { box-shadow: inset 0 0 0 2px #e0a100; }
.sim-month.renewal { box-shadow: inset 0 0 0 2px var(--blue-600); }
.sim-month.is-picked { outline: 3px solid var(--green-500); outline-offset: 1px; }
.sim-legend { display: flex; flex-wrap: wrap; gap: .4rem 1rem; margin: .7rem 0; color: var(--slate-500); font-size: .72rem; font-weight: 700; }
.sim-legend span::before { content: ""; display: inline-block; width: .7rem; height: .7rem; margin-right: .35rem; border-radius: 2px; vertical-align: -1px; }
.sim-legend .k1::before { background: var(--green-400); } .sim-legend .k2::before { background: var(--navy-700); } .sim-legend .k3::before { box-shadow: inset 0 0 0 2px #e0a100; } .sim-legend .k4::before { box-shadow: inset 0 0 0 2px var(--blue-600); }
.sim-totals { display: grid; grid-template-columns: repeat(4, 1fr); gap: .6rem; margin: 0; }
.sim-totals div { padding: .6rem .7rem; background: var(--white); border: 1px solid var(--ice-200); border-radius: .3rem; }
.sim-totals dt { color: var(--slate-500); font-size: .7rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.sim-totals dd { margin: .15rem 0 0; font-family: var(--font-display); font-size: var(--text-base); letter-spacing: -.02em; }
.sim-totals dd.sim-good { color: #08743d; }
.sim-detail { margin: .8rem 0 0; color: var(--slate-700); font-size: var(--text-xs); line-height: 1.55; }

/* The play board: steps on the left, the (simulated) floor on the right. */
.nyop-play { margin-top: clamp(3rem, 6vw, 5rem); }
.nyop-progress { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; margin: 0 0 1.2rem; padding: 0; list-style: none; }
.nyop-progress li { display: flex; align-items: center; gap: .6rem; padding: .7rem .9rem; color: var(--slate-500); background: var(--ice-100); border: 1px solid var(--ice-200); border-radius: var(--radius-sm); font-size: var(--text-xs); font-weight: 800; }
.nyop-progress li span { display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--white); border: 1px solid var(--ice-200); }
.nyop-progress li.is-current { color: var(--navy-900); background: var(--white); border-color: var(--navy-900); }
.nyop-progress li.is-current span { color: var(--white); background: var(--navy-900); border-color: var(--navy-900); }
.nyop-progress li.is-done { color: #08743d; }
.nyop-progress li.is-done span { color: var(--white); background: var(--green-500); border-color: var(--green-500); }
.nyop-board { display: grid; grid-template-columns: 1.35fr .65fr; gap: 1.2rem; align-items: start; }
.nyop-stage { padding: clamp(1.5rem, 4vw, 2.6rem); background: var(--white); border: 1px solid var(--line); box-shadow: var(--shadow-md); }
.nyop-step header h2 { margin-bottom: .6rem; font-size: var(--text-xl); }
.nyop-step header > p:last-child:not(.eyebrow) { color: var(--slate-500); font-size: var(--text-sm); }
.nyop-step[hidden] { display: none; }
.nyop-choice { margin: 1rem 0; padding: 1rem; border: 1px solid var(--ice-200); border-radius: var(--radius-sm); background: var(--ice-50); }
.nyop-choice legend { padding: 0 .4rem; font-size: var(--text-sm); font-weight: 800; }
.nyop-choice legend span { display: block; color: #b42318; font-size: var(--text-xs); font-weight: 700; }
.nyop-choice .choice { display: flex; gap: .8rem; align-items: flex-start; padding: .7rem .6rem; border-radius: .3rem; cursor: pointer; }
.nyop-choice .choice:hover { background: var(--white); }
.nyop-choice .choice input { width: 1.2rem; height: 1.2rem; margin-top: .2rem; flex: 0 0 auto; accent-color: var(--green-500); }
.nyop-choice .choice strong { display: block; font-size: var(--text-sm); }
.nyop-choice .choice small { color: var(--slate-700); font-size: var(--text-xs); line-height: 1.5; }
.nyop-bid .bid-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .6rem; }
.nyop-bid .bid-currency { font-family: var(--font-display); font-size: var(--text-xl); }
.nyop-bid input[data-bid-input] { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 800; letter-spacing: -.03em; }
.bid-implied { color: var(--slate-500); font-size: var(--text-xs); font-weight: 700; max-width: 12rem; text-align: right; }
.nyop-bid input[type="range"] { width: 100%; margin-top: .6rem; accent-color: var(--green-500); }
.pay-element { min-height: 6rem; margin: 1rem 0; padding: .6rem; background: var(--ice-50); border: 1px solid var(--ice-200); border-radius: var(--radius-sm); }
.armed-row { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1rem; }
.armed { padding: .4rem .7rem; background: var(--ice-100); border: 1px solid var(--ice-200); border-radius: 999px; font-size: var(--text-xs); font-weight: 800; }
.armed.ok { color: #08743d; background: var(--green-100); border-color: transparent; }
.binding-note { display: flex; gap: .6rem; align-items: flex-start; margin: 1rem 0; padding: .9rem 1rem; color: var(--ink); background: #fff7e0; border: 1px solid #f0d27a; border-radius: var(--radius-sm); font-size: var(--text-xs); line-height: 1.55; }
.binding-note .icon { flex: 0 0 auto; width: 1.2rem; height: 1.2rem; color: #a86b00; margin-top: .1rem; }
.spin-button { width: 100%; color: var(--navy-950); background: var(--green-400); border-color: var(--green-400); font-size: var(--text-base); min-height: 3.6rem; }
.spin-button:disabled { opacity: .6; cursor: wait; transform: none; }

/* The wheel: a real drum. Faces are planes rotated about X and pushed out
   by the drum's radius; the drum itself sits back by that radius so the
   front face is at z = 0, and turns about X to bring the chosen face round. */
.wheel-scene { --rx: 0deg; --ry: 0deg; position: relative; padding: 1.6rem 1rem 1rem; background: radial-gradient(120% 120% at 50% 0%, #123d62 0%, var(--navy-900) 50%, var(--navy-950) 100%); border-radius: var(--radius-lg); perspective: 1100px; transform-style: preserve-3d; overflow: hidden; }
.wheel-glow { position: absolute; inset: auto 10% -30% 10%; height: 60%; background: radial-gradient(50% 50% at 50% 50%, rgba(37, 199, 121, .45), transparent 70%); filter: blur(10px); pointer-events: none; }
.wheel-frame { position: relative; height: 280px; margin: 0 auto; max-width: 420px; transform: rotateX(calc(var(--rx) * .6)) rotateY(var(--ry)); transform-style: preserve-3d; transition: transform 500ms cubic-bezier(.16, 1, .3, 1); }
.wheel-scene.is-tilting .wheel-frame { transition-duration: 140ms; }
.wheel-drum { --r: 280px; position: absolute; left: 0; right: 0; top: 50%; height: 46px; margin-top: -23px; transform-style: preserve-3d; transform: translateZ(calc(var(--r) * -1)) rotateX(0deg); will-change: transform; }
.wheel-face { position: absolute; inset: 0; display: flex; align-items: center; justify-content: space-between; padding: 0 1.4rem; color: var(--white); background: linear-gradient(180deg, #17466e, #0b2945); border: 1px solid rgba(255, 255, 255, .12); backface-visibility: hidden; transform: rotateX(var(--a)) translateZ(var(--r)); }
.wheel-face.hot { background: linear-gradient(180deg, #1f5f2d, #0f3d1f); }
.wheel-face b { font-family: var(--font-display); font-size: 1.35rem; letter-spacing: -.03em; }
.wheel-face span { color: #b7c5d1; font-size: var(--text-xs); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.wheel-face.is-landed { background: linear-gradient(180deg, var(--green-400), var(--green-600)); color: var(--navy-950); box-shadow: 0 0 40px rgba(37, 199, 121, .7); }
.wheel-face.is-landed span { color: var(--navy-950); }
.wheel-pointer { position: absolute; top: 50%; left: -14px; width: 0; height: 0; margin-top: -12px; border-top: 12px solid transparent; border-bottom: 12px solid transparent; border-left: 18px solid #ffd75e; filter: drop-shadow(0 0 8px rgba(255, 215, 94, .8)); transform: translateZ(60px); }
.wheel-pointer::after { content: ""; position: absolute; right: -18px; top: -12px; width: 0; height: 0; }
.wheel-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(4, 17, 31, .9) 0%, transparent 38%, transparent 62%, rgba(4, 17, 31, .9) 100%); pointer-events: none; transform: translateZ(40px); }
.wheel-readout { margin: .9rem 0 0; color: #ffd75e; text-align: center; font-family: var(--font-display); font-size: var(--text-lg); letter-spacing: -.02em; }
.is-celebrating .wheel-scene { animation: nyop-pulse 1.2s ease-out 1; }
@keyframes nyop-pulse { 0% { box-shadow: 0 0 0 0 rgba(37, 199, 121, .8); } 100% { box-shadow: 0 0 0 40px rgba(37, 199, 121, 0); } }

.nyop-result .result-price { display: flex; align-items: baseline; gap: .5rem; margin: .5rem 0 1.2rem; font-family: var(--font-display); font-size: clamp(2.6rem, 1.8rem + 3vw, 4.4rem); font-weight: 800; letter-spacing: -.05em; color: #08743d; }
.nyop-result .result-price small { color: var(--slate-500); font-family: var(--font-body); font-size: var(--text-sm); font-weight: 700; letter-spacing: 0; }
.result-facts { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin: 0 0 1rem; }
.result-facts div { padding: .7rem .8rem; background: var(--ice-50); border: 1px solid var(--ice-200); border-radius: .3rem; }
.result-facts dt { color: var(--slate-500); font-size: .7rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.result-facts dd { margin: .2rem 0 0; font-size: var(--text-sm); font-weight: 700; overflow-wrap: anywhere; }
.result-note { color: var(--slate-700); font-size: var(--text-xs); line-height: 1.55; overflow-wrap: anywhere; }

.bid-floor { position: sticky; top: 6rem; padding: 1.2rem; color: var(--white); background: var(--navy-900); border-radius: var(--radius-md); box-shadow: var(--shadow-md); }
.bid-floor header h3 { margin: 0 0 .3rem; font-family: var(--font-display); font-size: var(--text-lg); }
.bid-floor .eyebrow { color: var(--green-400); margin-bottom: .4rem; }
.floor-disclosure { margin: 0 0 .9rem; color: #b7c5d1; font-size: .72rem; line-height: 1.5; }
.floor-list { margin: 0; padding: 0; list-style: none; display: grid; gap: .4rem; max-height: 30rem; overflow: hidden; }
.floor-list li { display: flex; justify-content: space-between; align-items: center; gap: .6rem; padding: .55rem .7rem; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .08); border-radius: .3rem; font-size: .74rem; animation: floor-in 450ms cubic-bezier(.16, 1, .3, 1) both; }
.floor-list li .who { display: grid; color: #dbe6ef; }
.floor-list li .who em { color: #8ea3b5; font-size: .66rem; font-style: normal; }
.floor-list li .win { flex: 0 0 auto; color: var(--green-400); font-weight: 800; text-align: right; }
.floor-list li.floor-me { background: rgba(37, 199, 121, .16); border-color: rgba(37, 199, 121, .5); }
.floor-list li.floor-me .who em { color: var(--green-400); }
@keyframes floor-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.floor-stats { margin: .9rem 0 0; color: #b7c5d1; font-size: .72rem; font-weight: 700; }
.floor-stats span { color: var(--white); }

.nyop-agreement { margin-top: clamp(3rem, 6vw, 5rem); }
.nyop-clauses { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.nyop-clause { padding: 1.2rem 1.3rem; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.nyop-clause h3 { margin: 0 0 .5rem; font-family: var(--font-display); font-size: var(--text-base); letter-spacing: -.02em; }
.nyop-clause p { margin: 0; color: var(--slate-700); font-size: var(--text-xs); line-height: 1.6; }

@media (max-width: 900px) {
  .nyop-hero, .listed-card, .nyop-board, .nyop-clauses, .result-facts { grid-template-columns: 1fr; }
  .bid-floor { position: static; }
  .sim-controls { grid-template-columns: 1fr; }
  .sim-totals { grid-template-columns: 1fr 1fr; }
  .nyop-progress { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 780px) {
  .lotto-sign { --base-rx: 0deg; --base-ry: 0deg; }
  .sim-grid { grid-template-columns: repeat(6, 1fr); }
  .nyop-plan-tabs { display: grid; width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .lotto-bulbs i { animation: none; opacity: .8; }
  .floor-list li { animation: none; }
  .wheel-drum { transition: none !important; }
  .is-celebrating .wheel-scene { animation: none; }
}

/* Either side of the tier table: the flashing Name Your Own Price banners. */
.plans-flank { display: grid; grid-template-columns: minmax(150px, 200px) 1fr minmax(150px, 200px); gap: 1rem; align-items: stretch; }
.nyop-flash { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: .55rem; padding: 1.4rem 1rem; color: var(--navy-950); text-align: center; text-decoration: none; background: var(--green-400); border: 3px solid #ffd75e; border-radius: var(--radius-md); box-shadow: 0 0 0 6px rgba(255, 215, 94, .45), var(--shadow-md); animation: nyop-flash 1s steps(2, jump-none) infinite; transition: transform var(--ease); }
.nyop-flash:hover, .nyop-flash:focus-visible { animation-play-state: paused; transform: translateY(-3px); }
.nyop-flash-kicker { font-size: .7rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.nyop-flash strong { font-family: var(--font-display); font-size: clamp(1.35rem, 1rem + 1.1vw, 1.9rem); font-weight: 800; line-height: 1.02; letter-spacing: -.04em; text-transform: uppercase; }
.nyop-flash-sub { font-size: .74rem; font-weight: 700; line-height: 1.4; }
.nyop-flash-go { display: inline-flex; align-items: center; gap: .4rem; margin-top: .3rem; padding: .55rem .95rem; color: var(--white); background: var(--navy-950); border-radius: 999px; font-size: var(--text-xs); font-weight: 800; }
.nyop-flash-go .icon { width: 1rem; height: 1rem; }
@keyframes nyop-flash {
  0%, 49% { background: var(--green-400); border-color: #ffd75e; box-shadow: 0 0 0 6px rgba(255, 215, 94, .55), var(--shadow-md); }
  50%, 100% { background: #ffd75e; border-color: var(--green-400); box-shadow: 0 0 0 6px rgba(37, 199, 121, .55), var(--shadow-md); }
}
@media (max-width: 1100px) {
  .plans-flank { grid-template-columns: 1fr; }
  .nyop-flash { flex-direction: row; flex-wrap: wrap; justify-content: space-between; text-align: left; padding: 1rem 1.2rem; }
  .nyop-flash strong { flex: 1 1 100%; }
  .nyop-flash-right { order: 3; }
}
@media (prefers-reduced-motion: reduce) {
  .nyop-flash { animation: none; background: #ffd75e; border-color: var(--green-400); }
}