@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&family=Newsreader:ital,wght@0,200..800;1,200..800&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@400;500;600;700&family=Outfit:wght@400;500;600;700;800&family=Urbanist:wght@500;600;700&display=swap');
*{box-sizing:border-box}
body{margin:0;background:white;color:#101010;font:16px/1.55 "Instrument Sans",system-ui,sans-serif}
a{color:inherit;text-underline-offset:.25em}
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid #5268ff;outline-offset:4px}
.shell{width:min(1120px,calc(100% - 48px));margin-inline:auto}
.hero,.dark{color:white;background:#0b0b0d}
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(ellipse at 50% 42%, #08090b 12%, transparent 69%),
    radial-gradient(ellipse at 78% -18%, #454751 0%, transparent 55%),
    linear-gradient(155deg, #17181d 0%, #08090b 57%, #14151b 100%);
}
.hero-watermark {
  position: absolute;
  bottom: 1%;
  left: 0;
  width: 100%;
  height: 55%;
  opacity: .17;
  pointer-events: none;
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.hero .light {
  border-color: #ffffff80;
  background: linear-gradient(#fff, #dddfe5);
  box-shadow: 0 5px 22px #0008, inset 0 1px 0 #fff;
}
.hero .light:hover { background: #fff; }
.notice{text-align:center;padding:10px 16px;font-size:.82rem}
.nav{display:flex;align-items:center;justify-content:space-between;gap:18px;padding-block:22px}
.nav nav,.form-row{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.nav a,.button{text-decoration:none}
.brand{font:600 1.4rem Outfit,system-ui,sans-serif}
.intro{text-align:center;flex:1;display:grid;align-content:center;justify-items:center;padding-block:clamp(24px,8svh,72px)}
h1,h2,h3,p{margin:0 0 16px}
h1{font:500 clamp(2.65rem,7vw,6.5rem)/.98 Outfit,system-ui,sans-serif;letter-spacing:-.045em}
h2,h3{font-family:Urbanist,system-ui,sans-serif;line-height:1.1}
h2{font-size:clamp(2rem,4vw,3.6rem);max-width:22ch}
h3{font-size:1.5rem}
.eyebrow{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;font-weight:700}
.button{display:inline-block;border:1px solid #111;border-radius:8px;background:#111;color:white;padding:10px 16px;font:600 .95rem "Instrument Sans",system-ui,sans-serif;cursor:pointer}
.light,.secondary{background:white;color:#111}
.section{padding-block:90px}
.section p{max-width:65ch}
.muted{background:#f0f0f0}
.columns{display:grid;grid-template-columns:1fr 1fr;gap:36px;margin-top:36px}
.columns article{border-top:1px solid #aaa;padding-top:20px}
.footer{padding-block:28px}
.workspace-nav{border-bottom:1px solid #ddd}
.work{padding-block:56px}
.work h1{font-size:clamp(2.5rem,6vw,4rem)}
.panel{border:1px solid #ddd;border-radius:12px;padding:24px;margin:24px 0}
.panel h2{font-size:1.75rem}
.number{font-size:3rem;font-variant-numeric:tabular-nums}
input{padding:11px;border:1px solid #777;border-radius:8px;font:inherit;max-width:100%}
label{display:block;margin-bottom:8px}
details{margin-top:20px}
pre{white-space:pre-wrap;overflow-wrap:anywhere}
.skip{position:absolute;top:-100px;background:white;color:black;padding:12px}
.skip:focus{top:0}
@media(max-width:640px){.nav nav{display:none}.columns{grid-template-columns:1fr}.section{padding-block:56px}}

#site-picker { margin-top: 20px; }
select { border: 1px solid #777; border-radius: 8px; padding: 10px; font: inherit; max-width: 100%; background: white; }
select:focus-visible { outline: 3px solid #5268ff; outline-offset: 4px; }
#installation pre { background: #f0f0f0; padding: 16px; border-radius: 8px; }
#result { margin: 16px 0 0; }

/* Public analytics overview */
.analytics-overview { width: min(1480px, calc(100% - 32px)); margin: 56px auto; }
.analytics-board { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 12px; border-radius: 32px; background: #f0f0f0; }
.analytics-story, .analytics-figures { display: grid; gap: 12px; }
.analytics-story { grid-template-rows: auto auto 1fr; }
.analytics-figures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.analytics-card { margin: 0; border-radius: 24px; padding: clamp(16px, 2vw, 30px); background: #fff; min-width: 0; }
.analytics-wide { grid-column: 1 / -1; }
.analytics-card summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; list-style: none; font: 600 clamp(1.3rem, 2.4vw, 2rem)/1.15 Urbanist, system-ui, sans-serif; }
.analytics-card summary::-webkit-details-marker { display: none; }
.analytics-card summary::after { content: "+" / ""; color: #555; }
.analytics-card[open] summary::after { content: "−" / ""; }
.analytics-card details p, details.analytics-card p { margin: 14px 0 0; color: #555; }
.analytics-feature { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; gap: 28px; }
.analytics-feature h2 { max-width: 12ch; }
.analytics-feature p { color: #444; }
.analytics-feature .button { align-self: flex-end; }
.analytics-icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 9px; background: #111; color: white; font-size: 24px; }
.analytics-label, .analytics-card figcaption, .analytics-days, .latency-chart, .analytics-caption { color: #555; font-size: .875rem; }
.analytics-card figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 10px; }
.analytics-card figcaption span { color: #08775a; }
.analytics-card strong { display: block; font: 700 clamp(1.75rem, 3.2vw, 3rem)/1.2 Urbanist, system-ui, sans-serif; margin-top: 8px; }
.analytics-bars, .analytics-days { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; text-align: center; }
.analytics-days { font-size: .75rem; }
.analytics-bars { height: 86px; align-items: end; margin: 16px 0 6px; background: repeating-linear-gradient(to top, #eceeed 0 1px, transparent 1px 25%); }
.traffic-bars { height: 125px; }
.analytics-bars i { height: var(--height); margin-inline: 15%; background: #d8f2e9; border-radius: 9px 9px 0 0; }
.analytics-bars i:nth-child(1) { --height: 38%; }
.analytics-bars i:nth-child(2) { --height: 55%; }
.analytics-bars i:nth-child(3) { --height: 64%; }
.analytics-bars i:nth-child(4) { --height: 48%; }
.analytics-bars i:nth-child(5) { --height: 72%; }
.analytics-bars i:nth-child(6) { --height: 81%; }
.analytics-bars i:nth-child(7), .request-bars i:first-child { --height: 94%; background: linear-gradient(#0bab7b, #d8f2e9); }
.latency-chart { display: grid; gap: 12px; margin-top: 22px; }
.latency-chart div { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; }
.latency-chart i { display: block; width: 41%; height: 14px; background: #d8f2e9; border-radius: 6px; }
.latency-chart div:last-child i { width: 100%; background: linear-gradient(90deg, #d8f2e9, #0bab7b); }
.analytics-caption { margin: 12px 0 0; }
@media (max-width: 760px) { .analytics-board { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 460px) { .analytics-figures { grid-template-columns: minmax(0, 1fr); } }

/* Landing hero */
.hero-art { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.hero h1 { font-weight: 800; letter-spacing: -.065em; }
.hero h1 span { display: block; }
.hero .intro > p:not(.eyebrow) { max-width: 58ch; }

/* The board stays in view while the three examples advance. */
.analytics-progress { display: none; }
@media (prefers-reduced-motion: no-preference) and (min-width: 900px) and (min-height: 680px) {
  .analytics-overview { min-height: 320dvh; }
  .analytics-sticky { position: sticky; top: 84px; }
  .analytics-board { min-height: min(68dvh, 620px); }
  .analytics-footer { display: flex; justify-content: space-between; align-items: baseline; }
  .analytics-progress { display: flex; align-items: center; gap: 10px; color: #555; font-size: .875rem; }
  .analytics-progress span { display: block; width: 96px; height: 3px; background: #e2e2e2; }
  .analytics-progress span::after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background: #111;
    transform: scaleX(var(--sequence-progress, 0));
    transform-origin: left;
  }
  .analytics-story details[open] { background: #f3fbf8; }
  .analytics-wide { grid-row: 1; }
  [data-stage="1"] .analytics-bars i { background: #e8e2fa; }
  [data-stage="1"] .request-bars i:first-child { background: linear-gradient(#795cc5, #e8e2fa); }
  [data-stage="1"] .request-bars { height: 125px; }
  [data-stage="1"] .traffic-bars { height: 86px; }
}

.analytics-card { transform-origin: top left; }

.lab { container-type:inline-size; scroll-margin-top:78px; background:#0f1112; color:white; padding:clamp(70px,9vw,135px) clamp(16px,4vw,72px); font-family:Inter,sans-serif; }
.lab-heading { text-align:center; margin:0 auto 64px; }
.lab-heading h2,.lab-copy h3 { font-family:Newsreader,Georgia,serif; font-weight:400; letter-spacing:-.035em; }
.lab-heading h2 { max-width:none; font-size:clamp(2.9rem,6vw,6.4rem); line-height:.96; }
.lab-label,.lab-actions,.lab-copy .lab-button,.lab-copy li span,.lab-console,.lab-panel svg text { font-family:"JetBrains Mono",monospace; }
.lab-label { color:#a5abaa; font-size:.72rem; letter-spacing:.17em; text-transform:uppercase; }
.lab-actions { display:flex; justify-content:center; gap:10px; flex-wrap:wrap; margin-top:25px; }
.lab-copy .lab-button { border:1px solid #ffffff24; border-radius:5px; padding:10px 14px; font-size:.68rem; text-transform:uppercase; text-decoration:none; background:#1b1d1e; color:white; cursor:pointer; }
.lab-actions .button:first-child { background: white; border-color: white; color: #0f1112; }
.lab-actions .button:last-child { background: transparent; border-color: #ffffff66; color: white; }
.lab-actions .button:last-child .button-arrow { background: #ffffff18; color: white; }
.lab-grid-cards { display:grid; gap:16px; max-width:1440px; margin:auto; }
.lab-card { container-type:inline-size; display:grid; border:1px solid #ffffff10; border-radius:18px; overflow:hidden; background:radial-gradient(ellipse at 0 0,#ffffff09,transparent 65%),linear-gradient(150deg,#1b1d1e,#141617); }
.lab-card > * { --c:calc(100cqw / 560); }
.lab-panel { position:relative; isolation:isolate; overflow:hidden; display:grid; place-items:center; min-height:220px; margin:clamp(12px,calc(20 * var(--c)),30px); border-radius:12px; border:1px solid #ffffff13; background:#101213; padding:clamp(12px,calc(24 * var(--c)),32px); }
.lab-panel::before { content:""; position:absolute; z-index:-1; inset:-45%; background:radial-gradient(ellipse at center,#8fa7a326,transparent 58%); }
.lab-panel svg { width:100%; max-width:540px; }
.lab-panel svg path { fill:none; stroke:#e0ece9; stroke-width:1.4; stroke-linejoin:round; }
.lab-panel svg .lab-grid { stroke:#ffffff20; }
.lab-panel svg text { fill:#d4ddda; text-anchor:middle; font-size:10px; }
.lab-copy { padding:clamp(22px,calc(34 * var(--c)),52px); align-self:center; }
.lab-copy h3 { font-size:clamp(2rem,calc(44 * var(--c)),3.2rem); margin-bottom:12px; }
.lab-copy p,.lab-copy li { color:#ffffff94; }
.lab-copy ol { list-style:none; padding:0; margin:20px 0; }
.lab-copy li { border-top:1px solid #ffffff13; padding:8px 0; }
.lab-copy li span { color:#cdd9d6; font-size:.7rem; margin-right:8px; }
.lab-console { width:min(100%,360px); font-size:clamp(.64rem,calc(12 * var(--c)),.8rem); color:#b4c0bd; }
.lab-console div { display:flex; justify-content:space-between; gap:8px; padding:8px; border:1px solid #ffffff17; margin-top:5px; border-radius:4px; }
.lab-console b { color:#d4ebe3; font-weight:500; }
.lab-console .lab-command { background:#f7f7f7; color:#101213; }
.lab-button { display:inline-block; }
@container (min-width:1164px) {
  .lab-grid-cards { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .lab-env { grid-column:1/-1; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .lab-env > * { --c:calc(100cqw / 1164); }
}
@media (hover:hover) {
  .lab-card:hover { border-color:#ffffff40; }
  .lab-actions a:first-child:hover { background:#e9e9e9; }
  .lab-actions a:last-child:hover,.lab-copy .lab-button:hover { background:#2f2f2f; }
}
@media (prefers-reduced-motion:no-preference) {
  .lab-panel::before { animation:lab-glow 13s ease-in-out infinite alternate; }
  @keyframes lab-glow { from { transform:translate(-15%,-12%); } to { transform:translate(15%,12%); } }
}

.lab-heading h2 > :is(em, span) { display: inline-block; }

.architecture { padding: clamp(12px, 2vw, 28px); scroll-margin-top: 80px; }
.architecture-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.18fr);
  align-items: center;
  gap: clamp(24px, 5vw, 90px);
  padding: clamp(24px, 5vw, 80px);
}
.architecture-copy h2 { max-width: 15ch; }
.architecture-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 26px 0; }
.architecture-controls button {
  text-align: left;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #202020;
  padding: 10px;
  font: inherit;
  cursor: pointer;
}
.architecture-controls button span { margin-right: 5px; font-size: .75em; opacity: .76; }
.architecture-controls button[aria-pressed="true"] { background: #151515; color: #fff; }
.architecture-detail { padding-top: 20px; }
.architecture-detail h3 { margin-bottom: 8px; }
.architecture-detail p { color: #484848; max-width: 48ch; }
.architecture-diagram svg { display: block; width: 100%; height: auto; }
.stack-layer path { stroke: #242424; stroke-width: 1.4; stroke-linejoin: round; }
.stack-face { fill: #f2f2f2; }
.stack-top { fill: #fff; }
.stack-layer .stack-grid { fill: none; stroke: #dedede; stroke-width: 1; }
.stack-layer .stack-leader { stroke: #858585; }
.stack-layer text { fill: #555; font: 500 15px "Instrument Sans", sans-serif; }
.architecture-diagram[data-active="0"] [data-layer="0"],
.architecture-diagram[data-active="1"] [data-layer="1"],
.architecture-diagram[data-active="2"] [data-layer="2"],
.architecture-diagram[data-active="3"] [data-layer="3"] {
  .stack-top { fill: #202020; }
  .stack-face { fill: #111; }
  .stack-grid { stroke: #535353; }
  text { fill: #151515; font-weight: 700; }
}
@media (prefers-reduced-motion: no-preference) {
  .stack-top, .stack-face, .stack-grid { transition: fill .26s ease, stroke .26s ease; }
}
@media (max-width: 760px) {
  .architecture-card { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: no-preference) and (min-width: 761px) {
  .stack-slab { transition: opacity .48s ease, transform .48s cubic-bezier(.22, 1, .36, 1); }
  [data-layers="1"] [data-layer]:not([data-layer="0"]) .stack-slab,
  [data-layers="2"] :is([data-layer="2"], [data-layer="3"]) .stack-slab,
  [data-layers="3"] [data-layer="3"] .stack-slab {
    opacity: 0;
    transform: translateY(-26px);
  }
}

.closing { background: #000; color: #fff; }
.closing-status {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 6vw, 88px);
  align-items: center;
  scroll-margin-top: 76px;
}
.closing-status h2 { margin-bottom: 28px; }
.closing-milestones { margin: 0; }
.closing-milestones div { border-top: 1px solid #383838; padding: 20px 0; }
.closing-milestones dt { font-weight: 700; }
.closing-milestones dd { margin: 6px 0 0; }
.closing-footer { color: #fff; font-family: "Instrument Sans", system-ui, sans-serif; background: #0f0f0f; padding: clamp(48px, 5vw, 88px) 0 20px; }
.footer-inner { width: min(1600px, 92%); margin-inline: auto; container-type: inline-size; }
.closing-footer-grid { display: grid; grid-template-columns: 1.9fr repeat(3, 1fr); gap: clamp(20px, 4vw, 64px); }
.closing-footer .brand { display: inline-block; margin-bottom: 24px; text-decoration: none; font-size: clamp(1.5rem, 2.3vw, 2.3rem); }
.closing-footer p { max-width: 40ch; }
.closing-footer nav { display: grid; align-content: start; gap: 14px; }
.closing-footer h3 { font: 700 1rem "Instrument Sans", system-ui, sans-serif; margin-bottom: 14px; }
.closing-footer nav a, .closing-footer-end a { text-decoration: none; }
.closing-milestones dd, .closing-footer p, .closing-footer nav a, .closing-footer-end, .footer-preview { color: #aaa; }
.closing-footer a:hover { color: #fff; }
.footer-preview { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.footer-preview::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #b1ffdf; }
.footer-social { display: flex; flex-wrap: wrap; gap: 8px; }
.footer-social a { display: inline-grid; place-items: center; width: 40px; height: 40px; border: 1px solid #444; border-radius: 11px; background: #1c1c1c; text-decoration: none; }
.footer-social a:hover, .footer-social a:focus-visible { background: #303030; color: #fff; }
.footer-watermark { overflow: clip; margin-top: clamp(50px, 8vw, 120px); color: #222; font: 700 15.5cqw/.95 Outfit, system-ui, sans-serif; letter-spacing: -.075em; white-space: nowrap; user-select: none; }
.closing-footer-end { display: grid; grid-template-columns: 1fr auto 1fr; align-items: baseline; gap: 12px; border-top: 1px solid #333; padding-top: 18px; font-size: .875rem; }
.closing-footer-end a { justify-self: end; }
@media (max-width: 800px) { .closing-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) { .closing-status { grid-template-columns: 1fr; } }
@media (max-width: 420px) {
  .footer-brand { grid-column: 1 / -1; }
  .closing-footer-end { grid-template-columns: 1fr auto; }
  .closing-footer-end small:nth-child(2) { grid-row: 2; }
}

.hero-dots {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Workspace */
.workspace-page { display:grid; grid-template-columns:224px minmax(0,1fr); min-height:100dvh; background:#f5f6f4; }
.workspace-rail { position:sticky; top:0; height:100dvh; display:flex; flex-direction:column; gap:40px; padding:28px 20px; background:#101413; color:#fff; }
.workspace-rail a { text-decoration:none; }
.workspace-rail nav { display:grid; gap:6px; }
.workspace-rail nav a { display:flex; align-items:center; gap:12px; border-radius:8px; padding:10px 12px; color:#c4cfca; }
.workspace-rail nav a:is(:hover,[aria-current]) { background:#24332d; color:#d0f6e5; }
.workspace-rail .workspace-home { margin-top:auto; color:#c4cfca; font-size:.9rem; }
.workspace-main { width:min(100%,1280px); margin-inline:auto; padding:clamp(20px,4vw,64px); }
.workspace-header { display:flex; align-items:center; justify-content:space-between; gap:12px; border-bottom:1px solid #dce2dd; padding-bottom:14px; }
.workspace-header p { margin:0; color:#52605a; }
.workspace-demo,.workspace-state { display:inline-block; border-radius:999px; padding:4px 10px; font-size:.78rem; font-weight:600; background:#e7ece8; color:#354640; }
.workspace-demo,.workspace-state[data-status="receiving"] { background:#dbf3e6; color:#14553c; }
.workspace-state[data-status="failed"] { background:#fff0e8; color:#8b3921; }
.workspace-intro { margin-top:36px; }
.workspace-intro h1 { font-size:clamp(2.25rem,4vw,4rem); overflow-wrap:anywhere; }
.workspace-intro p,.workspace-main .panel p { color:#52605a; }
.workspace-main #message:empty { display:none; }
.workspace-main #message:not(:empty) { padding:10px 14px; border-left:3px solid #308767; background:#e9f1ec; }
.workspace-main #project { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.workspace-main .panel { margin:0; background:#fff; border:1px solid #dde3de; box-shadow:0 4px 16px #183a2210; min-width:0; }
.workspace-main .panel h2 { font-size:1.45rem; }
.workspace-main #analytics { background:linear-gradient(125deg,#142822,#20372d); color:#fff; border-color:#29453a; }
.workspace-main #analytics p { color:#c1d9ce; }
.workspace-main #analytics .number { display:block; font-family:Outfit,system-ui,sans-serif; line-height:1.1; margin-bottom:12px; }
.workspace-main #last { margin:12px 0 0; }
.workspace-enroll { max-width:550px; }
.workspace-main #installation pre { background:#edf2ef; color:#19372c; }
.workspace-main [hidden],.workspace-rail [hidden] { display:none; }
@media(max-width:900px) {
  .workspace-page { grid-template-columns:1fr; }
  .workspace-rail { position:static; height:auto; flex-direction:row; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; padding:14px 20px; }
  .workspace-rail nav { display:flex; flex-wrap:wrap; }
  .workspace-rail .workspace-home { margin-top:0; }
}
@media(max-width:650px) {
  .workspace-main #project { grid-template-columns:1fr; }
  .workspace-main #analytics { grid-row:1; }
}

.workspace-main .panel {
  position: relative;
  isolation: isolate;
  overflow: clip;
}
.workspace-main .panel::before {
  content: "";
  position: absolute;
  z-index: -1;
  right: -24px;
  bottom: 0;
  width: min(64%, 240px);
  aspect-ratio: 2 / 1;
  border-radius: 100% 100% 0 0 / 200% 200% 0 0;
  background: radial-gradient(ellipse at bottom, #29775804 48%, #29775813 49%, #29775807 72%, #2977580d 73%);
  pointer-events: none;
}
.workspace-main #analytics::before {
  background: radial-gradient(ellipse at bottom, #bdffdf04 48%, #bdffdf20 49%, #bdffdf09 72%, #bdffdf16 73%);
}

.operator-section { background: linear-gradient(180deg, #fff 0%, #fffef5 18%, #fff3a5 58%, #fdda24 100%); color: #141414; scroll-margin-top: 80px; }
.operator-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(16px, 3vw, 34px);
  padding-block: clamp(52px, 8vw, 112px);
}
.operator-layout > div:first-child { max-width: 46ch; }
.operator-layout > div:first-child p:not(.eyebrow) { color: #3f390e; }
.operator-preview { min-width: 0; margin: 0; border-radius: 18px; padding: clamp(14px, 3vw, 30px); background: #151515; color: #fff; }
.operator-preview figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; margin-bottom: 18px; }
.operator-preview figcaption span { color: #fdda24; font-size: .8rem; }
.operator-preview table { width: 100%; border-collapse: collapse; font-size: clamp(.78rem, 1.3vw, 1rem); font-variant-numeric: tabular-nums; }
.operator-preview :is(th, td) { padding: 10px 4px; border-top: 1px solid #ffffff26; text-align: right; }
.operator-preview th:first-child { text-align: left; }
@media (max-width: 760px) { .operator-layout { grid-template-columns: minmax(0, 1fr); } }

.operator-preview { box-shadow: 0 18px 36px #30250025; }
.operator-preview figcaption strong { font-size: 1.15rem; }
.operator-card {
  align-self: stretch;
  padding: clamp(18px, 3vw, 32px);
  border: 1px solid #21190024;
  border-radius: 18px;
  background: #fff9;
  box-shadow: inset 0 1px #ffffffa0;
}
.operator-card-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-bottom: 16px;
  border-radius: 9px;
  background: #181710;
  color: #ffec7d;
}
.operator-card h3 { margin-bottom: 8px; }
.operator-card p { max-width: 45ch; margin: 0; color: #3f390e; }

.terms-page { --terms-yellow: #fbd460; font-family: Inter, system-ui, sans-serif; }
.terms-site-header { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 0 clamp(24px, 5vw, 80px); min-height: 80px; }
.terms-site-header { border-bottom: 1px solid #e7e7e7; }
.terms-site-header a { text-decoration: none; }
.terms-workspace { background: var(--terms-yellow); padding: 16px; }
.terms-layout { width: min(960px, calc(100% - 48px)); margin: clamp(48px, 8vw, 114px) auto; }
.terms-article { color: #494949; font-size: 16px; line-height: 1.65; }
.terms-article h1, .terms-article h2 { color: #121212; }
.terms-article h1 { font-size: clamp(48px, 7.5vw, 104px); line-height: 1; margin: 0 0 28px; }
.terms-article h2 { font-size: clamp(27px, 3vw, 40px); line-height: 1.13; margin: 0 0 16px; }
.terms-kicker { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; }
.terms-lede { font-weight: 600; color: #151515; }
.terms-article section { margin-top: 44px; scroll-margin-top: 28px; }
.terms-article ol { padding-inline-start: 24px; }
@media (max-width: 860px) {
  .terms-layout { display: block; padding-bottom: 56px; }
}

.terms-page { padding-bottom: 62px; background: #0f0f0f; }
.terms-site-header, .terms-layout { background: white; }
.terms-page main { width: 100%; margin: 0; padding: clamp(48px, 8vw, 114px) 24px; }
.terms-article { max-width: 960px; margin-inline: auto; }
.legal-jump-toggle {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; background: #fdda24; border: 0; border-radius: 999px;
  padding: 6px 7px 6px 24px; color: #101010; font: inherit; cursor: pointer;
}
.legal-jump-toggle::after {
  content: "⌄"; display: grid; place-items: center; width: 32px; height: 32px;
  border-radius: 50%; color: white; background: #101010;
}
#open-jump, .legal-jump {
  position: fixed; inset: auto 0 8px; width: min(480px, calc(100% - 32px)); margin: 0 auto;
}
#open-jump { z-index: 2; }
.legal-jump { max-height: calc(100dvh - 16px); border: 0; padding: 0; background: transparent; overflow: visible; }
.legal-jump::backdrop { background: #0007; }
.legal-jump nav { max-height: calc(100dvh - 68px); overflow: auto; overscroll-behavior: contain; background: #f4f8fa; border-radius: 24px; padding: 16px 22px; margin-bottom: 8px; }
.legal-jump ol { margin: 0; padding-inline-start: 24px; }
.legal-jump a { display: block; padding: 8px; border-radius: 6px; text-decoration: none; }
.legal-jump a:hover { background: #e5edf1; }
.legal-jump .legal-jump-toggle::after { transform: rotate(180deg); }

.cookie-trigger { background: none; border: 0; padding: 0; color: #aaa; font: inherit; text-align: left; cursor: pointer; justify-self: start; }
.cookie-trigger:hover { color: white; }
.cookie-settings {
  width: min(960px, calc(100% - 40px)); max-height: calc(100dvh - 56px);
  border: 0; border-radius: 4px; padding: 0; overflow: hidden;
  color: #10171b; background: #f4f8fa; box-shadow: 0 8px 32px #0005;
  font-family: Inter, system-ui, sans-serif;
}
.cookie-settings::backdrop { background: #000b; }
.cookie-settings form {
  position: relative; display: flex; flex-direction: column;
  max-height: calc(100dvh - 56px); padding: clamp(24px, 6vw, 72px);
}
.cookie-settings h2 { margin: 0 32px 16px 0; font-size: clamp(24px, 4vw, 36px); line-height: 1.15; }
.cookie-content { overflow: auto; overscroll-behavior: contain; }
.cookie-content p { margin: 0; color: #4c555b; line-height: 1.85; }
.cookie-category { margin-top: 26px; }
.cookie-category > div { display: flex; flex-wrap: wrap; gap: 6px 16px; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.cookie-category h3 { margin: 0; font-size: 1.2rem; font-weight: 700; }
.cookie-category strong { font-size: .85rem; }
.cookie-actions { margin-top: clamp(20px, 4vw, 40px); }
.cookie-close, .cookie-done { border: 0; cursor: pointer; font: inherit; }
.cookie-close { position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; background: transparent; color: inherit; font-size: 26px; }
.cookie-done { border-radius: 18px; padding: 10px 24px; background: #050505; color: white; }

/* Use the API Telemetry type treatment across page and section titles. */
body :is(h1, h2, h3, h4, h5, h6),
#operator-heading,
.workspace-main :is(h1, h2, h3),
.analytics-card summary,
.closing-milestones dt,
.cookie-category h3,
.closing-footer h3 {
  font-family: Newsreader, Georgia, serif;
  font-weight: 400;
  letter-spacing: -.035em;
}

.floating-nav {
  position: fixed;
  z-index: 5;
  top: 12px;
  left: 50%;
  width: min(850px, calc(100% - 32px));
  padding: 10px 16px;
  border-radius: 14px;
  background: #08090b;
  color: white;
  box-shadow: 0 10px 35px #0002;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -14px);
  transition: opacity .25s ease, transform .25s ease, visibility .25s;
}
.floating-nav.is-visible { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.hero .button.light,
.floating-nav .button.light {
  background: #000;
  border-color: #ffffff55;
  color: #fff;
  box-shadow: none;
}
.hero .button.light:hover,
.floating-nav .button.light:hover { background: #222; }
@media (max-width: 420px) {
  .floating-nav { gap: 8px; padding-inline: 10px; }
  .floating-nav .brand { font-size: 1.05rem; }
  .floating-nav .button { padding: 8px; font-size: .8rem; }
}
@media (prefers-reduced-motion: reduce) {
  .floating-nav { transition: none; }
}

@media (prefers-reduced-motion: no-preference) {
  .hero .intro h1 span,
  .hero .intro > p {
    --exit: clamp(0, var(--hero-text-progress, 0) * 2, 1);
    transform: translateX(calc(var(--exit) * var(--exit-distance)));
    opacity: calc(1 - var(--exit));
  }
  .hero .intro h1 span:first-child,
  .hero .intro > .eyebrow { --exit-distance: -55vw; }
  .hero .intro h1 span:last-child,
  .hero .intro > p:not(.eyebrow) { --exit-distance: 55vw; }
}

.button:has(.button-arrow) {
  display: inline-flex;
  align-items: center;
  gap: .65em;
  --arrow-inset: 5px;
  padding-block: var(--arrow-inset);
  padding-inline: 16px var(--arrow-inset);
  border-radius: 999px;
}
.button-arrow {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 36px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #fdda24;
  color: #111;
  line-height: 1;
}

.operator-page .workspace-main { min-width: 0; }
.operator-totals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 24px 0; }
.operator-totals > div { padding: clamp(12px, 3vw, 28px); border-radius: 18px; background: #fff5b8; }
.operator-totals dt { font-size: .875rem; }
.operator-totals dd { margin: 8px 0 0; font: 400 clamp(1.4rem, 3.8vw, 3.5rem)/1 Newsreader, Georgia, serif; font-variant-numeric: tabular-nums; }
.operator-table-panel { padding: clamp(16px, 3vw, 32px); background: white; border: 1px solid #dedfd8; border-radius: 22px; scroll-margin-top: 24px; }
.operator-filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
.operator-filters label { display: grid; gap: 6px; font-size: .875rem; }
.operator-filters :is(input, select) { width: 100%; min-height: 42px; padding: 8px; border: 1px solid #c8ccc3; border-radius: 8px; background: #fafbf8; color: #141414; font: inherit; }
#project-results, .operator-table-note { margin: 14px 0 0; color: #555; font-size: .875rem; }
.operator-table-scroll { overflow-x: auto; margin-top: 12px; }
.operator-table-scroll table { width: 100%; min-width: 620px; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.operator-table-scroll :is(th, td) { padding: 12px; text-align: left; border-bottom: 1px solid #e4e7df; }
.operator-table-scroll thead { background: #f1f3ed; }