/* The public landing page. One deliberate look — industrial off-white, ink
   black, monospace labels — on every theme, so it paints every colour itself.
   Zero external resources, like the console. */
:root {
  color-scheme: light;
  --ground: #f3f3f0;
  --ground-2: #ebebe6;
  --paper: #fbfbf9;
  --ink: #111111;
  --ink-2: #3b3b38;
  --mute: #66665f;       /* 5.2:1 on --ground: small mono labels pass WCAG AA */
  --line: #d6d6cf;
  --line-2: #c4c4bb;
  --signal: #ff5b1f;     /* the one colour: live things and the mark's heart */
  --ok: #1f9d55;
  --warn: #c77700;
  /* The same hues dark enough to be read as small text (4.5:1 and up on
     --paper and --ground); the bright ones stay for dots and marks. */
  --ok-text: #177a42;
  --warn-text: #996000;
  --signal-text: #c2410c;
  --signal-large: #e0480f;   /* 3.7:1: large display text only */
  --sans: "Helvetica Neue", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--ground); color: var(--ink);
  font: 15px/1.55 var(--sans); -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
h1, h2, h3 { margin: 0; }

/* Nav */
.nav {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 10;
  display: flex; align-items: center; gap: 24px;
  padding: 14px clamp(16px, 3vw, 32px);
  background: color-mix(in srgb, var(--ground) 88%, transparent);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.nav-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 700; letter-spacing: 0.14em; font-size: 14px; }
.nav-brand svg { width: 22px; height: 22px; color: var(--ink); }
.nav-links { display: flex; gap: clamp(12px, 1.8vw, 26px); margin-left: auto; font-size: 13px; }
.nav-links a { text-decoration: none; color: var(--ink-2); white-space: nowrap; }
/* Below 1080px the in-page links that came last (Engage, FAQ) give way, and
   below 900px Build does too, so the rest stay on one line. */
@media (max-width: 1080px) { .nav-links a[href="#engage"], .nav-links a[href="#faq"] { display: none; } }
@media (max-width: 900px) { .nav-links a[href="#build"] { display: none; } }
.nav-links a:hover { color: var(--ink); }
.nav-cta { display: flex; gap: 8px; }

/* Buttons: mono, uppercase, square-ish */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  height: 36px; padding: 0 14px; border-radius: 4px;
  font: 500 11.5px/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase;
  text-decoration: none; white-space: nowrap; transition: background 120ms, color 120ms;
}
.btn-dark { background: var(--ink); color: var(--paper); border: 1px solid var(--ink); }
.btn-dark:hover { background: #2a2a2a; }
.btn-line { border: 1px solid var(--ink); color: var(--ink); background: transparent; }
.btn-line:hover { background: var(--ink); color: var(--paper); }

/* Hero */
.hero { display: flex; flex-direction: column; align-items: center; text-align: center; padding: clamp(48px, 8vw, 96px) 16px 48px; }
.hero-mark { width: 64px; height: 64px; color: var(--ink); margin-bottom: 28px; }

.hero h1 {
  font-size: clamp(40px, 7.4vw, 92px); line-height: 0.95; font-weight: 600;
  letter-spacing: -0.045em; text-transform: uppercase; text-wrap: balance;
}
.mono-sub, .eyebrow {
  font: 12px/1.5 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--mute);
}
.mono-sub { margin: 22px 0 30px; }
.hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
/* The agent finder's door (/start): drawn as the answer box it opens. */
.ask-bar {
  display: flex; align-items: center; gap: 12px; width: min(560px, 100%); margin-top: 22px;
  padding: 10px 10px 10px 16px; border: 1.5px solid var(--ink); border-radius: 14px;
  background: var(--paper); color: var(--ink-2); text-decoration: none; text-align: left;
  box-shadow: 0 22px 50px -32px rgba(17, 17, 17, 0.5); transition: box-shadow 160ms, transform 160ms;
}
.ask-bar:hover { transform: translateY(-1px); box-shadow: 0 26px 56px -30px rgba(17, 17, 17, 0.6); }
.ask-bar svg { flex: none; width: 20px; height: 20px; color: var(--ink); }
.ask-text { flex: 1; font-size: 16px; }
.ask-go {
  flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px;
  background: var(--ink); color: var(--paper); font: 500 18px/1 var(--mono);
}
.cmd {
  margin-top: 26px; padding: 9px 14px; border-radius: 4px; max-width: 100%;
  overflow-x: auto; white-space: nowrap;
  background: var(--ground-2); font: 12.5px/1.4 var(--mono); color: var(--ink-2);
}
.cmd-p { color: var(--mute); }

/* Product frame */
.frame-wrap { padding: 8px clamp(16px, 3vw, 32px) 24px; }
.frame {
  max-width: 1240px; margin: 0 auto; background: var(--paper);
  border: 1px solid var(--line-2); border-radius: 10px; overflow: hidden;
  box-shadow: 0 30px 80px -40px rgba(17, 17, 17, 0.35);
}
.frame-bar { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--line); background: var(--ground); }
.dots { display: flex; gap: 6px; }
.dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--line-2); }
.frame-title { font: 11.5px var(--mono); color: var(--mute); letter-spacing: 0.06em; }
.frame-tag { margin-left: auto; font: 10.5px var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--mute); border: 1px solid var(--line); border-radius: 3px; padding: 2px 6px; }
.frame-body { display: grid; grid-template-columns: 230px minmax(0, 1fr) 220px; min-height: 380px; }
.fr-side, .fr-graph { padding: 16px; font-size: 12.5px; }
.fr-side { border-right: 1px solid var(--line); }
.fr-graph { border-left: 1px solid var(--line); }
.fr-side b, .fr-graph b, .fr-reply b { display: block; margin-bottom: 10px; font: 10.5px var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--mute); }
.fr-side ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.fr-side li { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 5px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fr-side li.on { background: var(--ground); color: var(--ink); font-weight: 500; }
.fr-side i { flex: none; width: 7px; height: 7px; border-radius: 50%; }
.s-ok { background: var(--ok); } .s-warn { background: var(--warn); } .s-dup { background: var(--line-2); }
.fr-main { padding: 18px 22px; min-width: 0; }
.fr-head { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.fr-head .fr-title { margin: 0; font-size: 18px; font-weight: 600; letter-spacing: -0.01em; }
.pill { align-self: flex-start; font: 10.5px var(--mono); letter-spacing: 0.1em; text-transform: uppercase; padding: 3px 7px; border-radius: 3px; background: var(--ground-2); color: var(--ink-2); }
.fr-steps { list-style: none; margin: 0 0 16px; padding: 0; border-top: 1px solid var(--line); font: 12px/1.5 var(--mono); }
.fr-steps li { display: grid; grid-template-columns: 86px minmax(0, 1fr) auto; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--line); }
.fr-steps li > span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fr-steps .k { color: var(--mute); }
.fr-steps .v { color: var(--mute); text-align: right; }
.fr-steps .ok { color: var(--ok-text); } .fr-steps .warn { color: var(--warn-text); }
.fr-reply { border: 1px solid var(--line); border-radius: 7px; padding: 12px 14px; background: var(--ground); }
.fr-reply p { margin: 0 0 12px; font-size: 13.5px; color: var(--ink-2); }
.fr-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.btn-mini { font: 10.5px var(--mono); letter-spacing: 0.1em; text-transform: uppercase; padding: 5px 9px; border: 1px solid var(--line-2); border-radius: 3px; color: var(--ink-2); background: var(--paper); }
.btn-mini.dark { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.fr-graph svg { width: 100%; height: auto; }
.fr-graph .edges path { fill: none; stroke: var(--line-2); stroke-width: 1.2; }
.fr-graph .nodes circle { fill: var(--paper); stroke: var(--ink); stroke-width: 1.4; }
.fr-graph .nodes .hub { fill: var(--signal); stroke: var(--signal); }
.fr-graph .lbl text { font: 9px var(--mono); fill: var(--mute); text-anchor: middle; }

/* Sections */
section.features, section.how, section.deploy { max-width: 1240px; margin: 0 auto; padding: clamp(64px, 9vw, 112px) clamp(16px, 3vw, 32px) 0; }
.sec-head { max-width: 720px; margin-bottom: 36px; }
.sec-head h2, .band h2, .cta h2 {
  margin: 12px 0 0; font-size: clamp(28px, 4vw, 48px); line-height: 1.02; font-weight: 600;
  letter-spacing: -0.035em; text-transform: uppercase; text-wrap: balance;
}
.lede { margin: 16px 0 0; font-size: 16px; color: var(--ink-2); max-width: 62ch; }

.grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line-2); border-left: 1px solid var(--line-2); }
.card { padding: 22px 20px 26px; border-right: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); background: var(--ground); transition: background 150ms; }
.card:hover { background: var(--paper); }
.card h3 { margin: 18px 0 6px; font-size: 15px; font-weight: 600; }
.card p { margin: 0; font-size: 13.5px; color: var(--ink-2); }
.ill { width: 100%; max-width: 160px; height: auto; display: block; }
.ill rect, .ill circle { fill: var(--paper); stroke: var(--ink); stroke-width: 1.4; }
.ill .ghost { fill: none; stroke: var(--line-2); stroke-dasharray: 3 3; }
.ill .acc { fill: var(--signal); stroke: var(--signal); }
.ill .ln { fill: none; stroke: var(--ink); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.ill .acc-ln { stroke: var(--signal); stroke-width: 2; }
.ill .dash { stroke-dasharray: 4 4; stroke: var(--line-2); }

.flow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; counter-reset: s; }
.flow li { position: relative; padding: 20px 20px 0 0; border-top: 2px solid var(--ink); }
.flow li::before { content: ""; position: absolute; top: -6px; left: 0; width: 10px; height: 10px; border-radius: 50%; background: var(--ink); }
.flow li:last-child::before { background: var(--signal); }
.flow .n { font: 11px var(--mono); letter-spacing: 0.14em; color: var(--mute); }
.flow h3 { margin: 8px 0 6px; font-size: 17px; font-weight: 600; text-transform: uppercase; letter-spacing: -0.01em; }
.flow p { margin: 0; font-size: 13.5px; color: var(--ink-2); }

.band { margin-top: clamp(64px, 9vw, 112px); background: var(--ink); color: var(--paper); }
.band-inner { max-width: 1240px; margin: 0 auto; padding: clamp(56px, 8vw, 96px) clamp(16px, 3vw, 32px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: clamp(32px, 6vw, 80px); }
.eyebrow.light { color: #a3a39c; }
.lede.light { color: #cfcfc8; }
.gov { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid #333; }
.gov li { display: flex; flex-direction: column; gap: 4px; padding: 16px 16px 18px 0; border-bottom: 1px solid #333; }
.gov b { font-size: 14px; font-weight: 600; }
.gov b::before { content: "■ "; color: var(--signal); font-size: 10px; vertical-align: 2px; }
.gov span { font-size: 13.5px; color: #b9b9b2; }

.deploy-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.tile { display: flex; flex-direction: column; gap: 4px; padding: 18px; background: var(--paper); border: 1px solid var(--line); border-radius: 8px; }
.tile b { font-size: 14.5px; font-weight: 600; }
.tile span { font-size: 13px; color: var(--mute); }

.cta { display: flex; flex-direction: column; align-items: center; gap: 26px; text-align: center; padding: clamp(80px, 11vw, 140px) 16px; }
.foot { padding: 40px clamp(16px, 3vw, 32px) 24px; border-top: 1px solid var(--line); font-size: 13px; color: var(--mute); }
.foot-grid { display: grid; grid-template-columns: minmax(220px, 1.6fr) repeat(auto-fit, minmax(110px, 1fr)); gap: 28px 32px; max-width: 1200px; margin: 0 auto; }
.foot-brand { display: flex; flex-direction: column; gap: 10px; }
.foot-brand .nav-brand { color: var(--ink); }
.foot-brand p { margin: 0; color: var(--ink-2); max-width: 32ch; }
.foot-contact .mono { color: var(--ink); margin-left: 4px; }
.foot-col { display: flex; flex-direction: column; gap: 8px; }
.foot-col h2 { margin: 0 0 4px; font: 10.5px var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--mute); }
.foot-col a { color: var(--ink-2); text-decoration: none; }
.foot-col a:hover { color: var(--ink); text-decoration: underline; }
/* Cookie settings (consent-manager.js): a button that reads as the links beside it. */
.foot-btn { align-self: flex-start; margin: 0; padding: 0; border: 0; background: none; color: var(--ink-2); font: inherit; text-align: left; cursor: pointer; }
.foot-btn:hover { color: var(--ink); text-decoration: underline; }
.foot-btn[hidden] { display: none; }
.foot-base { display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; max-width: 1200px; margin: 32px auto 0; padding-top: 16px; border-top: 1px solid var(--line); font-size: 11.5px; line-height: 1.5; }
.foot-base span:last-child { max-width: 80ch; }
@media (max-width: 860px) { .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .foot-brand { grid-column: 1 / -1; } }
.foot .mono { font-family: var(--mono); letter-spacing: 0.06em; }

/* Narrow screens */
@media (max-width: 1080px) {
  .frame-body { grid-template-columns: 200px minmax(0, 1fr); }
  .fr-graph { display: none; }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .flow { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; }
  .band-inner { grid-template-columns: 1fr; }
  .deploy-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .nav-links { display: none; }
  .nav-cta { margin-left: auto; }
  .nav .btn { height: 32px; padding: 0 10px; font-size: 10.5px; }
  .frame-body { grid-template-columns: 1fr; }
  .fr-side { display: none; }
  .fr-main { padding: 14px; }
  .fr-steps li { grid-template-columns: 70px minmax(0, 1fr) auto; gap: 8px; font-size: 11px; }
  .grid, .flow, .gov, .deploy-row { grid-template-columns: 1fr; }
}

/* ---- Motion (welcome.js adds html.motion; nothing here applies without it,
   and it never applies under prefers-reduced-motion) ---- */
.caret { display: inline-block; width: 7px; height: 14px; margin-left: 3px; vertical-align: -2px; background: var(--ink-2); opacity: 0; }
.motion .cmd.done .caret { opacity: 1; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* The mark: a slow turn, the core breathing. */
/* Hero mark: A and L draw themselves, turn, and become the spark — which then
   keeps turning, like a top that never falls. Without motion, only the spark. */
.hero-mark .hm-al { display: none; }
.hero-mark g { transform-box: view-box; transform-origin: 16px 16px; }
.motion .hero-mark .hm-al { display: inline; animation: al-out 0.7s 1.35s cubic-bezier(.6,0,.4,1) forwards; }
.motion .hero-mark .hm-al path { stroke-dasharray: 60; stroke-dashoffset: 60; animation: draw 0.9s cubic-bezier(.65,0,.35,1) 0.1s forwards; }
.motion .hero-mark .hm-al path + path { animation-delay: 0.55s; }
.motion .hero-mark .hm-al rect { transform-box: fill-box; transform-origin: center; animation: pop 0.35s 0.95s both cubic-bezier(.3,1.6,.5,1); }
.motion .hero-mark .hm-spark { opacity: 0; animation: sp-in 0.8s 1.7s cubic-bezier(.16,1,.3,1) forwards, turn 24s linear 2.5s infinite; }
.motion .hero-mark .sp-core { transform-box: fill-box; transform-origin: center; animation: breathe2 2.4s ease-in-out 2.5s infinite; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes pop { from { transform: scale(0); } }
@keyframes al-out { to { opacity: 0; transform: rotate(135deg) scale(0.4); } }
@keyframes sp-in { from { opacity: 0; transform: rotate(-135deg) scale(0.4); } to { opacity: 1; transform: rotate(0) scale(1); } }
@keyframes turn { to { transform: rotate(360deg); } }
@keyframes breathe { 50% { transform: scale(1.7); opacity: 0.55; } }
.motion .nav-brand:hover svg { animation: turn 1.2s cubic-bezier(.6,0,.2,1); }

/* Headline: words rise from behind their own mask. */
.hero h1 .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.06em; }
.hero h1 .w > span { display: inline-block; transform: translateY(105%); transition: transform 900ms cubic-bezier(.16,1,.3,1); transition-delay: var(--d); }
.hero h1.in .w > span { transform: none; }
.motion .hero .mono-sub { visibility: hidden; }
.motion .hero-actions, .motion .cmd { animation: fadeUp 700ms 900ms both cubic-bezier(.16,1,.3,1); }
@keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } }

/* Product frame: flattens with the scroll (transform set in JS). */
.motion .frame { transform-origin: 50% 0; will-change: transform, opacity; }
/* The live run */
.fr-steps li { transition: opacity 300ms, background 300ms; }
.fr-steps li.pending { opacity: 0.18; }
.fr-steps li.live { background: linear-gradient(90deg, rgba(255,91,31,0.10), transparent 70%); }
.fr-steps li.live .k::before { content: "▸ "; color: var(--signal); }
.fr-steps li.done .k { color: var(--ink-2); }
.running .fr-side li.on i { animation: ping 1.4s ease-out infinite; }
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(31,157,85,.5); } 100% { box-shadow: 0 0 0 8px rgba(31,157,85,0); } }
.btn-mini.dark.pulse { animation: press 1.8s ease-in-out infinite; }
@keyframes press { 0%,100% { box-shadow: 0 0 0 0 rgba(17,17,17,.35); } 50% { box-shadow: 0 0 0 6px rgba(17,17,17,0); } }
/* Packets along the agent graph's edges */
.motion .fr-graph .edges path { stroke-dasharray: 3 7; animation: flow 1.6s linear infinite; }
@keyframes flow { to { stroke-dashoffset: -20; } }
.motion .fr-graph .nodes .hub { animation: breathe2 2.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes breathe2 { 50% { transform: scale(1.25); } }

/* Feature drawings draw themselves, then play on hover */
.ill.pre path, .ill.pre rect, .ill.pre circle { stroke-dasharray: var(--len); stroke-dashoffset: var(--len); fill-opacity: 0; }
.ill.draw path, .ill.draw rect, .ill.draw circle {
  stroke-dashoffset: 0; fill-opacity: 1;
  transition: stroke-dashoffset 900ms cubic-bezier(.65,0,.35,1) calc(var(--i) * 90ms), fill-opacity 400ms calc(var(--i) * 90ms + 600ms);
}
.ill.draw .ghost { stroke-dasharray: 3 3; stroke-dashoffset: 0; }
.motion .card:hover .ill .acc { animation: nudge 600ms cubic-bezier(.3,1.6,.5,1); transform-box: fill-box; transform-origin: center; }
@keyframes nudge { 40% { transform: scale(1.18); } }
.motion .card:hover .ill .ghost { transition: transform 500ms cubic-bezier(.16,1,.3,1); transform: translateX(-12px); }
.motion .card:hover .ill .acc-ln { animation: redraw 700ms ease-out; }
@keyframes redraw { from { stroke-dasharray: 60; stroke-dashoffset: 60; } to { stroke-dasharray: 60; stroke-dashoffset: 0; } }

/* How it works: a line that fills with the scroll */
.motion .flow { position: relative; }
.motion .flow li { border-top-color: var(--line-2); }
.motion .flow::before {
  content: ""; position: absolute; top: 0; left: 0; height: 2px; width: var(--fill, 0%);
  background: var(--ink); z-index: 1; transition: width 120ms linear;
}
.motion .flow li::before { background: var(--line-2); transition: background 300ms, transform 300ms; z-index: 2; }
.motion .flow li.lit::before { background: var(--ink); transform: scale(1.3); }
.motion .flow li:last-child.lit::before { background: var(--signal); }
.motion .flow li h3, .motion .flow li p { transition: opacity 400ms; }
.motion .flow li:not(.lit) h3, .motion .flow li:not(.lit) p { opacity: 0.35; }

/* Governance: controls switch on */
.motion .gov li { opacity: 0.25; transform: translateX(-6px); transition: opacity 400ms, transform 400ms cubic-bezier(.16,1,.3,1); }
.motion .gov li b::before { color: #555; transition: color 300ms; }
.motion .gov li.on { opacity: 1; transform: none; }
.motion .gov li.on b::before { color: var(--signal); }

.rise { opacity: 0; transform: translateY(18px); transition: opacity 700ms, transform 700ms cubic-bezier(.16,1,.3,1); }
.rise.in { opacity: 1; transform: none; }
.tile.rise:nth-child(2) { transition-delay: 80ms; } .tile.rise:nth-child(3) { transition-delay: 160ms; } .tile.rise:nth-child(4) { transition-delay: 240ms; }

/* ---- Product switcher in the frame ---- */
.frame-tabs { display: flex; gap: 2px; margin-left: 14px; padding: 2px; border: 1px solid var(--line); border-radius: 5px; background: var(--paper); }
.frame-tabs button {
  font: 500 10.5px/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase;
  padding: 5px 9px; border: 0; border-radius: 3px; background: transparent; color: var(--mute); cursor: pointer;
}
.frame-tabs button:hover { color: var(--ink); }
.frame-tabs button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.frame .fr-side, .frame .fr-main, .frame .fr-graph { transition: opacity 180ms; }
.frame.switching .fr-side, .frame.switching .fr-main, .frame.switching .fr-graph { opacity: 0; }

/* ---- Products ---- */
section.products { max-width: 1240px; margin: 0 auto; padding: clamp(64px, 9vw, 112px) clamp(16px, 3vw, 32px) 0; }
.prod-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.prod {
  display: flex; flex-direction: column; gap: 10px; padding: 20px 20px 18px;
  background: var(--paper); border: 1px solid var(--line); border-radius: 10px;
  transition: border-color 200ms, transform 300ms cubic-bezier(.16,1,.3,1), box-shadow 300ms;
}
.prod:hover { border-color: var(--ink); transform: translateY(-3px); box-shadow: 0 18px 40px -28px rgba(17,17,17,.45); }
.prod header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.prod-k { font: 10.5px var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--mute); }
.tag { font: 500 10px var(--mono); letter-spacing: 0.12em; text-transform: uppercase; padding: 3px 7px; border-radius: 3px; border: 1px solid var(--line-2); color: var(--ink-2); }
.tag.live { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.tag.live::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: #3ddc84; vertical-align: 1px; }
.prod h3 { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; }
.prod p { margin: 0; font-size: 13.5px; color: var(--ink-2); flex: 1; }
.sys { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 5px; }
.sys li { font: 10.5px var(--mono); padding: 3px 6px; border-radius: 3px; background: var(--ground-2); color: var(--ink-2); }
.prod-go { margin-top: 6px; font: 500 11px var(--mono); letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; color: var(--ink); }
.prod-go span { display: inline-block; transition: transform 250ms cubic-bezier(.16,1,.3,1); }
.prod:hover .prod-go span { transform: translateX(5px); }
.prod-wide { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 12px 28px; background: var(--ink); border-color: var(--ink); color: var(--paper); }
.prod-wide header { flex-direction: column; align-items: flex-start; }
.prod-wide p { color: #cfcfc8; max-width: 70ch; flex: 1 1 360px; }
.prod-wide .prod-go { color: var(--paper); }
.prod-wide .tag.live { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.prod-wide .prod-k { color: #a3a39c; }

/* ---- Bring your own agent: the console's create flow, six steps ---- */
section.build { max-width: 1240px; margin: 0 auto; padding: clamp(64px, 9vw, 112px) clamp(16px, 3vw, 32px) 0; }
.flow-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.docs-link { display: inline-block; margin-top: 22px; }
.docs-link span { display: inline-block; transition: transform 250ms cubic-bezier(.16,1,.3,1); }
.docs-link:hover span { transform: translateX(5px); }
@media (max-width: 1080px) { .flow-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 28px; } }
@media (max-width: 640px) { .flow-6 { grid-template-columns: 1fr; } }

/* ---- Connector strip ---- */
.marquee { max-width: 1240px; margin: 0 auto; padding: 56px clamp(16px, 3vw, 32px) 0; }
.marquee .eyebrow { margin: 0 0 6px; }
.mq-note { margin: 0 0 14px; max-width: 62ch; font-size: 13.5px; color: var(--ink-2); }
.mq { overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.mq-track { display: flex; flex-wrap: wrap; gap: 0 36px; padding: 16px 0; font-size: 15px; font-weight: 500; color: var(--ink-2); }
.motion .mq-track { flex-wrap: nowrap; width: max-content; animation: slide 60s linear infinite; }
.motion .mq:hover .mq-track { animation-play-state: paused; }
.mq-track span { white-space: nowrap; }
.mq-track span::before { content: "◆"; margin-right: 12px; font-size: 8px; color: var(--signal); vertical-align: 2px; }
@keyframes slide { to { transform: translateX(-50%); } }
.motion .prod { opacity: 0; transform: translateY(20px); }
.motion .prod.in { opacity: 1; transform: none; transition: opacity 600ms, transform 700ms cubic-bezier(.16,1,.3,1), border-color 200ms, box-shadow 300ms; }

.motion .prod.in:hover { transform: translateY(-3px); }
@media (max-width: 1280px) { .prod-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } .prod-grid > * { grid-column: span 2; } .prod-grid > :nth-child(n+4) { grid-column: span 3; } }
@media (max-width: 860px) { .prod-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .prod-grid > *, .prod-grid > :nth-child(n+4) { grid-column: auto; } .prod-grid > :last-child { grid-column: 1 / -1; } }
@media (max-width: 640px) {
  .prod-grid { grid-template-columns: 1fr; }
  .frame-tabs { margin-left: auto; }
  .frame-title, .frame-tag { display: none; }
}

/* ---- Security & deployment, how we engage ---- */
.sec-row { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.flow-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.flow-3 li { padding-right: 32px; }
.cta-mail { margin: -8px 0 0; font-size: 14px; color: var(--mute); }
.sel { user-select: all; -webkit-user-select: all; color: var(--ink); }
.foot-sales { display: inline-flex; align-items: center; gap: 12px; }
.btn-sm { height: 30px; padding: 0 10px; font-size: 10.5px; }
@media (max-width: 1080px) { .sec-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .sec-row, .flow-3 { grid-template-columns: 1fr; }
  .nav { gap: 12px; }
  .nav-cta { gap: 6px; }
  .nav .nav-login { padding: 0 8px; }
}
@media (max-width: 400px) { .nav-brand span { display: none; } }

/* ---- The request form (a native <dialog>: focus trap, Esc and inert
   background come from the browser) ---- */
.demo {
  width: min(640px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 0;
  border: 1px solid var(--ink); border-radius: 10px; background: var(--paper); color: var(--ink);
  box-shadow: 0 40px 90px -30px rgba(17,17,17,.5);
}
.demo::backdrop { background: rgba(17,17,17,.45); backdrop-filter: blur(3px); }
.demo-form { display: flex; flex-direction: column; }
.demo-head { position: relative; padding: 22px 24px 6px; }
.demo-head h2, .demo-done h2 { margin: 8px 0 0; font-size: 24px; line-height: 1.05; font-weight: 600; letter-spacing: -0.03em; text-transform: uppercase; }
.demo-x { position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; border: 1px solid var(--line-2); border-radius: 4px; background: transparent; font-size: 20px; line-height: 1; cursor: pointer; color: var(--ink); }
.demo-x:hover { border-color: var(--ink); }
.demo-body { display: flex; flex-direction: column; gap: 14px; padding: 16px 24px; }
.demo-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.f { display: flex; flex-direction: column; gap: 6px; min-width: 0; margin: 0; }
.f > span, .f legend { font: 10.5px var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); }
.f i { font-style: normal; color: var(--mute); text-transform: none; letter-spacing: 0; }
.f input, .f select, .f textarea {
  width: 100%; padding: 9px 10px; border: 1px solid var(--line-2); border-radius: 4px;
  background: var(--ground); color: var(--ink); font: 14px/1.4 var(--sans);
}
.f textarea { resize: vertical; min-height: 90px; }
.f input:focus, .f select:focus, .f textarea:focus, .sys-pick input:focus-visible { outline: 2px solid var(--signal); outline-offset: 1px; border-color: var(--ink); }
.f [aria-invalid="true"] { border-color: #c62828; }
.sys-pick { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 12px; padding: 0; border: 0; }
.sys-pick legend { padding: 0; margin-bottom: 8px; }
.sys-pick label { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-2); cursor: pointer; }
.sys-pick input { accent-color: var(--ink); width: 15px; height: 15px; margin: 0; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.demo-err { margin: 0; min-height: 0; font-size: 13px; color: #c62828; }
.demo-err:empty { display: none; }
.demo-err .sel { font-family: var(--mono); }
.demo-foot { display: flex; gap: 10px; padding: 14px 24px 22px; border-top: 1px solid var(--line); }
.demo-foot .btn { cursor: pointer; }
.demo-foot .btn[disabled] { opacity: .6; cursor: progress; }
.demo-done { padding: 28px 24px; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.demo-done[hidden] { display: none; }
.demo-done p { margin: 0; color: var(--ink-2); }
.demo-done .btn { cursor: pointer; }
.demo-done h2::before { content: "■ "; color: var(--signal); font-size: 14px; vertical-align: 4px; }
@media (max-width: 640px) {
  .demo-grid { grid-template-columns: 1fr; }
  .sys-pick { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .demo-head, .demo-body, .demo-foot { padding-left: 16px; padding-right: 16px; }
}
.motion .demo[open] { animation: fadeUp 320ms cubic-bezier(.16,1,.3,1); }

/* ---- Our signature: the word "take", and the intake belt ---- */
.hero h1 em {
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  font-style: italic; font-weight: 500; text-transform: lowercase;
  letter-spacing: -0.02em; color: var(--signal-large); padding-right: 0.04em;
}
.belt { position: relative; width: min(1180px, 100%); margin: 44px auto 0; }
.belt-track { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.req {
  position: relative; display: flex; flex-direction: column; gap: 3px; width: 214px; padding: 10px 12px 12px;
  text-align: left; background: var(--paper); border: 1px solid var(--line); border-radius: 6px;
}
.req .src { font: 10px var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--mute); }
.req b { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.req .rid { font: 10.5px var(--mono); color: var(--mute); }
.req .stamp {
  position: absolute; right: 10px; bottom: 10px; font: 700 10px var(--mono); letter-spacing: 0.12em;
  color: var(--signal-text); border: 1.5px solid var(--signal); border-radius: 3px; padding: 2px 5px; transform: rotate(-6deg);
}
.belt-gate { display: none; }

/* With motion: the cards ride a belt through the spark and get stamped */
.motion .belt {
  height: 86px; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.motion .belt::before {
  content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px;
  background: repeating-linear-gradient(90deg, var(--line-2) 0 6px, transparent 6px 12px);
}
.motion .belt-track { display: block; position: absolute; inset: 0; }
.motion .req {
  position: absolute; top: 12px; left: 0; width: 164px;
  animation: ride 16s linear infinite; animation-delay: calc(var(--n) * -2s);
}
.motion .req .stamp { animation: stamp 16s linear infinite; animation-delay: calc(var(--n) * -2s); }
@keyframes ride {
  0%   { transform: translateX(calc(-240px)); border-color: var(--line); }
  47%  { border-color: var(--line); }
  50%  { border-color: var(--ink); box-shadow: 0 8px 24px -14px rgba(17,17,17,.5); }
  56%  { border-color: var(--line); box-shadow: none; }
  100% { transform: translateX(min(1180px, 100vw)); }
}
@keyframes stamp {
  0%, 49% { opacity: 0; transform: rotate(-6deg) scale(1.8); }
  51%     { opacity: 1; transform: rotate(-6deg) scale(0.92); }
  53%, 100% { opacity: 1; transform: rotate(-6deg) scale(1); }
}
.motion .belt-gate {
  display: grid; place-items: center; position: absolute; left: 50%; top: 50%;
  width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%;
  background: var(--ground); border: 1px solid var(--line-2); color: var(--ink); z-index: 2;
}
.belt-gate svg { width: 26px; height: 26px; }
.motion .belt-gate svg { animation: turn 6s linear infinite; }
.motion .belt:hover .req, .motion .belt:hover .stamp { animation-play-state: paused; }
@media (max-width: 640px) {
  .req { width: 180px; }
  .motion .req { width: 146px; }
  .motion .req:nth-child(even) { display: none; }   /* half the cards, twice the room */
}

/* ---- Accessibility: skip link, focus, pausing motion ---- */
.skip {
  position: absolute; left: 12px; top: -48px; z-index: 50; padding: 8px 12px; border-radius: 4px;
  background: var(--ink); color: var(--paper); font: 500 12px var(--mono); letter-spacing: 0.08em;
  text-transform: uppercase; text-decoration: none;
}
.skip:focus { top: 12px; }
main:focus { outline: none; }
/* One visible focus ring for every control, keyboard only: ink on the light
   ground, off-white on the black band and black product card. */
a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 2px;
}
.band a:focus-visible, .prod-wide a:focus-visible, .btn-dark:focus-visible, .skip:focus-visible {
  outline-color: var(--signal);
}
.motion-toggle {
  margin-top: 14px; padding: 5px 10px; border: 1px solid var(--line-2); border-radius: 4px;
  background: transparent; color: var(--ink-2); cursor: pointer;
  font: 500 10.5px var(--mono); letter-spacing: 0.12em; text-transform: uppercase;
}
.motion-toggle:hover { border-color: var(--ink); color: var(--ink); }
.motion-paused *, .motion-paused *::before, .motion-paused *::after { animation-play-state: paused !important; }
/* Belt and braces: whatever the script decided, a visitor who asks the OS for
   less motion gets no looping animation. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-play-state: paused !important; transition-duration: 0.01ms !important; }
}

/* ---- FAQ ---- */
section.faq { max-width: 1240px; margin: 0 auto; padding: clamp(64px, 9vw, 112px) clamp(16px, 3vw, 32px) 0; }
.faq-list { border-top: 1px solid var(--line-2); max-width: 900px; }
.faq details { border-bottom: 1px solid var(--line-2); }
.faq summary {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 18px 0; cursor: pointer; list-style: none; font-size: 17px; font-weight: 600; letter-spacing: -0.01em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font: 400 20px var(--mono); color: var(--mute); }
.faq details[open] summary::after { content: "−"; }
.faq details p { margin: 0 0 20px; max-width: 72ch; font-size: 15px; color: var(--ink-2); }

/* ---- Footer links ---- */
.foot-links { display: flex; flex-wrap: wrap; gap: 6px 18px; width: 100%; order: 3; }
.foot-links a { color: var(--ink-2); text-decoration: none; }
.foot-links a:hover { color: var(--ink); text-decoration: underline; }

/* ---- Agents for SAP: two routes in, and the card a person confirms ---- */
section.sap { max-width: 1240px; margin: 0 auto; padding: clamp(64px, 9vw, 112px) clamp(16px, 3vw, 32px) 0; }
.prod p a { text-decoration: underline; text-decoration-color: var(--signal); text-underline-offset: 3px; }
.sap-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 12px; align-items: stretch; }
.routes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.route {
  display: flex; flex-direction: column; gap: 10px; padding: 20px 20px 18px;
  background: var(--paper); border: 1px solid var(--line); border-radius: 10px;
}
.route header { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.route-k { font: 10.5px var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--mute); }
.route h3 { font-size: 21px; line-height: 1.2; font-weight: 600; letter-spacing: -0.02em; text-wrap: balance; }
.route p { margin: 0; font-size: 13.5px; color: var(--ink-2); }
.checks { list-style: none; margin: 4px 0 0; padding: 0; border-top: 1px solid var(--line); }
.checks li { display: flex; gap: 9px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 13px; color: var(--ink-2); }
.checks li::before { content: "■"; flex: none; color: var(--signal); font-size: 9px; line-height: 20px; }
.checks li:last-child { border-bottom: 0; padding-bottom: 0; }

/* The confirmation, drawn as the chat it happens in. Text, not a picture. */
.confirm {
  margin: 0; display: flex; flex-direction: column; gap: 12px; padding: 18px;
  background: var(--ground-2); border: 1px solid var(--line); border-radius: 10px;
}
.confirm-chat { display: flex; flex-direction: column; gap: 10px; }
.confirm-ask {
  align-self: flex-end; max-width: 88%; margin: 0; padding: 9px 12px; border-radius: 10px 10px 2px 10px;
  background: var(--ink); color: var(--paper); font-size: 13.5px;
}
.confirm-ask b { display: block; font: 10px var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: #a3a39c; }
.confirm-card {
  display: flex; flex-direction: column; gap: 8px; padding: 14px 16px 16px; max-width: 94%;
  background: var(--paper); border: 1px solid var(--line-2); border-radius: 2px 10px 10px 10px;
  box-shadow: 0 18px 40px -30px rgba(17, 17, 17, 0.5);
}
.confirm-from { display: flex; align-items: center; gap: 7px; font-size: 12px; }
.confirm-from svg { width: 16px; height: 16px; color: var(--ink); }
.confirm-from span { color: var(--mute); }
.confirm-q { margin: 2px 0 0; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.confirm-what { margin: 0; font-size: 13.5px; color: var(--ink); }
.confirm-facts { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 3px 14px; margin: 2px 0; }
.confirm-facts dt { font: 10.5px/1.9 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--mute); }
.confirm-facts dd { margin: 0; font-size: 13px; }
.confirm-note { margin: 0; font-size: 12px; color: var(--mute); }
.confirm-actions { display: flex; gap: 6px; margin-top: 4px; }
.confirm figcaption { font: 11px/1.5 var(--mono); letter-spacing: 0.04em; color: var(--mute); }
.motion .confirm .btn-mini.dark { animation: press 1.8s ease-in-out infinite; }

.sap-areas { margin-top: 28px; }
.area-row { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.area-k { font: normal 10px var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--mute); }
.sap-docs { display: inline-block; margin-top: 18px; }
.sap-docs span { display: inline-block; transition: transform 250ms cubic-bezier(.16,1,.3,1); }
.sap-docs:hover span { transform: translateX(5px); }
.tile.rise:nth-child(5) { transition-delay: 320ms; } .tile.rise:nth-child(6) { transition-delay: 400ms; }
.tile.rise:nth-child(7) { transition-delay: 480ms; } .tile.rise:nth-child(8) { transition-delay: 560ms; }

@media (max-width: 1080px) {
  .sap-grid { grid-template-columns: 1fr; }
  .confirm { max-width: 560px; }
  .area-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .routes, .area-row { grid-template-columns: 1fr; }
}

/* ---- agentliya.com's hero (public_site.agent_liya_page) ---- */
/* A longer headline than liyagent.com's: a size down, so it keeps to three
   lines on a laptop and the belt still shows above the fold. */
.hero h1.h1-ask { font-size: clamp(36px, 6.4vw, 80px); }
/* The waiting line: the command line's box, wrapping, with the visitor's own
   number in it. */
.cmd.wait { white-space: normal; text-align: center; line-height: 1.9; }
.wait input {
  width: 7ch; padding: 1px 6px; border: 1px solid var(--line-2); border-radius: 3px;
  background: var(--paper); color: var(--ink); font: inherit; text-align: right;
}
.wait input:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
.wait output { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }

/* Brand sign-off under the footer mark. */
.foot-sign { font-weight: 600; color: var(--ink); letter-spacing: -0.01em; }

/* ---- Why Liyagent: four pillars ---- */
section.pillars, section.dial-sec { max-width: 1240px; margin: 0 auto; padding: clamp(64px, 9vw, 112px) clamp(16px, 3vw, 32px) 0; }
.pillars h2 em, .dial-sec h2 em {
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  font-style: italic; font-weight: 500; color: var(--signal-large);
}
.pil-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.pil { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 26px 22px 24px;
  background: var(--paper); border: 1px solid var(--line); border-radius: 18px; }
.pil-n { font: 500 12px/1 var(--mono); letter-spacing: 0.16em; color: var(--signal-text); }
.pil h3 { font-size: 21px; letter-spacing: -0.02em; margin: 4px 0 0; }
.pil p { margin: 0; color: var(--ink-2); font-size: 15px; line-height: 1.5; flex: 1; }
.pil-tag { align-self: flex-start; font: 11px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--mute); border: 1px solid var(--line); border-radius: 999px; padding: 7px 10px; }
@media (max-width: 1000px) { .pil-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .pil-grid { grid-template-columns: 1fr; } }

/* ---- The autonomy dial ---- */
.dial { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: var(--paper); }
.dial li { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 26px 22px 24px; border-right: 1px solid var(--line); }
.dial li:last-child { border-right: 0; }
.dial li::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--signal); }
.dial li:nth-child(1)::after { opacity: 0.25; } .dial li:nth-child(2)::after { opacity: 0.5; }
.dial li:nth-child(3)::after { opacity: 0.75; } .dial li:nth-child(4)::after { opacity: 1; }
.d-step { font: 500 12px/1 var(--mono); letter-spacing: 0.16em; color: var(--mute); }
.dial b { font-size: 19px; letter-spacing: -0.015em; }
.dial span:last-child { color: var(--ink-2); font-size: 15px; line-height: 1.5; }
.dial-next { margin: 18px 0 0; max-width: 820px; color: var(--ink-2); font-size: 15px; line-height: 1.55; }
.soon { display: inline-block; margin-right: 8px; font: 11px/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--paper); background: var(--ink); border-radius: 999px; padding: 6px 9px; vertical-align: 1px; }
@media (max-width: 1000px) { .dial { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dial li:nth-child(2) { border-right: 0; } .dial li:nth-child(-n+2) { border-bottom: 1px solid var(--line); } }
@media (max-width: 560px) { .dial { grid-template-columns: 1fr; } .dial li { border-right: 0; border-bottom: 1px solid var(--line); } .dial li:last-child { border-bottom: 0; } }

/* Careers (careers.html): the hero has a lede directly above its actions. */
.hero .lede + .hero-actions { margin-top: 28px; }
.prod-link { color: inherit; text-decoration: none; }
.prod-link:hover { text-decoration: underline; }