/* AfterBid v40. One stylesheet for index.html and technology.html.
How the pages are put together
- Every scene is complete and readable as plain static content. That is what you get with scripts off,
with reduced motion, or if the motion scripts fail to load.
- When motion is wanted, carries "fx". A scene then becomes a tall section with a stage pinned
inside it (position: sticky), and app.js ties each scene's timeline to the scroll position.
- Colour code, used the same way everywhere: blue = the campaign and its delivery signals,
green = publisher observation, navy = AfterBid, orange = a person decides.
Dashed or hatched = missing, planned or returned.
- The line down the left edge is the campaign. Its marker is "now": a ring while the campaign runs,
an orange diamond while it waits for a person, a square once the result is stored. */
/* ---------- Fonts (self-hosted, SIL Open Font License, see assets/fonts) ---------- */
@font-face{font-family:"Instrument Sans";font-style:normal;font-weight:400 700;font-display:swap;src:url("assets/fonts/instrument-sans-latin-wght-normal.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url("assets/fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:600;font-display:swap;src:url("assets/fonts/ibm-plex-mono-latin-600-normal.woff2") format("woff2")}
/* ---------- Tokens ---------- */
:root{
--bg:#f5f3ee;--paper:#fbfaf7;--navy:#06172f;--navy-2:#0a2449;--night:#040f21;--ink:#0a203f;
--text:#536980;--muted:#566b82;
--line:rgba(6,23,47,.14);--line2:rgba(6,23,47,.24);
--blue:#0787ff;--blue-text:#0560b8;--sky:#6ec8ff;
--green:#0e8f61;--green-text:#0b6e4b;--mint:#43d19b;
--orange:#cf5f12;--orange-text:#8a4b08;--amber:#ff9d57;
--trace:#74899f;--surface:var(--bg);
--d-text:#9eb1c5;--d-muted:#8ea2b7;--d-line:rgba(255,255,255,.16);
--mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
--sans:"Instrument Sans","Helvetica Neue",Arial,sans-serif;
--ease:cubic-bezier(.16,1,.3,1);--ease-io:cubic-bezier(.65,0,.35,1);
--max:1280px;--gutter:22px;--pad:72px;--spine-x:24px;--nav-h:72px;
--wrap-left:calc(50% - min(var(--max),100% - 2 * var(--gutter)) / 2);
--spine-left:calc(var(--wrap-left) + var(--spine-x));
--vh:100vh;--line-top:118px;--under:170px;
}
.page-tech{--line-top:150px}
@supports(height:100svh){:root{--vh:100svh}}
/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-padding-top:96px;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;overflow-x:clip}
::selection{background:#cbe8ff;color:var(--navy)}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure,table,blockquote{margin:0}
h1,h2,h3,h4{overflow-wrap:break-word;text-wrap:balance}
ul,ol{padding:0;list-style:none}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
svg{display:block}
canvas{display:block}
b,strong{font-weight:650}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:2px}
.dark :focus-visible,.nav.on-dark :focus-visible,footer :focus-visible{outline-color:var(--sky)}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.skip{position:absolute;left:14px;top:-80px;z-index:200;padding:12px 16px;background:var(--navy);color:#fff;font-size:14px;font-weight:650;border-radius:4px}
.skip:focus{top:14px}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.wrap{width:min(var(--max),calc(100% - 2 * var(--gutter)));margin-inline:auto}
.pad{padding-left:var(--pad)}
main{position:relative}
main:focus{outline:none}
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.32s}
::view-transition-group(campaign-line){animation-duration:.5s}
@media(prefers-reduced-motion:reduce){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}}
html:not(.anim)::view-transition-group(*),html:not(.anim)::view-transition-old(*),html:not(.anim)::view-transition-new(*){animation:none!important} /* the footer switch counts as much as the system setting */
/* ---------- Navigation ---------- */
.nav{position:fixed;z-index:100;top:0;left:0;right:0;height:var(--nav-h);display:flex;align-items:center;background:rgba(245,243,238,.86);-webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);border-bottom:1px solid transparent;transition:border-color .4s var(--ease),background-color .4s var(--ease),color .4s var(--ease);view-transition-name:site-nav}
.nav.scrolled{border-color:var(--line);background:rgba(245,243,238,.96)}
html:not(.fx) .nav.scrolled{background:var(--bg);-webkit-backdrop-filter:none;backdrop-filter:none} /* static form: the header passes over dark bands, so it is solid */
/* over a dark section the header keeps a dark ground of its own (with the same blur as the light one), so nothing that scrolls under it shows through */
.nav.on-dark,.nav.on-dark.scrolled{background:rgba(4,15,33,.95);border-color:rgba(255,255,255,.1)}
.navin{display:flex;align-items:center;gap:24px}
.brand{display:block;flex:none;width:158px;padding:8px 0}
.brand svg{width:100%;height:auto;color:var(--navy);transition:color .4s var(--ease)}
.on-dark .brand svg{color:#fff}
.navlinks{display:flex;align-items:center;gap:2px;margin-left:auto}
.navlinks a{display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:0 12px;border-radius:999px;font-size:13px;font-weight:590;white-space:nowrap;color:#4c6178;transition:color .3s var(--ease),background-color .3s var(--ease)}
.navlinks a:hover{color:var(--navy);background:var(--paper)}
.navlinks a[aria-current="page"]{color:var(--navy);box-shadow:inset 0 -1.5px 0 var(--blue);border-radius:0}
.on-dark .navlinks a[aria-current="page"]{color:#fff;box-shadow:inset 0 -1.5px 0 var(--sky)}
.on-dark .navlinks a{color:#b9c8d8}
.on-dark .navlinks a:hover{color:#fff;background:rgba(255,255,255,.08)}
.navlinks .nav-cta{margin-left:8px;padding:0 16px;background:var(--navy);color:#fff}
.navlinks .nav-cta:hover{background:#0a264c;color:#fff}
.on-dark .navlinks .nav-cta{background:#fff;color:var(--navy)}
.on-dark .navlinks .nav-cta:hover{background:#e6eef6;color:var(--navy)}
.nav-cta .icon{transition:transform .35s var(--ease)}
.nav-cta:hover .icon,.btn:hover .icon{transform:translate(2px,-2px)}
.btn:hover .icon[data-dir="right"],.textlink:hover .icon{transform:translateX(3px)}
.menu{display:none;place-items:center;width:44px;height:44px;margin:0 -8px 0 auto;padding:0;border:0;border-radius:6px;background:transparent;color:var(--navy);cursor:pointer}
.on-dark .menu{color:#fff}
.menu svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.menu .x,.menu[aria-expanded="true"] .bars{display:none}
.menu[aria-expanded="true"] .x{display:block}
/* the loop, as the page's own progress: See, Find, Diagnose, Recommend, Approve, Change, Measure, Remember */
.verbs{display:flex;align-items:center;margin:0 auto;font:600 10.5px/1 var(--mono);letter-spacing:.09em;text-transform:uppercase}
.verbs a{position:relative;display:flex;align-items:center;min-height:40px;padding:0 9px;color:#586a82;transition:color .35s var(--ease)}
.verbs i{display:none;margin-right:8px;font-style:normal;color:var(--blue-text)}
.verbs a::after{content:"";position:absolute;left:9px;right:9px;bottom:9px;height:1.5px;background:var(--blue);transform:scaleX(0);transform-origin:0 50%;transition:transform .45s var(--ease)}
.verbs a:hover{color:var(--ink)}
.verbs .is-done a{color:#33496a}
.verbs .is-now a{color:var(--ink)}
.verbs .is-now a::after{transform:scaleX(1)}
.on-dark .verbs a{color:#7187a0}
.on-dark .verbs a:hover,.on-dark .verbs .is-now a{color:#fff}
.on-dark .verbs .is-done a{color:#a9bbcd}
.on-dark .verbs i{color:var(--sky)}
/* ---------- Buttons, links ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:46px;padding:0 20px;border:1px solid var(--navy);border-radius:4px;background:var(--navy);color:#fff;font-size:13.5px;font-weight:650;line-height:1.2;cursor:pointer;transition:transform .35s var(--ease),box-shadow .35s var(--ease),background-color .25s var(--ease),border-color .25s var(--ease),color .25s var(--ease)}
@media(hover:hover){.btn:hover{transform:translateY(-1px);box-shadow:0 12px 28px -8px rgba(6,23,47,.32)}} /* a touch has no hover to leave: nothing should stay lifted after a tap */
.btn:active{transform:translateY(0);box-shadow:none;transition-duration:.08s}
.btn.alt{background:transparent;color:var(--navy);border-color:#6b8097}
.btn.alt:hover{background:var(--paper);border-color:var(--navy)}
.btn.light{background:#fff;color:var(--navy);border-color:#fff}
.btn.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
.btn.ghost:hover{background:rgba(255,255,255,.08);border-color:#fff}
.icon{flex:none;width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transition:transform .35s var(--ease)}
.textlink{display:inline-flex;align-items:center;gap:9px;min-height:32px;font-size:15px;font-weight:650;color:var(--ink);background:linear-gradient(var(--blue),var(--blue)) 0 100% / 100% 1.5px no-repeat;padding-bottom:3px;transition:color .25s var(--ease),background-size .35s var(--ease)}
.textlink:hover{color:var(--blue-text)}
.dark .textlink{color:#fff;background-image:linear-gradient(var(--sky),var(--sky))}
.actions{display:flex;flex-wrap:wrap;gap:10px}
/* ---------- Type ---------- */
.eyebrow{font:600 11px/1.5 var(--mono);letter-spacing:.11em;text-transform:uppercase;color:#48627e}
.dark .eyebrow{color:#88a3bd}
.display{font-size:clamp(44px,5.6vw,84px);line-height:.94;letter-spacing:-.06em;font-weight:650}
.statement{font-size:clamp(34px,5vw,76px);line-height:.98;letter-spacing:-.056em;font-weight:610}
.statement span{display:block}
.statement .hi{color:var(--blue-text)}
.dark .statement .hi{color:var(--sky)}
.title{font-size:clamp(30px,3.3vw,50px);line-height:1.02;letter-spacing:-.046em;font-weight:610}
.lede{max-width:52ch;font-size:18px;line-height:1.6;color:var(--text)}
.dark .lede{color:var(--d-text)}
.fine{font:500 11.5px/1.6 var(--mono);color:var(--muted)}
.dark .fine{color:var(--d-muted)}
.tag{font:600 11px/1.5 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.dark .tag{color:var(--d-muted)}
.num{font-variant-numeric:tabular-nums}
.g{display:inline-block;width:12px;height:12px;vertical-align:-1px;flex:none}
/* ---------- The campaign line ---------- */
.spine{position:absolute;z-index:40;top:0;bottom:0;left:var(--spine-left);width:0;pointer-events:none}
.spine-track{position:absolute;left:0;top:var(--line-top);bottom:0;width:1px;margin-left:-.5px;background:rgba(120,140,165,.4)}
.spine-done,.spine-head,.spine-twin{display:none}
.fx .spine{position:fixed;top:0;bottom:0;transition:opacity .5s var(--ease);view-transition-name:campaign-line}
.fx .spine.is-off{opacity:0}
.fx .spine-track{top:var(--done-top,var(--line-top));bottom:auto;height:calc(var(--end-y,100vh) - var(--done-top,var(--line-top)))}
.fx .spine-done{display:block;position:absolute;left:0;top:var(--done-top,var(--line-top));width:2px;margin-left:-1px;height:calc(var(--done-y,var(--head-y,var(--line-top))) - var(--done-top,var(--line-top)));background:var(--blue)}
.fx .spine-head{display:block;position:absolute;left:var(--head-x,0px);top:var(--head-y,var(--line-top));width:13px;height:13px;margin:-6.5px 0 0 -6.5px;border-radius:50%;background:var(--bg);border:2px solid var(--blue);box-shadow:0 0 0 6px rgba(7,135,255,.1);transition:border-radius .45s var(--ease),transform .45s var(--ease),border-color .35s var(--ease),background-color .35s var(--ease),box-shadow .35s var(--ease),opacity .3s var(--ease)}
/* at the end of Home the marker runs along the turn to How it works and goes into the arrow */
.fx .spine.is-gone .spine-head{opacity:0;transform:scale(.4)}
.fx .spine.on-dark .spine-head{background:var(--night)}
.fx .spine.on-dark .spine-track{background:rgba(160,185,215,.22)}
.fx .spine[data-head="gate"] .spine-head{border-radius:1.5px;transform:rotate(45deg) scale(1.08);border-color:var(--orange);box-shadow:0 0 0 6px rgba(207,95,18,.12)}
.fx .spine[data-head="gate"] .spine-done{background:linear-gradient(var(--blue) calc(100% - 26px),var(--orange))}
.fx .spine[data-head="stored"] .spine-head{border-radius:1.5px;background:var(--navy);border-color:var(--navy);box-shadow:0 0 0 6px rgba(6,23,47,.08)}
.fx .spine.on-dark[data-head="stored"] .spine-head{background:#fff;border-color:#fff;box-shadow:0 0 0 6px rgba(255,255,255,.1)}
/* a test is running: a second, quieter marker rides beside the first */
.fx .spine-twin{display:block;position:absolute;left:0;top:var(--head-y,var(--line-top));width:9px;height:9px;margin:-4.5px 0 0 9px;border-radius:50%;background:var(--bg);border:1.5px solid var(--trace);opacity:0;transform:translateX(-14px);transition:opacity .4s var(--ease),transform .5s var(--ease)}
.fx .spine[data-head="test"] .spine-twin{opacity:1;transform:none}
.spine-ping{display:none}
.fx .spine-ping{display:block;position:absolute;left:0;top:var(--head-y,var(--line-top));width:13px;height:13px;margin:-6.5px 0 0 -6.5px;border-radius:50%;border:1.5px solid var(--blue);opacity:0}
.fx .spine-ping.is-green{border-color:var(--green)}
.fx .spine-ping.is-orange{border-color:var(--orange)}
.fx .spine.on-dark .spine-ping.is-green{border-color:var(--mint)}
@keyframes ping{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(3.6)}}
.fx .spine-ping.is-on{animation:ping .95s var(--ease) 1}
/* ---------- Scenes ---------- */
.scene{position:relative}
.stage{position:relative}
.fx .scene{height:calc(var(--len,3) * var(--vh) * var(--pace,1))}
.fx .stage{position:sticky;top:0;height:var(--vh);overflow:hidden}
/* A phone's toolbar slides away as the page scrolls, and the window grows taller than the stage. The stage keeps its size
(nothing moves), and its background carries on below it so a dark scene stays dark to the bottom of the screen. */
@supports(overflow:clip){.fx .stage{overflow-x:clip;overflow-y:visible;clip-path:inset(0 0 calc(-1 * var(--under)) 0)}}
.fx:not(.ready) .stage{visibility:hidden}
.stage-bg{position:absolute;inset:0;z-index:0;pointer-events:none}
.fx .stage-bg{bottom:calc(-1 * var(--under));background:var(--night);clip-path:circle(var(--r,0px) at var(--cx,50%) var(--cy,50%))}
.at{position:absolute;left:0;width:1px;height:1px;pointer-events:none} /* jump targets inside a pinned scene */
/* the statement a dark scene uncovers as it closes (see AB.outro): under everything else on the stage */
.fx .stage-out{position:absolute;inset:0;z-index:-1}
.fx .stage-out .wrap{position:relative;height:100%}
.fx .out-in{position:absolute;left:var(--pad);right:0;top:50%;transform:translateY(-50%)}
.fx .out-in .statement{max-width:15ch;color:var(--ink)}
.fx .out-in .statement .hi{color:var(--blue-text)} /* it is read on the light page, whatever the scene around it */
.fx .out-in .lede{margin-top:26px;max-width:50ch;font-size:19px;color:var(--text)}
.fx .is-staged{display:none}
/* what belongs to the dark is seen only through it */
.fx .flux-canvas,.fx .uni-canvas,.fx .mem-canvas{clip-path:circle(var(--r,0px) at var(--cx,50%) var(--cy,50%))}
.dark{background:var(--night);color:#fff;--surface:var(--night)}
/* a wide window that is short (a laptop at 150% scaling): scene headings give way a little so the pictures keep their room */
@media(min-width:901px){
.fx .scene .title{font-size:clamp(26px,min(3.3vw,5.8vh),50px)}
}
/* captions: a plain numbered run of text when static, one at a time when pinned */
.beat + .beat{margin-top:22px}
.fx .beats{position:relative}
.fx .beat{position:absolute;left:0;top:0;width:100%;margin:0;opacity:0;pointer-events:none}
.fx .beat.is-on{pointer-events:auto}
/* ---------- Closing and footer ---------- */
/* the footer: the brand and a line about it, four short groups of links, then the small print and the motion switch */
.foot{position:relative;z-index:2;background:#020b19;color:#8ea2b7;padding:64px 0 22px}
.foot-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.75fr);gap:44px 64px}
.foot-logo{display:inline-block;width:132px;padding:4px 0}
.foot-logo svg{width:100%;height:auto;color:#fff;opacity:.92}
.foot-brand p{margin-top:16px;max-width:30ch;font-size:14.5px;line-height:1.6;color:#9eb1c5}
.foot-nav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px 24px}
.foot-col h2{margin-bottom:8px;font:600 10.5px/1.5 var(--mono);letter-spacing:.11em;text-transform:uppercase;color:#7d93ab}
.foot-col a{display:inline-flex;align-items:center;min-height:34px;font-size:14.5px;color:#d3dde8;transition:color .25s var(--ease)}
.foot-col a:hover{color:#fff}
.foot-col a[aria-current="page"]{color:#fff;text-decoration:underline 1px var(--sky);text-underline-offset:6px}
.foot-base{grid-column:1 / -1;display:flex;flex-wrap:wrap;align-items:center;gap:0 24px;padding-top:14px;border-top:1px solid rgba(255,255,255,.1);font:500 11.5px/1.5 var(--mono)}
.foot-base a,.motion{display:inline-flex;align-items:center;min-height:40px;transition:color .25s var(--ease)}
.foot-base a:hover,.motion:hover{color:#fff}
.motion{margin-left:auto;padding:0;border:0;background:transparent;font:500 11.5px/1.5 var(--mono);color:inherit;cursor:pointer}
@media(max-width:900px){
.foot{padding-top:52px}
.foot-in{grid-template-columns:minmax(0,1fr);gap:36px}
}
@media(max-width:600px){
.foot-nav{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 20px}
.motion{margin-left:0}
}
@keyframes menuIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
/* ---------- Small screens: shared ---------- */
@media(max-width:1180px){
.verbs{margin:0 0 0 auto}
.verbs li{display:none}
.verbs li.is-now{display:block}
.verbs i{display:inline}
.verbs a::after{display:none}
.verbs ~ .navlinks{margin-left:0} /* only where the loop strip is there to push the links across */
}
@media(max-width:1050px){
:root{--pad:56px}
}
@media(max-width:900px){
:root{--pace:.84} /* a thumb travels further than a wheel: the pinned scenes are a little shorter */
}
@media(max-width:720px){
:root{--pad:26px;--spine-x:0px;--nav-h:64px}
html{scroll-padding-top:80px}
.brand{width:132px}
.menu{display:grid}
.verbs{margin-left:auto}
.navlinks{display:none;position:absolute;top:calc(var(--nav-h) - 6px);left:14px;right:14px;padding:8px;background:var(--paper);border:1px solid var(--line);box-shadow:0 18px 50px rgba(6,23,47,.12)}
.navlinks.open{display:grid}
.anim .navlinks.open{animation:menuIn .24s var(--ease)}
.navlinks a,.on-dark .navlinks a{min-height:46px;border-radius:2px;font-size:15px;color:#33496a}
.navlinks a[aria-current="page"],.on-dark .navlinks a[aria-current="page"]{color:var(--navy);box-shadow:inset 2px 0 0 var(--blue)}
.navlinks .nav-cta,.on-dark .navlinks .nav-cta{margin:4px 0 0;justify-content:center;background:var(--navy);color:#fff}
html:not(.js) .nav{position:static;height:auto;padding:12px 0}
html:not(.js) .navin{flex-wrap:wrap}
html:not(.js) .menu{display:none}
html:not(.js) .navlinks{display:flex;flex-wrap:wrap;position:static;width:100%;padding:0;border:0;box-shadow:none;background:transparent}
html:not(.js) .navlinks a{min-height:40px;padding:0 10px 0 0;font-size:14px}
html:not(.js) .navlinks .nav-cta{margin:0;padding:0 14px}
}
/* ---------- Hero: the campaign starts at the auction ---------- */
.hero{position:relative;display:flex;align-items:center;min-height:var(--vh);padding:calc(var(--nav-h) + 64px) 0 calc(16vh + 72px);overflow:hidden} /* a little more room below than above: the words sit in the upper middle of the first screen */
.hero-wash{position:absolute;inset:-12% -12% 0;pointer-events:none;background:radial-gradient(circle at 82% 24%,rgba(7,135,255,.13),transparent 27%),linear-gradient(180deg,var(--paper) 0,var(--bg) 88%)}
.hero-wash::after{content:"";position:absolute;inset:0;opacity:.42;background-image:linear-gradient(rgba(6,23,47,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(6,23,47,.035) 1px,transparent 1px);background-size:56px 56px;-webkit-mask-image:linear-gradient(#000,transparent 86%);mask-image:linear-gradient(#000,transparent 86%)}
.auction-mark{position:absolute;z-index:41;left:var(--spine-left);top:var(--line-top);width:13px;height:13px;margin:-6.5px 0 0 -6.5px;border-radius:50%;background:var(--bg);border:2px solid var(--blue);box-shadow:0 0 0 6px rgba(7,135,255,.1)}
.auction-label{position:absolute;z-index:3;left:calc(var(--spine-left) + 20px);top:var(--line-top);transform:translateY(-50%);font:600 11px/1 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:#436b94;white-space:nowrap}
.auction-label span{margin-left:10px;font-weight:500;letter-spacing:.02em;text-transform:none;color:var(--muted)}
/* the auction, as long as it lasts: a handful of bids, one winner, over in a moment */
.auction-burst{position:absolute;z-index:3;left:calc(var(--spine-left) + 212px);top:var(--line-top);display:flex;align-items:flex-end;gap:7px;height:22px;padding:0 8px 0 0;border-bottom:1px solid rgba(6,23,47,.22);transform:translateY(-100%) translateY(7px)}
.auction-burst i{width:2px;height:calc(var(--h) * 1px);background:var(--trace);transform-origin:50% 100%}
.auction-burst i:nth-child(1){--h:9;--d:0s}.auction-burst i:nth-child(2){--h:13;--d:.05s}.auction-burst i:nth-child(3){--h:7;--d:.09s}.auction-burst i:nth-child(4){--h:15;--d:.14s}
.auction-burst i:nth-child(5){--h:20;--d:.2s}.auction-burst i:nth-child(6){--h:11;--d:.25s}.auction-burst i:nth-child(7){--h:14;--d:.29s}
.auction-burst .win{background:var(--blue);width:3px}
@keyframes bid{0%,2%{transform:scaleY(0);opacity:1}6%,62%{transform:scaleY(1);opacity:1}70%,100%{transform:scaleY(1);opacity:0}}
@keyframes won{0%,6%{transform:scaleY(0);opacity:1}11%,76%{transform:scaleY(1);opacity:1}86%,100%{transform:scaleY(1);opacity:0}}
.anim .auction-burst i{animation:bid 4.6s 1.4s var(--ease) infinite both;animation-delay:calc(1.4s + var(--d))}
.anim .auction-burst .win{animation-name:won}
.hero-in{position:relative;z-index:3;display:grid;grid-template-columns:minmax(0,1.22fr) minmax(0,.78fr);gap:40px 56px;align-items:end}
.hero-copy .eyebrow{margin-bottom:18px}
.maskline{display:block;overflow:hidden;padding:.06em 0 .1em;margin:-.06em 0 -.1em}
.maskline>span{display:block}
.hero-side .lede{max-width:46ch;font-size:19px;line-height:1.58}
.hero-side .actions{margin-top:26px}
.hero-foot{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:22px;font:500 11px/1.5 var(--mono);color:var(--muted)}
.hero-foot li{display:flex;align-items:center;gap:8px}
.hero-foot li::before{content:"";flex:none;width:7px;height:7px;background:var(--blue);border:1px solid #066fd2}
.hero-cue{position:absolute;z-index:3;left:calc(var(--wrap-left) + var(--pad));bottom:34px;margin:0;display:flex;align-items:center;gap:10px;font:600 11px/1 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:#436b94}
.hero-cue .icon{width:12px;height:12px}
html:not(.fx) .hero-cue{display:none}
/* the hero arrives once, on load */
@keyframes heroLine{from{transform:translateY(112%)}to{transform:none}}
@keyframes heroFade{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes cue{0%,100%{transform:none}50%{transform:translateY(4px)}}
.anim .maskline>span{animation:heroLine .8s var(--ease) both}
.anim .maskline:nth-child(2)>span{animation-delay:.07s}
.anim .maskline:nth-child(3)>span{animation-delay:.14s}
.anim .maskline:nth-child(4)>span{animation-delay:.21s}
.anim .hero-side>*,.anim .hero-cue{animation:heroFade .65s .24s var(--ease) both}
.anim .hero-side .actions{animation-delay:.33s}
.anim .hero-foot{animation-delay:.42s}
.anim .hero-cue{animation-delay:.9s}
.anim .hero-cue .icon{animation:cue 2.4s 1.6s var(--ease-io) infinite}
.anim.js:not(.fonts-ready) .maskline>span,.anim.js:not(.fonts-ready) .hero-side>*,.anim.js:not(.fonts-ready) .hero-cue{animation-play-state:paused}
/* ---------- Interludes: one statement, scrolling past between pinned scenes ---------- */
.interlude{position:relative;padding:20vh 0 22vh}
.interlude .lede{margin-top:26px;max-width:50ch;font-size:19px}
.interlude .statement{max-width:15ch}
/* the campaign the page follows, named as it goes live */
.live-meta{display:flex;flex-wrap:wrap;gap:4px 0;margin-top:24px;font:500 12px/1.5 var(--mono);color:var(--muted)}
.live-meta li{display:flex;align-items:center}
.live-meta li:first-child{font-weight:600;color:var(--ink)}
.live-meta li + li::before{content:"";width:3px;height:3px;margin:0 11px;border-radius:50%;background:var(--trace)}
.interlude .live-meta + .lede{margin-top:18px}
@media(max-width:720px){.live-meta li:first-child{flex-basis:100%}.live-meta li:nth-child(2)::before{display:none}} /* the name on its own line, the figures under it */
html:not(.fx) .interlude{padding:104px 0}
.fx .interlude{padding:6vh 0 16vh} /* the statement rises as the scene before it clears */
.hero.hero-explore{min-height:0;padding-top:calc(var(--nav-h) + 140px);padding-bottom:120px} /* How it works: the hero is as tall as its words, so the campaign's scene follows without a blank screen. The scene's own timing is unchanged. */
@media(max-width:1050px){
.hero-in{grid-template-columns:minmax(0,1fr);gap:26px;align-items:start}
.hero{padding-top:calc(var(--nav-h) + 64px)}
}
@media(max-width:720px){
.hero{padding:calc(var(--nav-h) + 56px) 0 96px}
.display{font-size:clamp(29px,9.3vw,52px)} /* sized so the longest line of either headline stays on one line */
.hero-side .lede{font-size:17.5px}
.actions .btn{flex:1 1 auto}
.auction-label span{display:none}
.auction-burst{left:calc(var(--spine-left) + 96px)}
.hero-cue{bottom:28px}
.hero.hero-explore{padding-bottom:96px}
.interlude{padding:16vh 0 18vh}
.interlude .lede{font-size:17.5px}
}
/* ---------- Home: the short version ----------
What AfterBid is and what happens after the auction, the loop it runs, why it matters, the people who decide, and at
the end the way into How it works. Ordinary sections; nothing is pinned. */
/* the hero: the words on the left; across the top and down the right, one campaign's delivery. On track (blue), conditions
change and the line drifts (slate), AfterBid notices (navy), a person approves (orange), the outcome is measured (blue).
Drawn on the canvas from the layout, behind the words (15-home.js); the five labels are type, placed by the same code. */
.page-home{--flow-w:min(31vw,450px);--turn-r:28px}
.page-home .hero{padding-bottom:max(72px,calc(72px + (var(--vh) - 860px) * .9))} /* the words stay in the upper middle of a tall window */
.page-home .hero-in{display:block;padding-right:calc(var(--flow-w) + 56px)}
.page-home .hero-copy .lede{margin-top:28px;max-width:44ch;font-size:19px;line-height:1.58}
.page-home .hero-foot{margin-top:24px}
.traj{position:absolute;z-index:1;inset:0;margin:0;pointer-events:none}
.traj-c{position:absolute;inset:0;width:100%;height:100%}
.traj-l{position:absolute;left:0;top:0;margin:0;padding-left:17px;font-size:14px;line-height:19px;font-weight:520;color:var(--ink);white-space:nowrap;visibility:hidden}
.traj-l i{position:absolute;left:0;top:6px;width:7px;height:7px;border-radius:50%;background:var(--blue)}
.traj-l[data-k="2"] i{background:var(--trace)}
.traj-l[data-k="3"] i{background:var(--navy)}
.traj-l[data-k="4"] i{left:.5px;top:6.5px;width:6px;height:6px;border-radius:1px;background:var(--orange);transform:rotate(45deg)}
.traj-l.is-flip{padding:0 17px 0 0;text-align:right}
.traj-l.is-flip i{left:auto;right:0}
.traj-l.is-flip[data-k="4"] i{right:.5px}
.traj.is-laid .traj-l{visibility:visible}
html:not(.js) .traj{display:none}
/* it happens once, in order: the words, the bids, then the line draws itself and each label arrives as the line reaches it */
@keyframes bidIn{from{transform:scaleY(0)}to{transform:none}}
.anim .page-home .auction-burst i{animation:bidIn .45s var(--ease) both;animation-delay:calc(.55s + var(--d) * 1.6)}
.anim .traj-l{opacity:0;transform:translateY(5px);transition:opacity .5s var(--ease),transform .6s var(--ease)}
.anim .traj-l.is-on{opacity:1;transform:none}
.anim .page-home .hero-copy .lede,.anim .page-home .hero-foot{animation:heroFade .65s .24s var(--ease) both}
.anim .page-home .hero-foot{animation-delay:.42s}
.anim.js:not(.fonts-ready) .page-home .hero *,.anim.js:not(.fonts-ready) .page-home .hero{animation-play-state:paused}
/* a short wide window: a little more room under the Auction mark */
@media(min-width:1051px) and (max-height:760px){
.page-home .hero{padding-top:calc(var(--nav-h) + 92px)}
}
/* the loop: one line off the campaign line, six steps, and the way back into the next plan */
.loop{position:relative;padding:16px 0 112px;--back:44px;--turn:18px}
.loop-head .eyebrow{position:relative;margin-bottom:16px;color:var(--blue-text)}
.loop-head .eyebrow::before{content:"";position:absolute;top:50%;left:calc(var(--spine-x) - var(--pad) + 7px);width:calc(var(--pad) - var(--spine-x) - 19px);height:1px;background:var(--blue)}
.loop-head .eyebrow::after{content:"";position:absolute;z-index:41;top:50%;left:calc(var(--spine-x) - var(--pad) - 5px);width:10px;height:10px;margin-top:-5px;box-sizing:border-box;border-radius:50%;background:var(--bg);border:1.5px solid var(--blue)}
.loop-head .title{font-size:clamp(30px,3.4vw,50px)}
.loop-head .title span{display:block}
.loop-head .title .hi{color:var(--blue-text)}
.loop-sub{margin-top:18px;max-width:46ch;font-size:19px;line-height:1.5;color:var(--text)}
.loop-steps{position:relative;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));margin-top:64px}
.loop-steps::before{content:"";position:absolute;right:100%;top:-1px;width:calc(var(--pad) - var(--spine-x));height:2px;background:var(--blue);transform-origin:0 50%;transform:scaleX(var(--k0,1))}
.ls{position:relative;padding:40px 22px 0 0;--k:1}
.ls::before{content:"";position:absolute;z-index:1;left:0;top:-7px;width:13px;height:13px;border-radius:50%;background:var(--bg);border:2px solid var(--blue);transition:background-color .35s var(--ease),border-color .35s var(--ease),box-shadow .45s var(--ease)}
.ls::after{content:"";position:absolute;left:13px;right:0;top:-1px;height:2px;background:var(--blue);transform-origin:0 50%;transform:scaleX(var(--k))}
.ls.is-gate::before{top:-6.5px;width:12px;height:12px;border-radius:1.5px;border-color:var(--orange);transform:rotate(45deg)}
.ls.is-gate.is-ok::before{background:var(--orange);box-shadow:0 0 0 7px rgba(207,95,18,.14)}
.ls.is-stored::before{border-radius:1.5px;background:var(--navy);border-color:var(--navy)}
/* the way back, dashed: on from Remember to the end of the row, round the corner, and back under all six steps to the
campaign line. It runs round the words, never through them. */
.ls.is-stored::after{right:var(--turn);top:-.75px;height:0;background:none;border-top:1.5px dashed var(--trace)}
.loop-steps::after{content:"";position:absolute;right:0;top:-.75px;width:var(--turn);height:calc(100% + var(--back) + 1.5px);box-sizing:border-box;border:1.5px dashed var(--trace);border-left:0;border-radius:0 var(--turn) var(--turn) 0;clip-path:inset(0 0 calc((1 - var(--kc,1)) * 100%) 0)}
.ls-n{display:block;font:600 11px/1 var(--mono);letter-spacing:.09em;color:var(--blue-text)}
.ls.is-gate .ls-n{color:var(--orange-text)}
.ls h3{margin:12px 0 0;font-size:clamp(21px,1.9vw,27px);line-height:1.1;font-weight:620;letter-spacing:-.03em;color:var(--ink)}
.ls p{margin-top:10px;max-width:24ch;font-size:15px;line-height:1.5;color:var(--text)}
.loop-back{position:relative;margin-top:var(--back);padding-top:14px;font:600 10.5px/1.5 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.loop-back::before{content:"";position:absolute;top:-.75px;left:calc(var(--spine-x) - var(--pad));width:calc(var(--pad) - var(--spine-x) + 100% - var(--turn));height:0;border-top:1.5px dashed var(--trace);transform-origin:100% 50%;transform:scaleX(var(--kb,1))}
.loop-dot{display:none}
.fx .loop-dot{display:block;position:absolute;z-index:2;left:0;top:0;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;background:var(--blue);box-shadow:0 0 0 5px rgba(7,135,255,.14);opacity:0;pointer-events:none;transition:border-radius .3s var(--ease),background-color .3s var(--ease)}
.fx .loop-dot.is-stored{border-radius:1.5px;background:var(--navy);box-shadow:0 0 0 5px rgba(6,23,47,.1)}
/* human control: the message and the photograph as one composition, inside the page's margins. The photograph is shown
whole, as supplied. */
.people{position:relative;padding:88px 0 104px}
.people-in{display:grid;grid-template-columns:minmax(0,.5fr) minmax(0,1fr);align-items:center;gap:40px 56px;width:min(var(--max),calc(100% - 2 * var(--gutter)));margin-inline:auto;padding-left:var(--pad)}
.people-copy{position:relative;max-width:480px}
.people-copy .eyebrow{position:relative;margin-bottom:20px;color:var(--orange-text)}
/* the decision point on the campaign line, level with the message */
.people-copy .eyebrow::before{content:"";position:absolute;top:50%;left:calc(var(--spine-x) - var(--pad) + 7px);width:calc(var(--pad) - var(--spine-x) - 19px);height:1px;background:var(--orange)}
.people-copy .eyebrow::after{content:"";position:absolute;z-index:41;top:50%;left:calc(var(--spine-x) - var(--pad) - 5px);width:10px;height:10px;margin-top:-5px;border-radius:1.5px;background:var(--bg);border:1.5px solid var(--orange);transform:rotate(45deg)}
.people-copy .statement{font-size:clamp(34px,3.7vw,54px)}
.people-copy .lede{margin-top:24px;max-width:34ch;font-size:19px;line-height:1.55}
.people-fig{position:relative;margin:0;overflow:hidden;aspect-ratio:1672 / 941;background:#d9d4c9;border-radius:var(--fig-r,20px);isolation:isolate} /* the photograph is shown whole; the rounding matches its scroll reveal (app.js reads it) */
.people-fig::after{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(6,23,47,.08);pointer-events:none} /* a hairline, so the light wall in the picture keeps an edge on the light page */
.people-fig picture,.people-fig img{display:block;width:100%;height:100%}
.people-fig img{object-fit:cover}
/* why it matters: three rows that hang off the campaign line */
.why{position:relative;padding:80px 0 88px}
.why-head{max-width:960px}
.why-head .eyebrow{margin-bottom:22px}
.why-head .statement{max-width:none;font-size:clamp(34px,4.3vw,64px)} /* two lines on a wide window, not four */
.pillars{margin-top:52px;border-bottom:1px solid var(--line)}
.pl{position:relative;display:grid;grid-template-columns:150px minmax(0,1.2fr) minmax(0,.9fr);grid-template-rows:auto 1fr;gap:10px 52px;padding:32px 0 36px;border-top:1px solid var(--line)}
.pl::before{content:"";position:absolute;top:-1px;right:100%;width:calc(var(--pad) - var(--spine-x));height:1px;background:var(--line)}
.pl::after{content:"";position:absolute;z-index:41;top:-5px;left:calc(var(--spine-x) - var(--pad) - 4.5px);width:9px;height:9px;border-radius:50%;background:var(--bg);border:1.5px solid var(--green)}
.pl-d::after{background:var(--navy);border-color:var(--navy)}
.pl-m::after{border-radius:1px;background:var(--navy);border-color:var(--navy)}
.pl-g{grid-row:1 / 3;width:132px;height:84px;overflow:visible}
.pl .tag{grid-column:2;color:var(--ink)}
.pl-p .tag{color:var(--green-text)}
.pl h3{grid-column:2;margin:0;max-width:21ch;font-size:clamp(26px,2.6vw,40px);line-height:1.08;letter-spacing:-.035em;font-weight:620;color:var(--ink)}
.pl>p:last-child{grid-column:3;grid-row:1 / 3;align-self:end;max-width:40ch;font-size:16px;line-height:1.55;color:var(--text)}
.pl-g *{fill:none;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.pl-g .g-frame{stroke:var(--line2);stroke-width:1.2}
.pl-g .g-text{stroke:#b8c2cc;stroke-width:2.4}
.pl-g .g-slot{fill:rgba(14,143,97,.12);stroke:var(--green);stroke-width:1.2}
.pl-g .g-slot.is-new{fill:var(--green)}
.pl-g .g-out{stroke:var(--green);stroke-width:1.6}
.pl-g .g-dot{fill:var(--blue);stroke:none}
.pl-g .g-fan{stroke:var(--trace);stroke-width:1.1}
.pl-g .g-fan.is-yes{stroke:var(--ink);stroke-width:2}
.pl-g .g-fan.is-gap{stroke-dasharray:.04 .05}
.pl-g .g-node{fill:var(--navy);stroke:none}
.pl-g .g-on{stroke:var(--blue);stroke-width:2}
.pl-g .g-spine{stroke:var(--blue);stroke-width:2}
.pl-g .g-rib{stroke:var(--ink);stroke-width:1.2}
.pl-g .g-sq{fill:var(--navy);stroke:none}
.pl-g .g-sq.is-back{fill:var(--bg);stroke:var(--ink);stroke-width:1.2;stroke-dasharray:2 2}
.pl-g .g-x{stroke:var(--ink);stroke-width:1.5}
/* drawn in as each row comes up (motion on only; otherwise complete) */
.fx .pl-g [pathLength]{stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--d,1))}
.fx .pl-g .g-fan.is-gap{stroke-dasharray:.04 .05}
.fx .pl-g .g-slot.is-new,.fx .pl-g .g-dot,.fx .pl-g .g-node,.fx .pl-g .g-sq,.fx .pl-g .g-x{opacity:var(--e,1)}
/* the close, and the campaign line's last move: at the end of Home it turns, for the first time, and runs to How it works */
body.page-home .close{padding:104px 0 96px}
.go-row{position:relative;display:flex;justify-content:flex-end;margin-top:120px}
/* The fixed progress spine must terminate at the tangent of the closing bend.
Mask any continuing vertical stroke behind the local rounded rail (including
during scrub/reverse); the rail itself draws the single visible corner. */
.fx .go-row::before{content:"";position:absolute;left:calc(var(--spine-x) - 2px);bottom:0;width:4px;height:var(--turn-r);background:var(--bg);z-index:41;pointer-events:none}
.go{position:relative;z-index:43;display:inline-flex;align-items:center;min-height:48px;padding:4px 30px 18px 10px;font-size:clamp(20px,1.75vw,26px);line-height:1.2;font-weight:620;letter-spacing:-.025em;color:var(--ink);transition:color .3s var(--ease)}
.go:hover{color:var(--blue-text)}
.go:focus-visible{outline-offset:2px}
.go-rail{position:absolute;z-index:42;left:calc(var(--spine-x) - .5px);right:0;bottom:0;height:var(--turn-r);box-sizing:border-box;border-left:1px solid rgba(120,140,165,.4);border-bottom:1px solid rgba(120,140,165,.4);border-bottom-left-radius:var(--turn-r);pointer-events:none}
/* the arrow is the end of the line */
.go-rail::after{content:"";position:absolute;right:1.5px;bottom:-5px;width:10px;height:10px;box-sizing:border-box;border-top:1.6px solid var(--blue);border-right:1.6px solid var(--blue);transform:rotate(45deg);transition:transform .35s var(--ease),border-color .35s var(--ease)}
.go-row:hover .go-rail::after{transform:translateX(4px) rotate(45deg)}
.go-fill{display:none}
.fx .go-fill{display:block;position:absolute;left:-.5px;right:0;top:0;bottom:-.5px;box-sizing:border-box;border-left:2px solid var(--blue);border-bottom:2px solid var(--blue);border-bottom-left-radius:var(--turn-r);clip-path:inset(0 calc((1 - var(--go,0)) * 100%) 0 0)}
.fx .go-rail::after{border-color:var(--trace)}
.fx .go-rail.is-on::after{border-color:var(--blue)}
/* without the scroll-driven layout the campaign line stops where it turns, and the turn is drawn here */
html:not(.fx) .page-home .spine-track{bottom:calc(96px + var(--turn-r))}
@media(max-width:1050px){
.pl{grid-template-columns:120px minmax(0,1fr);gap:12px 32px}
.pl-g{width:108px;height:69px}
.pl>p:last-child{grid-column:2;grid-row:auto;align-self:start}
.page-home{--flow-w:36vw}
.page-home .hero-in{padding-right:calc(var(--flow-w) + 44px)}
}
@media(max-width:900px){
/* the hero stacks: the words, then the campaign's trajectory under them, the width of the window */
.page-home .hero{flex-direction:column;align-items:stretch;justify-content:flex-start;padding-top:calc(var(--nav-h) + 100px)}
.page-home .hero-in{padding-right:0}
.traj{position:relative;inset:auto;height:clamp(270px,76vw,360px);margin-top:36px}
.loop{padding:16px 0 96px;--back:30px}
/* the loop runs downwards on a narrow window */
.loop-steps{grid-template-columns:minmax(0,1fr);margin-top:48px}
.loop-steps::before,.loop-steps::after{display:none}
.ls{padding:0 0 30px 34px}
.ls::before{left:0;top:5px}
.ls.is-gate::before{left:.5px;top:5.5px}
.ls::after{left:5.5px;right:auto;top:18px;bottom:0;width:2px;height:auto;transform-origin:50% 0;transform:scaleY(var(--k))}
.ls.is-stored::after{right:auto;top:18px;bottom:calc(-1 * var(--back));width:0;height:auto;border-top:0;border-left:1.5px dashed var(--trace)}
.ls h3{margin-top:6px}
.ls p{max-width:36ch}
.loop-back{padding-left:34px}
.loop-back::before{width:calc(var(--pad) - var(--spine-x) + 6.25px)}
.people{padding:72px 0 80px}
.people-in{width:auto;margin:0;grid-template-columns:minmax(0,1fr);gap:32px;padding-left:0}
.people-copy{max-width:none;padding:0 var(--gutter) 0 calc(var(--wrap-left) + var(--pad))}
.people-fig{--fig-r:14px;margin:0 var(--gutter) 0 calc(var(--wrap-left) + var(--pad))} /* in line with the words, not edge to edge */
.why{padding:72px 0 64px}
.pillars{margin-top:40px}
.pl{grid-template-columns:minmax(0,1fr);padding:26px 0 30px}
.pl-g{grid-row:auto;width:84px;height:54px;margin-bottom:4px}
.pl .tag,.pl h3,.pl>p:last-child{grid-column:1}
}
@media(max-width:720px){
.page-home .hero-copy .lede{font-size:17.5px}
.traj-l{padding-left:14px;font-size:12.5px;line-height:16px}
.traj-l i{top:4.5px;width:6px;height:6px}
.traj-l[data-k="4"] i{top:5px;width:5px;height:5px}
.traj-l.is-flip{padding:0 14px 0 0}
body.page-home .close{padding:88px 0 80px}
.go-row{margin-top:72px}
html:not(.fx) .page-home .spine-track{bottom:calc(80px + var(--turn-r))}
}
/* ---------- 03 Campaigns don't stay still after launch ----------
Static form: a dark section with a still of the simulation and the captions in order.
Pinned form: the stage starts on the page colour, the dark opens from the campaign's plan, the opening statement
settles into the heading, and the second heading takes over when AfterBid starts reading the system. */
.scene-flux{padding:112px 0 104px}
.flux-canvas{display:none}
.flux-still{position:relative;z-index:1;display:block;width:100%;max-width:1040px;height:auto;margin:34px 0 10px}
.flux-pre,.flux-in{position:relative;z-index:2}
.flux-open{max-width:15ch}
.flux-eye{margin:30px 0 16px}
.flux-beats,.flux-beats2{max-width:46ch}
.flux-beats .tag,.flux-beats2 .tag{display:block;margin-bottom:6px;color:#b9c8d8}
.flux-beats p,.flux-beats2 p{font-size:19px;line-height:1.5;color:#dbe4ee}
.flux-head2 .title{margin:52px 0 22px;max-width:18ch;color:#fff}
.flux-vars{display:flex;flex-wrap:wrap;gap:4px 20px;margin-top:30px;font:500 11.5px/1.5 var(--mono);color:#a9bbcd}
.flux-vars li{display:flex;align-items:center;gap:8px}
.flux-vars li::before{content:"";width:10px;height:1px;background:currentColor}
.flux-steps{display:flex;flex-wrap:wrap;gap:6px 0;margin-top:16px;font:600 10.5px/1.5 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:#a9bbcd}
.flux-steps li{display:flex;align-items:center}
.flux-steps li + li::before{content:"";width:18px;height:1px;margin:0 10px;background:rgba(255,255,255,.3)}
.flux-state,.flux-ok,.flux-read{display:none}
.flux-key{display:flex;flex-wrap:wrap;gap:6px 22px;margin-top:30px;font:500 11.5px/1.5 var(--mono);color:#b9c8d8}
.flux-key li{display:flex;align-items:center;gap:8px}
.flux-key li::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--blue)}
.flux-key .k-plan::before{width:14px;height:0;border-radius:0;background:none;border-top:1.5px dashed rgba(255,255,255,.7)}
.flux-key .k-path::before{width:14px;height:1px;border-radius:0;background:rgba(176,198,224,.8)}
.flux-key .k-hint{display:none;color:#8ea2b7}
.flux-key .k-hint::before{width:10px;height:1px;border-radius:0;background:currentColor}
.flux-note{margin-top:22px}
/* the still */
.flux-still .fs-env{fill:none;stroke:rgba(176,198,224,.34);stroke-width:1}
.flux-still .fs-ring{fill:none;stroke:rgba(255,255,255,.5);stroke-width:1}
.flux-still .fs-ring.is-off{stroke-dasharray:3 4}
.flux-still .fs-plan{fill:none;stroke:rgba(255,255,255,.62);stroke-width:1.2;stroke-dasharray:3 5}
.flux-still .fs-camp{fill:none;stroke:var(--blue);stroke-width:2.6;stroke-linejoin:round}
.flux-still .fs-dec{fill:none;stroke:var(--blue);stroke-width:2;stroke-linecap:round}
.flux-still .fs-head{fill:var(--blue);stroke:rgba(110,200,255,.5);stroke-width:6;paint-order:stroke}
.flux-still .fs-gate{fill:var(--orange)}
.flux-still .fs-lab{font:600 12px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;fill:#dbe4ee}
.flux-still .fs-lab.org{fill:var(--amber)}
/* pinned */
.fx .scene-flux{padding:0;background:none;color:var(--ink)}
.fx .flux-canvas{display:block;position:absolute;inset:0;z-index:1;width:100%;height:100%}
.fx .flux-still{display:none}
.fx .flux-pre{position:absolute;inset:0;z-index:0}
.fx .stage-bg .flux-pre{bottom:var(--under)} /* the dark runs on below the stage; the twin statement must not */
.fx .flux-open{position:absolute;left:var(--pad);top:50%;margin:0;color:var(--ink);transform-origin:0 0;will-change:transform}
.fx .flux-open:not(.is-twin) .hi{color:var(--blue-text)}
.fx .flux-open.is-twin{color:#fff}
.fx .flux-open.is-twin .hi{color:var(--sky)}
.fx .flux-in{height:100%;color:#fff}
.fx .flux-in>*{position:absolute;margin:0}
.fx .flux-eye{left:var(--pad);top:30%;color:#88a3bd}
.fx .flux-head2{left:var(--pad);bottom:calc(50% + 62px);width:min(440px,37%)}
.fx .flux-head2 .title{margin:0;max-width:none}
.fx .flux-beats,.fx .flux-beats2{left:var(--pad);top:calc(50% + 54px);width:min(390px,33%);height:170px}
.fx .flux-vars{inset:0;display:block;margin:0;pointer-events:none}
.fx .flux-vars li{position:absolute;left:0;top:0;white-space:nowrap;color:#a9bbcd}
.fx .flux-vars li.is-left{flex-direction:row-reverse}
.fx .flux-steps{right:0;top:calc(var(--nav-h) + 26px);margin:0}
.fx .flux-steps li{color:#5f7690;transition:color .45s var(--ease)}
.fx .flux-steps li.is-done{color:#a9bbcd}
.fx .flux-steps li.is-now{color:var(--sky)}
.fx .flux-state,.fx .flux-ok{display:block;left:0;top:0;font:600 10.5px/1 var(--mono);letter-spacing:.09em;text-transform:uppercase;white-space:nowrap;color:#dbe4ee;pointer-events:none;will-change:transform}
.fx .flux-ok{color:var(--amber)}
.fx .flux-read{display:block;color:var(--sky);white-space:nowrap}
.fx .flux-key{left:var(--pad);bottom:7%;margin:0}
.fx .flux-note{right:0;bottom:7%;max-width:30ch;margin:0;text-align:right}
@media(hover:hover) and (pointer:fine){.fx .flux-key .k-hint{display:flex;opacity:0}}
@media(max-width:900px){
.fx .flux-head2{bottom:auto;top:calc(var(--nav-h) + 4.5vh);width:calc(100% - var(--pad))}
.fx .flux-head2 .title{font-size:clamp(24px,6.4vw,32px)}
.fx .flux-beats,.fx .flux-beats2{top:auto;bottom:calc(9% + 34px);width:calc(100% - var(--pad) - 6px);height:122px}
.fx .flux-beats p,.fx .flux-beats2 p{font-size:15.5px;line-height:1.45}
.fx .flux-key{bottom:5%;gap:4px 16px;font-size:10.5px}
.fx .flux-note{left:var(--pad);right:auto;bottom:2%;max-width:none;text-align:left;font-size:10.5px}
.fx .flux-vars li{font-size:10.5px}
.fx .flux-vars li:nth-child(1),.fx .flux-vars li:nth-child(5),.fx .flux-vars li:nth-child(6){display:none}
.fx .flux-steps{display:none} /* on a narrow window the captions name each step themselves */
.fx .flux-read{display:none}
.fx .flux-state,.fx .flux-ok{font-size:9.5px}
}
/* ---------- 02 See: delivery signals, the publisher observer, the publisher universe ----------
The page drawn here is fictional. Everything inside .pg is sized in em, where 1em (--u) = the page width / 56,
so the whole drawing scales as one piece. Static form first, pinned form after. */
.scene-see{padding:104px 0;--pw:min(480px,calc(100vw - 2 * var(--gutter) - var(--pad)));--u:calc(var(--pw) / 56)}
.scene-see .stage-bg,.see-plate,.see-flow,.uni-canvas,.see-tags{display:none}
.see-head .eyebrow{margin-bottom:16px}
.see-head .title{max-width:17ch;font-size:clamp(28px,2.8vw,42px)}
.see-beats{margin-top:34px;max-width:46ch}
.see-beats .tag,.uni-beats .tag{display:block;margin-bottom:5px;color:var(--ink)}
.see-beats .tag i{margin-right:8px;font-style:normal;color:var(--green-text)}
.see-beats p,.uni-beats p{font-size:18px;line-height:1.5;color:var(--text)}
/* the page */
.obs-art{position:relative;margin-top:56px}
.pg{position:relative;width:56em;font-size:var(--u);border-radius:.9em;background:#fff;box-shadow:0 0 0 1px var(--line2),0 3.4em 6em -3.6em rgba(6,23,47,.36)}
.pg-bar{position:relative;display:flex;align-items:center;gap:1.2em;height:4em;padding:0 1.4em;border-bottom:1px solid var(--line);border-radius:.9em .9em 0 0;background:#eef1f4;overflow:hidden}
.pg-dots{flex:none;width:.7em;height:.7em;border-radius:50%;background:#c6d0da;box-shadow:1.15em 0 0 #c6d0da,2.3em 0 0 #c6d0da;margin-right:2.3em}
.pg-url{flex:1;min-width:0;padding:.55em 1em;border-radius:.5em;background:#fff;font:500 1.08em/1 var(--mono);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pg-who{display:grid;flex:none}
.pg-who b{grid-area:1 / 1;justify-self:end;font:600 .98em/1 var(--mono);letter-spacing:.07em;text-transform:uppercase;white-space:nowrap;color:var(--muted)}
.pg-who .who-o{color:var(--green-text)}
.pg-who .who-v{display:none}
.pg-load{position:absolute;left:0;bottom:0;width:100%;height:2px;background:var(--green);transform:scaleX(0);transform-origin:0 50%}
.pg-view{position:relative;height:68em;border-radius:0 0 .9em .9em;overflow:hidden}
.pg-doc{position:absolute;inset:0;padding:0 2.4em;background:#fff;overflow:hidden}
.pg-mast{display:flex;align-items:center;gap:1.7em;height:4.6em;border-bottom:1px solid var(--line)}
.pg-mast b{margin-right:auto;font:700 1.75em/1 var(--sans);letter-spacing:-.035em;color:var(--ink)}
.pg-mast span{font:560 1.05em/1 var(--sans);color:var(--muted)}
.ad{position:relative;display:grid;overflow:hidden;background:#e9edf1}
.ad-lb{width:45.6em;height:11.7em;margin:1.4em auto 1.2em}
.pg-cols{display:grid;grid-template-columns:minmax(0,1fr) 14.1em;column-gap:2.4em}
.pg-kick{height:1.8em}
.pg-kick span{font:600 .92em/1 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--blue-text)}
.pg-h{margin-bottom:.8em}
.pg-h span{font:660 2.14em/1.14 var(--sans);letter-spacing:-.03em;color:var(--ink)}
.pg-by{height:1.9em}
.pg-by span{font:500 .98em/1 var(--sans);color:var(--muted)}
.pg-img{position:relative;height:7.4em;margin-bottom:1.4em;background:linear-gradient(180deg,#06132b 0,#12305f 46%,#3d5f95 74%,#c88a5a 100%);overflow:hidden}
.pg-img i{position:absolute;bottom:-1.2em;width:3.5em;height:6.6em;border-radius:.6em;background:#030a17;box-shadow:inset 0 0 0 .13em #7f95ad}
.pg-img i::before{content:"";position:absolute;left:.5em;top:.55em;width:.9em;height:.9em;border-radius:50%;background:#2d6fb8;box-shadow:1.25em 0 0 #2d6fb8,0 1.25em 0 #2d6fb8}
.pg-img i:nth-child(1){left:22%;transform:rotate(-7deg)}
.pg-img i:nth-child(2){left:44%;bottom:-.4em}
.pg-img i:nth-child(3){left:66%;transform:rotate(7deg)}
.pg-p{margin-bottom:1.2em}
.pg-p span{font:450 1.14em/1.54 var(--sans);color:#4a5b70}
.ad-in,.ad-in2{width:14.1em;height:11.75em;margin:0 auto 1.4em}
.ad-mpu{width:14.1em;height:11.75em}
.pg-side .pg-kick{margin-top:1.5em}
.pg-s{margin-bottom:.7em}
.pg-s span{font:600 1.08em/1.3 var(--sans);color:var(--ink)}
.ad-hp{width:14.1em;height:28.2em;margin-top:1.1em}
.ad-anchor{position:absolute;left:50%;bottom:0;width:34.2em;height:4.2em;margin-left:-17.1em;box-shadow:0 -1px 0 var(--line)}
/* the creatives: one for the campaign we follow, the rest unbranded */
.cr{position:relative;background:linear-gradient(160deg,#eef1f4,#dde4ea)}
.cr::before{content:"";position:absolute;left:12%;top:22%;width:52%;height:.9em;border-radius:.2em;background:rgba(6,23,47,.18);box-shadow:0 1.6em 0 rgba(6,23,47,.1)}
.cr::after{content:"";position:absolute;left:12%;bottom:16%;width:4.6em;height:1.5em;border-radius:1em;background:rgba(6,23,47,.3)}
.cr-nova{display:grid;align-content:center;justify-items:start;gap:.5em;padding-left:3em;background:linear-gradient(100deg,#06172f,#0b3a7a 58%,#0787ff);color:#fff}
.cr-nova::before,.cr-nova::after{display:none}
.cr-nova b{font:700 2.7em/1 var(--sans);letter-spacing:-.045em}
.cr-nova span{font:560 1.1em/1 var(--sans);opacity:.86}
.cr-nova em{margin-top:.3em;padding:.42em .9em;border-radius:1em;background:#fff;font:650 .9em/1 var(--sans);font-style:normal;color:#06172f}
.cr-nova i{position:absolute;right:5em;top:1.5em;width:5em;height:11em;border-radius:.8em;background:#030a17;box-shadow:inset 0 0 0 .14em #9fb5cc;transform:rotate(9deg)}
.cr-nova i::before{content:"";position:absolute;left:.7em;top:.7em;width:1.3em;height:1.3em;border-radius:50%;background:#2d6fb8;box-shadow:1.8em 0 0 #2d6fb8,0 1.8em 0 #2d6fb8}
.cr-a{background:linear-gradient(160deg,#f3eadf,#e2d0bb)}
.cr-b{background:linear-gradient(160deg,#e4ece7,#c8d9ce)}
.cr-c{background:linear-gradient(160deg,#ece6f1,#d5c8de)}
.cr-d{background:linear-gradient(180deg,#e6edf5,#c7d6e8)}
.cr-e{background:linear-gradient(90deg,#efe8d8,#e2d5b7)}
.cr-e::before{left:5%;top:34%;width:30%;box-shadow:none}
.cr-e::after{left:auto;right:5%;bottom:30%}
.ad::before{content:"Ad";position:absolute;z-index:2;right:.5em;top:.45em;padding:.2em .45em;border-radius:.2em;background:rgba(255,255,255,.82);font:600 .78em/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:#5d6f84}
.rf,.pg-scan,.pg-time{display:none}
/* static: the page as it is "now", every ad unit marked, the two new ones filled */
html:not(.fx) .scene-see .ad{outline:2px solid var(--green);outline-offset:-2px}
html:not(.fx) .scene-see .ad.is-new .cr{background:rgba(14,143,97,.84)}
html:not(.fx) .scene-see .ad.is-new .cr::before,html:not(.fx) .scene-see .ad.is-new .cr::after{display:none}
html:not(.fx) .scene-see .ad.is-new::before{content:"New";background:#fff;color:var(--green-text)}
/* what the observer read */
.obs-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px;max-width:var(--pw)}
.chip{display:inline-flex;align-items:center;gap:7px;padding:6px 10px 6px 9px;border:1px solid rgba(14,143,97,.55);border-radius:3px;background:#fff;font:500 11px/1.2 var(--mono);color:var(--ink);white-space:nowrap}
.chip b{font-weight:600;color:var(--green-text)}
.chip::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--green)}
.obs-supply{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin-top:14px;max-width:var(--pw);font:500 11px/1.4 var(--mono);color:var(--ink)}
.sup-lines{display:none}
.sup-file,.sup-head{display:inline-flex;align-items:center;gap:6px;font:600 11px/1.4 var(--mono)}
.sup-file{padding:5px 9px;border:1px solid var(--line2);border-radius:3px;background:#fff}
.sup-file .icon{color:var(--green);width:10px;height:10px}
.sup-nodes{display:inline-flex;flex-wrap:wrap;gap:4px 12px}
.sup-nodes li{display:flex;align-items:center;gap:6px;color:var(--muted)}
.sup-nodes li::before{content:"";width:8px;height:8px;border-radius:50%;border:1.5px solid var(--green);background:#fff}
.sup-nodes li.is-res::before{border-style:dashed}
.obs-note{margin-top:18px}
/* the universe, static: a heading and two plain lists */
.uni{margin-top:88px}
.uni-head .eyebrow{margin-bottom:16px}
.uni-head .title{max-width:17ch;font-size:clamp(28px,2.8vw,42px)}
.uni-beats{margin-top:24px;max-width:46ch}
.uni-self,.uni-tip{display:none}
.uni-group{margin:30px 0 12px}
.uni-names{display:flex;flex-wrap:wrap;gap:8px 22px;max-width:940px;font:600 15px/1.3 var(--sans);letter-spacing:-.01em;color:var(--ink)}
.uni-names li{display:flex;align-items:center;gap:8px;white-space:nowrap}
.uni-names li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--trace)}
.uni-note{margin-top:22px}
@media(min-width:901px){
html:not(.fx) .see-in{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);column-gap:56px;align-items:start}
html:not(.fx) .see-head,html:not(.fx) .see-beats{grid-column:1}
html:not(.fx) .obs-art{grid-column:2;grid-row:1 / span 3;margin-top:0;justify-self:end}
html:not(.fx) .uni{grid-column:1 / -1}
html:not(.fx) .scene-see{--pw:min(500px,40vw)}
}
/* ================= pinned ================= */
.fx .scene-see{padding:0;--u:9px}
.fx .scene-see .stage-bg{display:block}
.fx .scene-see .stage-bg,.fx .uni-canvas{--r:4000px} /* this scene starts with its dark whole, under the light plate */
.fx .see-plate{display:block;position:absolute;inset:0 0 calc(-1 * var(--under)) 0;z-index:2;background:var(--bg);will-change:transform}
.fx .see-in{position:relative;z-index:3;height:100%}
.fx .see-in>*{position:absolute;margin:0}
.fx .see-head,.fx .uni-head{left:var(--pad);bottom:calc(50% + 62px);width:min(430px,36%)}
.fx .see-beats,.fx .uni-beats{left:var(--pad);top:calc(50% + 54px);width:min(390px,33%);height:170px}
.fx .see-tags{display:flex;gap:18px;left:var(--pad);top:calc(50% - 30px);font:600 10.5px/1 var(--mono);letter-spacing:.09em;text-transform:uppercase}
.fx .see-tags li{display:flex;align-items:center;gap:7px;opacity:0;color:var(--blue-text)}
.fx .see-tags li::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--blue)}
.fx .see-tags .t-p{color:var(--green-text)}
.fx .see-tags .t-p::before{background:var(--green)}
/* delivery: four signals run in from the platforms and become one line into the campaign */
.fx .see-flow{display:block;position:absolute;inset:0;z-index:3;pointer-events:none}
.flow-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.flow-svg path{fill:none;stroke:var(--blue);stroke-width:1.5;stroke-dasharray:1;stroke-dashoffset:1}
.flow-svg .trunk{stroke-width:2}
.flow-svg circle{fill:var(--blue);opacity:0}
.d-src,.d-taps li{position:absolute;white-space:nowrap;opacity:0}
.d-src{color:var(--blue-text);transform:translateX(-100%)}
.d-taps li{font:500 12px/1 var(--mono);color:var(--ink);transform:translate(-100%,-100%)}
.d-taps li::after{content:"";display:inline-block;width:6px;height:6px;margin-left:9px;border-radius:50%;background:var(--blue);vertical-align:1px}
.see-join{position:absolute;top:50%;height:2px;margin-top:-1px;background:var(--green);transform:scaleX(0);transform-origin:100% 50%}
.obs-packet{position:absolute;z-index:2;top:50%;padding:6px 10px;border-radius:3px;background:var(--green);font:500 11px/1.2 var(--mono);color:#fff;white-space:nowrap;opacity:0}
.obs-packet b{font-weight:600}
.fx .obs-art{left:calc(var(--pad) + min(430px,36%) + 48px);right:0;top:0;bottom:0;--dy:calc((var(--nav-h) - 32px) / 2)}
.fx .obs-art>*{position:absolute;margin:0}
.fx .scene-see .pg,.fx .obs-chips{position:absolute;left:50%;top:calc(50% + var(--dy));width:calc(var(--u) * 56);height:calc(var(--u) * 72);margin:calc(var(--u) * -36) 0 0 calc(var(--u) * -28)}
.fx .scene-see .pg{isolation:isolate}
.fx .obs-chips{z-index:2}
.fx .scene-see .pg-who .who-v{display:block}
.fx .scene-see .pg-scan{display:block;position:absolute;z-index:5;left:0;right:0;top:0;height:2px;background:var(--green);opacity:0}
.fx .scene-see .pg-scan::before{content:"";position:absolute;left:0;right:0;bottom:2px;height:6em;background:linear-gradient(transparent,rgba(14,143,97,.18))}
/* the second copy of the page, added by the script: what the observer keeps of it */
.pg-doc.is-struct{z-index:3;background:#f6f9f8;clip-path:inset(0 0 100% 0)}
.is-struct .pg-mast b,.is-struct .pg-mast span,.is-struct .pg-kick span,.is-struct .pg-h span,.is-struct .pg-by span,.is-struct .pg-p span,.is-struct .pg-s span{color:transparent;background:#d3dbe3;border-radius:.2em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.is-struct .pg-h span{background:#b9c5d1}
.is-struct .pg-p span,.is-struct .pg-by span{background:#e0e6ec}
.is-struct .pg-mast{border-color:#d3dbe3}
.is-struct .pg-img{background:none;box-shadow:inset 0 0 0 1px #b9c5d1}
.is-struct .pg-img i{display:none}
.is-struct .pg-img::after{content:"";position:absolute;inset:0;background:linear-gradient(to top right,transparent calc(50% - .5px),#cfd8e1 calc(50% - .5px),#cfd8e1 calc(50% + .5px),transparent calc(50% + .5px))}
.is-struct .ad{background:rgba(14,143,97,.07);box-shadow:inset 0 0 0 calc(var(--slot,0) * 2px) var(--green)}
.is-struct .ad .cr,.is-struct .ad::before{display:none}
.is-struct .ad::after{content:attr(data-size);position:absolute;left:0;top:0;padding:.4em .7em;background:var(--green);font:600 1em/1 var(--mono);color:#fff;white-space:nowrap;opacity:var(--slot,0)}
.is-struct .ad.is-new{z-index:1;background:#2f9d76}
.is-struct .ad.is-new::after{background:#fff;color:var(--green-text)}
.is-struct .rf{display:block;position:absolute;right:.6em;top:.6em;width:2.2em;height:2.2em;border-radius:50%;background:var(--green);opacity:0}
.is-struct .rf::before{content:"";position:absolute;inset:.55em;border:.2em solid #fff;border-right-color:transparent;border-radius:50%}
.is-struct .rf::after{content:"";position:absolute;right:.42em;top:.5em;border:.34em solid transparent;border-bottom-color:#fff;transform:rotate(38deg)}
.fx .scene-see .ad.is-new{height:0;margin-top:0;margin-bottom:0;opacity:0}
.fx .scene-see .ad-anchor.is-new{height:4.2em;transform:translateY(110%);opacity:1}
.fx .obs-chips{display:block;max-width:none;pointer-events:none}
.fx .chip{position:absolute;opacity:0;box-shadow:0 8px 20px -10px rgba(6,23,47,.4)}
.fx .chip .then{display:none}
.chip .then{margin-left:-7px}
.fx .c-prebid{right:calc(100% - var(--u) * 5.6);top:calc(var(--u) * 5.2)}
.fx .c-server{right:calc(100% - var(--u) * 4);top:calc(var(--u) * 13.6)}
.fx .c-context{left:calc(var(--u) * 16.4);top:calc(var(--u) * 21.8)}
.fx .c-density{right:calc(var(--hang,0px) * -1);top:calc(var(--u) * 21.6)}
.fx .is-tight .c-density{top:calc(var(--u) * 21.6 + 32px)}
.fx .c-refresh{right:calc(min(var(--hang,0px),var(--u) * 2.6) * -1);top:calc(var(--u) * 32.6)}
/* once the page steps back: its selling paths on the right, the before and after above it */
.fx .obs-supply{display:block;left:calc(var(--bw) + 14px);top:calc(50% + var(--dy) - 150px);width:220px;height:300px;max-width:none}
.fx .sup-lines{display:block;position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.sup-lines .l{fill:none;stroke:var(--green);stroke-width:1.5;stroke-dasharray:1;stroke-dashoffset:1}
.sup-lines .l.is-res{stroke:#6fb89e}
.fx .sup-file,.fx .sup-head{position:absolute;margin:0;opacity:0;white-space:nowrap}
.fx .f-ads{left:12px;top:150px;transform:translateY(-50%)}
.fx .sup-head{left:76px;top:4px;letter-spacing:.07em;text-transform:uppercase;color:var(--green-text)}
.fx .f-sellers{right:0;top:284px}
.fx .sup-nodes{display:block;position:absolute;left:150px;top:0;height:100%;margin:0}
.fx .sup-nodes li{position:absolute;left:0;transform:translateY(-50%);opacity:0;white-space:nowrap;color:var(--ink)}
.fx .sup-nodes li::before{margin-left:-4px}
.fx .sup-nodes li:nth-child(1){top:44px}.fx .sup-nodes li:nth-child(2){top:97px}.fx .sup-nodes li:nth-child(3){top:150px}.fx .sup-nodes li:nth-child(4){top:203px}.fx .sup-nodes li:nth-child(5){top:256px}
.fx .sup-nodes li.is-res{color:var(--muted)}
.fx .pg-time{display:flex;align-items:center;gap:10px;left:0;top:calc(50% + var(--dy) - var(--bh) / 2 - 30px);width:var(--bw);font:600 10.5px/1 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--muted);opacity:0}
.fx .pg-time i{position:relative;width:44px;height:2px;background:var(--line2)}
.fx .pg-time i::after{content:"";position:absolute;left:0;top:50%;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;background:var(--green);transform:translateX(calc(var(--t,0) * 44px))}
.fx .pg-time .t-read{display:grid;margin-left:auto;font-weight:500;letter-spacing:0;text-transform:none;color:var(--ink)}
.fx .pg-time .t-read span{grid-area:1 / 1;justify-self:end;transition:opacity .3s var(--ease)}
.fx .pg-time .r-now{opacity:0;font-weight:600;color:var(--green-text)}
.fx .pg-time.is-now .t-now{color:var(--green-text)}
.fx .pg-time.is-now .r-then{opacity:0}
.fx .pg-time.is-now .r-now{opacity:1}
.fx .obs-note{left:calc(50% - var(--u) * 28);right:0;top:calc(50% + var(--dy) + var(--u) * 36 + 10px);color:#4c6178} /* it sits on the page's shadow */
/* the universe, pinned */
.fx .uni-canvas{display:block;position:absolute;inset:0;width:100%;height:100%;z-index:1}
.fx .uni{inset:0;pointer-events:none}
.fx .uni>*{position:absolute;margin:0}
.fx .uni-head{opacity:0}
.fx .uni-head .eyebrow{color:#88a3bd}
.fx .uni-head .title{color:#fff}
.fx .uni-beats .tag{color:#b9c8d8}
.fx .uni-beats p{font-size:19px;color:#dbe4ee}
.fx .uni-self{display:block;width:44px;height:44px;margin:-22px 0 0 -22px;padding:0;border:0;border-radius:50%;background:none;cursor:pointer;pointer-events:auto;opacity:0}
.fx .uni-self::before{content:"";position:absolute;left:50%;top:50%;width:11px;height:11px;margin:-5.5px 0 0 -5.5px;border-radius:50%;background:var(--mint);box-shadow:0 0 0 5px rgba(67,209,155,.16);transition:box-shadow .35s var(--ease)}
.fx .uni-self:hover::before,.fx .uni-self:focus-visible::before,.fx .uni-self.is-on::before{box-shadow:0 0 0 9px rgba(67,209,155,.2)}
.fx .uni-self:focus-visible{outline-color:var(--mint)}
.fx .uni-tip{display:block;padding:10px 12px;border:1px solid rgba(67,209,155,.5);border-radius:3px;background:#06172f;font:500 11px/1.5 var(--mono);color:#dbe4ee;white-space:nowrap;opacity:0;transform:translateY(-4px);transition:opacity .25s var(--ease),transform .35s var(--ease)}
.fx .uni-tip b{display:block;font-weight:600;color:var(--mint)}
.fx .uni-tip small{display:block;margin-top:2px;font-size:10px;color:var(--d-muted)}
.fx .uni-self:hover + .uni-tip,.fx .uni-self:focus-visible + .uni-tip,.fx .uni-self.is-on + .uni-tip{opacity:1;transform:none}
.fx .uni-group{opacity:0;color:#8ea2b7}
.fx .uni-names{display:block;inset:0;max-width:none;font-size:13px;color:#e7edf4}
.fx .uni-names li{position:absolute;left:var(--x,50%);top:var(--y,50%);gap:8px;opacity:0;transform:translateY(-50%);pointer-events:auto;transition:color .25s var(--ease)}
.fx .uni-names li::before{width:5px;height:5px;margin-left:-2.5px;background:#fff;transition:box-shadow .3s var(--ease),background-color .3s var(--ease)}
.fx .uni-names li.is-left{flex-direction:row-reverse;transform:translate(calc(-100% + 2.5px),-50%)}
.fx .uni-names li.is-left::before{margin:0 -2.5px 0 0}
.fx .uni-names li:hover{color:#fff}
.fx .uni-names li:hover::before{background:var(--mint);box-shadow:0 0 0 4px rgba(67,209,155,.2)}
.fx .n-ctv li::before{border-radius:1px}
.fx .uni-note{right:0;bottom:5%;text-align:right;color:var(--d-muted);opacity:0}
/* ---------- pinned, on a phone or a small tablet: the page fills the middle, words above and below it ---------- */
@media(max-width:900px){
.fx .see-head,.fx .uni-head{left:var(--pad);right:0;top:calc(var(--nav-h) + 16px);bottom:auto;width:auto}
.fx .see-head .title,.fx .uni-head .title{max-width:none;font-size:clamp(23px,6.2vw,34px)}
.fx .see-head .eyebrow,.fx .uni-head .eyebrow{margin-bottom:8px}
.fx .see-beats,.fx .uni-beats{left:var(--pad);right:0;top:auto;bottom:38px;width:auto;height:112px}
.fx .see-beats p,.fx .uni-beats p{font-size:15.5px;line-height:1.45}
.fx .see-tags{top:auto;bottom:160px}
.fx .obs-art{left:var(--pad);right:0;top:calc(var(--nav-h) + 46px);bottom:186px;--dy:0px}
.fx .obs-note{left:0;top:auto;bottom:-178px;font-size:10px;line-height:1.4}
.fx .pg-time{top:-27px;width:100%}
.fx .c-prebid{right:auto;left:calc(var(--u) * 2);top:calc(var(--u) * 5.4)}
.fx .c-server{right:auto;left:calc(var(--u) * 2);top:calc(var(--u) * 13.4)}
.fx .c-context{left:calc(var(--u) * 4);top:calc(var(--u) * 24.6)}
.fx .c-density{right:calc(var(--u) * 1.5);top:calc(var(--u) * 33)}
.fx .c-refresh{right:calc(var(--u) * 1.5);top:calc(var(--u) * 41)}
/* the selling paths, as one strip across the page */
.fx .obs-supply{left:50%;top:50%;width:calc(var(--u) * 54);height:auto;margin:calc(var(--u) * 14) 0 0 calc(var(--u) * -27);display:flex;flex-wrap:wrap;align-items:center;gap:8px 9px;padding:9px 10px;border:1px solid rgba(14,143,97,.55);border-radius:3px;background:#fff;box-shadow:0 10px 24px -12px rgba(6,23,47,.45);opacity:0}
.fx .sup-lines{display:none}
.fx .sup-file,.fx .sup-head,.fx .sup-nodes,.fx .sup-nodes li{position:static;transform:none;opacity:1}
.fx .sup-head{order:-1;flex:1 0 100%;font-size:10px}
.fx .sup-file{padding:4px 7px}
.fx .sup-nodes{display:flex;gap:6px;height:auto}
.fx .sup-nodes li{font-size:0;gap:0}
.fx .sup-nodes li::before{margin:0}
.fx .f-sellers{margin-left:auto}
/* the universe: the names set as a block of text */
.fx .uni-names{position:absolute;display:flex;flex-wrap:wrap;gap:3px 13px;left:var(--pad);right:8px;inset-block:auto;font-size:12.5px;line-height:1.3}
.fx .uni-names li,.fx .uni-names li.is-left{position:static;transform:none;flex-direction:row}
.fx .uni-names li::before,.fx .uni-names li.is-left::before{width:4px;height:4px;margin:0}
.fx .uni-group{left:var(--pad)}
.fx .g-web{top:calc(50% - 8px)}
.fx .n-web{top:calc(50% + 13px)}
.fx .uni-note{right:auto;left:var(--pad);bottom:10px;text-align:left;font-size:10px}
.fx .uni-beats{bottom:32px;height:62px}
.fx .uni-tip{left:0 !important;white-space:normal;width:max-content;max-width:calc(100% - 8px)} /* under the dot, on the text column */
}
@media(max-width:900px) and (min-width:600px){
.fx .uni-names{font-size:14.5px;gap:6px 18px}
}
/* ---------- 03 One campaign: find, diagnose, recommend, approve, change, measure ----------
Static form: the acts in order, each with its caption on the left and its evidence on the right, under one still chart.
Pinned form: one chart that the campaign line draws, with the evidence for each act arriving under it. */
.scene-camp{padding:104px 0}
.scene-camp .stage-bg,.mem-canvas,.camp-chart,.camp-marks{display:none}
.camp-head .eyebrow{margin-bottom:16px}
.camp-meta{display:flex;flex-wrap:wrap;gap:4px 0;margin-top:18px;font:500 12px/1.5 var(--mono);color:var(--muted)}
.camp-meta li{display:flex;align-items:center}
.camp-meta li + li::before{content:"";width:3px;height:3px;margin:0 11px;border-radius:50%;background:var(--trace)}
.camp-still{margin:44px 0 0}
.still-chart{width:100%;height:auto;overflow:visible}
.still-chart .axis,.still-chart .tick{stroke:rgba(6,23,47,.34);stroke-width:1}
.still-chart .plan{stroke:var(--trace);stroke-width:1.5;stroke-dasharray:3 6}
.still-chart .real{fill:none;stroke:var(--blue);stroke-width:2.5;stroke-linejoin:round}
.still-chart .low{fill:none;stroke:var(--trace);stroke-width:1.5}
.still-chart .gap{stroke:var(--ink);stroke-width:1.5}
.still-chart .obs{fill:var(--green);stroke:var(--bg);stroke-width:2}
.still-chart .gate{fill:var(--bg);stroke:var(--orange);stroke-width:2}
.still-chart .stored{fill:var(--navy)}
.still-chart .lab{font:500 11.5px var(--mono);fill:var(--muted)}
.still-chart .lab.ink{fill:var(--ink);font-weight:600}
.still-chart .lab.grn{fill:var(--green-text)}
.camp-still figcaption{margin-top:14px}
.act{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:22px 56px;align-items:start;margin-top:52px;padding-top:44px;border-top:1px solid var(--line)}
.act>.beat{grid-column:1}
.act>:not(.beat){grid-column:2}
.act-find>.beat{grid-row:1 / span 2}
.act-dx>.ledger,.act-measure>.ledger{grid-row:1 / span 2}
.act .tag i{margin-left:10px;font-style:normal;color:var(--blue-text)}
.act-line{margin:9px 0 12px;font-size:clamp(24px,2.3vw,33px);line-height:1.08;letter-spacing:-.036em;font-weight:610}
.act .beat p{font-size:17.5px;line-height:1.55;color:var(--text)}
.act .beat + .beat{margin-top:0}
.camp-read{display:grid;gap:8px;margin:0 0 22px}
.camp-read div{display:flex;align-items:baseline;gap:14px}
.camp-read dt{width:104px;font:600 10.5px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.camp-read dd{margin:0;font:620 18px/1.1 var(--sans);letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--ink)}
.camp-read small{margin-left:8px;font:500 11.5px/1 var(--mono);letter-spacing:0;color:var(--muted)}
/* rows of evidence: causes, outcomes, the day 14 readings */
.ledger{font-size:14px}
.row{position:relative}
.row + .row{margin-top:14px}
.row>b{display:block;font-size:15.5px;line-height:1.35;font-weight:620;letter-spacing:-.012em;color:var(--ink)}
.row>p{color:var(--text);line-height:1.5}
.st{float:right;display:inline-flex;align-items:center;gap:7px;margin:2px 0 0 16px;font:600 10.5px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.c-yes .st,.o-yes .st,.o-worse .st{color:var(--ink)}
.src{display:inline-flex;align-items:center;gap:6px;margin-left:4px;font:500 10.5px/1.4 var(--mono);font-style:normal;color:var(--blue-text);white-space:nowrap}
.src::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--blue)}
.src.s-p{color:var(--green-text)}
.src.s-p::before{background:var(--green)}
.camp-find .row{display:grid;grid-template-columns:minmax(0,190px) minmax(0,1fr);align-items:center;gap:6px 18px}
.camp-find .row>b{font-size:14.5px}
.camp-find .bar{position:relative;height:6px;background:rgba(6,23,47,.1)}
.camp-find .bar i{position:absolute;left:0;top:0;bottom:0;width:calc(var(--v) * 100%);background:var(--blue)}
.camp-find .bar::after{content:"";position:absolute;right:0;top:-4px;bottom:-4px;width:1.5px;background:var(--ink)}
.camp-find .val{grid-column:2;font:500 12px/1.4 var(--mono);color:var(--ink)}
.camp-find .bar + .val{margin-top:-2px;color:var(--muted)}
.camp-find .is-low .val{color:var(--ink);font-weight:600}
.camp-find .is-obs>b{display:flex;align-items:center;gap:8px;color:var(--green-text)}
.camp-find .is-obs>b::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--green)}
/* recommendations, by owner */
.camp-recs{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:26px 40px}
.lane h4{display:flex;align-items:center;gap:10px;margin:0 0 14px;color:var(--ink)}
.dia{flex:none;width:10px;height:10px;border:1.5px solid var(--orange);background:var(--bg);transform:rotate(45deg);transition:background-color .35s var(--ease),transform .5s var(--ease)}
.lane-buy .dia{border-style:dashed}
.rec + .rec{margin-top:18px}
.rid{display:block;font:600 10.5px/1.4 var(--mono);letter-spacing:.08em;color:var(--blue-text)}
.rec>b{display:block;margin:2px 0 3px;font-size:15.5px;line-height:1.32;font-weight:620;letter-spacing:-.012em}
.rec-more p{color:var(--text);line-height:1.5}
.rec .how{margin-top:3px;font:500 11.5px/1.5 var(--mono);color:var(--muted)}
.rstat{display:none}
/* the approval */
.camp-gate{margin-top:20px}
/* One press. The decision fills the button from the diamond outwards, the label changes in place (the button keeps its
width), and the page moves on to the change. Scrolling back above the approval undoes it, like everything else here. */
.approve{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;gap:12px;min-height:48px;padding:0 20px 0 18px;border:1.5px solid var(--orange);border-radius:4px;background:#fff;font-size:14px;font-weight:650;color:var(--orange-text);cursor:pointer;transition:transform .3s var(--ease),box-shadow .35s var(--ease),color .3s var(--ease),border-color .3s var(--ease)}
.approve::before{content:"";position:absolute;inset:-2px;z-index:-1;background:var(--orange-text);clip-path:circle(0px at 24px 50%);transition:clip-path .6s var(--ease)}
@media(hover:hover){.approve:hover{transform:translateY(-1px);box-shadow:0 12px 26px -10px rgba(207,95,18,.5)}}
.approve:active{transform:scale(.975);box-shadow:none;transition-duration:.08s}
.a-lbl{display:inline-grid}
.a-lbl>span{grid-area:1 / 1;justify-self:start;transition:opacity .25s var(--ease),transform .4s var(--ease),visibility 0s}
.approve .a-done{visibility:hidden;opacity:0;transform:translateY(7px);transition-delay:0s,0s,.25s}
.camp-gate .fine .a-done{display:none}
.act .beat .camp-gate .fine{margin-top:9px;font:500 11.5px/1.6 var(--mono);color:var(--muted)}
.camp-gate.is-ok .approve{color:#fff;border-color:var(--orange-text)}
.camp-gate.is-ok .approve:hover{transform:none;box-shadow:none}
.camp-gate.is-ok .approve::before{clip-path:circle(160% at 24px 50%)}
.camp-gate.is-ok .approve .dia{background:#fff;border-color:#fff;transform:rotate(225deg)}
.camp-gate.is-ok .approve .a-ask{visibility:hidden;opacity:0;transform:translateY(-7px);transition-delay:0s,0s,.25s}
.camp-gate.is-ok .approve .a-done{visibility:visible;opacity:1;transform:none;transition-delay:.08s,.08s,0s}
.camp-gate.is-ok .fine .a-ask{display:none}
.camp-gate.is-ok .fine .a-done{display:inline}
/* static: no button to press, so the approval is shown as the record it leaves */
html:not(.fx) .approve,html:not(.fx) .camp-gate .fine .a-ask{display:none}
html:not(.fx) .camp-gate .fine .a-done{display:inline}
html:not(.fx) .camp-gate{margin-top:14px;padding-left:16px;border-left:2px solid var(--orange)}
html:not(.fx) .act .beat .camp-gate .fine{margin:0;color:var(--orange-text)}
/* ================= pinned ================= */
.fx .scene-camp{padding:0}
.fx .scene-camp .stage-bg{display:block}
.fx .camp-chart{display:block;position:absolute;inset:0;z-index:1;width:100%;height:100%;overflow:visible}
.fx .camp-marks{display:block;position:absolute;inset:0;z-index:2;pointer-events:none}
.fx .camp-in{position:relative;z-index:3;height:100%}
.fx .camp-still{display:none}
.fx .act,.fx .mem{display:contents}
.fx .camp-in>*,.fx .act>*,.fx .mem>*{position:absolute;margin:0;padding:0;border:0}
.fx .camp-head{left:var(--pad);top:calc(var(--nav-h) + 38px);width:min(520px,44%)}
.fx .camp-head .title{font-size:clamp(28px,2.9vw,42px)}
.fx .camp-head .eyebrow{margin-bottom:12px}
.fx .camp-meta{margin-top:14px}
.fx .act>.beat{left:var(--pad);top:var(--by,calc(50% + 50px));width:min(400px,34%);opacity:0}
.fx .act-launch>.beat{top:calc(50% + 50px)}
.out-key{display:none}
.fx .act-line{margin:8px 0 10px;font-size:clamp(23px,2.15vw,31px)}
.fx .act .beat p{font-size:16.5px;line-height:1.52}
.fx .ledger{left:var(--lx,48%);right:0;top:var(--ly,calc(50% + 46px))}
/* the chart */
.camp-chart line,.camp-chart path{fill:none;vector-effect:non-scaling-stroke}
.c-axis{stroke:rgba(6,23,47,.34);stroke-width:1}
.c-ticks line{stroke:rgba(6,23,47,.34);stroke-width:1}
.c-ticks text{font:500 10.5px var(--mono);fill:var(--muted)}
.c-plan{stroke:var(--trace);stroke-width:1.5;stroke-dasharray:3 6}
.camp-chart .c-hatch{fill:url(#ab-hatch);stroke:none}
.c-real{stroke:var(--blue);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.c-low{stroke:var(--trace);stroke-width:1.5;stroke-linejoin:round}
.c-gap{stroke:var(--ink);stroke-width:1.5}
.c-join{stroke:var(--blue);stroke-width:1.5;stroke-dasharray:1;stroke-dashoffset:1}
.c-trunk,.c-fan,.c-rail{stroke:#8296ab;stroke-width:1.25}
.c-fan,.c-rail{stroke-dasharray:1;stroke-dashoffset:1}
.camp-chart .c-node{fill:var(--bg);stroke:#8296ab;stroke-width:1.25}
.camp-chart .c-obs{fill:var(--green);stroke:var(--bg);stroke-width:2}
.camp-chart .c-pulse{fill:var(--orange);stroke:none}
/* the marker, and the labels that sit on the chart */
.camp-dot{position:absolute;left:0;top:0;width:0;height:0;opacity:0}
.camp-dot b{position:absolute;left:-6.5px;top:-6.5px;width:13px;height:13px;border-radius:50%;background:var(--bg);border:2px solid var(--blue);box-shadow:0 0 0 6px rgba(7,135,255,.1);transition:border-radius .45s var(--ease),transform .45s var(--ease),border-color .35s var(--ease),background-color .35s var(--ease),box-shadow .35s var(--ease)}
.camp-marks[data-head="gate"] .camp-dot b{border-radius:1.5px;transform:rotate(45deg) scale(1.1);border-color:var(--orange);box-shadow:0 0 0 6px rgba(207,95,18,.14)}
.camp-marks[data-head="stored"] .camp-dot b{border-radius:1.5px;background:var(--navy);border-color:var(--navy);box-shadow:0 0 0 6px rgba(6,23,47,.08)}
.camp-marks.on-dark .camp-dot b{background:var(--night)}
.camp-marks.on-dark[data-head="stored"] .camp-dot b{background:#fff;border-color:#fff;box-shadow:0 0 0 6px rgba(255,255,255,.12)}
.fx .spine.no-head .spine-head{opacity:0;transition:none}
.mk{position:absolute;left:0;top:0;margin:0;font:500 11.5px/1.5 var(--mono);color:var(--muted);white-space:nowrap;opacity:0}
.mk b{display:block;font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink)}
.mk-now{display:flex;gap:10px;align-items:baseline}
.mk-now span{font-variant-numeric:tabular-nums;color:var(--blue-text)}
.mk-plan b{display:inline;margin-right:6px}
.mk-obs b{color:var(--green-text)}
.mk-obs i{position:absolute;left:3px;top:100%;width:1.5px;height:var(--drop,40px);margin-top:4px;background:var(--green)}
.mk-floor s{color:var(--muted)}
.mk-floor span{font:650 15px/1 var(--sans);color:var(--ink)}
.mk-floor span::before{content:"→";margin-right:7px;font-weight:500;color:var(--muted)}
.mk-floor em{display:block;font-style:normal;color:var(--orange-text)}
.mk-res{display:grid;grid-template-columns:auto auto auto auto;gap:7px 12px;align-items:baseline;opacity:1}
.mk-res p{display:contents}
.mk-res p>*{opacity:var(--o2,0)}
.mk-res p>i,.mk-res p>b{opacity:var(--o1,0)}
.mk-res i{align-self:center;width:22px;height:2.5px;background:var(--blue)}
.mk-res .r-b i{height:1.5px;background:var(--trace)}
.mk-res b{font-size:10.5px}
.mk-res span{font:650 16px/1.1 var(--sans);font-variant-numeric:tabular-nums;color:var(--ink)}
.mk-res em{font-style:normal}
.mk-res .r-d span{grid-column:3 / span 2;font-size:14px;color:var(--blue-text)}
.fx .camp-read{display:grid;gap:4px;left:0;top:0;opacity:0}
.fx .camp-read dt{width:92px}
.fx .camp-read dd{font-size:16px}
/* rows in the pinned ledger: the fan of lines arrives at each row's left edge */
.fx .ledger{padding-left:26px}
.fx .camp-causes .row,.fx .camp-out .row,.fx .camp-find .row{opacity:0}
.fx .camp-causes .row + .row{margin-top:11px}
.fx .camp-causes .row>p{height:0;overflow:hidden;opacity:0}
.fx .camp-causes .st{opacity:0}
.fx .camp-out .row + .row{margin-top:12px}
.fx .camp-out .st{opacity:0}
.fx .camp-recs{padding-top:26px}
.fx .lane h4,.fx .rec{opacity:0}
.fx .lane h4{margin-bottom:12px}
.fx .rec + .rec{margin-top:14px}
/* pinned: one recommendation is open at a time, and after approval each shows what happened to it */
.fx .rec-more{height:0;overflow:hidden;opacity:0}
.fx .rstat{display:block;height:0;overflow:hidden;font:500 11.5px/1.6 var(--mono);color:var(--orange-text);opacity:0;transition:opacity .4s var(--ease),height .4s var(--ease)}
.fx .lane-buy .rstat{color:var(--muted)}
.fx .camp-recs.is-done .rstat{height:19px;opacity:1}
.fx .camp-recs .lane-op .dia{transition:background-color .35s var(--ease)}
.fx .camp-recs.is-ok .lane-op .dia{background:var(--orange)}
.fx .camp-gate{margin-top:18px}
.fx .lane h4 span{padding-right:12px;background:var(--bg)}
/* Much of what is on this stage is waiting, invisible, for its turn. None of it may sit in the way of the one thing to press. */
.fx .ledger,.fx .mem,.fx .camp-read,.fx .camp-marks,.fx .camp-head{pointer-events:none}
.fx .approve{pointer-events:none}
.fx .beat.is-on .approve{pointer-events:auto}
@media(max-width:900px){
.act{grid-template-columns:minmax(0,1fr);gap:22px;margin-top:40px;padding-top:34px}
.act>.beat,.act>:not(.beat),.act-dx>.ledger,.act-measure>.ledger{grid-column:1;grid-row:auto}
.camp-recs{grid-template-columns:minmax(0,1fr)}
}
/* ---------- Remember ----------
Static form: a dark band with the stored record as six fields. Pinned form: the campaign folds into one line,
the line is read as a record, and the record takes its place among the others on the campaign line. */
.mem{margin-top:96px;padding:96px 0 104px;background:var(--night);box-shadow:0 0 0 100vmax var(--night);clip-path:inset(0 -100vmax);color:#fff}
html:not(.fx) .scene-camp{padding-bottom:0}
.mem-head .eyebrow{margin-bottom:16px;color:#88a3bd}
.mem-head .title{max-width:16ch}
.mem-rec{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:34px 40px;margin-top:52px;counter-reset:m}
.mem-rec li{position:relative;padding-top:22px;border-top:1px solid var(--d-line)}
.mem-rec li::before{content:"";position:absolute;left:0;top:-6px;width:11px;height:11px;border-radius:50%;background:var(--night);border:1.5px solid #fff}
.mem-rec .is-gate::before{border-radius:1px;border-color:var(--amber);transform:rotate(45deg)}
.mem-rec .is-stored::before{border-radius:1px;background:#fff}
.mem-rec .tag{display:block;margin-bottom:6px;color:#b9c8d8}
.mem-rec p{font-size:16px;line-height:1.5;color:#dbe4ee}
.mem-beats{margin-top:48px;max-width:56ch}
.mem-beats .tag{display:block;margin-bottom:5px;color:#b9c8d8}
.mem-beats p{font-size:18px;line-height:1.55;color:#dbe4ee}
.mem-next{margin-top:36px}
.mem-next .tag{color:#b9c8d8}
.mem-notes{display:flex;flex-wrap:wrap;gap:8px 26px;margin-top:10px;font:500 12.5px/1.5 var(--mono);color:#e7edf4}
.mem-notes li{display:flex;align-items:center;gap:9px}
.mem-notes li::before{content:"";width:10px;height:1.5px;background:var(--sky)}
.mem-tags{display:none}
.fx .mem{margin:0;padding:0;background:none;box-shadow:none;clip-path:none}
.fx .mem-canvas{display:block;position:absolute;inset:0;z-index:1;width:100%;height:100%}
.fx .scene-camp .camp-chart{z-index:2}
.fx .scene-camp .camp-marks{z-index:3}
.fx .mem-head{left:54%;bottom:calc(50% + 62px);width:min(460px,42%);opacity:0}
.fx .mem-beats{left:54%;top:calc(50% + 54px);width:min(410px,40%);height:160px}
.fx .mem-beats p{font-size:17.5px}
.fx .mem-rec{display:block;left:var(--pad);right:0;top:50%;height:0;margin:0}
.fx .mem-rec li{--i:0;position:absolute;left:calc(var(--i) * 100% / 6);top:0;width:calc(100% / 6 - 22px);padding-top:30px;border:0;opacity:0}
.fx .mem-rec li::before{display:none}
.fx .mem-rec li:nth-child(2){--i:1}.fx .mem-rec li:nth-child(3){--i:2}.fx .mem-rec li:nth-child(4){--i:3}.fx .mem-rec li:nth-child(5){--i:4}.fx .mem-rec li:nth-child(6){--i:5}
.fx .mem-rec p{font-size:14.5px;line-height:1.48}
.fx .mem-next{left:0;top:0;width:100%;height:100%;pointer-events:none}
.fx .mem-next>*{position:absolute;margin:0}
.fx .mem-next .tag{left:var(--nx,0);top:var(--ny,0);color:var(--sky);opacity:0;white-space:nowrap;transform:translateY(-50%)}
.fx .mem .t-long{display:none}
.fx .mem-notes{display:block;inset:0}
.fx .mem-notes li{position:absolute;left:var(--x,0);top:var(--y,0);margin-top:-36px;white-space:nowrap;opacity:0}
.fx .mem-notes li:nth-child(2){margin-top:16px}
.fx .mem-notes li::before{display:none}
.fx .mem-tags{display:block;inset:0;pointer-events:none;font:500 11px/1 var(--mono);color:#b9c8d8}
.fx .mem-tags li{position:absolute;left:var(--x,0);top:var(--y,0);white-space:nowrap;opacity:0;transform:translateY(-50%)}
.fx .mem-tags .m-this{color:#fff;font-weight:600}
.camp-chart .m-line{stroke:#fff;stroke-width:1.5}
.camp-chart .m-node{fill:var(--night);stroke:#fff;stroke-width:1.5}
.camp-chart .m-gate{stroke:var(--amber)}
.camp-chart .m-sq{fill:#fff;stroke:#fff}
.camp-chart .m-next{stroke:var(--sky);stroke-width:1.75;stroke-dasharray:5 6}
.camp-chart .m-tick{stroke:var(--sky);stroke-width:1.5}
@media(max-width:900px){
.mem-rec{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px 26px}
}
@media(max-width:520px){
.mem-rec{grid-template-columns:minmax(0,1fr)}
}
/* wide: the evidence column of the recommendation step (built by the script from the lanes' own text) */
.fx .act-rec>.beat{display:grid;grid-template-columns:minmax(0,1fr);align-content:start}
.fx .act-rec>.beat>p,.fx .rec-why{grid-area:3 / 1}
.fx .rec-why{position:relative}
.fx .rw{position:absolute;left:0;top:0;width:100%;opacity:0}
.fx .rw .rid{margin-bottom:5px}
.fx .rw p{font-size:16.5px;line-height:1.52;color:var(--text)}
.fx .act .beat .rw .how{margin-top:7px;font:500 11.5px/1.55 var(--mono);color:var(--muted)}
/* the decision being explained is marked in its lane */
.fx .rec{position:relative}
.fx .rec::before{content:"";position:absolute;left:-14px;top:3px;bottom:3px;width:2px;background:var(--blue);transform:scaleY(0);transform-origin:50% 0;transition:transform .45s var(--ease)}
.fx .rec.is-cur::before{transform:scaleY(1)}
/* ---------- the campaign in a wide, short window: the heading is one line, the captions sit closer to the chart ---------- */
@media(min-width:901px) and (max-height:640px){
.fx .camp-head{top:calc(var(--nav-h) + 20px)}
.fx .camp-head .eyebrow{display:none}
.fx .camp-head .title{font-size:26px}
.fx .camp-meta{margin-top:8px}
.fx .act>.beat,.fx .act-launch>.beat{top:calc(50% + 28px)}
.fx .act-line{margin:5px 0 7px;font-size:23px}
.fx .act .beat p,.fx .rw p{font-size:15.5px;line-height:1.48}
.fx .camp-gate{margin-top:10px}
.fx .act .beat .camp-gate .fine{margin-top:6px}
.fx .approve{min-height:42px}
.fx .ledger{top:var(--ly,calc(50% + 30px))}
.fx .camp-recs{padding-top:20px}
.fx .rec + .rec{margin-top:10px}
}
/* ---------- a wide window that is not very wide: the caption column is narrow, so its text is set a little smaller ---------- */
@media(min-width:901px) and (max-width:1100px){
.fx .act-line{font-size:23px}
.fx .act .beat p,.fx .rw p{font-size:15.5px;line-height:1.48}
}
/* ---------- the campaign on a phone or a small tablet ----------
The chart keeps the top of the stage. After launch it moves up to give the evidence room, and the evidence takes the place of the paragraph. */
@media(max-width:900px){
.fx .camp-head{top:calc(var(--nav-h) + 14px);width:auto;right:0}
.fx .camp-head .eyebrow{display:none}
.fx .camp-head .title{font-size:17px;letter-spacing:-.02em;font-weight:640}
.fx .camp-meta{margin-top:6px;font-size:10.5px}
.fx .camp-meta li + li::before{margin:0 7px}
.fx .camp-meta li:nth-child(4){display:none}
.fx .act>.beat{right:0;width:auto}
.fx .act-line{margin:6px 0 9px;font-size:clamp(21px,5.6vw,29px)}
.fx .act .beat p{font-size:15.5px;line-height:1.46}
.fx .act-find>.beat p,.fx .act-dx>.beat p,.fx .act-rec>.beat p,.fx .act-measure>.beat:not(.is-honest) p{display:none}
.fx .ledger{left:var(--pad);padding-left:0;font-size:13.5px}
.fx .camp-chart .c-trunk,.fx .camp-chart .c-fan,.fx .camp-chart .c-rail,.fx .camp-chart .c-node,.fx .camp-chart .c-pulse{display:none}
.fx .mk-obs,.fx .mk-floor,.fx .mk-res{display:none}
.fx .mk{font-size:10.5px}
.fx .mk-plan span{display:none}
.fx .mk-plan b{margin:0}
.fx .camp-read{display:flex;gap:6px 22px;left:var(--pad);top:var(--ly);opacity:0}
.fx .camp-read div{display:block}
.fx .camp-read dt{width:auto;font-size:9.5px}
.fx .camp-read dd{font-size:15.5px}
.fx .camp-read small{display:block;margin:2px 0 0;font-size:10px}
.fx .camp-find{top:calc(var(--ly) + 62px)}
.fx .camp-find .row{grid-template-columns:minmax(0,132px) minmax(0,1fr);gap:4px 12px}
.fx .camp-find .row + .row{margin-top:10px}
.fx .camp-find .row>b{font-size:13.5px}
.fx .camp-find .val{font-size:11px}
.fx .row>b{font-size:14.5px}
.fx .row>p{font-size:13px;line-height:1.42}
.fx .st{font-size:9.5px;margin-left:10px}
.fx .camp-causes .row + .row,.fx .camp-out .row + .row{margin-top:9px}
.fx .camp-recs{grid-template-columns:minmax(0,1fr);gap:16px;padding-top:0}
.fx .lane h4{margin-bottom:8px}
.fx .rec>b{font-size:14.5px}
.fx .rec-more p{font-size:13px;line-height:1.42}
.fx .rec .how{font-size:10.5px}
.fx .rec + .rec{margin-top:10px}
.fx .out-key{display:flex;align-items:center;gap:8px;left:var(--pad);top:var(--ly);font:500 10.5px/1.4 var(--mono);color:var(--muted);opacity:0}
.fx .out-key i{width:18px;height:2.5px;background:var(--blue)}
.fx .out-key i.thin{height:1.5px;margin-left:10px;background:var(--trace)}
.fx .camp-out{top:calc(var(--ly) + 26px)}
.fx .approve{min-height:46px}
/* memory */
.fx .mem-head{left:var(--pad);right:0;top:calc(var(--nav-h) + 16px);bottom:auto;width:auto}
.fx .mem-head .title{font-size:clamp(23px,6.2vw,34px);max-width:none}
.fx .mem-head .eyebrow{margin-bottom:8px}
.fx .mem-beats{left:var(--pad);right:0;top:auto;bottom:34px;width:auto;height:118px}
.fx .mem-beats p{font-size:15.5px;line-height:1.45}
.fx .mem-rec li{left:0;width:100%;padding-top:34px}
.fx .mem-rec p{font-size:16px;line-height:1.45;max-width:30ch}
.fx .mem-tags li:not(.m-this){display:none}
.fx .mem-notes{font-size:10.5px}
}
/* ---------- a short phone window: the lists close up ---------- */
@media(max-width:900px) and (max-height:680px){
.fx .camp-causes .row + .row,.fx .camp-out .row + .row{margin-top:6px}
.fx .row>p{font-size:12.5px;line-height:1.38}
.fx .rec + .rec{margin-top:8px}
.fx .camp-recs{gap:12px}
}
/* ---------- the campaign on a tablet held upright: the phone composition, set larger ---------- */
@media(max-width:900px) and (min-width:600px) and (min-height:900px){
.fx .camp-head .title{font-size:21px}
.fx .camp-meta{font-size:11.5px}
.fx .mk{font-size:11.5px}
.fx .act .beat p{font-size:17px;line-height:1.5}
.fx .ledger{font-size:15px}
.fx .row>b,.fx .rec>b{font-size:16.5px}
.fx .row>p,.fx .rec-more p{font-size:14.5px;line-height:1.46}
.fx .st{font-size:10.5px}
.fx .camp-read dt{font-size:10.5px}
.fx .camp-read dd{font-size:18px}
.fx .camp-read small{font-size:11px}
.fx .camp-find .row{grid-template-columns:minmax(0,180px) minmax(0,1fr)}
.fx .camp-find .row>b{font-size:15px}
.fx .camp-find .val{font-size:12px}
.fx .out-key{font-size:11.5px}
.fx .mem-rec p{font-size:18px}
.fx .mem-notes{font-size:11.5px}
}
/* ---------- The close: the line ends where the next auction starts ---------- */
.close{position:relative;padding:150px 0 190px}
.fx .close{padding-top:52px}
.close-in{display:grid;grid-template-columns:minmax(0,1.22fr) minmax(0,.78fr);gap:40px 56px;align-items:end}
.close .statement{max-width:13ch}
.close-side .lede{max-width:44ch;font-size:19px;line-height:1.58}
.close-side .actions{margin-top:26px}
.close-foot{display:grid;gap:8px;margin-top:26px;font:500 11.5px/1.55 var(--mono);color:var(--muted)}
.close-foot li{position:relative;padding-left:17px}
.close-foot li::before{content:"";position:absolute;left:0;top:.5em;width:7px;height:7px;background:var(--blue);border:1px solid #066fd2}
.next-mark{position:absolute;left:var(--spine-left);bottom:84px;margin:0;padding-left:20px;font:600 11px/1 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:#436b94;white-space:nowrap;transform:translateY(50%)}
.next-mark span{margin-left:10px;font-weight:500;letter-spacing:.02em;text-transform:none;color:var(--muted)}
.next-mark i{position:absolute;left:0;top:50%;width:13px;height:13px;margin:-6.5px 0 0 -6.5px;border-radius:50%;background:var(--bg);border:2px solid var(--blue);box-shadow:0 0 0 6px rgba(7,135,255,.1)}
html:not(.fx) .spine-track{bottom:84px}
@media(max-width:1050px){
.close-in{grid-template-columns:minmax(0,1fr);gap:26px;align-items:start}
.close{padding:110px 0 170px}
}
@media(max-width:720px){
.close{padding:88px 0 150px}
.close-side .lede{font-size:17.5px}
.next-mark span{display:none}
}
/* ---------- Technology: the same system, opened up ----------
Bands are ordinary sections. The connectors band is a pinned scene like the ones on the home page. */
.band{position:relative;padding:128px 0}
.band-head{max-width:720px}
.band-head .eyebrow{margin-bottom:16px}
.band-head .title{max-width:19ch}
.band-head .lede{margin-top:20px;max-width:56ch}
.duo{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:40px 72px;align-items:end}
.aside{margin-top:44px;max-width:60ch;font-size:19px;line-height:1.5;color:var(--text)}
.aside b{color:var(--ink)}
/* the hero: two kinds of evidence run into one line */
.sys-mark{position:absolute;z-index:41;left:var(--spine-left);top:86px;width:330px;height:64px;pointer-events:none}
.sys-mark svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.sys-mark path{fill:none;stroke-width:2;vector-effect:non-scaling-stroke}
.sys-mark path.s-d{stroke:var(--blue)}
.sys-mark path.s-p{stroke:var(--green)}
.sys-mark p{position:absolute;left:342px;margin:0;font:600 11px/1 var(--mono);letter-spacing:.09em;text-transform:uppercase;white-space:nowrap;transform:translateY(-50%)}
.sys-mark p.s-d{top:10px;color:var(--blue-text)}
.sys-mark p.s-p{top:40px;color:var(--green-text)}
.hero-tech .hero-foot li::before{background:none;border:1px dashed var(--trace)}
@keyframes sysDraw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
.anim .sys-mark path{stroke-dasharray:1;animation:sysDraw 1.1s .35s var(--ease-io) both}
.anim .sys-mark path.s-p{animation-delay:.6s}
.anim .sys-mark p{animation:heroFade .6s .9s var(--ease) both}
/* ---------- connectors ---------- */
.scene-conn{padding:128px 0}
.conn-head .eyebrow{margin-bottom:16px}
.conn-head .title{max-width:15ch}
.conn-beats{margin-top:30px;max-width:54ch}
.conn-beats .tag{display:block;margin-bottom:5px;color:var(--ink)}
.conn-beats p{font-size:18px;line-height:1.5;color:var(--text)}
.conn-trunk{display:none}
.conn-fig{position:relative;margin-top:60px;max-width:920px}
.conn-rows{display:grid;gap:22px}
.conn-rows li{position:relative;display:grid;grid-template-columns:118px minmax(28px,1fr) auto minmax(28px,.8fr) minmax(0,200px);grid-template-rows:auto;align-items:center}
.c-out{grid-area:1 / 1;font-size:17px;font-weight:640;letter-spacing:-.015em;color:var(--ink)}
.c-clean{grid-area:1 / 2;height:2px;background:var(--blue)}
.c-node{grid-area:1 / 3;padding:8px 11px;border-radius:3px;background:var(--navy);font:600 10.5px/1 var(--mono);font-style:normal;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;color:#fff}
.c-raw{grid-area:1 / 4;height:0;border-top:1.5px dashed var(--trace)}
.c-src{grid-area:1 / 5;display:grid;gap:3px;padding-left:16px}
.c-src b{font-size:15px;font-weight:620;color:var(--ink)}
.c-src .c-f{font:500 11.5px/1.3 var(--mono);color:var(--muted)}
.c-alt{display:none}
.conn-note{margin-top:30px}
.fx .scene-conn{padding:0}
.fx .conn-in{position:relative;z-index:3;height:100%}
.fx .conn-in>*{position:absolute;margin:0}
.fx .conn-head{left:var(--pad);bottom:calc(50% + 62px);width:min(430px,36%)}
.fx .conn-beats{left:var(--pad);top:calc(50% + 54px);width:min(390px,33%);height:170px}
.fx .conn-trunk{display:block;left:var(--spine-x);top:50%;width:calc(var(--pad) + min(430px,36%) + 64px - var(--spine-x));height:2px;margin-top:-1px;background:var(--blue);transform:scaleX(0);transform-origin:100% 50%}
.fx .conn-fig{left:calc(var(--pad) + min(430px,36%) + 64px);right:0;top:50%;height:0;max-width:none}
.fx .conn-fig>*{position:absolute;margin:0}
.fx .conn-rows{display:block;position:absolute;left:0;right:0;top:calc(var(--gap) * -1.5);height:calc(var(--gap) * 3);--gap:min(72px,8.4vh)}
.fx .conn-rows::before{content:"";position:absolute;left:-1px;top:0;bottom:0;width:2px;background:var(--blue);transform:scaleY(var(--bus,0))}
.fx .conn-rows li{position:absolute;left:0;right:0;top:calc(var(--i) * var(--gap) - 22px);height:44px;grid-template-columns:104px minmax(24px,1fr) auto minmax(24px,.9fr) minmax(0,176px)}
.fx .conn-rows li:nth-child(1){--i:0}.fx .conn-rows li:nth-child(2){--i:1}.fx .conn-rows li:nth-child(3){--i:2}.fx .conn-rows li:nth-child(4){--i:3}
.fx .c-out{padding-left:14px;opacity:0}
.fx .c-clean{position:relative;transform:scaleX(0);transform-origin:100% 50%}
/* something is always arriving: one mark travels each line towards AfterBid */
@keyframes flowIn{from{left:100%;opacity:0}12%{opacity:1}88%{opacity:1}to{left:0;opacity:0}}
.fx .c-clean::after{content:"";position:absolute;top:-2.5px;width:7px;height:7px;margin-left:-3.5px;border-radius:50%;background:var(--blue);animation:flowIn 2.6s linear infinite}
.fx .conn-rows li:nth-child(2) .c-clean::after{animation-delay:-.7s}
.fx .conn-rows li:nth-child(3) .c-clean::after{animation-delay:-1.5s}
.fx .conn-rows li:nth-child(4) .c-clean::after{animation-delay:-2.1s}
.fx .c-raw{transform:scaleX(0);transform-origin:100% 50%}
.fx .c-node,.fx .c-src{opacity:0}
.fx .c-alt{display:contents}
.fx .conn-note{left:0;right:0;top:calc(var(--gap) * 1.5 + 44px);opacity:0;--gap:min(72px,8.4vh)}
/* ---------- publisher observer ---------- */
.tenets{display:grid;gap:14px;font-size:15.5px;line-height:1.5;color:var(--text)}
.tenets li{position:relative;padding-left:22px}
.tenets li::before{content:"";position:absolute;left:0;top:.55em;width:8px;height:8px;border-radius:50%;background:var(--green)}
.tenets b{color:var(--ink)}
.obs-fig{margin-top:72px}
.obs-frame{display:grid;grid-template-columns:auto minmax(0,1fr);gap:20px 56px;align-items:start;--u:calc(min(430px,34vw) / 56)}
.obs-page{position:relative}
.band-obs .pg-doc.is-struct{clip-path:none}
.band-obs .ad{--slot:1}
.band-obs .ad.is-new{display:none}
.band-obs .pg-who .who-v{display:none}
.band-obs .ad{outline:0}
.pg-strip{position:absolute;z-index:6;left:1.2em;right:1.2em;top:calc(var(--u) * 5.2);margin:0;padding:8px 11px;border-radius:3px;background:var(--green);font:500 11px/1.4 var(--mono);color:#fff;opacity:0;transform:translateY(-4px);transition:opacity .25s var(--ease),transform .35s var(--ease);font-size:11px}
.obs-frame[data-hl] .pg-strip{opacity:1;transform:none}
.reads{counter-reset:r}
.reads li + li{border-top:1px solid var(--line)}
.reads button{position:relative;display:grid;grid-template-columns:minmax(0,172px) minmax(0,1fr) auto;gap:4px 18px;align-items:baseline;width:100%;padding:15px 12px 15px 18px;border:0;background:transparent;text-align:left;cursor:pointer;transition:background-color .25s var(--ease)}
.reads button::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:2px;background:var(--green);transform:scaleY(0);transition:transform .35s var(--ease)}
.reads button:hover,.reads button[aria-pressed="true"]{background:rgba(14,143,97,.06)}
.reads button:hover::before,.reads button[aria-pressed="true"]::before,.reads button:focus-visible::before{transform:scaleY(1)}
.reads b{font-size:15.5px;font-weight:620;letter-spacing:-.012em;color:var(--ink)}
.reads span{font-size:14.5px;line-height:1.45;color:var(--text)}
.lv{display:inline-flex;align-items:center;gap:7px;font:600 10.5px/1.4 var(--mono);font-style:normal;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;color:var(--green-text)}
.lv::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--green)}
.lv-c::before{background:transparent;box-shadow:inset 0 0 0 1.5px var(--green)}
.lv-i{color:var(--muted)}
.lv-i::before{background:transparent;border:1.5px dashed var(--trace)}
.reads-key{margin-top:26px;max-width:92ch}
.reads-key b{color:var(--ink);font-weight:600}
.reads-key + .fine{margin-top:6px}
/* what each reading points at on the page */
.obs-frame .is-struct .ad,.obs-frame .is-struct .pg-h span,.obs-frame .is-struct .pg-p span,.obs-frame .is-struct .pg-kick span,.obs-frame .pg-url,.obs-frame .is-struct .pg-img{transition:background-color .3s var(--ease),box-shadow .3s var(--ease),opacity .3s var(--ease)}
.obs-frame[data-hl="slots"] .is-struct .ad,.obs-frame[data-hl="density"] .is-struct .ad{background:rgba(14,143,97,.24)}
.obs-frame[data-hl="density"] .ad.is-new{display:grid}
.obs-frame[data-hl="density"] .is-struct .ad.is-new{background:#2f9d76}
.obs-frame[data-hl="density"] .ad-anchor.is-new{display:grid}
.obs-frame[data-hl="refresh"] .is-struct .rf{opacity:1}
.obs-frame[data-hl="stack"] .pg-bar,.obs-frame[data-hl="ads"] .pg-url,.obs-frame[data-hl="sellers"] .pg-url{box-shadow:inset 0 0 0 2px var(--green)}
.obs-frame[data-hl="stack"] .is-struct .ad{background:repeating-linear-gradient(135deg,rgba(14,143,97,.2) 0 .6em,rgba(14,143,97,.07) .6em 1.2em)}
.obs-frame[data-hl="context"] .is-struct .pg-h span,.obs-frame[data-hl="context"] .is-struct .pg-kick span{background:var(--green)}
.obs-frame[data-hl="context"] .is-struct .pg-p span{background:#9fd0bd}
.obs-frame[data-hl="context"] .is-struct .pg-img{box-shadow:inset 0 0 0 2px var(--green)}
.obs-frame[data-hl="context"] .is-struct .ad,.obs-frame[data-hl="ads"] .is-struct .ad,.obs-frame[data-hl="sellers"] .is-struct .ad{opacity:.35}
/* ---------- a recommendation, traced back ---------- */
.trace{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 120px minmax(0,1.12fr);align-items:center;margin-top:64px}
.trace-in{grid-column:1;display:grid;gap:14px}
.trace-in li{position:relative;padding:14px 22px 14px 0;border-top:1px solid var(--line)}
.trace-in li:last-child{border-bottom:1px solid var(--line)}
.trace-in p{font-size:16.5px;line-height:1.45;color:var(--ink)}
.trace-in .src{margin:5px 0 0}
.src.s-x{color:var(--muted)}
.src.s-x::before{background:transparent;border:1.5px dashed var(--trace)}
.trace-in .is-missing p{color:var(--muted)}
.trace-in .is-missing{background:repeating-linear-gradient(135deg,transparent 0 7px,rgba(116,137,159,.1) 7px 8px)}
.trace-wires{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.trace-wires path{fill:none;stroke:var(--blue);stroke-width:1.5}
.trace-wires path.w-p{stroke:var(--green)}
.trace-wires path.w-x{stroke:var(--trace);stroke-dasharray:3 5}
.trace-wires circle{fill:var(--bg);stroke:var(--ink);stroke-width:1.5}
.trace-rec{grid-column:3;padding-left:28px;border-left:2px solid var(--ink)}
.trace-rec .tag i{margin-left:10px;font-style:normal;color:var(--blue-text)}
.trace-rec .act-line{margin:10px 0 22px;font-size:clamp(24px,2.5vw,36px);max-width:17ch}
.trace-dl{display:grid;gap:14px}
.trace-dl div{display:grid;grid-template-columns:150px minmax(0,1fr);gap:4px 16px}
.trace-dl dt{font:600 10.5px/1.7 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.trace-dl dd{margin:0;font-size:15.5px;line-height:1.5;color:var(--text)}
.js .trace-rec{border-left-color:transparent}
/* ---------- control: who approves, who makes the change ---------- */
.lanes{display:grid;gap:56px;margin-top:64px}
.lane2{display:grid;grid-template-columns:150px minmax(0,1fr);gap:12px 20px;align-items:start}
.lane2 h3{margin:0;padding-top:1px;color:var(--ink)}
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:6px}
.steps li{position:relative;padding:24px 22px 0 0}
.steps li::before{content:"";position:absolute;z-index:1;left:0;top:0;width:11px;height:11px;border-radius:50%;background:var(--bg);border:1.5px solid var(--ink)}
.steps li::after{content:"";position:absolute;left:11px;right:0;top:5px;height:1.5px;background:var(--ink);transform-origin:0 50%}
.steps li:last-child::after{display:none}
.steps .is-gate::before{border-radius:1px;border-color:var(--orange);transform:rotate(45deg)}
.steps .is-stored::before{border-radius:1px;background:var(--navy);border-color:var(--navy)}
.steps .is-out::before{border-style:dashed;border-color:var(--trace)}
.is-buyer .steps .is-gate::after,.is-buyer .steps .is-out::after{background:none;border-top:1.5px dashed var(--trace);height:0}
.steps b{display:block;font-size:15.5px;line-height:1.35;font-weight:620;letter-spacing:-.012em;color:var(--ink)}
.steps span{display:block;margin-top:4px;font:500 11.5px/1.5 var(--mono);color:var(--muted)}
.steps .is-gate span{color:var(--orange-text)}
/* ---------- measure and remember: the records on the campaign line ---------- */
.band-mem{padding:136px 0}
.band-mem .lede{color:var(--d-text)}
.ribs-cap{margin-top:64px;color:#b9c8d8}
.ribs{margin-top:18px}
.rib{position:relative;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.72fr) minmax(0,1fr) minmax(0,1.25fr);gap:6px 28px;padding:20px 0 22px;border-top:1px solid rgba(255,255,255,.22);font-size:14.5px;line-height:1.5;color:var(--d-text)}
.rib::before{content:"";position:absolute;right:100%;top:-1px;width:calc(var(--pad) - var(--spine-x));height:1px;background:rgba(255,255,255,.55);transform-origin:0 50%}
.rib::after{content:"";position:absolute;left:-5px;top:-5px;width:9px;height:9px;background:#fff}
.rib.is-cross::after{background:none;width:11px;height:11px;left:-6px;top:-6px;background:linear-gradient(45deg,transparent 44%,#fff 44% 56%,transparent 56%),linear-gradient(-45deg,transparent 44%,#fff 44% 56%,transparent 56%)}
.rib.is-back::after{background:var(--night);border:1.5px dashed #fff}
.rib b{font-size:16px;line-height:1.4;font-weight:620;letter-spacing:-.012em;color:#fff}
.rib .who,.rib .how{font:500 11.5px/1.6 var(--mono);color:#b9c8d8}
.rib .res{color:#dbe4ee}
.rib .res strong{color:#fff}
.rib .g{margin-right:9px;color:#fff}
/* ---------- trust ---------- */
.bound{display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,300px) minmax(0,1fr);align-items:center;margin-top:64px;padding:38px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.zone .tag{color:var(--ink)}
.zone ul{margin-top:10px;font-size:17px;line-height:1.5;color:var(--text)}
.z-pub .tag{color:var(--green-text)}
.z-camp{padding-left:28px}
.wall{position:relative;height:150px}
.wall::before{content:"";position:absolute;left:50%;top:-38px;bottom:-38px;width:26px;margin-left:-13px;background:repeating-linear-gradient(135deg,rgba(6,23,47,.3) 0 1.5px,transparent 1.5px 7px)}
.wall>span{position:absolute;left:50%;top:-30px;transform:translate(-50%,-100%);font:600 10.5px/1 var(--mono);letter-spacing:.09em;text-transform:uppercase;white-space:nowrap;color:var(--ink);display:none}
.wall b{position:absolute;font:500 11px/1.45 var(--mono);color:var(--muted)}
.wall::after{content:"";position:absolute;left:0;right:5px;top:22px;height:2px;background:var(--green)}
.wall .w-in{left:0;top:32px;width:calc(50% - 24px);color:var(--green-text)}
.wall .w-in::after{content:"";position:absolute;left:calc(200% + 48px - 5px);top:-14px;border:5px solid transparent;border-left-color:var(--green);border-right:0}
.wall .w-no{right:-22px;top:92px;width:calc(50% + 8px);padding:11px 0 0 12px;text-wrap:balance}
.wall .w-no::before{content:"";position:absolute;right:22px;left:0;top:0;height:0;border-top:1.5px dashed var(--trace)}
.wall .w-no::after{content:"";position:absolute;left:0;top:-6px;width:1.5px;height:13px;background:var(--ink)}
.pk{position:absolute;left:0;top:18.5px;width:9px;height:9px;border-radius:50%;background:var(--green)}
@keyframes cross{0%{transform:translateX(0);opacity:0}12%{opacity:1}88%{opacity:1}100%{transform:translateX(var(--run,260px));opacity:0}}
.anim .pk{animation:cross 3.2s linear infinite}
html:not(.anim) .pk{left:calc(50% - 4.5px)}
.rules{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 56px;margin-top:52px;counter-reset:rule;font-size:15.5px;line-height:1.5;color:var(--text)}
.rules li{position:relative;padding:17px 0 17px 44px;border-top:1px solid var(--line);counter-increment:rule}
.rules li::before{content:counter(rule,decimal-leading-zero);position:absolute;left:0;top:19px;font:600 11px/1.5 var(--mono);color:var(--blue-text)}
.rules b{color:var(--ink)}
.trust-note{margin-top:30px}
@media(max-width:1050px){
.duo{grid-template-columns:minmax(0,1fr);gap:30px;align-items:start}
.obs-frame{grid-template-columns:minmax(0,1fr);--u:calc(min(430px,100vw - 2 * var(--gutter) - var(--pad)) / 56)}
.trace{grid-template-columns:minmax(0,1fr)}
.trace-wires{display:none}
.trace-rec{grid-column:1;margin-top:34px}
.js .trace-rec{border-left-color:var(--ink)}
.rib{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.rib b,.rib .res{grid-column:1 / -1}
}
@media(max-width:900px){
.band{padding:96px 0}
.lane2{grid-template-columns:minmax(0,1fr)}
.steps{grid-template-columns:minmax(0,1fr);gap:0;margin-top:14px}
.steps li{padding:0 0 22px 28px}
.steps li::after{left:5px;right:auto;top:11px;bottom:0;width:1.5px;height:auto}
.is-buyer .steps .is-gate::after,.is-buyer .steps .is-out::after{border-top:0;border-left:1.5px dashed var(--trace);width:0;height:auto}
.bound{grid-template-columns:minmax(0,1fr);gap:26px}
.wall{height:120px}
.wall::before{left:0;right:0;top:50%;bottom:auto;width:auto;height:22px;margin:-11px 0 0}
.wall .w-in{top:0;width:auto}
.wall .w-no{top:auto;bottom:0;left:0;right:auto;width:auto;padding:0}
.wall::after,.wall .w-in::after,.wall .w-no::before,.wall .w-no::after,.pk{display:none}
.z-camp{padding-left:0}
.rules{grid-template-columns:minmax(0,1fr)}
.conn-rows li{grid-template-columns:96px minmax(16px,1fr) auto minmax(16px,.6fr) minmax(0,150px)}
.reads button{grid-template-columns:minmax(0,1fr) auto}
.reads span{grid-column:1 / -1;grid-row:2}
.trace-dl div{grid-template-columns:minmax(0,1fr)}
.sys-mark{width:210px}
.sys-mark p{left:220px;font-size:10px}
}
@media(max-width:720px){.hero-tech{padding-top:calc(var(--nav-h) + 112px)}}
@media(max-width:480px){
.sys-mark{width:104px}
.sys-mark p{left:112px;font-size:9.5px;letter-spacing:.05em}
.conn-rows li{grid-template-columns:74px minmax(10px,1fr) auto minmax(10px,.5fr) minmax(0,112px)}
.c-out{font-size:15px}
.c-node{width:12px;height:12px;padding:0;border-radius:2px;font-size:0}
.c-src{padding-left:10px;min-width:0}
.c-src b{font-size:13.5px}
.c-src .c-f{font-size:10px;overflow-wrap:anywhere}
}
/* drawn in as they arrive (only when motion is on; the defaults leave everything visible) */
.fx .steps li::before{scale:calc(.3 + .7 * var(--k,1))}
.fx .steps li::after{transform:scaleX(var(--k,1))}
.fx .trace-rec{position:relative}
.fx .trace-rec::before{content:"";position:absolute;left:-2px;top:0;bottom:0;width:2px;background:var(--ink);transform:scaleY(var(--in,1))}
.fx .rib{clip-path:inset(-12px calc((1 - var(--in,1)) * 100%) -4px calc(-1 * var(--pad)))}
/* connectors, pinned, on a narrow window: heading above, the four rows across the middle, caption below */
@media(max-width:900px){
.fx .steps li::after{transform:scaleY(var(--k,1));transform-origin:50% 0} /* the lanes run downwards here */
.fx .conn-head{left:var(--pad);right:0;top:calc(var(--nav-h) + 16px);bottom:auto;width:auto}
.fx .conn-head .title{max-width:none;font-size:clamp(23px,6.2vw,34px)}
.fx .conn-head .eyebrow{margin-bottom:8px}
.fx .conn-beats{left:var(--pad);right:0;top:auto;bottom:34px;width:auto;height:104px}
.fx .conn-beats p{font-size:15.5px;line-height:1.45}
.fx .conn-fig{left:var(--pad);right:0}
.fx .conn-trunk{width:calc(var(--pad) - var(--spine-x))}
.fx .conn-rows,.fx .conn-note{--gap:min(64px,8vh)}
.fx .conn-rows li{grid-template-columns:82px minmax(12px,1fr) auto minmax(12px,.7fr) minmax(0,118px)}
.fx .c-node{width:12px;height:12px;padding:0;border-radius:2px;font-size:0}
.fx .c-out{padding-left:10px;font-size:14.5px}
.fx .c-src{padding-left:10px}
.fx .c-src b{font-size:13.5px}
.fx .c-src .c-f{font-size:10px}
.fx .conn-note{right:0;top:calc(var(--gap) * 1.5 + 34px);white-space:normal;font-size:10px;line-height:1.4}
}
/* ---------- one record through the system ----------
REC-202 is followed down the campaign line. Each band hangs off the line at its eyebrow, in its stage's node: green on the
publisher strand, navy where the two kinds of evidence become one recommendation, an orange diamond where a person
decides, a square where the result is kept. Under each eyebrow, the same record as that stage leaves it. */
.carry{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;margin:-4px 0 20px;font:500 12px/1.55 var(--mono);color:var(--muted)}
.carry b{font-weight:600;color:var(--ink);white-space:nowrap}
.carry b::before{content:"";display:inline-block;width:7px;height:7px;margin-right:8px;border-radius:50%;background:var(--blue);vertical-align:1px}
.carry.c-p b::before{background:var(--green)}
.carry.c-r b::before{background:var(--navy)}
.carry.c-g b::before{border-radius:1px;background:var(--orange);transform:rotate(45deg) scale(.9)}
.carry.c-m b::before{border-radius:1px;background:#fff}
.band-mem .carry{color:#b9c8d8}
.band-mem .carry b{color:#fff}
.band-head .carry{max-width:64ch}
.conn-head .carry{margin:-6px 0 18px;max-width:46ch}
/* the station: a rib from the line to just short of the eyebrow, and the stage's node on the line itself */
.station{position:relative}
.station::before,.station::after{content:"";position:absolute;top:50%;pointer-events:none}
.station::before{left:calc(var(--spine-x) - var(--pad) + var(--st-x,0px) + 7px);width:calc(var(--pad) - var(--spine-x) - var(--st-x,0px) - 19px);height:1px;margin-top:-.5px;background:var(--st-c,var(--ink));transform-origin:0 50%;transform:scaleX(var(--rib,1))}
.station::after{z-index:41;left:calc(var(--spine-x) - var(--pad) + var(--st-x,0px));width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;background:var(--bg);border:1.5px solid var(--st-c,var(--ink))}
.st-p{--st-c:var(--green);--st-x:8px}
.st-r{--st-c:var(--navy)}
.st-r::after{background:var(--navy)}
.st-g{--st-c:var(--orange)}
.st-g::after{width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:1px;transform:rotate(45deg)}
.st-m{--st-c:#fff}
.st-m::after{border-radius:1px;background:#fff}
@media(max-width:720px){.station::before{display:none}}
/* publisher evidence runs on its own strand beside the campaign line, from the observer to the recommendation, and turns
into the line there (placed by the script, in page terms, so it scrolls with the bands it joins) */
.pub-strand{position:absolute;z-index:39;left:calc(var(--spine-left) + 7px);width:2px;pointer-events:none}
.pub-strand::before{content:"";position:absolute;left:0;top:0;bottom:10px;width:2px;background:var(--green)}
.pub-strand::after{content:"";position:absolute;right:0;bottom:-1px;width:9px;height:11px;border-right:2px solid var(--green);border-bottom:2px solid var(--green);border-bottom-right-radius:9px}
/* the marker carries the record: publisher evidence rides beside it on its strand, joins it as a recommendation,
becomes a decision, then a stored result */
.page-tech .spine-twin{margin-left:3.5px;transform:translateX(-8px)}
.fx .spine[data-head="pub"] .spine-twin{opacity:1;transform:none;background:var(--green);border-color:var(--green)}
.fx .spine[data-head="rec"] .spine-head{background:var(--navy);border-color:var(--navy);box-shadow:0 0 0 6px rgba(6,23,47,.08)}
/* memory: the dark opens from its station on the line as the band arrives, as the dark scenes do on the home page */
.band-bg{display:none}
.fx .band-mem.dark{background:transparent}
.fx .band-bg{display:block;position:absolute;inset:0;z-index:-1;background:var(--night);clip-path:circle(var(--r,0px) at var(--spine-left) var(--cy,140px))}
/* ---------- About, FAQ, Contact, Privacy ----------
Plain reading pages in the same system: the campaign line runs down the left as a still hairline, and each
section joins it the way the rows on Home do. No motion beyond the header and the footer switch. */
.doc-line{position:absolute;z-index:1;left:var(--spine-left);top:var(--line-top);bottom:0;width:1px;margin-left:-.5px;background:rgba(120,140,165,.4);pointer-events:none}
.doc-line::before{content:"";position:absolute;top:-6px;left:-6px;width:13px;height:13px;box-sizing:border-box;border-radius:50%;background:var(--bg);border:2px solid var(--blue);box-shadow:0 0 0 6px rgba(7,135,255,.1)}
.doc-hero{position:relative;padding:calc(var(--nav-h) + 110px) 0 56px}
.doc-hero .eyebrow{margin-bottom:18px;color:var(--blue-text)}
.doc-hero .statement{font-size:clamp(38px,5.2vw,72px)}
.doc-hero .lede{margin-top:26px;max-width:54ch;font-size:19px;line-height:1.58}
.doc-body{position:relative;padding:8px 0 88px}
.doc-row{position:relative;display:grid;grid-template-columns:minmax(0,.6fr) minmax(0,1fr);gap:14px 56px;padding:34px 0 40px;border-top:1px solid var(--line);scroll-margin-top:calc(var(--nav-h) + 16px)}
.doc-row:last-child{border-bottom:1px solid var(--line)}
.doc-row::before{content:"";position:absolute;top:-1px;right:100%;width:calc(var(--pad) - var(--spine-x));height:1px;background:var(--line)}
.doc-row::after{content:"";position:absolute;z-index:2;top:-5px;left:calc(var(--spine-x) - var(--pad) - 4.5px);width:9px;height:9px;box-sizing:border-box;border-radius:50%;background:var(--bg);border:1.5px solid var(--trace)}
.doc-h{max-width:16ch;font-size:clamp(22px,2vw,28px);line-height:1.15;letter-spacing:-.03em;font-weight:620;color:var(--ink)}
.doc-text{max-width:64ch;font-size:17px;line-height:1.65;color:var(--text)}
.doc-text>*+*{margin-top:14px}
.doc-text b{font-weight:620;color:var(--ink)}
.doc-text code{padding:1px 5px;border-radius:3px;background:rgba(6,23,47,.06);font:500 .86em var(--mono);color:var(--ink)}
.doc-list li{position:relative;padding-left:22px}
.doc-list li+li{margin-top:10px}
.doc-list li::before{content:"";position:absolute;left:0;top:.82em;width:10px;height:1.5px;background:var(--blue)}
.doc-ticks li+li{margin-top:4px}
.qa+.qa{margin-top:28px}
.qa h3{margin-bottom:6px;font-size:18px;line-height:1.35;letter-spacing:-.012em;font-weight:620;color:var(--ink)}
.qa p{font-size:16.5px}
a.inline{color:var(--ink);background:linear-gradient(var(--blue),var(--blue)) 0 100% / 100% 1px no-repeat;padding-bottom:1px;transition:color .25s var(--ease)}
a.inline:hover{color:var(--blue-text)}
.doc-act{margin-top:24px}
.doc-mail a{font-size:clamp(22px,2.2vw,30px);line-height:1.2;letter-spacing:-.02em;font-weight:620;color:var(--ink);background:linear-gradient(var(--blue),var(--blue)) 0 100% / 100% 1.5px no-repeat;padding-bottom:2px}
.doc-mail a:hover{color:var(--blue-text)}
.doc-meta{font:500 12px/1.5 var(--mono);color:var(--muted)}
.doc-close{position:relative;padding:0 0 104px}
.doc-close-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 32px}
.doc-close-t{font-size:clamp(26px,2.8vw,40px);line-height:1.1;letter-spacing:-.035em;font-weight:620;color:var(--ink)}
@media(max-width:900px){
.doc-hero{padding-top:calc(var(--nav-h) + 88px)}
.doc-row{grid-template-columns:minmax(0,1fr);padding:28px 0 32px}
.doc-h{max-width:none}
}
@media(max-width:720px){
.doc-hero{padding:calc(var(--nav-h) + 76px) 0 44px}
.doc-hero .lede{font-size:17.5px}
.doc-text{font-size:16.5px}
.doc-body{padding-bottom:72px}
.doc-close{padding-bottom:80px}
}
/* ---------- How it works: the stories that play by themselves (the publisher story and the campaign) ----------
Their controls are made by app.js (AB.player), so they exist only with motion on. They sit in the stage's corner, in the
stage's colours: light over a light stage, dark over a dark one. The thin line along their foot is how far through it is. */
/* scrolling on at the approval: the button asks, once */
@keyframes askOk{0%{box-shadow:0 0 0 0 rgba(207,95,18,.45)}100%{box-shadow:0 0 0 14px rgba(207,95,18,0)}}
.fx .camp-gate.is-nudge .approve{animation:askOk .9s var(--ease) 1}
.play{position:absolute;z-index:6;right:var(--wrap-left);bottom:24px;display:flex;align-items:center;gap:2px;padding:3px;border:1px solid var(--line);border-radius:999px;background:rgba(251,250,247,.84);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font:600 10.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#4c6178;pointer-events:auto;transition:background-color .45s var(--ease),border-color .45s var(--ease),color .45s var(--ease)}
.cp-b{display:inline-flex;align-items:center;gap:7px;min-height:34px;padding:0 12px;border:0;border-radius:999px;background:transparent;font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit;white-space:nowrap;cursor:pointer;transition:color .25s var(--ease),background-color .25s var(--ease)}
.cp-b:hover{color:var(--navy);background:rgba(6,23,47,.06)}
.cp-i{flex:none;width:12px;height:12px;overflow:visible;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.cp-i .i-play{fill:currentColor;stroke:none}
.cp-toggle .i-play,.cp-toggle .i-wait{display:none}
.play[data-state="paused"] .i-pause,.play[data-state="wait"] .i-pause{display:none}
.play[data-state="paused"] .i-play{display:inline}
.play[data-state="wait"] .i-wait{display:inline;stroke:var(--orange);fill:rgba(207,95,18,.14)}
.play[data-state="wait"] .cp-toggle{color:var(--orange-text)}
.play[data-state="end"] .cp-replay{color:var(--navy)}
.cp-bar{position:absolute;left:18px;right:18px;bottom:-1px;height:1.5px;overflow:hidden;pointer-events:none}
.cp-bar i{display:block;height:100%;background:var(--blue);transform:scaleX(0);transform-origin:0 50%}
.play.on-dark{border-color:rgba(255,255,255,.16);background:rgba(4,15,33,.8);color:#b9c8d8}
.play.on-dark .cp-b:hover{color:#fff;background:rgba(255,255,255,.08)}
.play.on-dark[data-state="end"] .cp-replay{color:#fff}
.play.on-dark .cp-bar i{background:var(--sky)}
.play.is-away{opacity:0;visibility:hidden;transition:opacity .3s var(--ease),visibility 0s linear .3s}
.play :focus-visible{outline-offset:1px;border-radius:999px}
.play.on-dark :focus-visible{outline-color:var(--sky)}
.fx .scene-see,.fx .scene-camp{--pace:1} /* scenes you can scroll or watch keep their full length on a phone: the scroll is shared out over their key moments */
@media(min-width:901px){
.scene-see .play{right:auto;left:calc(var(--wrap-left) + var(--pad))} /* the observed page and its note fill the right */
}
@media(max-width:900px){
.play{bottom:12px}
/* on a phone the publisher story's words and page move up to make room for the controls */
.fx .scene-see.is-played .see-beats{bottom:82px}
.fx .scene-see.is-played .uni-beats{bottom:76px}
.fx .scene-see.is-played .see-tags{bottom:204px}
.fx .scene-see.is-played .obs-art{bottom:230px}
.fx .scene-see.is-played .uni-note{bottom:58px}
.fx .scene-camp .mem-beats{bottom:60px} /* room for the controls under the memory captions */
}
@media(max-width:600px){
.play{right:var(--gutter);gap:0}
.cp-b{padding:0 10px}
.cp-replay span,.cp-skip span{display:none} /* icons only on a phone; the buttons keep their names for screen readers */
}
/* ---------- How it works: the chapter chooser and the chapters' own pieces (v42) ----------
Three cards, each a whole link (the heading's link covers the card), with the supplied artwork on the site's paper. */
.icon[data-dir="left"]{transform:rotate(180deg)}
.hero.hero-hub{padding-bottom:56px}
/* a chapter's opening is short, so its story starts on the first screen */
.hero.hero-chapter{padding-top:calc(var(--nav-h) + 104px);padding-bottom:84px}
.hero-chapter .display{font-size:clamp(34px,4.4vw,62px)}
.hero-chapter .hero-cue{bottom:28px}
.crumb{margin:0 0 16px}
.crumb a{display:inline-flex;align-items:center;gap:8px;min-height:32px;font-size:14px;font-weight:620;color:var(--blue-text)}
.crumb a:hover .icon{transform:rotate(180deg) translateX(3px)}
.paths{position:relative;padding:8px 0 80px}
.path-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.path-cards.is-two{grid-template-columns:repeat(2,minmax(0,1fr));max-width:900px}
.pc{position:relative;display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--line);border-radius:14px;background:var(--paper);transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease)}
.pc-img{display:block;aspect-ratio:672 / 378;overflow:hidden;background:var(--night)}
.pc-img img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.pc-body{display:flex;flex:1;flex-direction:column;padding:22px 24px 22px}
.pc-n{display:flex;gap:10px;font:600 10.5px/1.5 var(--mono);letter-spacing:.11em;text-transform:uppercase;color:#48627e}
.pc-n span{color:var(--blue-text)}
.pc-t{margin-top:10px;font-size:clamp(22px,1.9vw,27px);line-height:1.15;letter-spacing:-.03em;font-weight:620;color:var(--ink)}
.pc-t a::after{content:"";position:absolute;inset:0;z-index:1} /* the whole card is the link */
.pc-t a:focus-visible{outline:none}
.pc:has(.pc-t a:focus-visible){outline:2px solid var(--blue);outline-offset:3px}
.pc-d{margin-top:10px;font-size:15.5px;line-height:1.55;color:var(--text)}
.pc-go{display:inline-flex;align-items:center;gap:9px;margin-top:auto;padding-top:18px;font-size:14px;font-weight:650;color:var(--blue-text)}
@media(hover:hover){
.pc:hover{transform:translateY(-3px);border-color:var(--line2);box-shadow:0 18px 40px -20px rgba(6,23,47,.38)}
.pc:hover .pc-img img{transform:scale(1.03)}
.pc:hover .pc-go .icon{transform:translateX(3px)}
}
.pc.is-small .pc-body{padding:18px 20px 18px}
.pc.is-small .pc-t{font-size:clamp(19px,1.5vw,22px)}
.pc.is-small .pc-d{font-size:14.5px}
.paths-notes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 24px;margin-top:36px;padding-top:22px;border-top:1px solid var(--line);font-size:14.5px;line-height:1.55;color:var(--text)}
.paths-notes b{display:block;margin-bottom:2px;font-weight:620;color:var(--ink)}
.paths-next{padding:88px 0 0}
.paths-next .eyebrow{margin-bottom:18px}
.close-chapter .actions{align-items:center;gap:14px 22px}
@media(max-width:900px){
.path-cards,.path-cards.is-two{grid-template-columns:minmax(0,1fr)}
.paths-next{padding-top:64px}
}
@media(min-width:601px) and (max-width:900px){ /* a tablet: each card lies on its side, picture first */
.pc{flex-direction:row}
.pc-img{flex:none;width:44%;aspect-ratio:auto}
}
@media(max-width:720px){
.hero.hero-chapter{padding-top:calc(var(--nav-h) + 88px);padding-bottom:72px}
.hero-chapter .lede{font-size:16.5px}
.paths{padding-bottom:56px}
.paths-notes{grid-template-columns:minmax(0,1fr);margin-top:28px}
.pc-body{padding:18px 18px 18px}
}