@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(https://wxrftud8go5hre7x.public.blob.vercel-storage.com/delivered/824f485b5d26e2f2.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(https://wxrftud8go5hre7x.public.blob.vercel-storage.com/delivered/19f9c92546aa300c.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(https://wxrftud8go5hre7x.public.blob.vercel-storage.com/delivered/1a189eb997c3e2ec.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(https://wxrftud8go5hre7x.public.blob.vercel-storage.com/delivered/684ad5b531f81d43.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}






.at{--void: #000000;--slate: #0b0b0d;--ink: #0a0a0a;--ink-2: #17171a;--line: rgba(255, 255, 255, .14);--line-2: rgba(255, 255, 255, .3);--txt: #ffffff;--muted: #ffffff;--faint: #ffffff;--warm: #e0563b;--warm-hot: #e8944b;--crimson: #c8102e;--cold: #7fa8ff;--cold-2: #a8c6ff;--green: #4ade80;--ember-ramp: linear-gradient(100deg, #c8102e 0%, #e0563b 55%, #e8944b 100%);--display: "Geist", -apple-system, system-ui, sans-serif;--ui: "Geist", -apple-system, system-ui, sans-serif;--mono: "Geist Mono", ui-monospace, monospace;--max: 1240px;--pad: 30px;--r: 4px;--ease: cubic-bezier(.22, 1, .36, 1);background:var(--void);color:var(--txt);font-family:var(--ui);font-size:16px;font-weight:350;line-height:1.6;position:relative;overflow-x:clip}.at-wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad);position:relative;z-index:2}.at-h1{font-family:var(--display);font-size:clamp(44px,6.4vw,96px);font-weight:400;line-height:1;letter-spacing:-.028em}.at-h2{font-family:var(--display);font-size:clamp(32px,4.3vw,62px);font-weight:400;line-height:1.04;letter-spacing:-.024em}.at-h3{font-family:var(--display);font-size:clamp(22px,2.3vw,30px);font-weight:400;line-height:1.18;letter-spacing:-.018em}.at-em{background:var(--ember-ramp);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-box-decoration-break:clone;box-decoration-break:clone;font-style:italic}.at-mono{font-family:var(--mono);font-size:10.5px;font-weight:400;letter-spacing:.18em;text-transform:uppercase;color:var(--faint)}.at-kicker{font-family:var(--mono);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--txt);display:inline-flex;align-items:center;gap:10px}.at-kicker:before{content:"";width:26px;height:2px;background:var(--txt)}.at-lede{font-size:clamp(16.5px,1.4vw,20px);font-weight:300;line-height:1.58;letter-spacing:-.01em;color:var(--muted)}.at-body{font-size:16px;font-weight:300;line-height:1.72;color:var(--muted)}.at-body+.at-body{margin-top:16px}.at-body strong{color:var(--txt);font-weight:400}.at-btn{display:inline-flex;align-items:center;gap:10px;padding:14px 26px;border-radius:var(--r);font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;border:1px solid transparent;transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease)}.at-btn--solid{background:var(--txt);color:var(--void)}.at-btn--solid:hover{background:#fff;transform:translateY(-1px)}.at-btn--ghost{border-color:var(--line-2);color:var(--txt)}.at-btn--ghost:hover{background:var(--txt);border-color:var(--txt);color:var(--void)}.at-cta{display:flex;gap:12px;flex-wrap:wrap}.at-cta.center{justify-content:center}.at-link{display:inline-flex;align-items:center;gap:9px;margin-top:24px;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--txt);border-bottom:1px solid var(--line-2);padding-bottom:5px;transition:border-color .3s var(--ease)}.at-link:hover{border-bottom-color:var(--txt)}.at-link .ar{transition:transform .3s var(--ease)}.at-link:hover .ar{transform:translate(5px)}.at-sec{padding:132px 0;position:relative;border-top:1px solid var(--line);background:var(--void)}.at-sec--band{background:var(--slate)}.at-sec--plain{border-top:0}.at-head{max-width:780px;margin-bottom:68px}.at-head.center{margin-left:auto;margin-right:auto;text-align:center}.at-head .at-kicker{margin-bottom:24px}.at-head .at-lede{margin-top:22px}.at-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.06fr);gap:72px;align-items:center}@media(min-width:1001px){#service .at-split{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:center}}.at-split.top{align-items:start}.at-split.rev>*:first-child{order:2}.at-split>*{min-width:0}@media(max-width:1000px){.at-split{grid-template-columns:1fr;gap:48px}.at-split.rev>*:first-child{order:0}}.at-canvas{position:relative;width:100%}.at-canvas canvas{display:block;width:100%;height:100%}.at-thread{height:232px}@media(max-width:700px){.at-thread{height:180px}}.at-hero{position:relative;min-height:min(94vh,880px);display:flex;align-items:center;padding:150px 0 96px;overflow:hidden}.at-hero .at-canvas{position:absolute;inset:0;height:100%;z-index:0}.at-hero-in{position:relative;z-index:2;max-width:940px}.at-hero-in:before{content:"";position:absolute;inset:-14% -18%;background:radial-gradient(ellipse at 38% 50%,#07080af0 34%,#07080a00 72%);z-index:-1;pointer-events:none}.at-hero h1{margin:26px 0 28px;max-width:15ch}.at-hero .at-lede{max-width:54ch}.at-hero .at-cta{margin-top:38px}.at-hero-legend{display:flex;gap:30px;margin-top:48px;flex-wrap:wrap}.at-hero-legend div{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}.at-hero-legend i{width:16px;height:2px;display:block;border-radius:2px}.at-hero-legend .cold{background:var(--txt)}.at-hero-legend .warm{background:linear-gradient(90deg,#c8102e,#e8944b)}.at-conv{position:relative;padding:8px 0}.at-conv-svg{display:block;width:100%;height:auto;overflow:visible}.at-conv-flag{font-family:var(--mono);font-size:9px;letter-spacing:.2em;fill:var(--txt)}.at-conv-axis{font-family:var(--mono);font-size:9px;letter-spacing:.18em;fill:var(--faint)}.at-strand{stroke-dasharray:1;stroke-dashoffset:0}.at-conv.is-drawing .at-strand{animation:at-draw 1.5s cubic-bezier(.22,1,.36,1) both;animation-delay:var(--d, 0s)}@keyframes at-draw{0%{stroke-dashoffset:1}to{stroke-dashoffset:0}}.at-strand--split{filter:drop-shadow(0 0 6px rgba(224,86,59,.5))}.at-contest,.at-entry,.at-conv-pos,.at-conv-thesis{opacity:1}.at-conv.is-drawing .at-contest,.at-conv.is-drawing .at-entry,.at-conv.is-drawing .at-conv-pos,.at-conv.is-drawing .at-conv-thesis{animation:at-appear .7s ease both}.at-conv.is-drawing .at-contest{animation-delay:1.5s}.at-conv.is-drawing .at-conv-pos,.at-conv.is-drawing .at-conv-thesis{animation-delay:1.75s}@keyframes at-appear{0%{opacity:0}to{opacity:1}}@media(prefers-reduced-motion:reduce){.at-conv.is-drawing .at-strand,.at-conv.is-drawing .at-contest,.at-conv.is-drawing .at-entry,.at-conv.is-drawing .at-conv-pos,.at-conv.is-drawing .at-conv-thesis{animation:none}}.at-conv-out{position:absolute;inset:0;pointer-events:none}.at-conv-pos{position:absolute;right:0;transform:translateY(-50%);font-size:12.5px;font-weight:300;color:var(--txt);background:var(--void);border:1px solid rgba(224,86,59,.55);border-radius:var(--r);padding:7px 11px;max-width:44%}.at-conv-pos .at-mono{display:block;color:var(--txt);font-size:9px;margin-bottom:3px}.at-conv-thesis{position:absolute;right:0;top:50%;transform:translateY(-50%);font-size:12.5px;font-weight:300;color:var(--txt);background:var(--void);border:1px solid var(--line-2);border-radius:var(--r);padding:7px 11px}.at-conv-thesis .at-mono{display:block;color:var(--txt);font-size:9px;margin-bottom:3px}@media(max-width:700px){.at-conv-pos,.at-conv-thesis{position:static;transform:none;max-width:none;margin-top:8px;display:block}.at-conv-out{position:static;margin-top:14px}.at-conv-rail{display:none}}.at-plate{position:relative;border:1px solid var(--line);border-radius:var(--r);background:var(--void);overflow:hidden}50%{transform:translateY(-16px)}}50%{transform:translateY(-11px)}}50%{transform:translateY(-7px)}}50%{transform:translate(3%,-3%) scale(1.08)}}50%{transform:translateY(-3px)}}@media(prefers-reduced-motion:reduce){.at-cnotify{transition:none;opacity:1;translate:0 0}.at-ctile--team,.at-ctile--msg,.at-ctile--resp,}.at-plate-h{display:flex;align-items:center;gap:12px;padding:13px 18px;border-bottom:1px solid var(--line);flex-wrap:wrap}.at-plate-h .r{margin-left:auto}.at-plate-f{display:flex;align-items:center;gap:14px;padding:12px 18px;border-top:1px solid var(--line);flex-wrap:wrap}.at-plate-f b{font-family:var(--mono);font-size:13px;font-weight:400;color:var(--txt);letter-spacing:.02em}.at-dot{width:6px;height:6px;border-radius:50%;background:var(--warm);display:block;flex:none;animation:at-pulse 2.4s ease-out infinite}@keyframes at-pulse{0%{box-shadow:0 0 #e0563b80}70%{box-shadow:0 0 0 8px #e0563b00}to{box-shadow:0 0 #e0563b00}}@media(prefers-reduced-motion:reduce){.at-dot{animation:none}}.at-cells{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}.at-cells--4{grid-template-columns:repeat(4,1fr)}.at-cells>*{min-width:0}.at-cell{background:var(--void);padding:32px 26px 30px;transition:background .4s var(--ease);position:relative}.at-cell:hover{background:var(--ink-2)}.at-cell .n{font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;color:var(--faint);margin-bottom:20px}.at-cell .t{font-family:var(--display);font-size:23px;line-height:1.16;letter-spacing:-.018em;margin-bottom:10px}.at-cell .d{font-size:14px;font-weight:300;line-height:1.62;color:var(--muted)}.at-cell ul{margin-top:18px;border-top:1px solid var(--line);padding-top:8px}.at-cell li{font-size:12.5px;font-weight:300;line-height:1.5;color:var(--faint);padding:8px 0 8px 18px;position:relative}.at-cell li:before{content:"";position:absolute;left:0;top:13px;width:9px;height:2px;background:var(--txt)}@media(max-width:1040px){.at-cells,.at-cells--4{grid-template-columns:1fr 1fr}}@media(max-width:640px){.at-cells,.at-cells--4{grid-template-columns:1fr}}.at-reg{border-top:1px solid var(--line-2)}.at-reg-row{display:grid;grid-template-columns:44px 1fr;gap:18px;padding:20px 0;border-bottom:1px solid var(--line)}.at-reg-row .n{font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--txt);padding-top:5px}.at-reg-row .t{font-size:17px;font-weight:400;letter-spacing:-.014em;color:var(--txt)}.at-reg-row .d{font-size:14px;font-weight:300;line-height:1.6;color:var(--faint);margin-top:5px}.at-cont{display:flex;align-items:flex-end;gap:5px;height:46px;margin:26px 0 12px}.at-cont i{flex:1;height:22px;background:#ffffff1c;display:block;transform-origin:bottom}.at-cont i.on{height:46px;background:var(--ember-ramp)}.at-cont-l{display:flex;justify-content:space-between;gap:16px}.at-case{background:var(--void);padding:32px 26px 28px;display:flex;flex-direction:column;transition:background .4s var(--ease)}.at-case:hover{background:var(--ink)}.at-case .who{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--txt);margin-bottom:20px}.at-case .q{font-family:var(--display);font-size:24px;line-height:1.14;letter-spacing:-.02em;margin-bottom:24px}.at-case .rw{display:grid;grid-template-columns:48px 1fr;gap:12px;padding:12px 0;border-top:1px solid var(--line);font-size:13px;font-weight:300;line-height:1.58;color:var(--muted)}.at-case .rw .lb{font-family:var(--mono);font-size:9px;letter-spacing:.13em;text-transform:uppercase;color:var(--faint);padding-top:4px}.at-case .pq{margin-top:auto;padding-top:22px;border-top:1px solid var(--line)}.at-case .pq .qt{font-family:var(--display);font-size:18px;font-style:italic;line-height:1.34;color:var(--txt)}.at-case .pq .at{font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--faint);margin-top:12px}.at-rule{display:grid;grid-template-columns:82px 1fr;border-bottom:1px solid var(--line);position:relative;overflow:hidden}.at-rule:last-child{border-bottom:0}.at-rule .id{font-family:var(--mono);font-size:10.5px;color:var(--txt);padding:16px;border-right:1px solid var(--line)}.at-rule .v{padding:16px 18px;font-size:14px;font-weight:300;line-height:1.6;color:var(--muted)}.at-scan{position:absolute;inset:0;width:42%;pointer-events:none;background:linear-gradient(90deg,transparent,rgba(255,255,255,.1),transparent)}.at-badges{display:flex;flex-wrap:wrap;gap:9px;margin-top:30px}.at-badge{font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;padding:9px 15px;border:1px solid var(--line-2);border-radius:var(--r);color:var(--muted);transition:border-color .3s var(--ease),color .3s var(--ease)}.at-badge:hover{background:var(--txt);border-color:var(--txt);color:var(--void)}.at-acc{max-width:900px;margin:0 auto;border-top:1px solid var(--line-2)}.at-q{width:100%;text-align:left;padding:28px 52px 28px 0;border-bottom:1px solid var(--line);position:relative;font-family:var(--display);font-size:clamp(20px,2vw,26px);line-height:1.22;letter-spacing:-.018em;color:var(--txt);transition:color .3s var(--ease)}.at-q:hover,.at-q[aria-expanded=true]{color:var(--txt)}.at-q .pm{position:absolute;right:4px;top:34px;width:14px;height:14px}.at-q .pm span{position:absolute;background:var(--warm)}.at-q .pm .h{left:0;right:0;top:6.5px;height:1px}.at-q .pm .v{top:0;bottom:0;left:6.5px;width:1px;transition:transform .4s var(--ease)}.at-q[aria-expanded=true] .pm .v{transform:scaleY(0)}.at-a{overflow:hidden;border-bottom:1px solid var(--line)}.at-a .in{padding:4px 64px 30px 0;font-size:15.5px;font-weight:300;line-height:1.72;color:var(--muted)}.at-final{position:relative;padding:168px 0;text-align:center;border-top:1px solid var(--line);overflow:hidden;background:var(--void)}.at-final .at-canvas{position:absolute;inset:0;height:100%;z-index:0;opacity:.55}.at-final-in{position:relative;z-index:2}.at-final h2{max-width:29ch;margin:26px auto 24px}.at-final .at-lede{max-width:50ch;margin:0 auto 36px}.at-foot{border-top:1px solid var(--line);padding:62px 0 56px;position:relative;z-index:2;background:var(--void)}.at-foot-top{display:flex;justify-content:space-between;align-items:baseline;gap:24px;flex-wrap:wrap;padding-bottom:40px;border-bottom:1px solid var(--line)}.at-foot-top .tl{font-family:var(--display);font-size:clamp(22px,2.6vw,32px);letter-spacing:-.02em;color:var(--txt)}.at-foot-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;padding-top:40px}.at-foot-cols>*{min-width:0}.at-foot-cols h5{font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--txt);font-weight:400;margin-bottom:18px}.at-foot-cols a{display:block;padding:6px 0;font-size:14px;font-weight:300;color:var(--faint);transition:color .3s var(--ease)}.at-foot-cols a:hover{color:var(--txt)}@media(max-width:700px){.at-foot-cols{grid-template-columns:1fr 1fr}.at-sec{padding:82px 0}.at-hero{padding:118px 0 72px;min-height:auto}.at-final{padding:104px 0}.at{--pad: 20px}}.at :focus-visible{outline:2px solid var(--warm);outline-offset:4px}.at--light{--void: #ffffff;--slate: #eef0f3;--ink: #ffffff;--ink-2: #e2e6ea;--line: rgba(0, 0, 0, .13);--line-2: rgba(0, 0, 0, .3);--txt: #000000;--muted: #000000;--faint: #000000;--warm: #c8102e;--warm-hot: #cf7420;--crimson: #c8102e;--cold: #1b2c66;--cold-2: #2e4aa4;--green: #14663f}.at--light .at-btn--solid{background:var(--txt);color:#fff}.at--light .at-btn--solid:hover{background:var(--warm)}.at--light .at-btn--ghost:hover{background:var(--txt);border-color:var(--txt);color:var(--void)}.at--light .at-hero-in:before{background:radial-gradient(ellipse at 38% 50%,#fffffff5 34%,#fff0 72%)}.at--light .at-hero-legend .cold{background:var(--txt)}.at--light .at-plate,.at--light .at-cell,.at--light .at-case{background:#fff}.at--light .at-cell:hover,.at--light .at-case:hover{background:var(--ink-2)}.at--light .at-cells{background:var(--line)}.at--light .at-cont i{background:#10141c1f}.at--light .at-conv-pos{background:#fff;border-color:#c8102e8c;color:var(--txt)}.at--light .at-conv-thesis{background:#fff;border-color:var(--line-2);color:var(--txt)}.at--light .at-strand--split{filter:none}.at--light .at-scan{background:linear-gradient(90deg,transparent,rgba(0,0,0,.07),transparent)}.at--light .at-final .at-canvas{opacity:.7}.ss{position:relative}.ss-brief{padding:16px 20px 14px;border-bottom:1px solid var(--line)}.ss-brief-k{display:block;font-family:var(--mono);font-size:9.5px;line-height:1;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);margin-bottom:11px}.ss-brief p{font-family:var(--display);font-size:clamp(19px,1.9vw,24px);line-height:1.15;letter-spacing:-.018em;color:var(--txt);max-width:27ch}.ss-table{padding:0 20px 8px}.ss-head,.ss-row{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1.35fr) 46px 66px;column-gap:12px;row-gap:2px;align-items:baseline}.ss-head{padding:9px 0 7px;border-bottom:1px solid var(--line)}.ss-head span{font-family:var(--mono);font-size:8.5px;line-height:1;letter-spacing:.15em;text-transform:uppercase;color:var(--faint)}.ss-row{padding:8px 8px 9px;margin:0 -8px;border-radius:3px;position:relative;transition:background .7s var(--ease)}.ss-a{font-size:13.5px;font-weight:500;line-height:1.2;letter-spacing:-.005em;color:var(--txt)}.ss-seat{font-size:12.5px;line-height:1.2;font-weight:300;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ss-bar{position:absolute;left:8px;right:8px;bottom:0;height:1px;background:var(--line)}.ss-bar i{display:block;height:2px;margin-top:-.5px;background:var(--txt);position:relative;transition:background .7s var(--ease)}.ss-bar i:after{content:"";position:absolute;right:-3px;top:50%;width:7px;height:7px;margin-top:-3.5px;border-radius:50%;background:var(--warm)}.ss-n{font-family:var(--mono);font-size:10.5px;line-height:1.2;font-weight:400;color:var(--faint);text-align:right}.ss-out{font-size:10.5px;line-height:1.2;text-align:right}.ss-id{font-family:var(--mono);font-size:10.5px;letter-spacing:.05em;color:var(--txt);display:inline-block}.ss-open{font-family:var(--mono);font-size:8.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--txt);display:inline-block;border:1px solid var(--line-2);border-radius:2px;padding:2px 6px}.ss-why{grid-column:1 / -1;font-size:11px;font-weight:300;line-height:1.25;color:var(--faint);padding-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ss-row.is-lit .ss-bar i{background:var(--warm)}.ss-row.is-open .ss-bar i:after{background:transparent;border:1px solid var(--faint);width:8px;height:8px;margin-top:-4px;right:-4px}.ss-foot{display:flex;align-items:baseline;gap:15px;padding:11px 20px 12px;border-top:1px solid var(--line);font-family:var(--mono);font-size:9px;line-height:1;letter-spacing:.13em;text-transform:uppercase;color:var(--faint);white-space:nowrap}.ss-foot b{font-size:12.5px;font-weight:400;color:var(--txt);letter-spacing:.02em;margin-right:5px}.ss-foot-note{margin-left:auto;color:var(--txt)}@media(max-width:760px){.ss-head span:nth-child(2),.ss-seat{display:none}.ss-head,.ss-row{grid-template-columns:minmax(0,1fr) 44px 62px}.ss-brief{padding:15px 14px 13px}.ss-table{padding:0 14px}.ss-foot{padding:11px 14px;gap:12px}.ss-foot-note{display:none}.ss-why{font-size:11px}}.hv{position:relative}.hv-head{display:flex;align-items:baseline;gap:14px;padding:11px 20px;border-bottom:1px solid var(--line);flex-wrap:wrap}.hv-count{margin-left:auto;color:var(--muted)}.hv-count b{font-size:13px;font-weight:400;color:var(--warm);letter-spacing:.02em;margin-right:3px}.hv-rows{padding:3px 20px 7px}.hv-row{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.2fr) 70px;column-gap:14px;align-items:baseline;padding:4px 0;border-bottom:1px solid var(--line)}.hv-row:last-child{border-bottom:0}.hv-t{font-size:13px;line-height:1.5;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .35s var(--ease)}.hv-row.is-ours .hv-t{color:var(--txt)}.hv-d{font-size:11.5px;line-height:1.5;font-weight:300;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.hv-who{position:relative;display:block;height:17px}.hv-tag{opacity:1;transition:opacity .28s var(--ease),transform .3s var(--ease);position:absolute;right:0;top:0;font-family:var(--mono);font-size:9px;letter-spacing:.13em;text-transform:uppercase;color:var(--faint);border:1px solid var(--line);border-radius:2px;padding:2px 7px;white-space:nowrap}.hv-tag.is-out{opacity:0}.hv-tag--ours.is-out{transform:translate(6px)}.hv-tag--ours{color:var(--warm);border-color:#c8102e52;background:#c8102e0f}.hv-row--yours{margin-top:5px;padding-top:10px;border-top:1px solid var(--line-2);border-bottom:0}.hv-row--yours .hv-t{font-family:var(--display);font-size:19px;color:var(--txt);letter-spacing:-.015em}.hv-tag--you{position:static;color:var(--txt);border-color:var(--line-2);background:none;float:right}.hv-foot{border-top:1px solid var(--line);padding:12px 20px 13px;background:#c8102e0b}.hv-calls{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:6px}.hv-was{color:var(--faint);text-decoration:line-through}.hv-arrow{color:var(--faint)}.hv-now{color:var(--warm)}.hv-foot p{font-size:12.5px;font-weight:300;line-height:1.55;color:var(--muted)}.hv-foot em{font-style:italic;color:var(--txt)}.hv-foot b{display:block;margin-top:5px;font-weight:400;color:var(--txt)}@media(max-width:760px){.hv-row{grid-template-columns:minmax(0,1fr) 68px}.hv-d{display:none}.hv-rows{padding:4px 14px 8px}.hv-head,.hv-foot{padding-left:14px;padding-right:14px}}.mn{--h: 62px;--max: 1280px;--pad: 28px;--font: system-ui, sans-serif;--mono: ui-monospace, monospace;--bar-bg: rgba(255, 255, 255, .8);--bar-blur: saturate(180%) blur(20px);--bar-line: rgba(0, 0, 0, .08);--ink: #1d1d1f;--muted: #6e6e73;--faint: #a5a5ad;--accent: #c8102e;--item-size: 13.5px;--item-weight: 500;--item-ls: 0;--item-tt: none;--item-hover-bg: rgba(0, 0, 0, .05);--item-radius: 100px;--panel-bg: rgba(251, 251, 253, .97);--panel-line: rgba(0, 0, 0, .08);--panel-shadow: 0 30px 60px -20px rgba(0, 0, 0, .14);--panel-radius: 0px;--link-size: 15px;--link-weight: 600;--link-ls: -.018em;--small-size: 11.5px;--promo-bg: #0b0d12;--promo-text: #fff;--promo-muted: #a5b0bf;--promo-kicker: #e8944b;--promo-radius: 16px;--flag-bg: #e6f4e0;--flag-text: #3b6d11;--btn-radius: 100px;--btn-size: 13px;position:fixed;top:0;left:0;right:0;z-index:300;background:var(--bar-bg);backdrop-filter:var(--bar-blur);-webkit-backdrop-filter:var(--bar-blur);border-bottom:1px solid var(--bar-line);font-family:var(--font);color:var(--ink)}.mn-in{max-width:var(--max);margin:0 auto;padding:0 var(--pad);height:var(--h);display:flex;align-items:center;justify-content:space-between;gap:20px;position:relative}.mn-logo{display:flex;align-items:center;gap:9px;flex:none;color:var(--ink)}.mn-logo svg{width:22px;height:22px;flex:none}.mn-word{font-weight:400;font-size:14px;letter-spacing:.3em}.mn-sub{font-family:var(--mono);font-size:9px;color:var(--muted);letter-spacing:.1em;padding-left:9px;border-left:1px solid var(--bar-line);white-space:nowrap}.mn-items{display:flex;align-items:center;gap:2px;height:100%}.mn-item{height:100%;display:flex;align-items:center}.mn-item>button,.mn-item>a{display:flex;align-items:center;gap:6px;font-family:var(--font);font-size:var(--item-size);font-weight:var(--item-weight);letter-spacing:var(--item-ls);text-transform:var(--item-tt);color:var(--ink);padding:8px 13px;border-radius:var(--item-radius);transition:background .2s ease,color .2s ease;white-space:nowrap}.mn-item>button:hover,.mn-item>a:hover,.mn-item.open>button{background:var(--item-hover-bg)}.mn-chev{opacity:.45;transition:transform .24s ease}.mn-item.open .mn-chev{transform:rotate(180deg)}.mn-cta{display:flex;align-items:center;gap:9px;flex:none}.mn-btn{display:inline-flex;align-items:center;justify-content:center;padding:8px 17px;border-radius:var(--btn-radius);font-size:var(--btn-size);font-weight:600;letter-spacing:-.01em;border:1px solid transparent;white-space:nowrap;transition:background .2s ease,color .2s ease,border-color .2s ease,transform .2s ease}.mn-btn--solid{background:var(--accent);color:#fff}.mn-btn--solid:hover{background:var(--ink)}.mn-btn--ghost{border-color:var(--bar-line);color:var(--ink)}.mn-btn--ghost:hover{border-color:var(--ink)}.mn-mega{position:absolute;top:calc(100% + 1px);left:0;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-6px);transition:opacity .22s ease,transform .22s cubic-bezier(.22,1,.36,1),visibility .22s;background:var(--panel-bg);backdrop-filter:blur(24px) saturate(160%);-webkit-backdrop-filter:blur(24px) saturate(160%);border:1px solid var(--panel-line);border-top:0;border-radius:0 0 var(--panel-radius) var(--panel-radius);box-shadow:var(--panel-shadow);padding:30px 30px 34px;text-align:left;max-height:calc(100vh - var(--h) - 20px);overflow-y:auto}.mn-mega[data-open=true]{opacity:1;visibility:visible;pointer-events:auto;transform:none}.mn-cols{display:flex;gap:42px;align-items:flex-start}.mn-col{flex:1;min-width:0}.mn-col h5{font-size:11.5px;font-weight:400;color:var(--muted);margin-bottom:12px;letter-spacing:.01em}.mn-col a{display:block;padding:6px 0;border-radius:0}.mn-t{display:block;font-size:var(--link-size);font-weight:var(--link-weight);letter-spacing:var(--link-ls);color:var(--ink);transition:color .18s ease}.mn-col a:hover .mn-t{color:var(--accent)}.mn-col a small{display:block;font-size:var(--small-size);color:var(--faint);font-weight:400;line-height:1.4;margin-top:1px}.mn-flag{font-family:var(--mono);font-size:8.5px;letter-spacing:.08em;padding:2px 6px;border-radius:5px;background:var(--flag-bg);border:1px solid var(--flag-border, transparent);color:var(--flag-text);margin-left:6px;text-transform:uppercase;vertical-align:2px;font-weight:500}.mn-promo{flex:0 0 240px;background:var(--promo-bg);border-radius:var(--promo-radius);padding:22px;color:var(--promo-text)}.mn-promo .k{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;color:var(--promo-kicker);margin-bottom:10px}.mn-promo .t{font-size:15px;font-weight:600;letter-spacing:-.015em;margin-bottom:7px}.mn-promo p{font-size:12.5px;color:var(--promo-muted);line-height:1.5;margin-bottom:13px}.mn-promo>a{font-size:12.5px;border-bottom:1px solid currentColor;padding-bottom:2px;display:inline-block;color:var(--promo-text);transition:opacity .2s ease}.mn-promo>a:hover{opacity:.7}.mn-burger{display:none;width:34px;height:34px;position:relative;flex:none}.mn-burger span{position:absolute;left:8px;right:8px;height:1.5px;background:var(--ink);border-radius:2px;transition:transform .28s cubic-bezier(.22,1,.36,1),opacity .2s ease}.mn-burger span:nth-child(1){top:13px}.mn-burger span:nth-child(2){top:19px}.mn-burger span[data-x=true]:nth-child(1){transform:translateY(3px) rotate(45deg)}.mn-burger span[data-x=true]:nth-child(2){transform:translateY(-3px) rotate(-45deg)}.mn-drawer{display:none;background:var(--panel-bg);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);border-top:1px solid var(--bar-line);max-height:calc(100vh - var(--h));overflow-y:auto;padding:10px var(--pad) 30px}.mn-drawer h5{font-size:11px;font-weight:400;color:var(--muted);margin:20px 0 4px;letter-spacing:.08em;text-transform:uppercase}.mn-drawer a{display:block;padding:11px 0;font-size:15.5px;font-weight:600;letter-spacing:-.015em;color:var(--ink);border-bottom:1px solid var(--bar-line)}@media(max-width:1120px){.mn-items{display:none}.mn-burger,.mn-drawer{display:block}.mn-btn--ghost{display:none}}@media(max-width:560px){.mn{--pad: 18px}.mn-sub{display:none}.mn-btn{padding:8px 13px;font-size:12px}}@media(max-width:900px){.mn-cols{flex-direction:column;gap:26px}.mn-promo{flex:1 1 auto;width:100%}}.mn--alpha{--h: 70px;--max: 1360px;--pad: 32px;--font: "Geist", -apple-system, system-ui, sans-serif;--mono: "Geist Mono", ui-monospace, monospace;--bar-bg: rgba(255, 255, 255, .82);--bar-line: #e2e4e9;--ink: #202127;--muted: #666b7a;--faint: #8e94a4;--accent: #2463eb;--item-size: 15px;--item-weight: 600;--item-hover-bg: #f2f4f7;--item-radius: 8px;--panel-bg: rgba(255, 255, 255, .98);--panel-line: #e2e4e9;--panel-shadow: 0 24px 60px -16px rgba(15, 27, 56, .16);--panel-radius: 16px;--link-size: 15px;--link-weight: 600;--link-ls: -.005em;--small-size: 12.5px;--promo-bg: linear-gradient(45deg, #001d3a 0%, #001d3a 65%, #244a80 100%);--promo-kicker: #7fa8ff;--promo-muted: #b3c0d6;--promo-radius: 16px;--flag-bg: #e7f0ff;--flag-text: #2463eb;--btn-radius: 8px;--btn-size: 14px}.mn--alpha .mn-word{letter-spacing:.3em;font-weight:400}.mn--alpha .mn-col h5{font-size:12px;font-weight:700;color:var(--faint);text-transform:uppercase;letter-spacing:.09em}.mn--alpha .mn-col a{padding:8px 10px;margin:0 -10px;border-radius:8px;transition:background .18s ease}.mn--alpha .mn-col a:hover{background:#f2f4f7}.mn--alpha .mn-btn--solid:hover{background:#0f1b38}.mn--vercel{--h: 64px;--max: 1448px;--pad: 24px;--font: "Geist", system-ui, sans-serif;--mono: "Geist Mono", ui-monospace, monospace;--bar-bg: rgba(0, 0, 0, .72);--bar-blur: saturate(180%) blur(18px);--bar-line: #1f1f1f;--ink: #ededed;--muted: #a1a1a1;--faint: #8f8f8f;--accent: #ededed;--item-size: 14px;--item-weight: 400;--item-ls: -.01em;--item-hover-bg: rgba(255, 255, 255, .06);--item-radius: 6px;--panel-bg: rgba(10, 10, 10, .94);--panel-line: #1f1f1f;--panel-shadow: 0 24px 60px -12px rgba(0, 0, 0, .9);--panel-radius: 12px;--link-size: 14px;--link-weight: 450;--link-ls: -.015em;--small-size: 12.5px;--promo-bg: linear-gradient(140deg, #101010, #050505);--promo-kicker: #ededed;--promo-muted: #8f8f8f;--promo-radius: 10px;--flag-bg: rgba(98, 192, 115, .14);--flag-text: #62c073;--btn-radius: 6px;--btn-size: 13.5px}.mn--vercel .mn-word{font-weight:400;letter-spacing:.3em}.mn--vercel .mn-item>button,.mn--vercel .mn-item>a{color:var(--muted)}.mn--vercel .mn-item>button:hover,.mn--vercel .mn-item>a:hover,.mn--vercel .mn-item.open>button{color:var(--ink)}.mn--vercel .mn-col a:hover .mn-t{color:#fff}.mn--vercel .mn-col a{padding:7px 9px;margin:0 -9px;border-radius:6px;transition:background .16s ease}.mn--vercel .mn-col a:hover{background:#ffffff0d}.mn--vercel .mn-btn--solid{background:#ededed;color:#0a0a0a}.mn--vercel .mn-btn--solid:hover{background:#fff}.mn--vercel .mn-btn--ghost{border-color:#1f1f1f;color:var(--muted)}.mn--vercel .mn-btn--ghost:hover{border-color:#2e2e2e;color:var(--ink)}.mn--vercel .mn-promo{position:relative;border:1px solid #1f1f1f;overflow:hidden}.mn--vercel .mn-promo:before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,#00ff95,#ffd000 25%,#ff1744,#9500ff 75%,#00e5ff)}.mn--vercel .mn-promo .k{font-size:9px;letter-spacing:.16em}.mn--micro{--h: 76px;--max: 1440px;--pad: 30px;--font: "Geist", -apple-system, system-ui, sans-serif;--mono: "Geist Mono", ui-monospace, monospace;--bar-bg: rgba(18, 18, 18, .76);--bar-blur: saturate(150%) blur(22px);--bar-line: rgba(255, 255, 255, .1);--ink: rgba(255, 255, 255, .9);--muted: rgba(255, 255, 255, .6);--faint: rgba(255, 255, 255, .4);--accent: #d87756;--item-size: 15px;--item-weight: 400;--item-ls: -.005em;--item-hover-bg: rgba(255, 255, 255, .06);--item-radius: 80px;--panel-bg: rgba(25, 25, 25, .95);--panel-line: rgba(255, 255, 255, .1);--panel-shadow: 0 30px 70px -20px rgba(0, 0, 0, .8);--panel-radius: 20px;--link-size: 16px;--link-weight: 400;--link-ls: 0;--small-size: 13px;--promo-bg: linear-gradient(150deg, rgba(216, 119, 86, .16), rgba(25, 25, 25, .9) 62%);--promo-kicker: #d87756;--promo-muted: rgba(255, 255, 255, .6);--promo-radius: 16px;--flag-bg: rgba(161, 181, 254, .16);--flag-text: #a1b5fe;--btn-radius: 80px;--btn-size: 14px}.mn--micro .mn-word{font-weight:400;letter-spacing:.3em}.mn--micro .mn-col h5{font-size:12px;font-weight:300;color:var(--faint);letter-spacing:.06em;text-transform:uppercase}.mn--micro .mn-col a small{font-weight:300}.mn--micro .mn-col a{padding:9px 11px;margin:0 -11px;border-radius:9.6px;transition:background .2s ease}.mn--micro .mn-col a:hover{background:#ffffff0d}.mn--micro .mn-promo{border:1px solid rgba(255,255,255,.1)}.mn--micro .mn-btn--solid{background:#ffffffeb;color:#121212;font-weight:500}.mn--micro .mn-btn--solid:hover{background:#fff}.mn--micro .mn-btn--ghost{border-color:#ffffff29;color:var(--ink);font-weight:400}.mn--micro .mn-btn--ghost:hover{border-color:#fff6}.mn--microlight{--h: 76px;--max: 1280px;--pad: 30px;--font: "Geist", -apple-system, system-ui, sans-serif;--mono: "Geist Mono", ui-monospace, monospace;--bar-bg: rgba(247, 246, 244, .8);--bar-blur: saturate(150%) blur(22px);--bar-line: rgba(18, 18, 18, .1);--ink: rgba(18, 18, 18, .92);--muted: rgba(18, 18, 18, .58);--faint: rgba(18, 18, 18, .42);--accent: #c1603c;--item-size: 15px;--item-weight: 400;--item-ls: -.005em;--item-hover-bg: rgba(18, 18, 18, .05);--item-radius: 80px;--panel-bg: rgba(255, 255, 255, .98);--panel-line: rgba(18, 18, 18, .1);--panel-shadow: 0 26px 64px -18px rgba(28, 20, 16, .22);--panel-radius: 20px;--link-size: 16px;--link-weight: 400;--link-ls: 0;--small-size: 13px;--promo-bg: linear-gradient(150deg, #262220 0%, #141312 62%);--promo-kicker: #e08c68;--promo-muted: rgba(255, 255, 255, .6);--promo-radius: 16px;--flag-bg: rgba(79, 105, 212, .12);--flag-text: #4157b8;--btn-radius: 80px;--btn-size: 14px}.mn--microlight .mn-word{font-weight:400;letter-spacing:.3em}.mn--microlight .mn-col h5{font-size:12px;font-weight:400;color:var(--faint);letter-spacing:.06em;text-transform:uppercase}.mn--microlight .mn-col a small{font-weight:300}.mn--microlight .mn-col a{padding:9px 11px;margin:0 -11px;border-radius:9.6px;transition:background .2s ease}.mn--microlight .mn-col a:hover{background:#1212120a}.mn--microlight .mn-btn--solid{background:#1c1a19;color:#fff;font-weight:500}.mn--microlight .mn-btn--solid:hover{background:var(--accent)}.mn--microlight .mn-btn--ghost{border-color:#12121229;color:var(--ink);font-weight:400}.mn--microlight .mn-btn--ghost:hover{border-color:#12121266}.mn--atlas{--h: 68px;--max: 1240px;--pad: 30px;--font: "Geist", system-ui, sans-serif;--mono: "Geist Mono", ui-monospace, monospace;--bar-bg: rgba(0, 0, 0, .78);--bar-blur: saturate(160%) blur(20px);--bar-line: rgba(255, 255, 255, .14);--ink: #ffffff;--muted: #ffffff;--faint: #ffffff;--accent: #ffffff;--item-size: 12px;--item-weight: 400;--item-ls: .14em;--item-tt: uppercase;--item-hover-bg: rgba(255, 255, 255, .05);--item-radius: 3px;--panel-bg: rgba(0, 0, 0, .97);--panel-line: rgba(255, 255, 255, .14);--panel-shadow: 0 30px 70px -20px rgba(0, 0, 0, .9);--panel-radius: 4px;--link-size: 15px;--link-weight: 400;--link-ls: -.012em;--small-size: 12.5px;--promo-bg: #ffffff;--promo-text: #000000;--promo-kicker: #000000;--promo-muted: #000000;--promo-radius: 4px;--flag-bg: transparent;--flag-border: rgba(255, 255, 255, .3);--flag-text: #ffffff;--btn-radius: 3px;--btn-size: 11px}.mn--atlas .mn-word{font-weight:400;letter-spacing:.3em}.mn--atlas .mn-item>button,.mn--atlas .mn-item>a{font-family:var(--mono);color:var(--ink)}.mn--atlas .mn-item>button:hover,.mn--atlas .mn-item>a:hover,.mn--atlas .mn-item.open>button{color:var(--ink)}.mn--atlas .mn-col h5{font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink);padding-bottom:9px;border-bottom:1px solid var(--panel-line)}.mn--atlas .mn-col a small{font-weight:300}.mn--atlas .mn-col a{padding:8px 10px;margin:0 -10px;border-radius:3px;transition:background .2s ease}.mn--atlas .mn-col a:hover{background:#ffffff0b}.mn--atlas .mn-btn{font-family:var(--mono);letter-spacing:.16em;text-transform:uppercase;font-weight:400}.mn--atlas .mn-btn--solid{background:#fff;color:#000}.mn--atlas .mn-btn--solid:hover{background:#fff}.mn--atlas .mn-btn--ghost{border-color:#ffffff4d;color:var(--ink)}.mn--atlas .mn-btn--ghost:hover{background:#fff;border-color:#fff;color:#000}.mn--atlaslight{--h: 68px;--max: 1240px;--pad: 30px;--font: "Geist", system-ui, sans-serif;--mono: "Geist Mono", ui-monospace, monospace;--bar-bg: rgba(255, 255, 255, .88);--bar-blur: saturate(160%) blur(20px);--bar-line: rgba(0, 0, 0, .13);--ink: #000000;--muted: #000000;--faint: #000000;--accent: #000000;--item-size: 12px;--item-weight: 400;--item-ls: .14em;--item-tt: uppercase;--item-hover-bg: rgba(16, 20, 28, .05);--item-radius: 3px;--panel-bg: #ffffff;--panel-line: rgba(0, 0, 0, .13);--panel-shadow: 0 26px 64px -20px rgba(16, 20, 28, .2);--panel-radius: 4px;--link-size: 15px;--link-weight: 400;--link-ls: -.012em;--small-size: 12.5px;--promo-bg: #000000;--promo-text: #ffffff;--promo-kicker: #ffffff;--promo-muted: #ffffff;--promo-radius: 4px;--flag-bg: transparent;--flag-border: rgba(0, 0, 0, .3);--flag-text: #000000;--btn-radius: 3px;--btn-size: 11px}.mn--atlaslight .mn-word{font-weight:400;letter-spacing:.3em}.mn--atlaslight .mn-item>button,.mn--atlaslight .mn-item>a{font-family:var(--mono);color:var(--ink)}.mn--atlaslight .mn-item>button:hover,.mn--atlaslight .mn-item>a:hover,.mn--atlaslight .mn-item.open>button{color:var(--ink)}.mn--atlaslight .mn-col h5{font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink);padding-bottom:9px;border-bottom:1px solid var(--panel-line)}.mn--atlaslight .mn-col a small{font-weight:300}.mn--atlaslight .mn-col a{padding:8px 10px;margin:0 -10px;border-radius:3px;transition:background .2s ease}.mn--atlaslight .mn-col a:hover{background:#10141c0a}.mn--atlaslight .mn-btn{font-family:var(--mono);letter-spacing:.16em;text-transform:uppercase;font-weight:400}.mn--atlaslight .mn-btn--solid{background:#000;color:#fff}.mn--atlaslight .mn-btn--solid:hover{background:#000;opacity:.86}.mn--atlaslight .mn-btn--ghost{border-color:#0000004d;color:var(--ink)}.mn--atlaslight .mn-btn--ghost:hover{background:#000;border-color:#000;color:#fff}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}html{-webkit-text-size-adjust:100%}body{overflow-x:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}img,svg{display:block;max-width:100%}button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}a{color:inherit;text-decoration:none}ul{list-style:none}.tnum{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}.vswitch{position:fixed;z-index:400;left:50%;bottom:22px;transform:translate(-50%);display:flex;align-items:center;flex-wrap:wrap;justify-content:center;max-width:min(1180px,calc(100vw - 24px));gap:2px;padding:5px;border-radius:24px;background:#101114b8;backdrop-filter:blur(24px) saturate(180%);-webkit-backdrop-filter:blur(24px) saturate(180%);border:1px solid rgba(255,255,255,.12);box-shadow:0 12px 40px -8px #00000080;font-family:Geist Mono,ui-monospace,monospace;transition:opacity .3s ease,transform .3s ease}.vswitch.dim{opacity:.28}.vswitch:hover{opacity:1}.vswitch button{position:relative;padding:8px 16px;border-radius:100px;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#ffffff85;transition:color .25s ease;white-space:nowrap}.vswitch button:hover{color:#ffffffe6}.vswitch button[data-on=true]{color:#101114}.vswitch .pip{position:absolute;inset:0;border-radius:100px;background:#fff;z-index:-1}.vswitch .num{opacity:.4;margin-right:7px}@media(max-width:560px){.vswitch button{padding:8px 11px;font-size:9px}.vswitch .num{display:none}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}}

@keyframes nx-dots-drift{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-1.2%,1%,0) scale(1.035)}}@keyframes nx-ping{0%{transform:scale(.5);opacity:.22}70%,100%{transform:scale(1.5);opacity:0}}@keyframes nx-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}@media(max-width:1000px){}@media(prefers-reduced-motion:reduce){}.cg{position:relative;width:100%;aspect-ratio:71/70}.cg-photos,.cg-cards{position:absolute;inset:0}.cg-cards{z-index:10}.cg-photo{position:absolute;border-radius:16px;overflow:hidden;background:var(--slate);box-shadow:0 2px 4px rgba(16,20,28,.05),0 30px 55px -28px rgba(16,20,28,.28);will-change:transform,opacity}.cg-photo img{width:100%;height:100%;object-fit:cover;display:block}.cg-ph-client{left:0;top:0;width:42%;aspect-ratio:4/5}.cg-ph-client img{object-position:50% 20%}.cg-ph-research{left:46%;top:23%;width:54%;aspect-ratio:3/2}.cg-ph-analyst{left:4%;top:64.5%;width:52%;aspect-ratio:3/2}.cg-card{position:absolute;background:#fff;border-radius:16px;box-shadow:0 0 0 1px rgba(16,20,28,.055),0 0 28px -4px rgba(16,20,28,.15),0 12px 26px -8px rgba(16,20,28,.20),0 34px 56px -26px rgba(16,20,28,.30);will-change:transform,opacity}.cg-msgcard{left:35%;top:1%;width:35%;padding:15px 17px;box-shadow:0 0 0 1px rgba(16,20,28,.07),0 0 34px -2px rgba(16,20,28,.20),0 14px 30px -8px rgba(16,20,28,.24),0 38px 60px -26px rgba(16,20,28,.34)}.cg-msgcard p{font-size:14.5px;font-weight:400;line-height:1.4;letter-spacing:-.01em;color:#1a1a1a}.cg-msgcard a{color:var(--warm);font-weight:500}.cg-chat{width:42%;padding:14px 16px;left:38%}.cg-chat--client{top:67%}.cg-chat--nextyn{top:83%;left:47%}.cg-chat-h{display:flex;align-items:center;gap:9px;margin-bottom:9px}.cg-av{width:26px;height:26px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:9px;letter-spacing:.02em;color:#fff;background:#3a3d44}.cg-av--nextyn{background:var(--warm)}.cg-nm{font-size:12px;font-weight:600;letter-spacing:-.005em}.cg-tm{font-family:var(--mono);font-size:8.5px;letter-spacing:.02em;color:#00000059;margin-left:2px}.cg-live{display:inline-flex;align-items:center;gap:4px;margin-left:auto;font-family:var(--mono);font-size:8px;letter-spacing:.06em;text-transform:uppercase;color:var(--warm)}.cg-live i{width:5px;height:5px;border-radius:50%;background:var(--warm);display:block;animation:cg-pulse 2.3s ease-out infinite}@keyframes cg-pulse{0%{box-shadow:0 0 rgba(200,16,46,.5)}70%{box-shadow:0 0 0 6px rgba(200,16,46,0)}to{box-shadow:0 0 rgba(200,16,46,0)}}.cg-chat p{font-size:14px;font-weight:400;letter-spacing:-.01em;line-height:1.35;color:#1a1a1a}.cg-vbar{position:absolute;left:60%;top:51%;z-index:11;display:flex;align-items:center;gap:10px;background:#17181c;border-radius:100px;padding:7px 13px;box-shadow:0 12px 24px -10px rgba(0,0,0,.5);will-change:transform,opacity}.cg-vbar .vi{width:12px;height:12px;color:#fff;opacity:.9;display:block}.cg-vbar .vsep{width:1px;height:11px;background:#ffffff33}.cg-vbar .vhang{width:20px;height:20px;border-radius:50%;background:var(--warm);display:flex;align-items:center;justify-content:center}.cg-vbar .vhang svg{width:10px;height:10px;color:#fff}.cg-photo{opacity:0;transform:translateY(22px) scale(.97);transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1)}.cg.in .cg-photo{opacity:1;transform:none}.cg.in .cg-ph-client{transition-delay:0s}.cg.in .cg-ph-research{transition-delay:.14s}.cg.in .cg-ph-analyst{transition-delay:.28s}.cg-cards>*{opacity:0;transform:translateY(22px) scale(.95);transition:opacity .65s cubic-bezier(.22,1,.36,1),transform .65s cubic-bezier(.34,1.5,.64,1)}.cg.in .cg-cards>*{opacity:1;transform:none}.cg.in .cg-msgcard{transition-delay:.40s;animation:cg-drift 4.2s ease-in-out 1.7s infinite alternate}.cg.in .cg-chat--client{transition-delay:.56s;animation:cg-drift 4.6s ease-in-out 2.0s infinite alternate}.cg.in .cg-chat--nextyn{transition-delay:.72s;animation:cg-drift 5.0s ease-in-out 2.3s infinite alternate}.cg.in .cg-vbar{transition-delay:.88s;animation:cg-drift 4.8s ease-in-out 2.6s infinite alternate}@keyframes cg-drift{from{transform:translateY(0)}to{transform:translateY(-4px)}}@media(prefers-reduced-motion:reduce){.cg-live i{animation:none}.cg-photo,.cg-cards>*{opacity:1;transform:none;transition:none;animation:none}}:root{--ok:#0f9d63}.cx{position:relative;display:flex;align-items:flex-start}.cx.in .cx.in .cx.in .cx.in .cx.in .cx.in .cx.in .cx.in .cx.in .cx.in .cx.in .cx.in .cx.in .cx.in .cx.in @media(max-width:1000px){.cx{flex-direction:column;align-items:stretch}}@media(max-width:520px){}@media(prefers-reduced-motion:reduce){}
html,body,#root{font-family:"Geist",-apple-system,system-ui,sans-serif}

/* ---- 3. #platform: heading + graphic on one screen, callouts contained ----
   The callouts used to float over the frame and overhang it. At this width
   three 236px cards cannot overhang without landing on something: they were
   sitting on the lede above, the matrix cells, and the heading below. They now
   sit in a row underneath the frame, inside the stage, so they can never touch
   section content. With nothing overhanging, the side gutters are no longer
   needed and the frame gets ~100px wider, which keeps every claim on one line.
   Nothing is scaled and nothing is removed. */
#platform .at-head{margin-bottom:16px}
#platform .at-head .at-kicker{margin-bottom:16px}
#platform .at-head .at-lede{margin-top:14px}
#platform .iqd-stage{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;padding:20px 0 22px;align-items:stretch}
#platform .iqd{grid-column:1 / -1}
#platform .iqd-float{position:static;max-width:none;margin:0;padding:11px 14px}
#platform .iqd-float p{margin-top:4px;line-height:1.4}
#platform .iqd-f3 .dot{width:28px;height:28px}
/* `.iqd-float b{display:flex}` was meant for the card title, but it matches every
   <b> in the card, including the two inside the counts line. That made "12" and
   "148" block-level, so the line broke into four and the card grew to 118px
   against 66px for the other two. Put the counts back inline. */
#platform .iqd-float p b{display:inline;font-size:inherit;color:inherit;font-weight:600}
/* with the counts on one line all three size alike; stretch keeps them exact */
#platform .iqd-stage{align-items:stretch}
#platform .iqd-f3{align-items:center}
#platform .iqd-f3{display:flex;align-items:center;gap:12px}
#platform .iqd-body{grid-template-columns:minmax(0,1fr) 268px}
#platform .iqd-claim{padding:8px 11px;margin-bottom:6px;gap:10px}
#platform .iqd-bdg{padding:4px 7px}
#platform .iqd-top,#platform .iqd-tab{height:42px}
#platform .iqd-hd{padding:10px 20px 0}
#platform .iqd-sub{margin-top:8px}
#platform .iqd-thesis{padding:11px 14px 12px}
#platform .iqd-tt{margin:8px 0 10px;line-height:1.48}
#platform .iqd-ch{margin:11px 0 7px}
#platform .iqd-grid{grid-template-columns:repeat(8,1fr)}
#platform .iqd-mtx{margin-top:13px}
#platform .iqd-gap{padding:9px 12px;margin-bottom:7px}
#platform .at-split{margin-top:56px !important}

/* ---- 6. real logo, full lockup ----
   The mark is now the complete logo including the wordmark, so the CSS text
   "NEXTYN" beside it has to go or the name appears twice. */
.mn-logo img.mn-mark{height:26px;width:auto;flex:none;display:block}
.mn-logo .mn-word{display:none}

/* ---- 12. buttons: red, inverting on hover ----
   Every button was black. They are red now, with white content, and on hover
   the box goes white while the label, the arrow and the border all turn red. */
/* Specificity matters here: `.at--light .at-btn--solid` and
   `.mn--atlaslight .mn-btn--solid` are both (0,2,0) and would beat a plain
   class, and `.stk-cta` is declared after this block, so it needs an id to
   outrank it. Doubling the class matches (0,2,0) and wins on source order. */
.at-btn.at-btn--solid,.at-btn.at-btn--ghost,
.mn-btn.mn-btn--solid,.mn-btn.mn-btn--ghost,
#services .stk-cta{
  background:var(--warm);color:#fff;border:1px solid var(--warm);
  transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease)}
.at-btn.at-btn--solid:hover,.at-btn.at-btn--ghost:hover,
.mn-btn.mn-btn--solid:hover,.mn-btn.mn-btn--ghost:hover,
#services .stk-cta:hover{
  background:#fff;color:var(--warm);border-color:var(--warm)}
/* the arrow is a child span with its own colour, so it has to follow the label */
.at-btn .ar,.mn-btn .ar,#services .stk-cta .ar{color:inherit}

/* ---- 15. compliance trust badges ----
   They still filled black on hover, the last black hover state on the page.
   Now red, matching the buttons. Also moved onto Geist, since they are page
   furniture like the kickers and links rather than data inside a graphic. */
.at-badge{font-family:var(--ui)}
.at-badge:hover{background:var(--warm);border-color:var(--warm);color:#fff}

/* ---- 14. case studies section removed ----
   Hidden rather than cut out of the React bundle, because deleting a node the
   bundle still holds a reference to risks an error on its next render. Nothing
   links to #cases, so no navigation breaks. To bring it back, delete this rule. */
#cases{display:none}

/* ---- 13. services headline break ----
   Measured, not guessed: at 16ch the line falls after "suite," so the second
   line reads "assembled to the brief". 15ch to 18ch all give this break;
   below 15ch it drops to three lines. */
#services .at-h2{max-width:16ch}

/* ---- 8. case studies: rounded, spaced cards ----
   The cells were a hairline grid: 1px gaps over a --line background with a
   shared outer border, which is what made them read as one square slab.
   Separated into their own bordered cards with radius and real gutters. */
#cases .at-cells{background:transparent;border:0;gap:20px}
#cases .at-case{border:1px solid var(--line);border-radius:14px;
  padding:30px 28px 28px;overflow:hidden}
#cases .at-case .q{margin-bottom:22px}
#cases .at-case .pq{padding-top:20px}
@media(max-width:900px){#cases .at-cells{grid-template-columns:1fr;gap:16px}}

/* ---- 8b. case study attribution rendered as a black bar ----
   Pre-existing collision: the attribution is <div class="at">, and `at` is
   also the page's root design-system class, which declares the DARK token set
   (--void:#000000) and paints background:var(--void). So each attribution came
   out as a black box with white text sitting on a white card. Literal values
   here on purpose: inside that element --faint and --txt are the dark ones. */
#cases .at-case .pq .at{background:transparent;color:rgba(0,0,0,.45)}

/* ---- FONT: Vercel's Geist across the whole page ----
   Geist and Geist Mono are already embedded as variable fonts; only the
   display face is now Geist. Geist has NO italic cut embedded, so the
   crimson emphasis is set in weight rather than a synthesised oblique, and the
   headline tracking is tightened because a sans needs less air than the serif
   did at the same size. */
.at{--display:"Geist",-apple-system,system-ui,sans-serif}
.at-h1,.at-h2,.at-h3,.bx-t,.nx-q,.iqd-cf .num,.iqd-score b,.v-step b,
.at-case .q,.xp-t,.cl-doc-h,.at-h2 span,.at-em{
  font-family:"Geist",-apple-system,system-ui,sans-serif}
.at-h1{font-weight:500;letter-spacing:-.038em;line-height:1.02;font-size:clamp(38px,5.2vw,72px)}
.at-h2{font-weight:500;letter-spacing:-.036em;line-height:1.06;font-size:clamp(30px,3.5vw,50px)}
.at-h3{font-weight:500;letter-spacing:-.028em;font-size:clamp(21px,2vw,27px)}
.at-em{font-style:normal;font-weight:500}
.bx-t{font-weight:500;letter-spacing:-.024em}
.iqd-cf .num,.iqd-score b{font-weight:600;letter-spacing:-.03em}

/* ---- 10. one typeface across the page furniture ----
   The nav links, the Login / Request experts buttons, the section kickers and
   the inline links were all set in Geist Mono while the copy was Geist, which
   is the mismatch. They are Geist now. Tracking is kept, because these are
   still small uppercase labels and they need the air.
   Deliberately NOT changed: the mono inside the product graphics (dashboard,
   transcript, expert IDs, figures) where it is doing a real job as data. */
/* `.mn[class]` matches the same specificity as `.mn--atlaslight .mn-item>button`
   (0,2,1) and this block comes later, so it wins without needing !important. */
.mn[class] button,.mn[class] a,.mn[class] h5,.mn[class] span,.mn[class] div{font-family:var(--ui)}
.at-kicker,.at-btn,.at-link{font-family:var(--ui)}
.stk-cta,.stk-foot,.stk-panel .n,.stk-spine .n,.stk-spine .m{font-family:var(--ui)}
.at-btn,.stk-cta{font-weight:500}

/* ---- 11. three-line headlines brought down to two ----
   Sizes found by measuring, not guessed: the service headline drops to 2 lines
   at <=46px in its 499px column, sourcing at <=42px in its 570px column, so
   both split sections are capped at 42px. The hero was a separate problem: its
   measure is `max-width:15ch`, which is font-relative, so shrinking the type
   shrank the column too and it stayed on 3 lines at every size. It needs a
   fixed measure as well as a smaller size. */
#service .at-h2,#sourcing .at-h2{font-size:clamp(28px,3vw,42px)}
#top .at-h1{font-size:clamp(38px,4.6vw,66px);max-width:780px}
#services .stk{--ember:var(--ember-ramp)}/* =======================================================================
   VARIANT B — "The stacks"
   Full inversion. The white page goes black for one section and the six
   services stand as tall archive slats, names set vertically at display
   scale. One slat is always open; the others wait as spines on a shelf.
======================================================================= */
.stk-sec{background:var(--void);color:var(--txt);padding:132px 0;border-top:1px solid var(--line)}
.stk-sec .lede{opacity:.8}
.stk{display:flex;height:560px;border:1px solid var(--line);
  background:var(--line);gap:1px;border-radius:16px;overflow:hidden}
.stk-s{position:relative;flex:1;min-width:0;background:var(--void);cursor:pointer;overflow:hidden;
  border:0;color:var(--txt);text-align:left;font-family:var(--ui);transition:background .4s var(--ease)}

/* transitions arm one frame after build, so the slats never animate in from zero */
.stk.ready .stk-s{transition:flex 1s var(--ease)}
.stk-s.open{flex:4.6;cursor:default}
.stk-s:focus-visible{outline:2px solid var(--warm);outline-offset:-2px}

/* closed spine */
.stk-spine{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  padding:24px 0 28px;gap:22px;transition:opacity .5s var(--ease)}
.stk-s.open .stk-spine{opacity:0;pointer-events:none}
.stk-spine .n{font-family:var(--ui);font-weight:500;font-size:9.5px;letter-spacing:.18em;opacity:.5}
.stk-spine .t{flex:1;display:flex;align-items:center;writing-mode:vertical-rl;rotate:180deg;
  font-family:var(--ui);font-weight:500;font-size:clamp(20px,2vw,30px);
  letter-spacing:-.025em;white-space:nowrap}
.stk-spine .m{font-family:var(--mono);font-size:8.5px;letter-spacing:.16em;opacity:.35;
  text-transform:uppercase}
.stk-s:not(.open):hover .stk-spine .t{color:transparent;background:var(--ember);
  -webkit-background-clip:text;background-clip:text}

/* open panel */
.stk-panel{position:absolute;top:0;bottom:0;left:0;width:var(--panelW,100%);
  padding:38px 40px;display:flex;flex-direction:column;
  opacity:0;transition:opacity .6s var(--ease) .35s}
.stk-s.open .stk-panel{opacity:1}
.stk-s.open:before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
  background:var(--ember)}
.stk-panel .n{font-family:var(--ui);font-weight:500;font-size:9.5px;letter-spacing:.18em;color:var(--warm)}
.stk-panel h3{font-family:var(--ui);font-weight:600;font-size:clamp(28px,3vw,44px);
  line-height:1.04;letter-spacing:-.035em;margin:14px 0 16px}
.stk-panel h3 i{font-style:normal;background:var(--ember);-webkit-background-clip:text;
  background-clip:text;color:transparent}
.stk-panel .d{font-size:15px;font-weight:300;line-height:1.65;opacity:.72;max-width:44ch}
/* --- the cutout --------------------------------------------------------
   The figure stands in a reserved right-hand column of the open panel,
   flush to the card floor. She looks left, into the copy, so the reading
   order runs headline -> body -> CTA -> her, not off the edge.
------------------------------------------------------------------------ */
/* Each generation comes back with its own aspect, head size and head position,
   so every figure carries its own three numbers. --figH is NOT shared: matching
   frame heights does not match head sizes, because a shot that includes a
   document frames the head smaller. These values are set so the HEAD renders at
   ~127px wide in every panel, which is what the eye actually compares. Re-derive
   them from a head-width measurement whenever an image is swapped. */
.stk-panel.has-fig{padding-right:var(--figCol,232px)}
/* she runs off the right edge of the card on purpose - a portrait cropped by
   the frame reads as photography, one pasted neatly inside it reads as clip art */
.stk-fig{position:absolute;right:var(--figR,-8px);bottom:0;height:var(--figH,70%);width:auto;display:block;
  pointer-events:none;user-select:none;
  opacity:0;translate:0 14px;
  transition:opacity .8s var(--ease) .5s,translate .8s var(--ease) .5s}
.stk-s.open .stk-fig{opacity:1;translate:0 0}
.stk-cta{display:inline-flex;align-items:center;gap:9px;align-self:flex-start;margin-top:22px;
  /* the 1px border exists in both states so the button never changes size on hover */
  padding:12px 21px;border-radius:4px;border:1px solid var(--warm);
  background:var(--warm);color:#fff;text-decoration:none;
  font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  transition:background .3s var(--ease),color .3s var(--ease),transform .3s var(--ease)}
.stk-cta:hover{background:var(--void);color:var(--warm);transform:translateY(-1px)}
.stk-cta .ar{transition:transform .3s var(--ease)}
.stk-cta:hover .ar{transform:translateX(4px)}
.stk-panel ul{list-style:none;margin-top:auto;border-top:1px solid var(--line)}
.stk-panel li{position:relative;padding:10px 0 10px 20px;font-size:13px;font-weight:300;
  line-height:1.5;opacity:.66;border-bottom:1px solid rgba(0,0,0,.07)}
.stk-panel li:last-child{border-bottom:0}
.stk-panel li:before{content:"";position:absolute;left:0;top:19px;width:9px;height:1px;
  background:var(--warm)}
.stk-foot{display:flex;justify-content:space-between;margin-top:14px;font-family:var(--ui);
  font-weight:500;font-size:9px;letter-spacing:.16em;text-transform:uppercase;opacity:.45}

@media(max-width:900px){
  .stk{flex-direction:column;height:auto}
  .stk-s{flex:none;height:64px}
  .stk.ready .stk-s{transition:height .8s var(--ease)}
  .stk-s.open{flex:none;height:auto;min-height:420px}
  .stk-spine{flex-direction:row;align-items:center;padding:0 22px;gap:16px}
  .stk-spine .t{writing-mode:horizontal-tb;rotate:none;flex:1;font-size:22px}
  .stk-panel{position:relative;inset:auto;width:auto;padding:28px 22px;height:100%}
  .stk-panel.has-fig{padding-right:22px}
  .stk-fig{display:none}
  .stk-s.open:before{width:100%;height:2px;bottom:auto}
}
@media(prefers-reduced-motion:reduce){
  .rv,.in .rv{transition:none;opacity:1;translate:0 0}
  .stk-s,.stk-spine,.stk-panel,.stk-fig{transition:none}
  .stk-fig{opacity:1;translate:0 0}
}/* ===========================================================================
   AI MODERATOR &mdash; "the moderator joins the call"
   Replaces the thread canvas plate in #moderator.

   The laptop PNG is a cut-out: its screen is a transparent aperture, so the
   call UI is layered UNDER the image and shows through the hole. The shell
   sits on top and supplies the real bezel, so there is no drawn screen edge.
   Aperture measured off the trimmed asset (1196x669):
     left 8.1104%  top 2.5411%  width 83.7793%  height 89.0882%
   The UI inside is authored at a fixed native 1002x596 and scaled to fit,
   which keeps the screen typography in proportion at every viewport.
   =========================================================================== */

/* Every label in the graphic routes through this one variable. It was
   var(--mono), which is the page's own convention for kickers and labels, but
   the graphic reads better matching the body face. Flip this back to
   var(--mono) to return the whole graphic to Geist Mono in one edit. */
.mvc{position:relative;margin-top:8px;--mvc-label:var(--ui)}
/* start, not center: the side column grows when the transcript fills, and a
   centred row would slide the laptop down by ~27px in the middle of the
   sequence. Top aligned, the device never moves. */
.mvc-grid{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 392px;
  gap:36px;align-items:start}

/* ---- device ------------------------------------------------------------- */
.mvc-lap{position:relative;width:100%;
  opacity:0;transform:translateY(22px);
  transition:opacity .9s var(--ease),transform .9s var(--ease)}
.mvc.on .mvc-lap{opacity:1;transform:none}
.mvc-shell{position:relative;width:100%;height:auto;z-index:2;pointer-events:none;
  filter:drop-shadow(0 26px 40px rgba(16,20,28,.20))}
.mvc-scr{position:absolute;left:8.1104%;top:2.5411%;width:83.7793%;height:89.0882%;
  z-index:1;overflow:hidden;background:var(--scr);
  --scr:#0e1116;--scr-2:#161a21;--scr-3:#1d222b;
  --scr-line:rgba(255,255,255,.10);--scr-txt:#e8eaee;--scr-mute:rgba(232,234,238,.52)}
.mvc-in{position:absolute;left:0;top:0;width:1002px;height:596px;
  transform-origin:0 0;display:flex;flex-direction:column;
  padding:16px 20px 14px;color:var(--scr-txt);font-family:var(--ui)}

/* screen chrome */
.mvc-bar{display:flex;align-items:center;gap:10px;height:38px;flex:none;
  border-bottom:1px solid var(--scr-line);margin-bottom:12px}
.mvc-m{font-family:var(--mvc-label);font-size:15px;letter-spacing:.02em;color:var(--scr-mute)}
.mvc-m.r{margin-left:auto}
.mvc-rec{width:9px;height:9px;border-radius:50%;background:#e5484d;flex:none;
  animation:mvc-pulse 2.4s ease-in-out infinite}
@keyframes mvc-pulse{0%,100%{opacity:1}50%{opacity:.35}}

/* tiles */
.mvc-tiles{flex:1 1 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:12px;min-height:0}
.mvc-tile{position:relative;border-radius:6px;overflow:hidden;background:var(--scr-2);
  opacity:0;transform:scale(.965);
  transition:opacity .6s var(--ease),transform .6s var(--ease)}
.mvc.on .mvc-tile{opacity:1;transform:none}
.mvc.on .mvc-tile:nth-child(2){transition-delay:.12s}
.mvc.on .mvc-tile:nth-child(3){transition-delay:.24s}
.mvc-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* the three frames came back at different subject scales; these pull them
   back onto a common eye line and head height */
.mvc-tile[data-t=exp] img{object-position:50% 30%;transform:scale(.92);transform-origin:50% 30%}
.mvc-tile[data-t=cli] img{object-position:50% 32%;transform:scale(1.02);transform-origin:50% 32%}
.mvc-tile[data-t=ai]  img{object-position:50% 34%;transform:scale(1.12);transform-origin:50% 34%}

.mvc-tile figcaption{position:absolute;left:10px;bottom:10px;z-index:3;
  display:flex;flex-direction:column;gap:1px;
  padding:6px 10px;border-radius:4px;background:rgba(8,10,14,.62);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.mvc-tile .nm{font-family:var(--mvc-label);font-size:14px;letter-spacing:.01em;color:#fff}
.mvc-tile .rl{font-size:13px;font-weight:350;color:rgba(255,255,255,.62);line-height:1.25}

/* speaking ring */
.mvc-tile:after{content:"";position:absolute;inset:0;border-radius:6px;z-index:4;
  border:2px solid transparent;transition:border-color .3s ease;pointer-events:none}
.mvc-tile.talk:after{border-color:#2f9e6b}

/* the empty seat, before the moderator is admitted */
.mvc-seat{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:12px;
  background:var(--scr-2);border-radius:6px;
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.14);
  transition:opacity .5s ease;font-family:var(--mvc-label);font-size:14px;color:var(--scr-mute)}
.mvc-seat b{display:block;width:34px;height:34px;border-radius:50%;
  border:1.5px dashed rgba(255,255,255,.42)}
.mvc.joined .mvc-seat{opacity:0}
.mvc-tile[data-t=ai] img,.mvc-tile[data-t=ai] figcaption,
.mvc-tile[data-t=ai] .mvc-chip-ai,.mvc-tile[data-t=ai] .mvc-wave{opacity:0;transition:opacity .6s ease .1s}
.mvc.joined .mvc-tile[data-t=ai] img,
.mvc.joined .mvc-tile[data-t=ai] figcaption,
.mvc.joined .mvc-tile[data-t=ai] .mvc-chip-ai,
.mvc.joined .mvc-tile[data-t=ai] .mvc-wave{opacity:1}

/* the tile is labelled as software, permanently and on the tile itself */
.mvc-chip-ai{position:absolute;top:10px;left:10px;z-index:6;
  font-family:var(--mvc-label);font-size:12px;letter-spacing:.1em;
  padding:3px 7px;border-radius:3px;background:#1b2c66;color:#fff}
.mvc-wave{position:absolute;right:10px;bottom:12px;z-index:6;
  display:flex;align-items:flex-end;gap:3px;height:20px}
.mvc-wave i{display:block;width:3px;height:5px;border-radius:2px;background:#8fb0ff}
.mvc.joined .mvc-wave i{animation:mvc-w 1s ease-in-out infinite}
.mvc-wave i:nth-child(2){animation-delay:.14s}
.mvc-wave i:nth-child(3){animation-delay:.28s}
.mvc-wave i:nth-child(4){animation-delay:.1s}
.mvc-wave i:nth-child(5){animation-delay:.36s}
@keyframes mvc-w{0%,100%{height:5px}50%{height:19px}}

/* the guide the moderator is running */
.mvc-guide{flex:none;margin-top:14px;padding:14px 16px;border-radius:6px;
  background:var(--scr-2);border:1px solid var(--scr-line);min-height:118px}
.mvc-guide p{font-size:24px;line-height:1.28;letter-spacing:-.014em;margin-top:8px;
  font-weight:400;color:var(--scr-txt)}
.mvc-chip{display:inline-flex;align-items:center;gap:7px;margin-top:12px;
  font-family:var(--mvc-label);font-size:13px;letter-spacing:.02em;
  padding:4px 9px;border-radius:3px;background:rgba(143,176,255,.14);
  color:#a9c2ff;opacity:0;transform:translateY(4px);
  transition:opacity .4s ease,transform .4s var(--ease)}
.mvc-chip.on{opacity:1;transform:none}

/* call controls */
.mvc-ctl{flex:none;display:flex;align-items:center;justify-content:center;gap:12px;
  height:50px;margin-top:10px}
.mvc-ctl span{width:38px;height:38px;border-radius:50%;background:var(--scr-3);
  display:flex;align-items:center;justify-content:center}
.mvc-ctl span svg{width:17px;height:17px;stroke:var(--scr-txt);stroke-width:1.5;
  fill:none;stroke-linecap:round;stroke-linejoin:round}
.mvc-ctl span.end{background:#c8102e;width:52px;border-radius:19px}
.mvc-ctl span.end svg{stroke:#fff}

/* ---- side column -------------------------------------------------------- */
/* The card is taken out of flow and the transcript is offset by the height the
   card ends up at once it has collapsed (--bubH, measured at runtime). While
   the card is still expanded it overlays the top of the transcript, which is
   invisible at that point anyway. That is what removes the dead space: the
   column is only ever as tall as its finished state, so nothing has to be
   reserved for a card that is about to shrink. */
.mvc-side{position:relative;display:block;align-self:start;min-height:0}

/* the invite bubble */
.mvc-bub{position:absolute;top:0;left:0;right:0;z-index:5;
  border:1px solid var(--line);border-radius:6px;
  background:#fff;padding:16px 18px;
  box-shadow:0 1px 2px rgba(16,20,28,.04),0 18px 34px -22px rgba(16,20,28,.34);
  opacity:0;transform:translateY(10px) scale(.98);transform-origin:0 100%;
  transition:opacity .5s var(--ease),transform .5s var(--ease)}
.mvc.ask .mvc-bub{opacity:1;transform:none}
/* the tail points back at the laptop */
.mvc-bub:before,.mvc-bub:after{content:"";position:absolute;left:-9px;top:26px;
  width:0;height:0;border:9px solid transparent;border-left:0}
.mvc-bub:before{border-right-color:rgba(0,0,0,.13)}
.mvc-bub:after{left:-8px;border-right-color:#fff}
.mvc-bub .hd{display:flex;align-items:center;gap:8px;
  font-family:var(--mvc-label);font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(0,0,0,.5)}
/* the real brand mark, the same asset the page header carries */
.mvc-mk{width:15px;height:15px;flex:none;object-fit:contain;display:block}
.mvc-bub .ti{margin-top:9px;font-size:19px;letter-spacing:-.02em;font-weight:500;line-height:1.25}
.mvc-bub .ti b{font-weight:500}
.mvc-bub .ds{margin-top:7px;font-size:13.5px;line-height:1.5;color:rgba(0,0,0,.6)}
.mvc-bub .ds b{font-weight:500;color:var(--txt)}
.mvc-bub .bd{overflow:hidden;transition:max-height .45s var(--ease),opacity .3s ease;
  max-height:210px}
.mvc.joined .mvc-bub .bd{max-height:0;opacity:0}
.mvc-btn{margin-top:14px;display:inline-flex;align-items:center;gap:9px;
  padding:9px 15px;border-radius:4px;background:#000;color:#fff;
  font-size:13.5px;font-weight:400;letter-spacing:-.005em;
  transition:transform .12s ease,background .2s ease}
.mvc-btn.hover{background:var(--warm)}
.mvc-btn.press{transform:scale(.965)}
/* the click ripple */
.mvc-btn:after{content:"";position:absolute;left:var(--rx,50%);top:var(--ry,50%);
  width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;
  background:rgba(200,16,46,.35);opacity:0;pointer-events:none}
.mvc-btn{position:relative;overflow:hidden}
.mvc-btn.press:after{animation:mvc-rip .5s ease-out}
@keyframes mvc-rip{0%{opacity:.8;transform:scale(1)}100%{opacity:0;transform:scale(14)}}
/* what the bubble becomes once it has been clicked */
.mvc-ok{display:flex;align-items:center;gap:9px;max-height:0;overflow:hidden;opacity:0;
  font-family:var(--mvc-label);font-size:13px;color:var(--green);
  transition:max-height .45s var(--ease) .1s,opacity .3s ease .2s}
.mvc.joined .mvc-ok{max-height:30px;opacity:1}

/* the transcript */
.mvc-tx{margin-top:var(--bubH,104px);display:flex;flex-direction:column;min-height:0;
  border:1px solid var(--line);border-radius:6px;background:#fff;
  box-shadow:0 1px 2px rgba(16,20,28,.04),0 18px 34px -24px rgba(16,20,28,.30);
  opacity:0;transform:translateY(12px);
  transition:opacity .6s var(--ease),transform .6s var(--ease)}
.mvc.tx .mvc-tx{opacity:1;transform:none}
.mvc-txh,.mvc-txf{flex:none;display:flex;align-items:center;gap:10px;padding:11px 14px;
  font-family:var(--mvc-label);font-size:12px;letter-spacing:.02em;color:rgba(0,0,0,.55)}
.mvc-txh{border-bottom:1px solid var(--line)}
.mvc-txf{border-top:1px solid var(--line)}
.mvc-txh .r,.mvc-txf .r{margin-left:auto}
.mvc-txf b{font-weight:500;color:var(--txt)}
.mvc-txb{flex:1 1 auto;overflow:hidden;padding:6px 14px 10px}

/* every line is in the DOM from the start to hold the height, so the rule and
   the speaker tag have to stay invisible until the line is actually spoken */
.mvc-l{display:grid;grid-template-columns:42px minmax(0,1fr);gap:10px;padding:9px 0;
  border-bottom:1px solid transparent;transition:border-color .3s ease}
.mvc-l.on{border-bottom-color:rgba(0,0,0,.06)}
.mvc-l:last-child{border-bottom:0}
.mvc-l .sp{font-family:var(--mvc-label);font-size:11.5px;letter-spacing:.06em;
  color:rgba(0,0,0,.42);padding-top:2px;opacity:0;transition:opacity .3s ease}
.mvc-l.on .sp{opacity:1}
.mvc-l[data-s=MOD] .sp{color:var(--cold)}
.mvc-l .bo{font-size:13.5px;line-height:1.5;letter-spacing:-.005em}
.mvc-l .w{opacity:0;transition:opacity .22s ease var(--wd,0s)}
.mvc-l.on .w{opacity:1}
.mvc-l .ex{display:block}

/* Redaction. The bar is painted per word rather than as one absolutely
   positioned overlay: an abs-positioned pseudo on an inline element only
   covers its first line box, so a phrase that wraps got a stub of a bar.
   Each word carries its own background, padded rightward over the space
   that follows it (and pulled back by an equal negative margin, so layout
   does not move) which makes the separate bars read as one continuous
   block. Staggering --d across the words wipes it on left to right. */
.mvc-rd{display:inline}
.mvc-rd .w{--d:0s;
  background-image:linear-gradient(#000,#000);background-repeat:no-repeat;
  background-position:0 0;background-size:0% 100%;
  padding:.14em .32em .14em 0;margin-right:-.32em;
  transition:opacity .22s ease var(--wd,0s),
             background-size .16s linear var(--d),
             color 0s linear calc(var(--d) + .13s)}
.mvc-rd.go .w{background-size:100% 100%;color:transparent}

/* the rule that did it */
.mvc-fl{display:inline-flex;align-items:center;gap:6px;margin-top:7px;
  font-family:var(--mvc-label);font-size:11.5px;letter-spacing:.01em;
  padding:3px 8px;border-radius:3px;
  background:rgba(200,16,46,.07);color:var(--crimson);
  border:1px solid rgba(200,16,46,.18);
  opacity:0;transform:translateX(8px);
  transition:opacity .4s ease,transform .4s var(--ease)}
.mvc-fl.on{opacity:1;transform:none}
.mvc-l .tag{display:inline-flex;align-items:center;margin-top:7px;
  font-family:var(--mvc-label);font-size:11.5px;padding:3px 8px;border-radius:3px;
  background:rgba(27,44,102,.07);color:var(--cold);border:1px solid rgba(27,44,102,.16);
  opacity:0;transform:translateX(8px);
  transition:opacity .4s ease,transform .4s var(--ease)}
.mvc-l .tag.on{opacity:1;transform:none}

/* ---- the cursor --------------------------------------------------------- */
.mvc-cur{position:absolute;left:0;top:0;z-index:20;width:22px;height:22px;
  pointer-events:none;opacity:0;
  transition:opacity .3s ease,transform 1s cubic-bezier(.4,0,.2,1)}
.mvc-cur.on{opacity:1}
.mvc-cur svg{width:22px;height:22px;
  filter:drop-shadow(0 2px 3px rgba(16,20,28,.35))}

/* ---- section chrome -----------------------------------------------------
   Scoped to #moderator, so no other section on the site is affected. The page
   sets kickers and buttons in Geist Mono by default; these put this section's
   two into Geist and give the CTA the brand red with an inverting hover. */
#moderator .at-kicker{font-family:var(--ui);font-size:11px;letter-spacing:.2em;font-weight:500}
#moderator .at-btn{font-family:var(--ui);font-size:12px;letter-spacing:.12em;font-weight:500}
#moderator .at-btn--solid{background:var(--crimson);color:#fff;border-color:var(--crimson)}
#moderator .at-btn--solid:hover{background:#fff;color:var(--crimson);
  border-color:var(--crimson);transform:translateY(-1px)}

/* ---- responsive --------------------------------------------------------- */
@media(max-width:1040px){
  .mvc-grid{grid-template-columns:minmax(0,1fr)}
  .mvc-side{margin-top:30px;height:auto}
  .mvc-bub:before,.mvc-bub:after{display:none}
  .mvc-tx{min-height:320px}
}
@media(max-width:560px){
  .mvc-guide{display:none}
}
/* Reduced motion gets the finished state outright. Naming individual elements
   here left the word reveals, the redaction wipe and the flags still fading,
   which is the thing the setting is asking us not to do. */
@media(prefers-reduced-motion:reduce){
  .mvc,.mvc *{transition:none!important;animation:none!important}
  .mvc-cur{display:none}
}


/* ---- 1. sentence case in the nav and on every CTA ----
   Specificity notes: `.mn--atlaslight .mn-btn` is (0,2,0) so a plain class
   cannot beat it; `.mn[class]` matches that weight and wins on source order.
   Tracking comes down too: .16em is set for uppercase and reads as gappy
   once the text is mixed case, and the size lifts a touch because lowercase
   has a smaller apparent height than caps at the same point size. */
.mn[class] .mn-item>button,
.mn[class] .mn-item>a,
.mn[class] .mn-btn,
.at-btn,
.at-link,
#services .stk-cta{
  text-transform:none;
  letter-spacing:.004em}
.mn[class] .mn-item>button,.mn[class] .mn-item>a{font-size:13.5px}
.mn[class] .mn-btn{font-size:12.5px}
.at-btn{font-size:12.5px}
.at-link{font-size:12px;letter-spacing:.01em}
#services .stk-cta{font-size:12px}

/* ---- 2. EN Services: no imagery ----
   The images are gone from the data, so `has-fig` is never applied and the
   reserved right column disappears with it. These two rules are belt and
   braces in case a figure is ever reintroduced without its padding. */
#services .stk-fig{display:none}
#services .stk-panel{padding-right:40px}
@media(max-width:900px){#services .stk-panel{padding-right:22px}}


/* ==========================================================================
   A · RUN THE PROJECT · the stage rail and the four redrawn screens
   Lifted from nextyn-navy-sections.html. Only the tokens that file declared on
   :root are re-declared here, scoped to the block, because the homepage's own
   :root does not carry them.
   ========================================================================== */
#platform-ops{
  --w2:rgba(0,0,0,.62); --w3:rgba(0,0,0,.42); --ln2:rgba(0,0,0,.14); --cr:#c8102e;
  --shadow:0 0 0 1px rgba(16,20,28,.055),0 0 28px -4px rgba(16,20,28,.13),
           0 12px 26px -8px rgba(16,20,28,.18),0 34px 56px -26px rgba(16,20,28,.26);
  position:relative}

/* the stage rail */
.ss-rail{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.ss-st{position:relative;text-align:left;padding:17px 18px 18px 0;
  font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.ss-st+.ss-st{border-left:1px solid var(--line);padding-left:20px}
.ss-st .day{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--w3);transition:color .4s var(--ease)}
.ss-st.on .day{color:var(--cr)}
.ss-st .verb{display:block;margin-top:7px;font-size:clamp(19px,1.85vw,25px);font-weight:500;
  letter-spacing:-.03em;line-height:1.1;color:rgba(0,0,0,.32);transition:color .4s var(--ease)}
.ss-st.on .verb,.ss-st:hover .verb{color:#000}
.ss-st .pg{position:absolute;left:0;bottom:-1px;height:2px;width:0;background:var(--ember-ramp)}
.ss-line{margin-top:24px;max-width:74ch;font-size:15.5px;font-weight:300;line-height:1.6;
  color:var(--w2);min-height:3.2em}

/* the product, redrawn rather than screenshotted */
.ss-frame{margin-top:30px;border:1px solid var(--ln2);border-radius:14px;overflow:hidden;
  background:#f4f5f7;box-shadow:var(--shadow);display:grid;height:591px;
  opacity:0;transform:translateY(24px);
  transition:opacity .8s var(--ease),transform .8s var(--ease)}
.ss.in .ss-frame{opacity:1;transform:none}
.ss-pane{grid-area:1/1;visibility:hidden;overflow:hidden;position:relative}
.ss-pane.on{visibility:visible;animation:ss-in .5s var(--ease)}
@keyframes ss-in{from{opacity:0}to{opacity:1}}

/* ---- the callouts: a ring on the control, a leader back to a label parked in
   the screen's own empty space, and nothing sitting on top of the interface. */
.px-lead{position:absolute;inset:0;width:100%;height:100%;z-index:4;pointer-events:none}
.px-lead line{stroke:rgba(200,16,46,.55);stroke-width:1;
  stroke-dasharray:var(--len);stroke-dashoffset:var(--len);
  transition:stroke-dashoffset .8s var(--ease) .12s}
.px-lead line.show{stroke-dashoffset:0}
.px-ring{position:absolute;width:11px;height:11px;margin:-5.5px 0 0 -5.5px;border-radius:50%;
  background:#fff;border:2px solid var(--crimson);box-shadow:0 0 0 3px rgba(200,16,46,.13);
  z-index:6;pointer-events:none;opacity:0;transform:scale(.35);
  transition:opacity .45s var(--ease),transform .5s cubic-bezier(.34,1.5,.64,1)}
.px-ring.show{opacity:1;transform:none}
.px-lab{position:absolute;z-index:5;pointer-events:none;font-family:var(--ui);font-size:11.5px;
  font-weight:450;line-height:1.3;letter-spacing:-.005em;color:#0a0a0a;background:#fff;
  border:1px solid rgba(0,0,0,.09);border-radius:7px;padding:5px 10px;white-space:nowrap;
  box-shadow:0 1px 2px rgba(16,20,28,.06),0 9px 20px -10px rgba(16,20,28,.4);
  opacity:0;transform:translateY(6px);
  transition:opacity .8s var(--ease) .5s,transform .8s var(--ease) .5s}
.px-lab.show{opacity:1;transform:none}

.px{--bg:#f4f5f7;--card:#ffffff;--bd:#e5e7eb;--bd2:#eef0f3;
    --t1:#111827;--t2:#4b5563;--t3:#9ca3af;
    --blue:#2563eb;--blue-bg:#dbeafe;
    --ok-bg:#f6ffed;--ok-bd:#b7eb8f;--ok-tx:#389e0d;
    --lime-bg:#fcffe6;--lime-bd:#eaff8f;--lime-tx:#7cb305;
    --red:#cf1322;--red-bg:#fff1f0;--red-bd:#ffa39e;
    --grad:linear-gradient(90deg,#22d3ee 0%,#2563eb 100%);
    height:100%;background:var(--bg);color:var(--t1);font-size:12px;line-height:1.45;
    font-weight:400;letter-spacing:0}
.px *{box-sizing:border-box}

/* app chrome */
.px-top{display:flex;align-items:center;gap:24px;height:42px;padding:0 16px;
  background:var(--card);border-bottom:1px solid var(--bd)}
.px-back{color:var(--t2);font-size:11.5px}
.px-tabs{display:flex;gap:22px;margin:0 auto}
.px-tab{font-size:12.5px;color:var(--t2);position:relative;height:42px;display:flex;
  align-items:center}
.px-tab.on{color:var(--t1);font-weight:500}
.px-tab.on:after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--blue)}
.px-avs{display:flex}
.px-av{width:22px;height:22px;border-radius:50%;background:var(--blue-bg);color:#1d4ed8;
  display:grid;place-items:center;font-size:8.5px;font-weight:600;border:1.5px solid #fff;
  margin-left:-6px;flex:none}
.px-av:first-child{margin-left:0}

.px-hd{display:flex;align-items:center;gap:9px;padding:11px 16px 0}
.px-hd h4{font-size:15px;font-weight:600;letter-spacing:-.01em}
.px-chip{font-size:10px;padding:1px 8px;border-radius:10px;border:1px solid;line-height:1.6}
.px-chip.ok{background:var(--ok-bg);border-color:var(--ok-bd);color:var(--ok-tx)}
.px-chip.lime{background:var(--lime-bg);border-color:var(--lime-bd);color:var(--lime-tx)}
.px-dot{font-size:10.5px;color:var(--t2);display:inline-flex;align-items:center;gap:5px}
.px-dot:before{content:"";width:5px;height:5px;border-radius:50%;background:var(--blue)}
.px-dot.g:before{background:var(--ok-tx)}

.px-body{padding:11px 16px 0}
.px-card{background:var(--card);border:1px solid var(--bd);border-radius:8px}

/* stats strip */
.px-stats{display:grid;grid-template-columns:repeat(5,1fr);background:var(--card);
  border:1px solid var(--bd);border-radius:8px;overflow:hidden}
.px-stat{padding:9px 4px;text-align:center}
.px-stat+.px-stat{border-left:1px solid var(--bd2)}
.px-stat b{display:block;font-size:16px;font-weight:600;letter-spacing:-.02em}
.px-stat span{display:block;font-size:9.5px;color:var(--t3);margin-top:2px}

.px-grid{display:grid;grid-template-columns:minmax(0,1fr) 268px;gap:10px;margin-top:10px}
.px-lb{font-size:12px;font-weight:600;padding:9px 12px 8px}
.px-brief p{font-size:11.5px;color:var(--t2);padding:5px 12px;line-height:1.5}
.px-brief p:last-child{padding-bottom:11px}

/* tables */
.px-tbl{width:100%;border-collapse:collapse}
.px-tbl th{font-size:9px;letter-spacing:.05em;text-transform:uppercase;color:var(--t3);
  font-weight:500;text-align:left;padding:7px 10px;border-bottom:1px solid var(--bd)}
.px-tbl td{font-size:11.5px;color:var(--t2);padding:8px 10px;border-bottom:1px solid var(--bd2)}
.px-tbl tr:last-child td{border-bottom:0}
.px-tbl .ref{color:var(--t3);font-size:10.5px}
.px-tbl .nm{color:var(--t1)}
.px-tbl .rate{color:var(--blue)}
.px-tbl .alt td{background:#fafbfc}

.px-grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.px-drop .dz{font-size:10px;color:var(--t3);border:1px dashed var(--bd);border-radius:6px;
  margin:0 12px 11px;padding:11px;text-align:center}
.px-rail-lb{font-size:11.5px;font-weight:600;padding:9px 12px 0}
.px-tl{padding:6px 12px 11px}
.px-tl .d{font-size:11px;color:var(--t2)}
.px-tl .bar{height:3px;border-radius:2px;background:var(--bd);margin:7px 0 5px;overflow:hidden}
.px-tl .bar i{display:block;height:100%;background:var(--ok-tx);width:0;
  transition:width 1.5s var(--ease) .3s}
.ss.in .px-tl .bar i{width:100%}
.px-tl .r{font-size:10px;color:var(--t3);text-align:right}
.px-mem{display:flex;align-items:center;gap:8px;padding:7px 12px}
.px-mem .px-av{width:24px;height:24px;font-size:9px;border:0;margin:0}
.px-mem b{font-size:11.5px;font-weight:500;color:var(--t1)}
.px-mem span{font-size:10px;color:var(--t3);margin-left:auto}

/* the profile drawer */
.px-drawer{display:grid;grid-template-columns:300px minmax(0,1fr);height:100%}
.px-behind{background:var(--bg);position:relative;overflow:hidden}
.px-behind:after{content:"";position:absolute;inset:0;background:rgba(17,24,39,.45)}
.px-dr{background:var(--card);border-left:1px solid var(--bd);display:flex;flex-direction:column}
.px-dr-h{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--bd2)}
.px-dr-h b{font-size:14px;font-weight:600}
.px-dr-h .x{color:var(--t3);font-size:13px}
.px-btns{margin-left:auto;display:flex;gap:6px}
.px-btn{font-size:10.5px;padding:3px 11px;border-radius:5px;border:1px solid}
.px-btn.y{color:var(--ok-tx);border-color:var(--ok-bd);background:var(--ok-bg)}
.px-btn.n{color:var(--red);border-color:var(--red-bd);background:var(--red-bg)}
.px-btn.i{color:var(--blue);border-color:#bfdbfe;background:#eff6ff}
.px-dr-t{font-size:12.5px;color:var(--blue);padding:12px 16px 0;font-weight:500}
.px-rows{padding:6px 16px 0}
.px-row{display:flex;align-items:center;gap:12px;padding:8px 0;border-bottom:1px solid var(--bd2)}
.px-row .k{font-size:11px;color:var(--t3)}
.px-row .v{margin-left:auto;font-size:11.5px;color:var(--t1)}
.px-tag{display:inline-block;font-size:10px;color:#1d4ed8;background:#eff6ff;
  border:1px solid #bfdbfe;border-radius:4px;padding:1px 7px;margin-top:7px}
.px-h5{font-size:12.5px;font-weight:600;padding:13px 16px 0}
.px-para{font-size:11px;color:var(--t2);line-height:1.62;padding:6px 16px 0}
.px-exp{display:flex;padding:8px 16px 0}
.px-exp b{font-size:11.5px;font-weight:500}
.px-exp span{font-size:10.5px;color:var(--t3);display:block;margin-top:2px}
.px-exp .when{margin-left:auto;font-size:10.5px;color:var(--t3)}
.px-fine{font-size:8px;color:#c7cbd2;line-height:1.5;padding:14px 16px 0}

/* project dashboard */
.px-titlerow{display:flex;align-items:center;padding:13px 16px 0}
.px-titlerow h4{font-size:16px;font-weight:600;letter-spacing:-.01em}
.px-add{margin-left:auto;font-size:11px;border:1px solid var(--bd);border-radius:6px;
  padding:5px 11px;background:var(--card);color:var(--t2)}
.px-search{margin:11px 16px 0;height:31px;border:1px solid var(--bd);border-radius:6px;
  background:var(--card);display:flex;align-items:center;padding:0 11px;
  font-size:11px;color:var(--t3);gap:8px}
.px-prog{width:132px}
.px-prog .bar{height:4px;border-radius:3px;background:var(--bd);overflow:hidden}
.px-prog .bar i{display:block;height:100%;background:var(--grad);width:0;
  transition:width 1.3s var(--ease) .25s}
.ss.in .px-prog .bar i{width:var(--w,0)}
.px-prog .c{display:flex;gap:11px;margin-top:5px;font-size:9px;color:var(--t3)}

/* calls */
.px-subtabs{display:flex;gap:20px;padding:0 16px;border-bottom:1px solid var(--bd);
  background:var(--card)}
.px-subtab{font-size:11.5px;color:var(--t3);padding:11px 0;position:relative}
.px-subtab.on{color:var(--blue);font-weight:500}
.px-subtab.on:after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background:var(--blue)}
.px-call{margin:10px 16px 0;padding:11px 13px}
.px-call h6{font-size:12.5px;font-weight:600;color:#1e3a5f;letter-spacing:-.005em}
.px-call .who{font-size:10.5px;color:var(--t3);margin-top:3px}
.px-ai{margin-top:8px;background:#f7f8fa;border-radius:6px;padding:8px 11px}
.px-ai .lb{font-size:10px;color:var(--blue);font-weight:500;display:inline-flex;align-items:center;gap:5px}
.px-ai p{font-size:10.5px;color:var(--t2);line-height:1.55;margin-top:5px;padding-left:1px}
.px-call .ft{display:flex;align-items:center;gap:13px;margin-top:9px;font-size:9.5px;
  color:var(--t3)}
.px-call .ft .id{background:#eff6ff;color:#1d4ed8;border-radius:3px;padding:1px 6px;font-size:9px}
.px-call .ft .r{margin-left:auto;display:flex;gap:9px;align-items:center}
.px-imp{font-size:9px;color:#1d4ed8;background:#eff6ff;border:1px solid #bfdbfe;
  border-radius:3px;padding:1px 6px;margin-left:7px}

@media(max-width:900px){
  .ss-rail{grid-template-columns:1fr;border-bottom:0}
  .ss-st{padding:14px 0;display:flex;align-items:baseline;gap:14px}
  .ss-st+.ss-st{border-left:0;border-top:1px solid var(--line);padding-left:0}
  .ss-st .day{width:66px;flex:none}
  .ss-st .verb{margin-top:0;font-size:21px}
  .ss-st .pg{bottom:0}
  .ss-line{min-height:0}
  /* the redrawn screens hold their proportions rather than reflowing, so below
     this width they pan instead of shrinking into illegibility */
  .ss-frame{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .ss-pane{width:900px}
  .px-lead,.px-ring,.px-lab{display:none}
}
@media(prefers-reduced-motion:reduce){
  .ss-frame{opacity:1;transform:none;transition:none}
  .ss-pane.on{animation:none}
  .ss-st .pg{display:none}
  .px-tl .bar i,.px-prog .bar i{transition:none}
  .px-lead line,.px-ring,.px-lab{transition:none}
}

/* ==========================================================================
   B · THE NAVY BAND
   #platform was the light `--slate` band. It now carries the platform's own
   navy, and the new block sits inside the same section so the two read as one
   stretch of Nextyn rather than two sections that happen to share a colour.
   Nothing else moves: the layout, the copy, the ember emphasis and the two
   light product surfaces are untouched. Only the type is inverted, and the
   hairlines with it.
   ========================================================================== */
#platform{
  --iq-navy:#0A1D33;
  --iq-line:rgba(255,255,255,.13);
  --iq-line-2:rgba(255,255,255,.26);
  --iq-txt:#ffffff;
  --iq-body:rgba(255,255,255,.72);
  --iq-faint:rgba(255,255,255,.55);
  background:var(--iq-navy);
  border-top:1px solid var(--iq-line)}
#platform .at-h2,#platform .at-h3{color:var(--iq-txt)}
#platform .at-kicker{color:var(--iq-txt)}
#platform .at-kicker:before{background:var(--iq-txt)}
#platform .at-lede,#platform .at-body{color:var(--iq-body)}
#platform .at-body strong{color:var(--iq-txt)}
#platform .at-reg{border-top-color:var(--iq-line-2)}
#platform .at-reg-row{border-bottom-color:var(--iq-line)}
#platform .at-reg-row .n,#platform .at-reg-row .t{color:var(--iq-txt)}
#platform .at-reg-row .d{color:var(--iq-faint)}
/* the stage rail, on navy */
#platform .ss-rail{border-top-color:var(--iq-line);border-bottom-color:var(--iq-line)}
#platform .ss-st+.ss-st{border-left-color:var(--iq-line)}
#platform .ss-st .day{color:rgba(255,255,255,.45)}
#platform .ss-st .verb{color:rgba(255,255,255,.34)}
#platform .ss-st.on .verb,#platform .ss-st:hover .verb{color:var(--iq-txt)}
#platform .ss-line{color:var(--iq-body)}
#platform .ss-st.on .day{color:var(--warm-hot)}

/* placement inside the flex column the IQ patch already set up. The child
   combinator matters: `#platform .at-head` also matches the head belonging to
   the new block, and only the IQ head should take the divider. */
#platform-ops{order:-1;margin:0;padding-bottom:104px;
  border-bottom:1px solid rgba(255,255,255,.13)}
#platform-ops .at-head{max-width:820px;margin-bottom:34px}
#platform > .at-wrap > .at-head{padding-top:96px}
@media(max-width:900px){
  #platform-ops{padding-bottom:64px}
  #platform > .at-wrap > .at-head{padding-top:60px}
}

/* ==========================================================================
   C · THE FINAL CTA · copy left, capture right
   The section was a centred stack ending in two buttons that both went to "#".
   The ask is answered in place instead: one form, eight fields, and the
   qualifying data that scores the lead taken as part of the ask rather than
   chased afterwards. The two buttons go, so the block has a single action.
   ========================================================================== */
.at-final{text-align:left;padding:132px 0}
.at-final .at-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,528px);
  gap:80px;align-items:start}
.at-final-in{max-width:none}
.at-final h2{max-width:15ch;margin:24px 0 22px}
.at-final .at-lede{max-width:44ch;margin:0}
.at-final .at-cta{display:none}

/* what happens next: the same register as the numbered lists elsewhere on the
   page, so the left column has weight against a tall form */
.lf-steps{list-style:none;margin:44px 0 0;padding:0;border-top:1px solid var(--line-2)}
.lf-steps li{display:grid;grid-template-columns:40px 1fr;gap:18px;padding:19px 0;
  border-bottom:1px solid var(--line)}
.lf-steps .n{font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--txt);
  padding-top:4px}
.lf-steps b{display:block;font-size:16px;font-weight:400;letter-spacing:-.014em;color:var(--txt)}
.lf-steps p{font-size:14px;font-weight:300;line-height:1.6;color:rgba(0,0,0,.55);margin-top:4px}

/* ---- the form ---------------------------------------------------------- */
.lf{background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:34px 34px 30px;position:relative;z-index:2;
  box-shadow:0 0 0 1px rgba(16,20,28,.03),0 18px 40px -22px rgba(16,20,28,.28)}
.lf-eyebrow{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--warm);display:block}
.lf-hd h3{font-family:var(--display);font-size:24px;font-weight:500;letter-spacing:-.028em;
  line-height:1.15;margin:14px 0 8px;color:var(--txt)}
.lf-hd p{font-size:14px;font-weight:300;line-height:1.55;color:rgba(0,0,0,.58)}

.lf-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px 16px;margin-top:26px}
.lf-f{display:block;min-width:0}
.lf-f--wide{grid-column:1 / -1}
.lf-f > span{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(0,0,0,.5);margin-bottom:7px}
.lf-f > span i{font-style:normal;color:rgba(0,0,0,.3);letter-spacing:.1em}
.lf-f input,.lf-f select,.lf-f textarea{
  width:100%;font-family:var(--ui);font-size:14.5px;font-weight:350;color:var(--txt);
  background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:11px 13px;line-height:1.4;-webkit-appearance:none;appearance:none;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
.lf-f textarea{resize:vertical;min-height:78px}
.lf-f input::placeholder,.lf-f textarea::placeholder{color:rgba(0,0,0,.28)}
.lf-f input:focus,.lf-f select:focus,.lf-f textarea:focus{
  outline:none;border-color:var(--warm);box-shadow:0 0 0 3px rgba(200,16,46,.1)}
.lf-f select{background-image:
  linear-gradient(45deg,transparent 50%,rgba(0,0,0,.45) 50%),
  linear-gradient(135deg,rgba(0,0,0,.45) 50%,transparent 50%);
  background-position:calc(100% - 17px) calc(50% + 1px),calc(100% - 12px) calc(50% + 1px);
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:34px;cursor:pointer}
.lf-f.err input,.lf-f.err select,.lf-f.err textarea{border-color:var(--warm)}
.lf-msg{display:none;font-size:12px;font-weight:350;color:var(--warm);margin-top:6px}
.lf-f.err .lf-msg{display:block}

.lf-btn{width:100%;justify-content:center;margin-top:24px;padding:16px 26px;cursor:pointer}
.lf-fine{font-size:12px;font-weight:300;line-height:1.6;color:rgba(0,0,0,.45);margin-top:16px}
.lf-fine a{border-bottom:1px solid rgba(0,0,0,.22)}
.lf-fine a:hover{border-bottom-color:var(--warm);color:var(--warm)}

/* the confirmation that replaces the fields on submit */
.lf-done{display:none;text-align:left;padding:22px 0 8px}
.lf.is-done .lf-grid,.lf.is-done .lf-btn,.lf.is-done .lf-fine,.lf.is-done .lf-hd p{display:none}
.lf.is-done .lf-done{display:block}
.lf-done .tick{width:38px;height:38px;border-radius:50%;background:var(--ember-ramp);
  display:grid;place-items:center;color:#fff;font-size:17px;line-height:1}
.lf-done h4{font-family:var(--display);font-size:21px;font-weight:500;letter-spacing:-.024em;
  margin:18px 0 10px;color:var(--txt)}
.lf-done p{font-size:14.5px;font-weight:300;line-height:1.6;color:rgba(0,0,0,.6)}
.lf-done .ref{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(0,0,0,.4);margin-top:18px;display:block}

@media(max-width:1000px){
  .at-final .at-wrap{grid-template-columns:1fr;gap:52px}
  .at-final h2{max-width:20ch}
  .at-final .at-lede{max-width:56ch}
}
@media(max-width:620px){
  .lf{padding:26px 20px 24px}
  .lf-grid{grid-template-columns:1fr}
  .at-final{padding:88px 0}
}

/* ==========================================================================
   D · THE NAV STAYS WHITE
   The bar was rgba(255,255,255,.88) over saturate(160%) blur(20px). Against
   the light page that reads as white; against the new navy band the 12% it
   lets through is amplified by the saturation and the bar turns a dull
   blue-grey for the whole length of the platform section. Opaque white, and
   the blur goes with it because nothing shows through an opaque bar anyway.
   ========================================================================== */
.mn.mn--atlaslight{--bar-bg:#ffffff;--bar-blur:none}


.lf-eyebrow{font-family:var(--ui);font-size:11px;font-weight:500;letter-spacing:.01em;
  text-transform:none;color:var(--warm)}
.lf-hd p{color:rgba(0,0,0,.68)}

.lf-f > span{font-family:var(--ui);font-size:11.5px;font-weight:500;letter-spacing:.005em;
  text-transform:none;color:rgba(0,0,0,.74);line-height:1.3;
  /* one line, always: the two selects sit in separate grid cells, so a label
     that wraps drops its own control and nothing else */
  min-height:15px;display:flex;align-items:flex-end;gap:6px;margin-bottom:8px}
.lf-f > span i{font-style:normal;font-weight:400;color:rgba(0,0,0,.42);letter-spacing:.005em}

.lf-f input,.lf-f select,.lf-f textarea{color:#000}
.lf-f input::placeholder,.lf-f textarea::placeholder{color:rgba(0,0,0,.4)}
.lf-fine{color:rgba(0,0,0,.58)}
.lf-fine a{border-bottom-color:rgba(0,0,0,.3)}
.lf-done p{color:rgba(0,0,0,.7)}
.lf-done .ref{font-family:var(--ui);font-size:11.5px;font-weight:500;letter-spacing:.005em;
  text-transform:none;color:rgba(0,0,0,.5)}

/* below 620px the grid is one column, so a wrapped label costs nothing and the
   pin only gets in the way */
@media(max-width:620px){ .lf-f > span{min-height:0} }

/* the rows close up by 20%. Row gap only: the column gap is what keeps the
   two fields on a row from reading as one control, so it holds at 16px. */
.lf-grid{row-gap:13px}


/* the country code and the number read as one control */
.lf-phone{display:flex;align-items:stretch;background:#fff;
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
.lf-phone:focus-within{border-color:var(--warm);box-shadow:0 0 0 3px rgba(200,16,46,.1)}
.lf-phone select,.lf-phone input{border:0;border-radius:0;box-shadow:none}
.lf-phone select:focus,.lf-phone input:focus{outline:none;box-shadow:none;border:0}
.lf-phone select{flex:0 0 210px;border-right:1px solid var(--line);
  background-position:calc(100% - 17px) calc(50% + 1px),calc(100% - 12px) calc(50% + 1px)}
.lf-phone input{flex:1 1 auto;min-width:0;font-variant-numeric:tabular-nums;letter-spacing:.01em}
.lf-f.err .lf-phone{border-color:var(--warm)}
@media(max-width:620px){ .lf-phone select{flex:0 0 128px} }


/* ==========================================================================
   HEADLINE WRAPPING
   No headline should end on a single word.

   text-wrap:balance evens the line lengths, which clears most orphans on its
   own and keeps working on headlines nobody has looked at yet. Where it is not
   supported the headline wraps exactly as before, so it costs nothing.

   The deterministic half is a non breaking space binding the last two words,
   applied in the markup. A <br> would also force the break, but it JOINS the
   words either side of it in textContent: "retail" plus "expert" is read as
   "retailexpert". That is the same bug already logged against the homepage, and
   it is not worth introducing for the sake of a line break.
   ========================================================================== */
.at-h1,.at-h2,.sv-cap-say h3{text-wrap:balance}

/* Corners follow the homepage's own split: controls stay tight, surfaces are
   round. Its buttons and inputs are 4px and its .nx-card is 16px, so --r is
   left alone at 4px and only the card surfaces are rounded here. Raising --r
   itself was the mistake: .at-btn reads it, so the buttons rounded with it. */
.sv-uc,.sv-who,.sv-deep,.sv-case,.sv-price article,.sv-why-list{border-radius:12px}
/* No overflow:hidden on the card grids. It was there to round the old gridline
   layout, but it also clipped a card the moment it lifted on hover. The grids
   are gapped now, so each card carries its own corner and nothing needs
   clipping. */
/* ==========================================================================
   LEAD FORM, four fields
   The .lf- classes come from the inherited blocks so the look is the homepage's.
   These rules only cover what a four field, single column version needs.
   ========================================================================== */
#lead-form .lf-grid{display:block}
#lead-form .lf-f{display:block;margin-bottom:16px}
#lead-form .lf-f > span:first-child{display:block;font-size:12.5px;font-weight:500;
  margin-bottom:6px;color:var(--txt)}
#lead-form input,#lead-form textarea,#lead-form select{
  width:100%;font-family:var(--ui);font-size:14.5px;font-weight:350;padding:12px 14px;
  border:1px solid var(--line);border-radius:4px;background:var(--void);color:var(--txt);
  outline:none;transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
#lead-form textarea{resize:vertical;min-height:86px;line-height:1.55}
#lead-form input:focus,#lead-form textarea:focus,#lead-form select:focus{
  border-color:var(--warm);box-shadow:0 0 0 3px rgba(200,16,46,.10)}
#lead-form input::placeholder,#lead-form textarea::placeholder{color:rgba(0,0,0,.34)}
#lead-form .lf-f.err input,#lead-form .lf-f.err textarea,
#lead-form .lf-f.err .lf-phone{border-color:var(--warm)}

/* the country code and the number read as one control */
#lead-form .lf-phone{display:grid;grid-template-columns:150px 1fr;gap:8px}
#lead-form .lf-phone select{padding:12px 8px;cursor:pointer}

#lead-form .lf-msg{display:none;font-size:11.5px;color:var(--warm);margin-top:5px}
#lead-form .lf-f.err .lf-msg{display:block}
#lead-form .lf-note{display:none;font-size:11.5px;color:var(--muted);opacity:.7;margin-top:5px}
#lead-form .lf-note.on{display:block}

#lead-form .lf-submit{width:100%;justify-content:center;margin-top:4px}
#lead-form .lf-priv{font-size:11.5px;color:var(--muted);opacity:.6;margin-top:12px;text-align:center}

#lead-form .lf-done{text-align:center;padding:26px 0 6px}
#lead-form .lf-tick{display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:50%;background:var(--green,#14663f);color:#fff;
  font-size:18px;margin-bottom:14px}
#lead-form .lf-done h3{font-family:var(--display);font-size:20px;font-weight:500;
  letter-spacing:-.02em;margin-bottom:8px}
#lead-form .lf-done p{font-size:14.5px;font-weight:300;color:var(--muted)}
#lead-form.sent .lf-hd,#lead-form.sent .lf-grid,
#lead-form.sent .lf-submit,#lead-form.sent .lf-priv{display:none}

@media(max-width:640px){ #lead-form .lf-phone{grid-template-columns:120px 1fr} }

/* The inherited 132px band rhythm was built for a homepage where every section
   carries a large graphic. These bands are type only, so the padding dominates
   instead of framing anything. 96px holds the same feel at a readable length. */
.at-sec{padding-top:96px;padding-bottom:96px}
.at-final{padding-top:104px;padding-bottom:104px}

/* ==========================================================================
   HEADER TREATMENT, on the hero and on the footer
   The photograph and the #152647 base come straight off the homepage header.
   The closing CTA does NOT carry it: that section now runs the lead form, which
   is a light control surface and would be unreadable on the navy.
   ========================================================================== */
/* Two different navies on purpose, matching the homepage exactly: the hero sits
   on #152647 and the footer on the deeper #0a1d33. */
.at-hero,.at-foot{position:relative;overflow:hidden;isolation:isolate}
.at-hero{background:#152647}
.at-foot{background:#0a1d33}
.at-hero::before,.at-foot::before{content:"";position:absolute;inset:0;z-index:0;
  background-image:var(--nx-mesh);background-size:cover;background-position:50% 50%}
.at-hero::after,.at-foot::after{content:"";position:absolute;inset:0;z-index:1;
  pointer-events:none}

.at-hero::after{background:
  radial-gradient(70% 60% at 24% 46%,
    rgba(4,10,20,.42) 0%, rgba(4,10,20,.22) 56%, rgba(4,10,20,0) 88%),
  linear-gradient(90deg,
    rgba(4,10,20,.40) 0%, rgba(4,10,20,.18) 50%, rgba(4,10,20,0) 100%)}

/* the footer is dense with small links, so it needs a flatter, heavier scrim
   than the hero, which only has to protect a headline */
.at-foot::after{background:
  linear-gradient(180deg, rgba(4,10,20,.34) 0%, rgba(4,10,20,.46) 100%)}

/* content above both layers */
.at-hero .at-wrap,.at-foot .at-wrap{position:relative;z-index:2}
.at-hero .at-hero-in{position:relative;z-index:2}

/* .at-hero is display:flex, so .at-wrap was sizing to its own content and the
   auto margins then centred it, pushing the hero copy right of the 1240px grid
   every other section sits on. Filling the flex line puts it back on the shared
   container, flush left with the nav and the sections below. */
.at-hero .at-wrap{width:100%;flex:1 1 auto}
.at-hero .at-hero-in{margin-left:0;max-width:940px}

/* footer copy re-set for the navy field */
.at-foot .tl{color:#fff}
.at-foot .at-mono{color:#fff;opacity:.82}
.at-foot .at-foot-top{border-bottom-color:rgba(255,255,255,.22)}
.at-foot h5{color:#fff;opacity:.72}
.at-foot .at-foot-cols a{color:#fff;opacity:.8}
.at-foot .at-foot-cols a:hover{opacity:1;color:#e8944b}

/* the light hero carries a near opaque white pad behind the copy so black text
   clears the dot field. On a photograph it washes the copy out instead. */
.at-hero .at-hero-in::before{display:none}

/* copy re-set for the dark hero */
.at-hero .at-kicker{color:#fff;opacity:.92}
.at-hero .at-kicker::before{
  background:linear-gradient(90deg,#c8102e 0%,#e8944b 100%);
  background-color:transparent;height:2px;opacity:1}
.at-hero .at-h1{color:#fff}
.at-hero .at-lede{color:#fff;opacity:.84}
.at-hero .sv-crumb{color:#fff;opacity:.6}

/* The hero no longer carries a kicker, so its heading is the first thing under
   the breadcrumb. The inherited h1 top margin assumed a kicker sat above it. */
.at-hero .at-h1{margin-top:14px}

/* The hero button was picking up the generic 12.5px, which is the nav size.
   The homepage runs its hero button at 16px / 500 / 10px 24px, giving a 48px
   control. Matched exactly rather than guessed at a larger number. */
.at-hero .at-btn{font-size:16px;font-weight:500;padding:10px 24px;letter-spacing:.004em}

/* the bundle paints both buttons solid crimson at .at-btn.at-btn--ghost, which
   ties a single descendant class and wins on source order. Doubling outranks it. */
.at-hero .at-btn.at-btn--ghost{
  background:transparent;color:#fff;border:1px solid rgba(255,255,255,.45)}
.at-hero .at-btn.at-btn--ghost:hover{
  border-color:#fff;background:rgba(255,255,255,.10);color:#fff}

.at-hero h1{max-width:18ch}
.sv-crumb{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  margin-bottom:8px}
.sv-crumb a{color:inherit;text-decoration:none}
.sv-crumb a:hover{color:#e8944b;opacity:1}
.sv-crumb i{font-style:normal;color:#e8944b;padding:0 5px}
.sv-lead{font-size:16.5px;font-weight:300;line-height:1.72;color:var(--muted);max-width:70ch}
.sv-inline{margin-top:34px}

/* Six use case cards, three across. Previously one grid drawing 1px gridlines
   through a background colour, which left the cards touching with no air. Now
   separate cards with real spacing, each with its own border and corner. */
.sv-ucs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:46px}
.sv-uc{background:var(--void);border:1px solid var(--line);padding:26px 24px 28px;
  transition:border-color .35s var(--ease),box-shadow .35s var(--ease),
             transform .35s var(--ease)}
.sv-uc:hover{border-color:rgba(0,0,0,.26);transform:translateY(-5px);
  box-shadow:0 20px 44px -28px rgba(0,0,0,.42)}
.sv-uc h3{font-family:var(--display);font-size:17px;font-weight:500;letter-spacing:-.016em;
  margin-bottom:8px;line-height:1.28}
.sv-uc p{font-size:14px;font-weight:300;line-height:1.62;color:var(--muted)}

/* three alternating why blocks, standing where GLG puts an image */
.sv-whys{margin-top:14px}
.sv-why{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center;
  padding:46px 0;border-bottom:1px solid var(--line)}
.sv-why:first-child{border-top:1px solid var(--line)}
.sv-why.alt .sv-why-txt{order:2}
.sv-why.alt .sv-why-list{order:1}
.sv-why-txt .n{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--warm);
  display:block;margin-bottom:14px}
.sv-why-txt h3{font-family:var(--display);font-size:clamp(22px,2.1vw,29px);font-weight:500;
  letter-spacing:-.028em;line-height:1.16;margin-bottom:13px;max-width:20ch}
.sv-why-txt p{font-size:15px;font-weight:300;line-height:1.7;color:var(--muted);max-width:52ch}
.sv-why-list{list-style:none;background:var(--slate);border-radius:12px;padding:8px 24px}
.sv-why-list li{position:relative;padding:16px 0 16px 26px;font-size:14.5px;font-weight:300;
  line-height:1.6;color:var(--txt);border-bottom:1px solid var(--line)}
.sv-why-list li:last-child{border-bottom:0}
.sv-why-list li:before{content:"";position:absolute;left:0;top:25px;width:11px;height:1px;
  background:linear-gradient(90deg,#c8102e,#e8944b)}

.sv-steps{list-style:none;margin-top:46px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:28px 52px}
.sv-step{display:flex;gap:18px;border-top:1px solid var(--line);padding-top:22px}
.sv-step .n{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--warm);padding-top:4px}
.sv-step h3{font-family:var(--display);font-size:17.5px;font-weight:500;letter-spacing:-.016em;margin-bottom:7px}
.sv-step p{font-size:14.5px;font-weight:300;line-height:1.64;color:var(--muted)}

/* Same treatment as the use case cards: spaced, bordered, rounded. These were
   still on the old gridline layout, which only looked right because on the
   Expert Calls page they sat inside a navy band that overrode it. On a light
   section the cards touched with square corners. */
.sv-whos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:46px}
.sv-who{background:var(--void);border:1px solid var(--line);padding:26px 22px 28px;
  transition:border-color .35s var(--ease),box-shadow .35s var(--ease),
             transform .35s var(--ease)}
.sv-who:hover{border-color:rgba(0,0,0,.26);transform:translateY(-5px);
  box-shadow:0 20px 44px -28px rgba(0,0,0,.42)}
.sv-who h3{font-family:var(--display);font-size:16px;font-weight:500;letter-spacing:-.016em;margin-bottom:8px}
.sv-who p{font-size:13.5px;font-weight:300;line-height:1.62;color:var(--muted)}

.sv-vals{list-style:none;margin-top:46px;max-width:920px}
.sv-val{display:flex;gap:22px;padding:24px 0;border-top:1px solid var(--line)}
/* The list used to close itself with a bottom rule. Where a section follows,
   that rule lands 88px above the section's own top rule, so the page showed two
   hairlines with a band of nothing between them. The section divider is the
   only rule needed; the list keeps its closing rule only when nothing follows. */
.sv-val:last-child{border-bottom:1px solid var(--line)}
.sv-sub:has(+ .sv-sub) .sv-val:last-child{border-bottom:0}
.sv-val .n{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--warm);padding-top:5px}
.sv-val h3{font-family:var(--display);font-size:18px;font-weight:500;letter-spacing:-.018em;margin-bottom:8px}
.sv-val p{font-size:14.5px;font-weight:300;line-height:1.68;color:var(--muted);max-width:66ch}

.sv-cases{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:46px}
.sv-case{border:1px solid var(--line);border-radius:var(--r);padding:28px 26px;background:var(--void)}
.sv-case .tag{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--warm);margin-bottom:12px}
.sv-case h3{font-family:var(--display);font-size:18px;font-weight:500;letter-spacing:-.018em;margin-bottom:10px}
.sv-case p{font-size:14.5px;font-weight:300;line-height:1.66;color:var(--muted)}

.sv-price{margin-top:40px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;max-width:860px}
.sv-price article{border:1px solid var(--line);border-radius:12px;padding:26px 24px}
.sv-price h3{font-family:var(--display);font-size:17.5px;font-weight:500;margin-bottom:8px}
.sv-price p{font-size:14px;font-weight:300;line-height:1.64;color:var(--muted)}

.at-a{overflow:hidden;transition:height .42s var(--ease)}
.at-a[hidden]{display:block;height:0}

/* ==========================================================================
   TWO COLUMN ZONE + NEXY RAIL
   The hand built agent panel that used to sit here is gone. Nexy AI is lifted
   whole out of the homepage instead, so the rail now supplies only the seat and
   the component brings its own everything. See nexy_component.py.
   ========================================================================== */
.sv-zone{background:var(--void);border-top:1px solid var(--line)}
.sv-zone-grid{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:56px;
  align-items:start;padding-top:96px;padding-bottom:96px}
.sv-sub+.sv-sub{margin-top:88px;padding-top:88px;border-top:1px solid var(--line)}
.sv-rail{position:sticky;top:96px;align-self:start}

/* ==========================================================================
   NAV OVER THE HERO
   A solid white bar sitting on the navy hero was the thing that looked wrong.
   The nav now starts transparent and only takes its white ground once the page
   has scrolled past the hero. The mark goes white while it is over the navy,
   because its wordmark is dark and would otherwise disappear.
   ========================================================================== */
.mn{transition:background .32s var(--ease),border-color .32s var(--ease),
    backdrop-filter .32s var(--ease)}
.mn--over{background:transparent;border-bottom-color:transparent;
  backdrop-filter:none;-webkit-backdrop-filter:none}
.mn--over .mn-mark{filter:brightness(0) invert(1)}
.mn--over .mn-item > a{color:#fff}
.mn--over .mn-item > a:hover{color:#e8944b;background:transparent}
.mn--over .mn-sub{color:rgba(255,255,255,.72);border-left-color:rgba(255,255,255,.3)}
.mn--over .mn-btn--ghost{color:#fff;border-color:rgba(255,255,255,.45)}
.mn--over .mn-btn--ghost:hover{border-color:#fff;background:rgba(255,255,255,.10)}

/* ==========================================================================
   ORANGE ON HOVER
   The homepage's own hovers run to ink and crimson. Orange is the warm end of
   the ember ramp, so hovering picks up the same colour the headline emphasis
   already ends on. Applied to every link and quiet control on the page.
   ========================================================================== */
.sv-crumb a:hover{color:#e8944b}
.at-sec .at-link:hover,.sv-zone .at-link:hover{color:#e8944b;border-bottom-color:#e8944b}
.mn-item > a:hover{color:#e8944b}
.at-foot .at-foot-cols a:hover{opacity:1;color:#e8944b}
.at-acc .at-q:hover{color:#e8944b}
.at-acc .at-q:hover .pm span{background:#e8944b}
/* Every card heading goes orange on hover, on light ground and on navy. The
   case study cards were the gap: they had the rule for their tag but not for
   the heading, so those alone stayed white. */
.sv-uc:hover h3,.sv-deep:hover h3,.sv-price article:hover h3,
.sv-who:hover h3,.sv-case:hover h3{color:#e8944b}
.sv-sub--band .sv-who:hover h3,.sv-sub--band .sv-case:hover h3,
.sv-sub--band .sv-uc:hover h3{color:#e8944b}
.sv-case:hover .tag{color:#e8944b}

/* the pricing cards were the one card type with no hover at all */
.sv-price article{transition:border-color .35s var(--ease),box-shadow .35s var(--ease),
  transform .35s var(--ease)}
.sv-price article:hover{border-color:rgba(0,0,0,.26);transform:translateY(-5px);
  box-shadow:0 20px 44px -28px rgba(0,0,0,.42)}
@media(prefers-reduced-motion:reduce){.sv-price article:hover{transform:none}}

/* Solid buttons are the exception to the orange rule. Orange on a crimson fill
   read as a colour clash rather than a state change, so they invert instead:
   white ground, crimson text, crimson border. This is also what the homepage
   does with .at-btn--solid:hover. */
.at-btn.at-btn--solid:hover,
.mn-btn.mn-btn--solid:hover{
  background:#fff;border-color:#c8102e;color:#c8102e}
.at-hero .at-btn.at-btn--solid:hover{background:#fff;border-color:#c8102e;color:#c8102e}

/* ==========================================================================
   GREY BANDS BECOME NAVY
   Every grey surface on the page now runs the hero's treatment: the same
   #152647 base, the same photograph and the same scrim. Anything sitting on
   them is re-set for a dark field, and the card surfaces become translucent
   white so a band reads as one navy block rather than white boxes on navy.
   ========================================================================== */
/* A band lives inside the left grid column now, so its navy has to break out to
   the full viewport while the copy stays on the column. One pseudo element does
   both layers: scrim over photograph, in a single background shorthand. */
.sv-sub--band{position:relative;z-index:0;padding:76px 0;margin:34px 0;
  border-top:0!important}
.sv-sub--band::before{content:"";position:absolute;top:0;bottom:0;
  left:50%;transform:translateX(-50%);width:100vw;z-index:-1;background-color:#152647;
  background-image:
    radial-gradient(70% 60% at 24% 46%,
      rgba(4,10,20,.42) 0%, rgba(4,10,20,.22) 56%, rgba(4,10,20,0) 88%),
    linear-gradient(90deg,
      rgba(4,10,20,.40) 0%, rgba(4,10,20,.20) 50%, rgba(4,10,20,.06) 100%),
    var(--nx-mesh);
  background-size:auto,auto,cover;
  background-position:center,center,50% 50%}

.sv-sub--band .at-kicker{color:#fff;opacity:.92}
.sv-sub--band .at-kicker::before{
  background:linear-gradient(90deg,#c8102e 0%,#e8944b 100%);
  background-color:transparent;height:2px;opacity:1}
.sv-sub--band .at-h2{color:#fff}
.sv-sub--band .at-lede,.sv-sub--band .sv-lead{color:#fff;opacity:.84}

/* the proof panel inside each "why Nextyn" row was the other grey surface */
.sv-why-list{background:#152647}
.sv-why-list li{color:#fff;border-bottom-color:rgba(255,255,255,.16)}

/* ==========================================================================
   CARDS ON NAVY, LIFTED ON HOVER
   Same recipe as the homepage's .nx-card: 16px radius, translucent white,
   an inset top highlight and a deep drop shadow. The homepage does not move
   the card, so the lift is the one thing added here to make it rise.
   ========================================================================== */
.sv-sub--band .sv-whos,.sv-sub--band .sv-cases,.sv-sub--band .sv-ucs{background:none;border:0;gap:16px}
.sv-sub--band .sv-who,.sv-sub--band .sv-case,.sv-sub--band .sv-uc{
  position:relative;overflow:hidden;isolation:isolate;
  border-radius:16px;padding:20px 22px;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.17);
  backdrop-filter:blur(15px) saturate(125%);
  -webkit-backdrop-filter:blur(15px) saturate(125%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10), 0 18px 40px -26px rgba(0,0,0,.6);
  transition:background .35s var(--ease), border-color .35s var(--ease),
             box-shadow .35s var(--ease), transform .35s var(--ease)}

/* Layer one: a pool of warm light that follows the cursor inside the card.
   This is the technique Linear uses on its own surfaces, and it is what makes
   a card feel lit rather than just moved. --mx and --my are written by script
   on pointermove; without script it simply never appears. */
.sv-sub--band .sv-who::before,.sv-sub--band .sv-case::before,.sv-sub--band .sv-uc::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;
  transition:opacity .4s var(--ease);
  background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),
    rgba(232,148,75,.20) 0%, rgba(232,148,75,.07) 42%, rgba(232,148,75,0) 70%)}

/* Layer two: an ember hairline that lights along the top edge. */
.sv-sub--band .sv-who::after,.sv-sub--band .sv-case::after,.sv-sub--band .sv-uc::after{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;z-index:1;
  pointer-events:none;opacity:0;transition:opacity .4s var(--ease);
  background:linear-gradient(90deg,transparent,#e8944b 45%,#c8102e 75%,transparent)}

.sv-sub--band .sv-who > *,.sv-sub--band .sv-case > *,.sv-sub--band .sv-uc > *{position:relative;z-index:2}

.sv-sub--band .sv-who:hover,.sv-sub--band .sv-case:hover,.sv-sub--band .sv-uc:hover{
  background:rgba(255,255,255,.11);
  border-color:rgba(255,255,255,.30);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16), 0 26px 54px -26px rgba(0,0,0,.72);
  transform:translateY(-6px)}
.sv-sub--band .sv-who:hover::before,.sv-sub--band .sv-case:hover::before,
.sv-sub--band .sv-uc:hover::before,
.sv-sub--band .sv-who:hover::after,.sv-sub--band .sv-case:hover::after,
.sv-sub--band .sv-uc:hover::after{opacity:1}

.sv-sub--band .sv-who h3,.sv-sub--band .sv-case h3,.sv-sub--band .sv-uc h3{color:#fff}
.sv-sub--band .sv-who p,.sv-sub--band .sv-case p,
.sv-sub--band .sv-uc p{color:#fff;opacity:.78}
.sv-sub--band .sv-case .tag{color:#e8944b}
@media(prefers-reduced-motion:reduce){
  .sv-sub--band .sv-who:hover,.sv-sub--band .sv-case:hover,
  .sv-sub--band .sv-uc:hover{transform:none}
}

@media(max-width:1080px){
}

@media(max-width:1100px){ .sv-ucs{grid-template-columns:repeat(2,minmax(0,1fr))}
                          .sv-whos{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media(max-width:900px){
  .at-sec{padding-top:66px;padding-bottom:66px}
  .sv-ucs,.sv-whos,.sv-steps,.sv-cases,.sv-price{grid-template-columns:1fr}
  .sv-why{grid-template-columns:1fr;gap:26px;padding:36px 0}
  .sv-why.alt .sv-why-txt,.sv-why.alt .sv-why-list{order:0}
  .at-hero h1{max-width:none}
}


/* the delivery list links through to each service page */
.sv-svc{color:inherit;text-decoration:none;border-bottom:1px solid transparent;
  transition:color .25s var(--ease),border-color .25s var(--ease)}
.sv-svc:hover{color:#e8944b;border-bottom-color:#e8944b}

/* section 7, the commercial versus customer due diligence table. Kept as a real
   table because its shape is what wins the snippet, but built as two contrasting
   columns so the answer reads at a glance rather than as a wall of cells.
   border-collapse:separate is required for the radius to survive. */
.sv-cmp{width:100%;border-collapse:separate;border-spacing:0;margin-top:44px;
  table-layout:fixed}
.sv-cmp .c-lab{width:20%}
.sv-cmp .c-col{width:40%}
.sv-cmp th,.sv-cmp td{padding:20px 24px;text-align:left;vertical-align:top;
  font-size:14.5px;font-weight:300;line-height:1.64;color:var(--muted);
  border-bottom:1px solid var(--line)}

/* headers get an eyebrow over a display heading. The old single mono line had to
   carry the whole label, so the longer one wrapped into an unreadable stack. */
.sv-cmp thead th{vertical-align:bottom;padding-bottom:18px;
  font-family:var(--display);font-size:16.5px;font-weight:500;letter-spacing:-.014em;
  line-height:1.3;color:var(--txt);border-bottom:1px solid var(--line-2)}
.sv-cmp thead .tag{display:block;font-family:var(--mono);font-size:9.5px;
  letter-spacing:.16em;text-transform:uppercase;font-weight:400;color:var(--muted);
  margin-bottom:11px}
/* --muted resolves to solid black under .at--light, so it cannot carry the
   contrast this section needs. Set the de-emphasis explicitly instead. */
.sv-cmp thead .tag{color:rgba(0,0,0,.45)}
.sv-cmp thead th.yes .tag{color:var(--warm)}
.sv-cmp .corner{border-bottom:1px solid var(--line-2);padding:0}

/* the supported column is tinted the full height, so which one we do is obvious
   before a word is read */
.sv-cmp .yes{background:rgba(200,16,46,.035)}
.sv-cmp thead th.yes{border-top:2px solid var(--warm);
  border-radius:12px 12px 0 0}
.sv-cmp tbody tr:last-child td.yes{border-radius:0 0 12px 12px}
.sv-cmp tbody td.yes{color:var(--txt)}
.sv-cmp tbody td:not(.yes),.sv-cmp thead th:not(.yes){color:rgba(0,0,0,.62)}

.sv-cmp tbody th{font-family:var(--display);font-size:14.5px;font-weight:500;
  color:var(--txt);padding-left:0}
.sv-cmp tbody tr:last-child th,.sv-cmp tbody tr:last-child td{border-bottom:0}
.sv-cmp-note{margin-top:22px;font-size:14.5px;font-weight:300;line-height:1.68;
  color:var(--muted);max-width:70ch}
.sv-cmp-note b{font-weight:500;color:var(--txt)}

/* ---- capabilities list ---------------------------------------------------
   The FAQ accordion at list density. The FAQ's .at-q is a 26px headline with
   28px of padding, which is right for a question and far too loud for a
   scannable capability name, so the type and the rhythm come down and the plus
   marker moves up with them. Everything else, the borders, the open and close
   animation, the orange hover, is inherited. */
.sv-caps{max-width:none;margin:38px 0 0}
.sv-caps .at-q{font-family:var(--display);font-size:17px;font-weight:500;
  line-height:1.34;letter-spacing:-.012em;padding:17px 46px 17px 0}
.sv-caps .at-q .pm{top:22px}
.sv-caps .at-a .in{padding:0 46px 18px 0;font-size:14.5px;font-weight:300;
  line-height:1.62;color:var(--muted);max-width:74ch}
/* The divider belongs between items, not between a name and its own answer.
   The FAQ hangs it off .at-q, which is right there because a question and its
   answer are separate thoughts. Here they are one, so it moves to the item. */
.sv-caps .at-q{border-bottom:0}
.sv-caps .at-acc-item{border-bottom:1px solid var(--line)}

/* The accordion draws a rule across its own top, which is right for the FAQ
   where the first thing under it is a question. Here the first thing under it
   is a group label, so the rule was fencing the label off from the heading
   above it. The list starts at the first capability instead. */
.sv-caps{border-top:0}

/* the two halves of the list: what the experts decide, and where they sit */
.sv-caps-group{display:block;margin:34px 0 8px;font-family:var(--mono);
  font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--warm)}
.sv-caps-group:first-child{margin-top:0}

/* ---- the CTA that sits under them ----------------------------------------
   Deliberately not at the foot of the page: this is the point where a reader
   has just seen the thing they came for named.

   Navy, wearing the same treatment as the page's own bands: the #152647 base
   with the header photograph over it and the two layer scrim on top. It is the
   band recipe scaled down to a box, so this reads as part of the system rather
   than as a panel that happens to be blue. */
.sv-cap-cta{position:relative;isolation:isolate;overflow:hidden;
  display:flex;align-items:center;justify-content:space-between;
  gap:36px;flex-wrap:wrap;margin-top:40px;padding:34px 36px;
  border:1px solid rgba(255,255,255,.14);border-radius:12px;
  background-color:#152647;
  background-image:
    radial-gradient(70% 60% at 24% 46%, rgba(4,10,20,.42) 0%,
      rgba(4,10,20,.22) 56%, rgba(4,10,20,0) 88%),
    linear-gradient(90deg, rgba(4,10,20,.40) 0%, rgba(4,10,20,.20) 50%,
      rgba(4,10,20,.06) 100%),
    var(--nx-mesh,none);
  background-size:auto,auto,cover;
  background-position:50% 50%,50% 50%,50% 50%;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),
             0 26px 60px -34px rgba(0,0,0,.55)}
.sv-cap-say h3{font-family:var(--display);font-size:20px;font-weight:500;
  letter-spacing:-.018em;margin-bottom:8px;color:#fff}
.sv-cap-say p{font-size:14.5px;font-weight:300;line-height:1.62;
  color:#fff;opacity:.82;max-width:56ch}
.sv-cap-btns{display:flex;gap:12px;flex-wrap:wrap;flex:none}
/* On navy the secondary is the house ghost: white ink, translucent white edge.
   The crimson outline it wore on the light panel would go muddy here. */
.sv-cap-cta .at-btn--line{background:transparent;color:#fff;
  border:1px solid rgba(255,255,255,.45)}
.sv-cap-cta .at-btn--line:hover{border-color:#fff;background:rgba(255,255,255,.10);
  color:#fff;transform:translateY(-1px)}
@media(max-width:760px){
  .sv-cap-cta{flex-direction:column;align-items:flex-start;gap:22px}
  .sv-cap-btns{width:100%}
  .sv-cap-btns .at-btn{flex:1 1 auto;justify-content:center}
}

/* the one slot on this page with no real content yet */
.sv-slot{margin-top:42px;border:1px dashed var(--line-2);border-radius:12px;
  padding:34px 30px;background:var(--void)}
.sv-slot .lab{font-family:var(--mono);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--warm);display:block;margin-bottom:10px}
.sv-slot p{font-size:14.5px;font-weight:300;line-height:1.68;color:var(--muted);max-width:74ch}

/* Stacked, the header row is gone, so each cell has to name its own column.
   data-l carries the label the thead was providing. */
@media(max-width:760px){
  .sv-cmp,.sv-cmp tbody,.sv-cmp tr,.sv-cmp th,.sv-cmp td{display:block;width:auto}
  .sv-cmp thead,.sv-cmp colgroup{display:none}
  .sv-cmp tbody tr{border:1px solid var(--line);border-radius:12px;
    overflow:hidden;margin-bottom:14px}
  .sv-cmp tbody th{background:var(--slate);padding:14px 18px;
    border-bottom:1px solid var(--line)}
  .sv-cmp tbody td{padding:16px 18px;border-bottom:1px solid var(--line)}
  .sv-cmp tbody tr td:last-child{border-bottom:0}
  .sv-cmp tbody td::before{content:attr(data-l);display:block;font-family:var(--mono);
    font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:rgba(0,0,0,.45);
    margin-bottom:7px}
  .sv-cmp tbody td.yes::before{color:var(--warm)}
  .sv-cmp .yes{border-radius:0}
}

:root{--ui:"Geist", -apple-system, system-ui, sans-serif;--ember-ramp:linear-gradient(100deg, #c8102e 0%, #e0563b 55%, #e8944b 100%);--nx-mesh:url("https://wxrftud8go5hre7x.public.blob.vercel-storage.com/delivered/4c2ae7c9095f03cd.jpg")}/* ---- the panel: the nx-card glass, verbatim, no shimmer ----------------- */
.nxdP{position:absolute;top:0;right:0;width:344px;height:566px;
  display:flex;flex-direction:column;align-items:center;
  border-radius:16px;overflow:hidden;pointer-events:auto;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.17);
  backdrop-filter:blur(15px) saturate(125%);
  -webkit-backdrop-filter:blur(15px) saturate(125%);
  box-shadow:0 1px 0 rgba(255,255,255,.10) inset,0 18px 40px -26px rgba(0,0,0,.6);
  transform-origin:100% 100%;
  transition:opacity .55s cubic-bezier(.22,1,.36,1),transform .55s cubic-bezier(.22,1,.36,1);
  animation:nxd-rise .8s cubic-bezier(.22,1,.36,1) both}
.nxdP.is-away{opacity:0;transform:translate(40px,150px) scale(.3);pointer-events:none}
@keyframes nxd-rise{0%{opacity:0;translate:0 18px}100%{opacity:1;translate:0 0}}

.nxd-head{padding:22px 20px 0;text-align:center;flex:none;
  transition:opacity .3s ease,translate .3s ease}
.nxdP.mode-chat .nxd-head{opacity:0;pointer-events:none;translate:0 -8px}
.nxd-head b{font-family:var(--ui,system-ui);font-size:17px;font-weight:600;color:#fff;
  display:flex;align-items:center;gap:9px;justify-content:center}
.nxd-head .sub{display:block;margin-top:5px;font-family:var(--ui,system-ui);
  font-size:12.5px;font-weight:300;line-height:1.45;color:rgba(255,255,255,.78)}

.nxd-req{display:block;margin:15px auto 0;flex:none;position:relative;z-index:4;
  cursor:pointer;font-family:var(--ui,system-ui);font-size:14.5px;font-weight:500;
  color:#fff;background:#c8102e;border:1px solid #c8102e;
  border-radius:var(--r,8px);padding:10px 26px;
  transition:background .3s ease,color .3s ease,border-color .3s ease,
             opacity .3s ease,translate .3s ease}
.nxd-req:hover{background:#fff;border-color:#fff;color:#c8102e}
.nxdP.mode-chat .nxd-req,.nxdP.is-live .nxd-req{
  opacity:0;pointer-events:none;translate:0 -8px}
/* she is live: the request button has done its job, the way into chat
   takes its seat */
.nxd-vline{position:absolute;left:26px;right:26px;top:116px;z-index:4;
  display:flex;align-items:center;gap:10px;
  opacity:0;pointer-events:none;transition:opacity .35s ease .25s}
.nxdP.is-live .nxd-vline{opacity:1;pointer-events:auto}
.nxd-vline > span{flex:1;font-family:var(--ui,system-ui);font-size:11.5px;
  font-weight:300;line-height:1.4;color:rgba(255,255,255,.72)}

/* the cross back to the original screen, chat mode only */
.nxd-x{position:absolute;top:12px;right:12px;z-index:7;
  border:0;background:transparent;color:rgba(255,255,255,.65);
  font-size:21px;line-height:1;cursor:pointer;padding:4px 7px;
  opacity:0;pointer-events:none;
  transition:opacity .3s ease .25s,color .2s ease,transform .3s ease}
.nxdP.mode-chat .nxd-x{opacity:1;pointer-events:auto}
.nxd-x:hover{color:#fff;transform:rotate(90deg)}

/* ---- the medallion: one object, FLIP-shrunk between modes --------------- */
.nxd-stage{position:absolute;top:170px;left:50%;width:224px;height:224px;
  margin-left:-112px;z-index:3;pointer-events:none;will-change:transform;
  transition:transform .62s cubic-bezier(.45,.05,.2,1)}
.nxd-stage img{position:absolute;top:-27px;left:50%;transform:translateX(-50%);
  width:260px;max-width:none;display:block;opacity:0;transition:opacity .95s ease}
.nxd-stage img.is-on{opacity:1}
.nxd-ring{position:absolute;inset:-14px;width:calc(100% + 28px);
  height:calc(100% + 28px);overflow:visible;transition:opacity .3s ease}
.nxd-ring rect{fill:url(#nxdGrad);transform-box:fill-box;
  transform-origin:center bottom;transform:scaleY(.3);opacity:.85;
  animation:nxd-eqr 1.6s ease-in-out infinite}
@keyframes nxd-eqr{
  0%{transform:scaleY(.22);opacity:.55}
  50%{transform:scaleY(1);opacity:1}
  100%{transform:scaleY(.22);opacity:.55}
}
.nxd-stage.to-corner .nxd-ring{opacity:0}
/* Speak pressed: the ring surges and a live chip confirms she is on */
.nxdP.is-live .nxd-ring{filter:brightness(1.35) saturate(1.3)}
.nxdP.is-live .nxd-ring rect{animation-duration:.55s !important}
.nxd-livechip{position:absolute;top:396px;left:50%;transform:translateX(-50%);
  z-index:3;display:flex;align-items:center;gap:7px;pointer-events:none;
  font-family:var(--ui,system-ui);font-size:11.5px;font-weight:400;color:#fff;
  background:rgba(200,16,46,.30);border:1px solid rgba(232,148,75,.55);
  border-radius:100px;padding:5px 13px;opacity:0;transition:opacity .3s ease}
.nxdP.is-live .nxd-livechip{opacity:1}
.nxd-livechip::before{content:"";width:7px;height:7px;border-radius:50%;
  background:#e8944b;animation:nxd-pulse 1.2s ease-out infinite}
@keyframes nxd-pulse{
  0%{box-shadow:0 0 0 0 rgba(232,148,75,.6)}
  70%{box-shadow:0 0 0 7px rgba(232,148,75,0)}
  100%{box-shadow:0 0 0 0 rgba(232,148,75,0)}}


/* ---- voice mode: the prompts live outside, ready to be spoken ----------- */
.nxd-asks{position:absolute;left:22px;right:22px;top:430px;z-index:2;
  display:flex;flex-direction:column;gap:7px;
  transition:opacity .3s ease,translate .35s ease}
.nxdP.mode-chat .nxd-asks{opacity:0;translate:0 10px;pointer-events:none}
.nxd-ask{display:flex;align-items:center;gap:10px;text-align:left;cursor:pointer;
  background:transparent;border:0;padding:5px 2px}
.nxd-ask i{width:6px;height:6px;border-radius:50%;flex:none;font-style:normal;
  background:var(--ember-ramp,linear-gradient(90deg,#c8102e,#e8944b))}
.nxd-ask em{font-style:normal;font-family:var(--ui,system-ui);font-size:12.5px;
  font-weight:300;color:rgba(255,255,255,.88)}
.nxd-ask:hover em{
  background:var(--ember-ramp,linear-gradient(100deg,#c8102e,#e0563b 55%,#e8944b));
  -webkit-background-clip:text;background-clip:text;color:transparent}

/* ---- chat mode ---------------------------------------------------------- */
.nxd-chat{position:absolute;left:0;right:0;top:14px;bottom:0;z-index:1;
  display:flex;flex-direction:column;padding:12px 14px 14px;min-height:0;
  opacity:0;pointer-events:none;translate:0 14px;
  transition:opacity .4s ease .28s,translate .5s cubic-bezier(.22,1,.36,1) .28s}
.nxdP.mode-chat .nxd-chat{opacity:1;pointer-events:auto;translate:0 0}
/* the invitation back to voice */
.nxd-sline{display:flex;align-items:center;gap:10px;flex:none;margin-bottom:8px}
/* in the hero panel the words go; one centred Speak, the seat at right */
.nxdP .nxd-sline{position:relative;justify-content:center;min-height:44px;
  margin-bottom:10px;padding-right:0}
.nxdP .nxd-sline > span:not(.seat){display:none}
.nxdP .nxd-sline .nxd-sbtn{margin:0 auto}
.nxdP .nxd-sline .seat{position:absolute;right:26px;top:0;margin:0}
.nxd-sline > span{flex:1;font-family:var(--ui,system-ui);font-size:11.5px;
  font-weight:300;line-height:1.4;color:rgba(255,255,255,.72)}
.nxd-sbtn{flex:none;cursor:pointer;font-family:var(--ui,system-ui);font-size:12.5px;
  font-weight:500;padding:6px 18px;border-radius:100px;
  background:transparent;border:1px solid rgba(255,255,255,.4);color:#fff;
  transition:background .25s ease,border-color .25s ease}
.nxd-sbtn:hover{
  background:var(--ember-ramp,linear-gradient(100deg,#c8102e,#e0563b 55%,#e8944b));
  border-color:transparent}
/* the seat the medallion shrinks into, top right beside the cross */
.nxd-sline .seat{width:44px;height:44px;flex:none;margin-right:26px}
.nxd-log{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:8px;
  padding:4px 2px;min-height:0}
.nxd-log::-webkit-scrollbar{width:0}
.nxd-msg{max-width:84%;padding:8px 13px;border-radius:14px;
  font-family:var(--ui,system-ui);font-size:13px;font-weight:300;
  line-height:1.45;color:#fff}
.nxd-msg.me{background:rgba(255,255,255,.15);align-self:flex-end;
  border-bottom-right-radius:4px}
.nxd-msg.nexy{background:rgba(10,22,44,.55);border:1px solid rgba(255,255,255,.18);
  align-self:flex-start;border-bottom-left-radius:4px}
.nxd-sugg{display:flex;flex-direction:column;gap:6px;flex:none;margin:8px 0 2px}
.nxd-sugg button{text-align:left;cursor:pointer;font-family:var(--ui,system-ui);
  font-size:12px;font-weight:300;color:rgba(255,255,255,.85);
  background:rgba(10,22,44,.42);border:1px solid rgba(255,255,255,.2);
  border-radius:12px;padding:8px 12px;transition:background .25s ease}
.nxd-sugg button:hover{background:rgba(10,22,44,.68)}
.nxd-inrow{display:flex;gap:8px;margin-top:8px;flex:none}
.nxd-inrow input{flex:1;height:40px;min-width:0;
  background:rgba(10,22,44,.5);border:1px solid rgba(255,255,255,.25);
  border-radius:100px;color:#fff;padding:0 16px;outline:none;
  font-family:var(--ui,system-ui);font-size:13px;font-weight:300}
.nxd-inrow input::placeholder{color:rgba(255,255,255,.5)}
.nxd-inrow input:focus{border-color:rgba(255,255,255,.5)}
/* the send arrow, white so it stands out */
.nxd-send{width:40px;height:40px;flex:none;border-radius:50%;cursor:pointer;
  border:1px solid #fff;background:#fff;color:#0a1d33;font-size:15px;
  line-height:1;transition:background .25s ease,color .25s ease}
.nxd-send:hover{
  background:var(--ember-ramp,linear-gradient(100deg,#c8102e,#e0563b 55%,#e8944b));
  border-color:transparent;color:#fff}

/* ---- consent gate ------------------------------------------------------- */
.nxd-consent{position:absolute;inset:0;z-index:8;display:none;
  align-items:center;justify-content:center;padding:26px;
  background:rgba(8,16,32,.72);backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);border-radius:inherit}
.nxd-consent.is-open{display:flex;animation:nxd-unfurl .35s cubic-bezier(.22,1,.36,1) both}
.nxd-consent.is-closing{animation:nxd-furl .3s ease both}
.nxd-consent > div{background:rgba(16,28,52,.96);border:1px solid rgba(255,255,255,.24);
  border-radius:14px;padding:20px 18px;text-align:center;max-width:270px}
.nxd-consent p{font-family:var(--ui,system-ui);font-size:12.5px;font-weight:300;
  line-height:1.55;color:rgba(255,255,255,.85);margin:0 0 14px}
.nxd-consent p a{color:#fff;text-decoration:underline}
.nxd-consent button{cursor:pointer;font-family:var(--ui,system-ui);font-size:13px;
  font-weight:500;border-radius:100px;padding:9px 20px}
.nxd-agree{background:#fff;border:1px solid #fff;color:#0a1d33;margin-right:8px}
.nxd-later{background:transparent;border:1px solid rgba(255,255,255,.4);color:#fff}

/* ---- the dock: a card with presence, not a sliver ----------------------- */
.nxd-pill{position:fixed;right:26px;bottom:26px;z-index:400;cursor:pointer;
  display:flex;align-items:center;gap:15px;text-align:left;
  background:rgba(16,28,52,.55);border:1px solid rgba(255,255,255,.32);
  border-radius:100px;padding:8px 22px 8px 9px;
  backdrop-filter:blur(18px) saturate(135%);
  -webkit-backdrop-filter:blur(18px) saturate(135%);
  box-shadow:0 1px 0 rgba(255,255,255,.14) inset,0 26px 60px -22px rgba(0,0,0,.65);
  opacity:0;transform:translateY(30px) scale(.7);transform-origin:100% 100%;
  pointer-events:none;
  transition:opacity .45s cubic-bezier(.34,1.4,.64,1) .22s,
             transform .45s cubic-bezier(.34,1.4,.64,1) .22s,
             box-shadow .3s ease}
.nxd-pill:hover{box-shadow:0 1px 0 rgba(255,255,255,.2) inset,
  0 30px 70px -22px rgba(0,0,0,.8)}
.nxd-pill.is-in{opacity:1;transform:none;pointer-events:auto}
.nxd-pill:not(.is-in){transition-delay:0s;transition-duration:.3s}
.nxd-pill.is-tucked{opacity:0;transform:translateY(16px) scale(.72);
  pointer-events:none;transition-delay:0s;transition-duration:.28s}
.nxd-pill .por{position:relative;width:46px;height:46px;flex:none}
.nxd-pill .por::before{content:"";position:absolute;inset:-3px;border-radius:50%;
  background:conic-gradient(from 210deg,#c8102e,#e0563b,#e8944b,#c8102e);
  animation:nxd-spin 9s linear infinite}
@keyframes nxd-spin{to{transform:rotate(360deg)}}
.nxd-pill img{position:relative;width:46px;height:46px;border-radius:50%;
  object-fit:cover;border:2px solid #101c34;background:#152647;display:block}
.nxd-pill .txt{display:flex;flex-direction:column;gap:2px}
.nxd-pill b{font-family:var(--ui,system-ui);font-size:14px;font-weight:600;
  letter-spacing:-.01em;color:#fff}
.nxd-pill .s2{display:flex;align-items:center;gap:7px;
  font-family:var(--ui,system-ui);font-size:11px;font-weight:300;
  color:rgba(255,255,255,.75)}
.nxd-wave{display:inline-flex;align-items:center;gap:2.5px;height:14px}
.nxd-wave i{width:2.5px;border-radius:2px;
  background:var(--ember-ramp,linear-gradient(180deg,#e8944b,#c8102e));
  animation:nxd-eq 1.1s ease-in-out infinite}
.nxd-wave i:nth-child(1){height:6px}
.nxd-wave i:nth-child(2){height:10px;animation-delay:.18s}
.nxd-wave i:nth-child(3){height:14px;animation-delay:.36s}
.nxd-wave i:nth-child(4){height:9px;animation-delay:.54s}
.nxd-wave i:nth-child(5){height:5px;animation-delay:.72s}
@keyframes nxd-eq{0%,100%{transform:scaleY(.45)}50%{transform:scaleY(1)}}

/* ---- the floating window, on the brand mesh ----------------------------- */
.nxd-float{position:fixed;right:26px;bottom:88px;z-index:401;width:344px;height:500px;
  display:none;flex-direction:column;border-radius:16px;overflow:hidden;
  background-image:linear-gradient(rgba(9,22,42,.52),rgba(9,22,42,.52)),
    var(--nx-mesh,linear-gradient(#152647,#152647));
  background-size:cover,cover;background-position:50% 50%,72% 26%;
  border:1px solid rgba(255,255,255,.24);
  box-shadow:0 30px 70px -30px rgba(0,0,0,.85);
  transform-origin:100% 100%}
.nxd-float.is-open{display:flex;animation:nxd-unfurl .45s cubic-bezier(.22,1,.36,1) both}
.nxd-float.is-closing{animation:nxd-furl .34s cubic-bezier(.55,0,.55,.2) both}
@keyframes nxd-unfurl{0%{opacity:0;transform:translateY(26px) scale(.82)}
  100%{opacity:1;transform:none}}
@keyframes nxd-furl{0%{opacity:1;transform:none}
  100%{opacity:0;transform:translateY(26px) scale(.82)}}
.nxd-fhead{display:flex;align-items:center;gap:10px;flex:none;
  padding:12px 14px;border-bottom:1px solid rgba(255,255,255,.14)}
.nxd-fhead img{width:34px;height:34px;border-radius:50%;object-fit:cover;
  border:1px solid rgba(255,255,255,.3);background:#152647}
.nxd-fhead b{font-family:var(--ui,system-ui);font-size:14px;font-weight:600;color:#fff}
.nxd-fhead span{display:block;font-family:var(--ui,system-ui);font-size:11px;
  font-weight:300;color:rgba(255,255,255,.65);margin-top:1px}
.nxd-fx{margin-left:auto;border:0;background:transparent;color:rgba(255,255,255,.6);
  font-size:20px;line-height:1;cursor:pointer;padding:4px 6px;
  transition:color .2s ease,transform .3s ease}
.nxd-fx:hover{color:#fff;transform:rotate(90deg)}
.nxd-fsline{padding:10px 14px 0;flex:none}
.nxd-fbody{position:relative;flex:1;min-height:0}
.nxd-fvoice{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:flex-start;gap:14px;padding:10px 16px 14px;
  opacity:0;pointer-events:none;transition:opacity .35s ease}
.nxd-fasks{display:flex;flex-direction:column;gap:7px;width:100%;margin-top:2px}
.nxd-fasks .nxd-ask{width:100%}
.nxd-float.fmode-voice .nxd-fvoice .nxd-ring{filter:brightness(1.35) saturate(1.3)}
.nxd-float.fmode-voice .nxd-fvoice .nxd-ring rect{animation-duration:.55s !important}
.nxd-fvoice .nxd-livechip{position:static;transform:none;opacity:1}
.nxd-float.fmode-voice .nxd-fvoice{opacity:1;pointer-events:auto}
.nxd-fstage{position:relative;width:180px;height:180px}
.nxd-fstage img{position:absolute;top:-22px;left:50%;transform:translateX(-50%);
  width:209px;max-width:none;display:block}
.nxd-float .nxd-chat{position:absolute;inset:0;top:0;opacity:1;pointer-events:auto;
  translate:0 0;transition:opacity .35s ease}
.nxd-float.fmode-voice .nxd-chat{opacity:0;pointer-events:none}

@media(max-height:830px){
  .nxdP{height:524px}
  .nxd-stage{top:184px;width:172px;height:172px;margin-left:-86px}
  .nxd-stage img{width:200px;top:-21px}
  .nxd-livechip{top:362px}
  .nxd-asks{top:396px}
}
@media(max-width:1119px){.nxdP{display:none}}
@media(max-width:640px){.nxd-float{right:12px;left:12px;width:auto}}
@media(prefers-reduced-motion:reduce){
  .nxdP{animation:none;transition:opacity .3s ease}
  .nxd-ring rect,.nxd-wave i{animation:none}
  .nxd-stage{transition:none}
  .nxd-stage img{transition:none}
}


/* ---- where the whole component sits -------------------------------------
   Left and up, into the channel's own breathing room. Done with margins
   rather than top/right: the host box's `top` is written as an inline
   style by the figure script upstream, which re-measures it against the H1
   on every resize, so anything set there gets overwritten. Margins it does
   not touch. */

@media(max-width:1279px){}

/* ---- the panel stops being a panel ------------------------------------- */
/* ONE CENTRE LINE at x=148: the sphere, the call seat, the CTA and the
   introduction all hang off it. The prompts are the only thing that does
   not, because they are what the composition leans on to the right. */
.nxdP{width:340px;height:496px;background:none;border:1px solid transparent;
  box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;
  overflow:visible;
  transition:opacity .55s cubic-bezier(.22,1,.36,1),
             transform .55s cubic-bezier(.22,1,.36,1),
             background .4s ease,border-color .4s ease,box-shadow .4s ease}
/* a conversation needs something to sit on, so the surface returns for the
   thread and leaves again when she goes back to voice */
.nxdP.mode-chat{background:rgba(255,255,255,.07);
  border-color:rgba(255,255,255,.17);overflow:hidden;
  backdrop-filter:blur(15px) saturate(125%);
  -webkit-backdrop-filter:blur(15px) saturate(125%);
  box-shadow:0 1px 0 rgba(255,255,255,.10) inset,
             0 18px 40px -26px rgba(0,0,0,.6)}

/* ---- the sphere ---------------------------------------------------------
   The liquid gradient, structure and keyframes as supplied: four radial
   pools over a conic wheel, oversized by 30% so the blur never exposes an
   edge, blurred and slowly translated / rotated / scaled on an alternating
   loop. Recoloured to the teal-and-blue palette sampled off the reference
   rather than the purple it arrived in - swap the six stops below to go
   back. Two things are layered on top of it: a shading pass, because that
   is the difference between a sphere and a disc, and grain, because that
   is the difference between a gradient and a surface. */
.nxd-stage{top:132px;left:47px;margin-left:0;width:246px;height:246px}
.nxd-stage img{display:none !important}
.nxs-orb{position:absolute;inset:0;border-radius:50%;overflow:hidden;
  /* ONE CLOCK. The liquid and the rim shimmer are both derived from
     --ldur, so the rim turns exactly once per full out-and-back of the
     gradient beneath it and the two can never drift apart - including in
     the live state, where --lsp scales both together. */
  --lb:20px;--lsp:1;--ldur:2.14s;background:#2b6f74;
  filter:drop-shadow(0 26px 54px rgba(10,60,70,.5))
         drop-shadow(0 0 70px rgba(90,190,210,.20));
  transition:filter .5s ease}
.nxdP.is-live .nxs-orb,.nxd-float.fmode-voice .nxs-orb{--lsp:.42;
  filter:drop-shadow(0 26px 54px rgba(10,60,70,.6))
         drop-shadow(0 0 92px rgba(120,215,230,.38))}

.nxs-liquid{position:absolute;inset:-30%;
  background:
    radial-gradient(circle at 25% 30%, #a9e2ff 0 12%, transparent 36%),
    radial-gradient(circle at 75% 28%, #e5feff 0 10%, transparent 34%),
    radial-gradient(circle at 68% 76%, #234931 0 16%, transparent 43%),
    radial-gradient(circle at 20% 74%, #a2bf7a 0 11%, transparent 38%),
    conic-gradient(
      from 25deg,
      #348289,
      #66bbe2,
      #d9f0e2,
      #2f6b4a,
      #348289
    );
  filter:blur(var(--lb)) saturate(1.56);
  /* 4.7s - half again as quick as the 7s it was, which is where the plane
     stops drifting and starts to move like a fluid under the crop */
  animation:nxs-liquid calc(var(--ldur) * var(--lsp))
            ease-in-out infinite alternate;
  will-change:transform}
@keyframes nxs-liquid{
  0%   {transform:translate3d(-11%,-9%,0) rotate(-13deg) scale(1.06)}
  50%  {transform:translate3d(12%,8%,0)   rotate(15deg)  scale(1.15)}
  100% {transform:translate3d(-5%,14%,0)  rotate(28deg)  scale(1.09)}
}

/* ---- the second plane, and why -------------------------------------------
   One plane on a loop retraces itself exactly every cycle - you start to
   read the repeat within about twenty seconds, and water never does that.
   A second plane on its own path fixes it, but only if the two durations
   share no common multiple: at 1.618x the phase between them effectively
   never recurs, so the composite never arrives at the same arrangement
   twice. Different pools, different path, half-strength, so it modulates
   the first rather than competing with it. */
.nxs-liquid2{position:absolute;inset:-34%;opacity:.55;
  background:
    radial-gradient(circle at 62% 18%, #d9f0e2 0 14%, transparent 40%),
    radial-gradient(circle at 18% 58%, #66bbe2 0 13%, transparent 38%),
    radial-gradient(circle at 80% 70%, #2f6b4a 0 15%, transparent 42%),
    conic-gradient(from 200deg, #2f6b4a, #348289, #a9e2ff, #348289, #2f6b4a);
  filter:blur(var(--lb)) saturate(1.44);
  animation:nxs-liquid2 calc(var(--ldur) * 1.618 * var(--lsp))
            ease-in-out infinite alternate;
  will-change:transform}
@keyframes nxs-liquid2{
  0%   {transform:translate3d(11%,12%,0)  rotate(17deg)  scale(1.11)}
  50%  {transform:translate3d(-14%,-10%,0) rotate(-13deg) scale(1.05)}
  100% {transform:translate3d(8%,-14%,0)  rotate(-27deg) scale(1.13)}
}
/* Weight into the lower right and a turn at the circumference, so the
   thing reads as a sphere rather than a disc. Deliberately almost no white
   in it - the pale belongs to the gradient pools underneath, and a bright
   overlay here would read as exactly the gloss sweep we do not want. */
.nxs-shade{position:absolute;inset:0;border-radius:50%;pointer-events:none;
  background:
    radial-gradient(circle at 30% 24%,rgba(255,255,255,.10) 0%,
      rgba(255,255,255,0) 54%),
    radial-gradient(circle at 76% 84%,rgba(6,32,34,.55) 0%,
      rgba(6,32,34,0) 58%),
    radial-gradient(circle at 50% 50%,rgba(0,0,0,0) 68%,rgba(5,26,30,.5) 100%)}
/* ---- the gloss ---------------------------------------------------------
   There is no gloss layer to copy: their DOM has only the gradient, the
   canvas and the grain, and the filter over the gradient composites its
   own highlight branch away against an opaque black flood. The sheen is
   inside their shader. So this is built rather than lifted - a glass read,
   held still: a tight specular, the broad cap it sits in, a cool bounce off
   the lower rim, and an inner shadow to close the edge. Nothing sweeps. */
.nxs-gloss{position:absolute;inset:0;border-radius:50%;pointer-events:none;
  background:
    /* THE CAP. Sampling the reference at the crown gives #defeff, with
       #a9e2ff and #d9f0e2 either side - it is near-white right across the
       top, not a specular dot in one corner. This broad luminous cap is
       what actually reads as shine on their sphere. */
    /* pulled well back: at .92/.52 the cap was bleaching the top half and
       the teal and moss underneath never got a look in. The crown still
       lifts, it just no longer paints over the colour. */
    radial-gradient(ellipse 88% 44% at 46% -16%,
      rgba(255,255,255,.18) 0%,rgba(255,255,255,.08) 26%,
      rgba(255,255,255,.02) 54%,rgba(255,255,255,0) 76%),
    /* the light concentrates a little to the upper left inside that cap */
    radial-gradient(ellipse 40% 26% at 33% 12%,
      rgba(255,255,255,.09) 0%,rgba(255,255,255,0) 100%),
    /* a cool bounce coming back off the lower rim */
    radial-gradient(ellipse 66% 46% at 70% 92%,
      rgba(200,245,255,.16) 0%,rgba(200,245,255,0) 62%);
  /* light does not stop at the crown: a lit edge carries the whole way
     round, so the sphere is glassy on every side and not just the top */
  box-shadow:inset 0 0 34px rgba(4,22,26,.42),
             inset 0 -18px 34px rgba(4,22,26,.34),
             inset 0 0 0 1px rgba(255,255,255,.18),
             inset 0 0 22px rgba(255,255,255,.05)}

/* ---- the shimmer, travelling ACROSS the face -----------------------------
   Not around the circumference - over the whole globe. Two broad soft bands
   at different angles crossing the sphere on different clocks: where they
   overlap the light gathers and where they part it thins, so the surface
   shimmers instead of a single bar of glare sliding past. Both are wide,
   blurred and low-contrast, and the whole layer is masked to fall away at
   the rim, so the light sits on a curved surface rather than on glass. */
.nxs-sheen{position:absolute;inset:0;border-radius:50%;pointer-events:none;
  overflow:hidden;
  -webkit-mask:radial-gradient(circle at 50% 50%,
    #000 38%,rgba(0,0,0,.5) 72%,transparent 96%);
  mask:radial-gradient(circle at 50% 50%,
    #000 38%,rgba(0,0,0,.5) 72%,transparent 96%)}
.nxs-sheen i{position:absolute;inset:-70%;display:block;
  filter:blur(var(--sb,16px))}
.nxs-sheen i:nth-child(1){
  background:linear-gradient(112deg,
    rgba(255,255,255,0) 30%,rgba(255,255,255,.19) 50%,
    rgba(255,255,255,0) 70%);
  animation:nxs-sw1 calc(var(--ldur) * 2 * var(--lsp))
            ease-in-out infinite alternate}
.nxs-sheen i:nth-child(2){
  background:linear-gradient(64deg,
    rgba(190,240,255,0) 32%,rgba(190,240,255,.13) 50%,
    rgba(190,240,255,0) 68%);
  animation:nxs-sw2 calc(var(--ldur) * 3 * var(--lsp))
            ease-in-out infinite alternate}
@keyframes nxs-sw1{
  0%   {transform:translate3d(-46%,-22%,0)}
  100% {transform:translate3d(46%,22%,0)}}
@keyframes nxs-sw2{
  0%   {transform:translate3d(42%,-18%,0)}
  100% {transform:translate3d(-42%,18%,0)}}
.nxd-fstage .nxs-sheen i{--sb:11px}
.nxs-av .nxs-sheen i{--sb:3px}
.nxd-fstage .nxs-gloss{box-shadow:inset 0 0 22px rgba(4,22,26,.40),
             inset 0 -9px 19px rgba(4,22,26,.26)}
.nxs-av .nxs-gloss{box-shadow:inset 0 0 7px rgba(4,22,26,.40),
             inset 0 -3px 6px rgba(4,22,26,.26)}

/* their grain, to the letter: an overlay-blended noise tile at half
   opacity, sitting inside a second overlay-blended wrapper, so the blend
   lands twice and the grain bites instead of hazing */
.nxs-grainwrap{position:absolute;inset:0;border-radius:50%;
  pointer-events:none;mix-blend-mode:overlay}
.nxs-grain{position:absolute;inset:0;border-radius:50%;pointer-events:none;
  mix-blend-mode:overlay;opacity:.375;background-size:150px 150px;
  background-repeat:repeat;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='150' height='150'><filter id='n' x='0' y='0' width='100%25' height='100%25'><feTurbulence type='fractalNoise' baseFrequency='0.6' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/><feComponentTransfer><feFuncA type='linear' slope='2.2' intercept='-0.3'/></feComponentTransfer></filter><rect width='150' height='150' filter='url(%23n)'/></svg>")}
/* the blur has to track the sphere or the pools resolve into four discs at
   avatar size and into one flat wash at full size */
.nxd-fstage .nxs-orb{--lb:14px}
.nxs-av .nxs-orb{--lb:4px}
.nxs-av .nxs-grain{background-size:56px 56px;opacity:.375}

/* ---- the call seat -----------------------------------------------------
   Placed off the reference: 48px on a 256px sphere, so 18.75% of the
   diameter, centred on the sphere's axis with its own centre sitting
   exactly on the bottom edge - half in, half out. At 280px that is 52px,
   centred at x=148, y=286 (the sphere's bottom). */
.nxs-call{position:absolute;left:170px;top:378px;width:46px;height:46px;
  margin:-23px 0 0 -23px;z-index:5;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  border-radius:50%;border:1px solid rgba(255,255,255,.22);
  background:rgba(9,18,34,.86);color:#fff;padding:0;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 0 0 5px rgba(9,18,34,.30),0 14px 30px -12px rgba(0,0,0,.7);
  transition:transform .3s cubic-bezier(.34,1.4,.64,1),
             background .3s ease,border-color .3s ease}
.nxs-call:hover{transform:scale(1.07);border-color:rgba(255,255,255,.5)}
.nxs-call svg{width:21px;height:21px;display:block}
.nxdP.is-live .nxs-call{background:#c8102e;border-color:#c8102e}
.nxdP.mode-chat .nxs-call{opacity:0;pointer-events:none}
/* ---- the live signal ---------------------------------------------------
   A seat that turns red and grows a voice around it says everything the
   label said, in the place the eye is already looking. So the label goes
   and the wave takes it: bars radiating off the seat's rim, white so they
   hold over both the sphere and the field. Sibling rather than child, to
   keep them clear of the seat's own backdrop-filter. */
.nxdP .nxd-livechip{display:none}
.nxs-wave{position:absolute;left:170px;top:378px;width:76px;height:76px;
  margin:-38px 0 0 -38px;z-index:4;pointer-events:none;overflow:visible;
  opacity:0;transition:opacity .35s ease;
  filter:drop-shadow(0 0 3px rgba(0,0,0,.45))}
.nxdP.is-live .nxs-wave{opacity:1}
.nxs-wave rect{fill:#fff;transform-box:fill-box;transform-origin:center bottom;
  animation:nxs-eq 1s ease-in-out infinite}
@keyframes nxs-eq{0%,100%{transform:scaleY(.28);opacity:.5}
  50%{transform:scaleY(1);opacity:1}}

/* ---- three prompts hovering off the shoulder ---------------------------
   They cross the sphere the way they were drawn: left edges aligned just
   past its centre, right edges ragged with the sentence. Dark glass, so
   they read over the bright side of the sphere and over the hero alike. */
/* Right-aligned, so their ends line up and their heads stagger with the
   sentence, and the block is centred on the sphere's middle rather than
   floating against its top. Over the sphere, not under it: the stage sits
   at z-index 3 and the asks shipped at 2. */
.nxd-asks{display:block;left:147px;right:auto;width:270px;top:186px;
  --row:51px;z-index:4;height:calc(var(--row) * 3)}
.nxd-ask{position:absolute;left:0;right:auto;width:auto;max-width:none;
  padding:7px 13px;gap:9px;text-align:left;
  background:rgba(9,18,34,.62);border:1px solid rgba(255,255,255,.2);
  border-radius:100px;
  backdrop-filter:blur(12px) saturate(130%);
  -webkit-backdrop-filter:blur(12px) saturate(130%);
  box-shadow:0 14px 30px -20px rgba(0,0,0,.75);
  opacity:0;translate:10px 0;pointer-events:none;
  transition:opacity .55s ease,translate .6s cubic-bezier(.22,1,.36,1),
             background .25s ease,border-color .25s ease}
.nxd-ask.is-in{opacity:1;translate:0 0;pointer-events:auto}
.nxd-ask:hover{background:rgba(9,18,34,.86);border-color:rgba(120,215,230,.6)}
.nxd-ask em{white-space:nowrap}
.nxd-ask i{background:linear-gradient(90deg,#66bbe2,#a9e2ff)}
/* Both lists, not just the hero one. These row offsets were scoped to
   .nxd-asks while the dock renders into .nxd-fasks, so the float window got
   absolutely positioned chips with no top at all and stacked all three on
   the same line. */
.nxd-asks .nxd-ask:nth-child(3n+1){left:32px}
.nxd-asks .nxd-ask:nth-child(3n+3){left:14px}
.nxd-asks .nxd-ask:nth-child(3n+1),
.nxd-fasks .nxd-ask:nth-child(3n+1){top:0}
.nxd-asks .nxd-ask:nth-child(3n+2),
.nxd-fasks .nxd-ask:nth-child(3n+2){top:var(--row)}
.nxd-asks .nxd-ask:nth-child(3n+3),
.nxd-fasks .nxd-ask:nth-child(3n+3){top:calc(var(--row) * 2)}
/* No drift. They bobbed up and down on their own clocks, which read as
   restlessness next to a sphere that is already moving - the arrival and
   the departure carry it now, and between the two they hold still. */
.nxdP.mode-chat .nxd-asks{opacity:0;pointer-events:none}

/* ---- the CTA, then the introduction ------------------------------------ */
.nxdP .nxd-req{position:absolute;left:170px;top:420px;margin:0;
  transform:translateX(-50%);display:inline-flex;align-items:center;gap:9px;
  white-space:nowrap;font-size:15px;padding:13px 30px;
  box-shadow:0 14px 30px -14px rgba(200,16,46,.9)}
.nxdP.is-live .nxd-req{opacity:1;pointer-events:auto;translate:0 0}
.nxdP.mode-chat .nxd-req{opacity:0;pointer-events:none;translate:0 -8px}
.nxd-req .ar{transition:transform .3s ease}
.nxd-req:hover .ar{transform:translateX(3px)}

/* 50px of clear field under the CTA. At 6px the introduction read as a
   caption hanging off the button instead of its own line of the stack. */
.nxdP .nxd-head{position:absolute;left:0;right:0;width:auto;top:4px;
  padding:0;text-align:center}
.nxd-head .sub{max-width:300px;margin-left:auto;margin-right:auto}

/* the way into typing sits under the introduction, quiet and on the axis */
.nxdP .nxd-vline{top:82px;bottom:auto;left:0;right:0;width:auto;
  justify-content:center;
  opacity:1;pointer-events:auto}
.nxdP .nxd-vline > span{display:none}
.nxdP .nxd-vline .nxd-sbtn{flex:none;font-size:11.5px;font-weight:400;
  padding:5px 15px}
.nxdP.mode-chat .nxd-vline{opacity:0;pointer-events:none}
.nxd-sugg button:nth-child(n+4){display:none}

/* ---- the dock and the float wear the same sphere ------------------------ */
.nxd-fstage img{display:none}
.nxd-fstage .nxs-orb{filter:none}
/* the avatars run the same sphere, just cropped smaller - one implementation
   everywhere, so the agent has one face */
.nxs-av{position:relative;display:block;border-radius:50%;overflow:hidden;
  background:#2b6f74}
.nxs-av .nxs-orb{filter:none}
.nxd-pill .nxs-av{width:46px;height:46px;border:2px solid #101c34}
.nxd-fhead .nxs-av{width:34px;height:34px;border:1px solid rgba(255,255,255,.3)}
.nxd-fasks{position:relative;width:100%;--row:38px;
  height:calc(var(--row) * 3);display:block}
.nxd-fasks .nxd-ask{padding:6px 13px;border-radius:100px;font-size:12px}

@media(max-width:1279px){
  .nxdP{width:300px;height:420px}
  .nxd-stage{top:118px;left:54px;width:192px;height:192px}
  .nxs-call{left:150px;top:310px;width:36px;height:36px;
    margin:-18px 0 0 -18px}
  .nxs-call svg{width:16px;height:16px}
  .nxs-wave{left:150px;top:310px;width:60px;height:60px;
    margin:-30px 0 0 -30px}
  .nxd-asks{left:132px;width:230px;top:157px;--row:40px}
  .nxdP .nxd-req{left:150px;top:350px}
  .nxdP .nxd-head{top:4px}
  .nxd-head .sub{max-width:270px}
  .nxdP .nxd-vline{top:76px}
}
@media(prefers-reduced-motion:reduce){
  .nxd-ask,.nxd-ask.is-in{animation:none;transition:opacity .3s ease}
  .nxs-wave rect{animation:none;transform:scaleY(.62)}
  /* the sphere keeps its colour, its gloss and its lit rim - it just stops */
  .nxs-liquid,.nxs-liquid2,.nxs-sheen i{animation:none}
}

.nxd-track{position:relative}
.nxd-track-in{position:absolute;left:0;right:0;top:0;bottom:0;
  z-index:5;pointer-events:none}
.nxd-host{position:sticky;top:96px;margin-left:auto;
  width:344px;height:566px;pointer-events:none;border-radius:16px;
  background-image:linear-gradient(rgba(9,22,42,.52),rgba(9,22,42,.52)),
    var(--nx-mesh,linear-gradient(#152647,#152647));
  background-size:cover,cover;background-position:50% 50%,72% 26%;
  box-shadow:0 26px 64px -34px rgba(0,0,0,.55)}
.nxd-host .nxdP{box-shadow:inset 0 1px 0 rgba(255,255,255,.10)}
@media(max-width:1119px){.nxd-host,.nxd-track-in{display:none}}


.nx-cards{
  --nx-h:108px;                       /* the collapsed height, held by the slot */
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;
  margin-top:22px;position:relative;z-index:3}
.nx-slot{position:relative;height:var(--nx-h)}

.nx-card{
  position:absolute;left:0;right:0;top:0;min-height:var(--nx-h);
  display:block;overflow:hidden;border-radius:16px;
  padding:16px 18px 16px;
  /* the glass: enough blur to separate it from the field, little enough tint
     that the mesh still reads through it */
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.17);
  backdrop-filter:blur(15px) saturate(125%);
  -webkit-backdrop-filter:blur(15px) saturate(125%);
  box-shadow:0 1px 0 rgba(255,255,255,.10) inset,
             0 18px 40px -26px rgba(0,0,0,.6);
  transition:background .35s var(--ease),border-color .35s var(--ease),
             box-shadow .35s var(--ease)}
.nx-card:hover,.nx-card:focus-visible{
  background:rgba(255,255,255,.11);
  border-color:rgba(255,255,255,.30);
  box-shadow:0 1px 0 rgba(255,255,255,.16) inset,
             0 26px 54px -26px rgba(0,0,0,.72);
  outline:none}

/* ---- the card's own field ------------------------------------------------
   White rather than the navy picture. Laying the mesh inside the cards gave
   them a field of their own but it was the same blue as the ground behind
   them, so they read as holes in the hero rather than as panels on it. This is
   a mesh built out of white instead: two soft radials and a diagonal, all at
   single-digit alpha, so the panel lifts off the background without becoming a
   surface in its own right. Each card takes the radials from different corners
   so the three do not repeat one crop side by side. */
.nx-fill{position:absolute;inset:0;z-index:0;border-radius:inherit;pointer-events:none;
  transition:opacity .35s var(--ease);opacity:1;
  background:
    radial-gradient(115% 95% at var(--nx-a,14% 16%),
      rgba(255,255,255,.15) 0%, rgba(255,255,255,.04) 46%, rgba(255,255,255,0) 72%),
    radial-gradient(105% 85% at var(--nx-b,86% 88%),
      rgba(255,255,255,.10) 0%, rgba(255,255,255,.02) 50%, rgba(255,255,255,0) 76%),
    linear-gradient(138deg,
      rgba(255,255,255,.07) 0%, rgba(255,255,255,.015) 52%, rgba(255,255,255,.05) 100%)}
.nx-slot:nth-child(1) .nx-fill{--nx-a:12% 14%; --nx-b:88% 86%}
.nx-slot:nth-child(2) .nx-fill{--nx-a:80% 10%; --nx-b:18% 92%}
.nx-slot:nth-child(3) .nx-fill{--nx-a:50% 100%; --nx-b:96% 12%}
.nx-card:hover .nx-fill,.nx-card:focus-visible .nx-fill{opacity:1.4}

/* ---- the glint ----------------------------------------------------------
   The first pass was a wide, hard-edged white band wiping across at a constant
   speed, four times in sixteen seconds. That is a loading skeleton, not glass.
   Three things were wrong with it and all three are fixed here.

   It was a wipe, not a catch of light. The band now travels in about two
   seconds of a ten second cycle, eased so it accelerates off the corner and
   decelerates into the far one, and then the card sits still for eight. Light
   catching an edge is an event; a band sliding back and forth is a progress bar.

   It had hard edges and no bloom. The highlight is now narrow, built on a five
   stop gradient with a soft shoulder either side, and blurred, so it reads as a
   specular smear rather than a rectangle of white.

   Nothing lit up. A real sheet of glass catches light on its rim before its
   face, so a second pass runs the same diagonal as a mask over a bright border
   and the edge lights up as the glint reaches it. That detail is most of what
   sells the material.

   One diagonal now, bottom left to top right, on a ten second clock. The angle
   is 70deg rather than 45: the card is 304 by 108, so its own corner-to-corner
   run sits about 20 degrees above the horizontal and the band is cut square to
   that rather than to an arbitrary diagonal. */
.nx-glint,.nx-rim{position:absolute;pointer-events:none;border-radius:inherit}
.nx-glint{inset:-55%;z-index:1;opacity:0;
  background:linear-gradient(70deg,
    transparent 41%,
    rgba(255,255,255,.045) 46%,
    rgba(255,255,255,.20) 50%,
    rgba(255,255,255,.045) 54%,
    transparent 59%);
  filter:blur(7px);
  transform:translate3d(-44%,44%,0);
  will-change:transform,opacity;
  animation:nx-glint 10s linear infinite var(--nx-d,0s)}
.nx-rim{inset:0;z-index:2;opacity:0;
  border:1px solid rgba(255,255,255,.9);
  -webkit-mask-image:linear-gradient(70deg,transparent 42%,#000 50%,transparent 58%);
          mask-image:linear-gradient(70deg,transparent 42%,#000 50%,transparent 58%);
  -webkit-mask-size:300% 300%;  mask-size:300% 300%;
  -webkit-mask-position:0% 100%; mask-position:0% 100%;
  will-change:mask-position,opacity;
  animation:nx-rim 10s linear infinite var(--nx-d,0s)}

@keyframes nx-glint{
  0%{opacity:0;transform:translate3d(-44%,44%,0);
     animation-timing-function:cubic-bezier(.36,0,.16,1)}
  2.5%{opacity:1}
  18%{opacity:1}
  21%{opacity:0;transform:translate3d(44%,-44%,0)}
  100%{opacity:0;transform:translate3d(44%,-44%,0)}
}
@keyframes nx-rim{
  0%{opacity:0;-webkit-mask-position:0% 100%;mask-position:0% 100%;
     animation-timing-function:cubic-bezier(.36,0,.16,1)}
  3%{opacity:.85}
  17%{opacity:.85}
  21%{opacity:0;-webkit-mask-position:100% 0%;mask-position:100% 0%}
  100%{opacity:0;-webkit-mask-position:100% 0%;mask-position:100% 0%}
}
/* half a second apart, so the row catches the light in sequence rather than
   flashing as one block */
.nx-slot:nth-child(2) .nx-glint,.nx-slot:nth-child(2) .nx-rim{--nx-d:.5s}
.nx-slot:nth-child(3) .nx-glint,.nx-slot:nth-child(3) .nx-rim{--nx-d:1s}

/* ---- the copy ---------------------------------------------------------- */
.nx-in{position:relative;z-index:3;display:block}
.nx-k{display:block;font-family:var(--ui);font-size:15.5px;font-weight:500;
  letter-spacing:-.012em;color:#fff;padding-right:34px}
.nx-e{display:block;margin-top:7px;font-size:13.5px;font-weight:300;line-height:1.45;
  color:rgba(255,255,255,.76)}
.nx-rm{display:inline-block;margin-top:6px;background:var(--ember-ramp);-webkit-background-clip:text;background-clip:text;
  color:transparent;font-weight:500;white-space:nowrap}
.nx-more{display:block;max-height:0;opacity:0;overflow:hidden;
  font-size:13px;font-weight:300;line-height:1.5;color:rgba(255,255,255,.62);
  transition:max-height .42s var(--ease),opacity .3s var(--ease),margin-top .42s var(--ease)}
.nx-card:hover .nx-more,.nx-card:focus-visible .nx-more{
  max-height:190px;opacity:1;margin-top:9px}

/* ---- the arrow ----------------------------------------------------------
   Masked rather than drawn, because a gradient cannot be a stroke colour in
   CSS but it can be the background of a masked box. The white sits on top as
   a layer that fades out, which also buys a transition that swapping a
   background-image would not have given. */
.nx-arrow{position:absolute;top:1px;right:0;width:19px;height:19px;
  background:var(--ember-ramp);
  -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M7%2017%2017%207%22%2F%3E%3Cpath%20d%3D%22M8.6%207H17v8.4%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M7%2017%2017%207%22%2F%3E%3Cpath%20d%3D%22M8.6%207H17v8.4%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;
  transition:transform .35s var(--ease)}
.nx-arrow::after{content:"";position:absolute;inset:0;background:#fff;
  transition:opacity .35s var(--ease)}
.nx-card:hover .nx-arrow::after,.nx-card:focus-visible .nx-arrow::after{opacity:0}
.nx-card:hover .nx-arrow,.nx-card:focus-visible .nx-arrow{transform:translate(2px,-2px)}

@media(max-width:900px){
  .nx-cards{grid-template-columns:1fr;gap:10px;margin-top:32px}
  /* in one column there is nothing beside a card to hold the row open, so the
     slot lets go and the cards sit in normal flow */
  .nx-slot{height:auto}
  .nx-card{position:relative;min-height:0}
}
@media(hover:none){
  /* nothing to hover with, so the second line is simply there */
  .nx-more{max-height:none;opacity:1;margin-top:9px}
}
@media(prefers-reduced-motion:reduce){
  .nx-glint,.nx-rim{display:none}
  .nx-card,.nx-more,.nx-arrow,.nx-arrow::after{transition:none}
}

/* ---- footer, matched to the homepage --------------------------------------
   Five columns of links where this page had four. The homepage puts Industries
   on its own row by forcing it back to column 1, which is the only rule the
   inherited footer stylesheet does not already carry. */
.at-foot-cols .ft-wide{grid-column:1}
@media(max-width:900px){.at-foot-cols .ft-wide{grid-column:auto}}

/* ---- nav dropdowns --------------------------------------------------------
   Every .mn-mega, .mn-cols, .mn-col and .mn-promo rule is inherited from
   homepage style block 1 and is NOT restated here. Three things are needed on
   top: the panel is opened by class rather than by React state, the panel must
   stay readable while the bar is still transparent over the navy hero, and the
   chevron has to turn. */
.mn-in{position:relative}
.mn-item{position:static}
.mn-item.open .mn-chev{transform:rotate(180deg)}

/* Over the hero every nav item has to be white. The inherited rule only whitens
   .mn-item > a, which was fine when all five items were links. Four of them are
   buttons now, so they kept their dark ink and only Compliance stayed visible. */
.mn--over .mn-item > button{color:#fff}
.mn--over .mn-item > button:hover,
.mn--over .mn-item.open > button{color:#e8944b;background:transparent}
.mn--over .mn-chev{color:#fff}
.mn--over .mn-item > button:hover .mn-chev,
.mn--over .mn-item.open > button .mn-chev{color:#e8944b}

/* Over the hero the bar is transparent and its text is white. The panel below
   it is a white surface, so its own contents must stay dark rather than
   inheriting the bar's over-hero colours. */
.mn--over .mn-mega .mn-t{color:#121212}
.mn--over .mn-mega small{color:rgba(18,18,18,.58)}
.mn--over .mn-mega h5{color:rgba(18,18,18,.58)}
.mn--over .mn-mega a:hover .mn-t{color:#c8102e}
.mn--over .mn-mega .mn-promo .t,
.mn--over .mn-mega .mn-promo>a{color:#fff}

/* the bar has to sit above the hero panel while a menu is open */
.mn{z-index:300}

/* ---- case study cards -----------------------------------------------------
   Two up on the same collapsed slot the homepage uses. No max-width: they take
   the full content column, because capping them left a band of empty navy to
   their right that read as a hole rather than as space. */
.nx-cards--2{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:44px}
@media(max-width:760px){.nx-cards--2{grid-template-columns:1fr}}

/* ---- the audience block, four numbered cards ------------------------------
   Two up, two down. Collapsed each shows only its numeral and who it is for.
   Hovering one opens it downward, and because a card is absolutely positioned
   inside a fixed height slot it would otherwise open straight through its
   neighbour. So the card directly beneath steps aside while the hover lasts.
   That pairing is the homepage hero's own rule, lifted with the row indices
   changed from a three column grid to a two column one. */
.nx-cards--who{--nx-h:126px;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;margin-top:46px}

/* THE PAIRING RULE. A card is absolutely positioned inside a fixed height slot,
   so opening one on the top row drives it straight through the card beneath.
   The card below has to step aside while the hover lasts. This applies to every
   two column grid on the page, the audience block and both case study grids,
   because they all stack two rows. It was previously on the audience block
   alone, which is why the case studies overlapped. */
.nx-cards--who .nx-slot,.nx-cards--2 .nx-slot{
  z-index:1;transition:opacity .3s var(--ease)}
.nx-cards--who .nx-slot:hover,.nx-cards--who .nx-slot:focus-within,
.nx-cards--2 .nx-slot:hover,.nx-cards--2 .nx-slot:focus-within{z-index:6}
.nx-cards--who:has(.nx-slot:nth-child(1) .nx-card:hover) .nx-slot:nth-child(3),
.nx-cards--who:has(.nx-slot:nth-child(2) .nx-card:hover) .nx-slot:nth-child(4),
.nx-cards--2:has(.nx-slot:nth-child(1) .nx-card:hover) .nx-slot:nth-child(3),
.nx-cards--2:has(.nx-slot:nth-child(2) .nx-card:hover) .nx-slot:nth-child(4){
  opacity:0;pointer-events:none}

/* the numeral. Upright, so background-clip:text has no italic shear to fight */
.nx-num{display:block;font-family:var(--display);font-size:40px;font-weight:500;
  letter-spacing:-.03em;line-height:1;margin-bottom:10px;font-style:normal;
  background:var(--ember-ramp,linear-gradient(100deg,#c8102e,#e0563b 55%,#e8944b));
  -webkit-background-clip:text;background-clip:text;color:transparent}

@media(max-width:760px){
  /* one column: there is no card beneath to step aside, so nothing hides */
  .nx-cards--who,.nx-cards--2{grid-template-columns:1fr;--nx-h:auto}
  .nx-cards--who .nx-slot,.nx-cards--2 .nx-slot{height:auto}
  .nx-cards--who .nx-card,.nx-cards--2 .nx-card{position:relative}
  .nx-cards--who:has(.nx-card:hover) .nx-slot,
  .nx-cards--2:has(.nx-card:hover) .nx-slot{opacity:1;pointer-events:auto}
}


/* the rail hides under 1120px, but the zone grid kept reserving its column */
@media(max-width:1119px){.sv-zone-grid{grid-template-columns:minmax(0,1fr)}}

/* .sv-lead carries no margin of its own, which never showed on the other pages
   because each one sits alone in its section. This page stacks several. */
.sv-lead + .sv-lead{margin-top:17px}

/* ==========================================================================
   THE HERO HEADLINE
   .at-h1 is capped at 780px while the hero column it sits in is 940px, so this
   headline broke over three lines and the second one ended on "the", cutting
   the ember phrase in half and stalling the read.

   Measured at the real font: the two lines want 876px and 738px, so the cap
   was the whole problem and the words were never at fault. Widening to the
   column the headline already lives in leaves exactly one break that fits, and
   it lands on the span boundary, so the emphasis becomes the entire second
   line instead of starting mid line.

   The cap is set by `#top .at-h1`, an ID selector, so a class rule loses to it
   however late it appears. Matched on the same selector rather than fought
   with !important.
   ========================================================================== */
#top .at-h1{max-width:920px}
@media(max-width:1060px){#top .at-h1{max-width:none}}

/* ==========================================================================
   THE NAVY BAND, ACTUALLY FULL BLEED
   The inherited breakout is left:50% + translateX(-50%) + width:100vw. That
   centres the band on ITS OWN containing block, not on the viewport, because
   the translate is a percentage of the element while the left is a percentage
   of the column. The content column sits left of centre here, since the rail
   takes the right, so the navy ran off the left edge and stopped short of the
   right one.

   Measured instead: script writes the exact distance from the band's box to
   each edge of the document, and the band stretches to those. Without script
   the original rule still applies, so this degrades to what it was. The same
   bug is in the inherited stylesheet on the other pages that carry a rail.
   ========================================================================== */
.sv-sub--band.is-fit::before{
  left:var(--bl);right:var(--br);width:auto;transform:none}

/* ==========================================================================
   THE HERO'S RELATED CASE STUDIES
   The hero was carrying a large field of empty navy under the button. It now
   holds the interlink, on the homepage's own news card, so the glass, the
   glint, the rim, the corner arrow and the hover reveal all arrive with the
   component rather than being restyled here.
   ========================================================================== */
.cs-more{display:block;margin:44px 0 0;font-family:var(--mono);font-size:10px;
  letter-spacing:.17em;text-transform:uppercase;color:#fff;opacity:.62}
#top .nx-cards--2{margin-top:16px;max-width:760px}
@media(max-width:760px){#top .nx-cards--2{max-width:none}}

/* ==========================================================================
   MOTION
   The site had no scroll reveal, so this is new, but it is built from the
   site's own easing token and its own durations. Nothing moves far and
   nothing bounces: the page settles, it does not perform.
   ========================================================================== */
.cs-up{opacity:0;transform:translateY(22px);
  transition:opacity .7s var(--ease),transform .7s var(--ease);
  transition-delay:calc(var(--i,0) * 85ms)}
.cs-up.in{opacity:1;transform:none}

/* the kicker's ember bar draws itself rather than arriving finished */
.at-head.cs-up .at-kicker::before{transform:scaleX(0);transform-origin:0 50%;
  transition:transform .75s var(--ease) .12s}
.at-head.cs-up.in .at-kicker::before{transform:scaleX(1)}

/* ---- the illustrative tag ---
   Kept in the stylesheet: the note under the snapshot was dropped, and putting
   it back is a paragraph, not a rebuild. */
.cs-tag{display:inline-flex;align-items:center;gap:9px;margin-bottom:20px;
  padding:7px 14px;border-radius:100px;background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.28);font-family:var(--mono);font-size:10px;
  letter-spacing:.16em;text-transform:uppercase;color:#fff}
.cs-tag::before{content:"";width:6px;height:6px;border-radius:50%;
  background:var(--ember-ramp,linear-gradient(90deg,#c8102e,#e8944b));
  animation:cs-pulse 2.8s var(--ease) infinite}
@keyframes cs-pulse{0%,100%{opacity:1;transform:scale(1)}
                    50%{opacity:.5;transform:scale(.78)}}
.cs-note{margin-top:16px;padding:14px 18px;border-left:2px solid var(--warm);
  background:rgba(200,16,46,.04);font-size:13px;line-height:1.6;color:var(--muted)}

/* ==========================================================================
   THE SNAPSHOT
   ========================================================================== */
.cs-snap{border:1px solid var(--line);border-radius:12px;overflow:hidden;
  background:var(--void);box-shadow:0 20px 46px -38px rgba(0,0,0,.34)}
.cs-row{display:grid;grid-template-columns:210px 1fr;gap:20px;
  padding:15px 22px;border-top:1px solid var(--line);position:relative;
  transition:background .32s var(--ease)}
.cs-row:first-child{border-top:0}
.cs-row:hover{background:rgba(21,38,71,.03)}
/* an ember edge lights on the row under the cursor */
.cs-row::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
  background:var(--ember-ramp,linear-gradient(180deg,#c8102e,#e8944b));
  transform:scaleY(0);transform-origin:50% 50%;
  transition:transform .32s var(--ease)}
.cs-row:hover::before{transform:scaleY(1)}
.cs-row dt{font-family:var(--mono);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--warm);padding-top:3px}
.cs-row dd{font-size:14.5px;line-height:1.6;color:var(--txt)}
@media(max-width:700px){.cs-row{grid-template-columns:1fr;gap:6px}}

/* ==========================================================================
   THE PULL QUOTE, rule drawn on arrival
   ========================================================================== */
.cs-pull{position:relative;margin:28px 0;padding-left:22px;
  font-family:var(--display);font-size:clamp(19px,1.9vw,24px);font-weight:500;
  line-height:1.34;letter-spacing:-.02em;color:var(--txt);text-wrap:balance}
.cs-pull::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
  background:var(--ember-ramp,linear-gradient(180deg,#c8102e,#e8944b));
  transform:scaleY(0);transform-origin:50% 0;
  transition:transform .85s var(--ease) .1s}
.cs-pull.in::before{transform:scaleY(1)}

/* ==========================================================================
   THE CHAIN
   The three seats are not three cards in a row, they are three positions on a
   value chain, and the point of the case study is that all three were covered.
   The rail draws left to right as the section arrives, each stop lights in
   turn, and the cards themselves are the inherited glass card, so the cursor
   light and the ember hairline on hover come with them unchanged.

   Order top to bottom is label, then the line and its dot, then the card, so
   the eye reads the position in the market before the person who held it.

   Timing is tied to the rail rather than guessed. The rail runs for 1.15s from
   the first stop to the last, so the middle stop is reached near its halfway
   point and the last at the end. Each dot and label waits for the line to
   arrive rather than appearing on its own clock. */
.cs-chain{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;margin-top:56px;padding-top:92px}
.cs-chain-rail{position:absolute;top:56px;left:calc(16.6% - 4px);right:calc(16.6% - 4px);
  height:1px;background:linear-gradient(90deg,#c8102e,#e0563b 55%,#e8944b);
  transform:scaleX(0);transform-origin:0 50%;
  transition:transform 1.15s var(--ease) .1s}
.cs-chain.in .cs-chain-rail{transform:scaleX(1)}

.cs-stop{position:relative}
/* solid white, so it reads as a station on the line rather than an outline */
.cs-stop::before{content:"";position:absolute;top:-41px;left:50%;margin-left:-5px;
  width:10px;height:10px;border-radius:50%;background:#fff;border:0;
  box-shadow:0 0 0 4px rgba(255,255,255,.14);
  transform:scale(0);transition:transform .42s var(--ease) .18s}
.cs-chain.in .cs-stop::before{transform:scale(1)}
.cs-chain.in .cs-stop:nth-child(3)::before{transition-delay:.72s}
.cs-chain.in .cs-stop:nth-child(4)::before{transition-delay:1.26s}

/* the label sits above the line, and waits for the line to reach it */
.cs-stop-label{display:block;position:absolute;top:-74px;left:0;right:0;
  text-align:center;font-family:var(--mono);font-size:9.5px;letter-spacing:.17em;
  text-transform:uppercase;color:#e8944b;
  opacity:0;transform:translateY(6px);
  transition:opacity .45s var(--ease) .22s,transform .45s var(--ease) .22s}
.cs-chain.in .cs-stop-label{opacity:.95;transform:none}
.cs-chain.in .cs-stop:nth-child(3) .cs-stop-label{transition-delay:.76s}
.cs-chain.in .cs-stop:nth-child(4) .cs-stop-label{transition-delay:1.3s}
.cs-stop .sv-uc{height:100%}

@media(max-width:900px){
  /* stacked: the chain turns vertical and runs down the left, label still first */
  .cs-chain{grid-template-columns:1fr;gap:34px;padding-top:0;padding-left:26px}
  .cs-chain-rail{top:8px;bottom:8px;left:4px;right:auto;width:1px;height:auto;
    background:linear-gradient(180deg,#c8102e,#e0563b 55%,#e8944b);
    transform:scaleY(0);transform-origin:50% 0;
    transition:transform 1.15s var(--ease) .1s}
  .cs-chain.in .cs-chain-rail{transform:scaleY(1)}
  .cs-stop::before{top:4px;left:-26px;margin-left:0}
  .cs-stop-label{position:static;text-align:left;margin-bottom:9px;transform:none}
}

/* ==========================================================================
   THE SPINE
   The method's closing points are a sequence, so they are drawn as one: a line
   down the margin and a node on each point, arriving in order.

   The line owns the timing. Each point waits until the line has descended past
   it, so the content pops as the line arrives rather than on its own schedule.
   The delay per point is written by script from that point's real position in
   the list, because the points are different heights and an even stagger would
   drift away from the line. The line's own speed is unchanged. */
.cs-steps{position:relative;margin:26px 0 0;padding:4px 0 4px 36px;list-style:none}
.cs-steps::before{content:"";position:absolute;left:5px;top:10px;bottom:10px;width:1px;
  background:linear-gradient(180deg,#c8102e,#e0563b 55%,#e8944b);
  transform:scaleY(0);transform-origin:50% 0;
  transition:transform 1.2s var(--ease)}
.cs-steps.in::before{transform:scaleY(1)}
.cs-steps li{position:relative;margin-bottom:17px;font-size:15px;line-height:1.68;
  color:var(--txt);
  opacity:0;transform:translateY(9px);
  transition:opacity .5s var(--ease) var(--d,0s),transform .5s var(--ease) var(--d,0s)}
.cs-steps.in li{opacity:1;transform:none}
.cs-steps li:last-child{margin-bottom:0}
/* solid red, matching the line it sits on */
.cs-steps li::before{content:"";position:absolute;left:-36px;top:8px;width:11px;height:11px;
  border-radius:50%;background:var(--warm);border:0;
  box-shadow:0 0 0 3px rgba(200,16,46,.12);
  transform:scale(0);transition:transform .42s var(--ease) var(--d,0s)}
.cs-steps.in li::before{transform:scale(1)}

@media(prefers-reduced-motion:reduce){
  .cs-up,.cs-pull::before,.cs-chain-rail,.cs-stop::before,.cs-stop-label,
  .cs-steps::before,.cs-steps li,.cs-steps li::before{
    opacity:1!important;transform:none!important;transition:none!important}
  .cs-tag::before{animation:none}
}


/* ---- variant B rail ------------------------------------------------------
   The zone is the track. .rv-track is stretched over it, so the sticky rail
   inside runs from the first section and parks itself where the zone ends,
   which is the top of the lead form section. */
.sv-zone{position:relative}
.rv-track{position:absolute;left:0;right:0;top:96px;bottom:96px;
  z-index:5;pointer-events:none}
.rv-rail{position:sticky;top:96px;width:344px;margin-left:auto;pointer-events:auto}

/* the form in the rail. Same four questions the page asks at the bottom, asked
   where the reader already is. */
.rv-form{border:1px solid var(--line);border-radius:16px;background:var(--void);
  padding:22px 22px 20px;box-shadow:0 18px 44px -30px rgba(0,0,0,.34);
  transition:opacity .3s var(--ease),transform .3s var(--ease)}
/* The headline has to earn the two fields under it. It carries the page's own
   argument, that the answer already exists inside someone's head, with the ember
   on the half that does the work. Upright, because background-clip:text shears
   the last glyph off an italic. */
.rv-hd b{display:block;font-family:var(--display);font-size:19px;font-weight:500;
  line-height:1.24;letter-spacing:-.022em;margin-bottom:7px;text-wrap:balance}
.rv-hd b em{font-style:normal;
  background:var(--ember-ramp,linear-gradient(100deg,#c8102e,#e0563b 55%,#e8944b));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.rv-hd span{display:block;font-size:12.5px;font-weight:300;line-height:1.5;
  color:var(--muted);margin-bottom:16px}
.rv-f{display:block;margin-bottom:12px}
.rv-f span{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.rv-f input,.rv-f textarea{width:100%;font-family:var(--ui);font-size:13.5px;
  font-weight:300;padding:10px 12px;border:1px solid var(--line);border-radius:4px;
  background:var(--void);color:var(--txt);outline:none;resize:vertical}
.rv-f input:focus,.rv-f textarea:focus{border-color:var(--warm);
  box-shadow:0 0 0 3px rgba(200,16,46,.10)}
.rv-f.bad input,.rv-f.bad textarea{border-color:#c8102e}
.rv-go{width:100%;font-family:var(--ui);font-size:14px;font-weight:500;
  padding:11px 16px;border:1px solid var(--warm);border-radius:4px;
  background:var(--warm);color:#fff;cursor:pointer;transition:.2s var(--ease)}
.rv-go:hover{background:#fff;border-color:#c8102e;color:#c8102e}
.rv-note{margin-top:10px;font-size:11.5px;font-weight:300;color:var(--muted);text-align:center}
.rv-done b{display:block;font-family:var(--display);font-size:16px;font-weight:500;margin-bottom:6px}
.rv-done span{font-size:13px;font-weight:300;line-height:1.55;color:var(--muted)}

/* the capsule, directly under the form. Same pill the homepage docks in the
   corner, taken out of fixed position and seated here instead. */
.rv-pill{position:static;margin-top:14px;width:100%;opacity:1;transform:none;
  pointer-events:auto;transition:box-shadow .3s ease,opacity .3s var(--ease)}
.rv-pill .txt{min-width:0}
.rv-pill b,.rv-pill .s2{text-align:left}

/* Nexy takes the form's place. The seat carries its own ground here because
   there is white page behind it, exactly as in variant A. */
#rv-nexy{position:relative;top:auto;right:auto;margin:0;width:344px;height:566px;
  border-radius:16px;pointer-events:auto;
  background-image:linear-gradient(rgba(9,22,42,.52),rgba(9,22,42,.52)),
    var(--nx-mesh,linear-gradient(#152647,#152647));
  background-size:cover,cover;background-position:50% 50%,72% 26%;
  box-shadow:0 26px 64px -34px rgba(0,0,0,.55)}
.rv-rail.nexy-open .rv-form,.rv-rail.nexy-open .rv-pill{display:none}

/* Nothing sits beside the hero copy any more, so it stops reserving the 400px
   Nexy used to occupy and takes its natural measure back. */
@media(min-width:1120px){.at-hero .at-hero-in{max-width:940px}}

@media(max-width:1119px){.rv-track{display:none}}