/* ../css/v3-font.css */
/* Public Sans (SIL Open Font License), latin subset, embedded so pages work from file:// */
@font-face { font-family: "Public Sans"; font-style: italic; font-weight: 300 700; font-display: block; src: url("assets/67424296.woff2") format("woff2"); }
@font-face { font-family: "Public Sans"; font-style: normal; font-weight: 300 700; font-display: block; src: url("assets/76d61eed.woff2") format("woff2"); }


/* ../css/v4-mono.css */
/* Geist Mono-style monospace used for the hero's hairline labels (taken from the anatomy prototype), embedded for file:// */
@font-face{font-family:'DLMono';src:url(assets/95949a92.woff2) format('woff2');font-weight:400 500;font-display:swap}


/* ../css/v7-serif.css */
/* Newsreader (SIL Open Font License), latin subset, embedded so pages work from file:// */
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 300 500;
  font-display: block;
  src: url(assets/65ede107.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 300 500;
  font-display: block;
  src: url(assets/00e07067.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ../css/v8.css */
/* Dataland v8: v7's look (serif headlines, Public Sans body, indigo textured panels with light UI on top)
   carrying the new homepage spine: hero, logos, problem, four platform cards, one case start to finish,
   the engineers, customer results, CTA. */
:root {
  --bg: #ffffff; --off: #f6f6f4; --off-2: #efefec;
  --ink: #101218; --text: #2a2d36; --text-2: #565a66; --text-3: #8a8d98;
  --line: rgba(16,18,24,0.09); --line-2: rgba(16,18,24,0.16);
  --blue: #1E69FF; --indigo: #4F5BFF; --violet: #A451FF; --deep: #0D30A5;
  --grad: linear-gradient(90deg, #1E69FF 0%, #4F5BFF 45%, #A451FF 100%);
  --ok: #0d6b48;
  /* one tint per platform piece, reused on the cards and in the example case */
  --c-use: #1E69FF; --c-know: #0f7a8a; --c-follow: #8a3fe0; --c-gate: #3c3fd8;
  --serif: "Newsreader", "Iowan Old Style", Georgia, serif;
  --sans: "Public Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "DLMono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --wrap: 1180px; --ease: cubic-bezier(.2,.7,.2,1);
}
* { box-sizing: border-box; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 72px; }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 16px/1.6 var(--sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; color: var(--ink); }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
.wrap { width: min(var(--wrap), calc(100% - 48px)); margin: 0 auto; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--ink); color: #fff; padding: 8px 12px; z-index: 100; }
.skip:focus { left: 8px; }
.rv { opacity: 0; transform: translateY(12px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.rv.in { opacity: 1; transform: none; }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 4px; font-size: 14px; font-weight: 500; letter-spacing: .005em; white-space: nowrap; transition: background .2s, color .2s, border-color .2s; }
.btn.dark { background: var(--ink); color: #fff; } .btn.dark:hover { background: #262a36; }
.btn.line { border: 1px solid var(--line-2); color: var(--ink); background: #fff; } .btn.line:hover { border-color: rgba(16,18,24,.4); }
.btn.light { background: #fff; color: var(--ink); } .btn.light:hover { background: #eef0ff; }
.btn.ghostw { border: 1px solid rgba(255,255,255,.35); color: #fff; } .btn.ghostw:hover { border-color: #fff; }
.btn.lg { height: 46px; padding: 0 20px; font-size: 15px; }
.btn .ar { transition: transform .25s var(--ease); } .btn:hover .ar { transform: translateX(3px); }

/* header */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.88); -webkit-backdrop-filter: saturate(160%) blur(12px); backdrop-filter: saturate(160%) blur(12px); border-bottom: 1px solid transparent; transition: border-color .3s; }
.site-header.scrolled { border-bottom-color: var(--line); }
.site-header .wrap { height: 64px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.brand img { height: 22px; width: auto; }
.nav { display: flex; gap: 28px; font-size: 14px; color: var(--text-2); }
.nav a:hover { color: var(--ink); }
.head-ctas { justify-self: end; display: flex; align-items: center; gap: 10px; }
.head-ctas .ghost { font-size: 14px; color: var(--text-2); padding: 0 10px; } .head-ctas .ghost:hover { color: var(--ink); }

/* type */
.display { font-family: var(--serif); font-weight: 400; font-size: 72px; line-height: 1.02; letter-spacing: -0.022em; font-variation-settings: "opsz" 72; color: var(--ink); text-wrap: balance; }
.h2 { font-family: var(--serif); font-weight: 400; font-size: 46px; line-height: 1.08; letter-spacing: -0.018em; font-variation-settings: "opsz" 72; text-wrap: balance; }
.lead { font-size: 19px; line-height: 1.6; color: var(--text-2); text-wrap: pretty; }
.section { padding: 136px 0 0; }
.head { display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: end; }

/* panels */
.panel { position: relative; overflow: hidden; isolation: isolate; border-radius: 6px; background-color: #0b1230; background-position: center; background-size: cover; background-repeat: no-repeat; }
.panel::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(80% 90% at 70% 40%, rgba(79,91,255,.16), transparent 70%); pointer-events: none; }
.win { position: absolute; background: #fff; border-radius: 10px; box-shadow: 0 40px 80px -30px rgba(3,6,30,.55), 0 0 0 1px rgba(255,255,255,.12); overflow: hidden; }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; border-radius: 999px; font-size: 12px; border: 1px solid var(--line); color: var(--text-2); background: #fff; white-space: nowrap; }
.chip .d { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.chip.work { color: #3c3fd8; border-color: rgba(79,91,255,.3); background: rgba(79,91,255,.06); }
.chip.work .d { animation: pulse 1.2s ease-in-out infinite; }
.chip.wait { color: #7a35d6; border-color: rgba(164,81,255,.3); background: rgba(164,81,255,.06); }
.chip.review { color: #8a5a00; border-color: rgba(176,120,0,.28); background: rgba(176,120,0,.06); }
.chip.done { color: var(--ok); border-color: rgba(13,107,72,.25); background: rgba(13,107,72,.06); }
@keyframes pulse { 50% { opacity: .25; } }

/* the four platform pieces, as small labelled pills */
.pc { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px 0 7px; border-radius: 999px; font-size: 12px; font-weight: 500; white-space: nowrap; color: var(--c); background: color-mix(in srgb, var(--c) 7%, #fff); border: 1px solid color-mix(in srgb, var(--c) 26%, transparent); }
.pc svg { width: 13px; height: 13px; flex: none; }
.pc.use { --c: var(--c-use); } .pc.know { --c: var(--c-know); } .pc.follow { --c: var(--c-follow); } .pc.gate { --c: var(--c-gate); }

/* ---------- hero ---------- */
.hero { padding: 96px 0 0; }
.hero-top { display: grid; grid-template-columns: 1.3fr 1fr; gap: 64px; align-items: end; }
.hero-top .side .lead { max-width: 450px; }
.hero-top .side .ctas { margin-top: 26px; display: flex; gap: 10px; flex-wrap: wrap; }
.stage { margin-top: 64px; height: 600px; }
.queue { left: 5%; top: 56px; width: 62%; bottom: -24px; display: grid; grid-template-columns: 176px 1fr; }
.q-side { background: #f7f7f8; border-right: 1px solid var(--line); padding: 16px 12px; font-size: 13px; color: var(--text-2); }
.q-side .b { display: flex; align-items: center; gap: 8px; color: var(--ink); font-weight: 500; margin: 0 0 18px 4px; }
.q-side .b img { width: 16px; height: 16px; }
.q-side .g { font: 400 10.5px var(--mono); color: var(--text-3); margin: 16px 0 6px 8px; letter-spacing: .04em; text-transform: uppercase; }
.q-side .it { padding: 6px 8px; border-radius: 6px; display: flex; justify-content: space-between; }
.q-side .it.on { background: #fff; color: var(--ink); box-shadow: 0 0 0 1px var(--line); }
.q-side .it span { font: 400 11px var(--mono); color: var(--text-3); }
.q-main { padding: 18px 22px 0; min-width: 0; }
.q-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-bottom: 14px; }
.q-head h4 { font-family: var(--serif); font-size: 22px; line-height: 1.2; font-variation-settings: "opsz" 30; }
.q-tabs { display: flex; gap: 2px; font-size: 12.5px; color: var(--text-3); }
.q-tabs span { padding: 4px 9px; border-radius: 5px; } .q-tabs span.on { color: var(--ink); background: var(--off); }
.q-cols, .q-row { display: grid; grid-template-columns: minmax(0, 1fr) 168px; gap: 16px; align-items: center; }
.q-cols { padding: 8px 10px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font: 400 10.5px var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--text-3); }
.q-row { padding: 13px 10px; border-bottom: 1px solid var(--line); border-radius: 6px; transition: background .4s, box-shadow .4s; }
.q-row b { display: block; font-weight: 500; font-size: 13.5px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.q-row .from { display: block; margin-top: 2px; font: 400 11px var(--mono); color: var(--text-3); }
.q-row .st { justify-self: start; }
.detail { right: 4.5%; top: 104px; width: 350px; border-radius: 12px; }
.detail .d-h { padding: 14px 16px 12px; border-bottom: 1px solid var(--line); }
.detail .d-h .k { font: 400 10.5px var(--mono); color: var(--text-3); letter-spacing: .04em; }
.detail .d-h h5 { margin: 4px 0 0; font: 400 18px/1.25 var(--serif); color: var(--ink); font-variation-settings: "opsz" 24; }
.detail .d-h .chip { margin-top: 10px; }
.log { position: relative; padding: 8px 16px 14px; min-height: 252px; }
.log::before { content: ""; position: absolute; left: 25px; top: 20px; bottom: 26px; width: 1px; background: var(--line-2); }
.log li { position: relative; display: grid; grid-template-columns: 20px 1fr auto; gap: 10px; padding: 8px 0; opacity: 0; transform: translateY(6px); transition: opacity .45s var(--ease), transform .45s var(--ease); }
.log li.in { opacity: 1; transform: none; }
.log .dot { width: 19px; height: 19px; border-radius: 50%; background: #fff; border: 1px solid var(--line-2); display: grid; place-items: center; z-index: 1; }
.log .dot::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--grad); }
.log .tx { font-size: 13px; color: var(--ink); line-height: 1.45; }
.log .sy { margin-top: 3px; font: 400 10.5px var(--mono); color: var(--text-3); }
.log .t { font: 400 10.5px var(--mono); color: var(--text-3); padding-top: 2px; white-space: nowrap; }
.stage-foot { margin-top: 14px; display: flex; justify-content: flex-end; font-size: 13px; color: var(--text-3); }

/* logos */
.logos { margin-top: 80px; display: grid; grid-template-columns: 200px repeat(3, 1fr); align-items: center; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.logos .lk { font-size: 14px; color: var(--text-3); }
.logos span.l { height: 104px; display: grid; place-items: center; border-left: 1px solid var(--line); }
.logos img { height: var(--h, 24px); width: auto; filter: brightness(0); opacity: .72; }

/* ---------- problem ---------- */
.problem { display: grid; grid-template-columns: 1fr 1.15fr; gap: 64px; align-items: start; }
.problem p { font-family: var(--serif); font-size: 25px; line-height: 1.5; color: var(--text); font-variation-settings: "opsz" 24; text-wrap: pretty; }
.problem p + p { margin-top: 18px; }

/* ---------- platform cards ---------- */
.cards { margin-top: 56px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 48px 24px; }
.card .panel { height: 330px; }
.card .panel .pc { position: absolute; left: 18px; top: 18px; z-index: 2; background: rgba(255,255,255,.92); border-color: rgba(255,255,255,.6); box-shadow: 0 6px 18px -8px rgba(3,6,30,.5); }
.card h3 { margin-top: 24px; font-family: var(--serif); font-size: 27px; line-height: 1.2; font-variation-settings: "opsz" 36; }
.card p { margin-top: 10px; color: var(--text-2); font-size: 16px; line-height: 1.6; max-width: 520px; text-wrap: pretty; }
.mini { position: absolute; background: #fff; border-radius: 8px; box-shadow: 0 30px 60px -24px rgba(3,6,30,.6); font-size: 12.5px; color: var(--text); overflow: hidden; }
.mini .mt { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-bottom: 1px solid var(--line); background: #f7f7f8; font: 400 10.5px var(--mono); color: var(--text-3); }
.mini .mt i { width: 7px; height: 7px; border-radius: 50%; background: #dcdde3; }
.mini .mt .r { margin-left: auto; }
.mini .mb { padding: 10px 12px; }
.mini .f { display: grid; grid-template-columns: 84px 1fr; gap: 8px; align-items: center; margin-bottom: 7px; color: var(--text-3); }
.mini .f > span:last-child { height: 24px; border: 1px solid var(--line-2); border-radius: 5px; display: flex; align-items: center; padding: 0 8px; color: var(--ink); white-space: nowrap; overflow: hidden; }
.mini .acts { display: flex; gap: 8px; margin-top: 10px; position: relative; }
.mini .acts span { height: 26px; padding: 0 10px; border-radius: 5px; display: inline-flex; align-items: center; border: 1px solid var(--line-2); color: var(--text-2); }
.mini .acts span.go { background: var(--ink); color: #fff; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(79,91,255,.25); }
.mini .cursor { position: absolute; width: 18px; height: 18px; left: 128px; top: 14px; filter: drop-shadow(0 2px 3px rgba(0,0,0,.3)); }
.mini .ft { display: flex; justify-content: space-between; gap: 8px; padding: 7px 12px; border-top: 1px solid var(--line); font: 400 10.5px var(--mono); color: var(--text-3); }
.mini .ft .ok { color: var(--ok); }
.mini .row { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; padding: 7px 0; border-top: 1px solid var(--line); } .mini .row:first-child { border-top: 0; }
.mini .row .n { font: 400 10.5px var(--mono); color: var(--text-3); margin-right: 6px; }
.mini .flag { margin-top: 6px; padding: 8px 10px; border-radius: 6px; background: rgba(164,81,255,.07); border: 1px solid rgba(164,81,255,.22); color: #5b2aa0; line-height: 1.45; }
.mini .flag b { display: block; font-weight: 500; color: #4a1f8a; margin-bottom: 2px; }
.mini .tl > div { display: grid; grid-template-columns: 48px 1fr; gap: 6px; padding: 6px 0; border-top: 1px solid var(--line); } .mini .tl > div:first-child { border-top: 0; }
.mini .tl span.dd { font: 400 10.5px var(--mono); color: var(--text-3); padding-top: 1px; }
.mini .tl .okk { color: var(--ok); }
.mini .tl .nx { color: var(--text-3); border-top-style: dashed; }
.mini .gw { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; padding: 7px 0; border-top: 1px solid var(--line); } .mini .gw:first-child { border-top: 0; }
.mini .gw code { font: 400 11px var(--mono); color: var(--ink); }
.mini .gw .why { display: block; font-size: 11px; color: var(--text-3); margin-top: 1px; }
.mini .gw .chip { height: 21px; font-size: 11px; padding: 0 8px; }
.chip.no { color: #a3263a; border-color: rgba(163,38,58,.25); background: rgba(163,38,58,.05); }

/* ---------- one case, start to finish ---------- */
.case { margin-top: 56px; border: 1px solid var(--line-2); border-radius: 6px; background: #fff; overflow: hidden; }
.case-top { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 16px 24px; border-bottom: 1px solid var(--line); background: var(--off); flex-wrap: wrap; }
.case-top h3 { font-family: var(--serif); font-size: 24px; font-variation-settings: "opsz" 30; }
.case-top .legend { display: flex; gap: 6px; flex-wrap: wrap; }
.case-body { padding: 8px 24px 6px; }
table.chron { width: 100%; border-collapse: collapse; font-size: 14.5px; line-height: 1.5; }
.chron th { text-align: left; font: 400 10.5px var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--text-3); padding: 14px 12px 10px 0; border-bottom: 1px solid var(--line-2); }
.chron td { vertical-align: top; padding: 12px 12px 12px 0; border-bottom: 1px solid var(--line); }
.chron tr:last-child td { border-bottom: 0; }
.chron .t b.dy { display: block; font-weight: 400; color: var(--ink); margin-bottom: 2px; }
.chron .t { width: 92px; font: 400 12px var(--mono); color: var(--text-3); padding-top: 14px; white-space: nowrap; }
.chron .surf { width: 36%; padding-right: 26px; }
.chron .und { padding-left: 24px; border-left: 1px solid var(--line-2); color: var(--ink); }
.chron .how { width: 150px; text-align: right; padding-right: 0; }
.chron .how .pc { margin-top: 1px; }
.chron tr.msg .surf .w { display: block; font: 400 10.5px var(--mono); color: var(--text-3); margin-bottom: 5px; }
.chron tr.msg .surf .b { display: inline-block; padding: 9px 13px; border-radius: 12px; background: var(--off-2); color: var(--ink); font-size: 14px; text-wrap: pretty; }
.chron tr.msg.ma .surf .b { background: var(--ink); color: #fff; }
.chron .att { display: flex; gap: 6px; margin-top: 7px; }
.chron .att i { width: 34px; height: 26px; border-radius: 4px; background: linear-gradient(135deg, #d9dbe3, #c4c7d3); position: relative; overflow: hidden; }
.chron .att i::after { content: ""; position: absolute; left: 5px; right: 5px; bottom: 4px; height: 9px; background: linear-gradient(120deg, transparent 0 40%, rgba(255,255,255,.7) 40% 55%, transparent 55%); }
.chron tr.lapse td { padding: 7px 0; font: 400 10.5px var(--mono); color: var(--text-3); text-transform: uppercase; letter-spacing: .08em; background: repeating-linear-gradient(90deg, transparent 0 6px, rgba(16,18,24,.04) 6px 7px); text-align: center; border-left: 0; }
.chron tbody tr { opacity: 0; transition: opacity .45s var(--ease); } .chron tbody tr.in { opacity: 1; }
.case-foot { padding: 12px 24px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--text-3); }

/* ---------- engineers ---------- */
.eng { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.eng .copy p { margin-top: 20px; font-size: 17px; line-height: 1.7; color: var(--text); text-wrap: pretty; }
.eng .copy p:first-of-type { margin-top: 24px; }
.eng .panel { height: 460px; }
.slack { left: 8%; right: 8%; top: 50%; transform: translateY(-50%); border-radius: 10px; font-size: 13.5px; }
.slack .sh { display: flex; align-items: center; justify-content: space-between; padding: 11px 16px; border-bottom: 1px solid var(--line); font-weight: 600; color: var(--ink); }
.slack .sh span { font: 400 11px var(--mono); color: var(--text-3); font-weight: 400; }
.slack .m { display: grid; grid-template-columns: 34px 1fr; gap: 10px; padding: 14px 16px 4px; }
.slack .m:last-child { padding-bottom: 16px; }
.slack .av { width: 34px; height: 34px; border-radius: 6px; display: grid; place-items: center; font-weight: 600; font-size: 13px; color: #fff; }
.slack .av.c { background: #7b8094; } .slack .av.e { background: var(--ink); }
.slack .nm { font-weight: 600; color: var(--ink); } .slack .nm span { font-weight: 400; color: var(--text-3); font-size: 12px; margin-left: 6px; }
.slack .nm em { font-style: normal; font: 500 10px var(--mono); color: #3c3fd8; background: rgba(79,91,255,.08); border-radius: 3px; padding: 1px 5px; margin-left: 6px; letter-spacing: .03em; }
.slack .tx { margin-top: 2px; color: var(--text); line-height: 1.5; text-wrap: pretty; }

/* ---------- customers ---------- */
.custs { margin-top: 56px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.cust { display: flex; flex-direction: column; border: 1px solid var(--line-2); border-radius: 6px; padding: 28px 28px 24px; background: #fff; }
.cust .lg { height: var(--h, 24px); width: auto; filter: brightness(0); opacity: .85; align-self: flex-start; }
.cust .fig { margin-top: 26px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.cust .fig b { display: block; font-family: var(--serif); font-weight: 400; font-size: 46px; line-height: 1; color: var(--ink); font-variation-settings: "opsz" 60; }
.cust .fig span { display: block; margin-top: 8px; font-size: 14px; line-height: 1.45; color: var(--text-3); }
.cust blockquote { margin: 20px 0 0; font-family: var(--serif); font-size: 18px; line-height: 1.55; color: var(--ink); flex: 1; font-variation-settings: "opsz" 18; text-wrap: pretty; }
.cust .who { margin-top: 20px; display: grid; grid-template-columns: 36px 1fr; gap: 10px; align-items: center; font-size: 13px; line-height: 1.4; color: var(--text-3); }
.cust .who img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.cust .who b { display: block; font-weight: 500; color: var(--ink); font-size: 14px; }
.video { margin-top: 20px; display: grid; grid-template-columns: 168px 1fr auto; gap: 20px; align-items: center; padding: 12px 20px 12px 12px; border: 1px solid var(--line-2); border-radius: 6px; transition: border-color .2s; }
.video:hover { border-color: rgba(16,18,24,.4); }
.video .th { position: relative; aspect-ratio: 16/9; border-radius: 4px; overflow: hidden; background: #111; }
.video .th img { width: 100%; height: 100%; object-fit: cover; opacity: .85; }
.video .th::after { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-40%, -50%); border-style: solid; border-width: 8px 0 8px 13px; border-color: transparent transparent transparent #fff; }
.video b { display: block; font-weight: 500; color: var(--ink); font-size: 15px; }
.video .s { display: block; margin-top: 2px; font-size: 14px; color: var(--text-3); }
.video .ar { font-size: 18px; color: var(--text-3); transition: transform .25s var(--ease), color .2s; } .video:hover .ar { transform: translateX(3px); color: var(--ink); }

/* ---------- CTA + footer ---------- */
.cta { margin-top: 136px; }
.cta .panel { padding: 96px 8%; display: grid; grid-template-columns: 1.4fr auto; gap: 48px; align-items: end; color: #fff; }
.cta .h2 { color: #fff; font-size: 50px; max-width: 640px; }
.cta .ctas { display: flex; gap: 10px; flex-wrap: wrap; }
.foot { margin-top: 96px; border-top: 1px solid var(--line); padding: 56px 0 40px; font-size: 14px; }
.foot .ft { display: grid; grid-template-columns: 1.8fr 1fr 1fr; gap: 24px; }
.foot h4 { font-size: 13px; font-weight: 500; color: var(--ink); margin-bottom: 12px; }
.foot ul { display: flex; flex-direction: column; gap: 9px; }
.foot ul a { color: var(--text-3); } .foot ul a:hover { color: var(--ink); }
.foot .fn { margin-top: 16px; color: var(--text-3); max-width: 300px; line-height: 1.6; }
.foot .fb { margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; color: var(--text-3); font-size: 13px; }
.foot .fb .yc { display: flex; align-items: center; gap: 8px; } .foot .fb .yc img { height: 15px; filter: brightness(0); opacity: .55; }
.foot .fb a { color: inherit; } .foot .fb a:hover { color: var(--ink); }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .display { font-size: 60px; }
  .hero-top { grid-template-columns: 1fr; gap: 28px; }
  .queue { left: 3%; width: 60%; grid-template-columns: 1fr; } .q-side { display: none; } .detail { right: 3%; width: 310px; }
  .problem, .eng { grid-template-columns: 1fr; gap: 32px; }
  .custs { grid-template-columns: 1fr; } .cust blockquote { flex: none; }
}
@media (max-width: 860px) {
  .nav, .head-ctas .ghost { display: none; }
  .site-header .wrap { grid-template-columns: 1fr auto; }
  .section { padding-top: 96px; }
  .h2 { font-size: 36px; } .display { font-size: 46px; }
  .head { grid-template-columns: 1fr; gap: 14px; }
  .stage { height: auto; padding: 18px 14px; display: flex; flex-direction: column; gap: 14px; }
  .stage .win { position: relative; left: auto; right: auto; top: auto; bottom: auto; width: auto; transform: none; }
  .queue { grid-template-columns: 1fr; } .q-side { display: none; } .q-tabs { display: none; } .q-main { padding: 14px 14px 4px; }
  .q-row:nth-child(n+5) { display: none; }
  .q-cols { display: none; } .q-row { grid-template-columns: 1fr; gap: 8px; padding: 12px 10px; }
  .logos img { height: calc(var(--h, 24px) * .8); }
  .log { min-height: 0; }
  .logos { grid-template-columns: repeat(3, 1fr); } .logos .lk { grid-column: 1 / -1; padding: 14px 0 0; text-align: center; }
  .logos span.l { height: 76px; } .logos span.l:nth-of-type(1) { border-left: 0; }
  .problem p { font-size: 21px; }
  .cards { grid-template-columns: 1fr; gap: 40px; }
  .card .panel { height: 300px; }
  .eng .panel { height: auto; padding: 40px 16px; } .slack { position: relative; left: auto; right: auto; top: auto; transform: none; }
  .video { grid-template-columns: 120px 1fr; } .video .ar { display: none; }
  .cta .panel { grid-template-columns: 1fr; padding: 56px 24px; } .cta .h2 { font-size: 36px; }
  .foot .ft { grid-template-columns: 1fr 1fr; } .foot .ft > div:first-child { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .display { font-size: 42px; }
  .case-top { padding: 14px; } .case-body { padding: 4px 14px; } .case-foot { padding: 12px 14px; }
  table.chron, .chron tbody, .chron tr, .chron td { display: block; width: auto !important; }
  .chron thead { display: none; }
  .chron tbody tr { display: grid !important; grid-template-columns: 58px 1fr; column-gap: 10px; border-bottom: 1px solid var(--line); padding: 11px 0; }
  .chron td { border: 0 !important; padding: 0 !important; text-align: left !important; }
  .chron .t { grid-row: 1 / 3; padding-top: 2px !important; font-size: 11px; }
  .chron tr.step .surf, .chron tr.msg .und, .chron tr.msg .how { display: none; }
  .chron .how { margin-top: 6px; }
  .chron tr.lapse { display: block !important; padding: 0 !important; } .chron tr.lapse td { padding: 4px 0 !important; text-align: center !important; }
  .card .panel { height: auto; padding: 58px 14px 18px; }
  .card .mini { position: relative; left: auto !important; right: auto !important; top: auto !important; }
}
@media (prefers-reduced-motion: reduce) { .rv { opacity: 1; transform: none; } .chron tbody tr, .log li { opacity: 1; transform: none; } .chip.work .d { animation: none; } }


/* ../css/v8-dark.css */
/* Dataland v8, dark mode. Loaded after css/v8.css by v8/dark.html and v8/dark-sans.html.
   Same layout; only colours change. Logo-palette accents (blue, indigo, violet) on near-black. */
:root {
  --bg: #0a0b10; --off: #11131a; --off-2: #1b1e28;
  --ink: #eeeff6; --text: #c9ccd8; --text-2: #a2a6b8; --text-3: #737889;
  --line: rgba(255,255,255,0.08); --line-2: rgba(255,255,255,0.14);
  --ok: #4fd19a;
  --c-use: #6fa0ff; --c-know: #4cc3d1; --c-follow: #c08bff; --c-gate: #a3aaff;
  --surface: #101219; --win: #13151d; --win-2: #0f1117;
  color-scheme: dark;
}
::selection { background: rgba(79,91,255,.45); color: #fff; }
.skip { background: var(--ink); color: var(--bg); }

/* buttons */
.btn.dark { background: var(--ink); color: #0a0b10; } .btn.dark:hover { background: #fff; }
.btn.line { background: transparent; color: var(--ink); border-color: var(--line-2); } .btn.line:hover { border-color: rgba(255,255,255,.45); }
.btn.light { background: #fff; color: #0a0b10; } .btn.light:hover { background: #e4e7ff; }

/* header */
.site-header { background: rgba(10,11,16,.78); }

/* panels and windows */
.panel { box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
.panel::after { background: radial-gradient(80% 90% at 70% 40%, rgba(79,91,255,.22), transparent 70%); }
.panel[style*="stone.jpg"]::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(rgba(10,14,40,.62), rgba(10,14,40,.7)); }
.win { background: var(--win); box-shadow: 0 40px 80px -30px rgba(0,0,0,.75), 0 0 0 1px rgba(255,255,255,.09); }
.chip { background: rgba(255,255,255,.03); border-color: var(--line-2); color: var(--text-2); }
.chip.work { color: #a9b0ff; border-color: rgba(120,130,255,.38); background: rgba(79,91,255,.12); }
.chip.wait { color: #cfa8ff; border-color: rgba(164,81,255,.38); background: rgba(164,81,255,.12); }
.chip.review { color: #f0c46a; border-color: rgba(240,196,106,.32); background: rgba(240,196,106,.08); }
.chip.done { color: var(--ok); border-color: rgba(79,209,154,.3); background: rgba(79,209,154,.08); }
.chip.no { color: #ff8d9e; border-color: rgba(255,141,158,.3); background: rgba(255,141,158,.07); }
.pc { background: color-mix(in srgb, var(--c) 13%, transparent); border-color: color-mix(in srgb, var(--c) 34%, transparent); }

/* hero queue */
.q-side { background: var(--win-2); }
.q-side .it.on { background: var(--off-2); box-shadow: 0 0 0 1px var(--line); }
.q-tabs span.on { background: var(--off-2); }
.log .dot { background: var(--win); }

/* logos */
.logos img, .cust .lg, .foot .fb .yc img { filter: brightness(0) invert(1); }
.logos img { opacity: .66; }

/* platform cards */
.card .panel .pc { background: rgba(12,14,22,.86); border-color: rgba(255,255,255,.12); }
.mini { background: var(--win); box-shadow: 0 30px 60px -24px rgba(0,0,0,.75), 0 0 0 1px rgba(255,255,255,.09); }
.mini .mt { background: var(--win-2); }
.mini .mt i { background: #2b2f3c; }
.mini .acts span.go { background: var(--ink); color: #0a0b10; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(79,91,255,.35); }
.mini .cursor path { fill: #fff; stroke: #0a0b10; }
.mini .flag { background: rgba(164,81,255,.12); border-color: rgba(164,81,255,.32); color: #d6bbff; }
.mini .flag b { color: #ead9ff; }

/* one case */
.case { background: var(--surface); }
.case-top { background: var(--off); }
.chron tr.msg .surf .b { background: var(--off-2); }
.chron tr.msg.ma .surf .b { background: var(--ink); color: #0a0b10; }
.chron .att i { background: linear-gradient(135deg, #2c303d, #3a3f4f); }
.chron tr.lapse td { background: repeating-linear-gradient(90deg, transparent 0 6px, rgba(255,255,255,.035) 6px 7px); }

/* engineers */
.slack .av.c { background: #4b5064; } .slack .av.e { background: var(--ink); color: #0a0b10; }
.slack .nm em { color: #a9b0ff; background: rgba(79,91,255,.16); }

/* customers */
.cust { background: var(--surface); }
.video:hover { border-color: rgba(255,255,255,.4); }



/* ===== Dataland v9: dark + serif. Overrides on top of v8.css + v8-dark.css ===== */
:root { --serif-text: var(--serif); --hw: 400; }
.display, .h2, .card h3, .case-top h3, .cust .fig b { font-weight: var(--hw); }
.problem p, .cust blockquote { font-family: var(--serif-text); }

/* logos: four customers */
.logos { grid-template-columns: 180px repeat(4, 1fr); }

/* ---------- hero: the conversation in front, the work behind ---------- */
.stage { height: 532px; background-color: #07080d; }
.stage::after { background: radial-gradient(60% 70% at 72% 30%, rgba(79,91,255,.10), transparent 70%); }
.stage::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(7,8,13,.55) 0%, rgba(7,8,13,.15) 45%, rgba(7,8,13,0) 100%); pointer-events: none; }
.convo { left: 4.5%; top: 72px; width: 31%; height: 400px; z-index: 5; display: flex; flex-direction: column; border-radius: 12px; }
.convo .ch { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.convo .ch .nm { display: flex; align-items: center; gap: 9px; font-size: 13.5px; font-weight: 500; color: var(--ink); }
.convo .ch .nm i { width: 26px; height: 26px; border-radius: 50%; background: #1d2030; display: grid; place-items: center; font: 600 11px var(--sans); color: var(--text-2); font-style: normal; }
.convo .ch .nm span { display: block; font: 400 10.5px var(--mono); color: var(--text-3); margin-top: 1px; }
.convo .msgs { flex: 1; padding: 16px 14px 12px; display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; overflow: hidden; }
.bub { max-width: 88%; padding: 10px 13px; border-radius: 14px; font-size: 13.5px; line-height: 1.45; color: var(--ink); background: var(--off-2); align-self: flex-start; opacity: 0; transform: translateY(8px); transition: opacity .5s var(--ease), transform .5s var(--ease); text-wrap: pretty; }
.bub.a { align-self: flex-end; background: var(--ink); color: #0b0c12; }
.bub.in { opacity: 1; transform: none; }
.bub .ph { display: block; margin-top: 8px; width: 120px; height: 76px; border-radius: 8px; background: linear-gradient(135deg, #2a2e3c, #3b4052); position: relative; overflow: hidden; }
.bub .ph::after { content: ""; position: absolute; left: 22%; right: 22%; bottom: 14%; height: 34%; border-radius: 40% 40% 6px 6px; background: rgba(255,255,255,.14); }
.typing { align-self: flex-end; display: inline-flex; gap: 4px; padding: 11px 13px; border-radius: 14px; background: rgba(255,255,255,.06); opacity: 0; transition: opacity .3s; }
.typing.in { opacity: 1; }
.typing i { width: 5px; height: 5px; border-radius: 50%; background: var(--text-2); animation: tdot 1.1s infinite ease-in-out; }
.typing i:nth-child(2) { animation-delay: .15s; } .typing i:nth-child(3) { animation-delay: .3s; }
@keyframes tdot { 0%, 80%, 100% { opacity: .25; transform: none; } 40% { opacity: 1; transform: translateY(-2px); } }
.convo .work { display: flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 14px; border-top: 1px solid var(--line); font: 400 11px var(--mono); color: var(--text-3); }
.convo .work .d { width: 6px; height: 6px; border-radius: 50%; background: #8f97ff; animation: pulse 1.2s ease-in-out infinite; flex: none; }
.convo .work.done .d { background: var(--ok); animation: none; }
.convo .work b { font-weight: 400; color: var(--text-2); }

.desk { position: absolute; left: 40%; top: 72px; width: 55.5%; height: 400px; }
.sys { position: absolute; inset: 0; border-radius: 12px; transform-origin: 0 0; transition: transform .9s var(--ease), opacity .9s var(--ease), filter .9s var(--ease); }
.sys.p0 { z-index: 3; }
.sys.p1 { z-index: 2; transform: translate(30px, -30px) scale(.955); opacity: .5; filter: brightness(.75); }
.sys.p2 { z-index: 1; transform: translate(60px, -60px) scale(.91); opacity: .22; filter: brightness(.6); }
.chrome { display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 12px; background: var(--win-2); border-bottom: 1px solid var(--line); }
.chrome .dots { display: flex; gap: 5px; } .chrome .dots i { width: 8px; height: 8px; border-radius: 50%; background: #2b2f3c; }
.chrome .url { flex: 1; min-width: 0; height: 24px; display: flex; align-items: center; gap: 7px; padding: 0 10px; border-radius: 6px; background: rgba(255,255,255,.035); border: 1px solid var(--line); font: 400 11px var(--mono); color: var(--text-2); white-space: nowrap; overflow: hidden; }
.chrome .url svg { width: 10px; height: 10px; flex: none; opacity: .6; }
.chrome .tag { font: 500 10px var(--mono); letter-spacing: .04em; color: #c9a8ff; border: 1px solid rgba(164,81,255,.35); background: rgba(164,81,255,.1); border-radius: 4px; padding: 2px 6px; white-space: nowrap; }
.chrome .app { font: 500 11.5px var(--sans); color: var(--text-2); white-space: nowrap; }
.scr { position: absolute; left: 0; right: 0; top: 38px; bottom: 0; padding: 18px 20px; opacity: 0; transition: opacity .35s var(--ease); pointer-events: none; }
.scr.on { opacity: 1; }
.ttl { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; font-size: 15px; font-weight: 500; color: var(--ink); }
.ttl small { font: 400 11px var(--mono); color: var(--text-3); }
.lbl { margin: 12px 0 6px; font: 400 10.5px var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--text-3); }
.inp { height: 34px; display: flex; align-items: center; padding: 0 11px; border-radius: 7px; border: 1px solid var(--line-2); background: rgba(255,255,255,.02); font-size: 13px; color: var(--ink); white-space: nowrap; overflow: hidden; transition: border-color .2s, box-shadow .2s; }
.inp:empty::before { content: attr(data-ph); color: var(--text-3); }
.inp.focus { border-color: rgba(143,151,255,.75); box-shadow: 0 0 0 3px rgba(79,91,255,.2); }
.inp.focus::after { content: ""; width: 1px; height: 15px; margin-left: 1px; background: var(--ink); animation: blink 1s steps(1) infinite; }
.inp.tall { height: 52px; align-items: flex-start; padding-top: 9px; white-space: normal; line-height: 1.4; }
@keyframes blink { 50% { opacity: 0; } }
.bx { display: inline-flex; align-items: center; height: 32px; padding: 0 13px; border-radius: 7px; border: 1px solid var(--line-2); font-size: 12.5px; color: var(--text-2); transition: transform .15s, box-shadow .2s, background .2s; }
.bx.pri { background: var(--ink); border-color: var(--ink); color: #0b0c12; font-weight: 500; }
.bx.pressed { transform: scale(.96); box-shadow: 0 0 0 4px rgba(79,91,255,.35); }
.acts { display: flex; gap: 8px; margin-top: 14px; }
.list > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 9px 10px; border-radius: 7px; font-size: 13px; color: var(--ink); transition: background .3s, opacity .4s; }
.list > div + div { margin-top: 2px; }
.list > div span.s { display: block; font: 400 10.5px var(--mono); color: var(--text-3); margin-top: 2px; }
.list > div .r { font: 400 12px var(--mono); color: var(--text-2); }
.list > div.hl { background: rgba(79,91,255,.16); }
.list > div.dim { opacity: .45; }
.list.hide > div { opacity: 0; }
.kv { display: grid; grid-template-columns: 128px 1fr; gap: 9px 14px; font-size: 13px; color: var(--ink); }
.kv > span:nth-child(odd) { color: var(--text-3); }
.route > div { display: grid; grid-template-columns: 18px 1fr auto; gap: 10px; align-items: center; padding: 8px 0; font-size: 13px; color: var(--ink); opacity: 0; transform: translateY(4px); transition: opacity .4s var(--ease), transform .4s var(--ease); }
.route > div.in { opacity: 1; transform: none; }
.route > div i { width: 9px; height: 9px; border-radius: 50%; background: var(--ok); justify-self: center; }
.route > div.held i { background: #f0c46a; }
.toast { position: absolute; left: 20px; right: 20px; bottom: 18px; display: flex; align-items: center; gap: 9px; padding: 11px 13px; border-radius: 9px; background: rgba(79,209,154,.09); border: 1px solid rgba(79,209,154,.3); color: var(--ok); font-size: 12.5px; opacity: 0; transform: translateY(8px); transition: opacity .45s var(--ease), transform .45s var(--ease); }
.toast.on { opacity: 1; transform: none; }
.toast.amber { background: rgba(240,196,106,.08); border-color: rgba(240,196,106,.3); color: #f0c46a; }
.cursor { position: absolute; left: 0; top: 0; z-index: 20; width: 20px; height: 20px; opacity: 0; pointer-events: none; transition: transform .8s cubic-bezier(.35,.7,.2,1), opacity .3s; filter: drop-shadow(0 3px 5px rgba(0,0,0,.55)); }
.cursor.on { opacity: 1; }
.cursor::after { content: ""; position: absolute; left: -9px; top: -9px; width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(143,151,255,.9); opacity: 0; transform: scale(.4); }
.cursor.down::after { animation: ripple .45s ease-out; }
@keyframes ripple { 0% { opacity: .9; transform: scale(.4); } 100% { opacity: 0; transform: scale(1.6); } }
.cursor svg { width: 20px; height: 20px; display: block; }

/* ---------- platform cards, animated ---------- */
.card .panel { height: 340px; }
.app { position: absolute; left: 8%; right: 8%; top: 58px; height: 252px; border-radius: 10px; background: var(--win); box-shadow: 0 30px 60px -24px rgba(0,0,0,.75), 0 0 0 1px rgba(255,255,255,.09); overflow: hidden; }
.app .chrome { height: 32px; } .app .chrome .url { height: 21px; font-size: 10.5px; }
.app .scr { top: 32px; padding: 14px 16px; }
.app .ttl { font-size: 14px; margin-bottom: 10px; }
.app .inp { height: 30px; font-size: 12.5px; }
.app .lbl { margin: 8px 0 5px; }
.app .bx { height: 28px; font-size: 12px; }
.app .toast { left: 14px; right: 14px; bottom: 12px; padding: 9px 11px; font-size: 12px; }
.app .list > div { padding: 7px 9px; font-size: 12.5px; }
.login { max-width: 300px; margin: 4px auto 0; }
.login .brandline { display: flex; align-items: center; gap: 8px; justify-content: center; margin-bottom: 10px; font-size: 13.5px; font-weight: 500; color: var(--ink); }
.login .brandline i { width: 18px; height: 18px; border-radius: 5px; background: linear-gradient(135deg, #3a3f52, #23263a); }
.login .bx.pri { width: 100%; justify-content: center; margin-top: 12px; }
.code { display: flex; gap: 7px; justify-content: center; margin-top: 6px; }
.code span { width: 34px; height: 40px; border-radius: 7px; border: 1px solid var(--line-2); display: grid; place-items: center; font: 500 16px var(--mono); color: var(--ink); transition: border-color .2s; }
.code span.f { border-color: rgba(143,151,255,.75); }
.mini .mb .meter { height: 4px; border-radius: 2px; background: rgba(255,255,255,.07); overflow: hidden; margin: 2px 0 10px; }
.mini .mb .meter i { display: block; height: 100%; width: 0; background: var(--grad); transition: width .2s linear; }
.mini .row, .mini .flag, .mini .tl > div, .mini .gw { transition: opacity .45s var(--ease), transform .45s var(--ease); }
.mini .hidden { opacity: 0; transform: translateY(6px); }
.mini .flag .sent { display: block; margin-top: 6px; color: var(--ok); opacity: 0; transition: opacity .4s; }
.mini .flag .sent.in { opacity: 1; }
.mini .gw .chip { transition: all .3s; }
.mini .gw .note { display: block; font-size: 11px; color: var(--ok); margin-top: 2px; opacity: 0; transition: opacity .4s; }
.mini .gw .note.in { opacity: 1; }

/* ---------- one case: no one-sided rules ---------- */
.chron .und { border-left: 0; background: rgba(255,255,255,.022); padding-left: 18px; }
.chron th:nth-child(3) { background: rgba(255,255,255,.022); padding-left: 18px !important; }

/* ---------- engineers ---------- */
.eng { align-items: stretch; }
.eng .copy { display: flex; flex-direction: column; justify-content: center; }
.eng .photo { min-height: 560px; height: auto; background-size: cover; background-position: center 60%; }
.eng .photo::after { background: linear-gradient(180deg, transparent 55%, rgba(7,8,13,.55)); }
.alum { margin-top: 36px; padding-top: 22px; border-top: 1px solid var(--line); }
.alum .lk { display: block; font-size: 13px; color: var(--text-3); margin-bottom: 16px; }
.alum .lgs { display: flex; align-items: center; gap: 40px; flex-wrap: wrap; color: #fff; }
.alum .lgs svg { height: 24px; width: auto; display: block; opacity: .82; }
.alum .lgs .goo svg { height: 26px; } .alum .lgs .ai svg { height: 17px; }

@media (max-width: 1100px) {
  .convo { width: 36%; } .desk { left: 44%; width: 52%; }
  .logos { grid-template-columns: 140px repeat(4, 1fr); }
}
@media (max-width: 860px) {
  .stage { height: auto; padding: 16px 14px 18px; }
  .stage .convo { position: relative; left: auto; top: auto; width: auto; height: 300px; }
  .desk { position: relative; left: auto; top: auto; width: auto; height: 360px; margin-top: 44px; }
  .sys.p1 { transform: translate(14px, -16px) scale(.97); } .sys.p2 { transform: translate(28px, -32px) scale(.94); }
  .logos { grid-template-columns: repeat(4, 1fr); }
  .eng .photo { min-height: 420px; }
  .app { left: 4%; right: 4%; }
}
@media (max-width: 640px) {
  .card .panel { height: 330px; padding: 0; }
  .card .mini, .card .app { position: absolute; left: 4% !important; right: 4% !important; top: 54px !important; }
  .logos { grid-template-columns: repeat(2, 1fr); } .logos span.l:nth-of-type(odd) { border-left: 0; }
}

.convo .ch .nm b { display: block; font-weight: 500; color: var(--ink); }
.route .r { font: 400 11.5px var(--mono); color: var(--text-3); }


/* ======================================================================================
   Dataland v10: v9 (dark, Newsreader headlines, Public Sans body) with three hero options,
   a lanes timeline for the example case, new engineer photos, and security badges.
   No one-sided borders anywhere: highlights are full fills or full outlines.
   ====================================================================================== */
.stage.hx { height: 600px; padding: 0; background-color: #07080d; }
.stage.hx::before { display: none; }
.hx .k { font: 400 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }

/* ---------- hero A: the case and its plan on the canvas, the agent's screen beside it ---------- */
.hA .side { position: absolute; left: 0; top: 0; bottom: 0; width: 36%; padding: 40px 28px 36px 40px; display: flex; flex-direction: column; z-index: 2; }
.hA .side .top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.hA .ask { margin-top: 16px; font: 400 23px/1.36 var(--serif); letter-spacing: -0.005em; color: var(--ink); text-wrap: pretty; min-height: 94px; }
.hA .who { margin-top: 8px; font-size: 13px; color: var(--text-3); }
.hA .steps { margin-top: 22px; display: flex; flex-direction: column; gap: 2px; }
.hA .steps li { display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: start; padding: 9px 12px; margin: 0 -12px; border-radius: 9px; font-size: 14px; line-height: 1.45; color: var(--text-3); transition: background .45s var(--ease), color .45s var(--ease); }
.hA .steps li .n { width: 22px; height: 22px; margin-top: -1px; border-radius: 50%; border: 1px solid var(--line-2); display: grid; place-items: center; font: 400 10.5px var(--mono); color: var(--text-3); transition: all .4s var(--ease); }
.hA .steps li .m { display: block; margin-top: 2px; font: 400 10.5px var(--mono); color: var(--text-3); opacity: .8; }
.hA .steps li.on { background: rgba(255,255,255,.065); color: var(--ink); }
.hA .steps li.on .n { border-color: rgba(143,151,255,.9); background: rgba(79,91,255,.28); color: #fff; }
.hA .steps li.done { color: var(--text-2); }
.hA .steps li.done .n { border-color: rgba(79,209,154,.45); color: var(--ok); }
.hA .screen { position: absolute; left: 39%; right: 4%; top: 40px; bottom: 40px; z-index: 2; }
.hA .screen .chrome .appn { margin-left: auto; font: 500 11.5px var(--sans); color: var(--text-2); white-space: nowrap; }
.hA .screen .scr { padding: 22px 24px; transition: opacity .45s var(--ease); }
.hA .link { position: absolute; z-index: 3; height: 1px; pointer-events: none; background: linear-gradient(90deg, rgba(143,151,255,0), rgba(143,151,255,.85)); transition: top .55s var(--ease), left .55s var(--ease), width .55s var(--ease), opacity .4s; opacity: 0; }
.hA .link.on { opacity: 1; }
.hA .link::after { content: ""; position: absolute; right: -3px; top: -3px; width: 7px; height: 7px; border-radius: 50%; background: #aab0ff; box-shadow: 0 0 10px rgba(143,151,255,.9); }
.thread { display: flex; flex-direction: column; gap: 10px; }
.thread .bub { opacity: 1; transform: none; max-width: 80%; }
.thread .bub.a.hid { opacity: 0; transform: translateY(8px); }
.compose { position: absolute; left: 24px; right: 24px; bottom: 22px; display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: end; }
.compose .inp.tall { height: 76px; }
.route .r .chip { height: 21px; font-size: 11px; }

/* ---------- hero B: the hairline map ---------- */
.hB svg.scene { position: absolute; inset: 18px 0 0 0; width: 100%; height: calc(100% - 18px); font-family: var(--sans); overflow: visible; }
.scene .grid path { stroke: rgba(206,211,234,0.07); stroke-width: 1; fill: none; }
.scene .grid .foot { stroke: rgba(206,211,234,0.28); stroke-dasharray: 3 4; }
.scene .wire { fill: none; stroke: rgba(206,211,234,0.16); stroke-width: 1; }
.scene .litwire { fill: none; stroke: url(#hz); stroke-width: 1.7; stroke-linecap: round; filter: drop-shadow(0 0 4px rgba(79,91,255,0.75)); }
.scene .tile .body { fill: #0b0c14; stroke: rgba(206,211,234,0.42); stroke-width: 1; stroke-linejoin: round; transition: stroke .5s; }
.scene .tile .fill { fill: url(#tileG); opacity: 0; transition: opacity .6s; }
.scene .tile .edge { fill: none; stroke: rgba(206,211,234,0.42); stroke-width: 1; stroke-linejoin: round; transition: stroke .5s; }
.scene .tile .glyph { fill: none; stroke: rgba(206,211,234,0.5); stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; transition: stroke .5s; }
.scene .tile .tlbl { font-size: 15px; fill: #c9cde0; transition: fill .4s; }
.scene .tile .status { font: 400 12.5px var(--mono); fill: #b6b4ff; opacity: 0; transition: opacity .45s; }
.scene .tile .status.note { opacity: .55; fill: #7c8196; }
.scene .tile .status.show { opacity: 1; }
.scene .tile .status.day { fill: #d2b3ff; }
.scene .tile .status.ok { fill: #8fe3bf; }
.scene .tile.on .fill, .scene .tile.src .fill, .scene .tile.done .fill { opacity: .92; }
.scene .tile.on .edge, .scene .tile.src .edge, .scene .tile.done .edge, .scene .tile.on .body, .scene .tile.src .body, .scene .tile.done .body { stroke: rgba(200,205,255,0.85); }
.scene .tile.on .glyph, .scene .tile.src .glyph, .scene .tile.done .glyph { stroke: rgba(255,255,255,0.95); }
.scene .tile.on .tlbl, .scene .tile.src .tlbl, .scene .tile.done .tlbl { fill: #fff; }
.scene .amb { fill: #c9cdf5; } .scene .pulse { fill: #fff; } .scene .halo { fill: #6d6bff; opacity: .35; filter: url(#soft); }
.hB .cap { position: absolute; z-index: 3; left: 44px; bottom: 40px; width: 380px; }
.hB .cap .bars { display: flex; gap: 6px; margin-bottom: 16px; }
.hB .cap .bars i { position: relative; flex: 1; height: 14px; cursor: pointer; }
.hB .cap .bars i::before, .hB .cap .bars i::after { content: ""; position: absolute; left: 0; right: 0; top: 6px; height: 2px; border-radius: 1px; background: rgba(222,226,245,0.14); }
.hB .cap .bars i::after { background: var(--grad); transform: scaleX(var(--p, 0)); transform-origin: 0 50%; }
.hB .cap .bars i.done::after { transform: scaleX(1); opacity: .45; }
.hB .cap .title { font: 400 24px/1.25 var(--serif); color: var(--ink); }
.hB .cap .step { margin-top: 8px; min-height: 44px; font-size: 14.5px; line-height: 1.5; color: var(--text-2); opacity: 0; transform: translateY(4px); transition: opacity .4s, transform .4s; text-wrap: pretty; }
.hB .cap .step.show { opacity: 1; transform: none; }

/* ---------- hero C: the case report ---------- */
.hC .report { position: absolute; left: 4.5%; top: 36px; bottom: 36px; width: 60%; z-index: 2; display: flex; flex-direction: column; padding: 26px 30px 0; }
.hC .report .top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.hC .report .ask { margin-top: 14px; font: 400 21px/1.4 var(--serif); color: var(--ink); text-wrap: pretty; }
.hC .report .who { margin-top: 6px; font-size: 12.5px; color: var(--text-3); padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.hC .clog { flex: 1; min-height: 0; overflow: hidden; padding-top: 6px; display: flex; flex-direction: column; justify-content: flex-start; }
.hC .clog .row { display: grid; grid-template-columns: 84px minmax(0, 1fr) auto; gap: 12px; align-items: baseline; padding: 7px 0; font-size: 13.5px; line-height: 1.45; color: var(--ink); opacity: 0; transform: translateY(5px); transition: opacity .4s var(--ease), transform .4s var(--ease); }
.hC .clog .row.in { opacity: 1; transform: none; }
.hC .clog .row .t { font: 400 11px var(--mono); color: var(--text-3); white-space: nowrap; }
.hC .clog .row .t b { font-weight: 400; color: var(--text-2); }
.hC .clog .row .sy { font: 400 11px var(--mono); color: var(--text-3); white-space: nowrap; }
.hC .clog .row.msg .x { color: #cfd2ff; }
.hC .clog .row.msg .x::before { content: "To the customer · "; color: var(--text-3); }
.hC .clog .row.wait { color: var(--text-3); }
.hC .clog .row.wait .x { display: flex; align-items: center; gap: 10px; }
.hC .clog .row.wait .x::after { content: ""; flex: 1; height: 0; border-top: 1px dashed rgba(255,255,255,.16); }
.hC .clog .row.cur .x { color: #fff; }
.hC .report .sum { min-height: 53px; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 -30px; padding: 14px 30px; border-top: 1px solid var(--line); font-size: 13px; color: var(--text-2); opacity: 0; transition: opacity .5s; }
.hC .report .sum.in { opacity: 1; }
.hC .tally { position: absolute; right: 4.5%; top: 36px; bottom: 36px; width: 26%; z-index: 2; display: flex; flex-direction: column; justify-content: center; gap: 30px; }
.hC .tally div { display: flex; flex-direction: column; gap: 4px; }
.hC .tally b { font: 400 60px/1 var(--serif); color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; transition: color .3s; }
.hC .tally b.bump { color: #c9cdff; }
.hC .tally span { font-size: 13.5px; color: var(--text-2); }

/* ---------- example case: lanes over time ---------- */
.lanes { margin-top: 48px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--surface); overflow: hidden; }
.lanes .ltop { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 18px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.lanes .tabs { display: flex; gap: 4px; flex-wrap: wrap; }
.lanes .tabs button { appearance: none; border: 1px solid transparent; background: none; color: var(--text-2); font: 500 13.5px var(--sans); padding: 7px 13px; border-radius: 999px; cursor: pointer; transition: all .2s; }
.lanes .tabs button:hover { color: var(--ink); }
.lanes .tabs button.on { color: var(--ink); background: rgba(255,255,255,.07); border-color: var(--line-2); }
.lanes .ctl { display: flex; gap: 6px; }
.lanes .ctl button { appearance: none; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line-2); background: none; color: var(--ink); display: grid; place-items: center; cursor: pointer; }
.lanes .ctl button:hover { border-color: rgba(255,255,255,.4); }
.lanes .ctl button svg { width: 14px; height: 14px; }
.lanes .goal { padding: 22px 26px 4px; font: 400 24px/1.3 var(--serif); color: var(--ink); }
.lanes .goal span { color: var(--text-3); }
.lanes .chart { position: relative; padding: 8px 18px 0 8px; }
.lanes svg.lv { display: block; width: 100%; height: auto; overflow: visible; }
.lv .day { font: 400 10.5px var(--mono); letter-spacing: .06em; fill: var(--text-3); text-transform: uppercase; }
.lv .lane { font: 400 10.5px var(--mono); letter-spacing: .06em; fill: var(--text-3); text-transform: uppercase; }
.lv .lane.cur { fill: var(--ink); }
.lv .lg { fill: none; stroke: rgba(206,211,234,.45); stroke-width: 1.1; }
.lv .gl { stroke: rgba(255,255,255,.055); stroke-width: 1; }
.lv .gl.lane-l { stroke: rgba(255,255,255,.035); }
.lv .cn { fill: none; stroke: rgba(206,211,234,.28); stroke-width: 1; transition: stroke .3s; }
.lv .cn.past { stroke: rgba(160,168,255,.55); }
.lv .wt { stroke: rgba(206,211,234,.35); stroke-width: 1; stroke-dasharray: 2 4; }
.lv .wtl { font: 400 10.5px var(--mono); fill: var(--text-3); }
.lv .ev { cursor: pointer; }
.lv .ev .g { fill: var(--surface); stroke: rgba(206,211,234,.55); stroke-width: 1.3; transition: fill .3s, stroke .3s; }
.lv .ev.past .g { fill: #6f78ff; stroke: #8f97ff; }
.lv .ev.cur .g { fill: #fff; stroke: #fff; }
.lv .ev .hit { fill: transparent; }
.lv .ev .ring { fill: none; stroke: #8f97ff; stroke-width: 1.3; opacity: 0; }
.lv .ev.cur .ring { opacity: 1; animation: ringp 1.6s ease-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes ringp { 0% { transform: scale(.7); opacity: .9; } 100% { transform: scale(1.9); opacity: 0; } }
.lv .ph { stroke: #8f97ff; stroke-width: 1.3; }
.lv .phd { fill: #8f97ff; }
.lanes .ldet { display: grid; grid-template-columns: 170px minmax(0, 1fr) auto; gap: 24px; align-items: start; margin: 8px 18px 18px; padding: 20px 22px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.02); min-height: 132px; }
.lanes .ldet .meta .k { display: block; }
.lanes .ldet .meta b { display: block; margin-top: 6px; font: 400 26px/1.1 var(--serif); color: var(--ink); }
.lanes .ldet .meta span.tm { display: block; margin-top: 4px; font: 400 11px var(--mono); color: var(--text-3); }
.lanes .ldet h4 { font: 500 16px/1.4 var(--sans); color: var(--ink); }
.lanes .ldet p { margin-top: 6px; font-size: 14.5px; line-height: 1.55; color: var(--text-2); max-width: 620px; text-wrap: pretty; }
.lanes .ldet .bq { display: inline-block; margin-top: 10px; padding: 10px 14px; border-radius: 14px; background: var(--off-2); color: var(--ink); font-size: 14.5px; line-height: 1.5; max-width: 560px; }
.lanes .ldet .bq.a { background: var(--ink); color: #0b0c12; }
.lanes .ldet .sys { margin-top: 10px; font: 400 11px var(--mono); color: var(--text-3); }
.lanes .ldet .body { transition: opacity .3s; } .lanes .ldet .body.fade { opacity: 0; }

/* ---------- engineers photo options ---------- */
.eng .photo { background-position: center 30%; }
.eng .photo::after { background: linear-gradient(180deg, transparent 70%, rgba(7,8,13,.35)); }

/* ---------- CTA ---------- */
.cta .btn.ghostw .ar { margin-left: 2px; }

/* ---------- footer: security badges bottom left ---------- */
.foot .fb { align-items: center; }
.seals { display: flex; align-items: center; gap: 14px; }
.seal { width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; text-align: center; color: #d7daea; border: 1px solid rgba(215,218,234,.38); box-shadow: inset 0 0 0 3px #0a0b10, inset 0 0 0 4px rgba(215,218,234,.18); }
.seal b { display: block; font: 600 11.5px/1 var(--sans); letter-spacing: .04em; }
.seal i { display: block; margin-top: 3px; font: 400 7.5px/1 var(--mono); font-style: normal; letter-spacing: .1em; color: var(--text-3); text-transform: uppercase; }
.foot .fb .mid { display: flex; flex-direction: column; align-items: center; gap: 4px; }

/* ---------- review-only switcher ---------- */
.review:not(.chip) { position: fixed; right: 16px; bottom: 16px; z-index: 60; display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 12px; border-radius: 999px; background: rgba(16,18,26,.92); border: 1px solid var(--line-2); font: 400 12px var(--sans); color: var(--text-2); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.review select { appearance: none; -webkit-appearance: none; border: 1px solid var(--line-2); background: #1a1d28; color: var(--ink); font: 500 12px var(--sans); padding: 5px 26px 5px 10px; border-radius: 999px; background-image: linear-gradient(45deg, transparent 50%, #a2a6b8 50%), linear-gradient(135deg, #a2a6b8 50%, transparent 50%); background-position: calc(100% - 14px) 50%, calc(100% - 10px) 50%; background-size: 4px 4px; background-repeat: no-repeat; cursor: pointer; }
.review .sep { width: 1px; height: 18px; background: var(--line-2); margin: 0 2px; }

@media (max-width: 1100px) {
  .hA .side { width: 40%; } .hA .screen { left: 42%; }
  .hC .report { width: 64%; } .hC .tally { width: 24%; } .hC .tally b { font-size: 48px; }
}
@media (max-width: 860px) {
  .stage.hx { height: auto; padding: 18px 14px; }
  .hA .side { position: relative; width: auto; padding: 8px 6px 18px; }
  .hA .ask { font-size: 20px; min-height: 0; }
  .hA .screen { position: relative; left: auto; right: auto; top: auto; bottom: auto; height: 400px; }
  .hA .link { display: none; }
  .hB svg.scene { position: relative; inset: auto; height: auto; aspect-ratio: 1110 / 580; }
  .hB .cap { position: relative; left: auto; bottom: auto; width: auto; margin: 4px 8px 4px; }
  .hC .report { position: relative; left: auto; top: auto; bottom: auto; width: auto; height: 470px; padding: 20px 18px 0; }
  .hC .report .sum { margin: 0 -18px; padding: 12px 18px; }
  .hC .tally { position: relative; right: auto; top: auto; bottom: auto; width: auto; flex-direction: row; flex-wrap: wrap; gap: 18px 28px; margin-top: 18px; padding: 0 6px; }
  .hC .tally b { font-size: 38px; }
  .lanes .ldet { grid-template-columns: 1fr; gap: 10px; }
  .foot .fb { flex-direction: column; align-items: flex-start; gap: 18px; }
}
@media (max-width: 640px) {
  .hA .screen { height: 380px; } .hA .screen .scr { padding: 16px; }
  .hB .scene .tile .tlbl, .hB .scene .tile .status { display: none; }
  .hC .clog .row { grid-template-columns: minmax(0, 1fr); gap: 2px; } .hC .clog .row .sy { display: none; } .hC .clog .row.wait .t { display: none; }
  .lanes .goal { font-size: 20px; padding: 18px 16px 0; }
  .lanes .chart { overflow-x: auto; -webkit-overflow-scrolling: touch; } .lanes svg.lv { min-width: 780px; }
  .review:not(.chip) { left: 12px; right: 12px; justify-content: space-between; flex-wrap: wrap; border-radius: 16px; }
}
@media (prefers-reduced-motion: reduce) { .scene .litwire { transition: none !important; } .lv .ev.cur .ring { animation: none; } }

/* ---------- problem: the statement full width, the detail in two columns below ---------- */
.problem2 h2 { max-width: 940px; }
.problem2 [data-prob-opt] > div { margin-top: 36px; display: grid; grid-template-columns: 1fr 1fr; gap: 48px; max-width: 1040px; }
.problem2 p { font-size: 18px; line-height: 1.65; color: var(--text-2); text-wrap: pretty; }
@media (max-width: 860px) { .problem2 [data-prob-opt] > div { grid-template-columns: 1fr; gap: 16px; } .problem2 p { font-size: 17px; } }

.problem2 [data-prob-opt] > div.one { grid-template-columns: 1fr; max-width: 720px; margin-top: 22px; }
.problem2 .one p { font-size: 19px; }

/* ======================================================================================
   v12 hero spectrum: from many cases (1) to one case at a time (5). Case text is set in
   Public Sans (with the mono for system names) so it never competes with the serif H1.
   ====================================================================================== */
.stage.hx.hs { height: 470px; }
.hs .tk, .hs .card4, .hs .list3 { font-family: var(--sans); }
.hs .tt { font: 500 15.5px/1.38 var(--sans); letter-spacing: -0.01em; color: var(--ink); text-wrap: pretty; }
.hs .ms { font: 400 11px var(--mono); color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hs .ms i { font-style: normal; transition: color .3s; }
.hs .ms i.on { color: #c3c8ff; }
.hs .tm { font-size: 12.5px; color: var(--text-3); white-space: nowrap; }
.hs .sy { height: 32px; padding: 0 13px; display: inline-flex; align-items: center; gap: 7px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(10,11,16,.55); font-size: 13px; color: var(--text-3); white-space: nowrap; transition: all .35s var(--ease); }
.hs .sy svg { width: 14px; height: 14px; opacity: .8; }
.hs .sy.on { color: var(--ink); border-color: rgba(143,151,255,.6); background: rgba(79,91,255,.16); }
.hs .cn { width: 34px; height: 1px; background: var(--line-2); transition: background .3s; }
.hs .cn.on { background: rgba(143,151,255,.6); }
.hs .path { display: flex; align-items: center; flex-wrap: wrap; row-gap: 8px; }
.hs .bars { position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%); display: flex; gap: 6px; z-index: 3; }
.hs .bars b { width: 34px; height: 3px; border-radius: 2px; background: rgba(255,255,255,.12); overflow: hidden; position: relative; }
.hs .bars b i { position: absolute; inset: 0; width: 0; background: rgba(185,190,255,.85); }
.hs .bars b.done i { width: 100%; }

/* 1 · rows drifting */
.s1 .rows { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: 14px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.s1 .row { display: flex; gap: 14px; width: max-content; animation: mq var(--dur, 70s) linear infinite; }
.s1 .row.rev { animation-direction: reverse; }
@keyframes mq { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.hs .tk { width: 300px; flex: none; padding: 16px 18px 14px; border-radius: 10px; background: var(--win); box-shadow: 0 24px 50px -24px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.08); display: flex; flex-direction: column; gap: 9px; }
.hs .tk .tt { min-height: 43px; }
.hs .tk .ft { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 2px; }

/* 2 · grid, one case lights up */
.s2 .grid { position: absolute; left: 4%; right: 4%; top: 34px; bottom: 34px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 14px; }
.hs .tk { min-width: 0; }
.s2 .tk { width: auto; opacity: .42; transition: opacity .5s var(--ease), box-shadow .5s var(--ease), transform .5s var(--ease); }
.s2 .tk.on { opacity: 1; transform: translateY(-2px); box-shadow: 0 30px 60px -24px rgba(0,0,0,.85), 0 0 0 1px rgba(143,151,255,.55); }
.s2 .tk .tt { min-height: 0; }

/* 3 · list, one case opens */
.s3 .list3 { left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(780px, 88%); padding: 8px; border-radius: 12px; }
.s3 .it { padding: 12px 14px; border-radius: 9px; transition: background .45s var(--ease); }
.s3 .it .top { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center; }
.s3 .it .tt { font-size: 15px; color: var(--text-2); transition: color .4s; }
.s3 .it .more { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--ease); }
.s3 .it .more > div { overflow: hidden; }
.s3 .it .more .path { padding-top: 12px; }
.s3 .it .more .out { padding-top: 10px; }
.s3 .it.on { background: rgba(255,255,255,.055); }
.s3 .it.on .tt { color: var(--ink); }
.s3 .it.on .more { grid-template-rows: 1fr; }
.s3 .it + .it { margin-top: 2px; }

/* 4 · one case, more stacked behind */
.s4 .deck { position: absolute; left: 50%; top: 56%; width: min(660px, 86%); height: 236px; transform: translate(-50%, -50%); }
.s4 .card4 { position: absolute; inset: 0; padding: 26px 30px; border-radius: 14px; transform-origin: 50% 0; transition: transform .7s var(--ease), opacity .7s var(--ease), filter .7s var(--ease); display: flex; flex-direction: column; }
.s4 .card4.p0 { z-index: 3; }
.s4 .card4.p1 { z-index: 2; transform: translateY(-22px) scale(.95); opacity: .55; filter: brightness(.7); }
.s4 .card4.p2 { z-index: 1; transform: translateY(-42px) scale(.9); opacity: .25; filter: brightness(.55); }
.s4 .card4 > * { transition: opacity .5s var(--ease); }
.s4 .card4.p1 > *, .s4 .card4.p2 > * { opacity: 0; }
.s4 .card4.p0 > * { transition-delay: .32s; }
.s4 .card4.out > * { opacity: 0; transition-delay: 0s; transition-duration: .25s; }
.s4 .card4.out { z-index: 4; transform: translateY(40px) scale(1.02); opacity: 0; }
.s4 .card4 .tt { font-size: 26px; line-height: 1.25; letter-spacing: -0.02em; }
.s4 .card4 .l2 { margin-top: 8px; font-size: 15px; color: var(--text-2); line-height: 1.5; }
.s4 .card4 .path { margin-top: auto; }
.s4 .card4 .row4 { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-top: auto; }

/* 5 · one case at a time */
.s5 .ebox { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 8%; }
.s5 .l1 { font: 500 40px/1.16 var(--sans); letter-spacing: -0.032em; color: var(--ink); max-width: 820px; text-wrap: balance; transition: opacity .45s var(--ease), transform .45s var(--ease); }
.s5 .l2 { margin-top: 14px; font-size: 18px; color: var(--text-2); max-width: 640px; text-wrap: balance; transition: opacity .45s var(--ease) .08s, transform .45s var(--ease) .08s; }
.s5 .path { margin-top: 34px; justify-content: center; transition: opacity .35s; }
.s5 .sy { height: 36px; padding: 0 15px; font-size: 13.5px; }
.s5 .cn { width: 44px; }
.s5 .eout { margin-top: 24px; min-height: 26px; transition: opacity .4s; }
.s5 .fade .l1, .s5 .fade .l2 { opacity: 0; transform: translateY(8px); }
.s5 .fade .eout, .s5 .fade .path { opacity: 0; }

@media (max-width: 1100px) { .s2 .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(3, 1fr); } .s2 .tk:nth-child(n+7) { display: none; } }
@media (max-width: 860px) {
  .stage.hx.hs { height: 470px; padding: 0; }
  .s2 .grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: repeat(3, minmax(0, 1fr)); } .s2 .tk:nth-child(n+4) { display: none; }
  .s3 .it:nth-child(n+5) { display: none; }
  .s3 .cn, .s4 .cn { display: none; } .s3 .path, .s4 .path { gap: 6px; } .s3 .sy, .s4 .sy { height: 28px; font-size: 12px; padding: 0 10px; }
  .stage.hx.hs.s4 { height: 520px; }
  .s4 .card4 .tt { padding-right: 0 !important; } .s4 .ck4 { position: static !important; display: block; margin-bottom: 12px; } .s4 .deck { height: 380px; top: 55%; } .s4 .card4 { padding: 22px 20px; }
  .s4 .card4 .tt { font-size: 21px; } .s4 .deck { height: 280px; }
  .s5 .l1 { font-size: 29px; } .s5 .l2 { font-size: 16px; } .s5 .cn { width: 18px; }
  .s3 .it .top .tm { display: none; }
}
@media (prefers-reduced-motion: reduce) { .s1 .row { animation: none; } }

/* ---------- 4a / 4b: livelier versions of 4 ---------- */
@property --ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes ringspin { to { --ang: 360deg; } }
.live-ring::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1.5px; pointer-events: none; z-index: 2;
  background: conic-gradient(from var(--ang), rgba(30,105,255,0) 0deg, rgba(30,105,255,.0) 200deg, #1E69FF 280deg, #A451FF 340deg, rgba(164,81,255,0) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0; transition: opacity .5s var(--ease); animation: ringspin 2.6s linear infinite; }
.live-ring.working::before { opacity: 1; }
.live-ring.solved { box-shadow: 0 40px 80px -30px rgba(0,0,0,.75), 0 0 0 1px rgba(79,209,154,.45); }
.now { display: flex; align-items: center; gap: 9px; margin-top: 12px; min-height: 18px; font: 400 12px var(--mono); color: #b9bfff; }
.now .d { width: 6px; height: 6px; border-radius: 50%; background: #8f97ff; flex: none; animation: pulse 1.2s ease-in-out infinite; }
.now.ok { color: var(--ok); } .now.ok .d { background: var(--ok); animation: none; }
.now .nt { transition: opacity .25s; } .now .nt.swap { opacity: 0; }
.drift { background-size: 125% auto; animation: bgdrift 26s ease-in-out infinite alternate; }
@keyframes bgdrift { from { background-position: 35% 40%; } to { background-position: 65% 60%; } }
.s4a .card4 .path { margin-top: 14px; }

/* 4b · flow: next -> working -> resolved */
.s4b .flow { position: absolute; inset: 0; }
.s4b .c7 { position: absolute; left: 50%; top: 50%; width: min(560px, 48%); height: 250px; padding: 24px 26px; border-radius: 14px; display: flex; flex-direction: column; transform-origin: 50% 50%;
  transition: transform .9s cubic-bezier(.3,.7,.2,1), left .9s cubic-bezier(.3,.7,.2,1), opacity .6s var(--ease), filter .6s var(--ease); }
.s4b .c7 .tt { font-size: 25px; line-height: 1.25; letter-spacing: -0.02em; padding-right: 170px; }
.s4b .c7 .l2 { margin-top: 8px; font-size: 15px; color: var(--text-2); line-height: 1.5; }
.s4b .c7 .path { margin-top: auto; }
.s4b .c7 .ck4 { position: absolute; right: 24px; top: 24px; }
.s4b .c7.act { left: 50%; transform: translate(-50%, -50%) scale(1); z-index: 6; }
.s4b .c7.q0 { left: 15%; transform: translate(-50%, -50%) scale(.42); z-index: 5; filter: brightness(.9); }
.s4b .c7.q1 { left: 15%; transform: translate(calc(-50% - 20px), calc(-50% - 24px)) scale(.42); z-index: 4; opacity: .55; filter: brightness(.7); }
.s4b .c7.q2 { left: 15%; transform: translate(calc(-50% - 40px), calc(-50% - 48px)) scale(.42); z-index: 3; opacity: .25; filter: brightness(.6); }
.s4b .c7.q3 { left: 15%; transform: translate(calc(-50% - 60px), calc(-50% - 72px)) scale(.42); z-index: 2; opacity: 0; }
.s4b .c7.d0 { left: 85%; transform: translate(-50%, -50%) scale(.42); z-index: 5; }
.s4b .c7.d1 { left: 85%; transform: translate(calc(-50% + 20px), calc(-50% - 24px)) scale(.42); z-index: 4; opacity: .55; filter: brightness(.7); }
.s4b .c7.d2 { left: 85%; transform: translate(calc(-50% + 40px), calc(-50% - 48px)) scale(.42); z-index: 3; opacity: .25; filter: brightness(.6); }
.s4b .c7.gone { left: 85%; transform: translate(calc(-50% + 60px), calc(-50% - 72px)) scale(.42); z-index: 2; opacity: 0; }
.s4b .c7.q0 .now, .s4b .c7.q1 .now, .s4b .c7.q2 .now { visibility: hidden; }
.s4b .c7 > * { transition: opacity .5s var(--ease); }
.s4b .c7.q1 > *, .s4b .c7.q2 > *, .s4b .c7.q3 > *, .s4b .c7.d1 > *, .s4b .c7.d2 > *, .s4b .c7.gone > * { opacity: 0; }
.s4b .cn { width: 18px; } .s4b .sy { padding: 0 11px; }
.s4b .flab { position: absolute; top: calc(50% + 70px); transform: translateX(-50%); font: 400 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.s4b .flab.fl { left: 15%; } .s4b .flab.fr { left: 85%; }
@media (max-width: 860px) {
  .s4b .c7 { width: 88%; height: 330px; padding: 22px 20px; } .s4b .c7 .tt { font-size: 21px; padding-right: 0 !important; } .s4b .c7 .ck4 { position: static !important; display: block; margin-bottom: 12px; }
  .s4b .c7:not(.act) { opacity: 0 !important; } .s4b .flab { display: none; }
  .s4b .cn { display: none; } .s4b .path { gap: 6px; } .s4b .sy { height: 28px; font-size: 12px; padding: 0 10px; }
  .stage.hx.hs.s4b, .stage.hx.hs.s4a { height: 520px; }
}
@media (prefers-reduced-motion: reduce) { .drift, .live-ring::before { animation: none; } }

@media (max-width: 860px) { .drift { background-size: cover; animation: none; } .s4a .deck { height: 410px; top: 54%; } .stage.hx.hs.s4a { height: 560px; } }

/* ---------- more 4a variations (4c to 4f) ---------- */
/* 4c · fanned stack, the finished card swipes away */
.s4c .card4 { transform-origin: 50% 100%; }
.s4c .card4.p1 { transform: translate(-46px, -6px) rotate(-4.5deg) scale(.95); opacity: .62; filter: brightness(.72); }
.s4c .card4.p2 { transform: translate(48px, -10px) rotate(4.5deg) scale(.92); opacity: .38; filter: brightness(.6); }
.s4c .card4.p1 > *, .s4c .card4.p2 > * { opacity: 0; }
.s4c .card4.out { transform: translate(115%, -24px) rotate(10deg); opacity: 0; }
/* 4d / 4e / 4f · taller cards */
.s4d .deck, .s4e .deck, .s4f .deck { height: 300px; top: 54%; }
/* 4d · checklist */
.stl { margin-top: 18px; display: flex; flex-direction: column; gap: 10px; }
.stl li { display: grid; grid-template-columns: 16px 140px minmax(0, 1fr); gap: 12px; align-items: center; font-size: 14.5px; color: var(--text-3); transition: color .35s; }
.stl .mk { width: 14px; height: 14px; border-radius: 50%; border: 1px solid var(--line-2); display: grid; place-items: center; transition: all .3s; }
.stl .sn { font: 400 11px var(--mono); color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .35s; }
.stl li.on { color: var(--ink); } .stl li.on .mk { border-color: #8f97ff; background: rgba(79,91,255,.35); animation: pulse 1.2s ease-in-out infinite; }
.stl li.on .sn, .stl li.done .sn { color: #b9bfff; }
.stl li.done { color: var(--text-2); } .stl li.done .mk { border-color: rgba(79,209,154,.55); }
.stl li.done .mk::after { content: ""; width: 6px; height: 3px; border-left: 1.5px solid var(--ok); border-bottom: 1.5px solid var(--ok); transform: rotate(-45deg) translate(1px, -1px); }
/* 4e · systems down the side */
.s4e .card4 { flex-direction: row; gap: 30px; }
.s4e .lc { flex: 1.15; min-width: 0; display: flex; flex-direction: column; }
.s4e .lc .ck4 { align-self: flex-start; margin-bottom: 14px; min-height: 24px; }
.s4e .rc { flex: 1; position: relative; display: flex; flex-direction: column; justify-content: space-between; padding: 2px 0; }
.s4e .rc::before { content: ""; position: absolute; left: 13px; top: 14px; bottom: 14px; width: 1px; background: var(--line-2); }
.s4e .rc .fillv { position: absolute; left: 13px; top: 14px; width: 1px; height: 0; background: linear-gradient(#1E69FF, #A451FF); transition: height .6s var(--ease); }
.vn { position: relative; display: grid; grid-template-columns: 27px minmax(0, 1fr); gap: 12px; align-items: start; }
.vn .vi { width: 27px; height: 27px; border-radius: 50%; border: 1px solid var(--line-2); background: var(--win); display: grid; place-items: center; color: var(--text-3); z-index: 1; transition: all .35s; }
.vn .vi svg { width: 13px; height: 13px; }
.vn b { display: block; padding-top: 4px; font: 500 13.5px var(--sans); color: var(--text-3); transition: color .35s; }
.vn .vs { display: block; max-height: 0; opacity: 0; overflow: hidden; font: 400 11.5px/1.45 var(--mono); color: #b9bfff; transition: max-height .4s var(--ease), opacity .4s, margin .4s; }
.vn.on .vi { border-color: rgba(143,151,255,.85); background: rgba(79,91,255,.32); color: #fff; } .vn.on b { color: var(--ink); } .vn.on .vs { max-height: 40px; opacity: 1; margin-top: 3px; }
.vn.done .vi { border-color: rgba(79,209,154,.5); color: var(--ok); } .vn.done b { color: var(--text-2); }
/* 4f · the customer's message, then the work */
.askf { font: 400 11px var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--text-3); }
.askq { margin-top: 10px; padding-right: 150px; font: 500 23px/1.32 var(--sans); letter-spacing: -0.02em; color: var(--ink); text-wrap: pretty; }
.now.type { margin-top: 16px; } .now.type .caret { display: inline-block; width: 7px; height: 14px; margin-left: 1px; background: #b9bfff; animation: blink 1s steps(1) infinite; }
.now.type.ok .caret { display: none; }
@media (max-width: 860px) {
  .s4d .deck, .s4e .deck, .s4f .deck { height: 440px; top: 54%; } .stage.hx.hs.s4d, .stage.hx.hs.s4e, .stage.hx.hs.s4f { height: 600px; }
  .s4e .card4 { flex-direction: column; gap: 14px; } .s4e .rc { gap: 10px; }
  .stl li { grid-template-columns: 16px minmax(0, 1fr); } .stl .sn { display: none; }
  .askq { padding-right: 0; font-size: 19px; } .s4c .card4.p1, .s4c .card4.p2 { opacity: .25; }
}

.s4e .card4 .tt { font-size: 22px; }

.s4f .deck { height: 256px; }
.s4f .card4 .path { margin-top: auto; }
@media (max-width: 860px) { .s4f .deck { height: 400px; } }

/* ======================================================================================
   v13: the chosen site. Hero 4a with monochrome badges (Arthur: the colored badges were
   distracting). The only color left in the hero is the logo-gradient border while a case
   is being worked. Platform pills across the page are monochrome too.
   ====================================================================================== */
.hs .sy.on { color: var(--ink); border-color: rgba(255,255,255,.34); background: rgba(255,255,255,.07); }
.hs .cn.on { background: rgba(255,255,255,.34); }
.hs .chip, .hs .chip.work, .hs .chip.done, .hs .chip.wait, .hs .chip.review { color: var(--text); border-color: rgba(255,255,255,.18); background: rgba(255,255,255,.04); }
.hs .chip.work .d { background: #fff; }
.hs .chip.done .d, .now.ok .d { width: 8px; height: 4px; border-radius: 0; background: none; border-left: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg) translate(1px, -1px); animation: none; }
.now { color: var(--text-2); }
.now .d { background: rgba(255,255,255,.75); }
.now.ok { color: var(--text); }
.live-ring.solved { box-shadow: 0 40px 80px -30px rgba(0,0,0,.75), 0 0 0 1px rgba(255,255,255,.22); }
.pc, .pc.use, .pc.know, .pc.follow, .pc.gate { --c: #c3c6d4; }

/* ======================================================================================
   v17: problem section with more substance (three options, ?prob=1..3), back-to-back backlit engineer
   photos (?eng=1..7). Review pill in the bottom-right corner; remove it once options are picked.
   ====================================================================================== */
.problem2 [data-prob-opt] > .pq, .problem2 [data-prob-opt] > .pr3, .problem2 [data-prob-opt] > .pw { margin-top: 48px; max-width: none; }
.pq-k { font: 400 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); margin-bottom: 14px; }
.pq-col ul { list-style: none; margin: 0; padding: 0; }
.pq-f { margin-top: 18px !important; font-size: 15px !important; line-height: 1.55 !important; color: var(--text-3) !important; }

/* 1 · Two queues */
.problem2 [data-prob-opt] > .pq { grid-template-columns: 1fr 1.35fr; gap: 20px; }
.pq-col { padding: 26px 28px 24px; border-radius: 14px; background: var(--win); box-shadow: 0 0 0 1px rgba(255,255,255,.08); }
.pq-col.easy { background: transparent; box-shadow: 0 0 0 1px rgba(255,255,255,.06); }
.pq-col.easy li { display: flex; align-items: center; gap: 12px; padding: 13px 0; border-top: 1px solid rgba(255,255,255,.06); font-size: 16px; color: var(--text-3); }
.pq-col.easy li:first-child { border-top: 0; }
.pq-col.easy li svg { width: 15px; height: 15px; flex: none; color: rgba(255,255,255,.35); }
.pq-col.hard li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 13px 0; border-top: 1px solid rgba(255,255,255,.07); }
.pq-col.hard li:first-child { border-top: 0; }
.pq-col.hard .q { display: block; font-size: 16px; line-height: 1.4; color: var(--ink); }
.pq-col.hard .pq-sys { display: block; margin-top: 5px; font: 400 11.5px var(--mono); color: var(--text-3); }
.pq-col.hard .age { height: 24px; padding: 0 10px; display: inline-flex; align-items: center; border-radius: 999px; border: 1px solid rgba(255,255,255,.16); font: 400 11.5px var(--mono); color: var(--text); white-space: nowrap; }

/* 2 · Three reasons */
.problem2 [data-prob-opt] > .pr3 { grid-template-columns: repeat(3, 1fr); gap: 20px; }
.pr3 > div { padding: 28px 28px 30px; border-radius: 14px; background: var(--win); box-shadow: 0 0 0 1px rgba(255,255,255,.08); }
.pr3 .n { font: 400 12px var(--mono); color: var(--text-3); }
.pr3 h3 { margin-top: 40px; font-family: var(--serif); font-size: 26px; line-height: 1.15; letter-spacing: -0.01em; font-variation-settings: "opsz" 36; }
.pr3 p { margin-top: 12px; font-size: 16px !important; line-height: 1.6 !important; color: var(--text-2); }

/* 3 · Paragraph and waiting list */
.problem2 [data-prob-opt] > .pw { grid-template-columns: 1fr 1.1fr; gap: 56px; align-items: start; }
.pw-copy p + p { margin-top: 18px; }
.pw-copy p { font-size: 18px; line-height: 1.65; }

@media (max-width: 860px) {
  .problem2 [data-prob-opt] > .pq, .problem2 [data-prob-opt] > .pr3, .problem2 [data-prob-opt] > .pw { margin-top: 32px; grid-template-columns: 1fr; gap: 14px; }
  .problem2 [data-prob-opt] > .pw { gap: 24px; }
  .pq-col { padding: 20px 18px; }
  .pq-col.hard li { grid-template-columns: 1fr; gap: 8px; } .pq-col.hard .age { justify-self: start; }
  .pr3 h3 { margin-top: 22px; font-size: 23px; }
}

.s4a .deck { transition: height .45s var(--ease); }

/* engineers photo options */
.eng .photo { background-image: url("assets/eng-2.jpg"); background-position: center 45%; }

/* v18: the Agentation toolbar sits in the bottom-right corner, so the review pill moves to the bottom left. */
.review:not(.chip) { right: auto; left: 16px; }
@media (max-width: 860px) { .review:not(.chip) { left: 12px; right: 12px; bottom: 74px; } }

/* ======================================================================================
   v19: Arthur's Agentation feedback of Nov 8 (see README). Past-ticket grid in the knowledge card.
   ====================================================================================== */
.mini .mb .tix { display: block; width: 100%; margin: 2px 0 8px; }
.problem2 > div > .one { margin-top: 22px; max-width: 780px; }
.card .panel { height: 392px; } .app { height: 296px; }
@media (max-width: 640px) { .card .panel { height: 404px; } .app { height: 304px; } }
/* video thumbnail: keep the play mark in the corner so it doesn't sit on Brent's face */
.video .th::before { content: ""; position: absolute; left: 8px; bottom: 8px; width: 26px; height: 26px; border-radius: 50%; background: rgba(0,0,0,.55); z-index: 1; }
.video .th::after { left: 18px; top: auto; bottom: 15px; transform: none; border-width: 6px 0 6px 9px; z-index: 2; }
.video .th img { object-position: 50% 30%; }

/* ======================================================================================
   v20: hero motion. Everything that moves in the hero is a transform or an opacity, so the
   browser can run it on the compositor: the background drift, the card stack, the progress
   bars and the working ring. The deck keeps one height for all cases, the card that joins the
   back of the stack fades in instead of popping, and the ring is one white highlight.
   ====================================================================================== */
.stage.drift { animation: none; background-image: none !important; }
.stage .bgd { position: absolute; inset: -6%; z-index: 0; background: center / cover no-repeat; pointer-events: none;
  animation: bgd 30s ease-in-out infinite alternate; will-change: transform; }
@keyframes bgd { from { transform: translate3d(-2.5%, -1.5%, 0) scale(1.04); } to { transform: translate3d(2.5%, 1.5%, 0) scale(1.04); } }
.stage .deck { z-index: 1; }
.s4 .card4 { will-change: transform, opacity; transition: transform 1s cubic-bezier(.22,1,.36,1), opacity .8s cubic-bezier(.22,1,.36,1); }
.s4 .card4.p1, .s4 .card4.p2 { filter: none; }
.s4 .card4::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: #05060a; opacity: 0; pointer-events: none; z-index: 3; transition: opacity 1s cubic-bezier(.22,1,.36,1); }
.s4 .card4.p1::after { opacity: .3; } .s4 .card4.p2::after { opacity: .45; }
.s4 .card4.p1 { opacity: .6; } .s4 .card4.p2 { opacity: .3; }
.s4 .card4.enter { opacity: 0; }
.s4 .card4 > * { transition: opacity .6s cubic-bezier(.22,1,.36,1); }
.s4 .card4.p0 > * { transition-delay: .28s; }
.s4 .card4.out { transform: translateY(34px) scale(1.015); }
.s4a .deck { transition: none; }
.s4a .card4 .path { margin-top: auto; padding-top: 16px; }
.hs .bars b i { width: 100%; transform: scaleX(0); transform-origin: 0 50%; will-change: transform; }
.hs .bars b.done i { transform: scaleX(1); }
.ck4 { transition: opacity .22s ease; } .ck4.swap { opacity: 0; }
/* the working ring: a static mask with a rotating white highlight inside it */
.live-ring::before { display: none; }
.card4 .ring { position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; overflow: hidden; pointer-events: none; z-index: 2; opacity: 0; transition: opacity .6s ease;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.card4 .ring i { position: absolute; left: 50%; top: 50%; width: 1400px; height: 1400px; margin: -700px 0 0 -700px;
  background: conic-gradient(from 0deg, rgba(255,255,255,0) 0deg, rgba(255,255,255,0) 230deg, rgba(255,255,255,.22) 300deg, rgba(255,255,255,.5) 345deg, rgba(255,255,255,0) 360deg);
  animation: ringturn 3.2s linear infinite; will-change: transform; }
@keyframes ringturn { to { transform: rotate(360deg); } }
.s4 .card4.p0.live-ring.working > .ring { opacity: 1; transition-delay: 0s; }
.live-ring.working { box-shadow: 0 40px 80px -30px rgba(0,0,0,.75), 0 0 0 1px rgba(255,255,255,.12), 0 0 34px -6px rgba(255,255,255,.06); }
@media (prefers-reduced-motion: reduce) { .stage .bgd, .card4 .ring i { animation: none; } }
@media (max-width: 860px) { .stage .bgd { animation: none; } }
/* engineers: Apple in the logo row */
.alum .lgs .apl svg { height: 25px; }
@media (max-width: 640px) { .alum .lgs { gap: 20px 28px; } }

/* ======================================================================================
   FDE quotes over the light beams: one frosted window, two anonymized quotes that cross-fade
   (castformbot's option 1, picked by Arthur on Nov 8). Both quotes share one grid cell, so the
   window keeps the height of the longer one and never jumps.
   ====================================================================================== */
.eng .photo { position: relative; }
.fq { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; padding: 0 9%; }
.glass { width: 100%; border-radius: 14px; padding: 30px 32px 26px; background: rgba(12,14,22,.38); -webkit-backdrop-filter: blur(22px) saturate(140%); backdrop-filter: blur(22px) saturate(140%);
  border: 1px solid rgba(255,255,255,.14); box-shadow: 0 30px 70px -30px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.08); display: grid; }
.glass .gq { grid-area: 1 / 1; opacity: 0; transition: opacity .7s cubic-bezier(.22,1,.36,1); }
.glass .gq.on { opacity: 1; }
.glass blockquote { margin: 0; font-family: var(--serif); font-weight: var(--hw, 400); font-size: 23px; line-height: 1.42; color: #f2f3f8; text-wrap: pretty; }
.gwho { margin-top: 16px; font-size: 13px; line-height: 1.45; } .gwho b { display: block; font-weight: 500; color: #fff; } .gwho span { color: rgba(225,228,240,.62); }
.gpager { grid-area: 2 / 1; display: flex; gap: 6px; margin-top: 22px; }
.gpager button { width: 22px; height: 3px; padding: 0; border: 0; border-radius: 2px; background: rgba(255,255,255,.2); cursor: pointer; transition: background .3s; }
.gpager button.on { background: rgba(255,255,255,.85); }
.gpager button::before { content: ""; display: block; height: 15px; margin-top: -6px; }
@media (max-width: 860px) {
  .eng .photo { min-height: 500px; }
  .fq { padding: 0 6%; }
  .glass { padding: 22px 22px 20px; }
  .glass blockquote { font-size: 18.5px; }
}

/* Hero progress bars are buttons: a taller invisible hit area around each 3px bar. */
.hs .bars { bottom: 16px; gap: 0; }
.hs .bars button { display: block; padding: 12px 3px; border: 0; background: none; cursor: pointer; }
.hs .bars button b { display: block; }
.hs .bars button:hover b { background: rgba(255,255,255,.3); }
.hs .bars button:focus-visible { outline: 1px solid rgba(255,255,255,.6); outline-offset: 2px; border-radius: 3px; }

/* Hero balance: less space above the stack, so the front card sits in the middle of the panel. */
.stage.hx.hs.s4a { height: 430px; } .s4a .deck { top: 52%; }
@media (max-width: 860px) { .stage.hx.hs.s4a { height: 520px; } .s4a .deck { top: 50.5%; } }