/* ============================================================
   IASORA - landing page (hybrid: dark cinematic hero/CTA + warm body)
   Palette: Cerulean #2E98B2 · Amber #F89A44 · Navy #2D3748 · Parchment #F0EDE5
   Type: Poppins (self-hosted).
   ============================================================ */

:root{
  --ground:#FAFAF7; --ground-deep:#F2F1EC; --surface:#FFFFFF;
  --band-grad:linear-gradient(180deg,#FFFFFF 0%,#F8F7F2 55%,#F1F0E9 100%);
  --band-grad-diag:linear-gradient(135deg,#FFFFFF 0%,#F7F6F1 55%,#EFEEE6 100%);
  --sheen:linear-gradient(180deg,#FFFFFF 0%,#FDFCF9 100%);
  --ink:#1C222E; --navy:#2D3748; --slate:#5A677B; --mist:#8C97A6; --logo-ink:#0B0B0B;
  --cerulean:#2E98B2; --cerulean-deep:#2E7286; --cerulean-wash:#E3EFF1;
  --amber:#F89A44; --amber-deep:#E0842E; --amber-wash:#FCEDDB;
  --text:#2D3748; --text-strong:#1C222E; --text-muted:#5A677B;
  --hairline:rgba(45,55,72,.16); --hairline-soft:rgba(45,55,72,.08);
  --shadow-sm:0 1px 2px rgba(46,38,28,.04), 0 10px 24px -12px rgba(46,38,28,.13);
  --shadow:0 2px 5px rgba(46,38,28,.05), 0 18px 44px -16px rgba(46,38,28,.17);
  --shadow-lg:0 4px 10px rgba(46,38,28,.06), 0 44px 84px -26px rgba(46,38,28,.22);
  --brand-navy:#22356F;
  --mark-node:var(--brand-navy); --mark-edge:var(--brand-navy); --mark-out:#F89A44;
  --nav-h:70px;
  /* dark section palette (hero / product / cta) */
  --d-bg1:#1a2231; --d-bg2:#12161E; --d-bg3:#0c0f15;
}



/* ---------- Base ---------- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; overflow-x:hidden}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }
body{
  margin:0; background:var(--ground); color:var(--text); overflow-x:hidden;
  font-family:"Poppins",system-ui,-apple-system,sans-serif; font-weight:400;
  font-size:16px; line-height:1.6; letter-spacing:.005em;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  transition:background .5s ease,color .5s ease;
}
h1,h2,h3,h4,h5{color:var(--text-strong); margin:0; text-wrap:balance; letter-spacing:-.02em; line-height:1.08; overflow-wrap:break-word}
p{margin:0}
a{color:inherit; text-decoration:none}
img,svg{max-width:100%}
::selection{background:var(--cerulean-wash); color:var(--text-strong)}
:focus-visible{outline:2px solid var(--cerulean); outline-offset:3px; border-radius:4px}

.wrap{max-width:1180px; margin:0 auto; padding:0 32px}
.eyebrow{font-size:12px; font-weight:600; letter-spacing:.17em; text-transform:uppercase; color:var(--cerulean-deep); margin:0 0 18px}
.tnum{font-variant-numeric:tabular-nums}
.section{padding:clamp(40px,4.8vw,68px) 0; position:relative}
.section + .section{border-top:1px solid var(--hairline-soft)}
.lede{font-size:clamp(16px,1.4vw,18px); color:var(--text-muted); line-height:1.55}
.sec-head{max-width:62ch}
.sec-head h2{font-size:clamp(25px,3.2vw,38px); font-weight:700}
.sec-head .lede{margin-top:18px}

/* ---------- Logo mark ---------- */
.ia{display:block}
/* Stroke width is authored in the mark's own 132x74 coordinate space, so it
   scales with the SVG rather than needing a value per placement. */
.am-s{fill:none; stroke:var(--mark-edge); stroke-width:5.4; stroke-linecap:round; stroke-linejoin:round}
.am-d{fill:var(--mark-node)}

/* ---------- Buttons ---------- */
.btn{display:inline-flex; align-items:center; gap:9px; font-family:inherit; font-weight:600; font-size:15px;
  padding:13px 22px; border-radius:11px; border:1px solid transparent; cursor:pointer; letter-spacing:.005em;
  transition:transform .18s ease, background .18s ease, box-shadow .18s ease, border-color .18s ease, color .18s; white-space:nowrap}
.btn:active{transform:translateY(1px)}
.btn-lg{padding:16px 28px; font-size:16px}
.btn-primary{background:var(--amber); color:#3a1c05; box-shadow:0 6px 20px rgba(248,154,68,.28)}
.btn-primary:hover{background:var(--amber-deep); box-shadow:0 8px 26px rgba(248,154,68,.36); transform:translateY(-1px)}
.btn-line{background:transparent; color:#fff; border-color:rgba(255,255,255,.28)}
.btn-line:hover{border-color:#fff; background:rgba(255,255,255,.06)}
.btn-line .arw{transition:transform .2s} .btn-line:hover .arw{transform:translateX(4px)}

/* ---------- IASORA platform lockup ---------- */
/* AgiliMed is the company and owns the chrome; this is the product it makes,
   so it always carries a kicker naming it as the platform. Without that label
   a second logo in the footer just reads as a second company, which is the
   confusion the single-brand move exists to remove. */
.plat-lock{display:flex; flex-direction:column; gap:7px; margin-top:20px}
.plat-lock .pl-k{font-size:10.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--mist)}
.plat-lock .pl-mk{display:flex; align-items:center; gap:9px}
.plat-lock .iam{width:26px; height:26px; flex:none; display:block}
.plat-lock .pl-wm{font-weight:500; letter-spacing:.17em; font-size:14.5px; color:var(--text-strong)}
.plat-lock .pl-tm{font-size:8px; vertical-align:super; opacity:.6; letter-spacing:0}

/* On the platform page the lockup is the hero's eyebrow, so it sits centred
   with the rest of the hero column and runs a size up. */
.hero-bright-inner .plat-lock{align-items:center; gap:10px; margin:0 0 18px}
.hero-bright-inner .plat-lock .iam{width:34px; height:34px}
.hero-bright-inner .plat-lock .pl-wm{font-size:19px; letter-spacing:.19em}
.hero-bright-inner .plat-lock .pl-k{letter-spacing:.18em}

/* ---------- Nav ---------- */
.nav{position:sticky; top:0; z-index:60; height:var(--nav-h); background:transparent;
  border-bottom:1px solid transparent; transition:background .35s ease, border-color .35s ease;
  --mark-node:#fff; --mark-edge:#fff}
.nav .wrap{height:100%; display:flex; align-items:center; justify-content:space-between; gap:24px}
.brand{display:flex; align-items:center; gap:11px}
.brand .ia{width:40px; height:23px; flex:none; transition:width .4s ease, height .4s ease}
/* With the wordmark collapsed the mark alone has to hold the corner, so it
   steps up and takes back the gap the wordmark was occupying. Without the
   gap reset the flex gap would leave dead space beside a zero-width span. */
.nav.scrolled .brand{gap:0}
.nav.scrolled .brand .ia{width:50px; height:29px}
.brand-txt{display:flex; flex-direction:column; line-height:1}
/* Weight and tracking match the AgiliMed horizontal logo, which sets AGILIMED
   in Poppins 500 at .18em, so the rendered wordmark and the supplied artwork
   are the same lockup rather than two near-misses. */
.brand .wm{font-weight:500; letter-spacing:.18em; font-size:16px; color:#fff; white-space:nowrap;
  transition:color .35s}

/* Over a hero the brand reads as the full horizontal logo. Once the bar
   condenses on scroll the wordmark collapses away and the mark alone carries
   it, which also hands the width back to the nav links. Collapsing max-width
   rather than toggling display keeps it animated and leaves the text in the
   accessibility tree. */
.brand .wm{display:inline-block; overflow:hidden; max-width:170px; opacity:1;
  transition:color .35s, max-width .4s ease, opacity .25s ease}
.nav.scrolled .brand .wm{max-width:0; opacity:0}
.brand .tm{font-size:9px; vertical-align:super; opacity:.7; font-weight:600}
.brand .by{font-size:10.5px; letter-spacing:.04em; color:rgba(240,237,229,.6); margin-top:3px; transition:color .35s}
.nav-links{display:flex; align-items:center; gap:30px; height:100%}
.nav-links a{font-size:14.5px; color:rgba(240,237,229,.82); font-weight:500; transition:color .2s}
.nav-links a:hover{color:#fff}
.nav-right{display:flex; align-items:center; gap:14px}
.theme-btn,.menu-btn{appearance:none; background:transparent; cursor:pointer; color:#fff; border:1px solid rgba(255,255,255,.26);
  transition:border-color .2s, transform .2s, color .35s}
.theme-btn{width:38px; height:38px; border-radius:50%; font-size:15px; display:grid; place-items:center}
.theme-btn:hover{border-color:#fff; transform:translateY(-1px)}
.menu-btn{display:none; width:38px; height:38px; border-radius:9px; place-items:center}
/* scrolled → solid */
.nav.scrolled{background:color-mix(in srgb, var(--ground) 86%, transparent);
  -webkit-backdrop-filter:saturate(1.3) blur(12px); backdrop-filter:saturate(1.3) blur(12px);
  border-bottom-color:var(--hairline-soft); --mark-node:var(--brand-navy); --mark-edge:var(--brand-navy)}
.nav.scrolled .wm{color:var(--text-strong)}
.nav.scrolled .by{color:var(--text-muted)}
.nav.scrolled .nav-links a{color:var(--text-muted)}
.nav.scrolled .nav-links a:hover{color:var(--text-strong)}
.nav.scrolled .theme-btn,.nav.scrolled .menu-btn{color:var(--text); border-color:var(--hairline)}



/* ---------- Dark section shared ---------- */
.hero, .product, .cta{
  --text:#EDEAE2; --text-strong:#FFFFFF; --text-muted:rgba(237,234,226,.7);
  --hairline:rgba(237,234,226,.16); --hairline-soft:rgba(237,234,226,.09);
  --surface:rgba(237,234,226,.05); --cerulean-deep:#5FC7DE; --amber-deep:#FBB06A;
  --mark-node:#FFFFFF; --mark-edge:#FFFFFF;
  color:var(--text); position:relative; isolation:isolate;
}

/* ---------- Hero ---------- */
.hero{min-height:min(92vh,860px); display:flex; align-items:center;
  padding:calc(var(--nav-h) + 40px) 0 88px; margin-top:calc(var(--nav-h) * -1);
  background:linear-gradient(160deg,#1b2434 0%, #12161E 55%, #0b0e13 100%)}
#hero-canvas{position:absolute; inset:0; width:100%; height:100%; z-index:0}
.hero-veil{position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(90% 80% at 20% 40%, rgba(11,14,19,.72), transparent 60%),
             linear-gradient(180deg, rgba(11,14,19,.2), transparent 30%, rgba(11,14,19,.55))}
.hero-inner{position:relative; z-index:2; width:100%}
.hero-eyebrow{color:#7fd3e6}
.hero-h1{font-size:clamp(36px,6.4vw,78px); font-weight:700; line-height:1.03; letter-spacing:-.03em; color:#fff; max-width:16ch}
.hero-h1 .accent{color:#39b6d3}
.hero-sub{margin-top:26px; font-size:clamp(16px,1.5vw,20px); color:rgba(237,234,226,.82); max-width:60ch; line-height:1.55}
.hero-cta{display:flex; align-items:center; gap:16px; margin-top:36px; flex-wrap:wrap}
.hero-strip{display:flex; align-items:center; gap:16px; margin-top:32px; flex-wrap:wrap;
  font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; color:rgba(237,234,226,.5); font-weight:600}
.hero-strip i{width:4px; height:4px; border-radius:50%; background:rgba(237,234,226,.3)}
.scroll-cue{position:absolute; z-index:2; bottom:26px; left:50%; transform:translateX(-50%); display:flex; flex-direction:column;
  align-items:center; gap:10px; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:rgba(237,234,226,.45); font-weight:600}
.scroll-cue em{width:1px; height:34px; background:linear-gradient(180deg,rgba(237,234,226,.5),transparent); position:relative; overflow:hidden}
.scroll-cue em::after{content:""; position:absolute; top:-40%; left:0; width:1px; height:40%; background:var(--amber); animation:cue 2.4s ease-in-out infinite}
@keyframes cue{0%{top:-40%} 60%,100%{top:120%}}

/* ---------- Reveal ---------- */
.reveal{transition:opacity .7s ease, transform .7s ease}
html.anim .reveal{opacity:0; transform:translateY(20px)}
html.anim .reveal.in{opacity:1; transform:none}
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}.reveal.d4{transition-delay:.32s}

/* ---------- Marquee ---------- */
.marquee-sec{padding:clamp(44px,5.5vw,78px) 0; overflow:hidden; background:var(--band-grad)}
.marquee-head{max-width:70ch; margin-bottom:44px}
.marquee-head h2{font-size:clamp(22px,2.8vw,34px); font-weight:700; margin-bottom:16px}
.marquee{overflow:hidden; padding:8px 0;
  -webkit-mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.mq-track{display:flex; gap:18px; width:max-content; will-change:transform; animation:mq 150s linear infinite}
#mqB{animation-duration:168s; animation-direction:reverse}
.marquee:hover .mq-track{animation-play-state:paused}
@keyframes mq{from{transform:translateX(0)} to{transform:translateX(-50%)}}
.mq-card{flex:none; width:312px; background:var(--surface); border:1px solid var(--hairline); border-radius:16px;
  padding:22px 24px; box-shadow:var(--shadow-sm)}
.mq-card .tag{display:inline-flex; align-items:center; gap:7px; font-size:10.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--cerulean-deep)}
.mq-card .tag em{width:6px; height:6px; border-radius:50%; background:var(--cerulean); font-style:normal}
.mq-card h5{font-size:17px; font-weight:600; margin:11px 0 7px; color:var(--text-strong); letter-spacing:-.01em}
.mq-card p{font-size:13.5px; color:var(--text-muted); line-height:1.45}
.mq-card .st{margin-top:14px; padding-top:13px; border-top:1px solid var(--hairline-soft); font-size:12.5px; font-weight:600; color:var(--text-muted); display:flex; align-items:center; gap:7px}
.mq-card .st b{color:var(--amber-deep); font-weight:600}
.marquee-foot{margin-top:36px; font-size:15px; color:var(--text-muted)}
.marquee-foot a{color:var(--cerulean-deep); font-weight:600}

/* ---------- Reframe ---------- */
.reframe .big{font-size:clamp(23px,3vw,34px); font-weight:700; max-width:22ch; line-height:1.12}
.reframe .big em{font-style:normal; color:var(--cerulean)}
.reframe .lede b{color:var(--text-strong); font-weight:600}
.fail-list{margin-top:34px; display:grid; grid-template-columns:repeat(4,1fr); gap:22px}
.fail{padding:26px 24px; border-radius:16px; background:var(--surface); border:1px solid var(--hairline); box-shadow:var(--shadow-sm)}
.fail .k{font-size:13px; font-weight:600; color:var(--cerulean-deep); letter-spacing:.03em}
.fail .v{margin-top:9px; font-size:14.5px; color:var(--text-muted); line-height:1.5}
.fail .v b{color:var(--text-strong); font-weight:600}

/* ---------- Model loop ---------- */
.loop{margin-top:40px}
.loop-track{display:grid; grid-template-columns:repeat(5,1fr); gap:0; position:relative}
.step{padding:0 18px; position:relative; min-width:0}
.step:not(:last-child)::after{content:""; position:absolute; top:22px; left:calc(50% + 30px); right:-2px; height:2px;
  background:linear-gradient(90deg,var(--hairline),var(--cerulean)); opacity:.7}
.step .bead{position:relative; z-index:2; width:44px; height:44px; border-radius:50%; display:grid; place-items:center;
  background:var(--surface); border:2px solid var(--cerulean); color:var(--cerulean-deep); font-weight:700; font-size:16px; box-shadow:var(--shadow-sm)}
.step.final .bead{border-color:var(--amber); background:var(--amber); color:#3a1c05}
.step h4{margin:22px 0 8px; font-size:18px; font-weight:600; letter-spacing:-.01em}
.step p{font-size:14.5px; color:var(--text-muted); line-height:1.5}
.loop-note{margin-top:32px; font-size:15px; color:var(--text-muted)}
.loop-note b{color:var(--text-strong); font-weight:600}

/* ---------- Source / differentiator ---------- */
.source-grid{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start}
.source-points{display:grid; grid-template-columns:1fr 1fr; gap:26px 30px}
.sp .sp-k{display:block; font-size:15px; font-weight:700; color:var(--text-strong); letter-spacing:-.01em; padding-bottom:10px; margin-bottom:2px; border-bottom:2px solid var(--cerulean); width:fit-content}
.sp p{margin-top:12px; font-size:14.5px; color:var(--text-muted); line-height:1.5}

/* ---------- Domains ---------- */
.dom-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; margin-top:34px;
  background:var(--hairline-soft); border:1px solid var(--hairline-soft); border-radius:18px; overflow:hidden}
.dom{background:var(--ground); padding:30px 26px; transition:background .2s}
.dom:hover{background:var(--surface)}
.dom h4{font-size:18px; font-weight:600; margin-bottom:10px}
.dom p{font-size:14px; color:var(--text-muted); line-height:1.5}

/* ---------- Product (dark) console ---------- */
.product{background:linear-gradient(165deg,#164049 0%,#0F2C33 60%,#0C242A 100%); padding:clamp(44px,5.5vw,78px) 0}
.product-head{max-width:60ch; margin-bottom:44px}
.product-head .eyebrow{color:#7fd3e6}
.product-head h2{font-size:clamp(24px,3.2vw,36px); font-weight:700; color:#fff}
.console{border:1px solid rgba(237,234,226,.12); border-radius:18px; overflow:hidden;
  background:rgba(255,255,255,.03); box-shadow:0 40px 90px rgba(0,0,0,.5); max-width:1000px; margin:0 auto}
.console-bar{display:flex; align-items:center; gap:14px; padding:14px 20px; border-bottom:1px solid rgba(237,234,226,.1); background:rgba(255,255,255,.03)}
.dotrow{display:flex; gap:7px}
.dotrow i{width:11px; height:11px; border-radius:50%; background:rgba(237,234,226,.22)}
.console-title{font-size:13px; color:rgba(237,234,226,.72); font-weight:600; letter-spacing:.02em}
.console-live{margin-left:auto; font-size:12px; color:rgba(237,234,226,.7); font-weight:600; display:flex; align-items:center; gap:7px}
.console-live em{width:8px; height:8px; border-radius:50%; background:#33d17a; box-shadow:0 0 0 0 rgba(51,209,122,.5); animation:pulseDot 2s infinite}
@keyframes pulseDot{0%{box-shadow:0 0 0 0 rgba(51,209,122,.5)} 70%{box-shadow:0 0 0 7px rgba(51,209,122,0)} 100%{box-shadow:0 0 0 0 rgba(51,209,122,0)}}
.console-body{display:grid; grid-template-columns:230px 1fr; min-height:390px}
.console-side{padding:24px; border-right:1px solid rgba(237,234,226,.1); display:flex; flex-direction:column; gap:22px}
.cs-stat .cs-n{font-size:34px; font-weight:700; color:#fff; letter-spacing:-.02em; font-variant-numeric:tabular-nums; line-height:1}
.cs-stat .cs-l{display:block; margin-top:6px; font-size:12px; color:rgba(237,234,226,.55); letter-spacing:.04em; text-transform:uppercase; font-weight:600}
.cs-lanes{margin-top:auto; display:flex; flex-direction:column; gap:14px}
.cs-lane{font-size:12px; color:rgba(237,234,226,.6)}
.cs-lane span{display:block; margin-bottom:6px}
.cs-bar{display:block; height:6px; border-radius:3px; background:rgba(237,234,226,.1); position:relative; overflow:hidden}
.cs-bar::after{content:""; position:absolute; inset:0 auto 0 0; width:var(--w); border-radius:3px;
  background:linear-gradient(90deg,var(--cerulean),#3fc0d8); transform:scaleX(0); transform-origin:left; transition:transform 1.1s ease}
.in .cs-bar::after, .console.in .cs-bar::after{transform:scaleX(1)}
.console-feed{padding:16px; display:flex; flex-direction:column; gap:10px; overflow:hidden; position:relative}
.feed-row{display:flex; align-items:center; gap:14px; padding:13px 16px; border-radius:12px;
  background:rgba(237,234,226,.04); border:1px solid rgba(237,234,226,.07); animation:feedIn .5s ease both}
@keyframes feedIn{from{opacity:0; transform:translateY(-8px)} to{opacity:1; transform:none}}
.feed-row .fr-agent{font-size:13.5px; color:#fff; font-weight:600; min-width:0}
.feed-row .fr-act{font-size:12.5px; color:rgba(237,234,226,.55); flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.feed-row .pill{flex:none; font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; padding:5px 11px; border-radius:999px}
.pill.working{color:#7fd3e6; background:rgba(62,184,208,.14)}
.pill.closed{color:#ffd9b0; background:rgba(248,154,68,.16)}
.product-note{margin-top:24px; text-align:center; font-size:13px; color:rgba(237,234,226,.5)}
.product-note b{color:rgba(237,234,226,.82); font-weight:600}

/* product showcase — a light, cool stage for the self-framed marketing screenshots */
.showcase{background:linear-gradient(180deg,#F4F7FA 0%,#E9EEF3 100%); padding:clamp(44px,5.5vw,78px) 0}
.pshot-wrap{max-width:1060px; margin:0 auto}
.pshot{display:block; width:100%; max-width:100%; height:auto; border-radius:14px;
  border:1px solid rgba(16,35,43,.06); box-shadow:0 26px 60px -30px rgba(16,35,43,.30), 0 4px 14px -8px rgba(16,35,43,.14)}
.pshot-cap{margin:18px auto 0; max-width:72ch; text-align:center; font-size:14.5px; color:var(--text-muted); line-height:1.55}
.pshot-cap b{color:var(--text-strong); font-weight:600}
figure.pfig{margin:0 auto; max-width:1060px}
figure.pfig + figure.pfig{margin-top:clamp(44px,5vw,64px)}
figure.pfig figcaption{margin:18px auto 0; max-width:72ch; text-align:center; font-size:14.5px; color:var(--text-muted); line-height:1.55}
figure.pfig figcaption b{color:var(--text-strong); font-weight:600}

/* ---------- Benefits ---------- */
.ben-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin-top:34px;
  background:var(--hairline-soft); border:1px solid var(--hairline-soft); border-radius:18px; overflow:hidden}
.ben{background:var(--ground); padding:32px 30px}
.ben .n{font-size:13px; font-weight:700; color:var(--amber-deep); font-variant-numeric:tabular-nums}
.ben h4{margin:12px 0 8px; font-size:19px; font-weight:600}
.ben p{font-size:14.5px; color:var(--text-muted); line-height:1.5}

/* ---------- Trust + stack ---------- */
.trust-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:60px; align-items:center}
.trust-list{display:flex; flex-direction:column; gap:20px; margin-top:28px}
.trust-item{display:flex; gap:15px; align-items:flex-start}
.trust-item .ck{flex:none; width:26px; height:26px; border-radius:8px; background:var(--cerulean-wash); color:var(--cerulean-deep);
  display:grid; place-items:center; font-size:13px; font-weight:700; margin-top:2px}
.trust-item b{color:var(--text-strong); font-weight:600}
.trust-item span{color:var(--text-muted)}
.trust-visual{display:flex; justify-content:center}
.stack{display:flex; flex-direction:column; gap:14px; width:100%; max-width:420px}
.stack .layer{border-radius:14px; padding:18px 20px; border:1px solid var(--hairline); background:var(--surface); text-align:center}
.stack .layer .lab{font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--text-muted)}
.stack .action{background:var(--amber-wash); border-color:transparent}
.stack .action .lab{color:#B26A2B}
.stack .action .big{font-size:17px; font-weight:600; color:#1C222E; margin-top:4px}
.stack .iasora{background:var(--cerulean); border-color:transparent; box-shadow:var(--shadow)}
.stack .iasora .lab{color:#eaf7fa}
.stack .iasora .big{font-size:18px; font-weight:700; color:#fff; margin-top:4px; letter-spacing:.02em}
.stack .systems{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; background:transparent; border:none; padding:0}
.stack .sys{background:var(--surface); border:1px solid var(--hairline); border-radius:10px; padding:12px 8px; font-size:12.5px; color:var(--text-muted); text-align:center}
.stack .conn{height:18px; display:flex; justify-content:center; align-items:center}
.stack .conn svg{overflow:visible}

/* ---------- CTA (dark) ---------- */
.cta{background:linear-gradient(155deg,#1B4A54 0%,#123840 55%,#0C262D 100%); padding:clamp(48px,6vw,84px) 0; text-align:center; overflow:hidden}
#cta-canvas{position:absolute; inset:0; width:100%; height:100%; z-index:0; opacity:.6}
.cta-inner{position:relative; z-index:2; max-width:800px}
.cta .eyebrow{color:#7fd3e6}
.cta h2{color:#fff; font-size:clamp(26px,3.6vw,40px); font-weight:700; letter-spacing:-.03em}
.cta .lede{color:rgba(237,234,226,.72); margin:20px auto 0; max-width:52ch}
.form{margin:40px auto 0; max-width:660px}
.form-row{display:flex; gap:12px}
.form input, .form select{flex:1; font-family:inherit; font-size:15px; padding:15px 16px; border-radius:11px;
  border:1px solid rgba(237,234,226,.2); background:rgba(237,234,226,.06); color:#fff; min-width:0}
.form input::placeholder{color:rgba(237,234,226,.5)}
.form select{color:rgba(237,234,226,.8); flex:0 0 auto; width:auto}
.form input:focus, .form select:focus{outline:none; border-color:var(--amber); background:rgba(237,234,226,.1)}
.form{display:flex; flex-direction:column; align-items:center}
.form-row{width:100%}
.form .fine{width:100%}
.form .btn-primary{flex:none; align-self:center; justify-content:center; padding:16px 44px; margin-top:6px}
.form .fine{font-size:12.5px; color:rgba(237,234,226,.5); margin-top:14px}
.form-success{display:none; margin:40px auto 0; max-width:560px; padding:26px 28px; border-radius:16px; text-align:left;
  background:rgba(248,154,68,.1); border:1px solid rgba(248,154,68,.4); align-items:center; gap:18px}
.form-success.show{display:flex}
.form-success .ck{flex:none; width:46px; height:46px; border-radius:50%; background:var(--amber); color:#3a1c05; display:grid; place-items:center; font-size:22px; font-weight:700}
.form-success h4{color:#fff; font-size:19px; margin-bottom:4px}
.form-success p{color:rgba(237,234,226,.8); font-size:14px}

/* ---------- Footer ---------- */
.footer{padding:60px 0 46px; border-top:1px solid var(--hairline); background:var(--ground)}
.footer .top{display:flex; justify-content:space-between; gap:44px; flex-wrap:wrap; align-items:flex-start}
.footer .brand .wm{color:var(--text-strong)} .footer .brand .by{color:var(--text-muted)}
.footer .fnav{display:flex; gap:48px; flex-wrap:wrap}
.footer .col{display:flex; flex-direction:column; gap:11px}
.footer .col .h{font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--text-muted); margin-bottom:4px}
.footer .col a{font-size:14px; color:var(--text-muted); transition:color .2s}
.footer .col a:hover{color:var(--text-strong)}
.footer .base{margin-top:36px; padding-top:24px; border-top:1px solid var(--hairline-soft);
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:12.5px; color:var(--text-muted)}
.footer .base .dots{display:flex; gap:7px}
.footer .base .dots i{width:12px; height:12px; border-radius:50%}
.footer .base .base-right{display:flex; align-items:center; gap:18px}
.foot-cookie{background:none; border:none; padding:0; font:inherit; font-size:12.5px; color:var(--text-muted); cursor:pointer; text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--hairline)}
.foot-cookie:hover{color:var(--text-strong)}

/* ---------- Storage / cookie consent ---------- */
.consent-root{display:contents}
.cookie-fab{position:fixed; left:20px; bottom:20px; z-index:9998; width:44px; height:44px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; background:#fff; color:var(--text-muted); border:1px solid var(--hairline); box-shadow:var(--shadow); cursor:pointer; opacity:.72; transition:opacity .2s, transform .2s, color .2s, border-color .2s}
.cookie-fab:hover{opacity:1; color:var(--cerulean-deep); border-color:var(--cerulean); transform:translateY(-1px)}
.chat-fab{position:fixed; right:20px; bottom:20px; z-index:9997; display:inline-flex; align-items:center; gap:9px; padding:12px 18px; border-radius:999px; background:var(--cerulean-deep); color:#fff; font-weight:600; font-size:14px; border:none; cursor:pointer; box-shadow:0 8px 24px rgba(46,114,134,.34); transition:transform .18s, box-shadow .18s, background .18s}
.chat-fab:hover{background:#256175; transform:translateY(-1px); box-shadow:0 10px 30px rgba(46,114,134,.44)}
.chat-fab svg{width:18px; height:18px; flex:none}
@media (max-width:600px){ .chat-fab{padding:14px; border-radius:50%} .chat-fab .chat-label{display:none} }
.cm-foot .btn{padding:11px 18px; font-size:14px}
.btn-ghost{background:transparent; color:var(--text-strong); border:1px solid var(--hairline)}
.btn-ghost:hover{border-color:var(--cerulean); color:var(--cerulean-deep)}

.consent-modal{position:fixed; inset:0; z-index:10000; display:flex; align-items:center; justify-content:center; padding:20px}
.consent-modal[hidden]{display:none}
.cm-scrim{position:absolute; inset:0; background:rgba(16,20,28,.5)}
.cm-panel{position:relative; width:100%; max-width:520px; max-height:86vh; overflow:auto; background:#fff; border-radius:20px; box-shadow:var(--shadow-lg); padding:26px 26px 22px}
.cm-head{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:8px}
.cm-head h2{font-size:20px}
.cm-x{border:none; background:transparent; font-size:26px; line-height:1; color:var(--text-muted); cursor:pointer; padding:2px 6px; border-radius:8px}
.cm-x:hover{color:var(--text-strong); background:var(--hairline-soft)}
.cm-intro{font-size:13px; color:var(--text-muted); line-height:1.55; margin:0 0 14px}
.cm-intro a{color:var(--cerulean-deep); font-weight:600}
.cm-cat{display:block; padding:16px 0; border-top:1px solid var(--hairline-soft)}
.cm-cat-top{display:flex; align-items:center; justify-content:space-between; gap:12px}
.cm-cat-name{font-size:15px; font-weight:600; color:var(--text-strong)}
.cm-cat p{font-size:12.5px; color:var(--text-muted); line-height:1.5; margin:7px 0 0}
.cm-locked{font-size:11.5px; font-weight:600; color:var(--cerulean-deep); letter-spacing:.02em; flex:none}
.cm-foot{display:flex; gap:10px; margin-top:20px; flex-wrap:wrap}
.cm-foot .btn{flex:1; justify-content:center; min-width:120px}
.switch{position:relative; display:inline-flex; flex:none; width:44px; height:26px; cursor:pointer}
.switch input{position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer}
.switch .track{position:absolute; inset:0; background:var(--hairline); border-radius:999px; transition:background .2s}
.switch .track::after{content:""; position:absolute; top:3px; left:3px; width:20px; height:20px; background:#fff; border-radius:50%; box-shadow:0 1px 3px rgba(28,34,46,.3); transition:transform .2s}
.switch input:checked + .track{background:var(--cerulean)}
.switch input:checked + .track::after{transform:translateX(18px)}
.switch input:focus-visible + .track{outline:2px solid var(--cerulean); outline-offset:2px}
@media (max-width:720px){
  .cookie-fab{left:14px; bottom:14px; width:40px; height:40px}
  .cm-foot .btn{min-width:96px}
}

/* ---------- Product screenshots + split feature rows ---------- */
.browser{border-radius:16px; overflow:hidden; border:1px solid var(--hairline); box-shadow:var(--shadow-lg); background:#fff}
.browser .bar{display:flex; align-items:center; gap:7px; padding:11px 15px; background:#F3F0EA; border-bottom:1px solid var(--hairline-soft)}
.browser .bar i{width:11px; height:11px; border-radius:50%; background:#D3CCC0}
.browser .bar .url{margin-left:12px; font-size:11.5px; color:var(--text-muted); letter-spacing:.01em}
.browser img{display:block; width:100%; height:auto}
.shot{display:block; width:100%; height:auto; border-radius:14px; border:1px solid var(--hairline); box-shadow:var(--shadow); background:#fff}
.shot-hero{margin-top:clamp(30px,5vw,54px)}
.figure{margin:0}
.figure figcaption{margin-top:14px; font-size:13px; color:var(--text-muted); text-align:center}

.split{display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,64px); align-items:center}
.split + .split{margin-top:clamp(30px,4vw,52px)}
.split .s-copy .eyebrow{margin-bottom:14px}
.split .s-copy h3{font-size:clamp(21px,2.5vw,29px); font-weight:700; color:var(--text-strong); letter-spacing:-.02em; line-height:1.12}
.split .s-copy p{margin-top:14px; font-size:15.5px; line-height:1.6; color:var(--text-muted)}
.split .s-copy .s-list{margin:18px 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:11px}
.split .s-copy .s-list li{position:relative; padding-left:26px; font-size:14.5px; color:var(--text); line-height:1.5}
.split .s-copy .s-list li::before{content:""; position:absolute; left:0; top:6px; width:15px; height:15px; border-radius:50%; background:var(--cerulean-wash);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232E7286' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l4 4L19 7'/%3E%3C/svg%3E"); background-size:11px; background-repeat:no-repeat; background-position:center}
.split.rev .s-media{order:-1}
@media (max-width:860px){ .split{grid-template-columns:1fr; gap:28px} .split.rev .s-media{order:0} }

/* outcome metric columns (module pages) */
.outcomes{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.ocol{background:#fff; border:1px solid var(--hairline); border-radius:16px; padding:26px 24px; box-shadow:var(--shadow-sm)}
.ocol .oc-h{display:flex; align-items:center; gap:8px; font-size:12px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--cerulean-deep); margin-bottom:16px}
.ocol .oc-h em{width:7px; height:7px; border-radius:50%; background:var(--cerulean); font-style:normal}
.ocol .om{padding:15px 0; border-top:1px solid var(--hairline-soft)}
.ocol .om:first-of-type{border-top:none; padding-top:0}
.ocol .om b{display:block; font-size:29px; font-weight:700; color:var(--text-strong); letter-spacing:-.02em; line-height:1}
.ocol .om span{display:block; margin-top:6px; font-size:13px; color:var(--text-muted); line-height:1.42}
@media (max-width:820px){ .outcomes{grid-template-columns:1fr} }
.fail-grid{display:grid; gap:20px}
.callout-line{text-align:center; font-size:clamp(18px,2vw,25px); font-weight:600; color:var(--text-strong); letter-spacing:-.015em; margin:clamp(36px,5vw,56px) auto 0; max-width:34ch}
@media (max-width:820px){ .fail-grid{grid-template-columns:1fr !important} }

/* ---------- Mobile menu ---------- */
.mobile-menu{display:none; position:fixed; inset:var(--nav-h) 0 0; z-index:55; background:var(--ground);
  padding:32px; flex-direction:column; gap:6px}
.mobile-menu.open{display:flex}
.mobile-menu a{font-size:20px; font-weight:600; color:var(--text-strong); padding:15px 0; border-bottom:1px solid var(--hairline-soft)}
.mobile-menu .btn{margin-top:22px; justify-content:center}

/* ---------- Responsive ---------- */
@media (max-width:1000px){
  .source-grid{grid-template-columns:1fr; gap:36px}
  .dom-grid{grid-template-columns:repeat(2,1fr)}
  .trust-grid{grid-template-columns:1fr; gap:44px}
  .console-body{grid-template-columns:1fr}
  .console-side{border-right:none; border-bottom:1px solid rgba(237,234,226,.1); flex-direction:row; flex-wrap:wrap; align-items:center; gap:22px 30px}
  .cs-lanes{margin:0; flex:1; min-width:200px}
}
@media (max-width:900px){
  .nav-links{display:none}
  .nav-right>.btn-primary{display:none}
  .nav-right .nav-pill{display:none}
  .menu-btn{display:grid}
  .fail-list{grid-template-columns:1fr 1fr}
  .ben-grid{grid-template-columns:1fr 1fr}
  .source-points{grid-template-columns:1fr 1fr}
}
@media (max-width:620px){
  .wrap{padding:0 20px}
  .fail-list,.ben-grid,.dom-grid,.source-points{grid-template-columns:1fr}
  .loop-track{grid-template-columns:1fr; gap:26px}
  .step{padding:0}
  .step:not(:last-child)::after{display:none}
  .form-row{flex-direction:column}
  .form select{width:100%}
  .hero-cta{gap:12px}
  .hero-cta .btn{width:100%; justify-content:center}
  .footer .top{flex-direction:column; gap:30px}
}
/* ============================================================
   Multi-page components (mega-menu, product grid, proof, faq, footer)
   ============================================================ */

/* Products mega-menu */
.nav .wrap{position:relative}
.nav-mega{position:static; height:100%; display:flex; align-items:center}
.nav-mega-btn{appearance:none; background:none; border:none; font:inherit; font-size:14.5px; font-weight:500; color:inherit; cursor:pointer; display:inline-flex; align-items:center; gap:5px; padding:0}
.nav-mega-btn .chev{font-size:17px; line-height:1; opacity:.6; transition:transform .25s}
.nav-mega.open .nav-mega-btn .chev{transform:rotate(90deg)}
.nav .nav-mega-btn{color:rgba(240,237,229,.82)}
.nav .nav-mega-btn:hover{color:#fff}
.nav.scrolled .nav-mega-btn{color:var(--text-muted)}
.nav.scrolled .nav-mega-btn:hover{color:var(--text-strong)}
.mega{position:absolute; top:100%; left:0; right:0; margin:14px auto 0; width:min(960px,92vw);
  background:var(--surface); border:1px solid var(--hairline); border-radius:20px; box-shadow:var(--shadow-lg);
  padding:28px; opacity:0; visibility:hidden; transform:translateY(6px); transition:opacity .2s ease, transform .2s ease; z-index:70}
.mega::before{content:""; position:absolute; top:-18px; left:0; right:0; height:18px}
.nav-mega.open .mega{opacity:1; visibility:visible; transform:translateY(0)}
.mega-inner{display:grid; grid-template-columns:repeat(4,1fr); gap:26px}
.mm-head{display:flex; align-items:center; gap:6px; font-weight:600; font-size:15px; color:var(--text-strong); margin-bottom:5px}
.mm-head .mm-arw{color:var(--cerulean-deep); opacity:0; transition:opacity .2s, transform .2s}
.mm-col:hover .mm-head .mm-arw{opacity:1; transform:translateX(2px)}
.mm-tag{font-size:12px; color:var(--text-muted); margin-bottom:13px; line-height:1.4}
.mm-feats{display:flex; flex-direction:column; gap:8px}
.mm-feats a{font-size:13px; color:var(--text-muted); transition:color .15s}
.mm-feats a:hover{color:var(--cerulean-deep)}
.mm-cta{grid-column:1/-1; border-top:1px solid var(--hairline-soft); margin-top:6px; padding-top:20px;
  display:grid; grid-template-columns:1fr auto; align-items:center; gap:2px 24px}
.mm-cta-h{grid-column:1; font-weight:600; color:var(--text-strong); font-size:15px}
.mm-cta-p{grid-column:1; font-size:13px; color:var(--text-muted); line-height:1.45}
.mm-cta-alt{grid-column:2; justify-self:end; align-self:center;
  font-size:13.5px; font-weight:600; color:var(--text-strong); white-space:nowrap;
  transition:color .15s}
.mm-cta-alt:hover{color:var(--cerulean-deep)}
.mm-cta .btn{grid-column:3; grid-row:1/3}
.mm-cta{grid-template-columns:1fr auto auto}
.nav-login{font-size:13.5px; font-weight:500; transition:color .2s}
.nav .nav-login{color:rgba(240,237,229,.8)}
.nav .nav-login:hover{color:#fff}
.nav.scrolled .nav-login{color:var(--text-muted)}
.nav.scrolled .nav-login:hover{color:var(--text-strong)}
/* buttonized secondary nav actions (Log in = ghost, Contact = soft teal) */
.nav-right .nav-pill{padding:10px 16px; border-radius:10px; font-size:14px; font-weight:600; border:1px solid transparent; line-height:1; transition:background .18s, border-color .18s, color .18s}
.nav-right .nav-pill-ghost{border-color:var(--hairline)}
.nav-right .nav-pill-ghost:hover{border-color:var(--cerulean); background:var(--cerulean-wash)}
.nav-right .nav-pill-teal{background:var(--cerulean-wash); border-color:rgba(46,152,178,.26)}
.nav-right .nav-pill-teal:hover{background:#d7e9ed}
.nav .nav-pill-teal,
.nav.nav-bright:not(.scrolled) .nav-pill-teal,
.nav.scrolled .nav-pill-teal{color:var(--cerulean-deep)}
.nav .nav-pill-teal:hover,
.nav.nav-bright:not(.scrolled) .nav-pill-teal:hover,
.nav.scrolled .nav-pill-teal:hover{color:#1D4E5D}
.mobile-menu .mm-label{font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--text-muted); margin-bottom:2px}
/* A product's `features` links, nested under their parent in the phone menu.
   Set apart by size and indent so the parent product still reads as the entry. */
.mobile-menu a.mm-sub{font-size:16px; font-weight:500; color:var(--text-muted); padding:12px 0 12px 18px}

/* Product grid */
.prod-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:20px; margin-top:28px}
.prod-card{display:block; background:var(--surface); border:1px solid var(--hairline); border-radius:18px; padding:28px;
  box-shadow:var(--shadow-sm); transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease}
.prod-card:hover{transform:translateY(-4px); box-shadow:var(--shadow); border-color:var(--cerulean)}
.pc-n{font-size:12px; font-weight:700; letter-spacing:.1em; color:var(--amber-deep); font-variant-numeric:tabular-nums}
.prod-card h3{font-size:21px; font-weight:700; margin:10px 0 6px; letter-spacing:-.02em}
.pc-tag{font-size:15px; font-weight:600; color:var(--cerulean-deep); margin-bottom:13px}
.pc-desc{font-size:14.5px; color:var(--text-muted); line-height:1.55; margin-bottom:20px}
.pc-more{font-size:14px; font-weight:600; color:var(--text-strong); display:inline-flex; align-items:center; gap:7px}
.pc-more .arw{transition:transform .2s}
.prod-card:hover .pc-more{color:var(--cerulean-deep)}
.prod-card:hover .pc-more .arw{transform:translateX(4px)}

/* Three layers */
.layers{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:36px}
.layer-card{background:var(--surface); border:1px solid var(--hairline); border-radius:20px; padding:32px; box-shadow:var(--shadow-sm)}
.lc-k{display:inline-block; font-size:11px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--cerulean-deep);
  padding:5px 13px; border-radius:999px; background:var(--cerulean-wash); margin-bottom:20px}
.layer-card h4{font-size:20px; font-weight:600; margin-bottom:11px; letter-spacing:-.01em}
.layer-card p{font-size:14.5px; color:var(--text-muted); line-height:1.55}

/* Proof */
.proof-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:26px; margin-top:34px}
.proof-stat{border-left:2px solid var(--amber); padding-left:22px}
.ps-n{display:block; font-size:clamp(34px,4vw,48px); font-weight:700; letter-spacing:-.03em; color:var(--text-strong); font-variant-numeric:tabular-nums; line-height:1}
.ps-l{display:block; margin-top:10px; font-size:15px; font-weight:600; color:var(--text-strong)}
.ps-s{display:block; margin-top:6px; font-size:13px; color:var(--text-muted); line-height:1.45}

/* Trust band */
.chip-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:34px}
.wrap > .chip-grid:first-child, .wrap > .outcomes:first-child{margin-top:0}
.chip{background:var(--surface); border:1px solid var(--hairline); border-radius:14px; padding:20px 22px; box-shadow:var(--shadow-sm)}
.chip b{display:block; font-size:15px; font-weight:600; color:var(--text-strong); margin-bottom:5px}
.chip span{font-size:13px; color:var(--text-muted); line-height:1.45}
.trust-more{margin-top:30px; font-size:15px}
.trust-more a{color:var(--cerulean-deep); font-weight:600}

/* FAQ */
.faq-wrap{max-width:840px}
.faq{margin-top:38px; border-top:1px solid var(--hairline)}
.faq details{border-bottom:1px solid var(--hairline)}
.faq summary{cursor:pointer; list-style:none; padding:22px 0; font-size:18px; font-weight:600; color:var(--text-strong);
  display:flex; align-items:center; justify-content:space-between; gap:16px; letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}
.fq-i{position:relative; flex:none; width:16px; height:16px}
.fq-i::before, .fq-i::after{content:""; position:absolute; background:var(--cerulean); border-radius:2px; transition:transform .25s ease}
.fq-i::before{top:7px; left:0; width:16px; height:2px}
.fq-i::after{top:0; left:7px; width:2px; height:16px}
.faq details[open] .fq-i::after{transform:scaleY(0)}
.faq details p{font-size:15px; color:var(--text-muted); line-height:1.6; padding:0 0 24px; max-width:68ch}

/* CTA buttons */
.cta-btns{display:flex; gap:16px; justify-content:center; margin-top:34px; flex-wrap:wrap}

/* Light hero (compact, centered, punchy) */
.hero-light{position:relative; overflow:hidden; text-align:center; background:var(--ground);
  padding:clamp(60px,8vw,104px) 0 clamp(52px,7vw,84px)}
.hero-bg{position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(56% 46% at 50% -8%, rgba(24,153,178,.10), transparent 70%),
             radial-gradient(44% 40% at 84% 6%, rgba(248,154,68,.07), transparent 62%),
             radial-gradient(40% 40% at 14% 22%, rgba(24,153,178,.05), transparent 60%)}
.hero-l-inner{position:relative; z-index:1; max-width:960px; margin:0 auto}
.hero-light h1{font-size:clamp(36px,5.6vw,70px); font-weight:700; letter-spacing:-.03em; line-height:1.05; color:var(--text-strong); text-wrap:balance; margin:0}
.hero-light h1 .accent{color:var(--cerulean-deep)}
.hero-l-sub{margin:24px auto 0; max-width:62ch; font-size:clamp(17px,1.55vw,21px); color:var(--text-muted); line-height:1.55}
.hero-l-cta{display:flex; gap:16px; justify-content:center; margin-top:34px; flex-wrap:wrap}
.hero-l-strip{margin-top:40px; font-size:12.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-muted); font-weight:600}
.btn-outline{background:transparent; color:var(--text-strong); border-color:var(--hairline)}
.btn-outline:hover{border-color:var(--cerulean); color:var(--cerulean-deep)}
.btn-outline .arw{transition:transform .2s} .btn-outline:hover .arw{transform:translateX(4px)}

/* ---- Bright abstract hero (imported design: Hero-B-bright-abstract) ---- */
.top-accent{height:6px; background:#8E2144}
.hero-bright{position:relative; overflow:hidden; margin-top:calc(var(--nav-h) * -1);
  min-height:calc(100vh - 6px); min-height:calc(100svh - 6px);
  display:flex; flex-direction:column; justify-content:center; padding:calc(var(--nav-h) + 18px) 0 44px;
  background:linear-gradient(180deg,#FFFFFF 0%,#FDFCF9 56%,#FAFAF7 100%)}
#bright-canvas{position:absolute; inset:0; width:100%; height:100%; display:block; z-index:0}
.hero-bright-veil{position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(44% 40% at 50% 46%, rgba(255,255,255,.9) 0%, rgba(255,255,255,.48) 62%, rgba(255,255,255,0) 100%)}
.hero-bright-inner{position:relative; z-index:2; max-width:1080px; margin:0 auto; text-align:center; padding:0 24px}
.eyebrow-b{font-size:13px; letter-spacing:.22em; text-transform:uppercase; color:#2E7286; font-weight:600; margin:0 0 22px}
.hero-bright h1{font-size:clamp(31px,4.4vw,56px); line-height:1.06; font-weight:700; letter-spacing:-.025em; color:#16232B; text-wrap:balance; margin:0}
.hero-bright h1 .accent-t{color:#2E7286}
.hero-b-sub{margin:20px auto 0; max-width:760px; font-size:clamp(15px,1.35vw,17px); line-height:1.6; color:#5A656F; text-wrap:pretty}
.hero-b-cta{display:flex; gap:16px; justify-content:center; margin-top:30px; flex-wrap:wrap}
/* On a phone the two buttons and the film cue do not fit one row, and letting
   them wrap left "Request access" alone with the other two off-centre under
   it. So they stack: two buttons of equal width, the film cue centred below. */
@media (max-width:520px){
  .hero-b-cta{flex-direction:column; align-items:stretch; gap:12px; width:100%; max-width:340px; margin-left:auto; margin-right:auto}
  .hero-b-cta .btn{justify-content:center}
  .hero-b-cta .film-cue{align-self:center}
}
.hero-b-strip{margin-top:34px; font-size:12.5px; letter-spacing:.16em; font-weight:600; color:#7A8590; text-transform:uppercase}
.hero-b-strip span{color:#C2BCB0; margin:0 8px}
.btn-amber{background:#E8A05C; color:#2A1B0C; border-color:transparent; box-shadow:0 8px 24px rgba(232,160,92,.32)}
.btn-amber:hover{background:#DE9149; transform:translateY(-1px); box-shadow:0 10px 28px rgba(232,160,92,.4)}
.btn-soft{background:rgba(255,255,255,.62); color:#16232B; border-color:#CFC8BC}
.btn-soft:hover{background:#fff; border-color:#2E7286; color:#1D4E5D}
.btn-soft .arw{transition:transform .2s} .btn-soft:hover .arw{transform:translateX(4px)}

/* nav in bright mode: transparent over warm hero (dark text), solid on scroll */
.nav.nav-bright:not(.scrolled){--mark-node:var(--brand-navy); --mark-edge:var(--brand-navy); background:transparent; border-color:transparent}
.nav.nav-bright:not(.scrolled) .wm{color:#16232B}
.nav.nav-bright:not(.scrolled) .by{color:#6B7681}
.nav.nav-bright:not(.scrolled) .nav-links a,
.nav.nav-bright:not(.scrolled) .nav-mega-btn,
.nav.nav-bright:not(.scrolled) .nav-login{color:#3D4A55}
.nav.nav-bright:not(.scrolled) .nav-links a:hover,
.nav.nav-bright:not(.scrolled) .nav-mega-btn:hover,
.nav.nav-bright:not(.scrolled) .nav-login:hover{color:#16232B}
.nav.nav-bright:not(.scrolled) .theme-btn,
.nav.nav-bright:not(.scrolled) .menu-btn{color:#16232B; border-color:rgba(23,20,15,.2)}

/* compact bright hero for product hubs / inner pages */
.hero-bright.hub{min-height:0; padding:calc(var(--nav-h) + 42px) 0 54px}
.hero-bright.hub .hero-bright-inner{max-width:940px}
.hero-bright.hub h1{font-size:clamp(27px,3.8vw,44px)}
.hub-stat{margin-top:24px; font-size:14px; letter-spacing:.02em; color:#5A656F}
.hub-stat b{color:#16232B; font-weight:600}

/* ---- Product hub components ---- */
.band-muted{background:var(--band-grad)}
.stat-band{background:var(--band-grad); padding:clamp(34px,4.2vw,56px) 0}
.stat-band p{font-size:clamp(19px,2.5vw,29px); font-weight:600; color:var(--text-strong); max-width:28ch; margin:0 auto; text-align:center; letter-spacing:-.015em; line-height:1.22}
.stat-band b{color:var(--cerulean-deep)}
.feat-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:34px}
.feat{background:var(--surface); border:1px solid var(--hairline); border-radius:18px; padding:30px; box-shadow:var(--shadow-sm); transition:transform .2s ease, box-shadow .2s ease, border-color .2s}
.feat:hover{transform:translateY(-3px); box-shadow:var(--shadow); border-color:var(--cerulean)}
.feat .fi{width:42px; height:42px; border-radius:12px; background:var(--cerulean-wash); color:var(--cerulean-deep); display:grid; place-items:center; margin-bottom:20px}
.feat .fi svg{width:20px; height:20px}
.feat h4{font-size:18px; font-weight:600; margin-bottom:9px; letter-spacing:-.01em}
.feat p{font-size:14.5px; color:var(--text-muted); line-height:1.5}
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin-top:34px}
.step-item{border-top:2px solid var(--hairline); padding-top:20px}
.step-item .sn{font-size:13px; font-weight:700; color:var(--amber-deep); font-variant-numeric:tabular-nums; letter-spacing:.05em}
.step-item h4{font-size:20px; font-weight:600; margin:12px 0 9px; letter-spacing:-.01em}
.step-item p{font-size:14.5px; color:var(--text-muted); line-height:1.5}
.price-mini{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:34px}
.pt{background:var(--surface); border:1px solid var(--hairline); border-radius:16px; padding:26px 24px; box-shadow:var(--shadow-sm); position:relative}
.pt.hl{border-color:var(--cerulean); box-shadow:var(--shadow)}
.pt .pt-badge{position:absolute; top:-11px; left:24px; font-size:10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#fff; background:var(--cerulean); padding:4px 10px; border-radius:999px}
.pt .pt-n{font-size:14px; font-weight:600; color:var(--text-strong)}
.pt .pt-p{font-size:32px; font-weight:700; margin:10px 0 2px; letter-spacing:-.02em; color:var(--text-strong)}
.pt .pt-p small{font-size:13px; font-weight:500; color:var(--text-muted); letter-spacing:0}
.pt .pt-u{font-size:13px; color:var(--text-muted); line-height:1.45}
.price-note{margin-top:24px; font-size:13.5px; color:var(--text-muted); border-left:2px solid var(--amber); padding:2px 0 2px 14px; max-width:70ch}
.price-foot{margin-top:26px; font-size:15px}
.price-foot a, .cross-more a{color:var(--cerulean-deep); font-weight:600}
.cross-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:34px}
.cross{display:block; background:var(--surface); border:1px solid var(--hairline); border-radius:16px; padding:28px; box-shadow:var(--shadow-sm); transition:transform .2s ease, box-shadow .2s ease, border-color .2s}
.cross:hover{transform:translateY(-3px); box-shadow:var(--shadow); border-color:var(--cerulean)}
.cross h4{font-size:19px; font-weight:600; margin-bottom:8px; letter-spacing:-.01em}
.cross p{font-size:14px; color:var(--text-muted); line-height:1.5; margin-bottom:16px}
.cross .arw2{font-size:14px; font-weight:600; color:var(--text-strong); display:inline-flex; align-items:center; gap:7px}
.cross:hover .arw2{color:var(--cerulean-deep)}
.feature-row{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; margin-top:34px}
.feature-row.rev .fr-text{order:2}
.fr-text h3{font-size:clamp(24px,3vw,34px); font-weight:700; letter-spacing:-.02em; margin-bottom:16px}
.fr-text p{font-size:16px; color:var(--text-muted); line-height:1.6}
.fr-visual{background:var(--surface); border:1px solid var(--hairline); border-radius:20px; min-height:280px; box-shadow:var(--shadow); display:grid; place-items:center; color:var(--text-muted); font-size:13px}
@media (max-width:1000px){
  .feat-grid{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr}
  .price-mini{grid-template-columns:1fr 1fr}
  .cross-grid{grid-template-columns:1fr}
  .feature-row{grid-template-columns:1fr; gap:28px}
  .feature-row.rev .fr-text{order:unset}
}
@media (max-width:620px){
  .feat-grid{grid-template-columns:1fr}
  .price-mini{grid-template-columns:1fr}
}

/* ---- Pricing / enterprise / legal ---- */
.price-head{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap}
.price-head .unit{font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--amber-deep)}
.pt-list{list-style:none; margin:14px 0 0; padding:0; display:flex; flex-direction:column; gap:7px}
.pt-list li{font-size:12.5px; color:var(--text-muted); display:flex; gap:8px; line-height:1.4}
.pt-list li::before{content:"✓"; color:var(--cerulean-deep); font-weight:700; flex:none}
.bundle{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:30px}
.bundle .bd{background:var(--surface); border:1px solid var(--hairline); border-radius:16px; padding:26px; box-shadow:var(--shadow-sm); text-align:center}
.bundle .bd .pct{font-size:34px; font-weight:700; color:var(--cerulean-deep); letter-spacing:-.02em}
.bundle .bd .lb{font-size:14px; color:var(--text-muted); margin-top:4px}
.ent-strip{background:var(--band-grad-diag); border-radius:20px; padding:32px 36px; margin-top:34px; display:flex; align-items:center; justify-content:space-between; gap:28px; flex-wrap:wrap}
.ent-strip h3{font-size:22px; font-weight:700; letter-spacing:-.01em}
.ent-strip p{font-size:15px; color:var(--text-muted); margin-top:6px; max-width:56ch}
.cmp-wrap{overflow-x:auto; margin-top:32px}
.cmp{width:100%; border-collapse:collapse; font-size:14.5px; min-width:640px}
.cmp th,.cmp td{padding:15px 18px; text-align:left; border-bottom:1px solid var(--hairline); vertical-align:top}
.cmp thead th{font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--text-muted); font-weight:600}
.cmp thead th.us{color:var(--cerulean-deep)}
.cmp tbody td:first-child{font-weight:600; color:var(--text-strong)}
.cmp td.us{color:var(--text-strong); font-weight:500}
.stake-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:34px}
.stake{background:var(--surface); border:1px solid var(--hairline); border-radius:16px; padding:26px; box-shadow:var(--shadow-sm)}
.stake .role{font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--cerulean-deep); margin-bottom:6px}
.stake h4{font-size:17px; font-weight:600; margin-bottom:12px}
.stake ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px}
.stake li{font-size:13.5px; color:var(--text-muted); line-height:1.45; padding-left:16px; position:relative}
.stake li::before{content:""; position:absolute; left:0; top:8px; width:6px; height:6px; border-radius:50%; background:var(--amber)}
.legal{max-width:820px; margin:0 auto}
.legal .updated{font-size:13px; color:var(--mist); margin-bottom:24px}
.legal h2{font-size:clamp(22px,2.8vw,30px); font-weight:700; margin:40px 0 12px}
.legal h3{font-size:18px; font-weight:600; margin:26px 0 8px; color:var(--text-strong)}
.legal p,.legal li{font-size:15.5px; color:var(--text-muted); line-height:1.7}
.legal p{margin-bottom:14px}
.legal ul{margin:0 0 16px 22px}
.legal li{margin-bottom:8px}
.legal a{color:var(--cerulean-deep); font-weight:500}
.legal strong{color:var(--text-strong); font-weight:600}
.legal .note{background:var(--cerulean-wash); border-radius:12px; padding:16px 20px; font-size:14px; color:var(--text); margin:20px 0}
.contact-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:34px}
.contact-card{background:var(--surface); border:1px solid var(--hairline); border-radius:16px; padding:28px; box-shadow:var(--shadow-sm)}
.contact-card h4{font-size:18px; font-weight:600; margin-bottom:8px}
.contact-card p{font-size:14px; color:var(--text-muted); line-height:1.5; margin-bottom:14px}
.contact-card a{color:var(--cerulean-deep); font-weight:600; font-size:14.5px}
@media (max-width:1000px){
  .bundle,.stake-grid,.contact-grid{grid-template-columns:1fr 1fr}
  .ent-strip{flex-direction:column; align-items:flex-start}
}
@media (max-width:620px){
  .bundle,.stake-grid,.contact-grid{grid-template-columns:1fr}
}

/* Footer (multi-column) */
.footer .top{display:grid; grid-template-columns:1.5fr 3fr; gap:56px; align-items:start}
.footer .foot-brand{max-width:360px}
.footer .foot-brand .brand{margin-bottom:16px}
.footer .foot-brand .wm{color:var(--text-strong)} .footer .foot-brand .by{color:var(--text-muted)}
.foot-desc{font-size:13.5px; color:var(--text-muted); line-height:1.6; margin-bottom:14px}
.foot-compliance{font-size:12px; color:var(--text-muted); opacity:.9}
.footer .fnav{display:grid; grid-template-columns:repeat(5,1fr); gap:28px}

@media (max-width:1000px){
  .prod-grid{grid-template-columns:1fr}
  .layers{grid-template-columns:1fr}
  .proof-grid{grid-template-columns:1fr 1fr}
  .chip-grid{grid-template-columns:1fr 1fr}
  .mega-inner{grid-template-columns:repeat(2,1fr)}
  .footer .top{grid-template-columns:1fr; gap:36px}
  .footer .fnav{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:620px){
  .proof-grid, .chip-grid{grid-template-columns:1fr}
  .footer .fnav{grid-template-columns:1fr 1fr}
}

/* ============================================================
   Motion & visual polish
   ============================================================ */
main [id]{scroll-margin-top:90px}

/* smoother, more considered reveals */
.reveal{transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1)}
html.anim .reveal{opacity:0; transform:translateY(22px) scale(.994)}

/* hero accent glow */
.hero-h1 .accent{text-shadow:0 0 34px rgba(57,182,211,.4)}

/* nav link underline */
.nav-links a{position:relative}
.nav-links a::after{content:""; position:absolute; left:0; right:100%; bottom:-6px; height:1.5px; background:currentColor; opacity:.6; transition:right .28s cubic-bezier(.2,.7,.2,1)}
.nav-links a:hover::after{right:0}

/* card micro-interactions */
.mq-card{transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease}
.mq-card:hover{transform:translateY(-4px); box-shadow:var(--shadow); border-color:var(--cerulean)}
.fail{transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease}
.fail:hover{transform:translateY(-4px); box-shadow:var(--shadow); border-color:var(--cerulean)}
.dom{transition:background .22s ease}
.dom:hover h4{color:var(--cerulean-deep)}
.ben{transition:background .22s ease}
.ben:hover{background:var(--surface)}
.ben:hover .n{color:var(--amber)}
.trust-item .ck{transition:background .2s ease, color .2s ease}
.trust-item:hover .ck{background:var(--cerulean); color:#fff}

/* the loop: signal flows to closure when it enters view */
html.anim .loop .bead{opacity:0}
html.anim .loop .step:not(:last-child)::after{transform:scaleX(0); transform-origin:left}
@keyframes beadPop{0%{transform:scale(.4); opacity:0} 60%{transform:scale(1.08)} 100%{transform:scale(1); opacity:1}}
@keyframes lineDraw{to{transform:scaleX(1)}}
@keyframes amberPulse{0%,100%{box-shadow:0 0 0 0 rgba(248,154,68,0)} 50%{box-shadow:0 0 0 9px rgba(248,154,68,.15)}}
.loop.in .bead{animation:beadPop .55s cubic-bezier(.2,.85,.3,1.2) both}
.loop.in .step:nth-child(1) .bead{animation-delay:.15s}
.loop.in .step:nth-child(2) .bead{animation-delay:.40s}
.loop.in .step:nth-child(3) .bead{animation-delay:.65s}
.loop.in .step:nth-child(5) .bead{animation-delay:1.15s}
.loop.in .step.final .bead{animation:beadPop .55s cubic-bezier(.2,.85,.3,1.2) .90s both, amberPulse 2.6s ease-in-out 1.7s infinite}
.loop.in .step:not(:last-child)::after{animation:lineDraw .4s ease both}
.loop.in .step:nth-child(1)::after{animation-delay:.32s}
.loop.in .step:nth-child(2)::after{animation-delay:.57s}
.loop.in .step:nth-child(3)::after{animation-delay:.82s}
.loop.in .step:nth-child(4)::after{animation-delay:1.07s}

/* console: closed-row flash */
@keyframes closedFlash{0%{background:rgba(248,154,68,.2); border-color:rgba(248,154,68,.45)} 100%{background:rgba(237,234,226,.04); border-color:rgba(237,234,226,.07)}}
.feed-row.just-closed{animation:closedFlash 1.1s ease}

@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1 !important; transform:none !important; transition:none}
  .mq-track{animation:none}
  #hero-canvas,#cta-canvas{display:none}
  .scroll-cue em::after,.console-live em{animation:none}
  .cs-bar::after{transform:scaleX(1); transition:none}
  .loop .bead{opacity:1 !important; animation:none !important}
  .loop .step:not(:last-child)::after{transform:none !important; animation:none !important}
  .feed-row{animation:none !important}
  .nav-links a::after{transition:none}
}

/* ============================================================
   Gloss pass — bright, floating, subtly-lit surfaces.
   Token-level so it lifts every card/panel across all pages.
   ============================================================ */
.feat, .cross, .pt, .chip, .stake, .bundle .bd, .contact-card,
.layer-card, .ocol, .fail, .prod-card, .mq-card, .stat-band .stake{
  background-image:var(--sheen);
  border-color:rgba(46,38,28,.08);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), var(--shadow-sm);
}
/* crisper, lighter floating shadow on hover across interactive cards */
.feat:hover, .cross:hover, .prod-card:hover, .mq-card:hover, .fail:hover{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), var(--shadow);
}
/* white framed media (screenshots, browser frames) get the same crisp lift */
.pshot, .browser, .shot{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7), var(--shadow-lg);
}
/* glossy accent buttons: faint top-light sheen */
.btn-primary{background-image:linear-gradient(180deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,0) 55%)}
.btn-amber{background-image:linear-gradient(180deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 55%)}

/* =====================================================================
   ADDITIVE - Engage (self-serve) + Value-based care.
   New selectors and modifiers only; no rule above this line is changed.
   ===================================================================== */

/* Three-column tier ladder. Reuses .pt / .pt-list from the 4-up rate card. */
.price-mini.three{grid-template-columns:repeat(3,1fr)}
.pt .pt-cta{display:flex; width:100%; justify-content:center; margin-top:22px}
.pt .pt-job{font-size:13px; color:var(--cerulean-deep); font-weight:600; margin-top:2px}
.pt .pt-p sup{font-size:14px; font-weight:600; top:-.7em; color:var(--text-muted)}

/* Allowance table: a .cmp with numeric columns. */
.cmp.meters th + th, .cmp.meters td + td{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap}
.cmp.meters tbody td:first-child{font-weight:500; color:var(--text)}
.cmp.meters thead th.us{color:var(--cerulean-deep)}

/* Two-up cross cards (audience split). */
.cross-grid.two{grid-template-columns:repeat(2,1fr)}
.cross .cross-k{display:inline-block; font-size:11px; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  color:var(--cerulean-deep); padding:5px 13px; border-radius:999px; background:var(--cerulean-wash); margin-bottom:16px}

/* Product films: a video wearing the same frame as a screenshot. */
video.pshot{background:#0c0f15; cursor:pointer}
.fr-visual.fr-film{min-height:0; padding:0; background:transparent; border:none; box-shadow:none; display:block}
.film-cap{margin-top:14px; font-size:13px; color:var(--text-muted); line-height:1.5}
.film-cap b{color:var(--text-strong); font-weight:600}

/* Program rail: the five value-based models, each with its film. */
.prog{padding-top:clamp(40px,5vw,64px)}
.prog + .prog{border-top:1px solid var(--hairline-soft)}
.prog-head{display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; margin-bottom:6px}
.prog-tag{font-size:11.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--amber-deep);
  border:1px solid var(--amber); border-radius:999px; padding:4px 12px}
.prog-who{font-size:13px; color:var(--text-muted)}
/* Three even columns, not flex-wrap: uneven label lengths otherwise wrap 2+1
   and orphan the third figure. */
.prog-num{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:24px}
.prog-num b{display:block; font-size:26px; font-weight:700; color:var(--text-strong); letter-spacing:-.02em;
  line-height:1; font-variant-numeric:tabular-nums}
.prog-num span{display:block; margin-top:6px; font-size:12.5px; color:var(--text-muted); line-height:1.4}

/* Honest-scope note: what is computed vs what needs a feed. */
.scope{display:grid; grid-template-columns:repeat(2,1fr); gap:22px; margin-top:34px}
.scope-col{background:var(--surface); border:1px solid var(--hairline); border-radius:18px; padding:30px; box-shadow:var(--shadow-sm)}
.scope-col.ask{background:var(--band-grad-diag)}
.scope-col h4{font-size:17px; font-weight:600; margin-bottom:14px; letter-spacing:-.01em}
.scope-col ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px}
.scope-col li{font-size:14px; color:var(--text-muted); line-height:1.5; padding-left:20px; position:relative}
.scope-col li::before{content:"✓"; position:absolute; left:0; color:var(--cerulean-deep); font-weight:700}
.scope-col.ask li::before{content:"→"; color:var(--amber-deep)}

/* First-run rail: what the first ten minutes look like. */
.tenmin{display:grid; grid-template-columns:repeat(4,1fr); gap:22px; margin-top:34px}
.tenmin div{border-top:2px solid var(--hairline); padding-top:20px}
.tenmin .tm-t{font-size:12.5px; font-weight:700; color:var(--amber-deep); letter-spacing:.05em; font-variant-numeric:tabular-nums}
.tenmin h4{font-size:17px; font-weight:600; margin:11px 0 8px; letter-spacing:-.01em}
.tenmin p{font-size:14px; color:var(--text-muted); line-height:1.5}

@media (max-width:1000px){
  .price-mini.three{grid-template-columns:1fr}
  .cross-grid.two{grid-template-columns:1fr}
  .scope{grid-template-columns:1fr}
  .tenmin{grid-template-columns:1fr 1fr}
}
@media (max-width:620px){
  .tenmin{grid-template-columns:1fr}
  .prog-num{grid-template-columns:1fr; gap:18px}
}

/* Links that sit inside muted paragraphs need to look like links (base rule is
   `a{color:inherit}`): the mega-menu footer strip and FAQ answers. */
.mm-cta-p a, .faq details p a{color:var(--cerulean-deep); font-weight:600}

/* The full bar needs its container to be 1180px wide. Measured, not guessed:
   at 1180 the Start free button lands exactly on the padding edge and below it
   the right-hand cluster is clipped, 41px at 1140 and 221px by 960. It was the
   fourth top-level link that first pushed this to 959px; Models and Company
   have since taken it to six items and 1180. body{overflow-x:hidden} hides the
   clipping from any scrollWidth check, so it has to be measured against the
   wrap's own padding edge. Collapse to the burger wherever it does not fit. */
@media (max-width:1179px){
  .nav-links{display:none}
  .nav-right>.btn-primary{display:none}
  .nav-right .nav-pill{display:none}
  .menu-btn{display:grid}
}

/* Film slot: reserves the exact 16:9 frame a product film will occupy, so
   dropping a <video class="pshot"> in later shifts nothing on the page. */
.film-slot{position:relative; width:100%; aspect-ratio:16/9; border-radius:14px; border:1px dashed var(--hairline);
  background:var(--band-grad-diag); display:grid; place-items:center; text-align:center; padding:24px;
  box-shadow:var(--shadow-sm)}
.film-slot .fs-ico{width:50px; height:50px; border-radius:50%; background:var(--cerulean-wash);
  color:var(--cerulean-deep); display:grid; place-items:center; margin:0 auto 14px}
.film-slot .fs-ico svg{width:20px; height:20px}
.film-slot .fs-t{font-size:14px; font-weight:600; color:var(--text-strong)}
.film-slot .fs-s{font-size:12.5px; color:var(--text-muted); margin-top:5px; max-width:36ch; line-height:1.45}
.scene-time{display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; color:var(--amber-deep); background:var(--amber-wash);
  padding:5px 13px; border-radius:999px; margin-bottom:16px; font-variant-numeric:tabular-nums}
.scene-list{display:flex; flex-direction:column; gap:9px; margin-top:18px}
.scene-list div{display:flex; gap:9px; font-size:14.5px; color:var(--text-muted); line-height:1.5}
.scene-list .ck{color:var(--cerulean-deep); font-weight:700; flex:none}
.scene-modules{display:flex; flex-wrap:wrap; gap:7px; margin-top:20px}
.scene-modules span{font-size:11.5px; font-weight:600; color:var(--text-muted); background:var(--ground-deep);
  border:1px solid var(--hairline-soft); border-radius:999px; padding:4px 11px}
.arch{background:var(--surface); border:1px solid var(--hairline); border-radius:18px; padding:28px 30px;
  box-shadow:var(--shadow-sm); margin-top:20px}
.arch-h{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin-bottom:18px}
.arch-h h4{font-size:17px; font-weight:600; letter-spacing:-.01em}
.arch-h span{font-size:12.5px; color:var(--text-muted)}
.arch-row{display:flex; flex-wrap:wrap; gap:8px}
.arch-row b{font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--cerulean-deep); align-self:center; margin-right:4px; min-width:78px}
.arch-row i{font-style:normal; font-size:13px; font-weight:500; color:var(--text); background:var(--ground-deep);
  border:1px solid var(--hairline-soft); border-radius:9px; padding:7px 13px}
.arch-row + .arch-row{margin-top:10px}

/* The hero strip now names four capabilities and wraps on most widths; balance
   the lines so the last item is not orphaned on a line of its own. */
.hero-b-strip{text-wrap:balance}

/* Strip items must break at the separators, never inside a term (the hyphen in
   "Omni-channel" was splitting across lines on narrow screens). */
.hero-b-strip .nb{white-space:nowrap}

/* Hero ground: a calm abstract wash instead of the animated lattice and ECG
   ribbon. The #bright-canvas element is gone from the markup, so app.js's
   brightHero() never initialises - no canvas, no rAF loop. The veil above
   still lifts the centre so the headline keeps its contrast. */
.hero-bright{
  background-color:#FAFAF7;
  background-image:url(assets/hero-bg.jpg);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}

/* The strip sat at #7A8590 on a near-white ground (~3.4:1) - too light to read
   and short of WCAG AA for small text. --text takes it to ~11:1, and the
   separator dots were #C2BCB0, effectively invisible. */
/* NB: the words are wrapped in span.nb for the nowrap fix, so the original
   `.hero-b-strip span` rule (written for the separator dots) was colouring the
   words too. Separators are the spans that are NOT .nb. */
.hero-b-strip{color:var(--text)}
.hero-b-strip .nb{color:var(--text)}
.hero-b-strip span:not(.nb){color:var(--mist)}

/* Three-up stakeholder cards. Same cards as the 4-up .stake-grid, three across,
   and it must collapse on the same breakpoints - an inline grid-template on the
   element would outrank the media queries above and stay 3-wide on a phone. */
.stake-grid.three{grid-template-columns:repeat(3,1fr)}
@media (max-width:980px){ .stake-grid.three{grid-template-columns:1fr 1fr} }
@media (max-width:620px){ .stake-grid.three{grid-template-columns:1fr} }

/* Two-up stakeholder cards, for a pair of substantial blocks rather than a row
   of short ones. The base .stake-grid already drops to one column at 620px, and
   a bare `.stake-grid.two` would outrank that and leave two columns on a phone,
   so this is wrapped the other way round. */
@media (min-width:621px){ .stake-grid.two{grid-template-columns:repeat(2,1fr)} }

/* The panel was pure white and it opens over a near-white hero, so its edge
   disappeared. A faint cool tint off the brand teal plus a firmer hairline
   give it a readable edge without turning it into a grey slab. */
.mega{background:linear-gradient(180deg,#FBFDFD 0%,#EDF4F5 100%);
  border-color:rgba(45,55,72,.22)}
/* With no sub-list under it the tag's bottom margin became dead space. */
.mm-col > .mm-tag:last-child{margin-bottom:0}

/* A stake card whose body is one sentence rather than a bullet list. Four
   use cases need the 4-up stake grid, not the 3-up feat grid where the
   fourth card orphans onto its own row. */
.stake > p{font-size:13.5px; color:var(--text-muted); line-height:1.45}

/* A portrait phone capture beside its explanation. The frame is the phone,
   so the fr-visual card treatment comes off and the width is capped, or a
   897px-wide shot fills half the row and dwarfs the text next to it. */
.fr-visual.fr-phone{background:transparent; border:none; box-shadow:none;
  min-height:0; padding:0; display:flex; justify-content:center}
.fr-phone img{width:100%; max-width:340px; height:auto; display:block;
  border-radius:22px; border:1px solid var(--hairline); box-shadow:var(--shadow-lg)}
/* ---------- Hero film ----------
   The tour opens in the hero itself instead of throwing a modal over the page:
   the copy tips back and out, the film tips forward into its place. The video
   is preload="none", so a visitor who never presses play never downloads the
   7MB. No library for this - it is two transitions on two elements, and a
   motion library would weigh more than the effect. */
.hero-bright.has-film{perspective:1500px;
  transition:min-height .46s cubic-bezier(.2,.7,.3,1)}
/* The hero is sized by its copy, which leaves a 16:9 film about 660px wide.
   Opening the tour lets the hero grow so the film is worth watching; the copy
   stays in flow underneath it, so nothing below the hero moves. */
.hero-bright.has-film.film-open{min-height:min(80vh,780px)}
.hero-bright.has-film .hero-bright-inner{
  transition:opacity .3s ease, transform .34s cubic-bezier(.4,0,.2,1)}
.hero-bright.has-film.film-open .hero-bright-inner{
  opacity:0; transform:translateY(-20px) rotateX(-8deg); pointer-events:none}

.film-btn{display:inline-flex; align-items:center; gap:10px}
.film-play{width:0; height:0; border-style:solid; border-width:5.5px 0 5.5px 9px;
  border-color:transparent transparent transparent currentColor; flex:none}
.film-dur{font-variant-numeric:tabular-nums; opacity:.6; font-weight:500}

.hero-film{position:absolute; z-index:3;
  top:calc(var(--nav-h) + 42px); right:24px; bottom:54px; left:24px;
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transform:translateY(16px) rotateX(10deg) scale(.94);
  transform-origin:50% 100%;
  transition:opacity .4s ease, transform .46s cubic-bezier(.2,.7,.3,1), visibility .46s}
.film-open .hero-film{opacity:1; visibility:visible; transform:none}
/* The stage is exactly the film, so the close button sits on its corner
   rather than at the far edge of a full-width container. */
.hero-film-stage{position:relative; height:100%; max-width:100%; display:flex}
.hero-film video{height:100%; width:auto; max-width:100%; max-height:100%;
  aspect-ratio:16/9; display:block; border-radius:16px; background:#0F1319;
  border:1px solid var(--hairline); box-shadow:var(--shadow-lg)}
.hero-film-close{position:absolute; top:-13px; right:-13px; z-index:4;
  width:34px; height:34px; border-radius:50%; border:1px solid var(--hairline);
  background:var(--surface); color:var(--text-muted); font-size:20px; line-height:1;
  cursor:pointer; display:grid; place-items:center; box-shadow:var(--shadow-sm);
  transition:color .18s, border-color .18s}
.hero-film-close:hover{color:var(--text-strong); border-color:var(--cerulean-deep)}
/* Under ~700px the hero is too short to hold a 16:9 film beside its own
   padding, so the film takes the width and the hero grows to fit it. */
@media (max-width:760px){
  .hero-bright.has-film.film-open{padding-bottom:24px}
  .hero-bright.has-film.film-open{min-height:0}
  .hero-film{position:static; height:auto; padding:0 4px}
  .hero-film-stage{height:auto; width:100%}
  .hero-film video{width:100%; height:auto}
  .hero-bright.has-film.film-open .hero-bright-inner{display:none}
  .hero-film-close{top:-13px; right:-6px}
}
@media (prefers-reduced-motion:reduce){
  .hero-bright.has-film .hero-bright-inner,
  .hero-film{transition-duration:.01ms}
  .hero-bright.has-film.film-open .hero-bright-inner{transform:none}
  .hero-film{transform:none}
}

/* A feature row sitting among product figures breaks the `pfig + pfig`
   adjacency that carries the vertical rhythm, so it has to restate it on
   both sides and match their measure. */
.showcase .feature-row{max-width:1060px; margin-left:auto; margin-right:auto;
  margin-top:clamp(44px,5vw,64px)}
.showcase .feature-row + figure.pfig{margin-top:clamp(44px,5vw,64px)}

/* Connect puts each product shot inside the section whose claim it proves,
   rather than gathering them into one showcase band. That means a figure or a
   feature row can follow a feature grid or an enterprise strip, none of which
   carry a bottom margin, so the spacing has to be stated here. Same measure and
   same rhythm as the `pfig + pfig` pair. */
.feat-grid + figure.pfig,
.cross-grid + figure.pfig,
.ent-strip + figure.pfig{margin-top:clamp(44px,5vw,64px)}
.feat-grid + .feature-row{max-width:1060px; margin-left:auto; margin-right:auto;
  margin-top:clamp(44px,5vw,64px)}

/* Scribe's review flow is genuinely four steps, not three, so `.steps` gets a
   count modifier the way `.price-mini` and `.stake-grid` already have one. It
   has to sit inside a min-width query: the base `.steps` collapses to one
   column at 1000px, and a bare `.steps.four` would outrank that and leave four
   columns squeezed onto a phone. */
@media (min-width:1001px){ .steps.four{grid-template-columns:repeat(4,1fr)} }

/* An enterprise strip carries no bottom margin, so a cross-sell grid placed
   after one inherits only its own 34px and reads as part of the strip. Give it
   the same separation a figure gets in the same position. */
.ent-strip + .cross-grid,
.steps + figure.pfig{margin-top:clamp(44px,5vw,64px)}

/* The four product names under the home hero are links now, and they have to
   look pressable without turning into four more boxes under two buttons. So:
   no box at all. Each product is a node on a single hairline - the shape the
   IASORA mark is built from, and the same claim the page makes, four products
   strung on one record. Hover lights the node and draws its underline. */
.hero-b-strip{display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:0 14px; margin-top:32px; font-size:11.5px; letter-spacing:.13em}

.hero-b-strip a.nb{position:relative; display:inline-flex; align-items:center; gap:9px;
  padding:7px 0; transition:color .2s}
/* The node. Amber at rest so the line reads as four warm points rather than a
   run of text, and it opens a halo on hover. */
.hero-b-strip a.nb::before{content:""; flex:0 0 auto; width:6px; height:6px;
  border-radius:50%; background:var(--amber);
  transition:transform .2s, box-shadow .2s}
/* The underline draws from the label's own left edge, clear of the node. */
.hero-b-strip a.nb::after{content:""; position:absolute; left:15px; right:0; bottom:2px;
  height:1px; background:currentColor; transform:scaleX(0); transform-origin:left;
  transition:transform .24s ease}
.hero-b-strip a.nb:hover{color:var(--cerulean-deep)}
.hero-b-strip a.nb:hover::before{transform:scale(1.5); box-shadow:0 0 0 5px var(--amber-wash)}
.hero-b-strip a.nb:hover::after{transform:scaleX(1)}
.hero-b-strip a.nb:focus-visible{outline:2px solid var(--cerulean-deep); outline-offset:4px;
  border-radius:2px}

/* The wire between two nodes. It GROWS into whatever the labels leave, rather
   than starting wide and shrinking: a flex line is broken on hypothetical sizes
   before any shrinking happens, so a wide basis pushed the last product onto a
   second row instead of the wires just closing up. A near-zero basis keeps the
   whole rail on one line, and the wires then stretch to fill it evenly. */
.hero-b-strip .hb-join{flex:1 1 14px; min-width:14px; max-width:64px; height:1px;
  background:var(--hairline); align-self:center}

/* The labels are 639px wide here and the hero column gives 813px; below 900 the
   column starts tracking the viewport, so the type steps down before it has to. */
@media (max-width:900px){
  .hero-b-strip{font-size:10.5px; letter-spacing:.1em; gap:0 10px}
}
/* At 780 the four labels plus their gaps and minimum wires (669px) stop fitting
   the column, and the row would break between a node and its wire, leaving a
   stub hanging at the end of a line. Below this the products stack on the
   hero's centre axis and the wires go away - still four nodes, no boxes. */
@media (max-width:780px){
  /* max-content plus auto margins centres the block while leaving the items
     flush left inside it, so the four nodes share one axis instead of drifting
     with each label's length. The rail then just turns on its side. */
  .hero-b-strip{position:relative; flex-direction:column; align-items:flex-start;
    width:max-content; max-width:100%; margin:28px auto 0; gap:14px 0}
  .hero-b-strip .hb-join{display:none}
  /* The padding takes each row to 33px, well clear of the 24px minimum target,
     and the 14px gap keeps the four apart. The rail is inset by half a row so
     it starts and ends under the first and last node instead of overshooting. */
  .hero-b-strip a.nb{padding:8px 0}
  .hero-b-strip::before{content:""; position:absolute; left:2px; width:1px;
    top:16px; bottom:16px; background:var(--hairline)}
}
@media (prefers-reduced-motion:reduce){
  .hero-b-strip a.nb::after{transition-duration:.01ms}
  .hero-b-strip a.nb:hover::before{transform:none}
}

/* On the home page the four products are the way into the site, so they are
   set as names rather than as a small-caps caption: title case, full size, a
   larger node. Title case is also narrower than tracked capitals, so the row
   still fits the hero column at the same breakpoints. The models page's .short
   rail keeps the caption treatment. */
.hero-b-strip:not(.short){margin-top:38px; gap:0 8px; font-size:16px; letter-spacing:0;
  text-transform:none; font-weight:600}
.hero-b-strip:not(.short) .nb{color:var(--text-strong)}
.hero-b-strip:not(.short) a.nb{gap:11px}
.hero-b-strip:not(.short) a.nb::before{width:9px; height:9px}
.hero-b-strip:not(.short) a.nb::after{left:20px; height:1.5px}
@media (max-width:900px){
  .hero-b-strip:not(.short){font-size:13.5px; gap:0 4px}
}
@media (max-width:780px){
  .hero-b-strip:not(.short){gap:12px 0}
  .hero-b-strip:not(.short)::before{left:4px}
}

/* The execution loop above the approval screenshot. Six steps is the actual
   defensible claim - not the number of agents - so it gets its own line rather
   than a sentence you skim. Same node-and-wire idiom as the hero product rail,
   with the node carrying the step number: a chain reads as one loop, where six
   cards would read as six more features. */
.loop{list-style:none; margin:26px auto 0; padding:0; max-width:1000px;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:0 12px; font-size:11.5px; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; color:var(--text)}
.loop li{display:inline-flex; align-items:center; gap:9px; white-space:nowrap}
.loop .lp-n{flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center;
  width:21px; height:21px; border-radius:50%; background:var(--amber-wash);
  color:var(--amber-deep); font-size:10.5px; letter-spacing:0}
/* The wire rides on the item that follows it, so it can never be left stranded
   at the end of a row. It grows into the leftover width for the same reason the
   hero rail does: a flex line breaks on hypothetical sizes, before shrinking. */
.loop li + li::before{content:""; flex:1 1 12px; min-width:10px; max-width:34px;
  height:1px; margin-right:12px; background:var(--hairline)}

/* Below this the six steps stop fitting one line, and a chain that wraps
   mid-sequence stops reading as a sequence. Same answer as the hero: turn it on
   its side, one shared axis, wires off. */
@media (max-width:900px){
  .loop{flex-direction:column; align-items:flex-start; width:max-content;
    max-width:100%; gap:12px 0; position:relative}
  .loop li + li::before{display:none}
  .loop::before{content:""; position:absolute; left:10px; width:1px;
    top:16px; bottom:16px; background:var(--hairline)}
  /* The node's own fill hides the wire where it passes behind; it does not need
     a knockout ring, and a ring would have to match .showcase's gradient. */
  .loop .lp-n{position:relative; z-index:1}
}

/* The agent marquee was reported rendering as solid black cards. It does not
   reproduce in Chromium or WebKit at any viewport - both paint the cards white
   from `--surface` - which points at the browser inverting the page itself
   rather than at a rule here. Chrome's auto-dark and the dark-mode extensions
   both do that, and both stand down when a document states its scheme. The
   palette is a single committed light design with no dark variables, so saying
   so is accurate as well as a fix. */
:root{color-scheme:only light}

/* ---------- UI review pass: contrast, tracking, footer, secondary CTA ---------- */

/* Body copy sat at 5.49:1 on the cream ground. That clears AA, but only just,
   and it is the small descriptions and footer links where it showed. One notch
   darker takes it to 6.59:1 and keeps the softness the palette is built on.
   Overriding the token rather than the rules so every surface moves together. */
:root{--text-muted:#4E5B6E}

/* The eyebrows were tracked at .17em and .22em, wide enough to read as
   decoration sitting apart from the type it introduces. Still unmistakably a
   label, just part of the same system now. */
.eyebrow{letter-spacing:.14em}
.eyebrow-b{letter-spacing:.18em}

/* Footer: five columns in a 3fr track leaves ~102px each, so half the links
   wrap. The wrap is not the problem - at 1.6 line-height a wrapped link broke
   into what looked like two links. Tighter leading binds each entry, a slightly
   larger row gap keeps separate entries apart, and giving the nav more of the
   row buys back the width the brand column was not using. */
.footer .col a{line-height:1.35}
.footer .col{gap:14px}
@media (min-width:981px){
  .footer .top{grid-template-columns:1.25fr 3.3fr}
  .footer .fnav{column-gap:32px}
}

/* The two CTA buttons carried near-identical visual weight, so the amber one
   was not reading as the primary. Dropping the outline's border keeps the
   secondary legible while letting the filled button lead. */
.btn-line{border-color:rgba(255,255,255,.18)}
.btn-line:hover{border-color:rgba(255,255,255,.85)}

/* Headline leading was set below the ink it has to hold. Poppins renders about
   1.075em from the top of an ascender to the bottom of a descender, so at
   line-height 1.08 (headings) and 1.06 (hero h1) any line that ends on a
   descender and is followed by one starting on an ascender overlaps: engage's
   "coffee." / "Running" measured -0.7px, and 63 multi-line headings across the
   site had under 4px of clearance. 1.16 puts roughly 0.08em of air between the
   ink of one line and the next at every size, which is the least that reads as
   deliberate rather than as a collision. It is leading, not padding: padding
   would move the block without separating the lines inside it. */
h1,h2,h3,h4,h5{line-height:1.16}
.hero-bright h1{line-height:1.16}

/* The footer nav was pinned to five columns. Platform is held out for now and
   goes back in later, so pin nothing: four columns by default, five as soon as
   a fifth exists. Restoring the column in site.js is then the only edit needed,
   with no matching change here to remember. */
@media (min-width:981px){
  .footer .fnav{grid-template-columns:repeat(4,1fr)}
  .footer .fnav:has(.col:nth-child(5)){grid-template-columns:repeat(5,1fr)}
}

/* Confirmation for a mailto: that no mail client answered. Bottom-centre so it
   does not sit under the chat bubble in the corner, and above everything else
   because it is the only feedback that click produces. */
.mail-toast{position:fixed; left:50%; bottom:26px; transform:translate(-50%,14px);
  z-index:9999; max-width:min(92vw,420px); padding:12px 18px; border-radius:999px;
  background:var(--text-strong); color:#fff; font-size:14px; font-weight:500;
  box-shadow:var(--shadow-lg); opacity:0; transition:opacity .25s ease, transform .25s ease;
  pointer-events:none; text-align:center}
.mail-toast.in{opacity:1; transform:translate(-50%,0)}
@media (prefers-reduced-motion:reduce){ .mail-toast{transition-duration:.01ms} }

/* ---------- Capability rail (Connect CRM) ---------- */
/* The CRM hero says what the CRM does, which undersells it: the whole platform
   comes with it. Fourteen tiles say that faster than a paragraph, and each one
   is a link, so the rail doubles as the route into every product page rather
   than being decoration. Seven across, so it reads as two even rows. */
/* auto-rows:1fr so a two-line label in the first row does not leave the second
   row shorter than it; every tile is the same box whatever its label does. */
.cap-grid{display:grid; grid-template-columns:repeat(7,1fr); grid-auto-rows:1fr;
  gap:12px; margin-top:32px}
.cap{display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  gap:11px; text-align:center; padding:18px 10px 16px; border-radius:14px;
  background:var(--surface); border:1px solid var(--hairline); box-shadow:var(--shadow-sm);
  font-size:12.5px; font-weight:600; color:var(--text-strong); line-height:1.3;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease}
.cap:hover{transform:translateY(-3px); box-shadow:var(--shadow); border-color:var(--cerulean)}
.cap .ci{flex:0 0 auto; width:34px; height:34px; display:flex; align-items:center;
  justify-content:center; border-radius:10px; background:var(--cerulean-wash);
  color:var(--cerulean-deep)}
.cap .ci svg{width:18px; height:18px}
.cap-grid + .trust-more{margin-top:26px}

@media (max-width:1080px){ .cap-grid{grid-template-columns:repeat(5,1fr)} }
@media (max-width:820px){ .cap-grid{grid-template-columns:repeat(4,1fr)} }
@media (max-width:600px){ .cap-grid{grid-template-columns:repeat(3,1fr); gap:10px} }
@media (max-width:400px){ .cap-grid{grid-template-columns:repeat(2,1fr)} }

/* Compact variant of the capability rail, for use inside a hero. The point of
   the rail is that a buyer sees the breadth before scrolling, so on the CRM
   page it lives in the hero rather than in a section under it, and there is no
   second copy further down. Smaller box, smaller icon, tighter label. */
.cap-grid.mini{gap:9px; margin-top:18px; max-width:1000px; margin-left:auto; margin-right:auto}
.cap-grid.mini .cap{padding:12px 7px 11px; gap:8px; border-radius:12px; font-size:11px;
  letter-spacing:-.005em}
.cap-grid.mini .ci{width:26px; height:26px; border-radius:8px}
.cap-grid.mini .ci svg{width:15px; height:15px}
.cap-lead{margin-top:26px; font-size:13.5px; color:var(--text-muted)}
/* The hero's own trailing line sits closer under the rail than under buttons. */
.cap-grid.mini + .hub-stat{margin-top:20px}
.cap-grid.mini + .hub-stat a{color:var(--cerulean-deep); font-weight:600}

@media (max-width:1080px){ .cap-grid.mini{grid-template-columns:repeat(5,1fr)} }
@media (max-width:820px){ .cap-grid.mini{grid-template-columns:repeat(4,1fr)} }
/* On a phone, fourteen tiles stacked two-up is seven rows and 1200px, which
   puts the whole point of the rail below the fold. One swipeable row keeps the
   breadth on the first screen: three and a bit tiles show, so the cut-off
   fourth is the affordance that says there is more. The scroller owns its own
   overflow; the page never scrolls sideways. */
@media (max-width:600px){
  /* .hero-bright is a column flex container and .hero-bright-inner carries
     margin:0 auto. Auto margins on the cross axis switch off the default
     align-items:stretch, so the inner shrink-to-fits its max-content: normally
     that is text and the 940px max-width caps it harmlessly, but the scroller's
     max-content is 14 x 104px and the inner went to the full 940px inside a
     390px viewport, pushing the whole hero off-screen behind overflow:hidden.
     An explicit width resolves against the container instead of the content.
     Scoped with :has so only a hero that actually holds a scroller changes. */
  .hero-bright-inner:has(.cap-grid.mini){width:100%; min-width:0}
  .cap-grid.mini{display:flex; grid-template-columns:none; gap:8px; width:100%;
    overflow-x:auto; scroll-snap-type:x proximity; padding-bottom:6px;
    scrollbar-width:none; -webkit-overflow-scrolling:touch}
  .cap-grid.mini::-webkit-scrollbar{display:none}
  .cap-grid.mini .cap{flex:0 0 104px; scroll-snap-align:start}
}

/* The hero rail's stacking breakpoint is set for the home page's long product
   names. Six one-word model names are a fraction of that width, so on a tablet
   they would stack into six near-empty rows while the row still fits. This
   modifier holds the horizontal form down to where these labels actually stop
   fitting, and inherits everything else. */
@media (min-width:521px) and (max-width:780px){
  .hero-b-strip.short{flex-direction:row; width:auto; margin-left:0; margin-right:0;
    align-items:center; gap:0 10px}
  .hero-b-strip.short .hb-join{display:block; flex:1 1 12px; min-width:10px; max-width:40px}
  .hero-b-strip.short::before{display:none}
  .hero-b-strip.short a.nb{padding:7px 0}
}

/* ---------- Agent workforce (Models) ---------- */
/* Ported from the Agentic Workflow Diagram design. The design was authored with
   inline hex and px against the omelette runtime; here it is rebuilt on the site
   tokens so it themes with everything else, and the <image-slot> custom element
   is a plain <img> because that component only fills inside the design tool. */
.agents{display:grid; grid-template-columns:repeat(auto-fit,minmax(196px,1fr));
  gap:14px; margin-top:34px}
.agent{display:flex; flex-direction:column; overflow:hidden; border-radius:16px;
  background:var(--surface); border:1px solid var(--hairline); box-shadow:var(--shadow-sm);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease}
.agent:hover{transform:translateY(-3px); box-shadow:var(--shadow); border-color:var(--cerulean)}
/* The supplied portraits are circular with a baked-in alpha, so the card takes
   an avatar rather than the design's full-bleed banner. That suits this page
   better anyway: a row of five faces at 76px reads as a team, where five
   cropped banners read as a stock-photo grid. border-radius is belt and braces
   for any future portrait that arrives square. */
.ag-face{width:76px; height:76px; border-radius:50%; display:block; margin-bottom:3px}
.ag-body{display:flex; flex-direction:column; gap:9px; padding:22px 18px 20px; flex:1}
.ag-role{font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--text-muted)}
.agent h4{font-size:17px; font-weight:600; letter-spacing:-.015em}
.ag-desc{font-size:13px; line-height:1.45; color:var(--text-muted)}
/* The model chips are the point of the card: they say which of the six it is
   made of, so they sit at the bottom edge on a common baseline. */
.ag-models{margin-top:auto; padding-top:6px; display:flex; flex-wrap:wrap; gap:6px}
.ag-models span{font-size:11px; font-weight:600; color:var(--cerulean-deep);
  background:var(--cerulean-wash); border-radius:999px; padding:5px 10px}

.run-arrow{display:flex; justify-content:center; padding:22px 0 4px}
.run-arrow path:first-child{animation:flowdash 2.4s linear infinite}
@keyframes flowdash{to{stroke-dashoffset:-40}}
@media (prefers-reduced-motion:reduce){ .run-arrow path:first-child{animation:none} }

.run-kicker{margin:0 0 14px; text-align:center; font-size:11px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--amber-deep)}
.run{background:var(--surface); border:1px solid var(--hairline); border-radius:18px;
  padding:22px 20px; box-shadow:var(--shadow-sm);
  display:grid; grid-template-columns:repeat(auto-fit,minmax(146px,1fr)); gap:10px}
.run-step{display:flex; flex-direction:column; gap:8px; padding:16px 14px;
  border-radius:12px; background:var(--ground-deep)}
.rs-n{font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--text-muted)}
.rs-t{font-size:17px; font-weight:600; line-height:1.15; color:var(--text-strong)}
.rs-d{font-size:12px; line-height:1.4; color:var(--text-muted)}
.rs-m{margin-top:auto; padding-top:10px; font-size:11px; font-weight:700; color:var(--text-strong)}
/* Step five is the approval gate and the only human step, so it is the one
   inverted card: the eye lands on the thing that is not automated. */
.run-step.gate{background:var(--text-strong)}
.run-step.gate .rs-n{color:var(--amber)}
.run-step.gate .rs-t{color:#fff}
.run-step.gate .rs-d{color:#A8A296}
.run-step.gate .rs-m{color:var(--amber)}

/* ---------- Model layer selector (Models) ---------- */
/* Ported from the Models Section Redesign. Six stacked panels read as a
   shopping list; a rail plus one stage gives each model the room to make its
   own argument, and the claim line carries the point rather than the chips. */
.ml{display:grid; grid-template-columns:236px minmax(0,1fr); gap:0 48px;
  align-items:start; margin-top:34px}
.ml-rail{display:flex; flex-direction:column; border-top:1px solid var(--hairline)}
.ml-item{display:grid; grid-template-columns:24px minmax(0,1fr); gap:14px;
  align-items:start; width:100%; padding:15px 0; text-align:left;
  background:none; border:0; border-bottom:1px solid var(--hairline);
  font:inherit; color:inherit; cursor:pointer; opacity:.42;
  transition:opacity .18s ease}
.ml-item:hover{opacity:.75}
.ml-item[aria-selected="true"]{opacity:1}
.ml-item b{display:block; font-size:19px; font-weight:600; letter-spacing:-.015em; line-height:1.15}
.ml-kind{display:block; margin-top:3px; font-size:12px; color:var(--text-muted)}
.ml-i{width:22px; height:22px; margin-top:3px; color:var(--text-muted)}
.ml-item[aria-selected="true"] .ml-i{color:var(--text-strong)}
.ml-item:focus-visible{outline:2px solid var(--cerulean-deep); outline-offset:3px}

.ml-stage{background:var(--surface); border:1px solid var(--hairline); border-radius:16px;
  padding:clamp(28px,3vw,44px) clamp(24px,3.2vw,48px); min-height:520px;
  box-shadow:var(--shadow-sm)}
.ml-head{display:flex; align-items:center; gap:16px; margin-bottom:22px}
.ml-badge{display:flex; align-items:center; justify-content:center; width:64px; height:64px;
  border-radius:50%; background:var(--amber-wash); color:var(--amber-deep); flex:0 0 auto}
.ml-big{width:34px; height:34px; stroke-width:1.6}
.ml-eyebrow{font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--amber-deep); font-weight:700}
.ml-panel h3{font-size:clamp(30px,3.4vw,44px); line-height:1.04; font-weight:600;
  letter-spacing:-.03em; margin-bottom:18px}
.ml-claim{font-size:clamp(19px,1.8vw,25px); line-height:1.35; font-weight:400;
  letter-spacing:-.018em; max-width:34ch; color:var(--text-strong); margin-bottom:32px;
  text-wrap:pretty}
.ml-rows{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:26px 40px;
  padding-top:30px; border-top:1px solid var(--hairline)}
.ml-rows b{display:block; font-size:10.5px; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--text-muted); margin-bottom:7px}
.ml-rows p{font-size:14px; line-height:1.6; color:var(--text)}

/* The panel swap is a cross-fade so an auto-advance is not a hard cut. */
.ml-panel{animation:mlin .32s ease both}
@keyframes mlin{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none}}

@media (max-width:900px){
  .ml{grid-template-columns:1fr; gap:26px}
  /* The rail turns into a scrollable row of names above the stage: six tall
     rows would push the stage off the first screen entirely. */
  .ml-rail{flex-direction:row; overflow-x:auto; border-top:0; gap:8px;
    scrollbar-width:none; padding-bottom:4px}
  .ml-rail::-webkit-scrollbar{display:none}
  .ml-item{width:auto; flex:0 0 auto; grid-template-columns:20px auto; gap:9px;
    align-items:center; padding:10px 14px; border-bottom:0; border-radius:999px;
    background:var(--surface); border:1px solid var(--hairline)}
  .ml-item b{font-size:14px}
  .ml-kind{display:none}
  .ml-i{margin-top:0; width:18px; height:18px}
  .ml-stage{min-height:0}
  .ml-rows{grid-template-columns:1fr; gap:20px}
}

/* ---------- Leadership ---------- */
/* Three people, stated plainly. No cards, no hover lift, no logo wall: a rule
   above each name is enough structure, and on a leadership page restraint is
   the message. The name is an h2 because on this page each person IS the
   section, and the heading order should say so. */
.team{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(28px,4vw,56px); margin-top:8px}
/* Column, so the LinkedIn link can be pushed to the bottom: the bios are
   different lengths and the icons would otherwise sit at three different
   heights under a shared top rule. */
.member{display:flex; flex-direction:column; border-top:2px solid var(--hairline); padding-top:26px}
.mb-face{width:88px; height:88px; border-radius:50%; object-fit:cover; display:block;
  margin-bottom:20px; background:var(--ground-deep)}
.member h2{font-size:22px; font-weight:600; letter-spacing:-.015em; margin-bottom:4px}
.mb-role{font-size:13px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--cerulean-deep); margin-bottom:14px}
.mb-bio{font-size:15px; line-height:1.6; color:var(--text-muted)}
.team-note{max-width:64ch; margin-top:clamp(40px,5vw,64px); font-size:16px;
  line-height:1.6; color:var(--text-muted)}

@media (max-width:860px){ .team{grid-template-columns:1fr 1fr} }
@media (max-width:600px){ .team{grid-template-columns:1fr; gap:32px} }

/* LinkedIn on a leadership card. Icon only: the page is deliberately quiet and
   the mark is self-explanatory, so the accessible name carries the person's
   name rather than repeating "LinkedIn" six times down the row. */
/* margin-top:auto drops it to the foot of the column; align-self keeps the hit
   area to the icon rather than the full column width. The padding takes the
   target to 28px without changing how big the mark looks. */
.mb-link{display:inline-flex; align-self:flex-start; margin-top:auto;
  padding:14px 8px 0; margin-left:-8px; color:var(--text-muted);
  transition:color .18s ease}
.mb-link svg{width:20px; height:20px; display:block}
.mb-link:hover{color:var(--cerulean-deep)}
.mb-link:focus-visible{outline:2px solid var(--cerulean-deep); outline-offset:4px;
  border-radius:3px}

/* Small nav dropdown, for Company. The Products panel is full-bleed because it
   carries four products and a CTA; two links need a panel the width of the
   links, anchored under its own button rather than stretched across the page. */
.nav-mega:has(.mega-sm){position:relative}
.mega-sm{left:auto; right:auto; width:max-content; min-width:180px; margin:14px 0 0;
  padding:10px}
.mega-sm-inner{display:flex; flex-direction:column}
.mega-sm-inner a{display:block; padding:9px 12px; border-radius:9px; font-size:14.5px;
  font-weight:500; color:var(--text); transition:background .16s ease, color .16s ease}
.mega-sm-inner a:hover{background:var(--cerulean-wash); color:var(--cerulean-deep)}

/* Six top-level items put "Company" hard against the Log in pill. The bar still
   fits at every width, so this is crowding rather than overflow, and the fix is
   to move the space rather than add width: a slightly tighter gap between the
   text links funds a dedicated separation before the button cluster, which
   needs more room than a link does because each pill carries its own border.
   The wrap uses space-between, so only a margin on .nav-right widens that side
   specifically; raising the wrap's gap would push the brand out too. */
@media (min-width:1180px){
  .nav-links{gap:26px}
  .nav-right{margin-left:22px; gap:16px; flex:0 0 auto}
  .nav-right .nav-pill{padding:10px 17px}
  /* Without these the flex items shrink under their own text and "Value-based
     care" and "Log in" break onto two lines inside a 70px bar. Nothing in the
     nav should ever wrap; if it does not fit, the burger takes over instead. */
  .nav-links > a, .nav-mega-btn, .nav-right a{white-space:nowrap}
  .nav-links > a, .nav-mega{flex:0 0 auto}
}

/* The homepage film is an invitation, not a claim. A ring, a triangle and the
   running time say "video, this long" without a verb; the duration is the only
   thing worth promising, because it is the cost of the click rather than a
   boast about what the click buys. It draws the eye on shape alone: a circle
   is the one round thing in a row of rectangles, so it needs no label to be
   found and no weight to compete with "Start free". */
#hero .film-cue{
  display:inline-flex; align-items:center; gap:10px;
  background:none; border:none; padding:10px 6px; cursor:pointer;
  font:inherit; color:var(--text-muted); transition:color .18s ease}
#hero .fc-ring{
  width:34px; height:34px; border-radius:50%; flex:none;
  border:1px solid var(--hairline); background:var(--surface);
  display:grid; place-items:center;
  transition:border-color .18s ease, background .18s ease, transform .18s ease}
/* The triangle is optically centred, not geometrically: its bounding box is the
   full 9px of border, but the visual mass sits left of that. */
#hero .fc-ring .film-play{
  border-width:5px 0 5px 8px; margin-left:2px;
  color:var(--text-strong); transition:color .18s ease}
#hero .fc-dur{font-size:14px; font-weight:500; font-variant-numeric:tabular-nums}
#hero .film-cue:hover{color:var(--text-strong)}
#hero .film-cue:hover .fc-ring{
  border-color:var(--cerulean-deep); background:var(--cerulean-wash); transform:scale(1.06)}
#hero .film-cue:hover .fc-ring .film-play{color:var(--cerulean-deep)}
#hero .film-cue:focus-visible{
  outline:2px solid var(--cerulean-deep); outline-offset:3px; border-radius:24px}
@media (prefers-reduced-motion:reduce){
  #hero .film-cue:hover .fc-ring{transform:none}
}

/* Honeypot. Off-screen rather than display:none, because some bots skip fields
   that are not rendered at all; aria-hidden + tabindex="-1" keep it away from
   screen readers and the tab order. */
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

/* A failed submit needs to say what went wrong, not just tint a border: the
   tint is invisible to a screen reader and ambiguous to everyone else. */
.form-err{margin:0; max-height:0; opacity:0; overflow:hidden;
  color:var(--danger,#B3261E); font-size:14px; line-height:1.5;
  transition:max-height .2s ease, opacity .2s ease, margin .2s ease}
.form-err.show{max-height:5em; opacity:1; margin:2px 0 10px}
.form input[aria-invalid="true"], .form select[aria-invalid="true"]{
  border-color:var(--danger,#B3261E)}
.ts-holder{margin:2px 0 12px}
.ts-holder:empty{display:none}

/* ---------- Platform bento ----------
   A list of module names is a shopping list: it says how many things exist and
   nothing about any of them. Each module is a card that flips to its own
   screenshot and what it actually does, so breadth is shown rather than counted. */
.bento{margin-top:clamp(30px,3.4vw,46px)}
.bt-hint{margin:0 0 14px; font-size:12.5px; color:var(--text-muted)}
.bt-grid{display:flex; flex-direction:column; gap:12px}
.bt-row{display:grid; gap:12px}
.bt-row.one{grid-template-columns:1fr}
.bt-row.two,.bt-row.three{grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr))}
.bt-row.four,.bt-row.six{grid-template-columns:repeat(auto-fit,minmax(min(180px,100%),1fr))}

.bt-found{background:#0B0B0B; color:#F0EDE5; border-radius:14px;
  padding:30px 32px 32px; display:flex; flex-direction:column; min-width:0}
.bf-k{margin:0 0 14px; font-size:10.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--amber); font-weight:600}
.bt-found h3{margin:0 0 12px; font-size:clamp(22px,2.4vw,29px); line-height:1.14;
  letter-spacing:-.025em; color:#F0EDE5}
.bf-d{margin:0 0 24px; font-size:14.5px; line-height:1.6; color:#C9C4B8}
.bf-l{margin:auto 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:8px}
.bf-l li{font-size:13px; font-weight:500; color:#F0EDE5}

/* Each module is a button, not a div: it opens a panel of content, so it has to
   be reachable and operable from the keyboard like any other control. The card
   owns the perspective so each one flips about its own centre rather than a
   shared vanishing point out on the edge of the grid. */
.bt-card{position:relative; border:0; padding:0; background:none; font:inherit;
  color:var(--text); cursor:pointer; min-width:0; text-align:left;
  border-radius:14px; perspective:1400px; min-height:268px;
  transition:transform .18s ease}
.bt-card.lg{min-height:340px}
.bt-card:focus-visible{outline:2px solid var(--cerulean-deep); outline-offset:3px}
.bt-card:hover{transform:translateY(-2px)}

.bt-face{position:absolute; inset:0; border-radius:14px; overflow:hidden;
  display:flex; flex-direction:column; backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.bt-front{background:var(--surface); border:1px solid var(--hairline);
  padding:22px 24px; gap:10px; transform:rotateY(0deg)}
.bt-card.lg .bt-front{padding:26px 28px 28px; gap:0}
.bt-back{transform:rotateY(180deg); background:#0B0B0B; border:1px solid #0B0B0B}
.bt-card:hover .bt-front{transform:rotateY(-180deg)}
.bt-card:hover .bt-back{transform:rotateY(0deg)}

.bc-i{display:block; color:var(--text-strong)}
.bt-card.lg .bc-i{margin-bottom:16px}
.bc-i svg{width:22px; height:22px; display:block}
.bt-card.lg .bc-i svg{width:26px; height:26px}
.bc-k{display:block; font-size:10.5px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--text-muted); font-weight:600; margin-bottom:8px}
.bc-n{display:block; font-size:22px; line-height:1.15; font-weight:600;
  letter-spacing:-.02em; margin-bottom:10px; color:var(--text-strong)}
.bc-n.sm{font-size:17px; letter-spacing:-.015em; margin-bottom:0}
.bc-d{display:block; font-size:14px; line-height:1.55; color:var(--text-muted)}
.bc-d.sm{font-size:13px; line-height:1.5}

/* The screenshot gets its own half of the card rather than sitting behind the
   text as a tinted backdrop: at any usable scrim strength the product was a dark
   smudge nobody could read, which defeats the point of showing it at all. Image
   on top at full strength, bullets on a solid panel under it. */
.bt-back{background:#0B0B0B; border:1px solid #0B0B0B; padding:0}
.bt-back img{position:relative; flex:1 1 auto; min-height:0; width:100%;
  object-fit:cover; object-position:top center; display:block}
.bb-body{position:relative; flex:0 0 auto; background:#0B0B0B;
  padding:14px 18px 16px; display:flex; flex-direction:column; gap:8px}
.bt-card.lg .bb-body{padding:18px 24px 22px; gap:10px}
/* The panel lifts off the screenshot instead of butting against it. */
.bb-body:before{content:''; position:absolute; left:0; right:0; bottom:100%; height:34px;
  background:linear-gradient(180deg,rgba(11,11,11,0) 0%,rgba(11,11,11,.92) 100%); pointer-events:none}
.bb-n{display:block; font-size:14.5px; font-weight:600; letter-spacing:-.01em; color:#F0EDE5}
.bt-card.lg .bb-n{font-size:18px}
.bb-l{margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:6px}
.bb-l li{position:relative; padding-left:15px; font-size:12px; line-height:1.42; color:#D8D3C7}
.bt-card.lg .bb-l li{font-size:13.5px; line-height:1.45}
.bb-l li:before{content:''; position:absolute; left:0; top:.5em;
  width:5px; height:5px; border-radius:50%; background:var(--amber)}

/* Touch has no hover, so the tap has to do the whole job. */
@media (hover:none){
  .bt-card:hover .bt-front{transform:rotateY(0deg)}
  .bt-card:hover .bt-back{transform:rotateY(180deg)}
  .bt-hint{visibility:hidden}
}
/* A flip is the whole effect, so reduced motion gets the same two states as a
   cross-fade rather than nothing happening at all. */
@media (prefers-reduced-motion:reduce){
  .bt-face{transition:opacity .2s ease; backface-visibility:visible;
    -webkit-backface-visibility:visible}
  .bt-back,.bt-card:hover .bt-front{
    transform:none; opacity:0; pointer-events:none}
  .bt-front,.bt-card:hover .bt-back{
    transform:none; opacity:1; pointer-events:auto}
  .bt-card:hover{transform:none}
}

/* Click opens the screenshot at a size worth looking at. The in-card flip is a
   glance; this is the look. One panel is reused for every module rather than 16
   hidden dialogs, and it clones the card's own back face so the copy lives in
   exactly one place. */
.bt-pop{position:fixed; inset:0; z-index:80; display:none;
  align-items:center; justify-content:center; padding:clamp(16px,4vw,48px)}
.bt-pop.open{display:flex}
.bt-pop-veil{position:absolute; inset:0; background:rgba(11,11,11,.62);
  opacity:0; transition:opacity .22s ease}
.bt-pop.open .bt-pop-veil{opacity:1}
.bt-pop-card{position:relative; width:min(920px,100%); max-height:100%;
  overflow:auto; background:#0B0B0B; border-radius:16px; box-shadow:var(--shadow-lg);
  opacity:0; transform:translateY(12px) scale(.985);
  transition:opacity .24s ease, transform .28s cubic-bezier(.2,.7,.3,1)}
.bt-pop.open .bt-pop-card{opacity:1; transform:none}
.bt-pop-card img{display:block; width:100%; height:auto; aspect-ratio:16/9;
  object-fit:cover; object-position:top center}
.bt-pop-card .bb-body{padding:22px 28px 26px; gap:12px}
.bt-pop-card .bb-body:before{height:40px}
.bt-pop-card .bb-n{font-size:20px}
.bt-pop-card .bb-l li{font-size:14px; line-height:1.5; padding-left:17px}
.bt-pop-close{position:absolute; top:12px; right:12px; z-index:2;
  width:36px; height:36px; border-radius:50%; border:1px solid rgba(240,237,229,.28);
  background:rgba(11,11,11,.55); color:#F0EDE5; font-size:20px; line-height:1;
  cursor:pointer; display:grid; place-items:center; backdrop-filter:blur(6px);
  transition:border-color .18s ease, background .18s ease}
.bt-pop-close:hover{border-color:var(--amber); background:rgba(11,11,11,.8)}
@media (prefers-reduced-motion:reduce){
  .bt-pop-veil,.bt-pop-card{transition-duration:.01ms}
}

/* ---------- The three layers under the modules ----------
   These were three stacked boxes of identical grey pills, which reads as a
   shopping list of nouns and tells a buyer nothing. Each item now carries what
   it actually does, on a hairline list rather than in a chip. */
.layers-3{display:grid; gap:clamp(28px,3.4vw,52px); margin-top:clamp(34px,4vw,56px);
  grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr))}
.l3{min-width:0}
.l3-k{margin:0 0 6px; font-size:16.5px; font-weight:600; letter-spacing:-.01em;
  color:var(--text-strong)}
.l3-s{margin:0 0 18px; font-size:13.5px; line-height:1.5; color:var(--text-muted)}
.l3-l{margin:0; display:flex; flex-direction:column}
.l3-l > div{display:flex; flex-direction:column; gap:3px;
  padding:12px 0; border-top:1px solid var(--hairline)}
.l3-l > div:last-child{border-bottom:1px solid var(--hairline)}
.l3-l dt{font-size:13.5px; font-weight:600; color:var(--text-strong)}
.l3-l dd{margin:0; font-size:13px; line-height:1.5; color:var(--text-muted)}
.l3-c{margin:0; padding:0; list-style:none; display:flex; flex-direction:column}
.l3-c li{position:relative; padding:12px 0 12px 26px; font-size:13.5px; line-height:1.5;
  color:var(--text); border-top:1px solid var(--hairline)}
.l3-c li:last-child{border-bottom:1px solid var(--hairline)}
.l3-c li:before{content:''; position:absolute; left:2px; top:1.15em;
  width:9px; height:5px; border-left:1.8px solid var(--amber); border-bottom:1.8px solid var(--amber);
  transform:rotate(-45deg)}