@font-face{font-family:"Inter Tight";font-weight:300 700;font-style:normal;font-display:swap;src:url("/assets/inter-tight.woff2") format("woff2")}
body.land-page{--font:"Inter Tight","Inter",ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}
/* ==================================================================================================
   The front page (pages/landing.js). The rhythm of a product page on a black canvas: a hero with the key-card
   deck, a stat row, feature cards, a window-chrome request panel, the gradient band and a pull quote, tabular
   routing, provider tiles, a light interlude for allowances and terms, status cards, three ways to run, the
   source panel, then the white glyph band above the footer.
   ================================================================================================== */
body.land-page .pub-main{padding:0;max-width:none}
body.land-page .pub-foot{padding:0;border-top:0}
.land{display:block;min-width:0}
.land section{max-width:1440px;margin:0 auto;padding:96px var(--gutter);min-width:0}
.land .eyebrow{font-family:var(--font);font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:1px;color:var(--ink-muted);margin:0 0 10px}
.land h2{font-size:clamp(28px,3.2vw,40px);font-weight:400;line-height:1.15;letter-spacing:-.02em;margin:0 0 16px;max-width:24ch}
.land h2 em{font-style:normal;color:var(--primary)}
.land .sub{font-size:16px;color:var(--ink-muted);max-width:640px;margin:0 0 40px;line-height:1.5}
.pipe-hero{display:grid;grid-template-columns:1fr;gap:56px;align-items:center;padding:96px var(--gutter) 80px}
.pipe-hero h1{font-size:clamp(40px,5.6vw,80px);font-weight:400;line-height:1.05;letter-spacing:-1.3px;margin:0 0 28px;max-width:14ch}
.pipe-hero h1 em{font-style:normal;color:var(--primary)}
.pipe-hero .lead{font-size:19px;color:var(--ink-muted);max-width:560px;margin:0 0 36px;line-height:1.5}
.pipe-hero .cta-row{display:flex;gap:12px;flex-wrap:wrap}
.pipe-hero .btn{min-height:48px;padding:0 27px;font-size:16px;font-weight:600;border-radius:8px;border-width:2px}
.pipe-hero .btn-secondary{background:transparent;border-color:var(--ink);color:var(--ink)}
.pipe-hero .btn-secondary:hover{background:var(--ghost);border-color:var(--ink);color:var(--ink)}
.deck{position:relative;padding-top:26px;max-width:520px;width:100%;margin:0 auto;min-width:0}
.deck .back{position:absolute;left:14px;right:14px;top:13px;height:48px;border:1px solid var(--hairline);border-radius:16px}
.deck .back.two{left:28px;right:28px;top:0}
.offer{position:relative;background:var(--canvas);border:1px solid var(--hairline-strong);border-radius:16px;padding:24px}
.offer .row{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:20px;font-size:14px}
.offer .pill{background:var(--ghost);border-radius:9999px;padding:4px 12px;font-size:12px;white-space:nowrap}
.offer .fig{display:flex;align-items:baseline;gap:8px;margin-bottom:16px;flex-wrap:wrap}
.offer .fig b{font-weight:400;font-size:44px;line-height:1;letter-spacing:-.02em}
.offer .fig span{color:var(--ink-muted);font-size:16px}
.offer .bar{height:4px;background:var(--ghost);border-radius:9999px;margin-bottom:12px;overflow:hidden}
.offer .bar i{display:block;height:4px;width:61%;background:var(--ink);border-radius:9999px}
.offer .meta{display:flex;justify-content:space-between;gap:12px;font-size:12px;color:var(--ink-muted)}
.offer .list{margin:20px 0 0;padding:0;list-style:none;border-top:1px solid var(--hairline)}
.offer .list li{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px solid var(--hairline);font-size:13px}
.offer .list li span:last-child{color:var(--ink-muted);text-align:right}
.offer .note{margin:14px 0 0;font-size:11px;color:var(--ink-muted)}
.stats-row{display:grid;grid-template-columns:repeat(2,1fr);gap:32px 24px;max-width:1440px;margin:0 auto;padding:56px var(--gutter);border-top:1px solid var(--hairline-strong);border-bottom:1px solid var(--hairline-strong)}
.stat-lockup .n{display:block;font-size:clamp(48px,5.5vw,80px);line-height:1.1;letter-spacing:-.02em;color:var(--ink)}
.stat-lockup .n sup{font-size:.4em;vertical-align:super;margin-left:2px}
.stat-lockup .c{display:block;font-size:12px;color:var(--ink-muted);margin-top:8px}
.feat-grid{display:grid;grid-template-columns:1fr;gap:20px}
.feat{background:var(--surface);border:1px solid var(--hairline-strong);border-radius:12px;padding:24px;min-width:0}
.feat .idx{display:block;font-size:12px;color:var(--ink-muted);margin-bottom:28px}
.feat h3{font-size:19px;font-weight:600;line-height:1.3;margin:0 0 8px;letter-spacing:-.01em}
.feat p{margin:0;color:var(--ink-muted);font-size:14px;line-height:1.5}
.split{display:grid;grid-template-columns:1fr;gap:40px;align-items:center;min-width:0}
.split .sub{margin-bottom:24px}
.win{background:var(--surface);border:1px solid var(--hairline-strong);border-radius:16px;overflow:hidden;min-width:0}
.win .bar{display:flex;align-items:center;gap:6px;padding:12px 16px;border-bottom:1px solid var(--hairline)}
.win .bar i{width:10px;height:10px;border-radius:9999px;background:var(--ghost-strong)}
.win .bar span{margin-left:auto;font-size:12px;color:var(--ink-muted);font-family:var(--mono)}
.win pre{border:0;border-radius:0;background:transparent;margin:0;padding:20px;font-size:12.5px;line-height:1.65;color:var(--ink);overflow-x:auto}
.win pre b{font-weight:400;color:var(--primary)}
.gradient-band{height:160px;background:linear-gradient(100deg,#215db0 0%,#184a90 55%,#111418 100%)}
.quote{max-width:1440px;margin:0 auto;padding:96px var(--gutter);display:grid;grid-template-columns:1fr;gap:32px;align-items:center}
.quote blockquote{margin:0;font-size:clamp(24px,2.6vw,32px);line-height:1.25;letter-spacing:-.02em;max-width:26ch}
.quote cite{display:block;font-style:normal;font-size:13px;color:var(--ink-muted);margin-top:16px}
.tbl{border:1px solid var(--hairline-strong);border-radius:16px;overflow:hidden;overflow-x:auto;min-width:0}
.tbl table{width:100%;min-width:680px;border-collapse:collapse}
.tbl th{background:var(--field);text-align:left;padding:12px 16px;font-size:12px;font-weight:400;color:var(--ink-muted);border-bottom:1px solid var(--hairline);white-space:nowrap}
.tbl td{padding:14px 16px;border-bottom:1px solid var(--hairline);font-size:15px;vertical-align:top}
.tbl tr:last-child td{border-bottom:0}
.tbl .acc{color:var(--primary)}
.tbl .cap{padding:12px 16px;font-size:12px;color:var(--ink-muted);border-top:1px solid var(--hairline)}
.tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.tile{border:1px solid var(--hairline-strong);border-radius:16px;padding:20px;min-height:120px;display:flex;flex-direction:column;justify-content:space-between;gap:16px;min-width:0}
.tile .name{font-size:15px}
.tile .cap{font-size:12px;color:var(--ink-muted)}
.interlude{background:var(--canvas-soft);color:var(--ink)}
.interlude .eyebrow{color:var(--ink-muted)}
.interlude h2{color:var(--paper-ink)}
.interlude .sub{color:var(--ink-soft)}
.interlude .pcard{background:var(--paper);border:1px solid var(--hairline);border-radius:var(--r-lg);padding:24px;min-width:0}
.interlude .pcard h3{font-size:19px;font-weight:600;margin:0 0 12px;color:var(--paper-ink);letter-spacing:-.01em}
.interlude .pcard p{color:var(--ink-soft);font-size:15px;line-height:1.5;margin:0 0 16px}
.interlude .prow{display:grid;grid-template-columns:1fr;gap:4px 24px;padding:12px 0;border-bottom:1px solid var(--hairline);font-size:15px;color:var(--paper-ink)}
.interlude .prow:last-child{border-bottom:0}
.interlude .prow .k{font-size:12px;color:var(--ink-muted)}
.interlude .badge-ink{display:inline-block;border-radius:9999px;background:var(--paper-ink);color:#fff;font-size:12px;padding:5px 12px}
.tiers{display:grid;grid-template-columns:1fr;gap:12px}
.tier{border:1px solid var(--hairline-strong);border-radius:16px;padding:24px;background:var(--canvas);display:flex;flex-direction:column;gap:20px;min-width:0}
.tier .idx{font-size:12px;text-transform:uppercase;letter-spacing:1px;color:var(--ink-muted);display:flex;justify-content:space-between;gap:12px}
.tier .price{font-size:clamp(40px,5vw,50px);line-height:1;letter-spacing:-.02em}
.tier p{margin:0;font-size:14px;color:var(--ink-muted);line-height:1.5}
.tier ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--hairline)}
.tier li{padding:12px 0;border-bottom:1px solid var(--hairline);font-size:14px;display:flex;gap:10px;align-items:flex-start}
.tier li::before{content:"";width:6px;height:6px;border-radius:9999px;background:var(--primary);flex:none;margin-top:7px}
.tier .btn{margin-top:auto;justify-content:center;border-radius:8px;min-height:44px}
.tier.featured{background:var(--ink);color:#fff;border-color:var(--ink)}
.tier.featured .idx{color:rgba(255,255,255,.55)}
.tier.featured p{color:rgba(255,255,255,.72)}
.tier.featured ul,.tier.featured li{border-color:rgba(255,255,255,.16)}
.tier.featured .btn{background:var(--primary);color:var(--on-primary);border-color:var(--primary)}
.tier.featured .btn:hover{background:var(--primary-pressed);border-color:var(--primary-pressed)}
.status-grid{display:grid;grid-template-columns:1fr;gap:20px}
.status-card{border:1px solid var(--hairline-strong);border-radius:16px;padding:24px;background:var(--surface);min-width:0}
.status-card h3{font-size:19px;font-weight:600;margin:0 0 16px;display:flex;justify-content:space-between;align-items:center;gap:12px}
.status-card h3 .pill{font-size:12px;font-weight:400;background:var(--ghost);border-radius:9999px;padding:4px 12px}
.status-card h3 .pill.live{background:var(--primary);color:var(--on-primary)}
.status-card ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--hairline)}
.status-card li{padding:12px 0;border-bottom:1px solid var(--hairline);font-size:14px;display:grid;grid-template-columns:1fr;gap:2px 12px}
.status-card li b{font-weight:500}
.status-card li span{color:var(--ink-muted)}
.glyphs{display:flex;gap:6px;padding:24px var(--gutter);overflow:hidden;border-top:1px solid var(--hairline-strong)}
.glyphs i{flex:none;width:28px;height:48px;background:var(--ink)}
.glyphs i.a{border-radius:0 24px 0 0}.glyphs i.b{border-radius:0 0 0 24px}.glyphs i.c{border-radius:24px 0 0 0}.glyphs i.d{border-radius:0 0 24px 0}
.pipe-foot{max-width:1440px;margin:0 auto;padding:40px var(--gutter) 32px;display:grid;grid-template-columns:1fr;gap:32px}
.pipe-foot .cols{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.pipe-foot h4{font-size:14px;font-weight:400;margin:0 0 12px;color:var(--ink)}
.pipe-foot a{display:block;font-size:13px;color:var(--ink-muted);text-decoration:none;padding:5px 0}
.pipe-foot a:hover{color:var(--ink)}
.pipe-foot .meta{grid-column:1/-1;font-size:13px;color:var(--ink-muted);border-top:1px solid var(--hairline);padding-top:20px}
@media(min-width:760px){.pipe-hero{grid-template-columns:1.05fr .95fr;gap:64px}.stats-row{grid-template-columns:repeat(4,1fr)}.feat-grid{grid-template-columns:repeat(3,1fr)}.split{grid-template-columns:1fr 1fr}.tiles{grid-template-columns:repeat(4,1fr)}.tiers{grid-template-columns:repeat(3,1fr)}.status-grid{grid-template-columns:1fr 1fr}.quote{grid-template-columns:1fr auto}.pipe-foot .cols{grid-template-columns:repeat(4,1fr)}.interlude .prow{grid-template-columns:150px 1fr}.status-card li{grid-template-columns:130px 1fr}}
@media(max-width:760px){.land section{padding:56px var(--gutter)}.pipe-hero{padding:48px var(--gutter) 40px}.pipe-hero h1{font-size:38px;letter-spacing:-1px}.pipe-hero .lead{font-size:16px}.stats-row{padding:40px var(--gutter)}.quote{padding:56px var(--gutter)}.gradient-band{height:96px}}
/* photography and product media, the way the reference uses them: rounded tiles with the caption outside the image,
   oversized feature media at 40px, a works-with row in place of a logo row, two actions in the nav */
.pub-cta{display:flex;align-items:center;gap:20px}
.pub-signin{font-size:13px;color:var(--ink);text-decoration:none}
.pub-signin:hover{color:var(--ink-muted)}
.photo{display:block;width:100%;height:auto;border-radius:16px;border:1px solid var(--hairline-strong);background:var(--surface);object-fit:cover}
.photo.r32{aspect-ratio:3/2}.photo.r43{aspect-ratio:4/3}.photo.r34{aspect-ratio:3/4}
.feature-image{display:block;width:100%;height:auto;border-radius:40px;border:1px solid var(--hairline-strong);background:var(--surface)}
.works{max-width:1440px;margin:0 auto;padding:0 var(--gutter) 64px;display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px}
.works .lbl{font-size:12px;color:var(--ink-muted);flex:0 0 100%}
.works span{font-size:15px;color:var(--ink-muted)}
.media-grid{display:grid;grid-template-columns:1fr;gap:24px}
.media-card{min-width:0}
.media-card .cap{margin-top:12px}
.media-card .cap b{display:block;font-weight:500;font-size:15px;margin-bottom:2px}
.media-card .cap span{font-size:13px;color:var(--ink-muted);line-height:1.5}
.product-block{display:grid;grid-template-columns:1fr;gap:40px;align-items:center}
.product-block h2{margin-bottom:12px}
.product-block .sub{margin-bottom:24px}
.stat-split{display:grid;grid-template-columns:1fr;gap:40px;align-items:center}
.stat-split .stats{display:grid;grid-template-columns:repeat(2,1fr);gap:28px 24px;margin:0}
.stat-split .stat-lockup .n{font-size:clamp(40px,4.4vw,64px)}
.dev-split{display:grid;grid-template-columns:1fr;gap:24px;align-items:start}
.land h3.kicker{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:1px;color:var(--ink-muted);margin:0 0 10px}
.interlude .photo{border-color:var(--paper-soft)}
.interlude .media-card .cap b{color:var(--paper-ink)}
.interlude .media-card .cap span{color:var(--ink-muted)}
@media(min-width:760px){.media-grid{grid-template-columns:repeat(3,1fr)}.product-block{grid-template-columns:1fr 1fr;gap:64px}.stat-split{grid-template-columns:.8fr 1.2fr;gap:64px}.dev-split{grid-template-columns:1fr 1fr}.works span{font-size:17px}}
@media(max-width:760px){.pub-cta{gap:12px}.pub-signin{display:none}}
/* the hero, after the reference: centred, a pill badge, a two-line headline with the second line muted, one pill
   action with a check line beneath, then the product shot in the middle with a floating detail card and light
   streaks behind it */
.pub-cta .btn{border-radius:var(--r-md);background:var(--primary);border-color:var(--primary);color:#fff;font-weight:500;padding:0 14px}
.pub-cta .btn:hover{background:var(--primary-pressed);border-color:var(--primary-pressed);color:#fff}
.pub-cta .btn::after{content:"›";margin-left:6px;font-size:16px;line-height:1}
.pub-signin{color:var(--ink-muted)}.pub-signin:hover{color:var(--ink)}
.hero2{max-width:1440px;margin:0 auto;padding:40px var(--gutter) 0;text-align:center;overflow:clip}
.hero2-badge{display:inline-flex;align-items:center;gap:10px;padding:7px 14px;border:1px solid var(--hairline-strong);border-radius:9999px;font-size:13px;color:var(--ink);text-decoration:none;background:var(--canvas)}
.hero2-badge i{width:1px;height:14px;background:var(--rule)}
.hero2-badge b{font-weight:500;color:var(--primary)}
.hero2 h1{font-size:clamp(30px,3.6vw,50px);font-weight:400;line-height:1.1;letter-spacing:-.025em;margin:18px auto 14px;max-width:32ch}
.hero2 h1 .l2{display:block;color:var(--ink-muted);font-weight:400}
.hero2 .lead{font-size:16px;color:var(--ink-muted);max-width:66ch;margin:0 auto 22px;line-height:1.55}
.hero2-cta{display:inline-flex;align-items:center;gap:10px;height:48px;padding:0 22px 0 26px;border-radius:var(--r-lg);background:var(--primary);color:#fff;font-size:15px;font-weight:500;text-decoration:none;box-shadow:0 12px 30px rgba(33,93,176,.25),0 1px 3px rgba(15,23,42,.12)}
.hero2-cta:hover{background:var(--primary-pressed);color:#fff}
.hero2-cta svg{width:14px;height:14px}
.hero2-micro{display:flex;justify-content:center;align-items:center;gap:8px;margin:14px 0 0;font-size:13px;color:var(--ink-muted)}
.hero2-micro svg{width:15px;height:15px;color:var(--ink)}
.hero2-stage{position:relative;max-width:1180px;margin:20px auto 0;padding:40px 0 96px}
/* the lanes: the box reaches past the stage and is masked to nothing on all four sides, so the light fades into the
   page instead of ending in a straight clip line at the stage edges or at the section edge on a wide screen */
.streaks{position:absolute;top:-80px;bottom:-40px;left:0;right:0;pointer-events:none;overflow:hidden;-webkit-mask-image:linear-gradient(to bottom,transparent,#000 200px,#000 calc(100% - 180px),transparent),linear-gradient(to right,transparent,#000 180px,#000 calc(100% - 180px),transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(to bottom,transparent,#000 200px,#000 calc(100% - 180px),transparent),linear-gradient(to right,transparent,#000 180px,#000 calc(100% - 180px),transparent);mask-composite:intersect}
.streaks i{position:absolute;left:-52vw;width:52vw;height:58px;margin-top:-29px;border-radius:9999px;filter:blur(24px) saturate(1.05);opacity:.6;will-change:transform;animation:laneR 7s linear infinite}
.streaks i::after{content:"";position:absolute;inset:28% 5%;border-radius:9999px;background:inherit}
.streaks i::before{content:"";position:absolute;left:8%;right:8%;top:50%;height:6px;margin-top:-3px;border-radius:9999px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.95) 30%,#fff 50%,rgba(255,255,255,.95) 70%,transparent)}
.streaks .s1{top:22%;background:linear-gradient(90deg,transparent,#0ea5e9 22%,#215db0 78%,transparent);animation-duration:7s;animation-delay:-1.5s}
.streaks .s2{top:34%;background:linear-gradient(90deg,transparent,#6366f1 22%,#38bdf8 78%,transparent);animation-name:laneL;animation-duration:9s;animation-delay:-4s}
.streaks .s3{top:46%;background:linear-gradient(90deg,transparent,#215db0 22%,#818cf8 78%,transparent);animation-duration:6.5s;animation-delay:-2.5s}
.streaks .s4{top:56%;background:linear-gradient(90deg,transparent,#22d3ee 22%,#0ea5e9 78%,transparent);animation-name:laneL;animation-duration:8s;animation-delay:-5.5s}
.streaks .s5{top:66%;background:linear-gradient(90deg,transparent,#818cf8 22%,#215db0 78%,transparent);animation-duration:7.5s;animation-delay:-3s}
.streaks .s6{top:78%;background:linear-gradient(90deg,transparent,#38bdf8 22%,#6366f1 78%,transparent);animation-name:laneL;animation-duration:10s;animation-delay:-7s}
.streaks .s7{top:92%;height:64px;width:64vw;left:-64vw;background:linear-gradient(90deg,transparent,#215db0 12%,#6366f1 50%,#22d3ee 88%,transparent);animation-duration:12s;animation-delay:-6s}
.streaks .s8{top:6%;background:linear-gradient(90deg,transparent,#0ea5e9 22%,#818cf8 78%,transparent);animation-name:laneL;animation-duration:6s;animation-delay:-1s}
@keyframes laneR{from{transform:translateX(0)}to{transform:translateX(152vw)}}
@keyframes laneL{from{transform:translateX(152vw)}to{transform:translateX(0)}}
@media(prefers-reduced-motion:reduce){.streaks i{animation:none;transform:translateX(76vw)}.streaks .s2,.streaks .s4,.streaks .s6,.streaks .s8{transform:translateX(44vw)}}
.hero2-shot{position:relative;max-width:880px;margin:0 auto;border-radius:10px;overflow:hidden;border:1px solid var(--hairline);background:var(--canvas);box-shadow:0 40px 90px rgba(15,23,42,.14),0 2px 8px rgba(15,23,42,.06)}
.hero2-shot img{display:block;width:100%;height:auto}
.hero2-card{position:absolute;right:3%;top:40%;width:256px;text-align:left;background:var(--canvas);border:1px solid var(--hairline);border-radius:10px;padding:18px;box-shadow:0 30px 70px rgba(15,23,42,.14),0 2px 8px rgba(15,23,42,.06)}
.hero2-card .k{font-size:11px;color:var(--ink-muted);margin:0 0 6px}
.hero2-card .n{font-size:22px;font-weight:600;letter-spacing:-.02em;margin:0}
.hero2-card .u{font-size:12px;color:var(--ink-muted);margin:2px 0 12px}
.hero2-card .track{position:relative;height:4px;border-radius:9999px;background:var(--hairline);margin:0 0 16px}
.hero2-card .track i{position:absolute;left:0;top:0;height:4px;width:61%;border-radius:9999px;background:var(--ink)}
.hero2-card .track b{position:absolute;left:61%;top:-5px;width:14px;height:14px;border-radius:9999px;background:var(--canvas);border:2px solid var(--ink);transform:translateX(-50%)}
.hero2-card .rows{display:grid;gap:6px;margin:0 0 14px;font-size:11.5px}
.hero2-card .rows div{display:flex;justify-content:space-between;gap:8px}
.hero2-card .rows span:last-child{color:var(--ink);font-weight:500}
.hero2-card .rows span:first-child{color:var(--ink-muted)}
.hero2-card .rows .sep{border-top:1px solid var(--hairline);padding-top:8px;margin-top:4px}
.hero2-card .go{display:block;text-align:center;height:36px;line-height:36px;border-radius:var(--r-md);background:var(--primary);color:#fff;font-size:12.5px;font-weight:500;text-decoration:none}
.hero2-card .note{display:flex;align-items:center;justify-content:center;gap:6px;margin:10px 0 0;font-size:10.5px;color:var(--ink-muted)}
.hero2-card .note i{width:5px;height:5px;border-radius:9999px;background:var(--primary)}
@media(max-width:900px){.hero2-card{position:relative;right:auto;top:auto;width:auto;max-width:420px;margin:20px auto 0}.hero2-stage{padding-bottom:40px}.hero2{padding-top:32px}}
/* who it is for, after the reference's feature deck: a header row with a pill action on the right, then three
   scenes, each an abstract render in one of the brand's hues (warm, magenta, violet: the gradient band read left to
   right) with the product's own chips and panels laid over it, then a title with accent words, the sentence and a
   soft link. The overlays are real text in real type; the render only carries colour and light. */
.who-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:40px}
.who-head h2{margin:0;max-width:34ch}
.who-head h2 .l2{display:block;color:var(--ink-muted);font-weight:400}
.pill-link{display:inline-flex;align-items:center;gap:6px;flex:none;height:36px;padding:0 16px;border:1px solid var(--hairline-strong);border-radius:9999px;background:var(--canvas);font-size:13px;color:var(--ink);text-decoration:none;white-space:nowrap}
.pill-link::after{content:"›";font-size:16px;line-height:1}
.pill-link:hover{border-color:var(--ink)}
.who-grid{display:grid;grid-template-columns:1fr;gap:40px 24px}
.who{display:flex;flex-direction:column;min-width:0}
.scene{position:relative;aspect-ratio:5/6;max-height:520px;border-radius:12px;overflow:hidden;background:var(--surface);isolation:isolate;font-family:var(--mono)}
.scene>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.scene code{background:none;border:0;border-radius:0;padding:0;font-size:inherit;color:inherit}
.scene .glints i{position:absolute;width:4px;height:4px;border-radius:9999px;background:#fff;box-shadow:0 0 10px 3px rgba(255,255,255,.75);opacity:0;animation:glint 10s linear infinite}
.scene .glints i:nth-child(1){left:12%;top:78%;animation-delay:-1s}
.scene .glints i:nth-child(2){left:28%;top:88%;animation-delay:-4s;animation-duration:12s}
.scene .glints i:nth-child(3){left:44%;top:70%;animation-delay:-7s}
.scene .glints i:nth-child(4){left:58%;top:92%;animation-delay:-2.5s;animation-duration:9s}
.scene .glints i:nth-child(5){left:70%;top:64%;animation-delay:-5.5s;animation-duration:13s}
.scene .glints i:nth-child(6){left:84%;top:82%;animation-delay:-8s}
.scene .glints i:nth-child(7){left:92%;top:58%;animation-delay:-3.5s;animation-duration:11s}
@keyframes glint{0%{transform:translateY(0);opacity:0}15%{opacity:.9}70%{opacity:.5}100%{transform:translateY(-140px);opacity:0}}
.scene .tag{position:absolute;padding:6px 8px;border-radius:3px;background:var(--ink);color:#fff;font-size:10px;line-height:1;font-weight:500;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.scene .lg{position:absolute;display:inline-flex;align-items:center;gap:7px;padding:7px 10px 7px 8px;border-radius:6px;background:rgba(255,255,255,.94);border:1px solid rgba(10,10,11,.08);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);font-family:var(--font);font-size:12px;line-height:1;font-weight:500;color:var(--ink);white-space:nowrap;animation:floaty 7s ease-in-out infinite alternate}
.scene .lg .mark-svg{width:15px;height:15px;display:block;fill:currentColor}
.scene .p1{left:10%;top:13%}
.scene .p2{right:12%;top:22%;animation-delay:-2s}
.scene .p3{left:34%;top:32%;animation-delay:-4s}
.scene .p4{right:20%;top:44%;animation-delay:-1s}
.scene .p5{left:12%;top:53%;animation-delay:-3s}
.scene .p6{right:10%;top:64%;animation-delay:-5s}
.scene .p7{left:36%;top:73%;animation-delay:-2.5s}
.scene .h1{right:16px;top:66px;animation:none}
.scene .h2{left:16px;top:44%;animation-delay:-3s}
.scene .h3{right:16px;top:56%;animation-delay:-1.5s}
@keyframes floaty{from{transform:translateY(-3px)}to{transform:translateY(3px)}}
.scene .panel{position:absolute;left:16px;right:16px;bottom:16px;padding:14px 16px 16px;border-radius:6px;background:#fff;border:1px solid rgba(10,10,11,.1);font-family:var(--font)}
.scene .panel .k{display:flex;align-items:center;gap:7px;margin:0 0 10px;font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}
.scene .panel .k::before{content:"";width:8px;height:8px;background:var(--ink)}
.scene .panel h4{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin:0 0 6px;font-size:15px;font-weight:500;letter-spacing:-.01em}
.scene .panel h4 span{font-size:11px;font-weight:400;color:var(--ink-muted);white-space:nowrap}
.scene .row{display:grid;grid-template-columns:minmax(0,1fr) 56px 66px;gap:10px;align-items:center;padding:7px 0;border-top:1px solid var(--hairline);font-size:12px}
.scene .row .n{display:flex;flex-direction:column;gap:2px;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.scene .row .n code{align-self:flex-start;font-size:10px;color:var(--ink-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.scene .row .bar{height:4px;border-radius:2px;background:var(--hairline);overflow:hidden}
.scene .row .bar i{display:block;height:100%;background:var(--ink);transform-origin:left;animation:grow 1.2s cubic-bezier(.2,.7,.2,1) both}
.scene .row .v{font-family:var(--mono);font-size:11px;line-height:1.2;text-align:right}
.scene .row .v small{display:block;margin-top:2px;font-size:9.5px;color:var(--ink-muted)}
.scene .w69{width:69%}.scene .w61{width:61%}.scene .w37{width:37%}.scene .w20{width:20%}
@keyframes grow{from{transform:scaleX(0)}}
.scene .panel .tag{position:static;display:inline-block;margin-top:12px;animation:none}
.scene .ask{position:absolute;left:16px;right:16px;top:16px;display:flex;align-items:center;padding:12px 14px;border-radius:6px;background:#fff;border:1px solid rgba(10,10,11,.1);font-size:12px;line-height:1;color:var(--ink);white-space:nowrap;overflow:hidden}
.scene .caret{display:inline-block;width:1px;height:13px;margin-left:3px;background:var(--ink);animation:blink 1.1s steps(2,start) infinite}
@keyframes blink{to{visibility:hidden}}
.scene .term{position:absolute;left:16px;right:16px;bottom:16px;margin:0;padding:14px 16px;border:0;border-radius:6px;background:#0a0a0b;color:#d9d9d9;font-size:11px;line-height:1.7;white-space:pre-wrap;overflow:hidden;overflow-wrap:anywhere}
.scene .term .p{color:#7a7a7a}
.scene .term b{font-weight:400;color:var(--primary)}
.who h3{margin:20px 0 10px;font-size:22px;font-weight:500;line-height:1.15;letter-spacing:-.01em}
.who h3 em{font-style:normal;color:var(--primary)}
.who p{flex:1;margin:0 0 16px;font-size:16px;line-height:1.45;color:var(--ink-soft)}
.who-link{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;padding:10px 14px;border-radius:6px;background:var(--surface);color:var(--ink);font-size:13px;font-weight:500;text-decoration:none}
.who-link::after{content:"→";font-size:14px;line-height:1}
.who-link:hover{background:var(--ghost-strong);color:var(--ink)}
@media(min-width:760px){.who-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){.who-head{flex-direction:column;align-items:flex-start;gap:16px;margin-bottom:28px}.scene{aspect-ratio:auto;height:400px}.scene .row{grid-template-columns:minmax(0,1fr) 40px 60px;gap:8px;font-size:11px}}
@media(prefers-reduced-motion:reduce){.scene .glints i{animation:none;opacity:.6}.scene .lg,.scene .caret,.scene .row .bar i{animation:none}}
/* the hero carousel: a row of tabs above the console shot, one slide and one detail card per console page; slides
   cross-fade inside a box that keeps the shot's aspect, so the page never jumps between them */
.hero2-tabs{position:relative;z-index:2;display:flex;justify-content:center;flex-wrap:wrap;gap:6px;margin:0 0 18px}
.hero2-tabs button{height:34px;padding:0 14px;border-radius:9999px;border:1px solid rgba(17,20,24,.42);background:#fff;color:var(--ink);font-family:var(--font);font-size:13px;font-weight:500;letter-spacing:0;cursor:pointer;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.hero2-tabs button:hover{border-color:var(--ink);color:var(--ink)}
.hero2-tabs button.on,.hero2-tabs button.on:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.hero2-tabs button:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.hero2-shot{aspect-ratio:1760/1222}
.hero2-shot .track{display:flex;height:100%;transition:transform .7s cubic-bezier(.22,.61,.36,1);will-change:transform}
.hero2-shot .slide{position:relative;flex:0 0 100%;height:100%;margin:0}
.hero2-shot .slide img{display:block;width:100%;height:100%;object-fit:cover;object-position:top left}
.hero2-card{transition:transform .7s cubic-bezier(.22,.61,.36,1),opacity .45s ease}
.hero2-card.enter-right{transform:translateX(160px);opacity:0;transition:none}
.hero2-card.enter-left{transform:translateX(-160px);opacity:0;transition:none}
.hero2-card.leave-left{transform:translateX(-160px);opacity:0}
.hero2-card.leave-right{transform:translateX(160px);opacity:0}
.hero2-stage.instant .track,.hero2-stage.instant .hero2-card{transition:none}
@media(prefers-reduced-motion:reduce){.hero2-shot .track,.hero2-card{transition:none}}
/* scroll-driven on a tall desktop viewport: the stage sticks below the header while the page scrolls, and passing
   the middle of each step triggers the same eased slide the tabs use, the detail card travelling further than the
   shot. The section clips with overflow:clip rather than hidden so the sticky stage works inside it. */
.hero2-scroller{position:relative}
@media(min-width:901px) and (min-height:820px){
.hero2-scroller.sticky .hero2-stage{position:sticky;top:72px;margin-top:0;padding:24px 0 48px}
.hero2-scroller.sticky .hero2-shot{max-width:min(880px,calc((100vh - 250px) * 1.44))}
.hero2-scroller.sticky .hero2-card{will-change:transform,opacity}
}
/* the hero, after the reference's composition: copy on the left, the river on the right, bleeding to the edge. Ten
   small labelled sources at the bottom left, each shedding a stream that joins one current, which thickens as it
   climbs to the mass at the top right under the one tag that matters. The points are drawn; the labels are text. */
.hero2-top{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:24px 32px;align-items:center;text-align:left;max-width:1440px;margin:0 auto;padding:0}
.hero2-copy{min-width:0;padding:24px 0 40px}
.hero2-copy h1{font-size:clamp(34px,3.6vw,48px);margin:18px 0 14px;max-width:none}
.hero2-copy h1 .l2{font-size:.78em}
.hero2-copy .lead{margin:0 0 22px;max-width:46ch}
.hero2-copy .hero2-micro{justify-content:flex-start}
.hero2-swarm{position:relative;height:640px;min-width:0;margin-right:calc(-1 * var(--gutter))}
.hero2-swarm canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.swarm-tag{position:absolute;left:0;top:0;display:flex;flex-direction:column;align-items:center;gap:6px;transform:translate(-50%,-50%);pointer-events:none;will-change:transform,opacity}
.swarm-tag b,.swarm-tag.team,.swarm-tag.hub{font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;line-height:1;padding:5px 7px 4px;border-radius:3px;background:var(--surface-2);color:var(--ink-soft);white-space:nowrap}
.swarm-tag.team{background:#fff;color:var(--ink);box-shadow:0 0 0 1px rgba(17,20,24,.14)}
.swarm-tag.hub{background:#2f56d6;color:#fff}
.swarm-tile{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:#fff;color:var(--ink);box-shadow:0 0 0 1px rgba(17,20,24,.1),0 6px 16px rgba(17,20,24,.08)}
.swarm-tile .mark-svg{width:20px;height:20px;fill:currentColor;display:block}
.swarm-tag[data-node="claude"] .swarm-tile{color:#d97757}
.swarm-tag[data-node="deepseek"] .swarm-tile{color:#4d6bfe}
.swarm-tag[data-node="vllm"] .swarm-tile{color:#1d4ed8}
@media(max-width:900px){.hero2-top{grid-template-columns:1fr;text-align:center;gap:0}.hero2-copy{padding:24px 0 8px}.hero2-copy h1{margin:18px auto 14px}.hero2-copy .lead{margin:0 auto 22px}.hero2-copy .hero2-micro{justify-content:center}.hero2-swarm{height:440px;margin:0 calc(-1 * var(--gutter)) 0 0}.swarm-tag b,.swarm-tag.team,.swarm-tag.hub{font-size:9.5px}.swarm-tile{width:30px;height:30px;border-radius:8px}.swarm-tile .mark-svg{width:16px;height:16px}}