/* Kartel static pages. One token sheet: Untitled UI neutrals, Inter Variable, one red.
   No section-scoped palettes: every colour on this page is one of these. */
:root{
  /* Untitled UI v8 PRO kit: the Neutral scale (true grays, read from the Styles file variables), Kartel red (Emmet, 2026-09-11) */
  --plate:#0A0A0A; --plate-2:#171717; --sheet:#FFFFFF; --sheet-2:#FAFAFA;
  --ink:#171717; --muted:#525252; --ghost:#737373; --rule:#E5E5E5; --rule-fine:#F5F5F5; --rule-strong:#D4D4D4;
  --plate-ink:#FAFAFA; --plate-muted:#D4D4D4; --plate-ghost:#A3A3A3; --plate-rule:rgba(255,255,255,.12);
  --accent:#F04A3C; --accent-soft:#FBEBE8; --accent-hover:#C0392B; --mark:#FDE8E5;
  --white:#fff; --black:#000;
  --d-sheet:#0A0A0A; --d-sheet-2:#171717; --d-muted:#D4D4D4; --d-rule:#262626; --d-rule-fine:#222222; --d-accent-soft:#3a1f1c; --d-mark:#4a2a26;
  --shadow-xs:0 1px 2px rgba(10,10,10,.05); --shadow-sm:0 1px 3px rgba(10,10,10,.1),0 1px 2px -1px rgba(10,10,10,.1);
  --r-md:8px; --r-lg:12px;
  --gutter:clamp(22px,4.5vw,64px); --max:1440px;
  /* Inter 4 Variable, self-hosted; the opsz axis gives Inter Display above 32px. Plex Mono for the few data labels. */
  --font-display:'InterVariable',-apple-system,'Segoe UI',Roboto,Arial,sans-serif; --font-body:'InterVariable',-apple-system,'Segoe UI',Roboto,Arial,sans-serif; --font-mono:'IBM Plex Mono',Menlo,monospace;
  /* motion: one fast-out/long-settle curve for anything that moves, the standard curve for colour and opacity (Profound teardown, 2026-09-11) */
  --ease-snap:cubic-bezier(.16,1,.3,1); --ease-std:cubic-bezier(.4,0,.2,1); --dur-fast:.15s; --dur:.25s; --dur-slow:.5s;
}
*{box-sizing:border-box}
::selection{background:var(--accent);color:var(--white)}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scrollbar-gutter:stable}
body{margin:0;background:var(--plate);color:var(--plate-ink);font-family:var(--font-body);font-optical-sizing:auto;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:clip}
img,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* type */
.anton{font-family:var(--font-display);font-optical-sizing:auto;font-weight:700;letter-spacing:-.02em;line-height:1.1;text-wrap:balance;margin:0}
.eyebrow{font-size:16px;line-height:1.5;font-weight:600;color:var(--accent)}
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.num{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;color:var(--accent)}
.lede{font-size:clamp(18px,1.4vw,20px);line-height:1.45;max-width:46ch;text-wrap:pretty;margin:0}
.h1{font-size:clamp(40px,5vw,72px);line-height:1.1;letter-spacing:-.03em}
.h2{font-size:clamp(30px,3.2vw,48px);line-height:1.15}
.h2-lg{font-size:clamp(36px,4vw,60px);line-height:1.12}
.h3{font-size:clamp(24px,2.2vw,36px);line-height:1.2}

/* surfaces */
.plate{background:var(--plate);color:var(--plate-ink)}
.plate-2{background:var(--plate-2);color:var(--plate-ink)}
/* dark mode: the light sheets go dark; the plates already are. Toggled in the nav, persisted as kartel_theme. */
html.dark{--sheet:var(--d-sheet);--sheet-2:var(--d-sheet-2);--ink:var(--plate-ink);--muted:var(--d-muted);--ghost:var(--plate-ghost);--rule:var(--d-rule);--rule-fine:var(--d-rule-fine);--accent-soft:var(--d-accent-soft);--mark:var(--d-mark)}
html.dark .quote img{filter:brightness(0) invert(1)}
.theme-toggle{width:36px;height:36px;min-height:36px;border-radius:50%;border:1px solid rgba(255,255,255,.28);background:transparent;color:var(--plate-muted);display:inline-flex;align-items:center;justify-content:center;padding:0;flex:0 0 auto;align-self:center}
.theme-toggle:hover{color:var(--plate-ink);border-color:rgba(255,255,255,.5)}
.theme-toggle .tt-sun{display:none}
html.dark .theme-toggle .tt-sun{display:block} html.dark .theme-toggle .tt-moon{display:none}
.sheet{background:var(--sheet);color:var(--ink)}
.sheet-2{background:var(--sheet-2);color:var(--ink)}
.sheet .eyebrow,.sheet-2 .eyebrow{color:var(--accent)}
.sheet .muted,.sheet-2 .muted{color:var(--muted)} .plate .muted,.plate-2 .muted{color:var(--plate-muted)}
.sheet .ghost,.sheet-2 .ghost{color:var(--ghost)} .plate .ghost,.plate-2 .ghost{color:var(--plate-ghost)}
.grain{position:absolute;inset:0;pointer-events:none;opacity:.35;mix-blend-mode:soft-light;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .6 0'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>")}

/* layout */
.sec{position:relative;overflow:hidden;padding:clamp(64px,10vh,128px) var(--gutter)}
section[id],.card[id]{scroll-margin-top:96px}
.wrap{max-width:var(--max);margin:0 auto;position:relative}
.head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:clamp(28px,4vh,44px)}
.head .n{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;opacity:.5}
.grid-2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:center}
.grid-2>*{min-width:0}
.grid-2.lead{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
.grid-2.trail{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
.stack{display:flex;flex-direction:column;gap:22px}
.rows{display:flex;flex-direction:column}
.rows>*{padding:12px 0;border-top:1px solid var(--rule);font-size:18px}
.plate .rows>*,.plate-2 .rows>*{border-top-color:var(--plate-rule);color:var(--plate-muted)}

/* controls */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:16px 24px;background:var(--accent);color:var(--sheet);font-weight:600;font-size:16px;letter-spacing:-.01em;border-radius:var(--r-md);box-shadow:var(--shadow-xs);min-height:48px;transition:background-color var(--dur-fast) var(--ease-std),opacity var(--dur-fast) var(--ease-std)}
.btn:hover{background:var(--accent-hover)}
.btn.ghost{background:transparent;color:inherit;border:1px solid rgba(255,255,255,.28);box-shadow:none}
.btn.ghost:hover{background:rgba(255,255,255,.06)}
.btn.sm{padding:12px 18px;font-size:14px}
.arrow-link{display:inline-flex;align-items:center;gap:12px;font-weight:700;font-size:15px;color:var(--accent);min-height:44px}
.arrow-link .ring{width:36px;height:36px;border:1px solid var(--accent);border-radius:50%;display:inline-flex;align-items:center;justify-content:center;transition:background .2s,color .2s}
.arrow-link:hover .ring{background:var(--accent);color:var(--sheet)}
/* minimal secondary link: text + a rule, no ring — matches .pl-go on /enterprise/'s walkthrough */
/* ink + a visible rule at rest so it reads apart from a muted paragraph, not just an underline in the same grey */
.go-link{display:inline-flex;align-items:center;gap:6px;border-bottom:1.5px solid var(--ink);padding-bottom:2px;font-size:15px;font-weight:700;color:var(--ink);transition:border-color var(--dur-fast) var(--ease-std),color var(--dur-fast) var(--ease-std),gap var(--dur-fast) var(--ease-snap)}
.go-link:hover,.go-link:focus-visible{border-color:var(--accent);color:var(--accent);gap:10px}
.go-link:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.field{width:100%;height:48px;background:rgba(255,255,255,.08);border:1px solid transparent;border-radius:var(--r-md);padding:0 14px;color:var(--plate-ink);font:inherit;font-size:16px}
.field::placeholder{color:var(--plate-muted)}
.field:focus{border-color:var(--accent)} .field.missing{border-color:var(--accent);background:rgba(240,74,60,.12)}
.field:focus-visible,.btn:focus-visible,.arrow-link:focus-visible,.tile:focus-visible,.close:focus-visible,.nav-links>*:focus-visible{outline:2px solid var(--accent);outline-offset:2px}


/* one panelist, one Tuesday: the day thread inside the What-Kartel-is hub */
.ktl-day{position:relative;padding-left:24px;margin-top:clamp(22px,2.6vw,30px)}
.ktl-day::before{content:"";position:absolute;left:5px;top:9px;width:0;height:calc(var(--ktl-draw,0) * (100% - 18px));border-left:2px dotted var(--accent);transition:height .5s linear}
/* auto-roll: a fixed window the day scrolls through by itself; the spine stays, the rows and their dots move */
.ktl-day.rolling{height:clamp(280px,36vh,340px);overflow:hidden;-webkit-mask-image:linear-gradient(to bottom,transparent 0,var(--black) 5%,var(--black) 82%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,var(--black) 5%,var(--black) 82%,transparent 100%)}
.ktl-day.rolling{padding-left:0}
.ktl-day.rolling::before{top:0;height:100%}
/* the window is a real scroller: a thumb scrolls it on touch; on desktop the wheel passes through to the page and the mouse drags it */
.ktl-scroll{height:100%;overflow-y:auto;overflow-x:hidden;scrollbar-width:none;touch-action:pan-y;overscroll-behavior:contain}
.ktl-scroll::-webkit-scrollbar{display:none}
@media (hover:hover){.ktl-scroll{overflow-y:hidden;cursor:grab;user-select:none} .ktl-scroll.dragging{cursor:grabbing}}
.ktl-roll{display:flex;flex-direction:column;padding-left:24px}
.ktl-roll .ktl-ev{border-top:1px solid var(--rule-fine)}
.ktl-ev{position:relative;display:flex;align-items:baseline;gap:14px;padding:10px 0;opacity:0;transform:translateY(12px);transition:opacity .45s ease,transform .45s cubic-bezier(.2,.8,.2,1)}
.ktl-ev.is-in{opacity:1;transform:none}
.ktl-ev + .ktl-ev{border-top:1px solid var(--rule-fine)}
.ktl-ev::before{content:"";position:absolute;left:-23px;top:50%;transform:translate(0,-50%) scale(.4);width:8px;height:8px;border-radius:50%;background:var(--accent);opacity:0;transition:opacity .3s ease,transform .35s cubic-bezier(.2,.8,.2,1)}
.ktl-ev.is-in::before{opacity:1;transform:translate(0,-50%) scale(1)}
.ktl-ev .t{flex:0 0 74px;font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;color:var(--accent);font-weight:500}
.ktl-ev .what{flex:1;min-width:0;font-size:clamp(17px,1.3vw,18.5px);font-weight:600;letter-spacing:-.014em;color:var(--ink);text-wrap:pretty}
.ktl-ev .src{flex:0 0 auto;width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;align-self:center;background:var(--white);border:1px solid var(--rule-fine);color:var(--ink)}
.ktl-ev .src svg{width:18px;height:18px;display:block}
html.dark .ktl-ev .src{background:var(--sheet-2)}
.ktl-ev.buy .what{color:var(--accent)}
.ktl-ev.buy .src{color:var(--accent)}
.ktl-ev.buy::before{box-shadow:0 0 0 5px rgba(240,74,60,.15)}

/* nav */
/* the bar is always the dark plate, so its ink is fixed too: /pricing/ and /demo/ set body color to --ink and were inheriting black links */
.nav{position:sticky;top:0;z-index:40;display:flex;justify-content:space-between;align-items:center;padding:18px var(--gutter);color:var(--plate-ink);background:rgba(10,10,10,.6);-webkit-backdrop-filter:blur(22px) saturate(1.4);backdrop-filter:blur(22px) saturate(1.4);border-bottom:1px solid var(--plate-rule)}
.wordmark{font-family:var(--font-display);font-size:24px;letter-spacing:-.01em}
.wordmark i{font-style:normal;color:var(--accent)}
.nav-links{display:flex;gap:clamp(18px,2.4vw,34px);align-items:center;font-size:14px;font-weight:600;letter-spacing:-.01em}
.nav-links>*{min-height:44px;display:inline-flex;align-items:center;white-space:nowrap}
.nav-links .theme-toggle{min-height:36px;height:36px}
.nav-links a:hover,.nav-links button:hover{color:var(--accent)}
/* one bar height everywhere: .nav and the .knav twin measured 82 and 81 */
@media (min-width:1025px){.nav{min-height:82px}}
.nav-links .btn:hover{color:var(--sheet)}
.nav-drop{position:relative}
.nav-drop-btn{display:inline-flex;align-items:center;gap:7px;min-height:44px}
.nav-drop-btn svg{transition:transform .2s}
.nav-drop:hover .nav-drop-btn svg,.nav-drop.open .nav-drop-btn svg{transform:rotate(180deg)}
.nav-drop-menu{position:absolute;top:100%;right:0;min-width:300px;display:none;flex-direction:column;padding:8px;background:var(--plate);border:1px solid var(--plate-rule);border-radius:var(--r-md);box-shadow:0 12px 28px -12px rgba(10,10,10,.5)}
.nav-drop:hover .nav-drop-menu,.nav-drop:focus-within .nav-drop-menu,.nav-drop.open .nav-drop-menu{display:flex}
.nav-drop-menu a{display:flex;flex-direction:column;gap:3px;padding:12px 14px;border-radius:var(--r-md)}
.nav-drop-menu a:hover{background:rgba(255,255,255,.06);color:inherit}
.nav-burger,.nav-right{display:none}
.nav-drop-menu a b{font-size:14px}
.nav-drop-menu a:hover b{color:var(--accent)}
.nav-drop-menu a small{font-size:12px;font-weight:500;color:var(--plate-muted);line-height:1.4}
.nav-drop-menu a[aria-current]{background:rgba(255,255,255,.06)} .nav-drop-menu a[aria-current] b{color:var(--accent)}

/* hero */
/* the hero hugs its content: no viewport-stretch, so the trusted strip sits right under the CTAs */
#hero{display:flex;flex-direction:column;padding:0}
#hero .wrap{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(32px,5vw,72px);align-items:start;padding:clamp(28px,4.5vh,52px) var(--gutter) clamp(32px,5vh,56px);width:100%}
canvas.fieldfx,.field-static,.fieldpaths{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.fieldpaths .flow{animation:flow 6s linear infinite} .fieldpaths .slow{animation-duration:9s} .fieldpaths .slower{animation-duration:12s}
.fieldpaths .pulse{animation:pulse 3s ease-in-out infinite;transform-origin:center;transform-box:fill-box} .fieldpaths .pulse.slow{animation-duration:4s} .fieldpaths .pulse.slower{animation-duration:5s}
@keyframes flow{to{stroke-dashoffset:-140}}
@keyframes pulse{0%,100%{opacity:.35}50%{opacity:1}}
.field-static{display:none;background-image:radial-gradient(rgba(255,255,255,.22) 1.2px,transparent 1.3px);background-size:36px 36px;mask-image:radial-gradient(70% 60% at 70% 30%,var(--black) 30%,transparent 100%)}
.no-webgl canvas.fieldfx{display:none} .no-webgl .field-static{display:block}
.glow{position:absolute;inset:0;background:radial-gradient(60% 50% at 72% 18%,rgba(240,74,60,.28),transparent 70%),radial-gradient(50% 40% at 12% 90%,rgba(255,255,255,.07),transparent 70%);pointer-events:none}
.card{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border-radius:var(--r-md);padding:28px;display:flex;flex-direction:column;gap:12px}
.card .two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.card .one{display:grid;grid-template-columns:1fr;gap:10px}
select.field{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23A9A39A' stroke-width='2'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;cursor:pointer}
select.field:invalid{color:var(--plate-muted)} select.field option[value=""]{color:var(--ghost)}
select.field option{color:var(--ink);background:var(--sheet)}
.acwrap{position:relative}
.aclist{position:absolute;left:0;right:0;top:100%;margin-top:6px;background:var(--sheet);border:1px solid var(--rule);border-radius:var(--r-md);box-shadow:0 10px 24px -8px rgba(10,10,10,.4);z-index:40;overflow:hidden;color:var(--ink)}
.acitem{display:flex;align-items:center;gap:10px;padding:11px 13px;cursor:pointer;font-size:14px}
.acitem:hover{background:rgba(10,10,10,.06)}
.acitem img{width:20px;height:20px;border-radius:var(--r-md);object-fit:contain;background:var(--sheet);flex:0 0 auto}
.acitem .dom{color:var(--ghost);font-size:12px;margin-left:auto}
.trusted{position:relative;z-index:2;display:flex;flex-direction:column;gap:14px;padding:0 var(--gutter) 28px;max-width:var(--max);margin:0 auto;width:100%}
.trusted hr{border:0;border-top:1px solid var(--plate-rule);margin:0}
.logos{display:flex;gap:clamp(28px,3vw,44px);align-items:center;flex-wrap:wrap}
/* the logo scale: three optical heights keyed on the mark's shape, never per-logo pixels.
   wordmark (wider than 3.2:1) 22px · mid (1.9–3.2:1) 26px · mark (squarer than 1.9:1) 30px. One grey. */
.logos img{width:auto;filter:brightness(0) invert(1);opacity:.72;height:var(--logo-h,22px)}
.logos .lg-wordmark{--logo-h:22px} .logos .lg-mid{--logo-h:26px} .logos .lg-mark{--logo-h:30px}
@media (max-width:1024px){.logos .lg-wordmark{--logo-h:18px} .logos .lg-mid{--logo-h:22px} .logos .lg-mark{--logo-h:26px}}
.sheet .logos img{filter:brightness(0)}

/* 02 node frame */
.frame{position:relative;aspect-ratio:16/10;background:var(--plate);border-radius:var(--r-md);overflow:hidden;box-shadow:0 60px 120px -60px rgba(10,10,10,.7)}
.frame video,.frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.45}
.frame .vignette{position:absolute;inset:0;background:radial-gradient(80% 60% at 50% 45%,rgba(10,10,10,0),rgba(10,10,10,.85))}
.frame svg{position:absolute;inset:0;width:100%;height:100%}
.frame .tags{position:absolute;left:20px;bottom:18px;display:flex;gap:8px}
.frame .draw{stroke-dasharray:600;stroke-dashoffset:600;transition:stroke-dashoffset 1.6s ease}
.frame.in .draw{stroke-dashoffset:0}

/* the Why heading is three sentences, each its own line with air between (Emmet, 2026-09-14: "looks too much like a block, needs 3 lines"); one line each from 1025px up */
.why-lines .ln{display:block}
.why-lines .ln+.ln{margin-top:.06em}
@media (min-width:1025px){.why-lines .ln{white-space:nowrap}}
/* under 1024px each sentence wraps to two lines, so the three get air between them and read as three beats (Emmet, 2026-09-14) */
@media (max-width:1024px){.why-lines .ln+.ln{margin-top:.5em}}
/* the entrance (Emmet, 2026-09-14): the heading itself does not fade; its three lines rise in 140ms apart, once, on scroll-in (.in from
   cse.js). All ink: red stays out of sentences ("the red and black candy cane often detracts"). Reduced motion skips the motion */
.why-lines[data-reveal]{opacity:1;transform:none;filter:none;transition:none}
.why-lines .ln{opacity:0;transform:translateY(14px);transition:opacity .6s var(--ease-std),transform .7s var(--ease-snap)}
.why-lines .ln:nth-child(2){transition-delay:.14s}.why-lines .ln:nth-child(3){transition-delay:.28s}
.why-lines.in .ln{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.why-lines .ln{opacity:1;transform:none;transition:none}}

/* 02 flow strip */
.frame video,.frame img{opacity:1}
.flowstrip{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;padding-top:18px}
.fs-line{position:absolute;left:0;right:0;top:0;height:2px;background:var(--rule-fine)}
.fs-fill{display:block;height:100%;width:0;background:var(--accent);transition:width 1.6s var(--ease-snap)}
.flowstrip.in .fs-fill{width:100%}
.fs-node{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--muted)}
.fs-node b{font-weight:600;color:var(--ink)} .fs-node.hot b{color:var(--accent)}

/* 06 the edge */
.edge{display:flex;flex-direction:column;gap:18px;border-top:2px solid rgba(255,255,255,.22);border-bottom:2px solid rgba(255,255,255,.22);padding:clamp(22px,3vw,40px) 0}
.edge-row{display:flex;flex-wrap:wrap;align-items:baseline;gap:clamp(10px,1.4vw,22px);font-family:var(--font-display);font-size:clamp(26px,3.6vw,56px);line-height:1}
.edge-row .o{font-family:var(--font-body);font-weight:400;font-size:.6em;color:var(--plate-ghost)}
.edge-row.was{color:var(--plate-muted)} .edge-row.was .r{color:var(--plate-ghost)}
.edge-row.win{color:var(--accent)} .edge-row.win .o{color:var(--accent)} .edge-row.win .r{color:var(--plate-ink)}

/* 08 six functions */
.fns{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule)}
.fn{background:var(--sheet-2);padding:26px 24px;display:flex;flex-direction:column;gap:10px;min-height:170px}
.fn b{font-size:17px;letter-spacing:-.01em}

/* 06 three phases */
.phases{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,40px)}
.phase{display:flex;flex-direction:column;border-top:2px solid var(--ink);padding-top:16px}
.phase.hot{border-top-color:var(--accent)} .phase.hot .ph-h .anton{color:var(--accent)}
.ph-h{display:flex;justify-content:space-between;align-items:baseline} .ph-h .anton{font-size:clamp(32px,3vw,44px)}
.ph-sub{font-size:18px;margin:4px 0 14px}
.ph-fn{padding:16px 0;border-top:1px solid var(--rule-fine);display:flex;flex-direction:column;gap:5px}
.ph-fn-h{display:flex;gap:12px;align-items:baseline} .ph-fn-h b{font-size:16px;letter-spacing:-.01em}
.ph-fn .muted{font-size:18px;line-height:1.45;padding-left:30px}
.ph-band{display:flex;justify-content:space-between;align-items:center;gap:24px;background:var(--plate);color:var(--plate-ink);border-radius:var(--r-md);padding:22px 28px;flex-wrap:wrap}
.ph-band .anton{font-size:clamp(22px,2.4vw,34px)}
.ledger .lrow:nth-child(8){transition-delay:1s}.ledger .lrow:nth-child(9){transition-delay:1.15s}.ledger .lrow:nth-child(10){transition-delay:1.3s}

/* stack catalog */
.ptabs{display:flex;gap:4px;flex-wrap:wrap;border-bottom:1px solid var(--plate-rule)}
.ptabs [role="tab"]{font-size:14px;font-weight:600;letter-spacing:-.01em;padding:10px 14px;min-height:44px;color:var(--plate-muted);border-bottom:2px solid transparent;margin-bottom:-1px}
.ptabs [role="tab"]:hover{color:var(--plate-ink)}
.ptabs [role="tab"][aria-selected="true"]{color:var(--plate-ink);border-bottom-color:var(--accent)}
.pgroup{display:flex;flex-direction:column;gap:14px}
.pgroup[hidden]{display:none}
.pgroup-h{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap} .pgroup-h b{font-size:17px}
.ptiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.ptile{display:flex;flex-direction:column;gap:6px;text-align:left;color:var(--plate-ink)}
.ptile video{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:var(--r-md);background:var(--plate-2);border:1px solid var(--plate-rule)}
@media (hover:hover){.ptile:hover video{border-color:var(--accent)}}
.ptile b{font-size:14.5px} .ptile small{font-size:13px;color:var(--plate-ghost);line-height:1.35}

/* 03 equation */
.eq{display:grid;grid-template-columns:1fr 60px 1fr 60px 1.25fr;align-items:center}
.eq .op{font-family:var(--font-display);text-align:center;font-size:48px;color:var(--ghost)}
.eq .term{padding:34px 30px;min-height:190px;display:flex;flex-direction:column;justify-content:space-between;gap:12px;border-radius:var(--r-md)}
.eq .term.dark{background:var(--plate);color:var(--plate-ink)} .eq .term.dark .muted{color:var(--plate-muted)} .eq .term.light{background:var(--sheet);border:1.5px solid var(--ink)}
.eq .term .t{font-family:var(--font-display);font-size:clamp(28px,2.8vw,40px);line-height:1}
.eq .res{padding:10px 0;font-family:var(--font-display);font-size:clamp(36px,4vw,58px);line-height:.96;color:var(--accent)}

/* 04 punch: the closer quote, moved up to where the ticker band was */
#punch{min-height:560px;display:flex;flex-direction:column;padding:0}

/* 05 panels */
#record{padding:0;display:grid;grid-template-columns:1fr 1fr;background:var(--plate)}
#record .half{position:relative;padding:clamp(56px,9vh,84px) var(--gutter);display:flex;flex-direction:column;gap:22px;overflow:hidden;min-height:720px}
#record .half>:not(.fieldfx):not(.field-static):not(.fieldpaths){position:relative}
#record .rows{margin-top:auto}
#record .half .eyebrow{font-size:clamp(14px,1.4vw,20px);letter-spacing:.22em}

/* 06 equal */
.commods{display:flex;gap:12px;flex-wrap:wrap}
.commods span{border:1px solid rgba(255,255,255,.22);padding:9px 16px;font-size:14px;font-weight:700;text-decoration:line-through;text-decoration-thickness:1.5px;color:var(--plate-ghost)}
.eqlines{border-top:2px solid rgba(255,255,255,.22);border-bottom:2px solid rgba(255,255,255,.22);padding:26px 0;display:flex;flex-direction:column;gap:14px;font-size:clamp(18px,2.1vw,30px);font-weight:700;letter-spacing:-.02em}
.eqlines div{display:flex;gap:16px;flex-wrap:wrap;align-items:baseline}
.eqlines .o{opacity:.5;font-weight:400} .eqlines .r{opacity:.6;font-weight:400}
.eqlines .win{color:var(--accent)} .eqlines .win .o,.eqlines .win .r{opacity:1;font-weight:700}

/* 07 backbone */
.spine{display:flex;align-items:center;gap:14px;font-size:14px;font-weight:600;color:var(--muted);flex-wrap:wrap}
.spine span{opacity:0;transform:translateY(6px);transition:opacity .5s ease,transform .5s ease}
.spine.in span{opacity:1;transform:none}
.spine span:first-child{color:var(--accent)}
.bb-cards{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.bb-card{border:1px solid var(--rule);border-radius:var(--r-md);padding:22px;display:flex;flex-direction:column;gap:12px;min-height:200px;position:relative;overflow:hidden}
.bb-card .top{display:flex;justify-content:space-between}
.bb-card .row{border-top:1px solid var(--rule-fine);padding-top:8px}
.bb-card .row b{display:block;font-size:14px;font-weight:600}
.bb-card .row small{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;color:var(--ghost)}
.bb-card .row .lab{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;color:var(--accent)}
.bb-card .fade{position:absolute;left:0;right:0;bottom:0;height:60px;background:linear-gradient(180deg,rgba(255,255,255,0),var(--sheet))}
.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.tile{display:flex;flex-direction:column;gap:10px;text-align:left}
.tile .media{position:relative;aspect-ratio:16/9;background:var(--plate-2);border-radius:var(--r-md);overflow:hidden}
.tile .media img,.tile .media video{width:100%;height:100%;object-fit:cover}
.minutes{text-align:right;font-family:var(--font-display);font-size:clamp(30px,3.2vw,44px);color:var(--accent)}

/* 02 the source */
/* What-Kartel-is hub and spoke: the record on the left, three outputs branching off a spine */
.kwk-hub{display:grid;grid-template-columns:minmax(0,1fr) 84px minmax(0,1fr);align-items:stretch}
.kwk-src{padding-right:clamp(8px,1vw,16px)}
.kwk-n{display:flex;align-items:baseline;gap:12px;font-family:var(--font-mono);font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--ghost)}
.kwk-n b{color:var(--accent);font-weight:600}
.kwk-p{margin:14px 0 0;font-size:clamp(18px,1.4vw,20px);line-height:1.55;color:var(--muted);max-width:44ch;text-wrap:pretty}
.kwk-spine{position:relative}
.kwk-spine::before{content:"";position:absolute;left:50%;top:var(--spine-top,0px);width:2px;height:calc(var(--spine-draw,0) * var(--spine-h,0px));background:var(--accent);transition:height .7s ease}
.kwk-spine::after{content:"";position:absolute;right:50%;top:var(--spine-top,0px);width:calc(50% + clamp(8px,1vw,16px));height:0;border-top:2px dotted var(--accent);opacity:var(--tap,0);transition:opacity .4s ease}
.kwk-outs{display:flex;flex-direction:column;justify-content:center;gap:clamp(22px,3vw,40px);padding-left:clamp(8px,1vw,16px)}
.kwk-out{position:relative;padding:clamp(18px,2.2vw,28px) 0;border-top:1px solid var(--rule-fine);opacity:0;transform:translateX(10px);transition:opacity .5s ease,transform .5s cubic-bezier(.2,.8,.2,1)}
.kwk-out:first-child{border-top:0;padding-top:0}
.kwk-out.is-in{opacity:1;transform:none}
.kwk-out::before{content:"";position:absolute;right:100%;top:var(--y,50%);width:calc(42px + clamp(8px,1vw,16px));height:0;border-top:2px dotted var(--accent);transform:translateY(-1px);opacity:0;transition:opacity .4s ease .15s}
.kwk-out::after{content:"";position:absolute;left:calc(-42px - clamp(8px,1vw,16px) - 6px);top:var(--y,50%);width:12px;height:12px;border-radius:50%;background:var(--sheet);border:2px solid var(--accent);transform:translateY(-50%) scale(.4);opacity:0;transition:opacity .3s ease .15s,transform .35s cubic-bezier(.2,.8,.2,1) .15s}
.kwk-out.is-in::before{opacity:1}
.kwk-out.is-in::after{opacity:1;transform:translateY(-50%) scale(1)}
.kwk-out.last::after{background:var(--accent)}
.kwk-out.last .anton{color:var(--accent)}
.kwk-out p{margin:10px 0 0;font-size:18px;line-height:1.55;color:var(--muted);max-width:42ch;text-wrap:pretty}
/* the engine film (Rogo Felix reference, Emmet 2026-09-14): the recording fills a 16:9 field flush with the section, no shadow, no edge; the
   file itself is whitened to the sheet-2 ground so the frame has nothing to hide */
.frame.wide{aspect-ratio:16/9;margin-top:8px;border-radius:6px;box-shadow:none;background:var(--sheet-2)}

/* 07 the clock */
.process.clock{padding-left:0;gap:clamp(28px,4vh,44px)}
.process.clock .rail{position:relative;left:auto;top:auto;bottom:auto;width:100%;height:8px;border-radius:var(--r-md);overflow:hidden}
.process.clock .rail-fill{height:100%;width:var(--rail,0%);transition:width .8s var(--ease-snap)}
.clock-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2vw,28px);align-items:start}
.process.clock .step{grid-template-columns:1fr;gap:14px;border-top:2px solid var(--ink);padding-top:14px}
.process.clock .step::before{display:none}
.process.clock .step-n .anton{font-size:clamp(32px,3vw,44px)} .process.clock .step-n b{font-size:20px} .process.clock .step-n .muted{font-size:18px}
.process.clock .roll-wrap{max-height:300px}
.process.clock .step.final{grid-template-columns:minmax(0,.35fr) minmax(0,1.65fr);gap:clamp(20px,3vw,40px);border-top-color:var(--accent);align-items:start}
.process.clock .step.final .minutes{display:none}

/* 07 process */
.process{position:relative;display:flex;flex-direction:column;gap:clamp(40px,5vh,64px);padding-left:clamp(56px,6vw,96px)}
.rail{position:absolute;left:clamp(18px,2vw,30px);top:0;bottom:0;width:2px;background:var(--rule-fine)}
.rail-fill{display:block;width:100%;height:var(--rail,0%);background:var(--accent);transition:height .6s ease}
.insight-card{margin:18px 0 0;background:var(--sheet-2);border:1px solid var(--rule-fine);border-radius:var(--r-md);padding:clamp(20px,2.4vw,30px) clamp(22px,2.6vw,34px)}
.insight-card blockquote{margin:10px 0 0;font-size:clamp(19px,1.9vw,27px);font-weight:600;letter-spacing:-.02em;line-height:1.35;color:var(--ink);text-wrap:pretty}
.insight-card blockquote b{color:var(--accent)}
.insight-card mark{background:linear-gradient(var(--mark),var(--mark)) no-repeat 0 60%/0% 45%;color:inherit;padding:0 .1em;margin:0 -.1em;border-radius:3px;transition:background-size .7s cubic-bezier(.2,.8,.2,1)}
.insight-card.in mark{background-size:100% 45%}
.insight-card.in mark:nth-of-type(1){transition-delay:.25s}
.insight-card.in mark:nth-of-type(2){transition-delay:.8s}
.insight-card.in mark:nth-of-type(3){transition-delay:1.2s}
.step{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:clamp(24px,4vw,56px);align-items:start;position:relative}
.step::before{content:"";position:absolute;left:calc(-1 * clamp(56px,6vw,96px) + clamp(18px,2vw,30px) - 5px);top:14px;width:12px;height:12px;border-radius:50%;background:var(--sheet);border:2px solid var(--rule)}
.step.in::before{background:var(--accent);border-color:var(--accent)}
.step-n{display:flex;flex-direction:column;gap:8px} .step-n .anton{font-size:clamp(40px,4vw,64px);color:var(--accent);line-height:1} .step-n b{font-size:20px;letter-spacing:-.01em} .step-n .muted{font-size:18px;line-height:1.45;max-width:36ch}
.step.final{grid-template-columns:1fr} .step.final .hero-tile .media{aspect-ratio:16/9} .step.final .minutes{margin-top:12px}
.cyc{display:flex;flex-direction:column;gap:12px} .cyc[hidden]{display:none} .cyc-t{font-weight:700;font-size:15px}
.roll-wrap{max-height:420px;overflow:hidden} .roll{display:flex;flex-direction:column;gap:12px;transition:transform .6s var(--ease-snap)}
.bb-card.roll-wrap .fade{height:90px}

/* the brief turns its own pages: the real deck in an iframe, driven by postMessage */
.deckreel{position:absolute;left:0;top:0;width:1200px;height:675px;transform-origin:0 0;border:0;pointer-events:none;opacity:0;transition:opacity .6s ease;background:var(--plate-2)}
.deckreel.on{opacity:1}

/* 09 the ledger: six bills add up, one fee replaces them */
.ledger{background:var(--plate-2);border:1px solid var(--plate-rule);border-radius:var(--r-md);padding:clamp(20px,2.4vw,32px);display:flex;flex-direction:column;gap:0;font-variant-numeric:tabular-nums}
.ledger .lrow{display:grid;grid-template-columns:28px 1fr auto;gap:14px;align-items:baseline;padding:13px 0;border-top:1px solid var(--plate-rule);opacity:0;transform:translateY(8px);transition:opacity .5s ease,transform .5s ease}
.ledger.in .lrow{opacity:1;transform:none}
.ledger .lrow:nth-child(2){transition-delay:.1s}.ledger .lrow:nth-child(3){transition-delay:.25s}.ledger .lrow:nth-child(4){transition-delay:.4s}.ledger .lrow:nth-child(5){transition-delay:.55s}.ledger .lrow:nth-child(6){transition-delay:.7s}.ledger .lrow:nth-child(7){transition-delay:.85s}
.ledger .lrow .num{color:var(--plate-ghost)} .ledger .lrow b{font-weight:600;font-size:15px;color:var(--plate-ink)} .ledger .lrow .amt{font-family:var(--font-mono);font-size:14px;color:var(--plate-muted);white-space:nowrap}
.ledger .ltotal{display:grid;grid-template-columns:1fr auto;gap:14px;align-items:baseline;padding:18px 0 6px;border-top:2px solid var(--plate-ink);margin-top:4px}
.ledger .ltotal .lab{font-family:var(--font-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--plate-muted)}
.ledger .ltotal .big{font-family:var(--font-display);font-size:clamp(26px,2.6vw,40px);line-height:1;color:var(--plate-ink)}
.ledger .lkartel{display:grid;grid-template-columns:1fr auto;gap:14px;align-items:baseline;padding:16px 18px;margin-top:16px;background:var(--accent);border-radius:var(--r-md);color:var(--ink)}
.ledger .lkartel .lab{font-family:var(--font-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:700} .ledger .lkartel .sub{font-size:13px;margin-top:4px;opacity:.85}
.ledger .lkartel .big{font-family:var(--font-display);font-size:clamp(30px,3.2vw,48px);line-height:1}
.ledger .lkeep{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:16px 0 0;font-size:14px;color:var(--plate-muted)} .ledger .lkeep b{font-family:var(--font-display);font-size:clamp(22px,2.2vw,32px);color:var(--accent);line-height:1}
@media (max-width:1024px){.ledger .lrow{grid-template-columns:22px 1fr;gap:8px} .ledger .lrow .amt{grid-column:2}}

/* 08 lanes, 09 contract */
.checks{display:flex;flex-direction:column}
.checks div{display:flex;align-items:center;gap:14px;padding:11px 0;border-top:1px solid var(--rule);font-size:15px;font-weight:600}
.checks .box{width:20px;height:20px;border:1.5px solid var(--accent);border-radius:3px;display:inline-flex;align-items:center;justify-content:center;color:var(--accent);flex:0 0 auto}
.checks s{text-decoration-color:var(--accent);color:var(--muted)}
table{border-collapse:collapse;width:100%;font-size:16px}
th{text-align:left;font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ghost);font-weight:500;padding:0 12px 10px 0;border-bottom:1.5px solid var(--ink);white-space:nowrap}
td{padding:14px 12px 14px 0;border-bottom:1px solid var(--rule-fine);color:var(--muted);vertical-align:top}
td.nm{font-weight:700;color:var(--ink);white-space:nowrap}
.tw{overflow-x:auto;-webkit-overflow-scrolling:touch}
.bars{display:flex;flex-direction:column;gap:12px}
.bar{display:grid;grid-template-columns:minmax(120px,200px) 1fr 84px;gap:16px;align-items:center;font-size:13.5px;color:var(--plate-muted)}
.bar .track{height:16px;background:rgba(255,255,255,.1)}
.bar .fill{display:block;height:100%;width:0;background:var(--plate-ghost);transition:width 1.2s var(--ease-snap)}
.bars.in .fill{width:var(--w)}
.bar.me{color:var(--accent);font-weight:700} .bar.me .fill{background:var(--accent)}
.bar .v{font-family:var(--font-mono);font-size:12px;text-align:right}
.note{font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;color:var(--plate-ghost);line-height:1.5}

/* 10 words, 11 compress */
.quotes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule)}
@media (min-width:1025px) and (max-width:1100px){.quotes{grid-template-columns:1fr} .quote{min-height:0}}
.quote{background:var(--sheet);padding:30px 28px;display:flex;flex-direction:column;gap:22px;min-height:280px}
.quote img{height:26px;width:auto;align-self:flex-start;filter:brightness(0)}
.quote p{margin:0;font-size:17px;line-height:1.45;font-weight:500;letter-spacing:-.01em;}
.quote small{margin-top:auto;font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;color:var(--ghost)}
.press{display:flex;gap:36px;align-items:center;border-top:1px solid var(--rule-fine);padding-top:22px;flex-wrap:wrap}
.press a{font-family:var(--font-display);font-size:20px;color:var(--muted)}
.press a:hover{color:var(--accent)}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.stat{padding:10px 40px;border-left:1px solid var(--rule);display:flex;flex-direction:column;gap:8px}
.stat:first-child{padding-left:0;border-left:0}
.stat .big{font-family:var(--font-display);font-optical-sizing:auto;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.04em;font-size:clamp(56px,7vw,96px);line-height:1;color:var(--accent)}
.stat .d{font-weight:600;font-size:clamp(20px,1.8vw,26px);letter-spacing:-.01em;font-variant-numeric:tabular-nums;color:var(--ink)}
.stat .s{font-size:18px;color:var(--muted)}

/* 12 book it */
#reelLine{font-size:clamp(36px,5.6vw,84px)}
.bookit-card{display:grid;grid-template-columns:1fr 1fr;gap:14px 24px;max-width:520px}
.bookit-card .bi-field{box-sizing:border-box;width:100%;background:transparent;border:0;border-bottom:1px solid var(--rule);border-radius:0;padding:12px 2px;font:inherit;font-size:18px;color:var(--ink)}
.bookit-card .bi-field::placeholder{color:var(--ghost)}
.bookit-card .bi-field:focus{border-bottom-color:var(--accent);outline:none}
.bookit-card .btn{grid-column:1/-1;justify-self:start;margin-top:6px}
@media (max-width:560px){.bookit-card{grid-template-columns:1fr}}
.reel{color:var(--accent);display:inline-block;min-width:1ch;white-space:nowrap;transition:opacity .35s ease,transform .35s ease}
#reelY::after{content:".";color:var(--ink)}
.reel.out{opacity:0;transform:translateY(.25em)}
.cal-card{background:var(--sheet);border:1px solid var(--rule-fine);border-radius:var(--r-md);overflow:hidden;box-shadow:0 40px 40px -30px rgba(10,10,10,.5);min-height:680px}
.cal-card iframe{width:100%;height:680px;border:0;display:block}

/* 13 closer + footer */
#closer{display:flex;flex-direction:column;padding:0}
#punch .mid{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;text-align:center;padding:60px var(--gutter)}
#punch blockquote{font-family:var(--font-display);font-optical-sizing:auto;font-weight:700;letter-spacing:-.04em;font-size:clamp(48px,7.5vw,112px);line-height:1;margin:0}
#punch blockquote i{font-style:normal;color:var(--accent)}
.foot{position:relative;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:24px var(--gutter);border-top:1px solid var(--plate-rule);font-size:13px;color:var(--plate-ghost);flex-wrap:wrap}
.foot nav{display:flex;gap:26px;flex-wrap:wrap}
.foot a:hover,.foot button:hover{color:var(--sheet)}
@media (max-width:1024px){
  /* a 20px-tall link is not a tap target */
  .foot{font-size:14px}
  .foot nav{gap:0 20px}
  .foot nav a,.foot nav button{display:inline-flex;align-items:center;min-height:44px}
}

/* ---- the site footer: one footer on every static page (Emmet, 2026-09-14: "why do you only have the footer on Platform
   and not Creative Strategy or any other part of the site"). Literal colours, no tokens, so the same block drops into the
   pages that do not load cse.css (/data/, /enterprise/). Always the dark plate, whatever the page above it. ---- */
.sfoot{background:var(--plate);color:var(--plate-ink);border-top:1px solid var(--plate-rule);padding:clamp(40px,6vh,64px) var(--gutter) 0}
.sfoot-in{max-width:1200px;margin:0 auto;display:flex;flex-direction:column;gap:clamp(26px,3.4vw,36px);padding-bottom:30px;border-bottom:1px solid var(--plate-rule)}
.sfoot-brand{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.sfoot-brand>img{height:18px;width:auto;display:block}
.sfoot-soc{display:flex;align-items:center;gap:14px}
.sfoot-soc a{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;color:var(--plate-ghost);transition:color .15s ease}
.sfoot-soc a:hover{color:var(--plate-ink)}
.sfoot-soc svg{width:18px;height:18px;display:block}
.sfoot-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 32px}
@media(min-width:768px){.sfoot-cols{grid-template-columns:repeat(3,minmax(0,1fr))}}
.sfoot-col{display:flex;flex-direction:column;gap:2px}
.sfoot-col b{font-size:14px;font-weight:600;color:var(--plate-ink);margin-bottom:6px}
.sfoot-col a{font-size:14px;font-weight:500;color:var(--plate-muted);text-decoration:none;display:inline-flex;align-items:center;min-height:30px;transition:color .15s ease}
.sfoot-col a:hover{color:var(--plate-ink)}
.sfoot-legal{max-width:1200px;margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;padding:16px 0 30px;font-size:13px;color:var(--plate-ghost)}
.sfoot-legal a,.sfoot-legal button{color:var(--plate-ghost);font:inherit;background:none;border:0;padding:0;cursor:pointer;text-decoration:none;transition:color .15s ease}
.sfoot-legal a:hover,.sfoot-legal button:hover{color:var(--plate-ink)}
.sfoot-legal .sep{opacity:.45}
.sfoot-legal .ml{margin-left:auto;display:flex;align-items:center;gap:6px 14px;flex-wrap:wrap}
@media(max-width:1024px){
  .sfoot-col a{min-height:40px}
  .sfoot-legal{gap:10px 16px;padding-bottom:26px}
  .sfoot-legal .ml{margin-left:0;width:100%}
}

/* dialogs */
dialog{border:0;padding:0;background:transparent;max-width:min(1100px,calc(100vw - 32px));width:100%;margin:auto}
dialog::backdrop{background:rgba(10,10,10,.86);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.dlg{border-radius:var(--r-md);padding:clamp(24px,4vw,56px);display:flex;flex-direction:column;gap:26px;max-height:calc(100svh - 32px);overflow:auto}
.dlg.sheet{background:var(--sheet);color:var(--ink)} .dlg.plate{background:var(--plate);color:var(--plate-ink);border:1px solid var(--plate-rule)}
.dlg .bar-top{display:flex;justify-content:space-between;align-items:center}
.dlg .close{font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;min-height:44px;padding:0 8px}
.dlg .close:hover{color:var(--accent)}
.card .close{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;color:var(--plate-muted);padding:0 4px;flex:0 0 auto}
.card .close:hover{color:var(--accent)}
.statgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule)}
.statgrid div{background:var(--sheet);padding:20px 22px}
.statgrid .big{font-family:var(--font-display);font-size:46px;color:var(--accent);line-height:1}
.statgrid small{display:block;font-size:13px;color:var(--muted);margin-top:4px}
.panelbars{display:flex;flex-direction:column;gap:7px}
.panelbars .bar{grid-template-columns:150px 1fr 48px;gap:10px;font-size:12.5px;color:var(--muted)}
.panelbars .bar .track{height:12px;background:var(--rule-fine)} .panelbars .bar .fill{background:var(--ghost)} .panelbars .bar.me .fill{background:var(--accent)}
.cmp td,.cmp th{text-align:center;padding:10px 6px 10px 0;font-size:12.5px} .cmp td:first-child,.cmp th:first-child{text-align:left;font-weight:700;color:var(--ink)}
.cmp td.k{color:var(--accent);font-weight:700;background:var(--accent-soft)}
.stackgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--plate-rule);border:1px solid var(--plate-rule)}
.stackgrid div{background:var(--plate);padding:18px 20px;display:flex;flex-direction:column;gap:8px;min-height:104px;font-size:14px;line-height:1.4;color:var(--plate-muted)}
.pcols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;align-items:stretch}
.pcols.two{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;max-width:880px}
.pcol{display:flex;flex-direction:column;gap:10px;padding:22px 20px;border:1px solid var(--rule-fine);border-radius:var(--r-md);background:var(--sheet);transition:border-color var(--dur-fast) var(--ease-std)}
.pcol{cursor:pointer}
.pcol:hover{border-color:var(--accent)}
.pcol.on{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.pcol[role="radio"]:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.pricing-cta[disabled]{background:var(--rule);color:var(--ghost);box-shadow:none;cursor:not-allowed}
.pricing-cta[disabled]:hover{background:var(--rule)}
.pcol-name{font-size:16px;letter-spacing:-.01em;min-height:2.4em}
.pcol-cta{margin-top:auto;align-self:stretch;justify-content:center}
.pcol-price{display:flex;align-items:baseline;gap:8px;border-bottom:1px solid var(--rule-fine);padding-bottom:12px}
.pcol-price .anton{font-size:clamp(26px,2.6vw,36px);line-height:1}
.pcol-price em{font-style:normal;font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;color:var(--ghost);text-transform:uppercase}
.pcol-tag{font-size:15px;letter-spacing:-.01em}
.pcol p{margin:0;font-size:15px;line-height:1.5;color:var(--muted)}
.film{aspect-ratio:16/9;background:var(--black);border-radius:var(--r-md);overflow:hidden} .film video{width:100%;height:100%;object-fit:contain}

/* reveal */
/* arrival: a short rise out of a blur, siblings 70ms apart via --rv (set by cse.js) */
[data-reveal]{opacity:0;transform:translateY(16px);filter:blur(6px);will-change:opacity,transform,filter;transition:opacity var(--dur-slow) var(--ease-std) var(--rv,0s),transform .6s var(--ease-snap) var(--rv,0s),filter var(--dur-slow) var(--ease-std) var(--rv,0s)}
[data-reveal].in{opacity:1;transform:none;filter:none;will-change:auto}

/* consent */
#consent-banner{position:fixed;left:0;right:0;bottom:0;z-index:9998;background:var(--plate-2);color:var(--sheet);display:none;justify-content:space-between;align-items:center;gap:20px;padding:16px var(--gutter);font-size:14px;border-top:1px solid var(--plate-rule);flex-wrap:wrap}
#consent-banner .acts{display:flex;gap:10px}

/* responsive */
@media (max-width:1100px){
  #hero .wrap,.grid-2,.grid-2.lead,.grid-2.trail{grid-template-columns:1fr}
  .eq{grid-template-columns:1fr} .eq .op{text-align:left;font-size:36px}
  #record{grid-template-columns:1fr} #record .half{min-height:0}
  .quotes,.stackgrid,.statgrid,.ptiles,.clock-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fns{grid-template-columns:repeat(2,minmax(0,1fr))} .phases{grid-template-columns:1fr}
}
@media (max-width:1024px){
  /* hamburger + drawer, the same pattern as .knav on /enterprise/ and /enterprise/book/ */
  .nav{padding:10px 16px;flex-wrap:wrap}
  .wordmark img{height:14px!important}
  .nav-right{display:flex;align-items:center;gap:6px;margin-left:auto}
  .nav-right .btn.sm{padding:0 14px;min-height:40px;font-size:14px}
  .nav-burger{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;background:none;border:0;padding:0;color:var(--plate-ink);cursor:pointer}
  .nav-burger svg{display:block} .nav-burger .x{display:none}
  .nav.open .nav-burger .x{display:block} .nav.open .nav-burger .h{display:none}
  .nav-links{display:none;flex-basis:100%;flex-direction:column;align-items:stretch;gap:0;padding:4px 0 10px;font-size:17px;border-top:1px solid var(--plate-rule);margin-top:10px}
  .nav.open .nav-links{display:flex}
  .nav-links>*{min-height:52px;white-space:normal;justify-content:flex-start;text-align:left}
  .nav-links>a,.nav-links>button{padding:0 4px;border-bottom:1px solid rgba(255,255,255,.08)}
  /* no theme control on phones (Emmet, 2026-09-14: "remove the dark light mode toggle on mobile") */
  .nav-links>.theme-toggle{display:none}
  /* the drawer is the only place Book a demo can live on a phone: .nav-right's copy is hidden
     at this width, so hiding it here too left no way to book */
  .nav-links>.btn.sm{justify-content:center;margin-top:12px;border-bottom:0;min-height:52px;font-size:17px}
  /* Products becomes an accordion: display:block overrides the .nav-links>* inline-flex row so the
     menu drops full-width below the button instead of sitting beside it (was floating top-right) */
  .nav-drop{position:static;display:block}
  .nav-drop-btn{width:100%;justify-content:space-between;min-height:52px;padding:0 4px;font-size:17px;border-bottom:1px solid rgba(255,255,255,.08)}
  .nav-drop-menu{position:static;display:none;min-width:0;border:0;background:transparent;padding:2px 0 6px 20px;box-shadow:none}
  .nav-drop:hover .nav-drop-menu{display:none}
  .nav-drop.open .nav-drop-menu{display:flex}
  .card .two,.bb-cards,.tiles,.quotes,.stackgrid,.statgrid,.fns,.step,.process.clock .step.final{grid-template-columns:1fr}
  .kwk-hub{grid-template-columns:1fr} .kwk-spine{display:none} .kwk-src{padding-right:0}
  .kwk-outs{margin-top:34px;padding-left:0} .kwk-out::before,.kwk-out::after{display:none}
  .kwk-out:first-child{border-top:1px solid var(--rule-fine);padding-top:clamp(18px,2.2vw,28px)}
  .clock-steps{grid-template-columns:1fr} .frame.wide{aspect-ratio:16/9}
  .flowstrip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stats{grid-template-columns:1fr} .stat{padding:18px 0;border-left:0;border-top:1px solid var(--rule)} .stat:first-child{border-top:0}
  .bar{grid-template-columns:minmax(96px,1.1fr) 1.5fr 56px}
  .pcols{grid-template-columns:1fr} .pcol-name{min-height:0}
  .cal-card iframe,.cal-card{min-height:0;height:1024px}
  .foot{justify-content:center;text-align:center}
  /* mobile rails/panes (mobile.css): cards carry their own edge once the grid seams are gone */
  .kwk-out{padding:20px;border:1px solid var(--rule-fine);border-radius:var(--r-md);background:var(--sheet-2)}
  .quotes{background:none;border:0} .quote{border:1px solid var(--rule);border-radius:var(--r-md)}
  #record .half{padding-top:30px}
  /* phones keep the brief still (cse.js never arms the reel under 1024px); the empty iframe would still swallow the swipe */
  .deckreel{display:none}
}
/* the backbone carousel (/ #backbone): five artifacts behind a segmented control at every width.
   Panes reuse .step; cse.js drives tabs, keys, swipe and the auto-advance. */
.bbk{display:flex;flex-direction:column;gap:clamp(22px,3vh,32px)}
.bbk-tabs{display:flex;gap:4px;padding:4px;border-radius:999px;background:rgba(10,10,10,.06);overflow-x:auto;scrollbar-width:none;max-width:100%;align-self:flex-start}
html.dark .bbk-tabs{background:rgba(255,255,255,.09)}
.bbk-tabs::-webkit-scrollbar{display:none}
/* phones (Emmet, 2026-09-14: "you should be able to swipe this like a carousel… Targeting is cut off"): all four pills fit the width, the
   inactive ones keep only their number (the mobile.js .m-seg pattern) and the active one takes the room, so nothing clips and a swipe
   on the strip moves the carousel like a swipe anywhere else in it */
@media(max-width:1024px){.bbk-tabs{align-self:stretch;overflow:visible}.bbk-tab{flex:0 1 auto;padding:0 14px}.bbk-tab[aria-selected="true"]{flex:1 1 auto;justify-content:center}.bbk-tab[aria-selected="false"] .l{display:none}}
.bbk-tab{position:relative;flex:0 0 auto;display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:0 18px;border-radius:999px;font-weight:600;font-size:15px;color:var(--muted);white-space:nowrap;overflow:hidden;transition:color var(--dur) var(--ease-std),background-color var(--dur) var(--ease-std)}
.bbk-tab i{font-style:normal;font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;opacity:.55}
.bbk-tab[aria-selected="true"]{background:var(--ink);color:var(--sheet)}
.bbk-tab[aria-selected="true"] i{opacity:.72}
.bbk-tab .p{position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--accent);transform:scaleX(0);transform-origin:0 50%}
.bbk.auto .bbk-tab[aria-selected="true"] .p{animation:bbk-progress var(--bbk-ms,7000ms) linear forwards}
@keyframes bbk-progress{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.bbk-pane{display:none}
.bbk-pane.on{display:block;animation:bbk-in .9s var(--ease-snap) both}
@keyframes bbk-in{from{opacity:0;transform:translateY(12px);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
.bbk-pane .step{border-top:2px solid var(--ink);padding-top:16px}
.bbk-pane .step::before{display:none}
.bbk-pane .step.final{grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);border-top-color:var(--accent)}
.bbk-pane .step-n .anton{font-size:clamp(40px,4vw,64px)}
.bbk-pane .roll-wrap{max-height:360px}
/* the Platform block: three contained product cards, one film each. A full-width
   film read as oversized next to the copy, so each card carries its own frame */
.pcards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2vw,26px);align-items:start}
.pcard{display:flex;flex-direction:column;min-width:0}
.pcard-media{position:relative;aspect-ratio:16/10;border-radius:var(--r-md);overflow:hidden;background:var(--plate);border:1px solid var(--rule)}
.pcard-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.005);transition:transform var(--dur-slow) var(--ease-snap)}
.pcard:hover .pcard-media video{transform:scale(1.03)}
.pcard h3{margin:16px 0 0;font-size:clamp(20px,1.7vw,25px);line-height:1.2;font-weight:600;letter-spacing:-.02em}
.pcard p{margin:8px 0 0;font-size:16px;line-height:1.5;color:var(--muted)}
.pcard-role{display:block;margin:6px 0 0;font-size:15px;line-height:1.4;color:var(--ghost)}
/* side by side, the name and the role each hold two lines so the four descriptions start on one baseline (Emmet, 2026-09-14: "these are not aligned") */
@media (min-width:601px){.pcard h3{min-height:2.4em}.pcard-role{min-height:2.8em}}
@media (max-width:1024px){.pcards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.pcards{grid-template-columns:1fr}}
@media (max-width:600px){
  /* the claim is one sentence; it does not need 84px of air above and below it on a phone */
  #why{padding-block:clamp(44px,6.5vh,60px)}
  #why .head{margin-bottom:14px!important}
  #why h2{font-size:clamp(34px,8.6vw,44px)!important;line-height:1.1;max-width:17ch}
}
@media (max-width:1024px){.bbk-pane .step,.bbk-pane .step.final{grid-template-columns:1fr;gap:14px}}

/* #why: the whole system at a glance. The claim across the page, the four steps in one row */
.why-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(20px,3vw,40px);align-items:start}
.why-row{border-top:2px solid var(--ink);padding-top:16px}
.why-n{font-size:14px;font-weight:600;color:var(--ghost)} .why-n b{color:var(--accent);margin-right:8px;font-weight:600}
.why-row h3{margin:12px 0 0;font-size:clamp(24px,2vw,30px);line-height:1.25;font-weight:600;letter-spacing:-.02em}
.why-row p{margin:10px 0 0;font-size:17px;line-height:1.45;color:var(--muted)}
.why-row p b{color:var(--ink);font-weight:600}
.role-who{display:block;margin:0 0 8px;font-size:15px;font-weight:600;color:var(--ghost)}
/* the engine is part of The Platform, so its card stays in the stack but recedes: the three new modules carry the eye */
.why-row.included{border-top-color:var(--rule-strong)}
.why-row.included h3,.why-row.included p{color:var(--ghost)}
.why-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
/* /security/ controls: six cards, each a stack of label + value rows */
.trust-grid.ctrl{grid-template-columns:repeat(3,minmax(0,1fr))}
.trust-card .ctl{display:flex;flex-direction:column;gap:2px;padding-top:12px;border-top:1px solid var(--rule-fine)}
.trust-card .ctl:first-of-type{border-top:0;padding-top:0}
.trust-card .ctl span{font-size:14px;font-weight:600;color:var(--ghost)}
.trust-card .ctl p{margin:0;font-size:16px;line-height:1.45;color:var(--muted)}
/* /press/ news list: one row per article, hairline separated */
/* News: the filter row. Pills, not a segmented control — the reference is Rogo's Updates page */
.nfilters{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 clamp(8px,1.6vh,18px)}
.nfilter{flex:0 0 auto;display:inline-flex;align-items:center;min-height:44px;padding:0 20px;border-radius:999px;
  border:1px solid var(--rule);background:transparent;color:var(--muted);font-size:15px;font-weight:500;white-space:nowrap;
  transition:border-color var(--dur-fast) var(--ease-std),color var(--dur-fast) var(--ease-std),background-color var(--dur-fast) var(--ease-std)}
.nfilter:hover{border-color:var(--ink);color:var(--ink)}
.nfilter[aria-selected="true"]{background:var(--ink);border-color:var(--ink);color:var(--sheet)}
.nfilter:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
/* News: the real article preview per story, the reference being Rogo's Updates grid.
   The screenshots are mostly portrait, so the frame holds 16:9 and anchors to the top,
   which is where an article's masthead and headline live */
.news-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,40px) clamp(16px,2vw,28px)}
.ncard{display:flex;flex-direction:column;min-width:0}
/* the attribute alone loses to .ncard on specificity, so the filter did nothing */
.news-grid .ncard[hidden]{display:none}
.ncard-prev{position:relative;display:block;aspect-ratio:16/9;border-radius:var(--r-md);overflow:hidden;background:var(--sheet-2);box-shadow:inset 0 0 0 1px var(--rule)}
.ncard-prev img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0;display:block;transition:transform var(--dur-slow) var(--ease-snap)}
.ncard:hover .ncard-prev img{transform:scale(1.03)}
.ncard-meta{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;margin:16px 0 0;font-size:15px}
.ncard-meta b{font-weight:600;color:var(--ink)}
.ncard-meta i{font-style:normal;font-weight:400;color:var(--ghost);margin:0 .15em}
.ncard-meta .d{color:var(--ghost)}
.ncard h3{margin:6px 0 0;font-size:clamp(17px,1.35vw,20px);font-weight:600;letter-spacing:-.01em;line-height:1.35;text-wrap:pretty}
.ncard:hover h3{color:var(--accent)}
.ncard:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:var(--r-md)}
@media (max-width:1024px){.news-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.news-grid{grid-template-columns:1fr}}
@media (max-width:1024px){.trust-grid.ctrl{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.trust-grid.ctrl{grid-template-columns:1fr}}
@media (max-width:1024px){.why-grid,.why-grid.three{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.why-grid,.why-grid.three{grid-template-columns:1fr}}

/* phones: the nav button doubles the hero button one screen below, so it hides (the menu still carries one); desktop keeps it */
@media (max-width:1024px){.nav-right>.btn.sm{display:none}}

/* #compress, the data: the claim and the scale facts on the left, the clickstream record on the right */
.facts{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(32px,5vw,72px);align-items:center}
.facts-l{display:flex;flex-direction:column;gap:clamp(22px,3vh,32px);align-items:flex-start}
.facts-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,28px);width:100%}
.fact{border-top:2px solid var(--ink);padding-top:14px;display:flex;flex-direction:column;gap:4px}
.fact b{font-family:var(--font-display);font-optical-sizing:auto;font-size:clamp(32px,3vw,46px);font-weight:700;letter-spacing:-.04em;line-height:1;color:var(--accent);font-variant-numeric:tabular-nums}
.fact span{font-size:16px;line-height:1.4;color:var(--muted)}
.facts-r{display:flex;flex-direction:column;gap:14px}
.stream-lead{margin:0;font-size:16px;font-weight:600;color:var(--ghost)}
.facts-r .ktl-day{max-width:520px;width:100%}
.facts-r .ktl-day.rolling{height:clamp(240px,30vh,300px)}
@media (max-width:1024px){.facts{grid-template-columns:1fr;gap:28px}}
@media (max-width:600px){.facts-row{grid-template-columns:1fr;gap:14px}}
.results{display:flex;flex-direction:column;gap:20px;padding-top:clamp(24px,3vh,36px);border-top:1px solid var(--rule)}
/* the product blocks: headline, then the subtext, then the link on its own line.
   It used to sit at the far right of the headline row, where it read as a caption */
.block-h{display:block}
.block-h h2{margin:0}
.block-go{margin:0}
.block-go .go-link{font-size:clamp(16px,1.2vw,18px)}
.results-h{display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap}
/* Built for Enterprise: the four trust cards, as on /enterprise/ (Emmet liked that design) */
.trust-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.trust-card{background:var(--sheet);border:1px solid var(--rule);border-radius:var(--r-lg);box-shadow:var(--shadow-xs);padding:clamp(20px,2vw,26px);display:flex;flex-direction:column;gap:10px}
.trust-card b{font-size:17px;font-weight:600;letter-spacing:-.01em;color:var(--ink)}
.trust-card p{margin:0;font-size:16px;line-height:1.5;color:var(--muted)}
@media (max-width:1000px){.trust-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.trust-grid{grid-template-columns:1fr}}
@media (max-width:1024px){.facts{grid-template-columns:1fr;gap:28px}}
@media (max-width:600px){.facts-row{grid-template-columns:1fr;gap:14px}}
.nav-links a[aria-current="page"]{color:var(--accent)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .fieldpaths .flow,.fieldpaths .pulse{animation:none}
  [data-reveal]{opacity:1;transform:none;filter:none;will-change:auto;transition:none}
  .bbk-pane.on{animation:none} .bbk-tab .p{display:none}
  .ktl-ev,.ktl-ev::before,.kwk-out,.kwk-out::before,.kwk-out::after{opacity:1;transform:none;transition:none}
  .ktl-day::before{height:calc(100% - 18px);transition:none}
  .insight-card mark{background-size:100% 45%;transition:none}
  .kwk-spine{--spine-draw:1;--tap:1}
  .spine span{opacity:1;transform:none;transition:none}
  .bar .fill{transition:none;width:var(--w)}
  .frame .draw{stroke-dashoffset:0;transition:none}
  .fs-fill{transition:none;width:100%}
  .reel{transition:none}
}


/* the wall: 60 finished ads as one mosaic, under the home hero at low opacity and under a scrim so the type stays clean.
   `#hero.wall` also parks the field, the paths and the glow so the two plates are never stacked. */
/* the base is the colour film since 2026-09-14 (Emmet: "do the color wall on desktop and keep the same circle light"); the spotlight twin lifts it further */
.hero-wall{position:absolute;inset:0;pointer-events:none;opacity:.3;background:var(--plate) url("/assets/home/wall/kartel-wall-still.jpg") center/cover no-repeat}
.hero-wall video{display:block;width:100%;height:100%;object-fit:cover}
.hero-wall .pan,.hero-wall-color .pan{position:absolute;inset:0;width:140%;height:100%;will-change:transform;backface-visibility:hidden;animation:wallpan 80s linear infinite alternate;animation-delay:var(--wall-delay,0s)}
.hero-scrim{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(10,10,10,.6) 0%,rgba(10,10,10,.26) 42%,rgba(10,10,10,.55) 72%,var(--plate) 100%),radial-gradient(62% 90% at 50% 46%,rgba(10,10,10,.28),transparent 78%)}
#hero.wall .glow{display:none} #hero.wall canvas.fieldfx,#hero.wall .field-static{opacity:.55} #hero.wall .fieldpaths{opacity:.6}
#hero.wall>.wrap,#hero.wall>.trusted{position:relative}
@media(max-width:1024px),(prefers-reduced-motion:reduce){.hero-wall video{display:none}}

/* the glass bar (Rogo reference, 2026-09-13): the wall hero slides up under the bar, which goes clear while the hero is behind it
   and returns to the solid bar once the hero scrolls past (.over is toggled by the observer in cse.js). --bar-h is measured there. */
.nav.over{background:rgba(10,10,10,.14);border-bottom-color:rgba(255,255,255,.06)}
.nav.over.open{background:rgba(10,10,10,.94)}
#hero.wall,#hero.plate{margin-top:calc(-1 * var(--bar-h,82px));padding-top:var(--bar-h,82px)}

/* the quote cycler (Untitled UI testimonial, simple left-aligned card as a carousel): one quote at a time in a card sized
   to the longest, arrows + dots, auto-advance every 4.5s while unhovered, swipe on touch. Replaces the three-up .quotes grid. */
.qcycle{position:relative;display:grid;background:var(--sheet);border:1px solid var(--rule);padding:36px 40px 30px;max-width:920px}
.qc-item{grid-area:1/1;display:flex;flex-direction:column;gap:18px;opacity:0;visibility:hidden;transition:opacity .45s ease;pointer-events:none}
.qc-item.on{opacity:1;visibility:visible;pointer-events:auto}
.qc-item img{height:44px;width:auto;max-width:220px;object-fit:contain;object-position:left;align-self:flex-start;filter:brightness(0)}
html.dark .qc-item img{filter:brightness(0) invert(1)}
.qc-item blockquote{margin:0;font-size:clamp(20px,1.7vw,24px);line-height:1.4;font-weight:500;letter-spacing:-.012em;color:var(--ink);text-wrap:pretty}
.qc-item figcaption{margin-top:auto;font-size:15px;line-height:1.4;color:var(--muted)} .qc-item figcaption b{display:block;font-weight:600;color:var(--ink)}
.qc-nav{grid-area:2/1;display:flex;align-items:center;gap:10px;margin-top:26px}
.qc-nav button{width:40px;height:40px;min-height:40px;border:1px solid var(--rule);border-radius:50%;background:transparent;color:var(--ink);font:inherit;font-size:18px;line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0}
.qc-nav button:hover{border-color:var(--ink)}
.qc-dots{display:flex;gap:6px;margin:0 4px} .qc-dots i{display:block;width:6px;height:6px;border-radius:50%;background:var(--rule)} .qc-dots i.on{background:var(--accent)}
@media(max-width:1024px){.qcycle{padding:22px 20px 20px}.qc-item blockquote{font-size:18px}}

/* the colour layer (Emmet, 2026-09-13: "I liked the soft spotlight better, and around the main area where the text is add a little
   colour to accentuate the text"): a second copy of the wall in full colour over the monochrome one, shown through two masks that add:
   a standing soft wash behind the headline, and a spotlight that follows the pointer (radius 0 until the pointer is in the hero).
   cse.js moves the spotlight and keeps the two films in sync. Pointer devices only for the spotlight; the wash is always on. */
.hero-wall-color{position:absolute;inset:0;pointer-events:none;opacity:.85;
  -webkit-mask-image:radial-gradient(circle var(--r,0px) at var(--mx,50%) var(--my,50%),black 0,black 30%,transparent 100%),radial-gradient(ellipse 44% 62% at 50% 40%,rgba(0,0,0,.42),transparent 72%);
  mask-image:radial-gradient(circle var(--r,0px) at var(--mx,50%) var(--my,50%),black 0,black 30%,transparent 100%),radial-gradient(ellipse 44% 62% at 50% 40%,rgba(0,0,0,.42),transparent 72%)}
.hero-wall-color.live{--r:240px}
.hero-wall-color video{display:block;width:100%;height:100%;object-fit:cover}
@media(hover:none),(max-width:1024px),(prefers-reduced-motion:reduce){.hero-wall-color{display:none}}

/* the drift, shared with /enterprise/: both films at 140% width pan there and back over 80s; the site feels built on one library that never
   stops. cse.js sets a negative animation-delay and seeks the films from a per-session epoch, so a new page picks the drift up mid-motion. */
.hero-wall,.hero-wall-color{overflow:hidden}
/* the drift is a composited transform on the .pan wrapper (never on the <video> itself, whose layer snaps to whole pixels at 7px/s and reads as judder, and never a background-position, which repaints every frame) */
@keyframes wallpan{from{transform:translateX(0)}to{transform:translateX(-28.57%)}}
@keyframes wallpan150{from{transform:translateX(0)}to{transform:translateX(-33.33%)}}
@media(prefers-reduced-motion:reduce){.hero-wall .pan,.hero-wall-color .pan{animation:none;width:100%}}
/* phones (Emmet, 2026-09-14: "the background should just have colour because you can't drag your mouse over it", Netflix's home as the
   reference): the video is off, the colour still fills the hero height and pans across, same period and direction as the films */
@media(max-width:1024px){.hero-wall video{display:none}.hero-wall{opacity:.5;background:var(--plate)}.hero-wall .pan{width:150%;background:url("/assets/home/wall/kartel-wall-still-phone.jpg") center/cover no-repeat;animation-name:wallpan150}}
@media(max-width:1024px) and (prefers-reduced-motion:reduce){.hero-wall .pan{animation:none;width:100%}}

/* the bar reads the section under it (Rogo, end of 2026-09-13: "transparent on black, then white when it's on white"): .over = clear over
   a wall hero, .light = white glass with ink over a light section, otherwise dark glass. cse.js probes the element under the bar's bottom edge. */
.nav.light{background:rgba(255,255,255,.74);border-bottom-color:rgba(10,10,10,.08);color:var(--ink)}
.nav.light .wordmark img{filter:invert(1)}
.nav.light .theme-toggle{border-color:rgba(10,10,10,.2);color:var(--muted)} .nav.light .theme-toggle:hover{color:var(--ink);border-color:rgba(10,10,10,.45)}
.nav.light .nav-burger{color:var(--ink)}
.nav.light .nav-links a,.nav.light .nav-links button{color:var(--ink)} .nav.light .nav-links a[aria-current="page"],.nav.light .nav-links a:hover,.nav.light .nav-links button:hover{color:var(--accent)} .nav.light .nav-links a.btn,.nav.light .nav-links a.btn:hover{color:var(--white)}
.nav.light.open{background:rgba(255,255,255,.96)}

/* phones: the Wall Street claim, then the day scroll, then the three facts (Emmet, 2026-09-14). .facts-l dissolves so its children order with .facts-r */
@media (max-width:1024px){.facts-l{display:contents}.facts>.facts-l>h2{order:1}.facts>.facts-r{order:2}.facts>.facts-l>.facts-row{order:3}.facts>.facts-l>.go-link{order:4}}