/* WORLDWID3 CONN3XUS public site (V3). No web fonts, no third-party requests: everything works under the site's
   Content-Security-Policy ('self' only). Every page reads and works in full without scripts; the scripts only add
   movement, and only when motion is allowed. Colour carries meaning: blue is brands, violet is creators, teal is the
   connection between them, gold is the company mark and nothing else. Token names are shared with the agency operating
   system. Text colours meet WCAG AA on the surfaces they are used on (tests/test_public_site.py checks the pairs). */
:root{--bg:#0c0d10;--bg-2:#111317;--surface:#15171c;--surface-2:#1b1e24;--border:#22252c;--border-2:#2c3038;
  --text:#eceef2;--text-2:#a9afba;--text-3:#80879a;--blue:#5b8cff;--blue-strong:#2f63db;--blue-text:#93b2ff;
  --violet:#b197fc;--violet-strong:#5b3fd6;--teal:#2dd4bf;--signal:#5eead4;--gold:#e2b375;
  --t-blue:#121a2e;--t-violet:#1a1630;--t-teal:#0f2224;
  --line:var(--border);--brand:var(--blue);--creator:var(--violet);--connect:var(--teal);--lit:94,234,212;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --radius:6px;--font:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Inter,Roboto,"Helvetica Neue",Arial,system-ui,sans-serif;
  --display:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Inter,Roboto,"Helvetica Neue",Arial,system-ui,sans-serif}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;color-scheme:dark;scroll-padding-top:84px}
body{margin:0;background:var(--bg);color:var(--text);font:17px/1.6 var(--font);font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased;overflow-x:hidden}
/* Anything moving in from the side starts off screen; main clips it, so the page never scrolls or zooms sideways (phones
   size the page to its widest content otherwise). clip, not hidden: no scroll container, so pins and sticky still work. */
main{overflow-x:clip}
img,svg{max-width:100%;height:auto;display:block}
a{color:var(--blue-text);text-underline-offset:3px}a:hover{text-decoration-thickness:2px}
:focus-visible{outline:2px solid var(--signal);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:-999px;top:8px;z-index:20;background:var(--blue-strong);color:#fff;padding:10px 14px;border-radius:var(--radius)}.skip:focus{left:12px}
.wrap{width:100%;max-width:1180px;margin:0 auto;padding:0 20px}
.three{color:var(--signal)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Header and navigation: a plain list on wide screens, a <details> disclosure on narrow ones (no script needed). */
header.site{position:sticky;top:0;z-index:10;background:rgba(12,13,16,.86);border-bottom:1px solid var(--border);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:68px}
.brand{display:flex;align-items:center;gap:10px;color:var(--text);text-decoration:none;font-weight:700;letter-spacing:-.01em;font-size:18px}
/* The header and footer logo: the Founder's logo image (/assets/logo-mark-112.webp). The span keeps its "W3" text for the shared
   header markup but hides it; the span is aria-hidden and the company name follows it as text. */
.mark{display:inline-block;width:36px;height:36px;border-radius:11px;font-size:0;color:transparent;overflow:hidden;
  background:#000 url(/assets/logo-mark-112.webp) center/cover no-repeat;box-shadow:inset 0 0 0 1px rgba(226,179,117,.32);flex:none}
nav.main ul,nav.mobile ul{list-style:none;margin:0;padding:0}
nav.main ul{display:flex;align-items:center;gap:2px}
nav.main a{display:inline-flex;align-items:center;min-height:44px;padding:6px 13px;border-radius:var(--radius);color:var(--text-2);text-decoration:none;font-size:15.5px;transition:color .15s}
nav.main a:hover,nav.main a[aria-current=page]{color:var(--text)}
nav.main a.btn{color:#fff;margin-left:8px;min-height:44px;padding:8px 16px}
nav.mobile{display:none}
nav.mobile summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:8px 14px;border:1px solid var(--border-2);border-radius:12px;color:var(--text);font-weight:600}
nav.mobile summary::-webkit-details-marker{display:none}
nav.mobile summary .bars{width:18px;height:12px;border-top:2px solid currentColor;border-bottom:2px solid currentColor;position:relative}
nav.mobile summary .bars::after{content:"";position:absolute;left:0;right:0;top:3px;border-top:2px solid currentColor}
nav.mobile[open] summary{background:var(--surface-2)}
nav.mobile ul{position:absolute;left:0;right:0;top:100%;background:var(--bg-2);border-bottom:1px solid var(--border);padding:10px 20px 20px;display:grid;gap:4px}
nav.mobile li a{display:flex;align-items:center;min-height:48px;padding:8px 12px;border-radius:12px;color:var(--text);text-decoration:none;font-size:18px}
nav.mobile li a[aria-current=page]{background:var(--surface-2)}
nav.mobile li a.btn{justify-content:center;margin-top:8px;color:#fff}
@media (max-width:899px){nav.main{display:none}nav.mobile{display:block}}
@media (max-width:400px){header.site .wrap{padding:0 14px;gap:10px}.brand{font-size:16px;gap:8px}.mark{width:32px;height:32px}
  nav.mobile summary{padding:8px 13px}nav.mobile summary .label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}}

/* Type */
h1,h2,h3{font-family:var(--display);color:var(--text);text-wrap:balance}
h1{font-size:clamp(38px,6.4vw,76px);line-height:1.03;letter-spacing:-.035em;margin:0 0 22px;font-weight:640}
h1.page{font-size:clamp(34px,5vw,58px);line-height:1.08}
h2{font-size:clamp(27px,3.4vw,44px);line-height:1.1;letter-spacing:-.025em;margin:0 0 16px;font-weight:640}
h3{font-size:20px;line-height:1.3;letter-spacing:-.01em;margin:0 0 8px;font-weight:620}
p{margin:0 0 14px}
.eyebrow{display:block;color:var(--text-2);font-size:16px;font-weight:550;margin:0 0 12px}
.lede{font-size:clamp(18px,1.6vw,21px);color:var(--text-2);max-width:700px;margin:0 0 30px}
.muted{color:var(--text-3)}
.small{font-size:15px}

/* Buttons: blue acts for brands, violet for creators. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:12px 22px;border-radius:var(--radius);background:var(--blue-strong);color:#fff;font-weight:620;text-decoration:none;border:1px solid transparent;transition:background .15s,border-color .15s,translate .25s,scale .15s}
.btn:hover{background:#366ae6}
.btn.violet{background:var(--violet-strong)}.btn.violet:hover{background:#6a4ee6}
.btn.ghost{background:transparent;border-color:var(--border-2);color:var(--text)}.btn.ghost:hover{background:var(--surface-2);border-color:var(--text-3)}
.actions{display:flex;gap:12px;flex-wrap:wrap;margin:0}
.grid+.actions,.stages+.actions,.checks+.actions,.faq+.actions,.card ul+.actions,.head .actions{margin-top:28px}

/* Heroes. Home (V3): the statement, then the copy beside one diagram. A blue line (your brand, from the left) and a
   violet line (real creators, from the right) meet at the gold mark; from there one teal line runs down through the
   campaign's stages to human review and on, down the page's centre, into the seam of the two doors. The diagram is
   decoration (aria-hidden): the sections below say the same in words. At rest it is fully drawn; with motion it draws
   in once, and a light keeps travelling along each line to the mark. assets/logo-flow.js redraws the mark with light
   flowing along its ribbons. Wide screens put the mark on the page's centre line with the copy to its left, under the
   brand line; narrower ones stack the copy above the diagram. Either way the spine is the page's centre. */
.hero{position:relative;padding:76px 0 64px;--m:clamp(132px,15vw,196px)}
.hero .wrap{position:relative;display:grid;gap:44px;align-items:center}
.hero .tagline{font-size:clamp(19px,1.8vw,23px);color:var(--text);font-weight:560;max-width:620px;margin:0 0 14px;letter-spacing:-.01em}
.hero.page-hero{padding:64px 0 48px}
.hero.home{padding:clamp(44px,4.4vw,56px) 0 clamp(28px,3.5vw,48px);overflow:clip}
.hero.home .wrap{grid-template-columns:minmax(0,1fr);gap:clamp(28px,4vw,48px);align-items:start}
.hero.home h1{font-size:clamp(36px,7.2vw,96px);line-height:1;letter-spacing:-.04em;margin:0}
.hero__bg{position:absolute;inset:0;pointer-events:none;background:radial-gradient(42% 46% at 76% 58%,rgba(255,255,255,.04),transparent 70%)}
.hero-mark{position:relative;display:grid;justify-items:center}
.hero.home .hero-mark{width:100%;max-width:460px;justify-self:center}
.logo-live{position:relative;mix-blend-mode:screen}
.hero.home .logo-live{width:var(--m)}
.logo-live img{display:block;width:100%;height:auto}
.logo-flow{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
.hero__labels{position:relative;list-style:none;margin:0;padding:22px 0 26px;width:100%;display:grid;grid-template-columns:1fr 1fr;gap:12px 36px;
  font:500 14px/1.35 var(--font);color:var(--text-2)}
.hero__labels::before{content:"";position:absolute;left:50%;top:-8px;bottom:0;width:1px;background:var(--teal);transform-origin:top}
.lab{position:relative}
.lab--brand,.lab--creators{position:absolute;left:0;right:calc(50% + var(--m)*.4);bottom:calc(100% + var(--m)/2);padding-bottom:9px;color:var(--blue-text);
  background:linear-gradient(90deg,transparent,var(--text),transparent) -48px 100%/48px 1px no-repeat,linear-gradient(90deg,rgba(91,140,255,.2),var(--blue)) 0 100%/100% 1px no-repeat}
.lab--creators{left:calc(50% + var(--m)*.4);right:0;text-align:right;color:var(--violet);
  background:linear-gradient(90deg,transparent,var(--text),transparent) calc(100% + 48px) 100%/48px 1px no-repeat,linear-gradient(270deg,rgba(177,151,252,.2),var(--violet)) 0 100%/100% 1px no-repeat}
.lab--campaign{grid-row:1/span 3;justify-self:end;align-self:center;color:var(--text);font-weight:600;font-size:15px}
.lab--s{grid-column:2}
.lab--s::before{content:"";position:absolute;left:-22px;top:.42em;width:7px;height:7px;border-radius:50%;background:var(--bg);border:1px solid var(--teal)}
.lab--v::before{background:var(--violet);border-color:var(--violet)}
.lab--review{grid-column:1/-1;justify-self:center;margin-top:8px;padding:7px 14px;border:1px solid var(--teal);border-radius:var(--radius);background:var(--bg);color:var(--text)}
.hero__cue{position:relative;margin:0;width:1px;height:clamp(40px,6vw,88px);overflow:hidden;background:linear-gradient(var(--teal),transparent)}
.hero__cue span{position:absolute;inset:0}
@media (prefers-reduced-motion:no-preference){.motion .hero__cue span{background:linear-gradient(transparent,var(--text),transparent);animation:cue 2.6s linear infinite}}
@keyframes cue{from{translate:0 -100%}to{translate:0 100%}}
@media (min-width:680px){.hero.home{padding-bottom:0}.hero.home .hero-mark{grid-template-rows:auto auto 1fr}
  .hero__cue{height:auto;min-height:clamp(40px,6vw,88px);background:linear-gradient(var(--teal),rgba(45,212,191,.5))}}
@media (min-width:1100px){.hero.home{--m:clamp(132px,12vw,156px)}.hero.home .wrap{row-gap:32px}
  .hero__copy,.hero.home .hero-mark{grid-area:2/1}
  .hero.home .hero-mark{max-width:none;align-self:stretch}
  .hero__copy{position:relative;z-index:1;max-width:calc(50% - 110px);padding:calc(var(--m)/2 + 16px) 0 44px}
  .hero.home .tagline{font-size:21px}.hero.home .lede{font-size:18px;margin-bottom:20px}}
/* Inner heroes: an audience page's hero ends on its line (blue from the left for brands, violet from the right for
   creators) over a field of its colour; How it works ends on both lines joined in teal. */
.hero.for-brands::before,.hero.for-creators::before{top:auto;bottom:0}
.hero.for-brands{background:radial-gradient(70% 100% at 0 100%,rgba(91,140,255,.1),transparent 70%)}
.hero.for-creators{background:radial-gradient(70% 100% at 100% 100%,rgba(177,151,252,.1),transparent 70%)}
.hero__env[data-env=how]{background:linear-gradient(90deg,var(--blue),var(--teal) 50%,var(--violet)) 0 100%/100% 1px no-repeat,
  radial-gradient(60% 100% at 50% 100%,rgba(45,212,191,.07),transparent 70%)}

/* Sections: space instead of rules. A two-column section (.split) holds its heading in place beside the content
   (sticky, no script). An audience section opens with its line: blue in from the left for brands, violet from the
   right for creators. */
section.block{position:relative;padding:clamp(72px,9vw,128px) 0}
section.block.tight{padding:0}
section.alt{background:var(--bg-2)}
.head{max-width:760px;margin:0 0 40px}
.head p{color:var(--text-2);font-size:18px}
.grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.grid.two{grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr))}
@media (min-width:900px){.wrap.split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:0 clamp(40px,7vw,112px);align-items:start}
  .wrap.split>.head{position:sticky;top:112px;margin:0}
  .wrap.split.flip{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}.wrap.split.flip>.head{order:2}}
.for-brands::before,.for-creators::before{content:"";position:absolute;top:0;left:0;width:min(46%,620px);height:1px;background:linear-gradient(90deg,var(--blue),transparent);transform-origin:left;transition:scale 1.4s cubic-bezier(.2,.8,.2,1)}
.for-creators::before{left:auto;right:0;background:linear-gradient(270deg,var(--violet),transparent);transform-origin:right}
.motion .for-brands:not(.is-in)::before,.motion .for-creators:not(.is-in)::before{scale:0 1}
.for-brands .eyebrow{color:var(--blue-text)}.for-creators .eyebrow{color:var(--violet)}
.card{position:relative;border-top:1px solid var(--border-2);padding:24px 0 0}
.card p{color:var(--text-2)}
.card.blue{border-color:var(--blue)}.card.violet{border-color:var(--violet)}.card.teal{border-color:var(--teal)}
.kicker{color:var(--text-2);font-size:15px;margin:0 0 6px}
.card .kicker{margin:0 0 8px}
a.more{display:inline-flex;align-items:center;min-height:44px;font-weight:620;text-decoration:none}
a.more:hover{text-decoration:underline}
.card ul,.row ul{margin:0 0 14px;padding-left:20px;color:var(--text-2)}.card li,.row li{margin:5px 0}
/* Ledger: rows on hairlines, a title beside its text (.stack: one under the other). With motion, a .sync ledger lights
   row by row as the statement above it lights its emphasised words. */
.ledger .row{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:6px clamp(24px,5vw,80px);padding:24px 0;border-top:1px solid var(--border);transition:border-color .6s}
.ledger .row>*{margin:0}.ledger .row p{color:var(--text-2)}.ledger .row h3{transition:color .6s}
.ledger.stack .row{display:block;padding:28px 0}.ledger.stack .row h3{margin:0 0 8px}.ledger.stack .row p{margin:0 0 6px}
.ledger .row.blue{border-color:var(--blue)}.ledger .row.violet{border-color:var(--violet)}
.ledger.stack .row ul{margin:0 0 14px}.ledger.stack .row ul+h3{margin-top:24px}
.ledger .row .actions{margin-top:18px}
.motion .sync .row:not(.is-on) h3{color:var(--text-3)}
.motion .sync .row.is-on{border-color:var(--teal)}

/* Audience doors: one split panel under the hero, brands on the left in blue, creators on the right in violet, joined
   at the seam by a teal node. */
.doors{position:relative;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))}
.doors::before{content:"";position:absolute;z-index:1;left:50%;top:-4px;width:9px;height:9px;margin-left:-4.5px;border-radius:50%;background:var(--teal);box-shadow:0 0 0 5px var(--bg)}
.door{display:flex;flex-direction:column;gap:10px;padding:clamp(28px,4vw,52px) clamp(22px,4vw,52px);text-decoration:none;color:var(--text);border-top:1px solid var(--blue);background:linear-gradient(var(--t-blue),transparent);transition:background-color .3s}
.door:hover{background-color:var(--t-blue)}
.door.creator{border-color:var(--violet);background-image:linear-gradient(var(--t-violet),transparent)}.door.creator:hover{background-color:var(--t-violet)}
.door .who{color:var(--blue-text);font-weight:600}.door.creator .who{color:var(--violet)}
.door strong{font-family:var(--display);font-size:clamp(24px,2.8vw,36px);line-height:1.12;letter-spacing:-.025em;font-weight:640;max-width:16em}
.door span.d{color:var(--text-2);max-width:34em}
.door .go{margin-top:10px;font-weight:620;color:var(--blue-text);text-underline-offset:4px}
.door.creator .go{color:var(--violet)}
.door:hover .go,.door:focus-visible .go{text-decoration:underline}


/* Numbered stages. As a flow (.flow) they hang on one teal line down the left edge with a port each: drawn full and
   lit by default; with motion, assets/motion.js fills the line as the list is scrolled through (--fill), moves a light
   along it (--len) and lights each port as the fill reaches it (.is-on), the newest pulsing (.is-now). */
ol.stages{list-style:none;counter-reset:s;margin:0;padding:0;display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr))}
ol.stages>li{counter-increment:s;position:relative;border-top:1px solid var(--border);padding:24px 0}
ol.stages>li::before{content:"0" counter(s);display:block;font:600 14px/1.9 var(--mono);color:var(--signal);margin-bottom:10px}
ol.stages>li p{color:var(--text-2);margin:0;font-size:16px}
ol.stages.long>li p+p{margin-top:10px}
ol.stages.long>li b{color:var(--text)}
ol.stages.flow{position:relative;grid-template-columns:1fr;gap:0;padding:0 0 0 38px;background:linear-gradient(var(--border-2),var(--border-2)) 9px 0/1px 100% no-repeat}
ol.stages.flow::after{content:"";position:absolute;top:0;bottom:0;left:9px;width:1px;background:var(--teal);transform-origin:top;transform:scaleY(var(--fill,1))}
ol.stages.flow::before{content:"";position:absolute;z-index:1;left:6px;top:-3.5px;width:7px;height:7px;border-radius:50%;pointer-events:none;opacity:0;
  background:var(--signal);box-shadow:0 0 0 4px rgba(var(--lit),.16),0 0 18px 4px rgba(var(--lit),.6);translate:0 var(--len,0px);transition:opacity .3s}
.motion ol.stages.flow.is-moving::before{opacity:1}
ol.stages.flow>li::before{transition:color .4s}
ol.stages.flow>li::after{content:"";position:absolute;top:32px;left:-33px;width:9px;height:9px;border-radius:50%;background:var(--bg);
  border:1px solid var(--teal);transition:border-color .4s,background-color .4s}
.alt ol.stages.flow>li::after{background:var(--bg-2)}
.motion ol.stages.flow>li:not(.is-on)::before{color:var(--text-3)}
.motion ol.stages.flow>li:not(.is-on)::after{border-color:var(--border-2)}
.motion ol.stages.flow>li.is-now::after{background-color:var(--teal)}
@media (prefers-reduced-motion:no-preference){.motion ol.stages.flow>li.is-now::after{animation:port 1.8s ease-in-out infinite}}
@keyframes port{50%{box-shadow:0 0 0 6px rgba(var(--lit),.14)}}
/* Statements: lit text is --text, unlit is --text-3 (both pass AA on the page). Lit by default; with motion, the words
   light in reading order as the statement is scrolled through, the emphasised ones in teal. */
.statement em{font-style:normal;color:var(--signal)}
.statement{font-family:var(--display);font-size:clamp(26px,3.6vw,48px);line-height:1.16;letter-spacing:-.025em;font-weight:620;color:var(--text);max-width:20em;margin:0 0 56px}
.motion .statement .word{color:var(--text-3);transition:color .2s}.motion .statement .word.is-lit{color:var(--text)}
/* How It Works (V2 prototype 04): with motion, assets/motion.js pins the story (below); otherwise the stages stay cards
   and the picture is hidden. */
.story__visual{display:none}
/* The five pictures: small sample screens from each stage (messages, the agreement, a script and a recording, one
   video published everywhere, a review), labelled as sample content. Decoration only (aria-hidden); the stage text
   says the same in words. Sizes follow the frame (container units), so the phone version keeps the same layout. */
.story__frame{container-type:inline-size}
.story__dots{position:absolute;right:12px;top:50%;translate:0 -50%;display:grid;gap:10px;list-style:none;margin:0;padding:0}
.story__dots li{width:6px;height:6px;border-radius:50%;background:var(--signal);opacity:.25}
.story__tag{position:absolute;left:16px;top:12px;z-index:2;font:500 clamp(8.5px,2.2cqi,10.5px)/1 var(--mono);color:var(--text-3)}
.scene{font-size:clamp(9.5px,2.95cqi,13px);line-height:1.38;color:var(--text-2)}
.scene p{margin:0}
.sx{position:absolute;margin:0;border-radius:8px;border:1px solid var(--border-2);background:rgba(21,23,28,.96);padding:.75em .95em;box-shadow:0 18px 40px -22px rgba(0,0,0,.9)}
.sx small,.sx__h{display:block;font:600 .78em/1.2 var(--mono);color:var(--text-3);margin:0 0 .45em}
.sc-connect .bub{left:8%;max-width:64%;border-bottom-left-radius:4px;color:var(--text)}
.sc-connect .bub:nth-child(1){top:13%}
.sc-connect .bub--r{left:auto;right:9%;top:39%;max-width:58%;border-radius:12px 12px 4px 12px;background:rgba(13,19,36,.96)}
.sc-connect .bub--us{top:66%;max-width:62%;border-color:rgba(94,234,212,.5);background:rgba(11,36,39,.95)}
.sc-connect .bub--us small{color:var(--signal)}
.sc-align .doc{left:9%;right:17%;top:12%;padding:1em 1.1em}
.sc-align dl{margin:0;display:grid;gap:.32em}
.sc-align dl div{display:grid;grid-template-columns:5.6em 1fr;gap:.6em;padding-bottom:.32em;border-bottom:1px solid var(--border)}
.sc-align dt{color:var(--text-3)}.sc-align dd{margin:0;color:var(--text)}
.sc-align .doc__sign{display:flex;gap:1.4em;margin-top:.8em;font:600 .8em/1 var(--mono);color:var(--signal)}
.doc__sign span::before{content:"\2713\00a0"}
.sc-align .stamp{right:7%;bottom:12%;rotate:-7deg;padding:.55em 1em;border-radius:10px;border:1.5px solid var(--signal);background:rgba(11,36,39,.96);color:var(--signal);font:700 .95em/1 var(--mono)}
.sc-create .script{left:7%;top:16%;width:54%;display:grid;gap:.55em}
.sc-create .script b{display:block;font:600 .74em/1.3 var(--mono);color:var(--teal)}
.sc-create .script p{color:var(--text)}
.sc-create .cam{right:9%;top:9%;bottom:9%;width:30%;padding:0;border-radius:18px;overflow:hidden;background:linear-gradient(160deg,#1b2440,#0b101f 70%)}
.cam__view{position:absolute;inset:22% 18% 26%;border-radius:50% 50% 14px 14px;background:radial-gradient(60% 50% at 50% 30%,rgba(var(--lit),.35),transparent 70%),linear-gradient(#2a3555,#151d33)}
.cam__rec{position:absolute;left:.7em;top:.7em;font:700 .74em/1 var(--mono);color:#ffb4b4}
.cam__rec::before{content:"";display:inline-block;width:.6em;height:.6em;margin-right:.35em;border-radius:50%;background:#ff6b6b;box-shadow:0 0 10px #ff6b6b}
.cam__n{position:absolute;left:0;right:0;bottom:.8em;text-align:center;font:600 .72em/1.2 var(--mono);color:var(--text-2)}
.sc-coord .clip{left:7%;top:24%;bottom:24%;width:27%;display:grid;place-items:center;align-content:center;gap:.6em;padding:.6em;background:linear-gradient(160deg,#1d2747,#0c1222);color:var(--text);font:600 .8em/1.2 var(--mono)}
.clip__play{width:2.4em;height:2.4em;border-radius:50%;border:1.5px solid var(--teal);position:relative}
.clip__play::after{content:"";position:absolute;left:.85em;top:.62em;border:.55em solid transparent;border-left:.85em solid var(--teal);border-right:0}
.sc-coord .posts{list-style:none;margin:0;padding:0;position:absolute;right:11%;top:12%;bottom:12%;width:47%;display:grid;align-content:center;gap:.7em}
.sc-coord .posts .sx{position:relative;display:flex;align-items:center;justify-content:space-between;gap:.5em;color:var(--text);padding:.55em .8em}
.sc-coord .posts .sx::before{content:"";position:absolute;right:100%;top:50%;width:46%;height:1px;background:linear-gradient(90deg,transparent,rgba(var(--lit),.75))}
.sc-coord em{font:600 .74em/1 var(--mono);font-style:normal;color:var(--signal)}.sc-coord em.is-wait{color:var(--teal)}
.sc-review .rev{left:7%;top:10%;width:66%;display:grid;gap:.5em}
.sc-review .rev p{position:relative;padding-left:1.3em;color:var(--text)}
.sc-review .rev p::before{content:"";position:absolute;left:0;top:.38em;width:.62em;height:.62em;border-radius:50%;background:var(--signal)}
.sc-review .rev .rev__hr::before{background:var(--blue-text)}.sc-review .rev .rev__nx::before{background:var(--teal)}
.sc-review .rev .sx__h{padding:0}.sc-review .rev .sx__h::before{display:none}
.sc-review .chart{right:9%;bottom:9%;width:46%}
.chart__bars{display:flex;align-items:flex-end;gap:5%;height:4.6em}
.chart__bars i{flex:1;border-radius:3px 3px 0 0;background:linear-gradient(var(--teal),rgba(45,212,191,.25))}
.chart__bars i:nth-child(1){height:100%}.chart__bars i:nth-child(2){height:88%}.chart__bars i:nth-child(3){height:80%}.chart__bars i:nth-child(4){height:74%}
.chart__bars i:nth-child(5){height:69%}.chart__bars i:nth-child(6){height:66%}.chart__bars i:nth-child(7){height:63%}.chart__bars i:nth-child(8){height:61%}
/* With motion, every card floats on its own slow drift (the translate property, so it never fights the scroll
   timeline's transforms). */
@media (prefers-reduced-motion:no-preference){
  .motion .scene .sx,.motion .sc-coord .posts .sx{animation:drift 6s ease-in-out infinite alternate}
  .scene [data-from]:nth-child(2n){animation-duration:7.4s;animation-delay:-2.2s}
  .scene [data-from]:nth-child(3n){animation-duration:8.2s;animation-delay:-4.1s}}
@keyframes drift{from{translate:0 -4px}to{translate:0 5px}}
ul.checks{list-style:none;margin:0;padding:0;display:grid;gap:0 28px;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))}
ul.checks li{position:relative;padding:20px 0;border-top:1px solid var(--border);color:var(--text-2)}
ul.checks li b{display:block;color:var(--text);margin-bottom:4px;font-weight:620}
@media (min-width:560px){ul.checks.defs{grid-template-columns:1fr}ul.checks.defs li{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);column-gap:24px}}
ul.facts{margin:0;padding-left:22px;color:var(--text-2)}ul.facts li{margin:8px 0}
ul.donts{margin:0;padding-left:22px;color:var(--text-2)}ul.donts li{margin:6px 0}

/* Comparison table and definition lists */
.table-wrap{overflow-x:auto;border:1px solid var(--border-2);border-radius:var(--radius)}
table.compare{width:100%;border-collapse:collapse;min-width:620px}
table.compare th,table.compare td{text-align:left;vertical-align:top;padding:16px 18px;border-bottom:1px solid var(--border)}
table.compare thead th{background:var(--surface-2);font-size:15px}
table.compare tbody th{color:var(--text-3);font-weight:600;width:22%}
table.compare td{color:var(--text-2)}
table.compare tr:last-child>*{border-bottom:0}
/* Which one fits (Brands): the comparison on a computer screen. The table is the content; the monitor, its window bar,
   side rail and stand, and the two column pictures (a week of daily posting; finished video files) are decoration.
   Phones show each row as a card with the two answers side by side under the two column headers. */
.pc{position:relative;max-width:1040px;margin-inline:auto;perspective:1600px}
.pc__screen{position:relative;border-radius:10px;padding:12px 12px 10px;transform-origin:50% 100%;
  background:var(--bg-2);border:1px solid var(--border-2);box-shadow:0 40px 100px -50px #000}
.pc__bar{display:flex;align-items:center;gap:7px;padding:11px 14px;border:1px solid var(--border);border-bottom:0;border-radius:6px 6px 0 0;background:var(--bg-2)}
.pc__bar i{width:10px;height:10px;border-radius:50%;background:var(--border-2)}
.pc__bar span{flex:1;margin-right:51px;text-align:center;font:500 12px/1 var(--mono);color:var(--text-3)}
.pc__ui{display:grid;grid-template-columns:54px minmax(0,1fr);border:1px solid var(--border);border-radius:0 0 6px 6px;background:var(--bg);overflow:hidden}
.pc__rail{display:grid;align-content:start;justify-items:center;gap:12px;padding:18px 0;border-right:1px solid var(--border);background:var(--bg-2)}
.pc__rail b{width:22px;height:22px;border-radius:7px;background:var(--surface-2)}
.pc__rail b.is-on{background:rgba(var(--lit),.4);box-shadow:0 0 16px -2px rgba(var(--lit),.75)}
.pc .table-wrap{border:0;border-radius:0}
.pc table.compare thead th{background:var(--bg-2);vertical-align:bottom;font-size:16px;color:var(--text)}
.pc table.compare thead th.cmp-org{box-shadow:inset 0 2px 0 var(--teal)}.pc table.compare thead th.cmp-ugc{box-shadow:inset 0 2px 0 var(--signal)}
.pc table.compare tbody th{font:600 11px/1.5 var(--mono);padding-top:19px}
.pc table.compare tbody tr{transition:background-color .3s}.pc table.compare tbody tr:hover{background:rgba(var(--lit),.05)}
.pc table.compare tbody td{color:var(--text)}
.cmp-viz{display:flex;margin-bottom:14px}
.cmp-week{display:grid;grid-template-columns:repeat(7,22px);gap:5px}
.cmp-week i{height:30px;border-radius:6px;display:grid;place-items:end center;padding-bottom:3px;font:600 9px/1 var(--mono);font-style:normal;
  color:#04201c;background:linear-gradient(var(--signal),var(--teal));transition:opacity .4s,translate .4s}
.cmp-files{display:flex;gap:7px}
.cmp-files i{position:relative;width:28px;height:44px;border-radius:7px;border:1px solid rgba(var(--lit),.45);
  background:linear-gradient(160deg,#22305a,#0e1528);transition:opacity .45s,translate .45s,rotate .45s}
.cmp-files i::after{content:"";position:absolute;left:11px;top:16px;border:6px solid transparent;border-left:8px solid var(--signal);border-right:0}
.pc__foot{display:flex;gap:9px;align-items:center;margin:10px 4px 0;font:500 12px/1.4 var(--mono);color:var(--text-3)}
.pc__foot::before{content:"";flex:none;width:14px;height:14px;border-radius:50%;border:1.5px solid var(--signal);background:rgba(var(--lit),.12)}
.pc__stand{position:relative;height:74px}
.pc__stand::before{content:"";position:absolute;left:50%;top:0;width:150px;height:62px;translate:-50% 0;
  background:var(--surface);clip-path:polygon(30% 0,70% 0,82% 100%,18% 100%)}
.pc__stand::after{content:"";position:absolute;left:50%;bottom:0;width:280px;height:10px;translate:-50% 0;border-radius:4px;
  background:var(--surface-2)}
@media (prefers-reduced-motion:no-preference){
  .pc.is-live:not(.is-in) .cmp-week i{opacity:.18;translate:0 6px}
  .pc.is-live:not(.is-in) .cmp-files i{opacity:0;translate:0 10px;rotate:-8deg}}
.cmp-week i:nth-child(2),.cmp-files i:nth-child(2){transition-delay:.08s}.cmp-week i:nth-child(3),.cmp-files i:nth-child(3){transition-delay:.16s}
.cmp-week i:nth-child(4){transition-delay:.24s}.cmp-week i:nth-child(5){transition-delay:.32s}.cmp-week i:nth-child(6){transition-delay:.4s}.cmp-week i:nth-child(7){transition-delay:.48s}
@media (max-width:719px){
  .pc__screen{padding:8px 8px 6px}.pc__ui{grid-template-columns:1fr}.pc__rail{display:none}
  .pc__bar span{margin-right:0;text-align:left;margin-left:8px}
  .pc table.compare{min-width:0;display:block}.pc table.compare thead,.pc table.compare tbody{display:block}
  .pc table.compare tr{display:grid;grid-template-columns:1fr 1fr}
  /* The empty corner header is hidden visually only: three headers stay over three cells for screen readers. */
  .pc table.compare thead tr{position:relative}
  .pc table.compare thead th:first-child{position:absolute;width:1px;height:1px;padding:0;border:0;overflow:hidden;
    clip:rect(0 0 0 0);white-space:nowrap}
  .pc table.compare th,.pc table.compare td{display:block;padding:12px}
  .pc table.compare thead th{font-size:14px}
  .pc table.compare tbody th{grid-column:1/-1;width:auto;padding:14px 12px 0;border-bottom:0}
  .pc table.compare tbody td{font-size:14.5px;line-height:1.5}
  .pc table.compare tbody td::before{content:attr(data-label);display:block;margin-bottom:5px;font:600 9.5px/1.2 var(--mono);color:var(--teal)}
  .pc table.compare tbody td+td::before{color:var(--signal)}
  .cmp-week{grid-template-columns:repeat(7,14px);gap:3px}.cmp-week i{height:22px;font-size:7px}
  .cmp-files i{width:22px;height:34px}.cmp-files i::after{left:8px;top:11px}
  .pc__stand{height:46px}.pc__stand::before{width:90px;height:38px}.pc__stand::after{width:170px;height:9px}}
dl.table{display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr);gap:14px 28px;margin:0}
dl.table dt{color:var(--text-3)}dl.table dd{margin:0;color:var(--text-2);overflow-wrap:anywhere}

/* Callouts */
.note{border-top:1px solid var(--teal);padding:22px 0 0;color:var(--text-2)}
.note b{color:var(--text)}
.note.warn{border-color:var(--border-2)}

/* FAQ: native disclosure widgets, keyboard and screen-reader accessible by default; answers stay in the HTML */
.faq{display:grid;max-width:880px;border-bottom:1px solid var(--border)}
.faq details{border-top:1px solid var(--border)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 0;min-height:56px;font-weight:620;color:var(--text)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;width:24px;text-align:center;font:400 24px/1 var(--font);color:var(--text-2);transition:rotate .35s cubic-bezier(.2,.8,.2,1)}
.faq details[open] summary::after{rotate:45deg}
.faq summary:focus-visible{outline-offset:-2px}
.faq details>div{padding:0 0 20px;color:var(--text-2);max-width:62ch}
.faq details>div p:last-child{margin:0}

/* Closing call to action. One line leaves the teal node at the top and parts in two: blue to the brand button, violet
   to the creator button. With motion the two paths draw as the section arrives and each button answers when reached. */
.closing{position:relative;overflow:hidden;text-align:center;padding:clamp(88px,11vw,152px) 0}
.closing::before{content:"";position:absolute;left:50%;top:0;width:1px;height:clamp(40px,6vw,72px);background:linear-gradient(var(--teal),transparent)}
.closing .wrap{position:relative}
.closing h2{max-width:820px;margin:0 auto 16px;font-size:clamp(30px,4.4vw,56px)}
.closing p{color:var(--text-2);max-width:620px;margin:0 auto 28px}
.closing .actions{justify-content:center}
/* The two lines of the hero end here: the brand line comes in from the left edge to the brand button and the creator
   line from the right edge to the creator button (drawn as the section arrives). */
.closing .btn{position:relative}
.closing .btn:not(.violet):not(.ghost)::before,.closing .btn.violet::after{content:"";position:absolute;top:50%;width:50vw;height:1px;pointer-events:none}
.closing .btn:not(.violet):not(.ghost)::before{right:100%;background:linear-gradient(90deg,transparent,var(--blue));transform-origin:0 50%}
.closing .btn.violet::after{left:100%;background:linear-gradient(270deg,transparent,var(--violet));transform-origin:100% 50%}
.motion .closing .btn:not(.violet):not(.ghost)::before,.motion .closing .btn.violet::after{transform:scaleX(calc(1 - var(--draw,0)))}
.closing .btn{transition:background .15s,border-color .15s,box-shadow .5s}
.closing.is-reached .btn{box-shadow:0 0 0 4px rgba(91,140,255,.2)}.closing.is-reached .btn.violet{box-shadow:0 0 0 4px rgba(177,151,252,.2)}

/* Footer */
footer.site{border-top:1px solid var(--border);padding:56px 0 40px;color:var(--text-3);font-size:15px;background:var(--bg-2)}
footer.site .cols{display:grid;gap:28px;grid-template-columns:minmax(0,1.3fr) repeat(2,minmax(0,.9fr)) minmax(0,1.25fr)}
footer.site h2{font-size:15px;color:var(--text-2);margin:0 0 12px;font-weight:600;font-family:var(--font)}
footer.site ul{list-style:none;margin:0;padding:0}
footer.site li a{display:inline-flex;align-items:center;min-height:36px;max-width:100%;overflow-wrap:anywhere;color:var(--text-2);text-decoration:none}
footer.site li a:hover{color:var(--text);text-decoration:underline}
footer.site .about p{max-width:340px}
footer.site .legal{margin-top:40px;padding-top:22px;border-top:1px solid var(--border);display:flex;gap:16px;justify-content:space-between;flex-wrap:wrap}
footer.site .legal p{margin:0}

/* Workspace (V2 prototype 03, V2.1 section 8): an illustrative screen made of plain UI parts with sample content
   (aria-hidden; the caption says what it is). One sample script moves through six steps: direction, script, ready to
   film, human review, published, insights; the tabs, the item's status, its detail and the side panels follow the
   step in data-step. As written the screen shows the last step with every step done; with motion the screen rises from
   an angle and assets/motion.js walks the steps as it is scrolled (pinned on wide screens). */
.ws-figure{margin:0;display:grid;gap:14px;perspective:1400px}
.ws-figure figcaption{text-align:center;color:var(--text-3)}
.ws-device{transform-style:preserve-3d;transform-origin:50% 100%;border-radius:10px;padding:0 0 18px;border:1px solid var(--border-2);
  background:var(--bg-2);box-shadow:0 40px 100px -50px #000}
.ws-bar{display:flex;align-items:center;gap:7px;padding:12px 16px;border-bottom:1px solid var(--border)}
.ws-bar i{width:10px;height:10px;border-radius:50%;background:var(--border-2)}
.ws-bar span{margin-left:12px;font:500 12px/1 var(--mono);color:var(--text-3)}
.ws-ui{display:grid;grid-template-columns:150px minmax(0,1.7fr) minmax(0,1fr);gap:16px;padding:16px;transform-style:preserve-3d}
.ws-nav{display:grid;align-content:start;gap:4px;font:500 12px/1 var(--mono);color:var(--text-3)}
.ws-nav span{padding:10px;border-radius:8px;transition:background-color .35s,color .35s}
.ws-layer{border-radius:8px;background:var(--surface);border:1px solid var(--border);transform-style:preserve-3d;transition:border-color .4s,box-shadow .4s}
.ws-main{padding:16px;display:grid;gap:12px;align-content:start;container:ws/inline-size}
.ws-title{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:16px}
.ws-steps{position:relative;list-style:none;margin:0;padding:18px 0 0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;
  font:500 10.5px/1.25 var(--mono);color:var(--text-3)}
.ws-steps::before,.ws-steps::after{content:"";position:absolute;left:5px;right:calc(100% / 6 - 5px);top:4px;height:2px;border-radius:2px;background:var(--border-2)}
.ws-steps::after{background:linear-gradient(90deg,var(--teal),var(--signal));transform-origin:left;transform:scaleX(var(--ws-fill,1))}
.ws-steps li{position:relative;transition:color .35s}
.ws-steps li::before{content:"";position:absolute;left:0;top:-18px;width:10px;height:10px;border-radius:50%;z-index:1;background:var(--bg-2);border:2px solid var(--border-2);transition:background-color .35s,border-color .35s,box-shadow .35s}
.ws-item{position:relative;padding:14px;border-radius:6px;background:var(--bg-2);border:1px solid rgba(var(--lit),.5);display:grid;gap:12px}
.ws-item__head{display:flex;justify-content:space-between;align-items:center;gap:12px}
.ws-state,.ws-panes{display:grid}.ws-state>*,.ws-panes>*{grid-area:1/1}.ws-state>*{justify-self:end}
.ws-state>.chip,.ws-pane{opacity:0;transition:opacity .45s,transform .45s}
.ws-pane{transform:translateY(8px);display:grid;gap:8px;align-content:start;min-height:96px}
.ws-pane p{margin:0;font-size:14px;color:var(--text-2)}
.ws-k{font:600 10.5px/1 var(--mono);color:var(--text-3)}
.ws-line{height:6px;border-radius:3px;background:var(--border-2);width:86%}.ws-line.s{width:58%}
.ws-script,.ws-ticks{list-style:none;margin:0;padding:0;display:grid;gap:6px;font-size:13.5px;color:var(--text-2)}
.ws-script b{display:inline-block;min-width:52px;font:600 10.5px/1 var(--mono);color:var(--teal)}
.ws-ticks li,.ws-checks li{display:flex;gap:10px;align-items:center}
.ws-ticks li::before,.ws-checks li::before{content:"";width:16px;height:16px;flex:none;border-radius:5px;border:1px solid rgba(var(--lit),.5);
  background:linear-gradient(135deg,transparent 45%,var(--signal) 45% 55%,transparent 55%) center/9px 9px no-repeat,rgba(var(--lit),.12)}
.ws-review{grid-template-columns:auto 1fr auto;align-items:center;gap:14px}
.ws-avatar{width:40px;height:40px;border-radius:50%;background:radial-gradient(circle at 50% 38%,var(--blue-text) 0 7px,transparent 8px),radial-gradient(circle at 50% 110%,var(--blue-text) 0 15px,transparent 16px),var(--surface-2);border:1px solid rgba(147,178,255,.4)}
.ws-seal{width:34px;height:34px;border-radius:50%;border:1.5px solid var(--signal);background:rgba(var(--lit),.12);position:relative}
.ws-seal::after{content:"";position:absolute;left:11px;top:6px;width:8px;height:15px;border:solid var(--signal);border-width:0 2px 2px 0;rotate:45deg}
.ws-track{height:8px;border-radius:4px;background:var(--border-2);overflow:hidden}.ws-track i{display:block;height:100%;width:72%;background:linear-gradient(90deg,var(--teal),var(--signal))}
.ws-card{position:relative;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px;border-radius:6px;background:var(--bg-2);border:1px solid var(--border)}
.ws-card b,.ws-item b,.ws-panel>b{font:600 11px/1 var(--mono);color:var(--text-3)}
.ws-card p,.ws-item__head p{font-size:15px;margin:6px 0 0;color:var(--text)}
.ws-tags{display:flex;flex-wrap:wrap;gap:6px}
.ws-tags span{font:500 11px/1 var(--mono);padding:5px 7px;border-radius:6px;background:var(--surface-2);color:var(--text-2)}
.chip{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;font:600 11px/1 var(--mono);white-space:nowrap;border:1px solid var(--border-2);color:var(--text-2)}
.chip::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.chip.ok{color:var(--signal);border-color:rgba(var(--lit),.35)}.chip.wait{color:var(--signal);border-color:rgba(var(--lit),.4)}
.chip.warn{color:var(--text)}.chip.person{color:var(--blue-text);border-color:rgba(147,178,255,.35)}
.chip.quiet{color:var(--text-3)}.chip.quiet::before{display:none}
.ws-side{display:grid;gap:16px;align-content:start;transform-style:preserve-3d}
.ws-panel{padding:16px;display:grid;gap:12px;align-content:start}.ws-panel .chip{justify-self:start}
.ws-checks{list-style:none;margin:0;padding:0;display:grid;gap:9px;font-size:14px;color:var(--text-2)}
.ws-who{display:flex}.ws-who i{width:26px;height:26px;margin-right:-8px;border-radius:50%;border:2px solid var(--surface);background:radial-gradient(circle at 50% 38%,var(--blue-text) 0 4px,transparent 5px),radial-gradient(circle at 50% 115%,var(--blue-text) 0 9px,transparent 10px),var(--surface-2)}
.ws-bars{display:grid;gap:8px;font:500 11px/1 var(--mono);color:var(--text-3)}
.ws-bars span{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center}
.ws-bars i{height:8px;border-radius:4px;background:linear-gradient(90deg,var(--teal),var(--signal));transform-origin:left}
.ws-bars span:nth-child(1) i{transform:scaleX(.9)}.ws-bars span:nth-child(2) i{transform:scaleX(.55)}.ws-bars span:nth-child(3) i{transform:scaleX(.72)}
.ws-note{font-size:13px;color:var(--text-2);margin:0}
.ws-figure[data-step="1"] .ws-nav span[data-at~="1"],.ws-figure[data-step="2"] .ws-nav span[data-at~="2"],.ws-figure[data-step="3"] .ws-nav span[data-at~="3"],.ws-figure[data-step="4"] .ws-nav span[data-at~="4"],.ws-figure[data-step="5"] .ws-nav span[data-at~="5"],.ws-figure[data-step="6"] .ws-nav span[data-at~="6"]{background:var(--surface-2);color:var(--text)}
.ws-figure[data-step="1"] .ws-state>.chip[data-at~="1"],.ws-figure[data-step="2"] .ws-state>.chip[data-at~="2"],.ws-figure[data-step="3"] .ws-state>.chip[data-at~="3"],.ws-figure[data-step="4"] .ws-state>.chip[data-at~="4"],.ws-figure[data-step="5"] .ws-state>.chip[data-at~="5"],.ws-figure[data-step="6"] .ws-state>.chip[data-at~="6"],.ws-figure[data-step="1"] .ws-pane[data-at~="1"],.ws-figure[data-step="2"] .ws-pane[data-at~="2"],.ws-figure[data-step="3"] .ws-pane[data-at~="3"],.ws-figure[data-step="4"] .ws-pane[data-at~="4"],.ws-figure[data-step="5"] .ws-pane[data-at~="5"],.ws-figure[data-step="6"] .ws-pane[data-at~="6"]{opacity:1;transform:none}
.ws-figure[data-step="1"] .ws-panel[data-at~="1"],.ws-figure[data-step="2"] .ws-panel[data-at~="2"],.ws-figure[data-step="3"] .ws-panel[data-at~="3"],.ws-figure[data-step="4"] .ws-panel[data-at~="4"],.ws-figure[data-step="5"] .ws-panel[data-at~="5"],.ws-figure[data-step="6"] .ws-panel[data-at~="6"]{border-color:rgba(var(--lit),.5)}
.ws-figure[data-step="2"] .ws-steps li:nth-child(-n+1),.ws-figure[data-step="3"] .ws-steps li:nth-child(-n+2),.ws-figure[data-step="4"] .ws-steps li:nth-child(-n+3),.ws-figure[data-step="5"] .ws-steps li:nth-child(-n+4),.ws-figure[data-step="6"] .ws-steps li:nth-child(-n+5){color:var(--text-2)}
.ws-figure[data-step="2"] .ws-steps li:nth-child(-n+1)::before,.ws-figure[data-step="3"] .ws-steps li:nth-child(-n+2)::before,.ws-figure[data-step="4"] .ws-steps li:nth-child(-n+3)::before,.ws-figure[data-step="5"] .ws-steps li:nth-child(-n+4)::before,.ws-figure[data-step="6"] .ws-steps li:nth-child(-n+5)::before{background-color:var(--teal);border-color:var(--teal)}
.ws-figure[data-step="1"] .ws-steps li:nth-child(1),.ws-figure[data-step="2"] .ws-steps li:nth-child(2),.ws-figure[data-step="3"] .ws-steps li:nth-child(3),.ws-figure[data-step="4"] .ws-steps li:nth-child(4),.ws-figure[data-step="5"] .ws-steps li:nth-child(5),.ws-figure[data-step="6"] .ws-steps li:nth-child(6){color:var(--signal)}
.ws-figure[data-step="1"] .ws-steps li:nth-child(1)::before,.ws-figure[data-step="2"] .ws-steps li:nth-child(2)::before,.ws-figure[data-step="3"] .ws-steps li:nth-child(3)::before,.ws-figure[data-step="4"] .ws-steps li:nth-child(4)::before,.ws-figure[data-step="5"] .ws-steps li:nth-child(5)::before,.ws-figure[data-step="6"] .ws-steps li:nth-child(6)::before{background-color:var(--teal);border-color:var(--signal);box-shadow:0 0 0 4px rgba(var(--lit),.16)}
@media (max-width:719px){.ws-ui{grid-template-columns:1fr}.ws-nav{display:flex;flex-wrap:wrap;gap:2px}.ws-nav span{padding:8px}
  .ws-steps{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:26px}.ws-steps::before,.ws-steps::after{display:none}
  .ws-card,.ws-item__head{flex-direction:column;align-items:flex-start}.ws-state>*{justify-self:start}}

/* Parity: with motion, phones (and short windows, below) hold the workspace in place like every other screen, so it
   gets a compact form that fits the view: the same parts (tabs in a row, the step rail, the item, both cards, the
   three panels side by side). */
@media (max-width:719px),(max-height:559px){
  .motion .ws-bar{padding:9px 12px}.motion .ws-device{padding-bottom:10px}
  .motion .ws-figure{gap:10px}.motion .ws-figure figcaption{font-size:13px;line-height:1.45}
  .motion .ws-ui{gap:8px;padding:8px}
  .motion .ws-nav{flex-wrap:nowrap;overflow:hidden;font-size:11px}.motion .ws-nav span{padding:6px 7px;white-space:nowrap}
  .motion .ws-main{grid-template-columns:minmax(0,1fr) minmax(0,1fr);padding:10px;gap:8px}.motion .ws-main>:not(.ws-card){grid-column:1/-1}
  .motion .ws-title{font-size:15px}
  .motion .ws-steps{grid-template-columns:repeat(6,minmax(0,1fr));gap:4px;row-gap:0;font:500 9.5px/1.25 var(--font)}
  .motion .ws-steps::before,.motion .ws-steps::after{display:block}
  .motion .ws-item{padding:10px 12px;gap:8px}.motion .ws-pane{min-height:64px;gap:6px}.motion .ws-pane p{font-size:13px}
  .motion .ws-item__head{flex-direction:row;align-items:center}.motion .ws-state>*{justify-self:end}
  .motion .ws-item__head p{font-size:14px;margin-top:4px}
  .motion .ws-card{flex-direction:column;align-items:flex-start;gap:6px;padding:8px 10px}.motion .ws-card p{font-size:13px;margin-top:4px}
  .motion .ws-card .chip,.motion .ws-item .chip{font-size:10px;padding:5px 8px}
  .motion .ws-side{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .motion .ws-panel{padding:8px;gap:6px}.motion .ws-panel>b{font-size:10px}
  .motion .ws-checks,.motion .ws-note{font-size:10px;line-height:1.3}.motion .ws-checks{gap:4px}
  .motion .ws-checks li::before{width:12px;height:12px;background-size:7px 7px}}

/* Where the step rail is too narrow for six labels side by side (a phone, a tablet's three-pane layout), the labels take
   turns above and below the rail, so each has two columns of room and no word is cut or overlaps its neighbour. */
@container ws (max-width:440px){
  .ws-main .ws-steps{--g:6px;grid-template-columns:repeat(6,minmax(0,1fr));grid-template-rows:2.5em 2.5em;column-gap:var(--g);
    row-gap:22px;padding:0}
  .ws-main .ws-steps::before,.ws-main .ws-steps::after{display:block;top:calc(2.5em + 10px)}
  .ws-main .ws-steps li:nth-child(odd){grid-row:1;align-self:end}
  .ws-main .ws-steps li:nth-child(even){grid-row:2}
  .ws-main .ws-steps li:nth-child(1){grid-column:1/span 2}.ws-main .ws-steps li:nth-child(2){grid-column:2/span 2}
  .ws-main .ws-steps li:nth-child(3){grid-column:3/span 2}.ws-main .ws-steps li:nth-child(4){grid-column:4}
  .ws-main .ws-steps li:nth-child(5){grid-column:5/span 2}.ws-main .ws-steps li:nth-child(6){grid-column:5/span 2;text-align:right}
  .ws-main .ws-steps li:nth-child(odd)::before{top:calc(100% + 6px)}
  .ws-main .ws-steps li:nth-child(even)::before{top:-16px}
  .ws-main .ws-steps li:nth-child(6)::before{left:calc(50% + var(--g) / 2)}}

/* Responsive */
@media (max-width:959px){footer.site .cols{grid-template-columns:1fr 1fr}}
@media (max-width:679px){.doors::before{display:none}}
@media (max-width:719px){.ledger .row{grid-template-columns:1fr}}
@media (max-width:640px){
  body{font-size:16.5px}.hero{padding:44px 0 40px}.hero.page-hero{padding:40px 0 32px}.lede{margin-bottom:24px}
  .actions .btn{flex:1 1 100%}dl.table{grid-template-columns:1fr;gap:4px}dl.table dd{margin-bottom:12px}
  footer.site .cols{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}
@media (forced-colors:active){.btn,.door,.card{border:1px solid CanvasText}.statement .word{color:CanvasText}.logo-live{mix-blend-mode:normal}}
/* Motion layer (assets/motion.js): the script runs only with motion allowed, and these rules sit behind the same gate.
   Lenis rules from its lenis.css (MIT). The card light is the SpotlightCard port. */
@media (prefers-reduced-motion:no-preference){
  html.lenis,html.lenis body{height:auto}
  .lenis:not(.lenis-autoToggle).lenis-stopped{overflow:clip}
  .lenis.lenis-smooth iframe{pointer-events:none}
  .motion .word{display:inline-block}
  .motion .card{position:relative;isolation:isolate}
  .motion .card::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity .3s;background:radial-gradient(280px circle at var(--spot-x,50%) var(--spot-y,50%),rgba(255,255,255,.06),transparent 70%)}
}
@media (prefers-reduced-motion:no-preference) and (hover:hover) and (pointer:fine){.motion .card:hover::after{opacity:1}}
@media (forced-colors:active){.motion .card::after{display:none}}

/* As written (no script, reduced motion, forced colours) every part below is in its finished state; the moving parts sit
   behind (prefers-reduced-motion:no-preference) and assets/motion.js drives the scroll parts. */

/* Heroes: the text, the buttons and the home diagram come in with CSS alone, so they are usable at once and never wait
   for a script. Behind them, assets/ambient.js draws the light environment into .hero__env (decoration, aria-hidden). */
.hero h1 .ln{display:inline-block;overflow:clip;padding-bottom:.12em;margin-bottom:-.12em;vertical-align:top}
.hero__env{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.env-3d{position:absolute;inset:0;width:100%;height:100%;display:block}
@media (prefers-reduced-motion:no-preference){
  .hero h1 .ln>span{display:inline-block;animation:line-in .9s cubic-bezier(.2,.8,.2,1) both}
  .hero h1 .ln+.ln>span{animation-delay:.08s}
  .hero.page-hero h1,.hero .eyebrow,.hero .tagline,.hero .lede,.hero .actions,.hero .wrap>div>.small{animation:rise .6s cubic-bezier(.2,.8,.2,1) both}
  .hero .tagline{animation-delay:.08s}.hero .lede{animation-delay:.12s}.hero .actions{animation-delay:.16s}.hero .wrap>div>.small{animation-delay:.2s}
  .hero.page-hero h1{animation-delay:.04s}
  .lab{animation:rise .6s cubic-bezier(.2,.8,.2,1) 1.5s both}
  .lab--brand,.lab--creators{animation:lab-in .9s cubic-bezier(.2,.8,.2,1) .5s both}
  .motion .lab--brand,.motion .lab--creators{animation:lab-in .9s cubic-bezier(.2,.8,.2,1) .5s both,run 4.8s linear 1.6s infinite}
  .lab--creators{--clip:inset(0 0 0 100%)}
  .motion .lab--creators{animation-name:lab-in,run-r;animation-delay:.5s,4s}
  .lab--s+.lab--s{animation-delay:1.62s}.lab--s+.lab--s+.lab--s{animation-delay:1.74s}.lab--review{animation-delay:1.9s}
  .hero__labels::before{animation:spine 1s cubic-bezier(.2,.8,.2,1) 1.2s both}
  .hero__cue{animation:fade .8s ease-out 2s both}
  .motion .hero-mark .logo-live{animation:breathe 7s ease-in-out infinite alternate}
  .env-3d{animation:fade 1.2s ease-out both}}
@keyframes line-in{from{transform:translateY(105%)}}
@keyframes rise{from{opacity:0;transform:translateY(18px)}}
@keyframes fade{from{opacity:0}}
@keyframes lab-in{from{clip-path:var(--clip,inset(0 100% 0 0))}}
@keyframes spine{from{scale:1 0}}
@keyframes run{to{background-position:calc(100% + 48px) 100%,0 100%}}
@keyframes run-r{to{background-position:-48px 100%,0 100%}}
@keyframes breathe{to{filter:brightness(1.16)}}

/* Home: the six stages (V3) are a ledger beside the section heading: number, stage, what happens, on hairlines. The
   teal line runs down the ledger as it is read, each stage lights as the line reaches it, and when all six are lit the
   loop line resolves the sequence. The same on every screen; without motion every stage is lit. */
.cflow__loop{display:flex;align-items:center;gap:19px;margin:26px 0 0;color:var(--text);transition:color .6s}
.cflow__loop span{flex:none;width:19px;height:19px;border-radius:50%;border:1px dashed var(--teal);transition:border-color .6s}
ol.stages.six>li{display:grid;grid-template-columns:3ch minmax(0,1fr);column-gap:18px;padding:22px 0}
ol.stages.six>li::before{grid-row:1/span 2;margin:0}
ol.stages.six h3{margin:0 0 4px}
@media (min-width:640px){ol.stages.six>li{grid-template-columns:3ch minmax(0,2fr) minmax(0,3fr);align-items:baseline}
  ol.stages.six>li::before{grid-row:auto}ol.stages.six h3{margin:0}}
.motion .cflow li h3,.motion .cflow li p{transition:color .5s}
.motion .cflow li:not(.is-on) h3,.motion .cflow li:not(.is-on) p{color:var(--text-3)}
.motion .cflow:not(.is-done) .cflow__loop{color:var(--text-3)}
.motion .cflow:not(.is-done) .cflow__loop span{border-color:var(--border-2)}
@media (prefers-reduced-motion:no-preference){.motion .cflow.is-done .cflow__loop span{animation:spin 8s linear infinite}}
@keyframes spin{to{rotate:1turn}}

/* Scroll-lit headings: .lit headings start muted and light word by word as they are scrolled through; lit words stay lit. */
.motion .lit .word{color:var(--text-3);transition:color .25s}.motion .lit .word.is-lit{color:var(--text)}
.motion .statement em .word.is-lit{color:var(--signal)}

/* Site-wide microinteractions: nav underline, mobile menu, buttons (lift, press, focus ring), scroll progress,
   accordions. The individual translate/scale properties keep these clear of the transforms motion.js sets. */
nav.main a:not(.btn){position:relative}
nav.main a:not(.btn)::after{content:"";position:absolute;left:13px;right:13px;bottom:9px;height:1px;background:var(--text);scale:0 1;transform-origin:left;transition:scale .3s cubic-bezier(.2,.8,.2,1)}
nav.main a:not(.btn):hover::after,nav.main a[aria-current=page]:not(.btn)::after{scale:1 1}
nav.mobile summary .bars::before{content:"";position:absolute;left:0;right:0;top:3px;border-top:2px solid currentColor;opacity:0}
nav.mobile summary .bars,nav.mobile summary .bars::before,nav.mobile summary .bars::after{transition:border-color .2s,rotate .3s,opacity .2s}
nav.mobile[open] summary .bars{border-color:transparent}
nav.mobile[open] summary .bars::before{opacity:1;rotate:45deg}nav.mobile[open] summary .bars::after{rotate:-45deg}
@media (prefers-reduced-motion:no-preference){nav.mobile[open] ul{animation:menu-in .32s cubic-bezier(.2,.8,.2,1) both}
  nav.mobile[open] li{animation:rise .4s cubic-bezier(.2,.8,.2,1) both}
  nav.mobile[open] li:nth-child(2){animation-delay:.04s}nav.mobile[open] li:nth-child(3){animation-delay:.08s}nav.mobile[open] li:nth-child(4){animation-delay:.12s}
  nav.mobile[open] li:nth-child(5){animation-delay:.16s}nav.mobile[open] li:nth-child(6){animation-delay:.2s}nav.mobile[open] li:nth-child(n+7){animation-delay:.24s}}
@keyframes menu-in{from{opacity:0;translate:0 -8px}}
@media (prefers-reduced-motion:no-preference) and (hover:hover){.btn:hover{translate:0 -1px}}
@media (prefers-reduced-motion:no-preference){.btn:active{scale:.98}.motion :focus-visible{animation:focus-in .25s ease-out}}
@keyframes focus-in{from{outline-offset:9px;outline-color:transparent}}
.scroll-progress{position:absolute;left:0;right:0;bottom:-1px;height:1px;pointer-events:none;transform-origin:left;transform:scaleX(0);background:var(--teal)}
.motion .faq details{overflow:hidden}
@media (forced-colors:active){.scroll-progress,ol.stages.flow::before{display:none}}

/* Brands and Creators heroes: a second column with their own figure. Brands: the Founder's logo, flowing as on Home
   (assets/logo-flow.js). Creators: three sample opportunities as rows on violet hairlines; the caption says they
   are samples. Both figures are decoration (aria-hidden); the page text says the same in words. */
@media (min-width:720px){.hero.page-hero.split .wrap{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}}
.hero.split .logo-live{width:min(30vw,400px)}
@media (max-width:719px){.hero.split .logo-live{width:min(64vw,320px)}}
.opps{margin:0;display:grid;gap:14px}
.opp{display:grid;gap:9px;padding:18px 0;border-top:1px solid rgba(177,151,252,.45)}
.opp__k{font:500 13px/1 var(--font);color:var(--violet)}
.opp b{font-family:var(--display);font-size:20px;line-height:1.2;color:var(--text)}
.opp__tags{display:flex;flex-wrap:wrap;gap:6px}.opp__tags span{font:500 11.5px/1 var(--mono);padding:6px 8px;border-radius:var(--radius);background:var(--surface-2);color:var(--text-2)}
@media (prefers-reduced-motion:no-preference){.opp{animation:rise .7s cubic-bezier(.2,.8,.2,1) .3s both}
  .opp:nth-child(2){animation-delay:.42s}.opp:nth-child(3){animation-delay:.54s}}

/* How It Works, pinned story (V2.1, the most cinematic page): with motion, on every screen either way up, assets/
   motion.js holds the story in place while it is scrolled through; the picture turns and changes scene stage by stage,
   the stage text crossfades, the rail fills and the dots follow. Phones get the same story, picture above the text. */
.story.is-pinned{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:center;height:calc(100svh - 68px);padding:24px 0}
.story.is-pinned .story__visual{display:grid;align-items:center;order:2;height:100%;perspective:1200px}
.story.is-pinned .story__frame{position:relative;top:auto;width:100%;max-width:min(440px,62svh);aspect-ratio:1;margin-inline:auto;
  border-radius:10px;border:1px solid var(--border);background:radial-gradient(70% 70% at 50% 40%,rgba(var(--lit),.1),transparent 70%),var(--bg-2);
  box-shadow:0 40px 100px -50px rgba(0,0,0,.9),0 0 0 1px rgba(var(--lit),.08)}
.story.is-pinned .scene{position:absolute;inset:0;display:grid;place-items:center;transition:none;opacity:1;transform:none}
.story.is-pinned .story__dots li{transition:opacity .4s,scale .4s}.story.is-pinned .story__dots li.is-on{opacity:1;scale:1.6}
.story.is-pinned ol.stages.long{grid-template-columns:1fr;gap:0;align-self:center}
.story.is-pinned ol.stages.long>li{grid-area:1/1;background:none;border:0;border-radius:0;padding:0 0 0 6px}
.story.is-pinned ol.stages.long>li::after{display:none}
.story.is-pinned ol.stages.long>li:not(.is-now),.story.is-pinned .scene:not(.is-on){pointer-events:none}
.story.is-pinned ol.stages.long>li h3{font-size:clamp(28px,2.8vw,40px);margin-bottom:14px}
@media (max-width:719px){.story.is-pinned{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr);align-items:start;gap:22px;padding:14px 0}
  .story.is-pinned .story__visual{order:0;height:auto}.story.is-pinned .story__frame{max-width:none;aspect-ratio:auto;height:min(34svh,300px)}
  .story.is-pinned ol.stages.long>li h3{font-size:25px;margin-bottom:8px}.story.is-pinned ol.stages.long>li p{font-size:15.5px}
  .story.is-pinned ol.stages.long>li p+p{margin-top:6px}}
@property --ring{syntax:"<angle>";inherits:false;initial-value:0deg}
@media (prefers-reduced-motion:no-preference){
  .story.is-pinned .story__frame::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;pointer-events:none;
    background:conic-gradient(from var(--ring),transparent 0 68%,rgba(var(--lit),.85) 80%,transparent 92%);
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:ring 7s linear infinite}}
@keyframes ring{to{--ring:360deg}}

/* V3: the sideways track (creator work cards, every screen size), and the giant background word. */
.has-track{overflow:clip;min-height:calc(100svh - 68px);display:grid;grid-template-columns:minmax(0,1fr);align-content:center}
ul.track.is-track{display:flex;gap:22px;width:max-content;perspective:1400px;counter-reset:track}
ul.track.is-track li{width:clamp(260px,34vw,430px);min-height:250px;flex:none;transform-origin:0 50%;padding:34px 30px 30px 30px;font-size:17px;
  counter-increment:track;border-color:var(--violet);background:linear-gradient(var(--t-violet),transparent)}
ul.track.is-track li::before{position:static;display:block;width:auto;height:auto;margin-bottom:26px;border:0;background:none;
  content:counter(track,decimal-leading-zero);font:600 13px/1 var(--mono);color:var(--teal)}
ul.track.is-track li b{font-size:21px;margin-bottom:10px}ul.track.is-track li::after{display:none}
.has-bigword{position:relative;overflow:clip}.has-bigword>.wrap{position:relative;z-index:1}
@media (prefers-reduced-motion:no-preference){
  .bigword{position:absolute;left:0;top:50%;translate:0 -50%;z-index:0;white-space:nowrap;pointer-events:none;
    font:800 clamp(120px,17vw,290px)/1 var(--font);letter-spacing:-.02em;color:transparent;-webkit-text-stroke:1px rgba(236,238,242,.06)}}
@media (forced-colors:active){.bigword{display:none}}

/* A short window (a phone on its side; Founder 2026-11-07: the same motion either way up): what is held in place gets a
   compact form (Home's flow heading beside its row, the workspace in two columns, shorter cards); motion.js scales down
   anything still too tall. */
@media (max-height:559px){
  .motion .cflow .wrap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:32px;align-items:start}
  .motion .cflow h2{font-size:24px}.motion .cflow .head p{font-size:15px}


  .motion .ws-ui{grid-template-columns:minmax(0,1.7fr) minmax(0,1fr)}.motion .ws-nav{grid-column:1/-1;display:flex}
  .motion .ws-side{grid-template-columns:minmax(0,1fr)}.motion .ws-checks,.motion .ws-note{font-size:12px}

  section.block.has-track{padding:16px 0}.has-track .head{margin-bottom:16px}.has-track h2{font-size:26px}
  ul.track.is-track{gap:16px}
  ul.track.is-track li{width:clamp(250px,36vw,340px);min-height:0;padding:20px 22px;font-size:15px}
  ul.track.is-track li::before{margin-bottom:12px}ul.track.is-track li b{font-size:18px;margin-bottom:6px}}

/* Pause (WCAG 2.2.2): assets/motion.js puts one button in the header that stops everything moving on its own: the
   logo's light, the hero light scene (both scripts listen) and the loops below. Motion that follows the reader's own
   scrolling carries on. One-off entrances are never paused, so nothing is left half drawn. */
.motion-toggle{flex:none;display:inline-grid;place-items:center;width:44px;height:44px;margin-left:auto;padding:0;border:1px solid var(--border-2);
  border-radius:12px;background:none;color:var(--text-2);cursor:pointer}
.motion-toggle:hover{color:var(--text);background:var(--surface-2)}
.motion-toggle::before{content:"";box-sizing:border-box;width:11px;height:12px;border-inline:3.5px solid currentColor;forced-color-adjust:none}
.is-paused .motion-toggle::before{width:10px;border:0;background:currentColor;clip-path:polygon(0 0,100% 50%,0 100%);translate:1px 0}
.is-paused .hero__cue span,.is-paused ol.stages.flow>li::after,.is-paused .scene .sx,.is-paused .hero-mark .logo-live,
.is-paused .cflow__loop span,.is-paused .story__frame::before{animation-play-state:paused!important}
.is-paused .lab{animation-play-state:running,paused!important}