/* Self-hosted variable fonts (SIL Open Font License), fetched from Google Fonts on Oct 20, 2026. Only the subsets the site uses. */
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 600;font-display:swap;src:url(/assets/fonts/jetbrains-mono-latin-ext.9c38cb2d0d.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 600;font-display:swap;src:url(/assets/fonts/jetbrains-mono-latin.2c32b9b3ee.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:'Outfit';font-style:normal;font-weight:300 700;font-display:swap;src:url(/assets/fonts/outfit-latin-ext.9e38b3f157.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Outfit';font-style:normal;font-weight:300 700;font-display:swap;src:url(/assets/fonts/outfit-latin.92684e4acd.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:'Sora';font-style:normal;font-weight:400 800;font-display:swap;src:url(/assets/fonts/sora-latin-ext.8d9b4a4136.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Sora';font-style:normal;font-weight:400 800;font-display:swap;src:url(/assets/fonts/sora-latin.3902474d3e.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:'Noto Kufi Arabic';font-style:normal;font-weight:400 700;font-display:swap;src:url(/assets/fonts/noto-kufi-arabic-arabic.e8a770c94f.woff2) format('woff2');unicode-range:U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1}

/* Layout concept: Blinklink's existing dark system. Black ground, Sora display, Outfit body, mono labels.
   Indigo-to-fuchsia is the brand and Social; orange is Skills; teal is monetization. One bold moment per page: the hero. */
:root{
  --bg:#000; --surface:#0c0c11; --surface-2:#13131a; --line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.15);
  --fg:#f4f4f5; --muted:#a1a1aa; --dim:#71717a;
  --indigo:#6366f1; --indigo-soft:#a5b4fc; --fuchsia:#e879f9; --orange:#f97316; --orange-soft:#fdba74; --teal:#2dd4bf; --ok:#22c55e;
  --grad:linear-gradient(115deg,#6366f1 0%,#e879f9 100%);
  --grad-o:linear-gradient(100deg,#f97316 0%,#fb923c 50%,#fbbf24 100%);
  --display:'Sora','Noto Kufi Arabic',ui-sans-serif,system-ui,sans-serif; --body:'Outfit','Noto Kufi Arabic',ui-sans-serif,system-ui,sans-serif; --mono:'JetBrains Mono',ui-monospace,Menlo,monospace;
  --ease:cubic-bezier(.22,1,.36,1);
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:var(--bg);color:var(--fg);font:400 16px/1.55 var(--body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--bg)}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4,p,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
.wrap{max-width:1200px;margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.i{width:20px;height:20px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.i.fill{fill:currentColor;stroke:none}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:2px solid var(--indigo);outline-offset:3px;border-radius:8px}
.grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ── Frames: the three ways product appears on the site (Visual storytelling plan, rule 4) ── */
/* Every part of the phone is a fraction of its width (--pw, drawn at 260px), so a 110px card phone keeps the same corners, bar and island as a 300px hero phone */
.dphone{--pp:calc(var(--pw,260px) * .0308);--pb:calc(var(--pw,260px) * .1154);--ps:calc(var(--pw,260px) * .1385);position:relative;width:var(--pw,260px);aspect-ratio:390/874;border-radius:calc(var(--pw,260px) * .1692);padding:var(--pp);background:#0a0a0e;border:1px solid rgba(255,255,255,.14);box-shadow:0 40px 90px rgba(0,0,0,.6),inset 0 0 0 1px rgba(255,255,255,.04);flex-shrink:0;box-sizing:border-box}
/* Status bar with the island inside it, so the frame never covers the app */
.dphone::before{content:"9:41";position:absolute;top:var(--pp);left:var(--pp);right:var(--pp);height:var(--pb);border-radius:var(--ps) var(--ps) 0 0;background:var(--sbar,#fff);color:var(--sbar-ink,#111);font:600 max(5px,calc(var(--pw,260px) * .0423))/var(--pb) -apple-system,"SF Pro Text",system-ui,sans-serif;padding-left:calc(var(--pw,260px) * .0923);z-index:1}
.dphone::after{content:"";position:absolute;top:calc(var(--pw,260px) * .0538);left:50%;width:30%;height:calc(var(--pw,260px) * .0731);transform:translateX(-50%);border-radius:999px;background:#0a0a0e;z-index:2}
.dphone>img,.dphone>video{display:block;width:100%;height:calc(100% - var(--pb));margin-top:var(--pb);object-fit:cover;object-position:top;border-radius:0 0 var(--ps) var(--ps);background:#fff}
.dphone.dark{--sbar:#000;--sbar-ink:#fff}
.dphone{align-self:flex-start;height:auto;overflow:hidden}

/* Workspace cards: a real phone rising from the bottom edge */
.wsc.wsc-ph{display:grid;grid-template-columns:minmax(0,1fr) 190px;grid-template-rows:auto auto auto auto 1fr;column-gap:24px;padding-bottom:0;min-height:400px}
.wsc.wsc-ph>*:not(.wsc-peek){grid-column:1}
.wsc.wsc-ph .arrow-link{padding-bottom:30px}
.wsc-peek{grid-column:2;grid-row:1/-1;align-self:end;height:330px;overflow:hidden;display:flex;justify-content:center;align-items:flex-start;margin-right:-6px;-webkit-mask-image:linear-gradient(180deg,#000 80%,transparent);mask-image:linear-gradient(180deg,#000 80%,transparent)}
.wsc-peek .dphone{--pw:190px;transition:transform .6s var(--ease)}
.wsc:hover .wsc-peek .dphone{transform:translateY(-10px)}
@media (max-width:640px){.wsc.wsc-ph{grid-template-columns:minmax(0,1fr)}.wsc.wsc-ph .arrow-link{padding-bottom:0}.wsc-peek{grid-column:1;grid-row:auto;height:250px;margin:18px 0 0}.wsc-peek .dphone{--pw:200px}}
/* Why now: the feed as it really looks */
.nf-peek{display:flex;justify-content:center;height:300px;overflow:hidden;margin-top:22px;border-radius:16px;-webkit-mask-image:linear-gradient(180deg,#000 75%,transparent);mask-image:linear-gradient(180deg,#000 75%,transparent);background:radial-gradient(70% 90% at 50% 100%,rgba(99,102,241,.3),transparent 70%)}
.nf-peek .dphone{--pw:230px;margin-top:22px}
/* Recorded player */
/* Recorded player: tabs grouped by product, proof cards hugging the phone */
.ptab-groups{display:flex;flex-direction:column;align-items:center;gap:8px;max-width:100%}
.ptabs.grouped{padding:4px 5px 4px 4px}
.ptab-prod{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 12px 0 10px;margin-right:2px;border-right:1px solid var(--line);font:500 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);flex-shrink:0}
.rplayer .pwrap{position:relative}
.rp-phone{position:relative;z-index:1}
.rplayer .pfloat{z-index:4}
.rplayer .pfloat.a{left:auto;right:calc(50% + var(--pw) / 2 - 34px);top:22%}
.rplayer .pfloat.b{right:auto;left:calc(50% + var(--pw) / 2 - 34px);bottom:18%}

.rplayer .pwrap{padding:8px 0 4px}
.rplayer{--pw:clamp(250px,24vw,300px)}
.rp-phone{--sbar:#000;--sbar-ink:#fff}
.rp-phone>.rp-vid{position:absolute;left:var(--pp);bottom:var(--pp);width:calc(100% - 2 * var(--pp));height:calc(100% - 2 * var(--pp) - var(--pb));margin:0;border-radius:0 0 var(--ps) var(--ps);object-fit:cover;object-position:top;opacity:0;transition:opacity .4s}
.rp-phone.has-video>.rp-vid{opacity:1}
.rp-phone.as-img>.rp-vid{opacity:0}
.rplayer .pfloat{display:flex}
.seg-hero .rplayer .pfloat{display:none}
@media (max-width:1180px){.rplayer .pfloat{display:none}}
@media (max-width:640px){.rplayer{--pw:min(280px,74vw)}}
/* the phone's height is held until the script builds it, so the hero copy beside it does not jump (it was CLS 0.08 to 0.10
   on desktop); a player with tabs over the phone (Skills) holds their row too */
.rplayer:empty{min-height:calc(var(--pw) * 874 / 390 + 12px)}
.rplayer[data-reels*=","]:not([data-ui]):empty{min-height:calc(var(--pw) * 874 / 390 + 76px)}
/* Detail card: one product component on a lit stage (Visual storytelling plan, rule 3) */
.dstage{position:relative;display:grid;place-items:center;gap:22px;padding:clamp(28px,5vw,64px) clamp(16px,4vw,56px);border-radius:24px;overflow:hidden;
  background:radial-gradient(70% 90% at 50% 0%,var(--glow2,rgba(99,102,241,.22)),transparent 70%),var(--surface);border:1px solid var(--line)}
.dstage.sk{--glow2:rgba(249,115,22,.2)}.dstage.so{--glow2:rgba(232,121,249,.2)}
.dstage.duo{grid-template-columns:repeat(2,minmax(0,1fr));align-items:center}
.dcard{width:100%;max-width:var(--cw,640px);border-radius:16px;overflow:hidden;background:#fff;box-shadow:0 30px 80px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.08)}
.dcard img{display:block;width:100%;height:auto}
.dcard.cut-b{-webkit-mask-image:linear-gradient(180deg,#000 78%,transparent);mask-image:linear-gradient(180deg,#000 78%,transparent)}
.dcard.cut-r{-webkit-mask-image:linear-gradient(90deg,#000 82%,transparent);mask-image:linear-gradient(90deg,#000 82%,transparent)}
.dcard.tilt{transform:perspective(1400px) rotateX(4deg) rotateY(-6deg)}
.dstage .pv-cap{margin:0}
/* Layered pair: the cause behind, the result in front */
.dstage.layer{grid-template-columns:minmax(0,1fr);place-items:stretch;gap:0}
.dstage.layer .dcard:first-child{width:86%;justify-self:start}
.dstage.layer .dcard:last-child{width:58%;justify-self:end;margin-top:-34%;position:relative;z-index:1;box-shadow:0 40px 90px rgba(0,0,0,.65),0 0 0 1px rgba(255,255,255,.1)}
@media (max-width:760px){.dstage.duo{grid-template-columns:minmax(0,1fr)}.dcard.tilt{transform:none}}
/* Product marks: the real orbs, orange for Skills, purple and blue for Blinklink and Social */
img.orb{width:30px;height:30px;display:block;object-fit:contain}
.pmark{width:16px;height:16px;flex-shrink:0;display:inline-block;vertical-align:-3px;object-fit:contain}
.ptabs .pmark{width:14px;height:14px}
.pv-detail{padding:0;display:flex;justify-content:center;align-items:flex-start;overflow:hidden;background:#f4f4f6;-webkit-mask-image:linear-gradient(180deg,#000 70%,transparent);mask-image:linear-gradient(180deg,#000 70%,transparent)}
.pv-detail img{width:78%;margin-top:10px;border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.18)}
.pv-owned .win.mini{height:100%;border-radius:10px;box-shadow:none}
.pv-owned .win.mini .win-bar{height:24px}
.pv-owned .win.mini .shot-body{height:calc(100% - 24px)}
.pv-owned .win.mini img{width:100%;height:100%;object-fit:cover;object-position:left top}
/* Skills two parts: each card shows its phone */

/* Phones side by side on a stage */
.ph-stage{grid-auto-flow:column;justify-content:center;gap:clamp(16px,3vw,36px);align-items:end}
.ph-stage .dphone{--pw:clamp(170px,19vw,240px)}
.ph-stage .dphone:last-child{margin-bottom:28px}
@media (max-width:640px){.ph-stage .dphone{--pw:44vw}}
/* Trusted by: customer logos in one tone */
.trust-logos{display:flex;align-items:center;flex-wrap:wrap;gap:12px 30px}
.trust-logos img{display:block;width:auto;filter:brightness(0) invert(1);opacity:.72}
.trust-row .band{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;column-gap:28px}
.trust-row .band h3{margin-top:0}.trust-row .band p{margin-top:6px}
.trust-row .tr-side{display:flex;flex-direction:column;align-items:flex-end;gap:12px}.trust-row .tr-side .certs{margin-top:0}
@media (max-width:760px){.trust-row .tr-side{align-items:flex-start}}
@media (max-width:760px){.trust-row .band{grid-template-columns:minmax(0,1fr);row-gap:12px}}
/* ── Embedded feed on a host page (rebuilt from the product's embed, with real stills) ── */
.ep-win .win-body.ep{padding:0}
.ep{container-type:inline-size;aspect-ratio:16/10;background:#fff;color:#0f172a;display:flex;flex-direction:column;overflow:hidden}
.ep-nav{display:flex;align-items:center;gap:3.6cqw;padding:2.2cqw 3.6cqw;font:500 2.3cqw/1 var(--body);color:#475569;border-bottom:1px solid #eef2f7}
.ep-logo{font:800 2.8cqw/1 var(--display);color:#fff;background:#2563eb;padding:1cqw 1.8cqw;border-radius:1.2cqw;transform:rotate(-2deg);margin-right:auto}
.ep-cta{background:#0f172a;color:#fff;padding:1.2cqw 2.2cqw;border-radius:99px}
.ep-hero{padding:2.4cqw 3.6cqw 2cqw;display:flex;flex-direction:column;gap:1cqw}
.ep-hero small{font:600 1.9cqw/1 var(--mono);letter-spacing:.06em;color:#2563eb;text-transform:uppercase}
.ep-hero b{font:700 3.8cqw/1.1 var(--display);letter-spacing:-.02em}
.ep-feed{margin:0 3.6cqw;padding:2cqw 0 0;border-top:1px solid #eef2f7}
.ep-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.8cqw}
.ep-head b{font:700 2.6cqw/1 var(--display)}
.ep-head span{display:flex;align-items:center;gap:.8cqw;font:500 1.8cqw/1 var(--body);color:#64748b}.ep-head img{width:2.4cqw;height:2.4cqw}
.ep-row{display:flex;gap:1.8cqw;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,#000 80%,transparent);mask-image:linear-gradient(90deg,#000 80%,transparent)}
.ep-tile{position:relative;flex:0 0 13.2cqw;aspect-ratio:9/16;border-radius:1.8cqw;overflow:hidden;background:#000}
.ep-tile img{width:100%;height:100%;object-fit:cover;display:block}
.ep-tile::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 50%,rgba(0,0,0,.75))}
.ep-tile b{position:absolute;left:1.4cqw;right:1.4cqw;bottom:3.6cqw;z-index:1;font:600 1.8cqw/1.25 var(--display);color:#fff}
.ep-tile small{position:absolute;left:1.4cqw;bottom:1.4cqw;z-index:1;font:500 1.5cqw/1 var(--body);color:rgba(255,255,255,.75)}
.ep-pl{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%);z-index:1;width:5cqw;height:5cqw;border-radius:50%;background:rgba(0,0,0,.35);display:grid;place-items:center}
.ep-pl .i{width:2cqw;height:2cqw;color:#fff}
.run .win .shot-body{aspect-ratio:16/10;overflow:hidden}
.run .win .shot-body img{width:100%;height:100%;object-fit:cover;object-position:left top}
/* ── Pillar: Owned. The address bar is the hero; domain or path, the brand follows it ── */
.pv.pv-url,.pv.pv-attr,.pv.pv-live{height:252px}
.pv-url{padding:16px;display:flex;flex-direction:column;gap:12px;background:radial-gradient(90% 120% at 50% 0%,rgba(99,102,241,.18),transparent 70%),#08080d}
.ub{display:flex;align-items:center;gap:10px;height:46px;padding:0 16px;border-radius:999px;background:#fff;color:#0f172a;box-shadow:0 10px 30px rgba(0,0,0,.4);flex-shrink:0}
.ub .i{width:16px;height:16px;color:#16a34a;flex-shrink:0}
.ub-rot{position:relative;flex:1;height:22px;overflow:hidden}
.ub-rot>span{position:absolute;inset:0;font:500 15.5px/22px var(--mono);letter-spacing:-.02em;white-space:nowrap;opacity:0;transform:translateY(100%);transition:opacity .45s var(--ease),transform .45s var(--ease)}
.ub-rot>span b{font-weight:700;color:#4f46e5}
.ub-rot>span.on{opacity:1;transform:none}.ub-rot>span.out{opacity:0;transform:translateY(-100%)}
.ub-site{position:relative;flex:1;border-radius:12px;background:#fff;overflow:hidden}
.ub-s{position:absolute;inset:0;padding:12px 14px;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto 1fr;gap:8px 10px;opacity:0;transition:opacity .45s}
.ub-s.on{opacity:1}
.ub-logo{font:800 13px/1 var(--display);color:#fff;background:var(--c);padding:6px 9px;border-radius:7px;transform:rotate(-2deg);align-self:start}
.ub-line{font:700 12.5px/1.25 var(--display);color:var(--c);align-self:center}
.ub-grid{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.ub-grid i{border-radius:6px;background:color-mix(in srgb,var(--c) 16%,#e2e8f0) center/cover no-repeat;box-shadow:inset 0 -24px 24px -12px rgba(0,0,0,.35)}
/* ── Pillar: Attributable. One video, its one call to action, the outcome ── */
.pv-attr{padding:0}
.at-story{position:absolute;inset:14px;display:grid;grid-template-columns:116px minmax(0,1fr);gap:16px;opacity:0;transition:opacity .5s}
.at-story.on{opacity:1}
.at-clip{position:relative;border-radius:12px;overflow:hidden;background:#000}
.at-clip img{width:100%;height:100%;object-fit:cover;display:block}
.at-cta{position:absolute;left:6px;right:6px;bottom:6px;font:600 9.5px/1 var(--body);color:#fff;background:#0f766e;padding:6px 7px;border-radius:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.at-story.sk .at-cta{background:#ea580c}
.at-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;justify-content:center;gap:10px}
.at-steps li{display:flex;align-items:center;gap:9px;opacity:0;transform:translateX(10px)}
.at-story.on .at-steps li{animation:atIn .5s var(--ease) both;animation-delay:calc(var(--d) * .7s + .2s)}
@keyframes atIn{to{opacity:1;transform:none}}
.at-steps li>span{flex:0 0 22px;height:22px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.08);color:var(--muted)}
.at-steps li>span .i{width:12px;height:12px}
.at-steps b{display:block;font:600 12.5px/1.25 var(--display);color:#fff}
.at-steps small{font-size:11px;color:var(--muted)}
.at-steps li.win>span{background:#16a34a;color:#fff}
.at-steps li.win b{color:#86efac}
/* ── Pillar: Personal. A feed that reorders the moment a signal arrives ── */
.pv-live{padding:12px 12px 0}
.lv-head{display:flex;justify-content:space-between;align-items:center;font:600 12px/1 var(--display);color:#fff}
.lv-head>span:first-child{display:flex;align-items:center;gap:7px}.lv-head img{width:14px;height:14px}
.lv-on{display:flex;align-items:center;gap:6px;font:500 10.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#86efac}
.lv-on i{width:7px;height:7px;border-radius:50%;background:#22c55e;animation:livepulse 2s ease-out infinite}
.lv-signal{height:26px;margin:9px 0 8px;position:relative}
.lv-signal span{position:absolute;inset:0;display:flex;align-items:center;gap:8px;padding:0 10px;border-radius:8px;background:rgba(249,115,22,.14);border:1px solid rgba(249,115,22,.35);font:500 11.5px/1 var(--body);color:#fed7aa;transition:opacity .35s,transform .35s var(--ease);white-space:nowrap;overflow:hidden}
.lv-signal span::before{content:"Signal";font:600 9.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#fb923c}
.lv-signal.swap span{opacity:0;transform:translateY(-6px)}
.lv-feed{list-style:none;margin:0;padding:0;position:relative;height:160px}
.lv-feed li{position:absolute;left:0;right:0;top:0;height:36px;display:flex;align-items:center;gap:10px;padding:0 8px 0 4px;border-radius:9px;background:rgba(255,255,255,.04);transition:top .7s var(--ease),opacity .5s,background .4s}
.lv-feed li img{width:26px;height:30px;border-radius:6px;object-fit:cover;flex-shrink:0}
.lv-feed li b{display:block;font:600 12px/1.2 var(--display);color:#fff}
.lv-feed li small{display:block;font-size:10.5px;color:#fb923c;min-height:12px}
.lv-feed li.top{background:rgba(249,115,22,.12)}
/* Registered mark after the wordmark */
.brand .tm{align-self:flex-start;margin:3px 0 0 -12px;font:500 9px/1 var(--body);color:rgba(255,255,255,.7)}
/* Solutions carousel */
.ucar{margin-top:44px;position:relative}
.ucar-track{display:grid;grid-auto-flow:column;grid-auto-columns:clamp(270px,29%,340px);gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:2px;padding:2px 2px 6px;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 60px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 60px),transparent)}
.ucar-track::-webkit-scrollbar{display:none}
.ucar.at-end .ucar-track{-webkit-mask-image:none;mask-image:none}
.ucc{scroll-snap-align:start;display:flex;flex-direction:column;border-radius:20px;overflow:hidden;background:var(--surface);border:1px solid var(--line);transition:border-color .3s,transform .4s var(--ease)}
.ucc:hover{transform:translateY(-4px)}
.ucc.sk:hover{border-color:rgba(249,115,22,.55)}.ucc.so:hover{border-color:rgba(232,121,249,.55)}
.ucc-stage{position:relative;height:310px;overflow:hidden;display:flex;justify-content:center;padding-top:30px;-webkit-mask-image:linear-gradient(180deg,#000 72%,transparent);mask-image:linear-gradient(180deg,#000 72%,transparent)}
.ucc.sk .ucc-stage{background:radial-gradient(80% 90% at 50% 100%,rgba(249,115,22,.32),transparent 70%),linear-gradient(180deg,#120a05,#0c0c11)}
.ucc.so .ucc-stage{background:radial-gradient(80% 90% at 50% 100%,rgba(232,121,249,.28),rgba(99,102,241,.12) 45%,transparent 72%),linear-gradient(180deg,#0e0b18,#0c0c11)}
.ucc-stage .dphone{--pw:250px;transition:transform .6s var(--ease)}
.ucc:hover .ucc-stage .dphone{transform:translateY(-8px)}
.ucc-body{display:flex;flex-direction:column;gap:10px;padding:22px 24px 24px;flex:1}
.ucc-kicker{display:inline-flex;align-items:center;gap:8px;font:500 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.ucc-kicker .dot{width:8px;height:8px;box-shadow:none}
.ucc-body p{color:var(--muted);font-size:15px}
.ucc-body .arrow-link{margin-top:auto;padding-top:6px}
.ucar-ctl{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:22px}
.ucar-btn{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:var(--surface);border:1px solid var(--line-2);color:#fff;cursor:pointer;transition:background .2s,opacity .2s}
.ucar-btn:hover{background:var(--surface-2)}.ucar-btn[disabled]{opacity:.35;cursor:default}
.ucar-btn .i{width:16px;height:16px}
.ucar-dots{display:flex;gap:6px}.ucar-dots i{width:6px;height:6px;border-radius:50%;background:var(--line-2);transition:width .3s var(--ease),background .3s}
.ucar-dots i.on{width:22px;border-radius:3px;background:#fff}
@media (max-width:640px){.ucar-track{grid-auto-columns:84%}.ucc-stage{height:290px}.ucc-stage .dphone{--pw:236px}}
/* Capture slot: holds the place of a real product screen until it is captured. Never ships. */
.cap-slot{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:10px;width:100%;padding:24px;border-radius:16px;border:1px dashed var(--line-2);background:repeating-linear-gradient(135deg,rgba(255,255,255,.02) 0 12px,transparent 12px 24px),var(--surface);text-align:center}
.cap-slot span{font:500 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.cap-slot b{max-width:60ch;font:500 14px/1.5 var(--body);color:var(--muted)}
.uc-art img{width:100%;height:100%;object-fit:cover;opacity:.95;transition:transform .8s var(--ease)}
.uc:hover .uc-art img{transform:scale(1.06)}
/* Live demo: the band that advertises a demo site, and the chooser on the live-demo page */
.live{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(24px,4vw,48px);align-items:center;padding:clamp(26px,4vw,44px);border-radius:22px;background:linear-gradient(135deg,rgba(249,115,22,.16),var(--surface) 62%);border:1px solid rgba(249,115,22,.32)}
.live .lead{margin-top:12px}
.live .cta-row{margin-top:22px}
.live-sites{display:flex;flex-direction:column;gap:12px}
.live-site{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 18px;border-radius:14px;background:rgba(0,0,0,.45);border:1px solid var(--line);transition:border-color .25s,transform .3s var(--ease)}
.live-site:hover{border-color:rgba(249,115,22,.55);transform:translateY(-2px)}
.live-site b{display:block;font:600 16px/1.3 var(--display)}
.live-site span{display:block;margin-top:3px;font-size:13.5px;color:var(--muted)}
.live-url{flex-shrink:0;display:inline-flex;align-items:center;gap:7px;height:28px;padding:0 11px;border-radius:999px;background:rgba(255,255,255,.06);font:500 12px/1 var(--mono);color:#e4e4e7;white-space:nowrap}
.live-url i{width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 0 rgba(34,197,94,.6);animation:livepulse 2s ease-out infinite}
@keyframes livepulse{0%{box-shadow:0 0 0 0 rgba(34,197,94,.55)}80%,100%{box-shadow:0 0 0 7px rgba(34,197,94,0)}}
.lchoices{border:0;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.lchoice em{font-size:13.5px}
@media (max-width:760px){.lchoices{grid-template-columns:minmax(0,1fr)}}
.lchoices legend{margin-bottom:10px}
.lchoice{position:relative;display:block;cursor:pointer}
.lchoice input{position:absolute;opacity:0;pointer-events:none}
.lchoice>span{display:flex;flex-direction:column;gap:6px;height:100%;padding:16px 18px;border-radius:14px;background:var(--surface-2);border:1px solid var(--line-2);transition:border-color .2s,background .2s}
.lchoice small{font:500 11px/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--orange-soft)}
.lchoice b{font:600 17px/1.3 var(--display);color:#fff}
.lchoice em{font-style:normal;font-size:14px;line-height:1.5;color:var(--muted)}
.lchoice input:checked+span{border-color:var(--orange);background:linear-gradient(160deg,rgba(249,115,22,.12),var(--surface-2) 60%)}
.lchoice input:focus-visible+span{outline:2px solid var(--orange);outline-offset:3px}
@media (max-width:860px){.live{grid-template-columns:minmax(0,1fr)}.lchoices{grid-template-columns:minmax(0,1fr)}}
@media (max-width:560px){.live-site{flex-direction:column;align-items:flex-start}}
/* Home H1 rotating phrase. All phrases share one grid cell, and the invisible ::before
   holds the longest one, so the line never changes width. */
.rot{display:inline-grid;vertical-align:bottom;white-space:nowrap;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.rot::before{content:"learns from.";grid-area:1/1;visibility:hidden}
.rot-w{grid-area:1/1;opacity:0;transform:translateY(.45em);transition:opacity .45s var(--ease),transform .45s var(--ease)}
.rot-w.is-on{opacity:1;transform:none}
.rot-w.is-off{opacity:0;transform:translateY(-.45em)}
.grad-text-o{background:var(--grad-o);-webkit-background-clip:text;background-clip:text;color:transparent}

/* Type scale */
.eyebrow{font:600 12px/1.5 var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--indigo-soft)}
.eyebrow.o{color:var(--orange-soft)} .eyebrow.f{color:var(--fuchsia)}
.h1{font:700 clamp(36px,5.2vw,58px)/1.08 var(--display);letter-spacing:-.035em;text-wrap:balance}
.h1-sub{font:700 clamp(32px,4.4vw,48px)/1.1 var(--display);letter-spacing:-.03em;text-wrap:balance}
.h2{font:700 clamp(28px,3.4vw,40px)/1.15 var(--display);letter-spacing:-.025em;text-wrap:balance}
.h3{font:700 clamp(20px,2vw,24px)/1.3 var(--display);letter-spacing:-.015em;text-wrap:balance}
.lead{font-size:clamp(16px,1.5vw,18px);line-height:1.6;color:var(--muted);max-width:62ch}
.small{font-size:14px;color:var(--muted)}
.center{text-align:center}
.center .lead{margin-inline:auto}

/* Header */
.hdr{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:rgba(0,0,0,.82);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.hdr .wrap{height:64px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:flex;align-items:center;gap:9px}
.brand .word{width:84px;height:18px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 81.793 17'%3E%3Cg fill='%23fff'%3E%3Cpath d='M77.846 16.999 73.77 11.881v5.118h-3.036V.953h3.036v9.129l4.033-5.096h3.946l-5.29 6.028 5.334 5.985Z'/%3E%3Cpath d='M64.14 4.813c1.431 0 2.587.456 3.47 1.366.881.897 1.322 2.154 1.322 3.773v7.047h-3.035v-6.635c0-.954-.239-1.684-.716-2.19-.478-.52-1.128-.78-1.952-.78-.839 0-1.503.26-1.995.78-.477.506-.716 1.236-.716 2.19v6.635h-3.035V4.987h3.035v1.496a4.25 4.25 0 0 1 1.540-1.214 4.8 4.8 0 0 1 2.082-.456Z'/%3E%3Cpath d='M54.071 3.556c-.535 0-.983-.166-1.345-.499a1.7 1.7 0 0 1-.52-1.279c0-.506.173-.925.52-1.258.362-.347.81-.52 1.345-.52s.975.173 1.322.52c.362.333.542.752.542 1.258s-.18.932-.542 1.279c-.347.333-.787.499-1.322.499Zm1.496 1.431V17h-3.036V4.987Z'/%3E%3Cpath d='M50.617.953v16.046h-3.036V.953Z'/%3E%3Cpath d='m43.115 16.999-4.077-5.118v5.118h-3.036V.953h3.036v9.129l4.033-5.096h3.947l-5.291 6.028 5.334 5.985Z'/%3E%3Cpath d='M29.408 4.813c1.431 0 2.587.456 3.469 1.366.882.897 1.323 2.154 1.323 3.773v7.047h-3.036v-6.635c0-.954-.238-1.684-.715-2.19-.477-.52-1.128-.78-1.952-.78-.838 0-1.503.26-1.995.78-.477.506-.715 1.236-.715 2.19v6.635h-3.036V4.987h3.036v1.496a4.25 4.25 0 0 1 1.539-1.214 4.8 4.8 0 0 1 2.082-.456Z'/%3E%3Cpath d='M19.339 3.556c-.535 0-.983-.166-1.345-.499a1.7 1.7 0 0 1-.52-1.279c0-.506.173-.925.52-1.258.362-.347.81-.52 1.345-.52s.976.173 1.322.52c.362.333.543.752.543 1.258s-.181.932-.543 1.279c-.346.333-.787.499-1.322.499Zm1.496 1.431V17h-3.036V4.987Z'/%3E%3Cpath d='M15.885.953v16.046h-3.036V.953Z'/%3E%3Cpath d='M8.587 9.236c.853.159 1.554.585 2.103 1.279s.824 1.489.824 2.385c0 .81-.202 1.526-.607 2.147-.39.607-.961 1.084-1.713 1.431s-1.641.521-2.667.521H0V1.863h6.245c1.026 0 1.908.167 2.645.499.752.333 1.316.795 1.692 1.388.39.593.585 1.265.585 2.016 0 .882-.238 1.619-.715 2.212-.463.593-1.085 1.012-1.865 1.258ZM3.036 8.108h2.775c.723 0 1.28-.159 1.670-.477.39-.332.585-.802.585-1.409s-.195-1.077-.585-1.41c-.39-.332-.947-.498-1.670-.498H3.036Zm3.057 6.419c.737 0 1.308-.174 1.713-.521.419-.347.629-.838.629-1.474 0-.651-.217-1.157-.651-1.518-.433-.376-1.019-.564-1.756-.564H3.036v4.077Z'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat}
.orb{width:30px;height:30px;flex-shrink:0}
.nav{display:flex;align-items:center;gap:2px}
.nav>a,.nav .dd>button,.nav .dd>a{height:36px;padding:0 13px;border-radius:8px;display:flex;align-items:center;gap:6px;font:400 14px/1 var(--display);color:rgba(255,255,255,.65);background:none;border:0;cursor:pointer;transition:color .2s,background .2s;white-space:nowrap}
.nav>a:hover,.nav .dd:hover>button,.nav .dd:hover>a,.nav>a.on,.nav .dd>button.on,.nav .dd>a.on{color:#fff;background:rgba(255,255,255,.06)}
.dd{position:relative}
.dd .i{width:12px;height:12px;transition:transform .3s var(--ease)}
.dd:hover .i,.dd:focus-within .i{transform:rotate(180deg)}
.menu{position:absolute;top:calc(100% + 10px);left:50%;transform:translate(-50%,-6px);width:520px;display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:10px;border-radius:18px;background:#111116;border:1px solid var(--line);box-shadow:0 24px 60px rgba(0,0,0,.6);opacity:0;visibility:hidden;transition:opacity .2s var(--ease),transform .2s var(--ease),visibility .2s}
.menu::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}
.dd:hover .menu,.dd:focus-within .menu{opacity:1;visibility:visible;transform:translate(-50%,0)}
.menu h6{margin:0;padding:10px 12px 6px;font:500 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.menu a{display:block;padding:9px 12px;border-radius:10px;transition:background .2s}
.menu a b{display:block;font:500 14px/1.4 var(--body);color:#e4e4e7}
.menu a span{display:block;font-size:12.5px;line-height:1.4;color:var(--dim)}
.menu a:hover{background:rgba(255,255,255,.05)}
.menu a.menu-all{grid-column:1/-1;display:flex;align-items:center;gap:6px;margin-top:4px;padding:12px;border-top:1px solid var(--line);border-radius:0 0 10px 10px;font:500 13.5px/1.2 var(--body);color:#e4e4e7}
.menu a.menu-all .i{width:14px;height:14px;transform:none}
.hdr-r{display:flex;align-items:center;gap:10px}
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 20px;border-radius:10px;font:500 15px/1 var(--body);white-space:nowrap;cursor:pointer;border:0;transition:transform .25s var(--ease),box-shadow .25s,background .25s,filter .25s}
.btn .i{width:16px;height:16px}
.btn-w{background:#fff;color:#000}.btn-w:hover{background:#e4e4e7}
.btn-g{background:var(--grad);color:#fff}.btn-g:hover{box-shadow:0 8px 28px rgba(168,85,247,.35);transform:translateY(-2px)}
.btn-o{background:var(--grad-o);color:#1a0d00;font-weight:600}.btn-o:hover{box-shadow:0 8px 28px rgba(249,115,22,.35);transform:translateY(-2px)}
.btn-q{background:rgba(255,255,255,.06);color:#e4e4e7;box-shadow:inset 0 0 0 1px var(--line)}.btn-q:hover{background:rgba(255,255,255,.1)}
.btn-sm{height:36px;padding:0 16px;font-size:14px;border-radius:8px}
.burger{display:none;width:40px;height:40px;border-radius:10px;align-items:center;justify-content:center;background:rgba(255,255,255,.06);border:0;cursor:pointer}
.mnav{position:fixed;inset:0;z-index:70;background:#000;padding:calc(env(safe-area-inset-top,0px) + 16px) max(20px,env(safe-area-inset-right,0px)) 24px max(20px,env(safe-area-inset-left,0px));overflow-y:auto}
.mnav-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.mnav a{display:block;padding:13px 0;font:400 18px/1.3 var(--body);color:#d4d4d8;border-bottom:1px solid var(--line)}
.mnav small{display:block;padding:18px 0 4px;font:500 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.mnav .sub{padding-left:14px;font-size:16px;color:var(--muted)}
/* solutions in the phone menu: every audience in a two-column grid, so eight read at a glance */
.mnav .mgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:8px 0 6px}
.mnav .mgrid a{display:flex;align-items:center;min-height:50px;padding:10px 13px;border:1px solid var(--line);border-radius:12px;background:var(--surface);font-size:15px;line-height:1.25;color:#e4e4e7}
.mnav .btn{width:100%;margin-top:22px}

/* Sections */
.sec{padding-block:clamp(72px,9vw,120px)}
.sec.tight{padding-block:clamp(48px,6vw,80px)}
.sec-head{display:flex;flex-direction:column;gap:12px}
.sec-head.center{align-items:center}
.card{position:relative;border-radius:16px;background:var(--surface);border:1px solid var(--line);padding:28px}
.ico{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:rgba(99,102,241,.12);color:var(--indigo-soft)}
.ico.o{background:rgba(249,115,22,.12);color:var(--orange-soft)}
.ico.f{background:rgba(232,121,249,.12);color:var(--fuchsia)}
.ico.t{background:rgba(45,212,191,.12);color:var(--teal)}
.arrow-link{display:inline-flex;align-items:center;gap:6px;font:500 15px/1.4 var(--body);transition:gap .3s var(--ease)}
.arrow-link .i{width:16px;height:16px;opacity:.7}
.arrow-link:hover{gap:10px}
.arrow-link.o{color:var(--orange-soft)} .arrow-link.f{color:var(--fuchsia)} .arrow-link.w{color:#fff}
.grid{display:grid;gap:20px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.feat{display:flex;flex-direction:column;gap:14px}
.feat p{color:var(--muted)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;height:28px;padding:0 12px;border-radius:999px;background:rgba(255,255,255,.06);font:500 12.5px/1 var(--body);color:#e4e4e7;white-space:nowrap}
.chip.o{box-shadow:inset 0 0 0 1px rgba(249,115,22,.35)} .chip.f{box-shadow:inset 0 0 0 1px rgba(232,121,249,.35)}
.tag{display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:6px;background:rgba(255,255,255,.05);font:500 12px/1 var(--mono);color:var(--muted)}
.ticks{display:flex;flex-direction:column;gap:12px}
.ticks li{display:flex;gap:12px;align-items:flex-start;color:#d4d4d8}
.ticks .i{width:18px;height:18px;margin-top:3px;color:var(--indigo-soft)}
.ticks.o .i{color:var(--orange-soft)} .ticks.f .i{color:var(--fuchsia)}

/* Hero */
.hero{padding-block:clamp(48px,7vw,96px) clamp(56px,7vw,96px)}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:48px;align-items:center}
.hero-l{display:flex;flex-direction:column;gap:26px}
.badge{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 14px;border-radius:999px;background:rgba(255,255,255,.05);font:500 12.5px/1 var(--body);color:var(--muted)}
.badge .i{width:16px;height:16px;color:var(--ok)}
.hero .lead{font-size:clamp(16px,1.6vw,19px)}
.hero .lead b{color:#fff;font-weight:500}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.routes{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.route{display:flex;flex-direction:column;gap:6px;padding:16px 18px;border-radius:14px;background:var(--surface);border:1px solid var(--line);transition:border-color .25s,transform .3s var(--ease)}
.route:hover{transform:translateY(-2px)}
.route.sk:hover{border-color:rgba(249,115,22,.55)} .route.so:hover{border-color:rgba(232,121,249,.55)}
.route small{font:500 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase}
.route.sk small{color:var(--orange-soft)} .route.so small{color:var(--fuchsia)}
.route b{font:600 16px/1.35 var(--display);letter-spacing:-.01em}
.route span{display:flex;align-items:center;gap:6px;font-size:13.5px;color:var(--muted)}
.route span .i{width:14px;height:14px}
.trust-line{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.trust-line small{font:500 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.trust-line strong{font:700 20px/1 var(--display);letter-spacing:-.02em;color:rgba(255,255,255,.75)}

/* Phone mockups (drawn, no media) */
.stage{position:relative;display:flex;justify-content:center;align-items:center;min-height:500px}
.stage::before{content:"";position:absolute;inset:8% 6%;background:radial-gradient(closest-side,rgba(99,102,241,.25),transparent),radial-gradient(closest-side at 30% 70%,rgba(249,115,22,.18),transparent);filter:blur(30px);z-index:0}
.phone{position:relative;z-index:1;width:clamp(170px,19vw,236px);aspect-ratio:9/19;max-width:100%;border-radius:34px;padding:7px;background:#07070b;border:1px solid var(--line-2);box-shadow:0 40px 80px rgba(0,0,0,.65)}
.phone.a{transform:rotate(-5deg) translateX(18px)}
.phone.b{transform:rotate(5deg) translate(-18px,36px)}
.screen{position:relative;height:100%;border-radius:27px;overflow:hidden;background:#111}
.screen::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:34%;height:16px;background:#07070b;border-radius:0 0 12px 12px;z-index:5}
.vid{position:absolute;inset:0;overflow:hidden}
.vid i{position:absolute;border-radius:50%;filter:blur(26px);opacity:.9;animation:drift 9s ease-in-out infinite alternate}
.sk-vid{background:linear-gradient(170deg,#2a1406,#120a05 60%,#050302)}
.sk-vid i:nth-child(1){width:70%;height:40%;left:-10%;top:12%;background:#f97316}
.sk-vid i:nth-child(2){width:60%;height:35%;right:-15%;top:40%;background:#fbbf24;animation-delay:-3s}
.sk-vid i:nth-child(3){width:50%;height:30%;left:20%;top:62%;background:#b45309;animation-delay:-6s}
.so-vid{background:linear-gradient(170deg,#140f2e,#0a0718 60%,#040309)}
.so-vid i:nth-child(1){width:75%;height:42%;left:-12%;top:10%;background:#6366f1}
.so-vid i:nth-child(2){width:60%;height:36%;right:-18%;top:38%;background:#e879f9;animation-delay:-4s}
.so-vid i:nth-child(3){width:55%;height:30%;left:15%;top:64%;background:#8b5cf6;animation-delay:-7s}
@keyframes drift{0%{transform:translate(0,0) scale(1)}100%{transform:translate(12%,-8%) scale(1.15)}}
.scr-top{position:absolute;top:26px;left:12px;right:12px;z-index:3;display:flex;justify-content:space-between;align-items:center}
.ws{display:flex;align-items:center;gap:6px;height:24px;padding:0 9px 0 4px;border-radius:999px;background:rgba(0,0,0,.4);backdrop-filter:blur(6px);font:600 10px/1 var(--body);color:#fff}
.ws em{width:16px;height:16px;border-radius:50%;display:block}
.sk-vid~.scr-top .ws em{background:var(--grad-o)} .so-vid~.scr-top .ws em{background:var(--grad)}
.scr-top .mode{white-space:nowrap;font:500 9px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.7)}
.rail{position:absolute;right:9px;bottom:122px;z-index:3;display:flex;flex-direction:column;gap:12px;align-items:center}
.rail span{display:flex;flex-direction:column;align-items:center;gap:2px;font:500 8.5px/1 var(--body);color:rgba(255,255,255,.85)}
.rail .i{width:18px;height:18px;color:#fff}
.cap{position:absolute;left:12px;right:44px;bottom:86px;z-index:3;display:flex;flex-direction:column;gap:6px}
.cap b{font:700 13px/1.25 var(--display);color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.5)}
.cap span{font:400 10px/1.35 var(--body);color:rgba(255,255,255,.8)}
.cta-pill{position:absolute;left:12px;right:12px;bottom:42px;z-index:3;height:32px;border-radius:9px;display:flex;align-items:center;justify-content:space-between;padding:0 10px;font:600 11px/1 var(--body);color:#fff;background:rgba(255,255,255,.14);backdrop-filter:blur(8px)}
.cta-pill .i{width:13px;height:13px}
.prog{position:absolute;left:12px;right:12px;bottom:28px;z-index:3;height:3px;border-radius:3px;background:rgba(255,255,255,.2);overflow:hidden}
.prog i{display:block;height:100%;width:0;border-radius:3px;animation:prog 7s linear infinite}
.sk-vid~.prog i{background:var(--grad-o)} .so-vid~.prog i{background:var(--grad)}
@keyframes prog{to{width:100%}}
.quiz{position:absolute;left:10px;right:10px;bottom:80px;z-index:4;border-radius:14px;padding:12px;background:rgba(10,8,6,.86);backdrop-filter:blur(10px);border:1px solid rgba(249,115,22,.3);animation:quiz 7s var(--ease) infinite}
.quiz small{font:500 8.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--orange-soft)}
.quiz b{display:block;margin-top:6px;font:600 11.5px/1.3 var(--display);color:#fff}
.quiz ol{margin-top:8px;display:flex;flex-direction:column;gap:5px}
.quiz li{height:24px;border-radius:7px;padding:0 8px;display:flex;align-items:center;gap:6px;font:500 10px/1 var(--body);color:#e4e4e7;background:rgba(255,255,255,.07)}
.quiz li.ok{background:rgba(34,197,94,.18);box-shadow:inset 0 0 0 1px rgba(34,197,94,.5)}
.quiz li .i{width:12px;height:12px;color:var(--ok)}
@keyframes quiz{0%,38%{opacity:0;transform:translateY(16px)}48%,90%{opacity:1;transform:none}100%{opacity:0;transform:translateY(8px)}}
.sk-cap{animation:capfade 7s var(--ease) infinite}
@keyframes capfade{0%,36%{opacity:1}46%,92%{opacity:0}100%{opacity:1}}
.tabsbar{position:absolute;left:0;right:0;bottom:0;height:22px;z-index:3;display:flex;justify-content:space-around;align-items:center;background:rgba(0,0,0,.4)}
.tabsbar i{width:14px;height:3px;border-radius:2px;background:rgba(255,255,255,.35)}
.tabsbar i:first-child{background:#fff}

/* Shift */
.shift{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:56px}
.shift .card small{font:600 12px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
.shift .card.new{background:linear-gradient(140deg,rgba(99,102,241,.14),rgba(12,12,17,.9) 60%);border-color:rgba(99,102,241,.35)}
.shift .card.new small{color:var(--indigo-soft)}
.shift ul{margin-top:20px;display:flex;flex-direction:column;gap:16px}
.shift li{display:flex;gap:12px;font-size:17px;line-height:1.5;color:var(--dim)}
.shift .new li{color:#e4e4e7}
.shift li .i{margin-top:3px;width:18px;height:18px}
.shift .new li .i{color:var(--indigo-soft)}

/* Workspace cards */
.ws-cards{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:56px}
.wsc{position:relative;display:flex;flex-direction:column;gap:16px;padding:32px;border-radius:18px;overflow:hidden;border:1px solid var(--line);min-height:360px;transition:border-color .3s,transform .4s var(--ease)}
.wsc:hover{transform:translateY(-3px)}
.wsc.sk{background:linear-gradient(210deg,rgba(249,115,22,.26) 0%,rgba(251,146,60,.07) 28%,rgba(0,0,0,0) 70%),var(--surface)}
.wsc.so{background:linear-gradient(150deg,rgba(232,121,249,.26) 0%,rgba(99,102,241,.08) 28%,rgba(0,0,0,0) 70%),var(--surface)}
.wsc.sk:hover{border-color:rgba(249,115,22,.5)} .wsc.so:hover{border-color:rgba(232,121,249,.5)}
.wsc-tag{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.wsc-tag b{font:700 14px/1 var(--display)}
.wsc-tag em{font-style:normal;font-size:13px;color:var(--muted)}
.dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.dot.o{background:var(--orange);box-shadow:0 0 0 4px rgba(249,115,22,.15)}
.dot.f{background:var(--fuchsia);box-shadow:0 0 0 4px rgba(232,121,249,.15)}
.wsc h3{font:700 clamp(26px,2.6vw,32px)/1.15 var(--display);letter-spacing:-.025em}
.wsc p{color:var(--muted);max-width:46ch}
.wsc .arrow-link{margin-top:auto}

/* Pillars */
.pillar h3{margin-top:22px}
.pillar p{margin-top:10px;color:var(--muted)}

/* Runs */
.run{background:linear-gradient(135deg,rgba(99,102,241,.1),rgba(12,12,17,1) 55%)}
.run-top{display:flex;align-items:center;gap:12px}
.run-top small{font:600 12px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--indigo-soft)}
.run h3{margin-top:20px}
.run p{margin-top:10px;color:var(--muted)}
.run .chips{margin-top:20px}
.stack{margin-top:20px;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:20px 26px}
.stack p{color:var(--muted)} .stack p b{color:#fff;font-weight:500}

/* Solutions */
.uc-label{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:52px;font:600 12px/1.4 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.uc-label em{font:400 14px/1.4 var(--body);letter-spacing:0;text-transform:none;font-style:normal;color:var(--dim)}
.uc-grid{margin-top:18px}
.uc{display:flex;flex-direction:column;gap:12px;transition:transform .35s var(--ease),border-color .3s}
.uc:hover{transform:translateY(-3px)}
.uc.sk:hover{border-color:rgba(249,115,22,.5)} .uc.so:hover{border-color:rgba(232,121,249,.5)}
.uc h3{margin-top:8px}
.uc p{color:var(--muted)}
.uc .arrow-link{margin-top:auto;padding-top:8px}

/* Bands */
.band{padding:34px}
.band.monet{background:linear-gradient(150deg,rgba(45,212,191,.14),rgba(12,12,17,1) 50%)}
.band.trust{background:linear-gradient(210deg,rgba(99,102,241,.14),rgba(12,12,17,1) 50%)}
.band h3{margin-top:20px}
.band p{margin-top:10px;color:var(--muted)}
.certs{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.cert{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 14px;border-radius:8px;background:rgba(255,255,255,.05);font:500 13.5px/1 var(--body)}
.cert .i{width:16px;height:16px;color:var(--ok)}
.band .arrow-link{margin-top:20px}

.pband{display:grid;grid-template-columns:1.05fr 1fr;gap:44px;align-items:center;padding:clamp(28px,4.5vw,56px);border-radius:24px;background:linear-gradient(135deg,rgba(99,102,241,.16),rgba(12,12,17,1) 60%);border:1px solid rgba(99,102,241,.28)}
.pband .lead{margin-top:14px}
.modes{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.mode{padding:18px;border-radius:14px;background:rgba(0,0,0,.45);border:1px solid var(--line)}
.mode .i{color:var(--indigo-soft)}
.mode b{display:block;margin-top:10px;font:600 16px/1.3 var(--display)}
.mode span{display:block;margin-top:4px;font-size:14px;color:var(--muted)}

/* Changelog */
.row-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap}
.log{display:flex;flex-direction:column;gap:12px}
.log time{font:500 12px/1 var(--mono);letter-spacing:.06em;color:var(--dim)}
.log h3{font:700 18px/1.35 var(--display)}
.log p{color:var(--muted);font-size:15px}
.log .tag{align-self:flex-start}

/* FAQ */
.faq{max-width:780px;margin:44px auto 0;display:flex;flex-direction:column;gap:12px}
.faq details{border-radius:18px;background:var(--surface);border:1px solid var(--line);transition:border-color .25s}
.faq details[open]{border-color:var(--line-2)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 24px;font:600 clamp(17px,1.8vw,20px)/1.35 var(--display);letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}
.faq summary .pm{position:relative;flex:0 0 32px;height:32px;border-radius:8px;background:#26262c}
.faq summary .pm::before,.faq summary .pm::after{content:"";position:absolute;left:50%;top:50%;width:13px;height:1.6px;background:#fff;transform:translate(-50%,-50%);transition:transform .3s var(--ease),opacity .2s}
.faq summary .pm::after{transform:translate(-50%,-50%) rotate(90deg)}
.faq details[open] .pm::after{transform:translate(-50%,-50%);opacity:0}
.faq details p{padding:0 24px 22px;color:var(--muted);max-width:66ch}

/* Closing */
.closing .h2{font-size:clamp(32px,4.6vw,52px)}
.close-cards{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:52px}
.close-cards .wsc{min-height:0}
.close-cards .cta-row{margin-top:6px}

/* Subpages */
.sub-hero{padding-block:clamp(56px,7vw,96px) clamp(40px,5vw,64px);border-bottom:1px solid var(--line)}
.sub-hero.sk{background:radial-gradient(60% 90% at 85% 0%,rgba(249,115,22,.18),transparent 70%)}
.sub-hero.so{background:radial-gradient(60% 90% at 85% 0%,rgba(232,121,249,.16),transparent 70%)}
.sub-hero.br{background:radial-gradient(60% 90% at 85% 0%,rgba(99,102,241,.18),transparent 70%)}
.sub-hero .wrap{display:flex;flex-direction:column;gap:20px}
.crumb{display:flex;align-items:center;gap:8px;font:500 12px/1 var(--mono);letter-spacing:.06em;color:var(--dim)}
.crumb a:hover{color:#fff}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,64px);align-items:start}
.split>*{min-width:0}
.problem{border-left:2px solid var(--line-2);padding-left:22px;display:flex;flex-direction:column;gap:14px}
.problem p{color:var(--muted)}
.steps{counter-reset:s;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:40px}
.steps li{counter-increment:s;padding:22px;border-radius:14px;background:var(--surface);border:1px solid var(--line);display:flex;flex-direction:column;gap:8px}
.steps b{font:600 16px/1.35 var(--display)}
.steps span{font-size:14.5px;color:var(--muted)}
.facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.facts div{background:var(--surface);padding:20px 22px;display:flex;flex-direction:column;gap:6px}
.facts small{font:500 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.facts b{font:500 16px/1.4 var(--body)}
.note{display:flex;gap:12px;align-items:flex-start;padding:16px 18px;border-radius:12px;background:rgba(99,102,241,.08);border:1px solid rgba(99,102,241,.25);font-size:14.5px;color:#d4d4d8}
.note .i{color:var(--indigo-soft);margin-top:2px}
.plans{display:grid;gap:16px}
.plan{display:flex;flex-direction:column;gap:16px}
.plan.hi{border-color:rgba(249,115,22,.5);background:linear-gradient(180deg,rgba(249,115,22,.08),var(--surface) 40%)}
.plan.hi.so{border-color:rgba(232,121,249,.5);background:linear-gradient(180deg,rgba(232,121,249,.08),var(--surface) 40%)}
.plan h3{font:700 22px/1.2 var(--display)}
.plan .for{font-size:14.5px;color:var(--muted);min-height:44px}
.plan .price{font:700 20px/1 var(--display)}
.plan .price small{display:block;margin-top:6px;font:400 13px/1.3 var(--body);color:var(--dim)}
.plan .ticks{font-size:14.5px}
.plan .ticks li{gap:10px}
.plan .btn{margin-top:auto}
.prod-switch{display:inline-flex;gap:4px;padding:4px;border-radius:12px;background:var(--surface);border:1px solid var(--line)}
.prod-switch button{height:38px;padding:0 18px;border-radius:9px;border:0;background:none;color:var(--muted);font:500 14px/1 var(--body);cursor:pointer}
.prod-switch button[aria-pressed="true"]{background:#fff;color:#000}
.form{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form .full{grid-column:1/-1}
/* Turnstile: out of the grid (no empty row, no extra gap) until Cloudflare shows a challenge (.on, set by site.js) */
.form .ts:not(.on){position:absolute;width:300px}
.form label{display:flex;flex-direction:column;gap:8px;font-size:14px;color:#d4d4d8}
.form input,.form select,.form textarea{height:48px;padding:0 14px;border-radius:10px;border:1px solid var(--line-2);background:var(--surface-2);color:#fff;outline:0;transition:border-color .2s}
.form textarea{height:110px;padding:12px 14px;resize:vertical}
.form input:focus,.form select:focus,.form textarea:focus{border-color:var(--indigo)}
.thanks{padding:20px;border-radius:14px;background:rgba(34,197,94,.08);border:1px solid rgba(34,197,94,.35);color:#d1fae5}
.copy{display:inline-flex;align-items:center;gap:10px;padding:10px 14px;border-radius:10px;background:var(--surface-2);border:1px solid var(--line);font:500 15px/1 var(--mono);user-select:all}
.copy button{border:0;background:rgba(255,255,255,.08);color:#fff;height:28px;padding:0 10px;border-radius:7px;font:500 12px/1 var(--body);cursor:pointer;user-select:none}
.people{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.person b{display:block;font:600 17px/1.3 var(--display)}
.person span{font-size:14px;color:var(--muted)}
.tl{display:flex;flex-direction:column;border-left:1px solid var(--line-2);margin-left:6px}
.tl .log{position:relative;padding:0 0 36px 28px}
.tl .log::before{content:"";position:absolute;left:-6px;top:2px;width:11px;height:11px;border-radius:50%;background:var(--bg);border:2px solid var(--indigo)}

/* Footer */
.foot{background:#08080b;border-top:1px solid var(--line);padding-block:56px 32px}
.foot-top{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(5,minmax(0,1fr));gap:28px}
.foot-about{font-size:14px;color:var(--muted);margin-top:16px;max-width:32ch}
.foot h6{margin:0;font:600 14px/1 var(--display);color:#fff}
.foot ul{margin-top:18px;display:flex;flex-direction:column;gap:12px}
.foot li a{font-size:14px;color:#9a9aa3;transition:color .2s}
.foot li a:hover{color:#fff}
.ai{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}
.ai a{height:34px;padding:0 12px;border-radius:8px;border:1px solid var(--line-2);display:inline-flex;align-items:center;font:500 13px/1 var(--body);color:#d4d4d8;transition:background .2s}
.ai a:hover{background:rgba(255,255,255,.06)}
.foot-bot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:44px;padding-top:22px;border-top:1px solid var(--line);font-size:13.5px;color:var(--dim)}
.foot-bot nav{display:flex;flex-wrap:wrap;gap:10px 18px}.foot-bot nav a{white-space:nowrap}
.foot-bot a:hover{color:#fff}


.seg-hero{display:grid!important;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:40px;align-items:center}
.seg-l{display:flex;flex-direction:column;gap:20px;min-width:0}
.roles{display:flex;align-items:center;gap:10px;font-size:14.5px;color:#d4d4d8}
.roles .i{width:18px;height:18px;color:var(--muted)}
.stage.solo{min-height:460px}
.stage.solo .phone{transform:rotate(3deg)}
.duechip{position:absolute;top:58px;left:12px;z-index:3;height:22px;padding:0 9px;border-radius:999px;display:flex;align-items:center;background:rgba(249,115,22,.9);font:600 9.5px/1 var(--body);color:#1a0d00}
 

.faq.seg{margin-top:36px}
.proof{display:flex;flex-direction:column;gap:10px;background:linear-gradient(135deg,rgba(249,115,22,.1),var(--surface) 55%)}
.proof small{font:500 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--orange-soft)}
.proof strong{font:700 28px/1.1 var(--display);letter-spacing:-.02em}
.proof p{color:#d4d4d8;max-width:70ch}
.g1{grid-template-columns:minmax(0,1fr)}
.tbl{margin-top:28px;overflow-x:auto;border:1px solid var(--line);border-radius:16px}
.tbl table{width:100%;min-width:620px;border-collapse:collapse;font-size:15px}
.tbl th,.tbl td{padding:16px 20px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.tbl tr:last-child th,.tbl tr:last-child td{border-bottom:0}
.tbl thead th{font:500 12px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--dim);background:var(--surface)}
.tbl tbody th{font:600 15px/1.4 var(--display);color:#fff;width:22%}
.tbl td{color:var(--muted)}
.tbl td:last-child{color:#f4f4f5;background:rgba(99,102,241,.06)}
.incl{margin-top:28px;padding:26px 28px;border-radius:16px;background:var(--surface);border:1px solid var(--line)}
.incl .ticks{margin-top:16px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 24px}
/* Pricing: plan tables (one per product), cumulative columns; on phones each row shows where it starts and groups fold */
.ptbl{max-width:980px;margin:0 auto}
.ptbl table{width:100%;border-collapse:separate;border-spacing:0;font-size:14.5px}
.ptbl th,.ptbl td{padding:12px 16px;border-top:1px solid var(--line);text-align:center;vertical-align:middle}
.ptbl thead th{position:sticky;top:65px;z-index:2;border-top:0;padding:14px 16px;background:var(--bg);box-shadow:inset 0 -1px 0 var(--line-2);font:600 15px/1.2 var(--display);color:#fff}
.ptbl.sk thead th.hi{color:var(--orange-soft)}
.ptbl.so thead th.hi{color:#f0abfc}
.ptbl tbody th{width:46%;text-align:left;font:400 14.5px/1.45 var(--body);color:#d4d4d8}
.ptbl td.hi{background:rgba(255,255,255,.025)}
.ptbl .grp th{padding:26px 16px 10px;border-top:0;font:500 11.5px/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.ptbl td .i{width:18px;height:18px;vertical-align:middle;color:var(--indigo-soft)}
.ptbl.sk td .i{color:var(--orange-soft)}
.ptbl.so td .i{color:var(--fuchsia)}
.ptbl td.no::before{content:"";display:inline-block;width:10px;height:1.5px;vertical-align:middle;background:var(--line-2)}
@media (max-width:640px){
.ptbl thead{display:none}
.ptbl tr{position:relative;display:flex;align-items:baseline;justify-content:space-between;gap:14px;padding:11px 2px;border-top:1px solid var(--line)}
.ptbl tbody th{width:auto;padding:0;border:0;font-size:14px}
.ptbl td{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);padding:0;border:0}
.ptbl tr[data-from]::after{content:attr(data-from);flex:none;font-size:12.5px;color:var(--muted);white-space:nowrap}
.ptbl tr.grp{padding:0;border-top:0}
.ptbl .grp th{flex:1;padding:18px 2px 8px}
.ptbl tbody.fold .grp th{position:relative;padding:16px 28px 14px 2px;border-top:1px solid var(--line);cursor:pointer;-webkit-tap-highlight-color:transparent}
.ptbl tbody.fold:first-of-type .grp th{border-top:0}
.ptbl tbody.fold .grp th::after{content:"";position:absolute;top:19px;right:8px;width:7px;height:7px;border-right:1.5px solid var(--dim);border-bottom:1.5px solid var(--dim);transform:rotate(45deg);transition:transform .25s var(--ease)}
.ptbl tbody.fold.open .grp th::after{top:23px;transform:rotate(-135deg)}
.ptbl tbody.fold:not(.open) tr:not(.grp){display:none}
.ptbl .grp th:focus-visible{outline:2px solid var(--indigo-soft);outline-offset:2px}
}
@media (max-width:1080px){.seg-hero{grid-template-columns:minmax(0,1fr)}.stage.solo{min-height:420px}}
@media (max-width:560px){.incl .ticks{grid-template-columns:minmax(0,1fr)}.stage.solo{min-height:360px}}


/* ── Visual system: drawn product surfaces ── */
.vis{position:relative}
.win{border-radius:14px;border:1px solid var(--line-2);background:#09090e;overflow:hidden;box-shadow:0 30px 70px rgba(0,0,0,.55);text-align:left}
.win-bar{height:32px;display:flex;align-items:center;gap:10px;padding:0 12px;border-bottom:1px solid var(--line);background:#101017}
.dots{display:flex;gap:5px}.dots i{width:8px;height:8px;border-radius:50%;background:#2a2a33}
.url{flex:1;min-width:0;height:20px;border-radius:6px;background:rgba(255,255,255,.05);display:flex;align-items:center;gap:6px;padding:0 8px;font:500 10.5px/1 var(--mono);color:var(--muted);white-space:nowrap;overflow:hidden}
.url .i{width:11px;height:11px;color:var(--ok)}
.win-body{padding:14px;position:relative}
.tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.tiles.t3{grid-template-columns:repeat(3,minmax(0,1fr))}
.tiles.t5{grid-template-columns:repeat(5,minmax(0,1fr))}
.tile{position:relative;aspect-ratio:9/15;border-radius:10px;overflow:hidden;background:var(--tg);min-width:0}
.tile::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.7))}
.tile b{position:absolute;left:7px;right:7px;bottom:7px;z-index:2;font:600 9.5px/1.25 var(--display);color:#fff}
.tile .dur{position:absolute;top:6px;right:6px;z-index:2;font:500 8.5px/1 var(--mono);color:rgba(255,255,255,.85);background:rgba(0,0,0,.35);padding:3px 5px;border-radius:4px}
.tile .pl{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;width:22px;height:22px;border-radius:50%;background:rgba(0,0,0,.35);display:grid;place-items:center}
.tile .pl .i{width:10px;height:10px;color:#fff;margin-left:1px}
.tile.ad{box-shadow:inset 0 0 0 2px var(--teal)}
.tile .adl{position:absolute;top:6px;left:6px;z-index:2;font:600 8px/1 var(--body);color:#062b26;background:var(--teal);padding:3px 6px;border-radius:4px}
.t1{--tg:radial-gradient(circle at 30% 25%,#fb923c 0,transparent 55%),radial-gradient(circle at 75% 70%,#b45309 0,transparent 60%),#1a0c04}
.t2{--tg:radial-gradient(circle at 70% 20%,#fbbf24 0,transparent 50%),radial-gradient(circle at 25% 75%,#ea580c 0,transparent 60%),#170b03}
.t3{--tg:radial-gradient(circle at 40% 30%,#fdba74 0,transparent 45%),radial-gradient(circle at 70% 80%,#9a3412 0,transparent 60%),#120804}
.t4{--tg:radial-gradient(circle at 30% 25%,#818cf8 0,transparent 55%),radial-gradient(circle at 75% 70%,#4338ca 0,transparent 60%),#0b0a1f}
.t5{--tg:radial-gradient(circle at 65% 25%,#e879f9 0,transparent 50%),radial-gradient(circle at 25% 75%,#7e22ce 0,transparent 60%),#140a1e}
.t6{--tg:radial-gradient(circle at 35% 35%,#a78bfa 0,transparent 50%),radial-gradient(circle at 75% 75%,#db2777 0,transparent 60%),#120818}
.t7{--tg:radial-gradient(circle at 35% 30%,#2dd4bf 0,transparent 50%),radial-gradient(circle at 70% 75%,#0f766e 0,transparent 60%),#04120f}
.t8{--tg:radial-gradient(circle at 60% 30%,#38bdf8 0,transparent 50%),radial-gradient(circle at 30% 75%,#6366f1 0,transparent 60%),#060c1c}
.st{display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:999px;font:600 10px/1 var(--body);white-space:nowrap}
.st.ok,.st.appr,.st.live{background:rgba(34,197,94,.14);color:#86efac}
.st.due,.st.rev{background:rgba(251,191,36,.14);color:#fcd34d}
.st.late,.st.blk{background:rgba(244,63,94,.14);color:#fda4af}
.st.draft{background:rgba(255,255,255,.08);color:var(--muted)}
.vlabel{font:500 10px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
/* hero floating chips */
.float{position:absolute;z-index:3;display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;background:rgba(14,14,20,.88);backdrop-filter:blur(10px);border:1px solid var(--line-2);box-shadow:0 18px 40px rgba(0,0,0,.5);font-size:12px;line-height:1.3;color:#e4e4e7;animation:bob 6s ease-in-out infinite}
.float .ico{width:30px;height:30px;border-radius:9px}
.float .ico .i{width:15px;height:15px}
.float b{display:block;font:600 12px/1.3 var(--display);color:#fff}
.float small{font-size:11px;color:var(--muted)}
.f1{left:0;top:16%;animation-delay:-1s}.f2{right:0;top:6%;animation-delay:-3s}.f3{right:2%;bottom:6%;animation-delay:-2s}
@keyframes bob{50%{transform:translateY(-6px)}}
/* why now */
.docs{position:relative;height:178px;margin-top:22px}
.shift .docs{height:300px}
.shift .docs .doc:nth-child(1){top:44px}.shift .docs .doc:nth-child(2){top:104px}.shift .docs .doc:nth-child(3){top:162px}
.doc{position:absolute;width:min(330px,74%);box-shadow:0 10px 24px rgba(0,0,0,.45);padding:12px 14px;border-radius:10px;background:#15151c;border:1px solid var(--line);display:flex;gap:10px;align-items:center;color:var(--dim);font-size:12.5px}
.doc .i{width:18px;height:18px;color:#52525b}
.doc b{display:block;color:#a1a1aa;font-weight:500;font-size:13px}
.doc:nth-child(1){left:0;top:0;transform:rotate(-2deg);z-index:1}.doc:nth-child(2){left:16%;top:60px;transform:rotate(1.5deg);z-index:2}.doc:nth-child(3){left:6%;top:118px;transform:rotate(-1deg);z-index:3}
.new-feed{margin-top:22px}
.new-feed .tiles{max-width:420px}
/* workspace card strip */
.ws-strip{margin-top:4px;max-width:360px}
/* pillar visuals */
.pv{height:170px;border-radius:12px;background:#08080d;border:1px solid var(--line);overflow:hidden;position:relative;padding:12px}
.pv .win{box-shadow:none}
.pv-owned .win-body{padding:10px}
.ev{display:flex;flex-direction:column;gap:7px}
.ev li{display:flex;align-items:center;gap:8px;font-size:12px;color:#d4d4d8}
.ev li .i{width:14px;height:14px;color:var(--ok)}
.ev li em{font-style:normal;margin-left:auto;font:500 10px/1 var(--mono);color:var(--dim)}
.ev li.cert{color:#fff;font-weight:600}
.ev li.cert .i{color:#fbbf24}
.pers{display:grid;grid-template-columns:1fr 1fr;gap:10px;height:100%}
.pers>div{display:flex;flex-direction:column;gap:6px;min-width:0}
.pers .tiles{grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}
.pers .tile{border-radius:6px}
.pers .tile .pl{display:none}
.ai-tag{position:absolute;right:10px;bottom:10px;display:flex;align-items:center;gap:6px;height:22px;padding:0 9px;border-radius:999px;background:rgba(99,102,241,.18);color:#c7d2fe;font:600 10px/1 var(--body)}
.ai-tag .i{width:12px;height:12px}
/* domain/embed windows */
.card.run{display:flex;flex-direction:column;gap:0}
.run .win{margin-top:auto}
.run .chips{margin-bottom:24px}
.dhead{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.dlogo{display:flex;align-items:center;gap:7px;font:700 12px/1 var(--display);color:#fff}
.dlogo i{width:16px;height:16px;border-radius:50%;background:var(--grad)}
.dtabs{display:flex;gap:6px}
.dtabs span{height:20px;padding:0 8px;border-radius:6px;font:500 10px/20px var(--body);color:var(--muted);background:rgba(255,255,255,.04)}
.dtabs span:first-child{background:#fff;color:#000}
.dsearch{width:70px;height:20px;border-radius:6px;background:rgba(255,255,255,.05);display:flex;align-items:center;padding:0 6px;color:var(--dim)}
.dsearch .i{width:11px;height:11px}
.site-lines{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
.site-lines i{display:block;height:8px;border-radius:4px;background:rgba(255,255,255,.08)}
.site-lines i:nth-child(1){width:55%;height:14px;background:rgba(255,255,255,.16)}
.site-lines i:nth-child(2){width:80%}.site-lines i:nth-child(3){width:65%}
.emb-label{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;font:600 11px/1 var(--display);color:#fff}
.emb-label small{font:500 9.5px/1 var(--mono);color:var(--dim)}
.rpill{position:absolute;right:12px;bottom:12px;z-index:3;display:flex;align-items:center;gap:7px;height:30px;padding:0 12px 0 6px;border-radius:999px;background:#fff;color:#000;font:600 11px/1 var(--body);box-shadow:0 10px 26px rgba(0,0,0,.5)}
.rs-orb{width:20px;height:20px;border-radius:50%;background:var(--grad);flex-shrink:0}
/* recruitment sheet */
.rsheet{position:absolute;right:12px;bottom:12px;z-index:4;width:min(220px,62%);padding:12px;border-radius:14px;background:#111118;border:1px solid var(--line-2);box-shadow:0 20px 50px rgba(0,0,0,.6);display:flex;flex-direction:column;gap:8px}
.rs-head{display:flex;gap:8px;align-items:center}
.rs-head b{display:block;font:700 12px/1.2 var(--display);color:#fff}
.rs-head small{font-size:10px;color:var(--muted)}
.rsheet p{font-size:10.5px;line-height:1.35;color:var(--muted)}
.rs-t{font:500 9px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.rsheet .tile b{font-size:8px}
.rs-btn{height:28px;border-radius:8px;background:var(--grad);display:grid;place-items:center;font:600 11px/1 var(--body);color:#fff}
.rs-pw{text-align:center;font-size:9px;color:var(--dim)}
/* monetization */
.monet-vis{margin-top:22px;max-width:380px}
/* stack diagram */
.stackd{display:flex;flex-direction:column;gap:10px;margin-top:40px}
.layer{display:grid;grid-template-columns:150px minmax(0,1fr);gap:14px;align-items:stretch}
.layer>small{display:flex;align-items:center;font:500 11px/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.cells{display:grid;gap:10px}
.cells.c2{grid-template-columns:repeat(2,minmax(0,1fr))}.cells.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.cell{padding:16px 18px;border-radius:12px;border:1px solid var(--line);background:var(--surface);display:flex;align-items:center;gap:12px;min-width:0}
.cell .i{color:var(--indigo-soft)}
.cell b{display:block;font:600 15px/1.3 var(--display)}
.cell span{display:block;font-size:13px;color:var(--muted)}
.cell.sk{background:linear-gradient(135deg,rgba(249,115,22,.16),var(--surface) 60%);border-color:rgba(249,115,22,.35)}
.cell.sk .i{color:var(--orange-soft)}
.cell.so{background:linear-gradient(135deg,rgba(232,121,249,.16),var(--surface) 60%);border-color:rgba(232,121,249,.35)}
.cell.so .i{color:var(--fuchsia)}
.cell.eng{background:linear-gradient(135deg,rgba(99,102,241,.14),var(--surface) 60%)}
.cell.base{background:transparent;border-style:dashed}
.cell.base .i{color:var(--ok)}
/* rule editor */
.rules{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:14px}
.rule{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border-radius:10px;background:rgba(255,255,255,.04);border:1px solid var(--line);font-size:12.5px;line-height:1.45;color:#e4e4e7;margin-bottom:8px}
.rule .tg{flex-shrink:0;width:26px;height:15px;border-radius:999px;background:var(--indigo);position:relative;margin-top:2px}
.rule .tg::after{content:"";position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#fff}
.rule.off .tg{background:#3f3f46}.rule.off .tg::after{right:auto;left:2px}
.rule small{display:block;font:500 10px/1.3 var(--mono);color:var(--dim);margin-top:3px}
.prev{padding:12px;border-radius:12px;background:rgba(99,102,241,.06);border:1px solid rgba(99,102,241,.25)}
.prev .vlabel{display:block;margin-bottom:10px}
/* funnel */
.funnel{display:flex;flex-direction:column;gap:9px}
.fn{display:grid;grid-template-columns:150px minmax(0,1fr);gap:12px;align-items:center;font-size:12.5px;color:#d4d4d8}
.fn i{display:block;height:22px;border-radius:6px;background:var(--grad);opacity:.9}
.spark{width:100%;height:70px;margin-top:14px}
/* lms console */
.cons{display:grid;grid-template-columns:120px minmax(0,1fr);gap:14px}
.side{display:flex;flex-direction:column;gap:4px}
.side span{height:26px;border-radius:7px;padding:0 9px;display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--muted)}
.side span .i{width:13px;height:13px}
.side span.on{background:rgba(249,115,22,.14);color:#fed7aa}
.mtab{width:100%;border-collapse:collapse;font-size:11.5px}
.mtab th{text-align:left;font:500 9.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--dim);padding:0 8px 8px;border-bottom:1px solid var(--line)}
.mtab td{padding:9px 8px;border-bottom:1px solid var(--line);color:#d4d4d8;white-space:nowrap}
.mtab tr:last-child td{border-bottom:0}
.mtab td.n{color:#fff;font-weight:500}
.bar{display:block;width:90px;height:6px;border-radius:3px;background:rgba(255,255,255,.08);overflow:hidden}
.bar i{display:block;height:100%;border-radius:3px;background:var(--grad-o)}
.bar.so i{background:var(--grad)}
.tw{overflow-x:auto}
/* rewards + collections */
.rew-bal{display:flex;justify-content:space-between;align-items:flex-end;padding-bottom:12px;border-bottom:1px solid var(--line)}
.rew-bal strong{font:800 30px/1 var(--display);letter-spacing:-.02em}
.rew-bal small{font-size:11px;color:var(--muted)}
.rew-list{display:flex;flex-direction:column;gap:9px;margin-top:12px;font-size:12.5px}
.rew-list li{display:flex;justify-content:space-between;gap:10px;color:#d4d4d8}
.rew-list .p{font:600 12px/1 var(--mono);color:#86efac}.rew-list .m{font:600 12px/1 var(--mono);color:#fda4af}
.rew-btn{margin-top:12px;height:32px;border-radius:8px;background:var(--grad-o);display:grid;place-items:center;font:600 12px/1 var(--body);color:#1a0d00}
.coll li{display:flex;gap:10px;align-items:center;padding:9px 0;border-bottom:1px solid var(--line);font-size:12.5px;color:#d4d4d8}
.coll li:last-child{border-bottom:0}
.coll .num{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font:600 10px/1 var(--mono);background:rgba(255,255,255,.07);color:var(--muted);flex-shrink:0}
.coll li.done .num{background:rgba(34,197,94,.2);color:#86efac}
.coll li.cur{color:#fff;font-weight:500}
.coll li.cur .num{background:var(--orange);color:#1a0d00}
.coll .ja{margin-left:auto;font:500 9.5px/1 var(--mono);color:var(--orange-soft);border:1px solid rgba(249,115,22,.35);padding:3px 6px;border-radius:5px}
/* studio pipeline */
.pipe{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:36px;align-items:stretch}
.pstep{position:relative;padding:16px;border-radius:14px;background:#08080d;border:1px solid var(--line);display:flex;flex-direction:column;gap:12px;min-height:200px}
.pstep:not(:last-child)::after{content:"";position:absolute;right:-12px;top:50%;width:10px;height:10px;border-top:2px solid var(--line-2);border-right:2px solid var(--line-2);transform:translateY(-50%) rotate(45deg);z-index:2}
.pstep .vlabel{color:var(--orange-soft)}
.filelist{display:flex;flex-direction:column;gap:6px}
.filelist span{display:flex;align-items:center;gap:7px;padding:7px 9px;border-radius:8px;background:rgba(255,255,255,.04);font-size:11px;color:var(--muted)}
.filelist .i{width:13px;height:13px}
.appr{display:flex;flex-direction:column;gap:8px}
.appr .tile{max-width:90px}
.appr-btns{display:flex;gap:6px}
.appr-btns span{flex:1;height:26px;border-radius:7px;display:grid;place-items:center;font:600 10.5px/1 var(--body)}
.appr-btns .y{background:rgba(34,197,94,.18);color:#86efac}.appr-btns .n{background:rgba(255,255,255,.06);color:var(--muted)}
/* moderation queue */
.mq li{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}
.mq li:last-child{border-bottom:0}
.mq .tile{border-radius:6px}.mq .tile .pl{display:none}
.mq b{display:block;font:600 12.5px/1.3 var(--display);color:#fff}
.mq small{font-size:11px;color:var(--muted)}
.policy{display:flex;gap:8px;align-items:center;margin-bottom:10px;padding:8px 10px;border-radius:8px;background:rgba(99,102,241,.08);font-size:12px;color:#c7d2fe}
.policy .i{width:14px;height:14px}
/* journey (approval) */
.jr{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:12px}
.jr div{padding:12px;border-radius:10px;background:rgba(255,255,255,.04);border:1px solid var(--line);display:flex;flex-direction:column;gap:8px;font-size:11.5px;color:var(--muted)}
.jr b{font:600 12.5px/1.2 var(--display);color:#fff}
.jr .av{display:flex}
.jr .av i{width:20px;height:20px;border-radius:50%;border:2px solid #09090e;margin-left:-6px;background:var(--grad-o)}
.jr .av i:first-child{margin-left:0}.jr .av i:nth-child(2){background:var(--grad)}.jr .av i:nth-child(3){background:linear-gradient(135deg,#2dd4bf,#0ea5e9)}
/* partner hub */
.hub{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:26px;align-items:center;margin-top:40px}
.hub-core{padding:20px;border-radius:16px;background:linear-gradient(135deg,rgba(99,102,241,.2),var(--surface) 70%);border:1px solid rgba(99,102,241,.4);display:flex;flex-direction:column;gap:12px}
.hub-core b{font:700 18px/1.2 var(--display)}
.hub-core .side span{color:#d4d4d8}
.hub-clients{display:flex;flex-direction:column;gap:12px;position:relative}
.hub-clients .win{box-shadow:0 14px 30px rgba(0,0,0,.4)}
.hub-clients .win-body{padding:10px;display:flex;gap:12px;align-items:center}
.hub-clients .tiles{flex:1}
.hub-clients .tile .pl{display:none}
.hub-clients .meta{width:120px;flex-shrink:0;display:flex;flex-direction:column;gap:6px;font-size:11px;color:var(--muted)}
.hub-clients .meta b{font:600 12.5px/1.2 var(--display);color:#fff}
.visual-sec .win{max-width:100%}
.win.wide{max-width:980px;margin:0 auto}
.pv-cap{margin-top:12px;font-size:13.5px;color:var(--dim);text-align:center}
@media (max-width:1080px){.f1,.f2,.f3{display:none}.rules,.hub{grid-template-columns:minmax(0,1fr)}.pipe{grid-template-columns:repeat(2,minmax(0,1fr))}.pstep:nth-child(2)::after{display:none}}
@media (max-width:860px){.layer{grid-template-columns:minmax(0,1fr)}.cells.c3{grid-template-columns:minmax(0,1fr)}.jr{grid-template-columns:repeat(2,minmax(0,1fr))}.cons{grid-template-columns:minmax(0,1fr)}.cons .side{flex-direction:row;flex-wrap:wrap}}
@media (max-width:560px){.pipe{grid-template-columns:minmax(0,1fr)}.pstep::after{display:none}.tiles.t5{grid-template-columns:repeat(3,minmax(0,1fr))}.tiles.t5 .tile:nth-child(n+4){display:none}.cells.c2{grid-template-columns:minmax(0,1fr)}.hub-clients .meta{width:96px}.fn{grid-template-columns:110px minmax(0,1fr)}}


/* ── Round 3: scenes, player, interactive pieces ── */
.scene{position:absolute;inset:0;width:100%;height:100%;display:block}
img.scene{object-fit:cover}
.shot-body{padding:0!important;background:#0b0b10}
.shot{display:block;width:100%;height:auto}
/* On phones a whole console is too small to read: show the working area larger. --fx is each capture's focus point. */

.pv-shot{padding:0}
.look2{display:grid;grid-template-columns:minmax(0,1fr) clamp(200px,22vw,280px);gap:clamp(18px,3vw,36px);align-items:center}
.shotphone{border-radius:34px;padding:7px;background:#07070b;border:1px solid var(--line-2);box-shadow:0 30px 70px rgba(0,0,0,.55)}
.shotphone img{display:block;width:100%;height:auto;border-radius:27px}
@media (max-width:860px){.look2{grid-template-columns:minmax(0,1fr)}.shotphone{width:min(260px,72%);margin:0 auto}}
.pv-shot img{display:block;width:100%;height:100%;object-fit:cover;object-position:left top}
.tile .scene{z-index:0}
.tile .dur,.tile .pl,.tile b,.tile .adl{z-index:2}
.uc-art{position:relative;height:150px;margin:-28px -28px 6px;border-radius:16px 16px 0 0;overflow:hidden;background:#000}
.uc-art .scene{opacity:.95;transition:transform .8s var(--ease)}
.uc:hover .uc-art .scene{transform:scale(1.06)}
.uc-art::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,var(--surface))}
.uc-art .ico{position:absolute;left:20px;bottom:-4px;z-index:2;box-shadow:0 8px 20px rgba(0,0,0,.5);background:#16161d}
@media (max-width:560px){.uc-art{margin:-22px -22px 6px}}

.player{display:flex;flex-direction:column;align-items:center;gap:18px;min-width:0;width:100%}
.ptabs{display:flex;gap:4px;padding:5px;border-radius:999px;background:var(--surface);border:1px solid var(--line);overflow-x:auto;max-width:100%;scrollbar-width:none}
.ptabs::-webkit-scrollbar{display:none}
.ptabs button{flex-shrink:0;height:34px;padding:0 14px;border-radius:999px;border:0;background:none;color:var(--muted);font:500 13px/1 var(--body);cursor:pointer;display:flex;align-items:center;gap:7px;transition:background .2s,color .2s}
.ptabs button:hover{color:#fff}
.ptabs button .dot{width:7px;height:7px;box-shadow:none}
.ptabs button[aria-selected="true"]{background:#fff;color:#000}
.pwrap{position:relative;display:flex;justify-content:center;width:100%;padding:8px 0 4px}
.pwrap::before{content:"";position:absolute;inset:6% 18%;background:radial-gradient(closest-side,var(--glow,rgba(99,102,241,.35)),transparent);filter:blur(34px)}
.pphone{position:relative;z-index:1;width:clamp(230px,23vw,290px);max-width:78vw;aspect-ratio:9/19;border-radius:42px;padding:8px;background:#07070b;border:1px solid var(--line-2);box-shadow:0 50px 100px rgba(0,0,0,.7),inset 0 0 0 1px rgba(255,255,255,.04);cursor:pointer}
.pscreen{position:relative;height:100%;border-radius:34px;overflow:hidden;background:#000}
.pscreen::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:34%;height:18px;background:#07070b;border-radius:0 0 13px 13px;z-index:9}
.slide{position:absolute;inset:0;transform:translateY(100%);transition:transform .75s var(--ease)}
.pvid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000}
.pshade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.45) 0,transparent 22%,transparent 48%,rgba(0,0,0,.78) 100%)}
.slide.on{transform:none}.slide.out{transform:translateY(-100%)}
.slide::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.35) 0%,transparent 22%,transparent 50%,rgba(0,0,0,.78) 100%);z-index:1}
.slide .cap{z-index:3;bottom:96px}
.slide .cap b{font-size:15px}
.slide .cap span{font-size:11px}
.slide .cta-pill{z-index:3;bottom:50px;height:36px;font-size:12px}
.slide .prog{z-index:3;bottom:32px}
.slide .prog i{animation:none;width:0}
.slide.on .prog i{animation:prog var(--dur,4.2s) linear both}
.pphone[data-k="sk"] .prog i{background:var(--grad-o)}.pphone[data-k="so"] .prog i{background:var(--grad)}
.pphone .scr-top{z-index:8;top:28px}
.pphone .rail{z-index:8;bottom:140px}
.pphone .tabsbar{z-index:8}
.pphone[data-k="sk"] .ws em{background:var(--grad-o)}.pphone[data-k="so"] .ws em{background:var(--grad)}
.slide .quiz~.cta-pill{}
.slide .quiz{animation:none;opacity:0;transform:translateY(18px);bottom:96px;z-index:4}
.slide.on .quiz{animation:pop .55s var(--ease) 1.5s both}
.toast{position:absolute;left:12px;right:12px;top:64px;z-index:4;display:flex;gap:10px;align-items:center;padding:10px 12px;border-radius:14px;background:rgba(10,10,14,.9);backdrop-filter:blur(10px);border:1px solid var(--line-2);opacity:0}
.toast .ico{width:30px;height:30px;border-radius:9px}.toast .ico .i{width:15px;height:15px}
.toast b{display:block;font:600 12px/1.25 var(--display);color:#fff}.toast small{font-size:10.5px;color:var(--muted)}
.slide.on .toast{animation:pop .55s var(--ease) 1.8s both}
.slide .duechip{z-index:4;top:62px}
@keyframes pop{from{opacity:0;transform:translateY(18px) scale(.96)}to{opacity:1;transform:none}}
.pfloat{position:absolute;z-index:3;display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;background:rgba(14,14,20,.9);backdrop-filter:blur(10px);border:1px solid var(--line-2);box-shadow:0 18px 40px rgba(0,0,0,.5);font-size:12px;line-height:1.3;animation:fin .6s var(--ease) both,bob 6s ease-in-out .6s infinite}
.pfloat .ico{width:30px;height:30px;border-radius:9px}.pfloat .ico .i{width:15px;height:15px}
.pfloat b{display:block;font:600 12px/1.3 var(--display);color:#fff}.pfloat small{font-size:11px;color:var(--muted)}
.pfloat.a{left:0;top:18%}.pfloat.b{right:0;bottom:16%;animation-delay:.15s,.75s}
@keyframes fin{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.phint{font:500 12px/1 var(--mono);letter-spacing:.06em;color:var(--dim);display:flex;gap:8px;align-items:center}
.phint .i{width:14px;height:14px}
.seg-hero .player .pfloat{display:none}
@media (max-width:1180px){.pfloat{display:none}}

.xf{padding:clamp(24px,4vw,44px);border-radius:24px;background:linear-gradient(160deg,rgba(249,115,22,.12),var(--surface) 45%);border:1px solid rgba(249,115,22,.25)}
.xf-top{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,.9fr);gap:28px;align-items:end}
.xf-meter{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.xf-meter strong{font:800 clamp(44px,6vw,72px)/1 var(--display);letter-spacing:-.04em;background:var(--grad-o);-webkit-background-clip:text;background-clip:text;color:transparent;font-variant-numeric:tabular-nums}
#xfUpTo{font-size:.38em;letter-spacing:-.01em;vertical-align:.9em;opacity:0;transition:opacity .4s}
.xf[data-state="short"] #xfUpTo{opacity:1}
.xf-stage{position:relative;margin-top:30px;min-height:250px}
.xf-long{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:16px;transition:opacity .5s var(--ease),transform .7s var(--ease);transform-origin:left center}
.xf[data-state="short"] .xf-long{opacity:0;transform:scaleX(.25);pointer-events:none}
.xf-doc{padding:20px;border-radius:14px;background:#0b0b10;border:1px solid var(--line);max-width:520px;display:flex;flex-direction:column;gap:10px}
.xf-doc b{font:600 18px/1.2 var(--display);color:#a1a1aa}
.xf-lines{display:flex;flex-direction:column;gap:7px}.xf-lines i{display:block;height:8px;border-radius:4px;background:rgba(255,255,255,.07)}.xf-lines i:nth-child(2){width:86%}.xf-lines i:nth-child(3){width:92%}.xf-lines i:nth-child(4){width:60%}
.xf-bar{display:grid;grid-template-columns:repeat(60,1fr);gap:2px;height:34px}
.xf-bar i{border-radius:2px;background:linear-gradient(180deg,#52525b,#3f3f46)}
.xf-bar i:nth-child(-n+9){background:var(--grad-o)}
.xf-scale{display:flex;justify-content:space-between;font:500 11px/1 var(--mono);color:var(--dim)}
.xf-grid{display:grid;grid-template-columns:repeat(15,minmax(0,1fr));gap:8px;align-content:center;min-height:250px;pointer-events:none}
.xt{position:relative;aspect-ratio:9/16;border-radius:10px;overflow:hidden;opacity:0;transform:translateY(24px) scale(.9);transition:opacity .45s var(--ease),transform .55s var(--ease);transition-delay:var(--d)}
.xt::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.8))}
.xt b{position:absolute;left:6px;right:6px;bottom:18px;z-index:2;font:600 9.5px/1.2 var(--display);color:#fff}
.xt span{position:absolute;left:6px;bottom:6px;z-index:2;font:500 8.5px/1 var(--mono);color:var(--orange-soft)}
.xf[data-state="short"] .xt{opacity:1;transform:none}
@media (max-width:1080px){.xf-top{grid-template-columns:minmax(0,1fr)}.xf-grid{grid-template-columns:repeat(8,minmax(0,1fr))}}
@media (max-width:560px){.xf-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}.xf-stage{min-height:380px}.xt b{font-size:8px;bottom:15px}}

.or{padding:clamp(24px,4vw,44px);border-radius:24px;background:linear-gradient(160deg,rgba(232,121,249,.1),var(--surface) 45%);border:1px solid rgba(232,121,249,.22)}
.or-head{display:grid;grid-template-columns:minmax(0,1.4fr) auto;gap:24px;align-items:end}
.or-head .prod-switch{flex-wrap:wrap}
.or-stage{position:relative;margin-top:30px;height:300px}
.or-svg{position:absolute;inset:0;width:100%;height:100%}
.or-flow{opacity:0;transition:opacity .4s}
.or[data-mode="rent"] .or-flow.rent,.or[data-mode="own"] .or-flow.own{opacity:1}
.or-node{position:absolute;top:50%;transform:translateY(-50%);width:23%;padding:18px;border-radius:16px;background:#0b0b10;border:1px solid var(--line);display:flex;flex-direction:column;gap:6px;transition:border-color .4s,box-shadow .4s,opacity .4s}
.or-node b{font:700 15px/1.25 var(--display);word-break:break-word}.or-node small{font-size:12.5px;color:var(--muted)}
.or-plat{left:0}.or-own{right:0}
.or[data-mode="rent"] .or-plat{border-color:rgba(232,121,249,.6);box-shadow:0 0 40px rgba(232,121,249,.2)}
.or[data-mode="rent"] .or-own{opacity:.45}
.or[data-mode="own"] .or-own{border-color:rgba(232,121,249,.6);box-shadow:0 0 40px rgba(232,121,249,.2)}
.or[data-mode="own"] .or-plat{opacity:.45}
.or-clip{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:120px;display:flex;flex-direction:column;align-items:center;gap:8px}
.or-clip .tile{width:100%;border-radius:14px;box-shadow:0 20px 50px rgba(0,0,0,.6)}
.or-legend{display:flex;gap:20px;flex-wrap:wrap;justify-content:center;margin-top:14px;font-size:13px;color:var(--muted)}
.or-legend span{display:flex;align-items:center;gap:8px}.or-legend i{width:10px;height:10px;border-radius:50%}
@media (max-width:860px){.or-head .prod-switch{display:grid;grid-template-columns:1fr 1fr;width:100%}.or-head .prod-switch button{height:auto;min-height:40px;padding:8px 10px;line-height:1.25}.or-head{grid-template-columns:minmax(0,1fr)}.or-stage{height:auto;display:flex;flex-direction:column;gap:14px;align-items:center}.or-svg{display:none}.or-node,.or-clip{position:static;transform:none;width:100%}.or-clip{width:120px}}

.rpill{border:0;cursor:pointer;font-family:var(--body)}
.rpill .ring{position:absolute;inset:-4px;border-radius:999px;border:2px solid rgba(232,121,249,.7);animation:ring 2s ease-out infinite;pointer-events:none}
@keyframes ring{from{opacity:.9;transform:scale(.96)}to{opacity:0;transform:scale(1.18)}}
.rsheet{animation:fin .35s var(--ease) both}
.rs-x{position:absolute;top:8px;right:8px;width:24px;height:24px;border-radius:7px;border:0;background:rgba(255,255,255,.07);color:#fff;display:grid;place-items:center;cursor:pointer}
.rs-x .i{width:12px;height:12px}
.rsheet .tile .scene{border-radius:inherit}

.pv-pers{display:flex;flex-direction:column;gap:10px}
.persona{display:inline-flex;align-self:flex-start;gap:3px;padding:3px;border-radius:9px;background:rgba(255,255,255,.05)}
.persona button{height:24px;padding:0 10px;border-radius:7px;border:0;background:none;color:var(--muted);font:500 11px/1 var(--body);cursor:pointer}
.persona button[aria-pressed="true"]{background:#fff;color:#000}
.pfeed{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;flex:1}
.pfi{position:relative;border-radius:7px;overflow:hidden;min-height:44px;transition:transform .55s var(--ease)}
.pfi::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 20%,rgba(0,0,0,.75))}
.pfi b{position:absolute;left:5px;right:5px;bottom:4px;z-index:2;font:600 8.5px/1.15 var(--display);color:#fff}
.pv-pers .ai-tag{bottom:auto;top:10px}

.ev.anim li{opacity:0;animation:evin 7s var(--ease) infinite}
.ev.anim li:nth-child(1){animation-delay:.2s}.ev.anim li:nth-child(2){animation-delay:1s}.ev.anim li:nth-child(3){animation-delay:1.8s}.ev.anim li:nth-child(4){animation-delay:2.6s}.ev.anim li:nth-child(5){animation-delay:3.4s}
@keyframes evin{0%{opacity:0;transform:translateX(-8px)}6%,82%{opacity:1;transform:none}92%,100%{opacity:0}}

.iso{position:relative;height:380px;display:flex;align-items:center;justify-content:center;perspective:1600px}
.iso-stack{position:relative;width:260px;height:260px;transform-style:preserve-3d;transform:rotateX(58deg) rotateZ(-40deg);margin-right:120px}
.plane{position:absolute;inset:0;border-radius:24px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;align-content:center;padding:22px;transform:translateZ(calc(var(--z) * 1px));background:rgba(12,12,18,.82);border:1px solid var(--line-2);box-shadow:0 30px 60px rgba(0,0,0,.6);animation:lift 1.2s var(--ease) both}
.plane.p1{--z:210;grid-template-columns:repeat(2,minmax(0,1fr));background:linear-gradient(135deg,rgba(249,115,22,.25),rgba(232,121,249,.25)),rgba(12,12,18,.9)}
.plane.p2{--z:140;animation-delay:.1s}.plane.p3{--z:70;animation-delay:.2s;background:linear-gradient(135deg,rgba(99,102,241,.25),rgba(12,12,18,.9))}.plane.p4{--z:0;animation-delay:.3s;border-style:dashed}
@keyframes lift{from{transform:translateZ(0);opacity:0}to{transform:translateZ(calc(var(--z) * 1px));opacity:1}}
.pc{height:64px;border-radius:12px;display:grid;place-items:center;text-align:center;padding:0 6px;font:600 12px/1.2 var(--display);color:#fff;background:rgba(255,255,255,.07);border:1px solid var(--line)}
.pc.sk{background:var(--grad-o);color:#1a0d00;height:120px;font-size:16px}.pc.so{background:var(--grad);height:120px;font-size:16px}
.pc.eng{background:rgba(99,102,241,.25)}.pc.base{background:transparent;border-style:dashed;color:#86efac;font-size:10.5px}
.iso-labels{position:absolute;right:0;top:44%;transform:translateY(-50%);display:flex;flex-direction:column;gap:46px;font:500 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.iso-labels li{display:flex;align-items:center;gap:10px}
.iso-labels li::before{content:"";width:26px;height:1px;background:var(--line-2)}
@media (max-width:1080px){.iso{height:330px}.iso-stack{transform:rotateX(58deg) rotateZ(-40deg) scale(.85)}}
@media (max-width:560px){.iso{height:280px}.iso-stack{transform:rotateX(58deg) rotateZ(-40deg) scale(.66);margin-right:90px}.iso-labels{gap:30px;font-size:9.5px}}

/* Responsive */
@media (max-width:1080px){
  .nav,.hdr-r .btn-w{display:none}
  .burger{display:inline-flex}
  .hero .wrap{grid-template-columns:1fr}
  .stage{min-height:440px}
  .g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .steps{grid-template-columns:minmax(0,1fr)}
  .pband{grid-template-columns:1fr}
  .foot-top{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot-top>div:first-child{grid-column:1/-1}
}
@media (max-width:860px){
  .g3,.g2,.shift,.ws-cards,.close-cards,.split,.people{grid-template-columns:minmax(0,1fr)}
  .facts{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:560px){
  .routes,.modes,.g4,.steps,.form{grid-template-columns:minmax(0,1fr)}
  .stage{min-height:380px}
  .phone{width:156px;border-radius:28px}
  .scr-top .mode,.rail{display:none}
  .cap{right:12px}
  .screen{border-radius:22px}
  .phone.a{transform:rotate(-5deg) translateX(14px)}
  .phone.b{transform:rotate(5deg) translate(-14px,28px)}
  .wsc,.card,.band{padding:22px}
  .faq summary{padding:18px 20px}
  .faq details p{padding:0 20px 18px}
  .cta-row .btn{flex:1 1 auto}
}
/* ── Resources menu: one column ── */
.menu.one{width:320px;grid-template-columns:minmax(0,1fr)}
.menu .ext{display:inline-block;margin-left:4px;font-size:12px;color:var(--dim)}
/* ── Platform capabilities: one card per capability, each opens a detail sheet ── */
.ucar.capx .ucar-track{grid-auto-columns:clamp(280px,31.5%,370px)}
.capc{position:relative;scroll-snap-align:start;display:flex;flex-direction:column;border-radius:20px;overflow:hidden;background:var(--surface);border:1px solid var(--line);transition:border-color .3s,transform .4s var(--ease)}
.capc:hover{transform:translateY(-4px);border-color:rgba(165,180,252,.45)}
.capc:focus-within{border-color:rgba(165,180,252,.6)}
.capc-art{position:relative;height:290px;overflow:hidden;display:flex;justify-content:center;align-items:flex-start;padding:30px 24px 0;
  background:radial-gradient(80% 90% at 50% 100%,rgba(99,102,241,.3),transparent 70%),linear-gradient(180deg,#0e0b18,#0c0c11);
  -webkit-mask-image:linear-gradient(180deg,#000 74%,transparent);mask-image:linear-gradient(180deg,#000 74%,transparent)}
.capc-art.left{justify-content:flex-start}
.capc-art .dcard{flex-shrink:0;width:var(--w,260px);max-width:none;transition:transform .6s var(--ease)}
.capc-art.left .dcard{-webkit-mask-image:linear-gradient(90deg,#000 80%,transparent);mask-image:linear-gradient(90deg,#000 80%,transparent)}
.capc:hover .capc-art .dcard,.capc:hover .capc-art .dphone{transform:translateY(-6px)}
.capc-art .dphone{--pw:150px;transition:transform .6s var(--ease)}
.capc-art.duo{gap:0}
.capc-art.duo .dphone:first-child{margin:28px -26px 0 0;z-index:0}
.capc-art.duo .dphone:last-child{z-index:1}
.capc-body{display:flex;flex-direction:column;gap:10px;padding:22px 24px 24px;flex:1}
.capc-k{font:500 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--indigo-soft)}
.capc-body h3{font:700 19px/1.3 var(--display);letter-spacing:-.01em}
.capc-btn{all:unset;cursor:pointer}
.capc-btn::after{content:"";position:absolute;inset:0;z-index:2;border-radius:20px}
.capc-btn:focus-visible::after{outline:2px solid var(--indigo-soft);outline-offset:-2px}
.capc-body p{color:var(--muted);font-size:15px}
.capc-more-l{margin-top:auto;padding-top:8px;display:inline-flex;align-items:center;gap:8px;font:500 14.5px/1 var(--body);color:#e4e4e7}
.capc-more-l i{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.08);font:400 18px/1 var(--body);font-style:normal;transition:background .2s,transform .3s var(--ease)}
.capc:hover .capc-more-l i{background:#fff;color:#000;transform:rotate(90deg)}
/* Detail sheet: a dialog on desktop, a bottom sheet on phones */
.capsheet{box-sizing:border-box;width:min(1000px,calc(100vw - 48px));max-width:none;height:min(680px,calc(100vh - 48px));max-height:min(680px,calc(100vh - 48px));padding:0;border:1px solid var(--line-2);border-radius:24px;background:#0c0c11;color:var(--fg);overflow:hidden;box-shadow:0 40px 120px rgba(0,0,0,.7)}
.capsheet::backdrop{background:rgba(0,0,0,.72);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.capsheet[open]{animation:csIn .4s var(--ease)}
@keyframes csIn{from{opacity:0;transform:translateY(16px) scale(.98)}}
.cs-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);height:100%}
.cs-art{position:relative;display:flex;justify-content:center;align-items:center;gap:0;padding:40px 32px;overflow:hidden;
  background:radial-gradient(80% 80% at 50% 100%,rgba(99,102,241,.32),transparent 70%),linear-gradient(180deg,#0e0b18,#0a0a10)}
.cs-art .dcard{flex-shrink:0;width:var(--sw,100%);max-width:100%}
.cs-art.tall{align-items:flex-start;-webkit-mask-image:linear-gradient(180deg,#000 82%,transparent);mask-image:linear-gradient(180deg,#000 82%,transparent)}
.cs-art .dphone{--pw:200px}
.cs-art.duo .dphone:first-child{margin:40px -34px 0 0}
.cs-art.duo .dphone:last-child{z-index:1}
.cs-body{position:relative;display:flex;flex-direction:column;min-height:0;padding:44px 40px 0;overflow:hidden}
.cs-main{--cs:1;flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:calc(14px * var(--cs));overflow:hidden}
.cs-main.cs-t1 .cs-lead{display:none}
.cs-main.cs-t2 .cs-list li span{font-size:0}.cs-main.cs-t2 .cs-list li b{margin:0}
.cs-k{font:500 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--indigo-soft)}
.cs-body h3{font:700 calc(clamp(24px,2.4vw,30px) * var(--cs,1))/1.2 var(--display);letter-spacing:-.02em;padding-right:36px}
.cs-lead{color:var(--muted);font-size:calc(16.5px * var(--cs,1));line-height:1.6}
.cs-list{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:calc(14px * var(--cs,1))}
.cs-list li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:12px;color:var(--muted);font-size:calc(15px * var(--cs,1));line-height:1.55}
.cs-list li .i{width:16px;height:16px;margin-top:3px;color:var(--indigo-soft)}
.cs-list li b{display:block;color:#f4f4f5;font:600 calc(15px * var(--cs,1))/1.4 var(--body);margin-bottom:2px}
.cs-foot{flex:none;margin-top:16px;padding:16px 0 24px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:12px}
.cs-nav{display:flex;align-items:center;gap:10px;font:500 12px/1 var(--mono);color:var(--dim)}
.cs-nav button,.cs-x{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--surface-2);border:1px solid var(--line-2);color:#fff;cursor:pointer}
.cs-nav button:hover,.cs-x:hover{background:#1c1c25}
.cs-nav .i,.cs-x .i{width:15px;height:15px}
.cs-nav [data-cs-prev] .i{transform:rotate(180deg)}
.cs-x{position:absolute;top:18px;right:18px;z-index:3}
@media (max-width:760px){
  .capsheet{width:100vw;height:auto;max-height:92vh;max-height:92dvh;margin:auto 0 0;border-radius:22px 22px 0 0;border-bottom:0}
  .capsheet[open]{animation:csUp .45s var(--ease)}
  @keyframes csUp{from{transform:translateY(40px);opacity:0}}
  .capsheet[open]{display:flex;flex-direction:column}
  .cs-in{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;height:auto;max-height:none;overflow:hidden}
  .cs-art{flex:none;height:clamp(150px,27dvh,250px);padding:28px 16px 0;align-items:flex-start;-webkit-mask-image:linear-gradient(180deg,#000 80%,transparent);mask-image:linear-gradient(180deg,#000 80%,transparent)}
  .cs-art .dcard{width:min(var(--sw,100%),100%)}
  .cs-art .dphone{--pw:150px}
  .cs-body{flex:1 1 auto;padding:18px 20px 0}
  .cs-foot{margin-top:12px;padding:12px 0 calc(14px + env(safe-area-inset-bottom,0px))}
  .cs-x{top:14px;right:14px}
}
/* Small phones: keep the 9:41 clear of the island */
/* A tall crop shown by its last part: the moderation card ends on Approve */
.dcard.tail{position:relative;flex-shrink:0;height:var(--h,100%);-webkit-mask-image:linear-gradient(180deg,transparent,#000 20%);mask-image:linear-gradient(180deg,transparent,#000 20%)}
.dcard.tail img{position:absolute;left:0;bottom:0;width:100%;height:auto}
.capc-art.tail{-webkit-mask-image:none;mask-image:none;align-items:flex-end;padding:0 24px 24px}
.cs-art.tail{align-items:stretch;padding:40px 32px}
.cs-art.tail .dcard{height:100%}
@media (max-width:760px){.cs-art.tail{-webkit-mask-image:none;mask-image:none;padding:20px 16px 16px}.cs-art.tail .dcard{width:min(var(--sw),100%)}}
/* Mobile: filter chips stay on one swipeable line; the menu's demo button centres its label */
@media (max-width:760px){.cl-filters{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-left:-20px;margin-right:-20px;padding:2px 20px}.cl-filters::-webkit-scrollbar{display:none}.cl-chip{flex-shrink:0}}
.mnav .btn{display:flex;align-items:center;justify-content:center}
/* ── Changelog, ported from the original page: a cover on every release, every change listed ── */
.cl-filters{display:flex;gap:8px;flex-wrap:wrap;margin-top:28px}
.cl-chip{height:38px;padding:0 15px 0 12px;border-radius:999px;border:1px solid var(--line-2);background:transparent;color:#d4d4d8;font:500 14px/1 var(--body);display:inline-flex;align-items:center;gap:8px;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.cl-chip:hover{background:rgba(255,255,255,.06)}
.cl-chip img{width:18px;height:18px}
.cl-chip small{font:500 11px/1 var(--mono);color:var(--dim)}
.cl-chip[aria-pressed="true"]{background:#fff;color:#000;border-color:#fff}
.cl-chip[aria-pressed="true"] small{color:#52525b}
@media (max-width:760px){.cl-filters{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-left:-20px;margin-right:-20px;padding:2px 20px}.cl-filters::-webkit-scrollbar{display:none}.cl-chip{flex-shrink:0}}
.clg-sec{padding-top:8px}
.clg-list{max-width:1128px;margin:0 auto}
.clg-yr{display:flex;align-items:center;gap:16px;height:34px;padding:0 40px;background:rgba(255,255,255,.05)}
.clg-yr i{flex:1;height:1px;border-radius:10px;background:rgba(255,255,255,.05)}
.clg-yr span{font:400 16px/24px var(--mono);color:#71717a}
.clg-ent{scroll-margin-top:90px;position:relative;display:grid;grid-template-columns:minmax(0,398px) minmax(0,698px);justify-content:space-between;gap:32px;padding:32px 0 64px;border-bottom:1px solid rgba(255,255,255,.05)}
.clg-meta{position:sticky;top:96px;align-self:start;display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.clg-meta time{font:400 14px/21px var(--mono);color:#71717a;letter-spacing:.7px}
.clg-tg{display:inline-flex;align-items:center;height:24px;padding:0 8px;border-radius:4px;font:400 12px/18px var(--mono);color:var(--c);background:color-mix(in srgb,var(--c) 5%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 20%,transparent)}
.clg-cover{position:relative;height:350px;border-radius:16px;overflow:hidden;display:grid;place-items:center;background:#0c0c11}
.clg-cover>img,.clg-grad{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.clg-grad{background:linear-gradient(93deg,#2e9ee4 0%,#833ce2 100%)}
.clg-ent:hover .clg-cover>img{transform:scale(1.03)}
.clg-glass{position:relative;display:flex;align-items:center;gap:22px;filter:drop-shadow(0 6px 16px rgba(0,0,0,.25))}
.clg-glass .mk{width:92px;height:92px;object-fit:contain;filter:brightness(0) invert(1);opacity:.88}
.clg-glass .wm{width:292px;height:61px;object-fit:contain;opacity:.88}
.clg-glass .sk{font:700 72px/1 var(--display);letter-spacing:-1px;background:linear-gradient(160deg,rgba(255,255,255,.95),rgba(255,255,255,.45));-webkit-background-clip:text;background-clip:text;color:transparent}
.clg-ver{font:400 14px/21px var(--mono);color:#71717a;letter-spacing:.7px;margin-top:24px}
.clg-body h2{font:600 20px/1.2 var(--display);color:#fff;margin-top:8px}
.clg-desc{font:400 16px/24px var(--body);color:#a1a1aa;margin-top:16px}
.clg-grp{margin-top:24px}
.clg-grp ul{margin:14px 0 0 20px;padding:0;list-style:disc}
.clg-grp li{font:400 14px/28px var(--body);color:#a1a1aa}
.clg-grp li::marker{color:#fff}
.clg-grp li b{color:#fff;font-weight:500}
@media (max-width:1080px){.clg-ent{grid-template-columns:220px minmax(0,1fr)}}
@media (max-width:760px){
  .clg-ent{grid-template-columns:minmax(0,1fr);gap:16px;padding:24px 0 40px}
  .clg-meta{position:static;flex-direction:row;align-items:center;gap:12px}
  .clg-cover{height:auto;aspect-ratio:698/350}
  .clg-glass{transform:scale(.55)}
  .clg-yr{padding:0 12px}
  .clg-ver{margin-top:16px}
}
/* ── Home: the original changelog slideshow ── */
.clc-sec{overflow:hidden}
.clc{margin-top:48px;position:relative}
.clc-track{display:flex;gap:20px;list-style:none;margin:0;padding:0;will-change:transform;cursor:grab;user-select:none;-webkit-user-select:none;touch-action:pan-y}
.clc-track.drag{cursor:grabbing}
.clc-track.anim{transition:transform .8s cubic-bezier(.65,0,.35,1)}
.clc-card{flex:0 0 320px;display:flex;flex-direction:column}
.clc-img{position:relative;display:block;height:200px;border-radius:16px;overflow:hidden;background:#111}
.clc-img img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease);-webkit-user-drag:none}
.clc-card:hover .clc-img img{transform:scale(1.05)}
.clc-tag{position:absolute;top:16px;right:16px;height:24px;padding:0 10px;border-radius:24px;background:rgba(0,0,0,.3);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font:500 12px/24px var(--body);color:rgba(255,255,255,.75)}
.clc-over{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);text-align:center;font:700 16px/24px var(--body);color:#fff}
.clc-body{padding:20px}
.clc-body h3{font:700 16px/24px var(--display);color:#fff}
.clc-body p{font:300 14px/21px var(--body);color:var(--muted);margin-top:8px}
.clc-more{display:inline-flex;align-items:center;gap:6px;margin-top:14px;font:500 14px/1 var(--body);color:#fff}
.clc-more .i{width:13px;height:13px}
@media (max-width:1080px){.clc-card{flex-basis:280px}}
@media (max-width:560px){.clc-card{flex-basis:250px}.clc{margin-top:32px}}
/* ── Compare: by team, then the tables ── */
.icp{gap:12px}
.icp-seg{display:inline-flex;align-items:center;gap:8px;font:500 12px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.icp.sk .icp-seg,.cmp-pick.sk .icp-seg{color:var(--orange-soft)}
.icp.so .icp-seg,.cmp-pick.so .icp-seg{color:#f0abfc}
.icp-l{font:500 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin-top:6px}
.icp-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.icp-list li{display:grid;grid-template-columns:18px minmax(0,1fr);gap:10px;color:#e4e4e7;font-size:15px;line-height:1.5}
.icp-list .i{width:15px;height:15px;margin-top:3px;color:var(--orange-soft)}
.icp.so .icp-list .i{color:#f0abfc}
.icp-ans{color:var(--muted);font-size:15px;padding-top:14px;border-top:1px solid var(--line);margin-top:4px}
.icp .arrow-link{margin-top:auto;padding-top:6px}
.cmp-pick{gap:12px;transition:border-color .3s,transform .4s var(--ease)}
.cmp-pick:hover{transform:translateY(-4px)}
.cmp-pick.sk:hover{border-color:rgba(249,115,22,.5)}
.cmp-pick.so:hover{border-color:rgba(232,121,249,.5)}
.cmp-pick p{color:var(--muted)}
.cmp-pick .arrow-link{margin-top:auto;padding-top:6px}
/* ── A stage straight after a heading gets room to breathe; the partner console keeps its controls readable on a phone ── */
.sec-head+.dstage{margin-top:36px}
@media (max-width:760px){
  .pcon-stage{justify-items:start;padding:24px 0 24px 16px}
  .pcon-stage .dcard.pcon{width:640px;max-width:none;-webkit-mask-image:linear-gradient(90deg,#000 78%,transparent);mask-image:linear-gradient(90deg,#000 78%,transparent)}
}
/* Enterprise Studio: one sequence of four steps, each with what it looks like and what happens, an arrow to the next.
   Below 1080px it becomes a vertical timeline with the arrows pointing down, never a grid of squares */
.seq{list-style:none;margin:36px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:44px}
.seq-step{position:relative;display:flex;flex-direction:column;gap:14px;padding:18px 18px 22px;border-radius:16px;background:var(--surface);border:1px solid var(--line)}
.seq-head{display:flex;align-items:center;gap:10px}
.seq-n{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:rgba(249,115,22,.14);color:var(--orange-soft);font:600 11.5px/1 var(--mono)}
.seq-head .vlabel{color:var(--orange-soft)}
.seq-vis{height:212px;padding:12px;border-radius:12px;background:#08080d;border:1px solid var(--line);display:flex;flex-direction:column;justify-content:center}
.seq-vis .ev{list-style:none;margin:0;padding:0}
.seq-step h3{font:600 16px/1.35 var(--display);margin-top:2px}
.seq-step p{font-size:14.5px;line-height:1.5;color:var(--muted);margin:0}
.seq-arrow{position:absolute;z-index:2;right:-39px;top:131px;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#16161d;border:1px solid rgba(249,115,22,.5);color:var(--orange-soft);box-shadow:0 6px 18px rgba(0,0,0,.5)}
.seq-arrow .i{width:15px;height:15px}
@media (max-width:1080px){
  .seq{grid-template-columns:minmax(0,1fr);gap:46px}
  .seq-step{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);grid-template-rows:auto auto 1fr;grid-template-areas:"head vis" "title vis" "text vis";column-gap:24px;row-gap:10px}
  .seq-vis{height:auto;min-height:170px}
  .seq-head{grid-area:head}.seq-vis{grid-area:vis}.seq-step h3{grid-area:title}.seq-step p{grid-area:text;align-self:start}
  .seq-arrow{right:auto;left:50%;top:auto;bottom:-41px;transform:translateX(-50%) rotate(90deg)}
}
@media (max-width:560px){
  .seq-step{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "vis" "title" "text";row-gap:12px}
  .seq-vis{min-height:0}
}
@media (max-width:860px){.ub-rot>span{font-size:13px}
  .at-story{grid-template-columns:88px minmax(0,1fr);gap:12px}.at-steps{gap:8px}.at-steps b{font-size:11.5px}.at-steps small{font-size:10px}.at-steps li{gap:7px}.at-steps li>span{flex-basis:18px;height:18px}}
@media (max-width:480px){.ub-rot>span{font-size:12px;letter-spacing:-.03em}}
@media (min-width:1081px){.mnav{display:none!important}}
.mnav .mnav-top .brand{display:flex;align-items:center;border:0;padding:0}
/* Embedded feed: the host page carries on below the row */
@media (max-width:640px){.ep{aspect-ratio:16/11.4}}
.ep-more{margin:2.2cqw 3.6cqw 0;padding-top:2cqw;border-top:1px solid #eef2f7;display:flex;align-items:center;justify-content:space-between;gap:2cqw}
.ep-more b{display:inline;font:700 2.4cqw/1.2 var(--display);color:#0f172a}
.ep-more span{display:inline;font:500 1.8cqw/1.3 var(--body);color:#64748b;margin-left:1.4cqw}
.ep-more .ep-cta2{flex-shrink:0;margin:0;font:600 1.8cqw/1 var(--body);color:#0f172a;padding:1.2cqw 2.2cqw;border-radius:99px;border:1px solid #cbd5e1}
/* Four steps read as a sequence: numbered badges on one rail that fills 01 to 04 as the row comes into view.
   Below 1080px the rail runs down the left. The text is always visible; only the rail and the badges animate */
.steps{--sc:var(--indigo-soft);position:relative;padding-top:50px;gap:20px}
.steps.o{--sc:var(--orange-soft)}
.steps.f{--sc:var(--fuchsia)}
.steps li{position:relative}
.steps li::before{content:counter(s,decimal-leading-zero);position:absolute;left:22px;top:-50px;z-index:1;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;
  font:600 11.5px/1 var(--mono);letter-spacing:.04em;color:var(--dim);background:var(--bg);border:1px solid var(--line-2);transition:color .4s,border-color .4s,background .4s,box-shadow .4s}
.steps.in li::before{color:var(--sc);border-color:var(--sc);background:color-mix(in srgb,var(--sc) 14%,var(--bg));box-shadow:0 0 0 4px color-mix(in srgb,var(--sc) 10%,transparent)}
.steps.in li:nth-child(2)::before{transition-delay:.35s}
.steps.in li:nth-child(3)::before{transition-delay:.7s}
.steps.in li:nth-child(4)::before{transition-delay:1.05s}
.steps li{transition:border-color .4s}
.steps.in li{border-color:color-mix(in srgb,var(--sc) 22%,var(--line))}
.steps.in li:nth-child(2){transition-delay:.35s}
.steps.in li:nth-child(3){transition-delay:.7s}
.steps.in li:nth-child(4){transition-delay:1.05s}
.steps::before,.steps::after{content:"";position:absolute;left:var(--x0,0);top:var(--y0,0);width:var(--rw,0);height:var(--rh,0);border-radius:2px}
.steps::before{background:var(--line-2)}
.steps::after{background:var(--sc);transform-origin:0 0;transform:scale(0,1);transition:transform 1.3s cubic-bezier(.65,0,.35,1)}
.steps.v::after{transform:scale(1,0)}
.steps.in::after{transform:none}
@media (max-width:1080px){
  .steps{padding-top:0;padding-left:50px}
  .steps li::before{left:-50px;top:18px}
}
/* Security: an action column, then the credentials as a plain list */
.trust-row .band.tr2{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:40px;align-items:center}
.tr2 .tr-main{display:flex;flex-direction:column;align-items:flex-start;gap:0}
.tr2 .tr-main h3{margin-top:18px}
.tr2 .tr-main p{margin-top:8px}
.tr2 .cta-row{margin-top:22px;gap:18px;align-items:center}
.tr2 .cta-row .arrow-link{margin-top:0}
.tr-creds{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.tr-creds li{display:grid;grid-template-columns:20px minmax(0,1fr);gap:14px;padding:16px 0;border-top:1px solid var(--line)}
.tr-creds li:first-child{border-top:0;padding-top:0}
.tr-creds li:last-child{padding-bottom:0}
.tr-creds .i{width:18px;height:18px;margin-top:2px;color:var(--ok)}
.tr-creds b{display:block;font:600 16px/1.3 var(--display);color:#f4f4f5}
.tr-creds span{display:block;margin-top:3px;font-size:14.5px;color:var(--muted)}
@media (max-width:760px){.trust-row .band.tr2{grid-template-columns:minmax(0,1fr);gap:26px}}
/* Home hero, quieter: the headline, its line and the CTAs read first; the phone fits the screen with one pager under it */
.hero{padding-block:clamp(28px,4.5vw,64px) clamp(44px,5.5vw,80px)}
@media (min-width:1081px){.hero .wrap{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(32px,4vw,56px)}}
.hero-l{gap:22px}
.routes{gap:10px}
.route{padding:13px 16px;gap:4px}
.route b{font-size:15.5px}
.route span{font-size:13px}
.trust-line{gap:14px}
.trust-logos{gap:10px 26px}
.hero .rplayer{--pw:clamp(220px,calc((100svh - 64px - 120px) * .446),300px)}
@media (max-width:1080px){.hero .rplayer{--pw:min(250px,calc(100vw - 40px - 128px))}.hero .wrap{gap:36px}}
/* Customer logos: equal visual weight, on a grid. Four across on wide screens, an aligned two by two below 1200px */
.trust-line{display:flex;align-items:center;gap:14px 24px;flex-wrap:wrap}
.trust-logos{display:grid;grid-template-columns:repeat(2,max-content);align-items:center;justify-items:start;column-gap:44px;row-gap:20px}
.trust-logos img{display:block;width:auto;opacity:.8}
.lg-unilever{height:28px}.lg-lenovo{height:22px}.lg-marketlogic{height:32px}.lg-rebackoffice{height:23px}
@media (min-width:1200px){.trust-logos{grid-template-columns:repeat(4,max-content);column-gap:30px}}
@media (max-width:560px){.trust-line{flex-direction:column;align-items:flex-start;gap:16px}.trust-logos{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:20px;row-gap:22px;width:100%}
  .lg-unilever{height:25px}.lg-lenovo{height:19px}.lg-marketlogic{height:28px}.lg-rebackoffice{height:20px}}
@media (min-width:1081px){.seg-hero .rplayer{--pw:clamp(220px,calc((100svh - 64px - 214px) * .446),290px)}}
@media (max-width:1080px){.seg-hero .rplayer[data-ui="rail"]{--pw:min(250px,calc(100vw - 40px - 128px))}}
/* Own or rent: a ledger. Each value has its row; dots run from the video to the side that keeps it */
.or-led{margin-top:34px;display:flex;flex-direction:column}
.or-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr) minmax(0,1fr);align-items:stretch}
.or-row>.or-l,.or-row>.or-r{padding:16px 20px;transition:background .45s,opacity .45s}
.or-row:not(.or-top)>.or-l,.or-row:not(.or-top)>.or-r{border-top:1px solid var(--line)}
.or-l{text-align:right}
.or-cell{display:flex;align-items:center;gap:10px;height:100%}
.or-l .or-cell{flex-direction:row-reverse}
.or-cell p{margin:0;font-size:15px;line-height:1.45;color:#e4e4e7}
.or-cell .i{flex-shrink:0;width:16px;height:16px;color:var(--c)}
.or-dest{display:flex;flex-direction:column;gap:5px;justify-content:center;height:100%}
.or-dest b{font:700 18px/1.2 var(--display);color:#fff}
.or-dest code{font:500 12.5px/1.3 var(--mono);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.or[data-mode="rent"] .or-l,.or[data-mode="own"] .or-r{background:color-mix(in srgb,#e879f9 7%,transparent)}
.or[data-mode="rent"] .or-r,.or[data-mode="own"] .or-l{opacity:.38}
.or[data-mode="rent"] .or-r .i,.or[data-mode="own"] .or-l .i{color:var(--dim)}
.or-row.or-top>.or-l,.or-row.or-top>.or-r{border-radius:14px 14px 0 0;padding-top:20px}
.or-row:last-child>.or-l,.or-row:last-child>.or-r{border-radius:0 0 14px 14px}
.or-lane{position:relative;display:grid;place-items:center;min-height:64px}
.or-row:not(.or-top) .or-lane::before{content:"";position:absolute;left:0;right:0;top:50%;border-top:1px dashed var(--line-2)}
.or-row:not(.or-top) .or-lane::after{content:"";position:absolute;top:50%;width:8px;height:8px;margin-top:-4px;border-top:2px solid var(--c);border-left:2px solid var(--c);transition:left .45s,right .45s,transform .45s}
.or[data-mode="rent"] .or-row .or-lane::after{left:2px;transform:rotate(-45deg)}
.or[data-mode="own"] .or-row .or-lane::after{left:calc(100% - 10px);transform:rotate(135deg)}
.or-chip{position:relative;z-index:2;display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 13px;border-radius:999px;background:#120f1a;border:1px solid color-mix(in srgb,var(--c) 45%,transparent);font:500 13px/1 var(--body);color:#f4f4f5}
.or-chip i{width:8px;height:8px;border-radius:50%;background:var(--c)}
.or-dots i{position:absolute;top:50%;left:50%;width:7px;height:7px;margin:-3.5px 0 0 -3.5px;border-radius:50%;background:var(--c);opacity:0;z-index:1}
.or[data-mode="rent"] .or-dots i{animation:orToL 2.4s linear infinite}
.or[data-mode="own"] .or-dots i{animation:orToR 2.4s linear infinite}
.or-dots i:nth-child(2){animation-delay:-.8s!important}
.or-dots i:nth-child(3){animation-delay:-1.6s!important}
@keyframes orToL{0%{left:50%;opacity:0}12%{opacity:1}88%{opacity:1}100%{left:3%;opacity:0}}
@keyframes orToR{0%{left:50%;opacity:0}12%{opacity:1}88%{opacity:1}100%{left:97%;opacity:0}}
.or-top .or-lane{padding:4px 0 14px;gap:8px}
.or-vid{position:relative;width:78px;aspect-ratio:9/16;border-radius:12px;overflow:hidden;background:#000;box-shadow:0 20px 50px rgba(0,0,0,.6)}
.or-vid img{width:100%;height:100%;object-fit:cover;display:block}
.or-vid::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 50%,rgba(0,0,0,.75))}
.or-vid .pl{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:1;width:26px;height:26px;border-radius:50%;background:rgba(0,0,0,.4);display:grid;place-items:center}
.or-vid .pl .i{width:11px;height:11px;color:#fff}
.or-vid b{position:absolute;left:7px;right:7px;bottom:7px;z-index:1;font:600 10.5px/1.2 var(--display);color:#fff}
@media (max-width:860px){
  .or-row{grid-template-columns:minmax(0,1fr)}
  .or-row>.or-l,.or-row>.or-r{text-align:left;border-radius:0!important;padding:14px 16px;border-top:0!important}
  .or-l .or-cell{flex-direction:row}
  .or[data-mode="rent"] .or-r,.or[data-mode="own"] .or-l{display:none}
  .or-row:not(.or-top){border:1px solid var(--line);border-radius:14px;margin-top:10px;overflow:hidden}
  .or-row:not(.or-top) .or-lane{order:-1;min-height:0;place-items:start;padding:14px 16px 0}
  .or-row:not(.or-top)>.or-l,.or-row:not(.or-top)>.or-r{background:none!important;padding-top:10px}
  .or-row:not(.or-top){background:color-mix(in srgb,#e879f9 5%,var(--surface))}
  .or-row:not(.or-top) .or-lane::before,.or-row:not(.or-top) .or-lane::after,.or-dots{display:none}
  .or-top{justify-items:center;text-align:center}
  .or-top .or-lane{order:-1}
  .or-top>.or-l,.or-top>.or-r{background:none!important;text-align:center}
  .or-dest{align-items:center}
}
/* Skills console spotlight: the list on the left says what each screen is; the active screen fills the stage; a bar shows when it moves on */
.spot{margin-top:34px;display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.3fr);grid-template-rows:repeat(4,auto) 1fr;column-gap:36px;row-gap:6px;align-items:start}
.spot-item{display:contents}
.spot-btn{all:unset;grid-column:1;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;gap:6px;padding:16px 18px 18px;border-radius:14px;border:1px solid transparent;transition:background .3s,border-color .3s}
.spot-btn:hover{background:rgba(255,255,255,.03)}
.spot-btn:focus-visible{outline:2px solid var(--orange-soft);outline-offset:2px}
.spot-item.on .spot-btn{background:var(--surface);border-color:var(--line)}
.spot-k{font:500 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.spot-item.on .spot-k{color:var(--orange-soft)}
.spot-btn b{font:600 18px/1.3 var(--display);color:var(--muted);transition:color .3s}
.spot-item.on .spot-btn b{color:#fff}
.spot-t{display:none;font-size:15px;line-height:1.5;color:var(--muted)}
.spot-item.on .spot-t{display:block}
.spot-bar{display:block;height:2px;margin-top:8px;border-radius:2px;background:var(--line);overflow:hidden;opacity:0}
.spot-item.on .spot-bar{opacity:1}
.spot-bar i{display:block;height:100%;background:var(--orange-soft);transform:scaleX(0);transform-origin:left}
.spot.run .spot-item.on .spot-bar i{animation:spotbar var(--dur,6s) linear forwards}
@keyframes spotbar{to{transform:scaleX(1)}}
.spot-fig{grid-column:2;grid-row:1/6;margin:0;height:100%;opacity:0;transition:opacity .5s var(--ease);pointer-events:none}
.spot-item.on .spot-fig{opacity:1;pointer-events:auto}
.spot-fig .dstage{height:100%;min-height:420px}
@media (max-width:860px){
  .spot{margin-top:24px;grid-template-rows:none;row-gap:0}
  .spot-item{display:flex;flex-direction:column;border-radius:16px;overflow:hidden;background:var(--surface);border:1px solid var(--line)}
  .spot-fig{order:-1;opacity:1;height:auto;pointer-events:auto}
  .spot-fig .dstage{min-height:220px;border-radius:0;padding:20px 16px}
  .spot-btn{cursor:default;background:none!important;border:0;padding:16px 18px 20px}
  .spot-k{color:var(--orange-soft)}
  .spot-btn b{color:#fff}
  .spot-t{display:block}
  .spot-bar{display:none}
}
/* Live demos are named by the kind of team they show; no addresses */
.live-tag{flex-shrink:0;display:inline-flex;align-items:center;gap:7px;height:28px;padding:0 11px;border-radius:999px;background:rgba(255,255,255,.06);font:500 12px/1 var(--mono);color:#e4e4e7;white-space:nowrap}
.live-tag i{width:7px;height:7px;border-radius:50%;background:var(--ok);animation:livepulse 2s ease-out infinite}
.live-tag.soon i{background:var(--fuchsia);animation:none}
.live.so{background:linear-gradient(135deg,rgba(232,121,249,.16),rgba(99,102,241,.08) 45%,rgba(12,12,17,1) 75%);border-color:rgba(232,121,249,.3)}
.live.so .live-site:hover{border-color:rgba(232,121,249,.55)}
.lgroup{grid-column:1/-1;display:flex;align-items:center;gap:8px;margin:8px 0 0;font:500 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.lgroup:first-of-type{margin-top:0}
.lchoice input[value$="demo"]+span small{color:var(--fuchsia)}
.lchoice input[value$="demo"]:checked+span{border-color:var(--fuchsia);background:linear-gradient(160deg,rgba(232,121,249,.12),var(--surface-2) 60%)}
@media (max-width:640px){.live-site{flex-direction:column;align-items:flex-start}}
/* Compare: one tab per buyer. What they shortlist, what they weigh side by side with an honest verdict, and when we are not the choice */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.cmp-sec{padding-top:0}
.cmp-tabs{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:10px}
.cmp-tab{all:unset;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;gap:5px;padding:16px 18px;border-radius:14px;background:var(--surface);border:1px solid var(--line);transition:border-color .25s,background .25s}
.cmp-tab b{font:600 16px/1.3 var(--display);color:#e4e4e7}
.cmp-tab span{font-size:13px;line-height:1.4;color:var(--dim)}
.cmp-tab:hover{border-color:var(--line-2)}
.cmp-tab:focus-visible{outline:2px solid var(--indigo-soft);outline-offset:2px}
.cmp.skills .cmp-tab[aria-selected="true"]{border-color:rgba(249,115,22,.6);background:linear-gradient(160deg,rgba(249,115,22,.12),var(--surface) 65%)}
.cmp.social .cmp-tab[aria-selected="true"]{border-color:rgba(232,121,249,.6);background:linear-gradient(160deg,rgba(232,121,249,.12),var(--surface) 65%)}
.cmp-tab[aria-selected="true"] b{color:#fff}
.cmp-panel{margin-top:30px;display:flex;flex-direction:column;gap:44px}
.cmp-job{display:flex;flex-direction:column;gap:10px;max-width:760px;margin:0;font:400 clamp(18px,1.8vw,21px)/1.55 var(--body);color:#e4e4e7}
.cmp-block h2{margin:0 0 16px}
.cmp-short{border:1px solid var(--line);border-radius:16px;overflow:hidden}
.cs-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr) minmax(0,1.1fr);gap:24px;padding:18px 22px;border-top:1px solid var(--line)}
.cs-row:first-child{border-top:0}
.cs-cat b{display:block;font:600 15.5px/1.35 var(--display);color:#fff}
.cs-cat span{display:block;margin-top:4px;font:400 13px/1.45 var(--mono);color:var(--dim)}
.cs-good,.cs-bad{margin:0;font-size:14.5px;line-height:1.55;color:var(--muted)}
.cs-good small,.cs-bad small{display:block;margin-bottom:4px;font:500 10.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase}
.cs-good small{color:#86efac}.cs-bad small{color:#fca5a5}
.cmp-tbl{border:1px solid var(--line);border-radius:16px;overflow:hidden}
.cmp-tbl table{width:100%;border-collapse:collapse;font-size:15px}
.cmp-tbl th,.cmp-tbl td{padding:15px 18px;text-align:left;vertical-align:top;border-top:1px solid var(--line)}
.cmp-tbl thead th{border-top:0;font:500 11.5px/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--dim);background:var(--surface)}
.cmp-tbl tbody th{width:24%;font:600 15px/1.4 var(--display);color:#fff}
.cmp-tbl td{color:var(--muted);line-height:1.5}
.cmp-tbl td:nth-child(3){color:#f4f4f5;background:rgba(255,255,255,.025)}
.cmp.skills .cmp-tbl thead th:nth-child(3){color:var(--orange-soft)}
.cmp.social .cmp-tbl thead th:nth-child(3){color:#f0abfc}
.cmp-v{width:112px;text-align:right!important}
.vd{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:999px;font:500 11.5px/1 var(--mono);letter-spacing:.04em;white-space:nowrap}
.vd.ahead{background:rgba(34,197,94,.14);color:#86efac}
.vd.level{background:rgba(255,255,255,.07);color:#d4d4d8}
.vd.no{background:transparent;color:var(--dim);box-shadow:inset 0 0 0 1px var(--line-2)}
.cmp-key{margin:14px 0 0;display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-size:13px;color:var(--dim)}
.cmp-key .vd{margin-left:6px}.cmp-key .vd:first-child{margin-left:0}
.cmp-nfl{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.cmp-nfl li{display:grid;grid-template-columns:18px minmax(0,1fr);gap:12px;padding:16px 18px;border-radius:14px;background:var(--surface);border:1px solid var(--line);font-size:15px;line-height:1.5;color:#e4e4e7}
.cmp-nfl .i{width:15px;height:15px;margin-top:3px;color:var(--dim)}
@media (max-width:860px){
  .cmp-tabs{display:flex;flex-wrap:wrap;gap:8px}
  .cmp-tab{padding:10px 15px;border-radius:999px}
  .cmp-tab span{display:none}
  .cmp-tab b{font-size:14.5px;white-space:nowrap}
  .cs-row{grid-template-columns:minmax(0,1fr);gap:10px;padding:16px 18px}
  .cmp-tbl{border:0;border-radius:0;overflow:visible}
  .cmp-tbl thead{display:none}
  .cmp-tbl table,.cmp-tbl tbody,.cmp-tbl tr,.cmp-tbl th,.cmp-tbl td{display:block;width:auto}
  .cmp-tbl tr{position:relative;margin-top:10px;padding:16px 18px;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
  .cmp-tbl tbody th{width:auto;padding:0 96px 10px 0;border:0}
  .cmp-tbl td{padding:8px 0 0;border:0;background:none!important}
  .cmp-tbl td[data-l]::before{content:attr(data-l);display:block;margin-bottom:3px;font:500 10.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
  .cmp.skills .cmp-tbl td:nth-child(3)::before{color:var(--orange-soft)}
  .cmp.social .cmp-tbl td:nth-child(3)::before{color:#f0abfc}
  .cmp-v{position:absolute;top:14px;right:16px;width:auto;padding:0!important}
  .cmp-nfl{grid-template-columns:minmax(0,1fr)}
}
.cmp-nfl.along{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.vd.built{background:rgba(165,180,252,.12);color:#c7d2fe}
.cmp-nfl.along li{background:linear-gradient(160deg,rgba(255,255,255,.035),var(--surface) 60%)}
.cmp-nfl.along .i{color:var(--ok)}
/* ── Skills two parts: a phone playing the real recording, chapters beside it; only the active chapter shows its sentence ── */
.part{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:28px;align-items:center;padding:28px}
.part-hd{grid-column:1/-1;margin-bottom:24px}
.part-hd h3{display:flex;align-items:center;gap:10px}
.part-hd p{margin-top:6px}
.part-phone{--pw:200px}
.part-phone video{position:absolute;left:var(--pp);top:calc(var(--pp) + var(--pb));width:calc(100% - 2 * var(--pp));height:calc(100% - 2 * var(--pp) - var(--pb));margin:0;object-fit:cover;object-position:top;border-radius:0 0 var(--ps) var(--ps);background:transparent}
.part.still .part-phone video{visibility:hidden}
.chap{display:flex;flex-direction:column;gap:2px}
.chap button{all:unset;box-sizing:border-box;cursor:pointer;display:grid;grid-template-columns:2px minmax(0,1fr);column-gap:16px;padding:10px 0}
.chap button:focus-visible{outline:2px solid var(--orange-soft);outline-offset:4px;border-radius:6px}
.chap i{grid-row:1/span 2;position:relative;width:2px;border-radius:2px;background:var(--line-2);overflow:hidden}
.chap i s{position:absolute;left:0;top:0;width:100%;height:var(--p,0%);background:var(--orange-soft);border-radius:2px}
.chap b{font:600 16.5px/1.3 var(--display);color:var(--dim);transition:color .3s}
.chap button:hover b{color:#d4d4d8}
.chap span{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .45s var(--ease),opacity .3s}
.chap em{overflow:hidden;min-height:0;font-style:normal;font-size:14.5px;line-height:1.5;color:var(--muted)}
.chap button[aria-pressed="true"] b{color:#fff}
.chap button[aria-pressed="true"] span{grid-template-rows:1fr;opacity:1}
.chap button[aria-pressed="true"] em{padding-top:6px}
@media (max-width:640px){
  .part{grid-template-columns:128px minmax(0,1fr);column-gap:16px;padding:20px}
  .part-hd{margin-bottom:18px}
  .part-phone{--pw:128px}
  .chap button{column-gap:12px;padding:8px 0}
  .chap b{font-size:15px}
  .chap em{font-size:13px;line-height:1.45}
}
/* ── Mobile swipe rows (.hs on any container of peer cards). A phone shows one card and the edge of the next; the page stays short.
   .hs-sm for compact cards (about one and a half on screen), .hs-xs for title-only links (about two) ── */
.hs-dots{display:none}
@media (max-width:860px){
  .hs.hs{display:grid;grid-template-columns:none;grid-template-rows:none;grid-auto-flow:column;grid-auto-columns:86%;gap:14px;align-items:stretch;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;
    margin-left:calc(-1 * max(20px,env(safe-area-inset-left,0px)));margin-right:calc(-1 * max(20px,env(safe-area-inset-right,0px)));
    padding:2px max(20px,env(safe-area-inset-right,0px)) 6px max(20px,env(safe-area-inset-left,0px));scroll-padding-inline:max(20px,env(safe-area-inset-left,0px))}
  .hs.hs-sm{grid-auto-columns:72%}
  .hs.hs-xs{grid-auto-columns:47%}
  .hs.hs::-webkit-scrollbar{display:none}
  .hs.hs>*{scroll-snap-align:start;min-width:0;margin-top:0}
  .hs-dots{display:flex;justify-content:center;gap:6px;margin-top:16px}
  .hs-dots[hidden]{display:none}
  .hs-dots i{width:6px;height:6px;border-radius:50%;background:var(--line-2);transition:width .3s var(--ease),background .3s}
  .hs-dots i.on{width:22px;border-radius:3px;background:#fff}
  /* lists that become cards when they swipe */
  .ticks.hs>li{padding:18px;border-radius:16px;background:var(--surface);border:1px solid var(--line);font-size:15px;line-height:1.5}
  .ticks.hs>li b{display:block;margin-bottom:4px;color:#fff;font-family:var(--display)}
  .cmp-short.hs{border:0;border-radius:0}
  .cmp-short.hs .cs-row{border:1px solid var(--line);border-radius:16px;background:var(--surface);align-content:start}
  .cmp-nfl.hs{grid-template-columns:none}
  .live-sites.hs .live-site{height:100%;box-sizing:border-box}
}
/* ── Compare criteria on a phone: each row folds to its name and verdict; tap to read both sides (the first starts open) ── */
@media (max-width:860px){
  .cmp-tbl tr.acc{cursor:pointer;-webkit-tap-highlight-color:transparent}
  .cmp-tbl tr.acc th{padding:0 132px 0 0}
  .cmp-tbl tr.acc.open th{padding-bottom:10px}
  .cmp-tbl tr.acc td[data-l]{display:none}
  .cmp-tbl tr.acc.open td[data-l]{display:block}
  .cmp-tbl tr.acc .cmp-v{right:46px}
  .cmp-tbl tr.acc::after{content:"";position:absolute;top:20px;right:22px;width:7px;height:7px;border-right:1.5px solid var(--dim);border-bottom:1.5px solid var(--dim);transform:rotate(45deg);transition:transform .25s var(--ease)}
  .cmp-tbl tr.acc.open::after{top:24px;transform:rotate(-135deg)}
  .cmp-tbl tr.acc:focus-visible{outline:2px solid var(--indigo-soft);outline-offset:2px}
}
/* tablets: two cards and the edge of a third, not one giant card */
@media (min-width:561px) and (max-width:860px){.hs.hs{grid-auto-columns:62%}.hs.hs-sm{grid-auto-columns:44%}.hs.hs-xs{grid-auto-columns:31%}}
/* ── Home hero audience rail: every audience named beside the phone, grouped by product. The one playing is white and its
   line fills with the recording; it moves on when the recording ends, and stays put once the visitor picks one ── */
.rp-stage{display:flex;align-items:center;justify-content:center;gap:clamp(18px,2.2vw,32px)}
.rp-stage .pwrap{width:auto;flex:0 0 auto}
.rp-rail{display:flex;flex-direction:column;align-items:stretch;flex:0 0 auto}
.rp-gh{display:flex;align-items:center;gap:7px;margin:18px 0 6px;font:500 10.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.rp-gh:first-child{margin-top:0}
.rp-gh .pmark{width:14px;height:14px}
.rp-rail button{all:unset;box-sizing:border-box;cursor:pointer;display:grid;grid-template-columns:2px auto;column-gap:12px;padding:7px 10px 7px 0;font:500 15px/1.25 var(--display);color:rgba(255,255,255,.5);white-space:nowrap;transition:color .25s}
.rp-rail button.sk{--c:var(--orange-soft)}
.rp-rail button.so{--c:var(--fuchsia)}
.rp-rail button i{position:relative;width:2px;border-radius:2px;background:rgba(255,255,255,.12);overflow:hidden}
.rp-rail button i::after{content:"";position:absolute;left:0;top:0;width:100%;height:0;background:var(--c);border-radius:2px}
.rp-rail button:hover{color:rgba(255,255,255,.85)}
.rp-rail button:hover i{background:rgba(255,255,255,.3)}
.rp-rail button[aria-selected="true"]{color:#fff}
.rp-rail button[aria-selected="true"] i{background:color-mix(in srgb,var(--c) 30%,transparent)}
.rp-rail button[aria-selected="true"] i::after{height:var(--p,0%)}
.rp-rail button:focus-visible{outline:2px solid var(--indigo-soft);outline-offset:2px;border-radius:6px}
@media (max-width:640px){.rp-stage{gap:16px}.rp-rail button{font-size:14px;padding:6px 4px 6px 0;column-gap:10px}.rp-gh{margin:14px 0 4px}}
/* ── Home workspaces on a phone: one compact card each. Words, the audiences as a quiet line (not pills), the link,
   then the phone rising from the card's bottom edge with no fade ── */
@media (max-width:640px){
  .wsc.wsc-ph{display:flex;flex-direction:column;gap:12px;padding:22px 22px 0;min-height:0}
  .wsc.wsc-ph .wsc-tag{gap:5px 8px}
  .wsc.wsc-ph .wsc-tag em{flex-basis:100%;font-size:12.5px}
  .wsc.wsc-ph h3{font-size:24px;margin-top:2px}
  .wsc.wsc-ph p{font-size:14.5px;line-height:1.55}
  .wsc.wsc-ph .chips{gap:2px 0;margin-left:-19px;clip-path:inset(0 0 0 19px)}
  .wsc.wsc-ph .chip{height:auto;padding:0;background:none;box-shadow:none;border-radius:0;font-size:13px;line-height:1.5;color:#d4d4d8}
  .wsc.wsc-ph .chip::before{content:"";flex:0 0 3px;height:3px;border-radius:50%;margin:0 8px;background:var(--dim)}
  .wsc.wsc-ph .arrow-link{order:1;margin-top:2px;padding:0}
  .wsc.wsc-ph .wsc-peek{order:2;margin:auto 0 0;padding-top:20px;height:236px;-webkit-mask-image:none;mask-image:none}
  .wsc.wsc-ph .wsc-peek .dphone{--pw:196px}
}
/* touch screens: a tap must not leave a card lifted (it knocked swipe rows out of line) */
@media (hover:none){
  .wsc:hover,.ucc:hover,.uc:hover,.capc:hover,.route:hover,.live-site:hover,.cmp-pick:hover,.btn-g:hover,.btn-o:hover{transform:none}
  .wsc:hover .wsc-peek .dphone,.ucc:hover .ucc-stage .dphone,.capc:hover .capc-art .dcard,.capc:hover .capc-art .dphone{transform:none}
}
/* ── Go-live stepper (home and every solution page). Four steps beside one stage; the stage shows the real screen for the
   step that is lit, and only that step shows its line. It walks through on its own while on screen (5s a step), holds on
   hover, and stops once the visitor picks a step ── */
.gl{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(28px,4.5vw,64px);align-items:center;margin-top:40px}
.gl.gl-o{--c:var(--orange-soft);--tint:rgba(249,115,22,.24)}
.gl.gl-f{--c:#f0abfc;--tint:rgba(232,121,249,.22)}
.gl.gl-ind{--c:var(--indigo-soft);--tint:rgba(99,102,241,.26)}
.gl-list{display:flex;flex-direction:column}
.gl-list button{all:unset;box-sizing:border-box;cursor:pointer;position:relative;display:grid;grid-template-columns:32px minmax(0,1fr);column-gap:16px;padding:0 0 24px}
.gl-list button:last-child{padding-bottom:0}
.gl-list button::before,.gl-list button i{content:"";position:absolute;left:15px;top:38px;bottom:6px;width:2px;border-radius:2px;background:rgba(255,255,255,.1)}
.gl-list button i{background:none;overflow:hidden}
.gl-list button i::after{content:"";position:absolute;left:0;top:0;width:100%;height:var(--p,0%);background:var(--c);border-radius:2px}
.gl-list button:last-child::before,.gl-list button:last-child i{display:none}
.gl-n{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font:500 11.5px/1 var(--mono);color:var(--dim);background:var(--bg);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);transition:color .3s,box-shadow .3s,background .3s}
.gl-t{display:flex;flex-direction:column;padding-top:5px;min-width:0}
.gl-t b{font:600 17px/1.3 var(--display);color:rgba(255,255,255,.55);transition:color .3s}
.gl-t>span{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .45s var(--ease),opacity .3s}
.gl-t em{overflow:hidden;min-height:0;font-style:normal;font-size:15px;line-height:1.5;color:var(--muted)}
.gl-list button:hover .gl-t b{color:rgba(255,255,255,.85)}
.gl-list button[aria-selected="true"] .gl-t b{color:#fff}
.gl-list button[aria-selected="true"] .gl-t>span{grid-template-rows:1fr;opacity:1}
.gl-list button[aria-selected="true"] .gl-t em{padding-top:6px}
.gl-list button[aria-selected="true"] .gl-n{color:#fff;box-shadow:inset 0 0 0 1.5px var(--c)}
.gl-list button.done .gl-n{color:#0b0b10;background:var(--c);box-shadow:none}
.gl-list button:focus-visible{outline:2px solid var(--c);outline-offset:4px;border-radius:8px}
.gl-stage{position:relative;aspect-ratio:16/10;border-radius:22px;overflow:hidden;border:1px solid var(--line);background:radial-gradient(90% 90% at 50% 100%,var(--tint),transparent 70%),linear-gradient(180deg,#101018,#09090d)}
.gl-v{position:absolute;inset:0;display:grid;place-items:center;opacity:0;transform:translateY(10px);transition:opacity .5s var(--ease),transform .6s var(--ease);pointer-events:none}
.gl-v.on{opacity:1;transform:none}
.gl-card{display:block;max-width:82%;max-height:80%;width:auto;height:auto;border-radius:14px;box-shadow:0 30px 70px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.06)}
.gl-win{position:absolute;left:7%;right:7%;top:9%;bottom:0;display:flex;flex-direction:column;border-radius:12px 12px 0 0;overflow:hidden;background:#fff;box-shadow:0 30px 70px rgba(0,0,0,.55)}
.gl-win img{flex:1;min-height:0;width:100%;object-fit:cover;object-position:top}
.gl-ep{width:82%;border-radius:12px;overflow:hidden;box-shadow:0 30px 70px rgba(0,0,0,.55)}
/* a size container, so the phone can be a share of the stage in cqw (a length the phone's frame can scale from) */
.gl-ph{container-type:inline-size;position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;gap:14px;padding-top:6%}
.gl-ph .dphone{--pw:clamp(150px,34cqw,230px);flex-shrink:0;align-self:center}
.gl-url{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);font:500 13px/1 var(--mono);color:#fff;white-space:nowrap}
.gl-url .i{width:12px;height:12px;color:#86efac}
.gl-attr{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(18px,3vw,32px);align-items:center;width:84%}
.gl-clip{position:relative;height:clamp(200px,30vw,330px);aspect-ratio:9/16;border-radius:16px;overflow:hidden;background:#000;box-shadow:0 30px 70px rgba(0,0,0,.55)}
.gl-clip img{width:100%;height:100%;object-fit:cover;display:block}
.gl-cta{position:absolute;left:8px;right:8px;bottom:8px;font:600 12px/1 var(--body);color:#fff;background:#7c3aed;padding:9px 10px;border-radius:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gl-attr.so .gl-cta{background:linear-gradient(90deg,#6366f1,#c026d3)}
.gl-out{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.gl-out li{display:flex;align-items:center;gap:12px;opacity:0;transform:translateX(10px)}
.gl-v.on .gl-out li{animation:atIn .5s var(--ease) both;animation-delay:calc(var(--d) * .7s + .3s)}
.gl-out li>span{flex:0 0 28px;height:28px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.08);color:var(--muted)}
.gl-out li>span .i{width:14px;height:14px}
.gl-out b{display:block;font:600 15px/1.3 var(--display);color:#fff}
.gl-out small{font-size:12.5px;color:var(--muted)}
.gl-out li.win>span{background:#16a34a;color:#fff}
.gl-out li.win b{color:#86efac}
.ep-logo{background:var(--epc,#2563eb)}.ep-hero small{color:var(--epc,#2563eb)}
@media (max-width:860px){
  .gl{grid-template-columns:minmax(0,1fr);gap:22px;margin-top:28px}
  .gl-stage{order:-1;aspect-ratio:4/3;border-radius:18px}
  .gl-list button{grid-template-columns:28px minmax(0,1fr);column-gap:14px;padding-bottom:14px}
  .gl-list button::before,.gl-list button i{left:13px;top:32px;bottom:4px}
  .gl-n{width:28px;height:28px;font-size:10.5px}
  .gl-t{padding-top:4px}
  .gl-t b{font-size:15.5px}
  .gl-t em{font-size:14px}
  .gl-ep{width:88%}
  .gl-win{left:6%;right:6%;top:8%}
  .gl-ph{gap:10px;padding-top:5%}.gl-ph .dphone{--pw:40cqw}
  .gl-url{font-size:11.5px;padding:6px 11px}
  .gl-attr{width:90%;gap:16px}.gl-clip{height:clamp(170px,52vw,240px);border-radius:12px}
  .gl-cta{font-size:10.5px;padding:7px 8px;left:6px;right:6px;bottom:6px}
  .gl-out{gap:10px}.gl-out b{font-size:13px}.gl-out small{font-size:11px}.gl-out li{gap:9px}.gl-out li>span{flex-basis:22px;height:22px}
}
/* audience picker (component 47, home and Social): every audience named in a list beside one stage; on phones the
   stage sits on top and the audiences are a two-column grid of chips, so every option shows without a sideways scroll */
.aud{display:grid;grid-template-columns:minmax(220px,.62fr) minmax(0,1.38fr);gap:clamp(24px,4vw,56px);align-items:center;margin-top:36px}
.aud-list{display:flex;flex-direction:column}
.aud-gh{display:flex;align-items:center;gap:8px;margin:22px 0 8px;font:500 10.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.aud-gh:first-child{margin-top:0}
.aud-gh .pmark{width:14px;height:14px}
.aud-list button{all:unset;box-sizing:border-box;cursor:pointer;position:relative;display:grid;grid-template-columns:minmax(0,1fr);padding:9px 0 9px 18px}
.aud-list button.sk{--c:var(--orange-soft)}.aud-list button.so{--c:#f0abfc}
.aud-list button b{font:600 17px/1.3 var(--display);color:rgba(255,255,255,.5);transition:color .25s}
.aud-list button b span{display:inline;grid-template-rows:none;opacity:1;padding:0;font:inherit;color:inherit}.aud-list .aud-s{display:none}
.aud-list button>span{display:grid;grid-template-rows:0fr;opacity:0;font-size:14px;line-height:1.45;color:var(--muted);overflow:hidden;transition:grid-template-rows .4s var(--ease),opacity .3s,padding .3s}
.aud-list button i{position:absolute;left:0;top:9px;bottom:9px;width:2px;border-radius:2px;background:rgba(255,255,255,.1);overflow:hidden}
.aud-list button i::after{content:"";position:absolute;left:0;top:0;width:100%;height:var(--p,0%);background:var(--c);border-radius:2px}
.aud-list button:hover b{color:rgba(255,255,255,.85)}
.aud-list button[aria-selected="true"] b{color:#fff}
.aud-list button[aria-selected="true"]>span{grid-template-rows:1fr;opacity:1;padding-top:3px}
.aud-list button[aria-selected="true"] i{background:color-mix(in srgb,var(--c) 28%,transparent)}
.aud-list button:focus-visible{outline:2px solid var(--c);outline-offset:3px;border-radius:8px}
.aud-stage{position:relative;display:grid;min-height:clamp(420px,40vw,500px);border-radius:22px;overflow:hidden;border:1px solid var(--line);background:linear-gradient(180deg,#101018,#09090d)}
.aud-stage::before{content:"";position:absolute;inset:0;background:radial-gradient(80% 90% at 30% 100%,var(--tint,rgba(232,121,249,.22)),transparent 70%);transition:background .6s}
.aud-stage.sk{--tint:rgba(249,115,22,.26)}.aud-stage.so{--tint:rgba(232,121,249,.22)}
.aud-v{grid-area:1/1;position:relative;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:center;gap:clamp(18px,3vw,36px);padding:clamp(22px,3vw,36px) clamp(22px,3.4vw,44px) 0;opacity:0;transform:translateY(10px);transition:opacity .45s var(--ease),transform .55s var(--ease);pointer-events:none}
.aud-v.on{opacity:1;transform:none;pointer-events:auto}
.aud-ph{align-self:end;display:flex;flex-direction:column;align-items:center;gap:14px;height:100%;justify-content:flex-end;-webkit-mask-image:linear-gradient(180deg,#000 80%,transparent);mask-image:linear-gradient(180deg,#000 80%,transparent)}
.aud-ph .dphone{--pw:clamp(170px,17vw,232px);margin-bottom:-18%}
.aud-url{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);font:500 12px/1 var(--mono);color:#fff;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.aud-url .i{width:12px;height:12px;color:#86efac;flex-shrink:0}
.aud-copy{display:flex;flex-direction:column;gap:12px;padding-bottom:clamp(22px,3vw,36px)}
.aud-copy .h3{font-size:clamp(24px,2.3vw,30px);line-height:1.15}
.aud-copy p{color:var(--muted);font-size:16px;line-height:1.55;max-width:34ch}
.aud-go{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin-top:6px}
.aud-go .arrow-link{font-size:15px}
@media (max-width:860px){
  .aud{grid-template-columns:minmax(0,1fr);gap:18px;margin-top:26px}
  .aud-stage{order:-1;min-height:0;border-radius:18px}
  .aud-v{grid-template-columns:auto minmax(0,1fr);gap:18px;padding:20px 18px 0}
  .aud-ph .dphone{--pw:min(124px,32vw);margin-bottom:-30%}
  .aud-url{display:none}
  .aud-copy{gap:8px;padding-bottom:18px}
  .aud-copy .ucc-kicker{font-size:10px;letter-spacing:.1em}
  .aud-copy .h3{font-size:21px}
  .aud-copy p{font-size:14px;line-height:1.5}
  .aud-go{flex-direction:column;align-items:flex-start;gap:12px;margin-top:2px}
  .aud-go .film-link{font-size:14px;gap:10px}.aud-go .film-link .film-pi{width:30px;height:30px}
  .aud-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .aud-gh{grid-column:1/-1;margin:10px 0 0}
  .aud-gh:first-child{margin-top:0}
  .aud-list button{padding:12px 8px 13px;border-radius:12px;background:var(--surface);border:1px solid var(--line);overflow:hidden;text-align:center;transition:border-color .25s,background .25s}
  .aud-list button b{font-size:14px;line-height:1.2;white-space:nowrap}
  .aud-list .aud-l,.aud-list button>span{display:none}.aud-list .aud-s{display:inline}
  .aud-list button i{left:10px;right:10px;top:auto;bottom:0;width:auto;height:2px;background:none}
  .aud-list button i::after{width:var(--p,0%);height:100%}
  .aud-list button[aria-selected="true"]{border-color:color-mix(in srgb,var(--c) 55%,transparent);background:linear-gradient(160deg,color-mix(in srgb,var(--c) 14%,transparent),var(--surface) 70%)}
  .aud-list button[aria-selected="true"] i{background:none}
}
/* a sourced number under a problem: the claim, then its source */
.src-note{margin-top:14px;padding-left:12px;border-left:2px solid rgba(232,121,249,.5);font-size:14px;line-height:1.5;color:var(--muted)}
.src-note span{display:block;margin-top:3px;font:500 11px/1.4 var(--mono);letter-spacing:.06em;color:var(--dim)}
.card.band.monet .monet-acts{display:flex;flex-wrap:wrap;gap:8px 14px;margin-top:12px;font:500 12px/1 var(--mono);letter-spacing:.04em;color:#5eead4}
.monet-acts span+span::before{content:"·";margin-right:14px;color:var(--dim)}
.film{scroll-margin-top:84px}
.sec[id]{scroll-margin-top:64px}
/* solutions carousels on Skills, Social and every solution page ("Also built for", .mini); arrows only when there is more to see */
.ucar.fits .ucar-ctl{display:none}
.ucar.mini{margin-top:18px}
.ucar.mini .ucar-track{grid-auto-columns:clamp(240px,31%,300px)}
.ucar.mini .ucc-stage{height:190px;padding-top:22px}
.ucar.mini .ucc-stage .dphone{--pw:172px}
.ucar.mini .ucc-body{padding:16px 20px 20px;gap:6px}
.ucar.mini .ucc-body .h3{font-size:18px}
.ucar.mini .ucc-body p{font-size:14px}
.ucar.mini .ucc-kicker{display:none}
.card.band.monet{display:flex;align-items:center;gap:18px}
.card.band.monet p{margin-top:4px}
@media (max-width:640px){.ucar.mini .ucar-track{grid-auto-columns:70%}.ucar.mini .ucc-stage{height:170px}.ucar.mini .ucc-stage .dphone{--pw:150px}.card.band.monet{align-items:flex-start}}
/* ── Own or rent, the flow made visible: the chip is centred on its line, the half of the line toward the side that keeps the
   value is lit in the value's colour, and brighter dots run along it. On phones each card reads chip, flow, destination ── */
.or-dots{position:absolute;inset:0;pointer-events:none}
.or-dots i{width:9px;height:9px;margin:-4.5px 0 0 -4.5px;box-shadow:0 0 12px var(--c)}
.or-beam{position:absolute;top:50%;height:2px;margin-top:-1px;border-radius:2px;background:linear-gradient(90deg,var(--c),color-mix(in srgb,var(--c) 30%,transparent));opacity:.7;transition:left .45s var(--ease),right .45s var(--ease)}
.or[data-mode="rent"] .or-beam{left:4px;right:50%;background:linear-gradient(270deg,color-mix(in srgb,var(--c) 30%,transparent),var(--c))}
.or[data-mode="own"] .or-beam{left:50%;right:4px;background:linear-gradient(90deg,color-mix(in srgb,var(--c) 30%,transparent),var(--c))}
.or-row:not(.or-top) .or-lane::after{width:10px;height:10px;margin-top:-5px;border-width:2.5px}
.or-track,.or-to{display:none}
@media (max-width:860px){
  .or-row:not(.or-top) .or-lane{display:flex;align-items:center;gap:10px}
  .or-beam{display:none}
  .or-track{display:block;position:relative;flex:1;min-width:36px;height:2px;background:repeating-linear-gradient(90deg,rgba(255,255,255,.22) 0 4px,transparent 4px 8px)}
  .or-track::after{content:"";position:absolute;right:0;top:50%;width:7px;height:7px;margin-top:-4.5px;border-top:2px solid var(--c);border-right:2px solid var(--c);transform:rotate(45deg)}
  .or-track i{position:absolute;top:50%;left:0;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:var(--c);box-shadow:0 0 10px var(--c);opacity:0;animation:orMob 1.8s linear infinite}
  .or-track i:nth-child(2){animation-delay:-.6s}.or-track i:nth-child(3){animation-delay:-1.2s}
  .or-to{display:inline-flex;flex-shrink:0;align-items:center;height:28px;padding:0 11px;border-radius:999px;font:500 11.5px/1 var(--mono);white-space:nowrap}
  .or-to b{display:none;font-weight:500}
  .or[data-mode="rent"] .or-to{color:var(--muted);border:1px solid var(--line-2)}
  .or[data-mode="own"] .or-to{color:#fff;background:color-mix(in srgb,var(--c) 26%,transparent);border:1px solid color-mix(in srgb,var(--c) 60%,transparent)}
  .or[data-mode="rent"] .or-to .to-rent,.or[data-mode="own"] .or-to .to-own{display:inline}
}
@keyframes orMob{0%{left:0;opacity:0}15%{opacity:1}85%{opacity:1}100%{left:calc(100% - 8px);opacity:0}}
/* ── Landscape screenshots on phones: readable size, panned sideways, with a hint until the first swipe ── */
.pan-hint{display:none}
@media (max-width:640px){
  .win:has(.shot){position:relative}
  .shot-body{overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scrollbar-width:none}
  .shot-body::-webkit-scrollbar{display:none}
  .shot{width:880px;max-width:none;height:auto;aspect-ratio:16/10}
  .look2{display:flex;align-items:center;gap:14px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;
    margin-left:calc(-1 * max(20px,env(safe-area-inset-left,0px)));margin-right:calc(-1 * max(20px,env(safe-area-inset-right,0px)));padding:4px max(20px,env(safe-area-inset-right,0px)) 8px max(20px,env(safe-area-inset-left,0px))}
  .look2::-webkit-scrollbar{display:none}
  .look2 .win{flex:0 0 880px;max-width:none}
  .look2 .shot-body{overflow:visible}.look2 .shot{width:100%}
  .look2 .shotphone{flex:0 0 220px;width:220px;margin:0}
  .pan-wrap{position:relative}
  .pan-hint{display:inline-flex;align-items:center;gap:7px;position:absolute;right:12px;bottom:14px;z-index:3;padding:8px 12px;border-radius:999px;background:rgba(10,10,15,.82);border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(8px);font:500 12px/1 var(--body);color:#fff;pointer-events:none;transition:opacity .4s}
  .pan-hint .i{width:14px;height:14px}
  .pan-hint.gone{opacity:0}
}
/* Social, Uploads you can trust: a fixed, short stage; the card is cut from the top so the decision shows */
.up-stage{padding:28px 24px 0;align-items:end}
.up-stage .dcard.tail{--h:380px;width:300px;border-radius:16px 16px 0 0}
@media (max-width:860px){.up-stage{padding:22px 16px 0}.up-stage .dcard.tail{--h:300px;width:250px}}
/* ── Trusted by: one looping strip. Each logo sized to the same visual weight (area tuned by eye), all on one centre line.
   Four copies of the set, moved half the track, so the loop never shows a seam. Hover holds it; reduced motion shows one still row ── */
.hero .trust-line{flex-direction:column;align-items:stretch;gap:14px}
.marq{width:100%;max-width:620px;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.marq-track{display:flex;width:max-content;animation:marq 34s linear infinite}
.marq:hover .marq-track{animation-play-state:paused}
.marq-set{display:flex;align-items:center;gap:60px;padding-right:60px}
.marq-set img{display:block;width:auto;flex-shrink:0;filter:brightness(0) invert(1);opacity:.74}
.marq .lg-unilever{height:20px}.marq .lg-lenovo{height:18px}.marq .lg-marketlogic{height:25px}.marq .lg-rebackoffice{height:19px}
@keyframes marq{to{transform:translateX(-50%)}}
@media (max-width:560px){.marq-set{gap:44px;padding-right:44px}.marq .lg-unilever{height:18px}.marq .lg-lenovo{height:16px}.marq .lg-marketlogic{height:23px}.marq .lg-rebackoffice{height:17px}}
/* the logo strip must not widen the hero column on phones */
.hero .wrap{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
@media (max-width:1080px){.hero .wrap{grid-template-columns:minmax(0,1fr)}}
.hero-l,.marq{min-width:0}
/* own or rent on phones: the chip never wraps, so the flow keeps its length */
@media (max-width:860px){.or-row:not(.or-top) .or-lane{gap:8px}.or-chip{white-space:nowrap;flex-shrink:0;height:28px;padding:0 11px;font-size:12.5px}.or-to{padding:0 9px;font-size:11px}}
.up-stage .dcard.tail{--h:420px}
@media (max-width:860px){.up-stage .dcard.tail{--h:320px}}
/* Resources: two short groups, names only. Platform sits under "For your CTO or CIO", off the sales path */
.menu.res{width:440px;grid-template-columns:1fr 1fr;gap:6px 18px}
.menu.res h6{margin:2px 10px 6px}
.menu.res a{display:block;padding:9px 10px;border-radius:9px;font:500 14.5px/1.2 var(--body);color:#e4e4e7}
.menu.res a:hover{background:rgba(255,255,255,.05);color:#fff}
/* home on phones: no endless slideshow (route fast, no infinite scroll) */
@media (max-width:640px){[data-page="home"] .clc-sec{display:none}}
/* Social, where the content comes from: one simple card per source */
.src-card{display:flex;flex-direction:column;gap:10px}
.src-art{position:relative;height:170px;margin:-6px -6px 8px;border-radius:14px;overflow:hidden;display:grid;place-items:center;background:radial-gradient(90% 90% at 50% 100%,rgba(232,121,249,.2),transparent 70%),#0c0b12}
.src-long{position:relative;width:78%;aspect-ratio:16/9;border-radius:10px;overflow:hidden;box-shadow:0 20px 50px rgba(0,0,0,.6)}
.src-long img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.9)}
.src-long .pl{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:34px;height:34px;border-radius:50%;background:rgba(0,0,0,.45);display:grid;place-items:center}
.src-long .pl .i{width:14px;height:14px;color:#fff}
.src-bar{position:absolute;left:8px;right:52px;bottom:10px;height:3px;border-radius:2px;background:rgba(255,255,255,.3)}.src-bar i{display:block;width:34%;height:100%;border-radius:2px;background:#f0abfc}
.src-long small{position:absolute;right:8px;bottom:5px;font:500 10.5px/1 var(--mono);color:#fff}
.src-row{display:flex;gap:8px}
.src-tile{position:relative;width:62px;aspect-ratio:9/16;border-radius:9px;overflow:hidden;box-shadow:0 14px 34px rgba(0,0,0,.55)}
.src-row.two .src-tile{width:70px}
.src-tile img{width:100%;height:100%;object-fit:cover;display:block}
.src-tile small{position:absolute;left:5px;bottom:4px;font:500 9.5px/1 var(--mono);color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.6)}
.src-ok{position:absolute;right:14px;top:14px;display:inline-flex;align-items:center;gap:5px;padding:5px 9px;border-radius:999px;background:#16a34a;color:#fff;font:600 11px/1 var(--body)}.src-ok .i{width:12px;height:12px}
.src-card p{color:var(--muted);font-size:15px}
/* features carousels: Skills orange, Social purple; the analytics teaser */
.capx.sk .capc-k{color:var(--orange-soft)}.capx.so .capc-k{color:#f0abfc}
.capx.sk .capc:hover{border-color:rgba(249,115,22,.45)}.capx.so .capc:hover{border-color:rgba(232,121,249,.45)}
.capx.quad .ucar-track{grid-auto-columns:clamp(260px,23.5%,300px)}
.capx.quad .capc-art{height:250px}
.tease{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);gap:clamp(28px,4vw,56px);align-items:center;margin-top:36px}
.tease-stage{position:relative;height:430px;border-radius:22px;overflow:hidden;border:1px solid var(--line)}
.tease.sk .tease-stage{background:radial-gradient(90% 90% at 30% 100%,rgba(249,115,22,.22),transparent 70%),linear-gradient(180deg,#120d0a,#09090d)}
.tease.so .tease-stage{background:radial-gradient(90% 90% at 30% 100%,rgba(232,121,249,.2),transparent 70%),linear-gradient(180deg,#0f0b18,#09090d)}
.tease-stage img{position:absolute;border-radius:12px;box-shadow:0 30px 70px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.06)}
.tease-stage .t-back{left:6%;top:9%;width:60%;opacity:.9}
.tease-stage .t-front{right:5%;top:24%;width:52%}
.tease-stage::after{content:"";position:absolute;left:0;right:0;bottom:0;height:52%;background:linear-gradient(180deg,transparent,rgba(9,9,13,.94) 72%);z-index:1}
.tease-lock{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);z-index:2;display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;background:rgba(10,10,15,.85);border:1px solid rgba(255,255,255,.16);font:500 13.5px/1 var(--body);color:#fff;white-space:nowrap}
.tease-lock .i{width:14px;height:14px}
.tease-copy{display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.tease-k{margin:0;font:500 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.tease-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.tease-list li{display:flex;align-items:center;gap:10px;font:600 17px/1.3 var(--display);color:#fff}
.tease-list .i{width:16px;height:16px}.tease.sk .tease-list .i{color:var(--orange-soft)}.tease.so .tease-list .i{color:#f0abfc}
.tease-line{margin:2px 0 4px;color:var(--muted);font-size:15px}
@media (max-width:860px){.tease{grid-template-columns:minmax(0,1fr);gap:22px}.tease-stage{height:300px;border-radius:18px}.tease-stage .t-back{width:74%;left:4%;top:7%}.tease-stage .t-front{width:66%;right:4%;top:28%}.tease-list li{font-size:15.5px}.tease-lock{font-size:12.5px;bottom:16px}}
/* phones: a carousel of more than four cards becomes two rows, so it takes one or two swipes, never more */
@media (max-width:640px){
  .ucar.two .ucar-track,.ucar.quad .ucar-track,[data-page="home"] .ucar .ucar-track{grid-template-rows:repeat(2,auto);grid-auto-flow:column;grid-auto-columns:calc(50% - 6px);gap:12px}
  .ucar.quad .ucar-track{grid-auto-columns:calc(50% - 6px)}
  .ucar.two .capc-art,.ucar.quad .capc-art{height:150px;padding:18px 10px 0}
  .ucar.two .capc-art .dphone,.ucar.quad .capc-art .dphone{--pw:96px}
  .ucar.two .capc-art .dcard,.ucar.quad .capc-art .dcard{width:min(var(--w,260px),240px)}
  .ucar.two .capc-body,.ucar.quad .capc-body{padding:12px 12px 14px;gap:6px}
  .ucar.two .capc-body h3,.ucar.quad .capc-body h3{font-size:14.5px;line-height:1.3}
  .ucar.two .capc-body p,.ucar.quad .capc-body p{display:none}
  .ucar.two .capc-more-l,.ucar.quad .capc-more-l{font-size:12.5px;padding-top:4px}
  .ucar.two .capc-k,.ucar.quad .capc-k{font-size:9.5px}
  .ucar.two .capc-art.duo .dphone:first-child,.ucar.quad .capc-art.duo .dphone:first-child{margin:18px -18px 0 0}
  [data-page="home"] .ucar .ucc-stage{height:150px;padding-top:16px}
  [data-page="home"] .ucar .ucc-stage .dphone{--pw:110px}
  [data-page="home"] .ucar .ucc-body{padding:12px 12px 14px;gap:6px}
  [data-page="home"] .ucar .ucc-body .h3{font-size:15px}
  [data-page="home"] .ucar .ucc-body p{display:none}
  .ucar.two .ucar-dots,.ucar.quad .ucar-dots,[data-page="home"] .ucar .ucar-dots{display:none}
  [data-page="home"] .ucar .ucc-kicker{font-size:9.5px;gap:5px}[data-page="home"] .ucar .ucc-kicker .pmark{width:12px;height:12px}
}

@media (max-width:640px){
  .ticks.hs.hs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-flow:row;grid-auto-columns:auto;overflow:visible;margin:0;padding:0;gap:10px}
  .ticks.hs>li{padding:14px 12px;font-size:13.5px;line-height:1.45;flex-direction:column;gap:8px}
  .ticks.hs>li .i{margin-top:0}
  .foot{padding-block:40px 24px}
  .foot-top{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px 14px}
  .foot-top>div:first-child{grid-column:1/-1}
  .foot ul{margin-top:10px;gap:8px}
  .foot li a{font-size:13px}
  .foot h6{font-size:12.5px}
  .foot-about{font-size:13px}
  .ai a{height:28px;padding:0 9px;font-size:12px}
  .foot-bot{margin-top:28px}
}
/* phones: the Skills and Social solutions carousels sit as a grid too (two by two), like home */
@media (max-width:640px){
  [data-page="skills"] .ucar:not(.capx):not(.mini) .ucar-track,[data-page="social"] .ucar:not(.capx):not(.mini) .ucar-track{grid-template-rows:repeat(2,auto);grid-auto-flow:column;grid-auto-columns:calc(50% - 6px);gap:12px}
  [data-page="skills"] .ucar:not(.capx):not(.mini) .ucc-stage,[data-page="social"] .ucar:not(.capx):not(.mini) .ucc-stage{height:150px;padding-top:16px}
  [data-page="skills"] .ucar:not(.capx):not(.mini) .ucc-stage .dphone,[data-page="social"] .ucar:not(.capx):not(.mini) .ucc-stage .dphone{--pw:110px}
  [data-page="skills"] .ucar:not(.capx):not(.mini) .ucc-body,[data-page="social"] .ucar:not(.capx):not(.mini) .ucc-body{padding:12px 12px 14px;gap:6px}
  [data-page="skills"] .ucar:not(.capx):not(.mini) .ucc-body .h3,[data-page="social"] .ucar:not(.capx):not(.mini) .ucc-body .h3{font-size:15px}
  [data-page="skills"] .ucar:not(.capx):not(.mini) .ucc-body p,[data-page="social"] .ucar:not(.capx):not(.mini) .ucc-body p{display:none}
  [data-page="skills"] .ucar:not(.capx):not(.mini) .ucc-kicker,[data-page="social"] .ucar:not(.capx):not(.mini) .ucc-kicker{font-size:9.5px;gap:5px}
  [data-page="skills"] .ucar:not(.capx):not(.mini) .ucar-dots,[data-page="social"] .ucar:not(.capx):not(.mini) .ucar-dots{display:none}
}
/* Solutions hub (/solutions): every audience at once under its product, the same solution cards as Skills and Social.
   Desktop shows them all (Skills three across, Social three then two); tablets swipe; phones get the two-row grid. */
.sol-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px 32px;flex-wrap:wrap}
.sol-head .lead{max-width:560px}
.sol-k{display:inline-flex;align-items:center;gap:8px}
.sol-sec+.sol-sec{padding-top:24px}
@media (min-width:1001px){
  .ucar.sol .ucar-track{grid-auto-flow:row;grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-columns:auto;overflow:visible;-webkit-mask-image:none;mask-image:none}
  .ucar.sol .ucc{grid-column:span 2}
  .ucar.sol.n5 .ucc:nth-child(n+4){grid-column:span 3}
}
@media (max-width:640px){
  .sol-head{flex-direction:column;align-items:flex-start}
  .ucar.sol .ucar-track{grid-template-rows:repeat(2,auto);grid-auto-flow:column;grid-auto-columns:calc(50% - 6px);gap:12px}
  .ucar.sol .ucc-stage{height:150px;padding-top:16px}
  .ucar.sol .ucc-stage .dphone{--pw:110px}
  .ucar.sol .ucc-body{padding:12px 12px 14px;gap:6px}
  .ucar.sol .ucc-body .h3{font-size:15px}
  .ucar.sol .ucc-body p{font-size:13px;line-height:1.4}
  .ucar.sol .ucc-kicker{font-size:9.5px;gap:5px}.ucar.sol .ucc-kicker .pmark{width:12px;height:12px}
  .ucar.sol .ucar-dots{display:none}
  .ucar.sol.n3 .ucar-track{grid-auto-flow:row;grid-template-rows:none;grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* quick-check cards: show the question and the answers, not the empty top of the screen */
.capc[data-cap="quiz"] .capc-art .dphone,.capc[data-cap="rtl"] .capc-art .dphone{margin-top:-120px}
@media (max-width:640px){.capc[data-cap="quiz"] .capc-art .dphone,.capc[data-cap="rtl"] .capc-art .dphone{margin-top:-78px}}
/* ── Social "Fill it": three sources flowing into the tenant's community. Sizes follow the stage width (container units) ── */
.soc{display:inline-flex;gap:6px}
.soc i{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;color:#fff;flex-shrink:0}
.soc i svg{width:56%;height:56%;fill:#fff}
.soc-ig{background:radial-gradient(circle at 30% 107%,#fdf497 0%,#fdf497 5%,#fd5949 45%,#d6249f 60%,#285AEB 90%)}
.soc-yt{background:#ff0000}.soc-li{background:#0a66c2}.soc-tt{background:#010101;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.soc.big{gap:10px}.soc.big i{width:46px;height:46px;border-radius:13px;box-shadow:0 14px 30px rgba(0,0,0,.45)}
div.fill{position:absolute;inset:0;container-type:inline-size;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.42fr) minmax(0,1fr);align-items:center;padding:6% 6%}
.fill-src{display:flex;flex-direction:column;gap:2.2cqw}
.fs{display:flex;align-items:center;gap:1.8cqw;padding:1.5cqw 1.8cqw;border-radius:2cqw;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1)}
.fs .soc{gap:.7cqw}.fs .soc i{width:3.6cqw;height:3.6cqw;border-radius:1cqw}
.fs-t{display:flex;flex-direction:column;gap:.3cqw;min-width:0}
.fs-t b{font:600 clamp(9px,2cqw,15px)/1.2 var(--display);color:#fff;white-space:nowrap}
.fs-t small{font:500 clamp(8px,1.5cqw,11.5px)/1.2 var(--body);color:var(--muted);white-space:nowrap}
.fs-thumb{position:relative;width:8cqw;aspect-ratio:16/10;border-radius:1cqw;overflow:hidden;flex-shrink:0}
.fs-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.fs-thumb em{position:absolute;right:.5cqw;bottom:.4cqw;font:500 clamp(6px,1.1cqw,9px)/1 var(--mono);font-style:normal;color:#fff}
.fs-av{display:flex;flex-shrink:0}
.fs-av img{width:3.6cqw;height:3.6cqw;border-radius:50%;object-fit:cover;border:2px solid #15121d;margin-left:-1cqw}
.fs-av img:first-child{margin-left:0}
.fill-flow{width:100%;height:62%;overflow:visible}
.fill-flow path{fill:none;stroke:color-mix(in srgb,var(--c) 70%,transparent);stroke-width:2;vector-effect:non-scaling-stroke;stroke-dasharray:2 7;stroke-linecap:round}
.gl-v.on .fill-flow path{animation:fillflow 1.4s linear infinite}
@keyframes fillflow{to{stroke-dashoffset:-18}}
.fill-dest{display:flex;flex-direction:column;gap:1.4cqw;padding:2cqw;border-radius:2.4cqw;background:#fff;box-shadow:0 30px 70px rgba(0,0,0,.55)}
.fd-url{display:inline-flex;align-items:center;gap:.8cqw;font:500 clamp(7px,1.45cqw,11px)/1 var(--mono);color:#334155;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fd-url .i{width:1.6cqw;height:1.6cqw;color:#16a34a;flex-shrink:0}
.fd-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.9cqw}
.fd-grid img{width:100%;aspect-ratio:9/13;object-fit:cover;border-radius:1cqw;display:block}
.fd-ok{display:inline-flex;align-items:center;gap:.7cqw;align-self:flex-start;padding:.8cqw 1.3cqw;border-radius:99px;background:#dcfce7;color:#166534;font:600 clamp(7px,1.35cqw,11px)/1 var(--body);white-space:nowrap}
.fd-ok .i{width:1.6cqw;height:1.6cqw}
/* Content, covered: the archive card shows the long video becoming short ones */
.src-long.sm{width:46%}
.src-arrow{display:grid;place-items:center;margin:0 6px;color:#f0abfc}.src-arrow .i{width:18px;height:18px}
.src-art:has(.src-arrow){display:flex;align-items:center;justify-content:center}
@media (max-width:640px){.soc.big i{width:40px;height:40px}}
.grid.src{margin-top:30px}

/* Skip link: off screen until focused (no inline handlers, so the CSP needs no unsafe-inline scripts) */
.skip{position:absolute;left:-9999px;top:8px;z-index:200}.skip:focus{left:8px}

/* Cookie notice (src/assets/analytics.js): a small card bottom left, full width less 12px on phones. No overlay; it sits under
   the phone menu and the film theatre. In: fade and an 8px rise over 200ms; out the same way. */
.consent{position:fixed;z-index:65;inset-inline-start:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));width:min(380px,calc(100vw - 32px));box-sizing:border-box;padding:14px 14px 12px 16px;background:var(--surface-2);border-radius:14px;box-shadow:inset 0 0 0 1px var(--line-2),0 18px 50px rgba(0,0,0,.55);font:400 14px/1.5 var(--body);color:var(--fg);opacity:0;transform:translateY(8px);transition:opacity .2s var(--ease),transform .2s var(--ease)}
.consent.in{opacity:1;transform:none}
.consent p{margin:0}
.consent-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:10px}
.consent-row>a{font-size:13px;color:var(--muted);text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:3px}
.consent-row>a:hover{color:var(--fg)}
.consent-btns{display:flex;gap:6px}
.consent .btn{height:32px;padding:0 14px;font-size:13.5px;border-radius:8px}
.consent[data-mode=ask] .btn{min-width:84px}
.consent-no{height:32px;padding:0 12px;border:0;border-radius:8px;background:none;color:var(--muted);font:500 13.5px/1 var(--body);cursor:pointer;transition:color .2s,background .2s}
.consent-no:hover{color:var(--fg);background:rgba(255,255,255,.06)}
@media (max-width:560px){.consent{inset-inline:12px;width:auto;bottom:calc(12px + env(safe-area-inset-bottom,0px))}}

/* Legal documents and the legal hub */
.legal-doc{max-width:72ch;display:flex;flex-direction:column;gap:14px;color:var(--muted);line-height:1.7}
.legal-doc h2{font:600 20px/1.35 var(--display);color:var(--fg);margin-top:22px;letter-spacing:-.01em}
.legal-doc h3{font:600 16px/1.4 var(--display);color:var(--fg);margin-top:6px}
.legal-doc ul{list-style:disc;padding-inline-start:22px;display:flex;flex-direction:column;gap:6px}
.legal-doc a,.legal-more a{color:var(--fg);text-decoration:underline;text-underline-offset:3px}
.legal-entity{font:500 15px/1.6 var(--mono);color:var(--dim)}
.legal-more{margin-top:18px;padding-top:18px;border-top:1px solid var(--line)}
.ltable-wrap{overflow-x:auto;border-radius:14px;border:1px solid var(--line)}
.ltable{width:100%;border-collapse:collapse;font-size:14px;min-width:520px}
.ltable th,.ltable td{text-align:start;padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:top}
.ltable th{font:600 11px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--dim);background:var(--surface)}
.ltable td{color:var(--muted)}.ltable td:first-child{color:var(--fg)}
.ltable tr:last-child td{border-bottom:0}
.ltable code{font:500 12.5px/1.4 var(--mono);color:var(--fg)}

/* The form field only bots fill in */
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
@media (max-width:640px){
  .ltable{min-width:0}.ltable thead{display:none}
  .ltable,.ltable tbody,.ltable tr,.ltable td{display:block}
  .ltable tr{padding:12px 14px;border-bottom:1px solid var(--line)}.ltable tr:last-child{border-bottom:0}
  .ltable td{padding:2px 0;border:0}.ltable td:first-child{font-weight:600}
}

/* Feature sheet: swiping or stepping to the next feature slides it in from that side */
.cs-in{touch-action:pan-y}
@keyframes csFromR{from{opacity:0;transform:translateX(28px)}to{opacity:1;transform:none}}
@keyframes csFromL{from{opacity:0;transform:translateX(-28px)}to{opacity:1;transform:none}}
.cs-in.cs-from-r .cs-art,.cs-in.cs-from-r .cs-main{animation:csFromR .32s var(--ease)}.cs-in.cs-from-l .cs-art,.cs-in.cs-from-l .cs-main{animation:csFromL .32s var(--ease)}
/* A composite scene (build/scenes.mjs) in the feature sheet: transparent, no card frame */
.cs-art.scene{align-items:center}
.cs-art .cs-scene{display:block;width:100%;max-width:680px;height:auto}
@media (max-width:760px){.cs-art.scene{align-items:flex-start}.cs-art .cs-scene{max-width:340px;margin-inline:auto}}

/* ── Films (component 45): the page's explainer film. No device frame: the film is the content. Landscape above 860px,
   vertical at the phone layout (site.js sets data-shape; the media query is the first paint), sized so all of it and its
   caption line fit on the screen. The frame holds the film and its controls; in the theatre the box around it becomes
   the black page, raised over everything in place (a popover, or fixed where popovers are missing). ── */
.film{--glow:rgba(168,85,247,.32);--fgrad:var(--grad);--fg1:var(--indigo-soft);margin:clamp(32px,4.5vw,52px) auto 0;width:min(100%,calc((100vh - 200px) * 16 / 9))}
.film.sk{--glow:rgba(249,115,22,.28);--fgrad:var(--grad-o);--fg1:var(--orange-soft)}
.film-band .film{margin-top:0}
/* phones: sized to the screen with the browser bars tucked away (lvh), as they are once the visitor has scrolled down to it */
.film[data-shape="v"],.film:not([data-shape]){width:min(100%,calc((100vh - 128px) * 9 / 16));width:min(100%,calc((100lvh - 128px) * 9 / 16))}
.film[data-shape="l"]{width:min(100%,calc((100vh - 200px) * 16 / 9))}
@media (min-width:861px){.film:not([data-shape]){width:min(100%,calc((100vh - 200px) * 16 / 9))}}
.film-box{position:relative;aspect-ratio:16/9;border-radius:18px;overflow:hidden;background:#07070b;border:1px solid var(--line-2);box-shadow:0 34px 100px -28px var(--glow),inset 0 0 0 1px rgba(255,255,255,.03);isolation:isolate;-webkit-tap-highlight-color:transparent;cursor:pointer;outline:0}
@media (max-width:860px){.film:not([data-shape]) .film-box{aspect-ratio:9/16}}
.film-box[data-shape="v"]{aspect-ratio:9/16;border-radius:22px}
.film-box[data-shape="l"]{aspect-ratio:16/9}
.film-frame{position:absolute;inset:0;overflow:hidden;border-radius:inherit;background:#07070b}
.film-frame picture,.film-poster,.film-v{position:absolute;inset:0;width:100%;height:100%;display:block}
.film-poster,.film-v{object-fit:cover}
.film-v{opacity:0;transition:opacity .25s;background:transparent}
.film-v.on{opacity:1}
.film-box.as-img .film-v{opacity:0}
.film-tcap,.film-x{display:none}
/* the big play button (founder, Oct 28: "a big play button on your video might be a little bit cleaner"): on the poster
   with "Watch the film" and the length under it, and alone over a paused film. The circle sits on the film's centre and
   the label hangs below it; the triangle's path carries its own optical nudge (its centroid on the circle's centre), so
   it takes no margin */
.film-play{position:absolute;left:50%;top:50%;z-index:3;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;padding:0;border:0;background:none;color:#fff;cursor:pointer;transition:transform .3s var(--ease),opacity .25s;-webkit-tap-highlight-color:transparent}
.film-frame:hover .film-play{transform:translate(-50%,-50%) scale(1.05)}
.film-pi{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--fgrad);flex-shrink:0;box-shadow:0 6px 24px var(--glow)}
.film-pi svg{width:18px;height:18px;color:#fff;fill:currentColor}
.film-play .film-pi{width:clamp(72px,6.4vw,92px);height:clamp(72px,6.4vw,92px);box-shadow:0 12px 44px var(--glow),0 0 0 8px rgba(255,255,255,.1)}
.film-play .film-pi svg{width:36%;height:36%}
.film-pl{position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:9px;padding:8px 15px;border-radius:999px;background:rgba(8,8,12,.58);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.16)}
.film-pt{font:600 15px/1 var(--display);white-space:nowrap}
.film-pl b{font:500 12px/1 var(--mono);color:rgba(255,255,255,.7);letter-spacing:.04em}
.film-box:not([data-state="idle"]):not([data-state="pause"]) .film-play{opacity:0;pointer-events:none}
.film-box[data-state="pause"] .film-pl{display:none}
/* the muted preview: "Tap for sound" (or "Click for sound"), large and low in the middle, and a thin line for how far it
   has played. A tap anywhere on the film plays it from the top with sound. */
.film-sound{position:absolute;left:50%;bottom:clamp(14px,4%,26px);z-index:3;display:inline-flex;align-items:center;gap:10px;height:48px;padding:0 20px 0 7px;border-radius:999px;background:rgba(8,8,12,.64);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.18);font:600 15px/1 var(--body);color:#fff;white-space:nowrap;opacity:0;transform:translate(-50%,4px);transition:opacity .3s,transform .3s var(--ease);pointer-events:none}
.film-si{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--fgrad);animation:film-ping 2.4s ease-out infinite}
.film-sound .i{width:18px;height:18px}
.film-box[data-state="preview"] .film-sound{opacity:1;transform:translate(-50%,0)}
.film-st.t-click{display:none}
@media (hover:hover) and (pointer:fine){.film-st.t-tap{display:none}.film-st.t-click{display:inline}}
@keyframes film-ping{0%{box-shadow:0 0 0 0 rgba(255,255,255,.4)}60%,100%{box-shadow:0 0 0 10px rgba(255,255,255,0)}}
/* the page's call to action on the film, for its last fifth and whenever it is paused; the end keeps the big one */
.film-cta{position:absolute;left:14px;top:14px;z-index:4;height:38px;padding:0 16px;font-size:14px;border-radius:999px;opacity:0;transform:translateY(-4px);pointer-events:none;transition:opacity .3s,transform .3s var(--ease)}
.film-box.late .film-cta,.film-box[data-state="pause"] .film-cta{opacity:1;transform:none;pointer-events:auto}
.film-box[data-state="end"] .film-cta,.film-box[data-state="preview"] .film-cta,.film-box[data-state="idle"] .film-cta{opacity:0;pointer-events:none}
/* the vertical cuts keep their brand mark at the top and their bottom band clear (the platform safe zone), so it sits low */
.film-box[data-shape="v"] .film-cta{left:50%;top:auto;bottom:clamp(64px,11%,96px);transform:translate(-50%,4px)}
.film-box[data-shape="v"].late .film-cta,.film-box[data-shape="v"][data-state="pause"] .film-cta{transform:translate(-50%,0)}
.film-frame::after{content:"";position:absolute;left:0;bottom:0;z-index:2;height:3px;width:var(--p,0%);background:var(--fgrad);opacity:0;transition:opacity .3s}
.film-box[data-state="preview"] .film-frame::after{opacity:1}
/* waiting for the film: a ring, shown only after a noticeable pause */
.film-spin{position:absolute;left:50%;top:50%;z-index:3;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;border:3px solid rgba(255,255,255,.18);border-top-color:#fff;opacity:0;transition:opacity .2s;pointer-events:none;animation:film-spin .8s linear infinite}
.film-box.wait .film-spin{opacity:1}
@keyframes film-spin{to{transform:rotate(360deg)}}
/* the controls, while it plays with sound: they show on a move or a tap, and stay while paused */
.film-ui{position:absolute;left:0;right:0;bottom:0;z-index:3;display:flex;align-items:center;gap:6px;padding:28px 12px 10px;background:linear-gradient(180deg,transparent,rgba(0,0,0,.72));opacity:0;transform:translateY(6px);transition:opacity .25s,transform .25s var(--ease);pointer-events:none;cursor:default}
.film-box[data-state="pause"] .film-ui,.film-box.ui[data-state="play"] .film-ui,.film-box[data-state="play"] .film-ui:focus-within{opacity:1;transform:none;pointer-events:auto}
.film-b{display:grid;place-items:center;width:38px;height:38px;flex-shrink:0;border:0;border-radius:10px;background:transparent;color:#fff;cursor:pointer}
.film-b:hover{background:rgba(255,255,255,.12)}
.film-b .i{width:20px;height:20px}
.film-b[data-a="cc"][aria-pressed="true"]{color:var(--fg1);background:rgba(255,255,255,.1)}
/* the volume: a slider that opens beside the speaker on hover or focus, on desktop only (a phone has its own buttons) */
.film-vol{display:flex;align-items:center;flex-shrink:0}
.film-vr{display:none}
@media (hover:hover) and (pointer:fine){
  .film-vr{display:block;width:0;height:24px;margin:0;padding:0;opacity:0;background:transparent;-webkit-appearance:none;appearance:none;cursor:pointer;transition:width .25s var(--ease),opacity .2s,margin .25s var(--ease)}
  .film-vol:hover .film-vr,.film-vol:focus-within .film-vr{width:84px;margin:0 8px 0 2px;opacity:1}
  .film-vr::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:linear-gradient(90deg,#fff var(--v,100%),rgba(255,255,255,.28) var(--v,100%))}
  .film-vr::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;margin-top:-4px;border-radius:50%;background:#fff;border:0}
  .film-vr::-moz-range-track{height:4px;border-radius:2px;background:rgba(255,255,255,.28)}
  .film-vr::-moz-range-progress{height:4px;border-radius:2px;background:#fff}
  .film-vr::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:#fff;border:0}
}
.film-t{font:500 12px/1 var(--mono);color:rgba(255,255,255,.8);white-space:nowrap;padding:0 6px;font-variant-numeric:tabular-nums}
.film-seek{flex:1 1 auto;min-width:40px;height:24px;margin:0 6px;background:transparent;-webkit-appearance:none;appearance:none;cursor:pointer;accent-color:#fff}
.film-seek::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:rgba(255,255,255,.28)}
.film-seek::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;margin-top:-5px;border-radius:50%;background:#fff;border:0}
.film-seek::-moz-range-track{height:4px;border-radius:2px;background:rgba(255,255,255,.28)}
.film-seek::-moz-range-progress{height:4px;border-radius:2px;background:#fff}
.film-seek::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:#fff;border:0}
/* the end: the page's one call to action, and Watch again */
.film-end{position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:rgba(0,0,0,.74);-webkit-backdrop-filter:blur(16px) saturate(.7);backdrop-filter:blur(16px) saturate(.7);opacity:0;pointer-events:none;transition:opacity .4s;cursor:default}
.film-box[data-state="end"] .film-end{opacity:1;pointer-events:auto}
.film-again{display:inline-flex;align-items:center;gap:8px;border:0;background:none;color:#e4e4e7;font:500 14px/1 var(--body);cursor:pointer;padding:8px 10px}
.film-again:hover{color:#fff}
.film-again .i{width:14px;height:14px}
/* the voiceover line, under the film and never over its own words */
.film-cap,.film-tcap{min-height:2.9em;margin:16px auto 0;max-width:60ch;padding:0 8px;text-align:center;font:500 clamp(15px,1.4vw,19px)/1.45 var(--body);color:#f4f4f5;text-wrap:balance;opacity:0;transition:opacity .2s}
.film-cap.on,.film-tcap.on{opacity:1}
/* "Watch the film" under the hero buttons */
.film-link{display:inline-flex;align-items:center;gap:12px;align-self:flex-start;margin-top:2px;color:#e4e4e7;font:500 15px/1 var(--body);transition:color .2s}
.film-link:hover{color:#fff}
.film-link .film-pi{width:34px;height:34px;box-shadow:none;transition:transform .3s var(--ease)}
.film-link:hover .film-pi{transform:scale(1.08)}
.film-link .film-pi svg{width:13px;height:13px}
.film-link b{font:500 12px/1 var(--mono);color:var(--dim);letter-spacing:.04em;margin-left:-4px}
.film-link.sk .film-pi{background:var(--grad-o)}
.film-link.so .film-pi{background:var(--grad)}
/* the theatre */
html.film-open,html.film-open body{overflow:hidden}
.film-box.is-th,.film-box.is-th[data-shape]{position:fixed;inset:0;z-index:1000;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;aspect-ratio:auto;border:0;border-radius:0;box-shadow:none;background:#000;color:#fff;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:default;animation:film-in .3s var(--ease)}
.film-box.is-th::backdrop{background:#000}
@keyframes film-in{from{opacity:0}to{opacity:1}}
.film-box.is-th .film-frame{position:relative;inset:auto;flex:none;width:min(calc(100vw - 48px),calc((100vh - 120px) * 16 / 9));width:min(calc(100vw - 48px),calc((100dvh - 120px) * 16 / 9));aspect-ratio:16/9;border-radius:14px;border:1px solid var(--line-2);box-shadow:0 0 120px -30px var(--glow);cursor:pointer}
.film-box.is-th[data-shape="v"] .film-frame{width:min(calc(100vw - 16px),calc((100vh - 72px) * 9 / 16));width:min(calc(100vw - 16px),calc((100dvh - 72px) * 9 / 16));aspect-ratio:9/16;border-radius:18px}
.film-box.is-th .film-big{display:none}
.film-box.is-th .film-tcap{display:block;flex:none;margin-top:14px;width:100%}
.film-box.is-th .film-x{position:absolute;top:max(14px,env(safe-area-inset-top,0px));right:max(14px,env(safe-area-inset-right,0px));z-index:5;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.18);background:rgba(20,20,26,.7);color:#fff;cursor:pointer}
.film-box.is-th .film-x:hover{background:rgba(40,40,48,.9)}
@media (max-width:860px){
  .film{margin-top:28px}
  .film-pi{width:42px;height:42px}
  .film-pt{font-size:15px}
  .film-ui{padding:24px 6px 6px;gap:2px}
  .film-b{width:34px;height:34px}
  .film-t{display:none}
  .film-cap,.film-tcap{font-size:15px;margin-top:12px}
  .film-link{font-size:14px}
  .film-sound{height:46px;font-size:14px}
}
/* fingers: every control 44px, and a seek bar that is easy to catch */
@media (pointer:coarse){
  .film-b{width:44px;height:44px}
  .film-ui{padding:28px 4px 2px;gap:0}
  .film-seek{height:44px;margin:0 4px}
  .film-seek::-webkit-slider-thumb{width:20px;height:20px;margin-top:-8px}
  .film-seek::-moz-range-thumb{width:20px;height:20px}
  .film-cta{height:44px;padding:0 18px}
}
/* a phone turned sideways in the theatre: the film fills the height, the caption sits on it */
@media (max-height:500px) and (orientation:landscape){
  .film-box.is-th .film-frame{width:min(calc(100vw - 24px),calc((100vh - 16px) * 16 / 9));width:min(calc(100vw - 24px),calc((100dvh - 16px) * 16 / 9));border-radius:10px}
  .film-box.is-th .film-tcap{position:absolute;left:0;right:0;bottom:max(10px,env(safe-area-inset-bottom,0px));margin:0 auto;min-height:0;padding:4px 12px;max-width:min(80vw,60ch);font-size:14px;text-shadow:0 1px 3px #000,0 0 12px rgba(0,0,0,.8);pointer-events:none}
  .film-box.is-th .film-x{top:10px;right:max(10px,env(safe-area-inset-right,0px));width:38px;height:38px}
}

/* Language switch and the Arabic suggestion (Arabic stream, Oct 28, 2026). Logical properties only, so this file is the
   same in the left-to-right and right-to-left stylesheets. */
.lsw{display:inline-flex;align-items:center;flex:none;height:32px;padding:2px;border:1px solid rgba(255,255,255,.16);border-radius:999px;background:rgba(255,255,255,.03)}
.lsw a{display:inline-flex;align-items:center;justify-content:center;min-width:36px;height:26px;padding-inline:9px;border-radius:999px;color:rgba(255,255,255,.66);font:600 12px/1 var(--body);letter-spacing:.02em;text-decoration:none;transition:background .2s,color .2s}
.lsw a:hover{color:#fff}
.lsw a[aria-current]{background:rgba(255,255,255,.14);color:#fff}
.lsw a[lang=ar]{font-family:'Noto Kufi Arabic',var(--body);font-size:12.5px;letter-spacing:0;padding-bottom:2px}
html[lang=en]:not(.lsw-on) .lsw{display:none}
.mnav-top .lsw{margin-inline-start:auto;margin-inline-end:10px}
.lsug{position:sticky;top:calc(env(safe-area-inset-top,0px) + 64px);z-index:49;background:#0d0a1f;border-bottom:1px solid var(--line);font-family:'Noto Kufi Arabic',var(--body)}
.lsug .wrap{display:flex;align-items:center;gap:14px;min-height:48px;padding-block:6px;font-size:14px;color:rgba(255,255,255,.86)}
.lsug span{flex:1;min-width:0}
.lsug a{flex:none;display:inline-flex;align-items:center;height:32px;padding-inline:14px;border-radius:999px;background:#fff;color:#000;font-weight:600;font-size:13px;text-decoration:none}
.lsug-x{flex:none;width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:8px;background:rgba(255,255,255,.06);color:#fff;cursor:pointer}
.lsug-x .i{width:16px;height:16px}