/* api.insure. The claim file, made callable.
   Paper of record (manila) for the page, slate plates where the software lives,
   slate-teal as the one instrument accent, madder only for BLOCKED. Linear craft:
   Inter Variable 400/510/590, -0.022em titles, hairlines, quiet motion. */

@font-face { font-family: "Inter"; src: url(/fonts/InterVariable-latin.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url(/fonts/JetBrainsMono-latin.woff2) format("woff2"); font-weight: 100 800; font-display: swap; }

:root {
  --paper: #f5f0e3; --paper-2: #efe7d5; --paper-3: #e9dfc7; --manila: #e4d2ac; --manila-2: #d9c497;
  --ink: #192228; --t2: #374148; --t3: #535c63; --t4: #60696f;
  --ink-rgb: 25, 34, 40;
  --line: rgba(var(--ink-rgb), .085); --line-2: rgba(var(--ink-rgb), .13); --line-3: rgba(var(--ink-rgb), .22);
  --acc: #266c89; --acc-deep: #0f4e69; --acc-rgb: 38, 108, 137; --madder: #972d32;

  --plate: #151d23; --plate-2: #1b242a; --plate-3: #212b32; --pline: #2a343b; --pline-2: rgba(245, 243, 237, .055);
  --p-t1: #f5f3ed; --p-t2: #c3ccd1; --p-t3: #909aa0; --p-t4: #8d969c; --p-t5: #4a555c;
  --p-acc: #72bdda; --p-acc-rgb: 114, 189, 218; --p-str: #e9d5ab; --p-madder: #dd766f;

  --sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --max: 1280px; --gut: 78px; --sec: 128px; --hdr: 72px;
  --ease: cubic-bezier(.25, .46, .45, .94); --ease-fig: cubic-bezier(.32, .72, 0, 1); --ease-rv: cubic-bezier(.25, .1, .25, 1);
}
@media (max-width: 1280px) { :root { --gut: 42px; } }
@media (max-width: 1024px) { :root { --gut: 36px; } }
@media (max-width: 768px)  { :root { --sec: 96px; } }
@media (max-width: 640px)  { :root { --gut: 20px; --hdr: 64px; } }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--hdr) + 16px); }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 400 16px/1.6 var(--sans); letter-spacing: -.011em;
  font-feature-settings: "cv01", "ss03"; font-variation-settings: "opsz" auto;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
  overflow-x: clip;
}
/* paper grain: one tile, very quiet, above the ground and under the content */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: url(/img/noise.png) repeat; background-size: 180px; opacity: .05; mix-blend-mode: multiply;
}
::selection { background: rgba(var(--acc-rgb), .22); color: var(--ink); }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, p { margin: 0; }
:focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; border-radius: 4px; }

.wrap { max-width: var(--max); margin: 0 auto; padding-inline: var(--gut); }
.mono { font-family: var(--mono); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--t4); font-weight: 500; }
.skip { position: fixed; left: 16px; top: -60px; z-index: 100; padding: 10px 14px; border-radius: 8px; background: var(--ink); color: var(--paper); font-size: 14px; }
.skip:focus-visible { top: 12px; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; flex: none;
  height: 40px; padding: 0 18px; border-radius: 999px; white-space: nowrap;
  font-size: 14px; font-weight: 510; letter-spacing: -.01em;
  transition: background-color .2s var(--ease), box-shadow .2s var(--ease), color .2s var(--ease);
}
.btn-sm { height: 32px; padding: 0 14px; font-size: 13px; }
.btn-primary { background: var(--ink); color: var(--paper); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 1px 2px rgba(var(--ink-rgb), .18); }
.btn-primary:hover { background: #26323a; }
.btn-ghost { color: var(--t2); box-shadow: inset 0 0 0 1px var(--line-3); }
.btn-ghost:hover { color: var(--ink); box-shadow: inset 0 0 0 1px rgba(var(--ink-rgb), .34); background: rgba(var(--ink-rgb), .025); }
.btn-ghost .arr { transition: transform .25s var(--ease); }
.btn-ghost:hover .arr { transform: translateX(2px); }
.btn-light { background: var(--p-t1); color: var(--plate); }
.btn-light:hover { background: #fff; }

/* ---------- nav ---------- */
.brand { display: inline-flex; align-items: center; gap: 9px; font-weight: 590; font-size: 17px; letter-spacing: -.02em; color: var(--ink); white-space: nowrap; }
.brand b { font-weight: inherit; }
.brand span { color: var(--acc); }
.brand-mark { width: 15px; height: 20px; flex: none; }
.brand-mark .bm-t { fill: var(--ink); } .brand-mark .bm-b { fill: var(--acc); }
.foot .brand-mark .bm-t { fill: #e9d5ab; } .foot .brand-mark .bm-b { fill: #4fa3c6; }
.nav { position: fixed; inset: 0 0 auto; z-index: 50; height: var(--hdr); }
.nav::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0;
  background: rgba(245, 240, 227, .78); -webkit-backdrop-filter: blur(20px) saturate(150%); backdrop-filter: blur(20px) saturate(150%);
  box-shadow: 0 1px 0 var(--line); transition: opacity .3s var(--ease);
}
.nav.is-scrolled::before, .nav-open .nav::before { opacity: 1; }
.nav { transition: color .3s var(--ease); }
.nav.on-dark::before { background: rgba(21, 29, 35, .82); box-shadow: 0 1px 0 rgba(245, 243, 237, .07); }
.nav.on-dark .brand { color: var(--p-t1); }
.nav.on-dark .brand span, .nav.on-dark .brand-mark .bm-b { color: var(--p-acc); fill: #4fa3c6; }
.nav.on-dark .brand-mark .bm-t { fill: #e9d5ab; }
.nav.on-dark .nav-links a { color: var(--p-t3); }
.nav.on-dark .nav-links a:hover { color: var(--p-t1); }
.nav.on-dark .nav-cta { background: var(--p-t1); color: var(--plate); }
.nav.on-dark .burger { box-shadow: inset 0 0 0 1px rgba(245, 243, 237, .16); }
.nav.on-dark .burger i { background: var(--p-t1); }
.nav-open .nav.on-dark::before { background: rgba(245, 240, 227, .78); }
.no-js .nav::before { opacity: 1; }
.nav-row { height: var(--hdr); display: flex; align-items: center; gap: 32px; }
.nav-links { display: flex; gap: 28px; margin-left: auto; }
.nav-links a { font-size: 13.5px; color: var(--t3); transition: color .2s var(--ease); }
.nav-links a:hover { color: var(--ink); }
.burger { display: none; position: relative; width: 40px; height: 40px; border-radius: 50%; margin-left: auto; box-shadow: inset 0 0 0 1px var(--line-2); }
.burger i { position: absolute; left: 13px; right: 13px; height: 1.5px; background: var(--ink); border-radius: 2px; transition: transform .3s var(--ease); }
.burger i:first-child { top: 16px; } .burger i:last-child { top: 22px; }
.nav-open .burger i:first-child { transform: translateY(3px) rotate(45deg); }
.nav-open .burger i:last-child { transform: translateY(-3px) rotate(-45deg); }
.menu { display: none; }
@media (max-width: 1024px) {
  .nav-links, .nav-cta { display: none; }
  .burger { display: block; }
  .menu { display: block; position: absolute; top: var(--hdr); left: 0; right: 0; height: calc(100dvh - var(--hdr));
    visibility: hidden; opacity: 0; transform: translateY(-6px); background: rgba(245, 240, 227, .97);
    -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
    transition: opacity .25s var(--ease), transform .25s var(--ease), visibility 0s .25s; }
  .nav-open .menu { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
  .menu ul { list-style: none; margin: 0; padding-top: 8px; padding-bottom: 32px; }
  .menu li a:not(.btn) { display: flex; justify-content: space-between; align-items: center; height: 52px; font-size: 17px; color: var(--ink); border-bottom: 1px solid var(--line); }
  .menu li a span { color: var(--t4); }
  .menu-cta { padding-top: 24px; }
  .menu-cta .btn { width: 100%; height: 48px; font-size: 15px; }
}

/* ---------- reveals ---------- */
.rv { opacity: 0; transform: translateY(14px); filter: blur(8px); transition: opacity .9s var(--ease-rv), transform .9s var(--ease-rv), filter .9s var(--ease-rv); }
.rv.in { opacity: 1; transform: none; filter: none; }
.d1 { transition-delay: .08s; } .d2 { transition-delay: .16s; } .d3 { transition-delay: .24s; }
.no-js .rv { opacity: 1; transform: none; filter: none; }
@media (prefers-reduced-motion: reduce) { .rv { opacity: 1; transform: none; filter: none; transition: none; } }

/* ---------- type ---------- */
h1 { font-size: clamp(44px, 6.1vw, 80px); line-height: 1.02; font-weight: 560; letter-spacing: -.03em; text-wrap: balance; }
h2 { font-size: clamp(32px, 3.8vw, 48px); line-height: 1.06; font-weight: 560; letter-spacing: -.026em; text-wrap: balance; }
h3 { font-size: 16px; line-height: 1.4; font-weight: 590; letter-spacing: -.012em; }
.dim { color: var(--t4); }

.sec { padding-block: var(--sec); position: relative; }
.sh { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; margin-bottom: 72px; }
.sh p { font-size: 19px; line-height: 1.5; color: var(--t3); max-width: 30em; padding-top: 6px; text-wrap: pretty; }
@media (max-width: 900px) { .sh { grid-template-columns: 1fr; gap: 20px; margin-bottom: 48px; } .sh p { font-size: 17px; padding-top: 0; } }

/* ---------- hero ---------- */
.hero { position: relative; padding-top: calc(var(--hdr) + clamp(64px, 9vw, 128px)); isolation: isolate; overflow-x: clip; }
.hero::before { /* a soft slate dawn behind the plate, kept inside the hero */
  content: ""; position: absolute; left: 0; right: 0; top: 52%; height: 760px; z-index: -1; pointer-events: none;
  background: radial-gradient(50% 50% at 50% 50%, rgba(var(--acc-rgb), .10), rgba(var(--acc-rgb), .035) 45%, transparent 72%);
}
.hero-copy { max-width: 920px; }
.hero-sub { margin-top: 24px; max-width: 34em; font-size: clamp(17px, 1.45vw, 20px); line-height: 1.5; color: var(--t3); text-wrap: pretty; }
.hero-cta { display: flex; gap: 12px; margin-top: 36px; align-items: center; }
.hero-cta .btn { height: 44px; padding: 0 20px; font-size: 15px; }
.hero-note { display: flex; align-items: center; gap: 10px; margin-top: 28px; font-size: 13.5px; color: var(--t4); }
.hero-note::before { content: ""; width: 16px; height: 1px; background: var(--line-3); }

/* the console: a slate plate on paper, tucked behind the next section */
.stage { position: relative; z-index: 1; margin: clamp(56px, 7vw, 88px) -32px -112px; }
.frame { position: relative; padding: 8px; border-radius: 22px; background: rgba(var(--ink-rgb), .022); box-shadow: inset 0 0 0 1px var(--line); }
.plate {
  position: relative; border-radius: 14px; overflow: hidden; background: var(--plate); color: var(--p-t1);
  border: 1px solid #0c1216;
  box-shadow: 0 1px 2px rgba(var(--ink-rgb), .12), 0 24px 48px -18px rgba(var(--ink-rgb), .32), 0 72px 120px -48px rgba(var(--ink-rgb), .42);
}
.plate::before { content: ""; position: absolute; left: 14%; right: 14%; top: 0; height: 1px; z-index: 3; background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent); }
.tuck { position: relative; z-index: 2; background: var(--paper); }
.tuck::before { /* the paper edge the plate tucks under */
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--line-2);
  box-shadow: 0 -18px 40px 6px rgba(var(--ink-rgb), .10);
}
.tuck::after { content: ""; position: absolute; inset: 0; z-index: -1; background: url(/img/noise.png) repeat; background-size: 180px; opacity: .05; mix-blend-mode: multiply; pointer-events: none; }

.c-bar { display: flex; align-items: center; height: 52px; padding: 0 12px 0 8px; border-bottom: 1px solid var(--pline); background: var(--plate); }
.c-tabs { display: flex; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.c-tabs::-webkit-scrollbar { display: none; }
.c-tab { position: relative; flex: none; display: flex; align-items: center; gap: 10px; height: 51px; padding: 0 14px; font: 500 12.5px/1 var(--mono); letter-spacing: 0; color: var(--p-t4); white-space: nowrap; transition: color .25s var(--ease); }
.c-tab b { font-weight: 600; color: var(--p-t3); transition: color .25s var(--ease); }
.c-tab:hover { color: var(--p-t2); }
.c-tab[aria-selected="true"] { color: var(--p-t1); }
.c-tab[aria-selected="true"] b { color: var(--p-acc); }
.c-tab .rule { position: absolute; left: 14px; right: 14px; bottom: 0; height: 1.5px; background: var(--p-acc); transform: scaleX(0); transform-origin: left; }
.c-tab[aria-selected="true"] .rule { transform: scaleX(1); }
.js .c-tab[aria-selected="true"] .rule { transform: scaleX(var(--p, 1)); }
.c-tab:focus-visible { outline: none; }
.c-tab:focus-visible::after { content: ""; position: absolute; inset: 8px 4px; border-radius: 6px; box-shadow: inset 0 0 0 2px var(--p-acc); z-index: 4; }
.c-meta { margin-left: auto; display: flex; align-items: center; gap: 14px; padding-left: 16px; font: 500 12px/1 var(--mono); color: var(--p-t4); white-space: nowrap; }
.c-status { display: inline-flex; align-items: center; gap: 7px; height: 24px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--pline); color: var(--p-t2); }
.c-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--p-acc); box-shadow: 0 0 0 3px rgba(var(--p-acc-rgb), .14); }

.c-body { display: grid; grid-template-columns: minmax(0, 43fr) minmax(0, 57fr); height: 652px; }
.c-pane-h { display: flex; justify-content: space-between; align-items: center; height: 40px; padding: 0 24px; border-bottom: 1px solid var(--pline-2); font: 500 11px/1 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--p-t4); }
.c-pane-h span:last-child { text-transform: none; letter-spacing: 0; }
.c-record { border-right: 1px solid var(--pline); min-width: 0; }
.rec-head { padding: 18px 24px 14px; display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; }
.rec-title { font-size: 17px; font-weight: 590; letter-spacing: -.015em; color: var(--p-t1); }
.rec-id { font: 500 12px/1.9 var(--mono); color: var(--p-t3); }
.rec-sub { grid-column: 1 / -1; font-size: 13px; color: var(--p-t3); }
.rec-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--pline-2); }
.rec-row { position: relative; display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; column-gap: 12px; align-items: center; min-height: 50px; padding: 6px 24px; border-bottom: 1px solid var(--pline-2); transition: background-color .5s var(--ease); }
.rec-mark { width: 9px; height: 9px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--p-t5); transition: box-shadow .5s var(--ease), background-color .5s var(--ease); justify-self: center; }
.rec-row.done .rec-mark { background: var(--p-acc); box-shadow: inset 0 0 0 1.5px var(--p-acc); }
.rec-row.wait .rec-mark { box-shadow: inset 0 0 0 1.5px var(--p-acc), 0 0 0 4px rgba(var(--p-acc-rgb), .12); }
.rec-row.wait .rec-mark { animation: wait 2.4s var(--ease) infinite; }
@keyframes wait { 0%, 100% { box-shadow: inset 0 0 0 1.5px var(--p-acc), 0 0 0 3px rgba(var(--p-acc-rgb), .16); } 50% { box-shadow: inset 0 0 0 1.5px var(--p-acc), 0 0 0 7px rgba(var(--p-acc-rgb), 0); } }
.rec-what { font-size: 14px; line-height: 1.4; color: var(--p-t2); transition: color .5s var(--ease); }
.rec-row.done .rec-what, .rec-row.wait .rec-what { color: var(--p-t1); }
.rec-note { display: block; font-size: 12.5px; line-height: 1.4; color: var(--p-t4); margin-top: 1px; transition: color .5s var(--ease); }
.rec-row.done .rec-note, .rec-row.wait .rec-note { color: var(--p-t3); }
.rec-when { font: 500 12px/1 var(--mono); color: var(--p-t4); text-align: right; white-space: nowrap; transition: color .5s var(--ease); }
.rec-row.done .rec-when { color: var(--p-t3); }
.rec-row.on { background: rgba(var(--p-acc-rgb), .055); box-shadow: inset 2px 0 0 var(--p-acc); }
.rec-line { position: relative; display: flex; align-items: center; gap: 12px; height: 30px; padding: 0 24px; font: 500 10.5px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--p-acc); border-bottom: 1px solid var(--pline-2); background: rgba(var(--p-acc-rgb), .03); }
.rec-line::after { content: ""; flex: 1; height: 1px; background-image: linear-gradient(90deg, rgba(var(--p-acc-rgb), .55) 50%, transparent 0); background-size: 6px 1px; }
.rec-clocks { padding: 18px 24px 0; }
.rec-clocks .mono { color: var(--p-t4); display: block; margin-bottom: 8px; }
.rc { display: flex; justify-content: space-between; gap: 12px; height: 30px; align-items: center; font-size: 13px; color: var(--p-t3); border-bottom: 1px solid var(--pline-2); }
.rc span:last-child { font: 500 12px/1 var(--mono); color: var(--p-t4); }
.chip { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 6px; font: 500 11px/1 var(--mono); letter-spacing: .02em; white-space: nowrap; flex: none; }
.chip-acc { color: var(--p-acc); background: rgba(var(--p-acc-rgb), .1); box-shadow: inset 0 0 0 1px rgba(var(--p-acc-rgb), .28); }
.chip-ok { color: var(--p-t1); background: rgba(245, 243, 237, .07); box-shadow: inset 0 0 0 1px rgba(245, 243, 237, .14); }

.c-json { position: relative; min-width: 0; display: flex; flex-direction: column; }
.code { position: relative; flex: 1; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; padding: 18px 0; font: 400 13px/26px var(--mono); letter-spacing: 0; color: var(--p-t2);
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(180deg, #000 calc(100% - 48px), transparent); }
.code-in { transition: opacity .2s var(--ease), transform .45s var(--ease-fig); }
.code-in.swap { opacity: 0; transform: translateY(6px); }
.ln { display: grid; grid-template-columns: 52px 1fr; width: max-content; min-width: 100%; padding-right: 24px; white-space: pre; transition: background-color .45s var(--ease), box-shadow .45s var(--ease); }
.ln::before { content: attr(data-n); text-align: right; padding-right: 20px; color: var(--p-t5); user-select: none; }
.ln.hl { background: rgba(var(--p-acc-rgb), .075); box-shadow: inset 2px 0 0 var(--p-acc); }
.tk-k { color: var(--p-t2); } .tk-s { color: var(--p-str); } .tk-n { color: var(--p-acc); } .tk-p { color: var(--p-t4); } .tk-c { color: var(--p-acc); font-weight: 600; }
.code-fade { display: none; }

@media (max-width: 1100px) { .stage { margin-inline: -12px; } }
@media (max-width: 900px) {
  .stage { margin-inline: 0; margin-bottom: -24px; }
  .c-body { grid-template-columns: 1fr; height: auto; }
  .c-record { border-right: 0; border-bottom: 1px solid var(--pline); }
  .c-json .code { height: auto; flex: none; -webkit-mask-image: none; mask-image: none; padding-bottom: 40px; }
  .c-json .code-in { min-height: calc(20 * 22px); }
  .code { font-size: 12px; line-height: 22px; }
  .c-meta .c-ms { display: none; }
}
@media (max-width: 640px) {
  .frame { padding: 6px; border-radius: 18px; }
  .plate { border-radius: 12px; }
  .stage { margin-inline: -8px; }
  .hero-cta { flex-direction: column; align-items: stretch; }
  .hero-cta .btn { width: 100%; height: 48px; }
  .c-bar { padding-right: 10px; }
  .c-tab { padding: 0 12px; font-size: 12px; }
  .c-tabs { -webkit-mask-image: linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 22px), transparent); mask-image: linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 22px), transparent); }
  .c-tab .rule { left: 12px; right: 12px; }
  .rec-head, .rec-row, .rec-line, .c-pane-h { padding-inline: 16px; }
  .ln { grid-template-columns: 36px 1fr; padding-right: 16px; }
  .ln::before { padding-right: 12px; }
  .code { overflow-x: auto; font-size: 12px; }
  .ln { width: max-content; min-width: 100%; }
}

/* ---------- statement ---------- */
.statement { padding-top: calc(var(--sec) + 24px); }
.statement p { max-width: 22em; font-size: clamp(26px, 3.25vw, 44px); line-height: 1.22; font-weight: 510; letter-spacing: -.024em; color: var(--t4); text-wrap: pretty; }
.statement b { font-weight: inherit; color: var(--ink); }

/* ---------- the line ---------- */
.lp { position: relative; border-radius: 14px; border: 1px solid var(--line-2); background: linear-gradient(180deg, rgba(255,255,255,.42), rgba(255,255,255,.12)); box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 1px 2px rgba(var(--ink-rgb), .05), 0 20px 40px -24px rgba(var(--ink-rgb), .18); overflow: hidden; }
.lp-head { display: grid; grid-template-columns: 196px minmax(0, 1fr) var(--rw, 372px); height: 44px; align-items: center; border-bottom: 1px solid var(--line); }
.lp-head span { padding-inline: 24px; }
.lp-head span:first-child { padding-inline: 28px; }
.lp-head span:last-child { color: var(--acc); }
.lane { display: grid; grid-template-columns: 196px minmax(0, 1fr) var(--rw, 372px); min-height: 150px; }
.lane + .lane { border-top: 1px solid var(--line); }
.lane-who { padding: 28px; border-right: 1px solid var(--line); }
.lane-who h3 { font-size: 15px; }
.lane-who p { font-size: 13.5px; color: var(--t4); margin-top: 2px; }
.lane-open, .lane-res { position: relative; display: flex; flex-wrap: wrap; align-content: center; gap: 10px; padding: 28px 24px; }
.lane-open { column-gap: 10px; }
.wire { position: absolute; left: 24px; right: 0; top: 50%; height: 1px; margin-top: -.5px; background: var(--line-2); pointer-events: none; }
.wire b { position: absolute; inset: 0; background: var(--acc); transform: scaleX(var(--w, 0)); transform-origin: left; transition: transform .5s var(--ease-fig); }
.lane-open .verb { position: relative; z-index: 1; }
.lane-res { border-left: 1px dashed rgba(var(--acc-rgb), .5); background: rgba(var(--acc-rgb), .035); }
.verb { display: inline-flex; align-items: center; height: 32px; padding: 0 11px; border-radius: 8px; flex: none; white-space: nowrap;
  font: 500 12.5px/1 var(--mono); color: var(--t3); background: rgba(255,255,255,.5); box-shadow: inset 0 0 0 1px var(--line-2);
  transition: color .45s var(--ease), background-color .45s var(--ease), box-shadow .45s var(--ease), transform .45s var(--ease-fig); }
.verb.lit { color: var(--ink); background: #fff; box-shadow: inset 0 0 0 1px rgba(var(--acc-rgb), .55), 0 4px 12px -6px rgba(var(--acc-rgb), .5); }
.verb-r { color: var(--ink); font-weight: 600; background: rgba(255,255,255,.6); box-shadow: inset 0 0 0 1px var(--line-3); }
.verb-r.lit { color: var(--paper); background: var(--acc-deep); box-shadow: inset 0 0 0 1px var(--acc-deep), 0 6px 16px -8px rgba(var(--acc-rgb), .8); }
.lane-to { display: flex; align-items: center; gap: 10px; width: 100%; margin-top: 6px; font-size: 13px; color: var(--t4); transition: color .45s var(--ease); }
.lane-to b { font-weight: 590; color: var(--t2); transition: color .45s var(--ease); }
.lane-to > span:first-child { white-space: nowrap; }
.lane-to .state { margin-left: auto; }
.lane.routed .lane-to b { color: var(--ink); }
.state { display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: 6px; font: 500 11px/1 var(--mono); white-space: nowrap; flex: none;
  color: var(--acc-deep); background: rgba(var(--acc-rgb), .09); box-shadow: inset 0 0 0 1px rgba(var(--acc-rgb), .3); transition: opacity .45s var(--ease), transform .45s var(--ease-fig); }
.js .lane .state { opacity: 0; transform: translateY(4px); }
.js .lane.routed .state { opacity: 1; transform: none; }
.lp-foot { display: grid; grid-template-columns: 196px minmax(0, 1fr) var(--rw, 372px); border-top: 1px solid var(--line); min-height: 52px; align-items: center; font-size: 13px; color: var(--t4); }
.lp-foot span { padding-inline: 24px; }
.lp-foot span:first-child { grid-column: 2 / -1; }
@media (max-width: 1240px) { .wire { display: none; } }
@media (max-width: 1100px) { .lp { --rw: 320px; } .lp-head, .lane, .lp-foot { grid-template-columns: 160px minmax(0, 1fr) var(--rw); } }
@media (max-width: 900px) {
  .lp-head { display: none; }
  .lane, .lp-foot { grid-template-columns: 1fr; }
  .lane-who { border-right: 0; padding: 24px 24px 0; }
  .lane-open { padding: 16px 24px 20px; }
  .lane-open::before { content: "Your agent"; width: 100%; font: 500 11px/1 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--t4); margin-bottom: 2px; }
  .lane-res { border-left: 0; border-top: 1px dashed rgba(var(--acc-rgb), .5); padding: 20px 24px 24px; }
  .lane-res::before { content: "Reserved by the state"; width: 100%; font: 500 11px/1 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--acc); margin-bottom: 2px; }
  .lp-foot span { grid-column: 1 !important; padding: 14px 24px; }
}
@media (max-width: 640px) {
  .lane-who, .lane-open, .lane-res { padding-inline: 16px; }
  .lp-foot span { padding-inline: 16px; }
  .lane-to { flex-wrap: wrap; }
  .lane-to .state { margin-left: 0; }
}

/* ---------- figures (benefit columns) ---------- */
.figs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fig { position: relative; height: 468px; padding: 0 32px; }
.fig + .fig { border-left: 1px solid var(--line-2); }
.fig:first-child { padding-left: 0; } .fig:last-child { padding-right: 0; }
.fig svg { position: absolute; left: 0; right: 0; top: 8px; bottom: 132px; width: 100%; height: calc(100% - 140px); overflow: visible; }
.fig-cap { position: absolute; left: 32px; right: 32px; bottom: 0; }
.fig:first-child .fig-cap { left: 0; } .fig:last-child .fig-cap { right: 0; }
.fig-cap p { margin-top: 4px; font-size: 15px; line-height: 1.55; color: var(--t3); max-width: 300px; text-wrap: balance; }
@media (max-width: 900px) {
  .figs { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 84%; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(var(--gut) * -1); padding-inline: var(--gut); scroll-padding-inline: var(--gut); scrollbar-width: none; }
  .figs::-webkit-scrollbar { display: none; }
  .fig, .fig:first-child, .fig:last-child { scroll-snap-align: start; height: 440px; padding: 0 24px; border: 1px solid var(--line-2); border-radius: 14px; background: rgba(255,255,255,.28); }
  .fig + .fig { border-left: 1px solid var(--line-2); }
  .fig-cap, .fig:first-child .fig-cap, .fig:last-child .fig-cap { left: 24px; right: 24px; bottom: 28px; }
  .fig-cap p { min-height: calc(3 * 1.55em); }
}

/* iso figures, drawn for paper: faces take the ground so they occlude, ink hairlines, a bevel */
/* lit from above: top faces lighter than the page, sides a shade darker, so every slab has volume */
.iso .face { fill: #fbf8f1; }
.iso .face.shade { fill: #e4dac3; }
.iso .face.manila { fill: #f0e4c4; }
.iso .face.shade.manila { fill: #d8c493; }
.iso .scan { fill: rgba(38, 108, 137, .10); stroke: #266c89; stroke-width: .8; stroke-linejoin: round; }
.iso .seal { fill: #266c89; }
.iso .check { fill: none; stroke: #fbf8f1; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.iso .glyph-ring { fill: none; stroke: #b8ae96; stroke-width: 1; }
.iso .amt { stroke-width: 2.2; }
.iso .shade { filter: drop-shadow(0 6px 8px rgba(var(--ink-rgb), .10)); }
.iso .edge { fill: none; stroke: #3c474e; stroke-width: .7; stroke-linejoin: round; }
.iso .bevel { fill: none; stroke: #c9bfa6; stroke-width: .7; }
.iso .guide { fill: none; stroke: #b3aa94; stroke-width: .9; stroke-dasharray: 1 3.2; stroke-linecap: round; }
.iso .glyph { fill: none; stroke: #b8ae96; stroke-width: 1; stroke-linecap: round; }
.iso .pkt { fill: var(--acc); }
.iso .lab { font: 500 9px var(--mono); letter-spacing: .01em; fill: #60696f; }
.iso .etch { font: 600 9px var(--mono); letter-spacing: .02em; }

/* ---------- clocks ---------- */
.ck { position: relative; border-radius: 14px; border: 1px solid var(--line-2); background: linear-gradient(180deg, rgba(255,255,255,.42), rgba(255,255,255,.12)); box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 1px 2px rgba(var(--ink-rgb), .05), 0 20px 40px -24px rgba(var(--ink-rgb), .18); padding: 28px 28px 20px; }
.ck-top { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.ck-top h3 { font-size: 15px; }
.ck-top p { font-size: 13.5px; color: var(--t4); }
.ck-grid { position: relative; display: grid; grid-template-columns: 236px minmax(0, 1fr); }
.ck-lab { display: flex; flex-direction: column; justify-content: center; height: 76px; border-bottom: 1px solid var(--line); }
.ck-lab b { font-size: 14px; font-weight: 590; }
.ck-lab span { font-size: 12.5px; color: var(--t4); }
.ck-days { position: relative; grid-column: 2; grid-row: 1 / span 4; display: grid; grid-template-columns: repeat(var(--days), minmax(0, 1fr)); }
.ck-day { position: relative; border-left: 1px solid rgba(var(--ink-rgb), .045); }
.ck-day.we { background: repeating-linear-gradient(135deg, rgba(var(--ink-rgb), .045) 0 1px, transparent 1px 6px); }
.ck-lanes { grid-column: 2; grid-row: 1 / span 3; position: relative; display: grid; grid-template-rows: repeat(3, 76px); }
.ck-lane { position: relative; border-bottom: 1px solid var(--line); }
.ck-win { position: absolute; top: 38px; height: 14px; border-radius: 4px; background: rgba(var(--ink-rgb), .05); box-shadow: inset 0 0 0 1px var(--line-2); transform-origin: left; }
.ck-used { position: absolute; top: 38px; height: 14px; border-radius: 4px 0 0 4px; background: var(--acc); transform-origin: left; }
.ck-close { position: absolute; top: 32px; width: 2px; height: 26px; margin-left: -1px; background: var(--ink); border-radius: 2px; }
.ck-close i { position: absolute; left: -1px; top: -21px; white-space: nowrap; font: 500 11px/1 var(--mono); font-style: normal; color: var(--ink); }
.ck-close i::after { content: " \00b7  " attr(data-sub); color: var(--t4); }
.ck-dl { position: absolute; top: 32px; width: 0; height: 26px; border-left: 1px dashed var(--line-3); }
.ck-axis { grid-column: 2; position: relative; height: 34px; }
.ck-tick { position: absolute; top: 12px; font: 500 11px/1 var(--mono); color: var(--t4); transform: translateX(-50%); white-space: nowrap; }
.ck-tick.first { left: 0 !important; transform: none; }
@media (max-width: 640px) { .ck-tick.minor { display: none; } }
.ck-cursor { position: absolute; top: 0; bottom: 34px; width: 1px; margin-left: -.5px; background: rgba(var(--acc-rgb), .7); pointer-events: none; z-index: 3; opacity: 0; }
.ck-cursor i { position: absolute; top: -10px; left: 0; transform: translateX(-50%); padding: 3px 6px; border-radius: 5px; background: var(--acc-deep); color: var(--paper); font: 500 10.5px/1 var(--mono); font-style: normal; white-space: nowrap; }
.ck-legend { display: flex; flex-wrap: wrap; gap: 8px 24px; padding-top: 14px; font-size: 12.5px; color: var(--t4); }
.ck-legend span { display: inline-flex; align-items: center; gap: 8px; }
.ck-legend span::before { content: ""; width: 14px; height: 8px; border-radius: 2px; }
.ck-legend .k-used::before { background: var(--acc); }
.ck-legend .k-win::before { background: rgba(var(--ink-rgb), .05); box-shadow: inset 0 0 0 1px var(--line-2); }
.ck-legend .k-we::before { background: repeating-linear-gradient(135deg, rgba(var(--ink-rgb), .16) 0 1px, transparent 1px 4px); box-shadow: inset 0 0 0 1px var(--line); }
.ck-res { display: none; }
@media (max-width: 900px) {
  .ck { padding: 20px 16px 16px; }
  .ck-top { flex-direction: column; gap: 2px; }
  .ck-grid { grid-template-columns: 1fr; }
  .ck-lab { position: relative; z-index: 1; height: 84px; justify-content: flex-start; padding-top: 12px; border: 0; grid-column: 1; pointer-events: none; }
  .ck-lab:nth-of-type(1) { grid-row: 1; } .ck-lab:nth-of-type(2) { grid-row: 2; } .ck-lab:nth-of-type(3) { grid-row: 3; }
  .ck-res { display: block; position: absolute; right: 0; top: 14px; font: 500 11px/1.4 var(--mono); color: var(--ink); white-space: nowrap; }
  .ck-days, .ck-lanes, .ck-axis { grid-column: 1; }
  .ck-lanes { grid-template-rows: repeat(3, 84px); }
  .ck-win, .ck-used { top: 60px; height: 10px; }
  .ck-close { top: 55px; height: 20px; }
  .ck-close i { display: none; }
  .ck-dl { top: 55px; height: 20px; }
  .ck-lab b { font-size: 13.5px; }
  .ck-lab span:not(.ck-res) { font-size: 12px; }
  .rec-clocks { display: none; }
}

/* ---------- everywhere (bento) ---------- */
.bento { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.bx { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 440px; border-radius: 18px; overflow: hidden; border: 1px solid transparent;
  background: linear-gradient(180deg, #fbf8f0, #f3ecdc) padding-box, linear-gradient(180deg, rgba(var(--ink-rgb), .16), rgba(var(--ink-rgb), .08) 40%, rgba(var(--ink-rgb), .05)) border-box;
  box-shadow: 0 1px 2px rgba(var(--ink-rgb), .05), 0 24px 40px -28px rgba(var(--ink-rgb), .25); }
.bx-wide { grid-column: 1 / -1; flex-direction: row; min-height: 448px; }
.bx-cap { padding: 30px 32px 0; }
.bx-cap p { font-size: 15px; color: var(--t3); margin-top: 3px; }
.bx-wide .bx-cap { flex: none; width: 320px; padding: 36px 36px 36px; display: flex; flex-direction: column; }
.bx-steps { list-style: none; margin: auto 0 0; padding: 0; border-top: 1px solid var(--line-2); }
.bx-steps li { position: relative; display: flex; align-items: center; gap: 12px; height: 44px; font-size: 14px; color: var(--t4); border-bottom: 1px solid var(--line); transition: color .45s var(--ease); }
.bx-steps li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--line-3); transition: background-color .45s var(--ease), box-shadow .45s var(--ease); }
.bx-steps li.on { color: var(--ink); }
.bx-steps li.on::before { background: var(--acc); box-shadow: inset 0 0 0 1.5px var(--acc); }
.bx-art { position: relative; flex: 1; min-width: 0; display: flex; padding: 26px 32px 0; }
.bx-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; padding: 36px 36px 0 0; }

/* shared mock pieces: a paper UI rising from the card's bottom edge */
.bx-ui, .co { position: relative; flex: 1; min-width: 0; align-self: stretch; border-radius: 12px 12px 0 0; background: #fffdf8; border: 1px solid var(--line-2); border-bottom: 0; overflow: hidden;
  box-shadow: 0 1px 0 rgba(255,255,255,.8) inset, 0 10px 30px -18px rgba(var(--ink-rgb), .3); }
.bx-ui { padding-bottom: 76px; }
.ui-top { display: flex; align-items: center; justify-content: space-between; height: 44px; padding: 0 16px; border-bottom: 1px solid var(--line); font-size: 13px; font-weight: 590; }
.ui-top span:last-child { font: 500 11px/1 var(--mono); color: var(--t4); }
.ui-body { padding: 14px 16px; display: grid; gap: 8px; }
.ui-row { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px; border-radius: 9px; background: rgba(var(--ink-rgb), .025); box-shadow: inset 0 0 0 1px var(--line); font-size: 13px; color: var(--t2); transition: background-color .45s var(--ease), box-shadow .45s var(--ease); }
.ui-row small { display: block; font-size: 11.5px; color: var(--t4); line-height: 1.3; }
.ui-row .grow { flex: 1; min-width: 0; }
.ui-row.pick { background: #fff; box-shadow: inset 0 0 0 1px rgba(var(--acc-rgb), .45); }
.ui-tick { width: 16px; height: 16px; flex: none; border-radius: 5px; box-shadow: inset 0 0 0 1.5px var(--line-3); position: relative; transition: background-color .3s var(--ease), box-shadow .3s var(--ease); }
.ui-tick::after { content: ""; position: absolute; left: 5.5px; top: 2.5px; width: 4px; height: 8px; border: solid var(--paper); border-width: 0 1.6px 1.6px 0; transform: rotate(45deg) scale(.4); opacity: 0; transition: opacity .25s var(--ease), transform .35s var(--ease-fig); }
.ui-tick.on { background: var(--ink); box-shadow: none; }
.ui-tick.on::after { opacity: 1; transform: rotate(45deg); }
.ui-tick.wait { box-shadow: inset 0 0 0 1.5px var(--acc), 0 0 0 3px rgba(var(--acc-rgb), .14); }
.ui-amt { font: 500 12px/1 var(--mono); color: var(--t2); white-space: nowrap; }
.ui-photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.ui-photo { aspect-ratio: 16 / 10; border-radius: 7px; transition: opacity .5s var(--ease), transform .6s var(--ease-fig);
  background: linear-gradient(160deg, rgba(255,255,255,.35), transparent 40%), linear-gradient(180deg, #9fb3bd 0 38%, #6c7a6f 38% 40%, #8d8a7c 40% 100%); box-shadow: inset 0 0 0 1px rgba(var(--ink-rgb), .12); }
.ui-photo:nth-child(2) { background: linear-gradient(160deg, rgba(255,255,255,.3), transparent 40%), repeating-linear-gradient(170deg, #7d6f63 0 6px, #6f6258 6px 7px); }
.ui-photo:nth-child(3) { background: linear-gradient(160deg, rgba(255,255,255,.3), transparent 40%), linear-gradient(180deg, #b7c2c5 0 55%, #7f8a80 55% 100%); }
.ui-photo.out { opacity: 0; transform: translateY(6px) scale(.98); }
.ui-call { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-wrap: wrap; align-items: center; row-gap: 8px; column-gap: 12px; min-height: 52px; padding: 10px 16px; border-top: 1px solid var(--line); background: var(--plate); color: var(--p-t3); font: 500 11.5px/1 var(--mono); white-space: nowrap; }
.ui-call b { color: var(--p-t1); font-weight: 600; }
.ui-path { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.ui-call .sw { margin-left: auto; }
.chip-ok { color: var(--p-t1); background: rgba(245, 243, 237, .08); box-shadow: inset 0 0 0 1px rgba(245, 243, 237, .16); }

/* swap: every state shares one grid cell, so the slot keeps the widest state's size and never reflows */
.sw { display: inline-grid; justify-items: end; align-items: center; flex: none; }
.sw > i { grid-area: 1 / 1; font-style: normal; opacity: 0; transform: translateY(-3px); transition: opacity .22s var(--ease), transform .3s var(--ease); white-space: nowrap; }
.sw > i.on { opacity: 1; transform: none; transition: opacity .32s var(--ease) .2s, transform .5s var(--ease-fig) .2s; }
.grow.sw, small.sw { display: grid; justify-items: start; }
.grow.sw > i, small.sw > i { white-space: normal; }

/* checkout */
.co-body { padding: 12px 16px 0; display: grid; gap: 8px; }
.co-sec { margin: 2px 0 2px; }
.co-total { display: flex; justify-content: space-between; align-items: center; height: 40px; margin-top: 2px; padding: 0 2px; border-top: 1px solid var(--line); font-size: 13px; color: var(--t3); }
.co-total .sw { font: 600 14px/1 var(--mono); color: var(--ink); }
.co-act .sw { display: grid; justify-items: stretch; width: 100%; }
.co-bind { display: flex; align-items: center; justify-content: center; height: 40px; border-radius: 999px; background: var(--ink); color: var(--paper); font-size: 13.5px; font-weight: 510; }
.co-busy { background: #2c3942; }
.co-done { display: flex; align-items: center; justify-content: center; gap: 8px; height: 40px; border-radius: 999px; color: var(--acc-deep); font: 500 12.5px/1 var(--mono); background: rgba(var(--acc-rgb), .09); box-shadow: inset 0 0 0 1px rgba(var(--acc-rgb), .3); }
.co-done::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--acc); }

/* the call log beside it */
.bx-log { position: relative; min-width: 0; border-radius: 12px 12px 0 0; background: var(--plate); border: 1px solid #0c1216; border-bottom: 0; overflow: hidden; color: var(--p-t2);
  box-shadow: 0 10px 30px -14px rgba(var(--ink-rgb), .45); }
.bx-log::before { content: ""; position: absolute; left: 14%; right: 14%; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.2), transparent); }
.bx-log-h { display: flex; justify-content: space-between; align-items: center; height: 44px; padding: 0 16px; border-bottom: 1px solid var(--pline); font: 500 11px/1 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--p-t4); }
.bx-log-h span:last-child { text-transform: none; letter-spacing: 0; }
.bx-lr { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; row-gap: 8px; column-gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--pline-2);
  font: 500 12px/1.2 var(--mono); opacity: .26; transition: opacity .45s var(--ease), background-color 1.6s var(--ease); }
.bx-lr.in { opacity: 1; }
.bx-lr.fresh { background: rgba(var(--p-acc-rgb), .08); transition: opacity .45s var(--ease), background-color 0s; }
.bx-lr-a { min-width: 0; overflow-wrap: anywhere; color: var(--p-t2); }
.bx-lr-a b { color: var(--p-t1); font-weight: 600; margin-right: 6px; }
.bx-st { justify-self: end; height: 20px; padding: 0 7px; display: inline-flex; align-items: center; border-radius: 5px; color: var(--p-t2); box-shadow: inset 0 0 0 1px var(--pline); font-size: 11px; }
.bx-st.ok { color: var(--p-acc); box-shadow: inset 0 0 0 1px rgba(var(--p-acc-rgb), .3); }
.bx-lr-b { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; color: var(--p-t4); font-size: 11.5px; }
.no-js .bx-lr { opacity: 1; transform: none; }

@media (max-width: 1100px) {
  .bx-wide { flex-direction: column; }
  .bx-wide .bx-cap { width: auto; padding: 30px 32px 0; }
  .bx-steps { display: none; }
  .bx-pair { padding: 26px 32px 0; }
}
@media (max-width: 900px) {
  .bento { grid-template-columns: 1fr; gap: 16px; }
  .bx { min-height: 420px; }
}
@media (max-width: 640px) {
  .bx-cap, .bx-wide .bx-cap { padding: 24px 20px 0; }
  .bx-art, .bx-pair { padding: 20px 20px 0; }
  .bx-pair { grid-template-columns: 1fr; gap: 12px; }
  .bx-pair .co { border-radius: 12px; border-bottom: 1px solid var(--line-2); padding-bottom: 14px; }
}

/* ---------- agents (the page's one dark band) ---------- */
.agents { background: var(--plate); color: var(--p-t1); isolation: isolate; overflow: hidden; }
.agents::before { content: ""; position: absolute; inset: 0; z-index: -1; background: url(/img/noise.png) repeat; background-size: 180px; opacity: .05; mix-blend-mode: overlay; pointer-events: none; }
.agents::after { content: ""; position: absolute; left: 50%; bottom: -260px; width: min(1100px, 100%); height: 520px; transform: translateX(-50%); z-index: -1; pointer-events: none;
  background: radial-gradient(50% 50% at 50% 50%, rgba(var(--p-acc-rgb), .10), transparent 70%); }
.agents .sh h2 { color: var(--p-t1); }
.agents .sh p { color: var(--p-t3); }
.ag-win { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 8fr); border-radius: 14px; overflow: hidden; border: 1px solid var(--pline); background: var(--plate-2);
  box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 30px 60px -30px rgba(0,0,0,.6); position: relative; }
.ag-win::before { content: ""; position: absolute; left: 14%; right: 14%; top: 0; height: 1px; z-index: 2; background: linear-gradient(90deg, transparent, rgba(255,255,255,.2), transparent); }
.ag-cfg { border-right: 1px solid var(--pline); min-width: 0; background: var(--plate); }
.ag-h { display: flex; justify-content: space-between; align-items: center; height: 44px; padding: 0 24px; border-bottom: 1px solid var(--pline); font: 500 11px/1 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--p-t4); }
.ag-h span:last-child:not(:first-child) { text-transform: none; letter-spacing: 0; }
.ag-code { margin: 0; padding: 20px 24px 24px; overflow-x: auto; font: 400 13px/26px var(--mono); color: var(--p-t2); white-space: pre; }
.ag-cfg { display: flex; flex-direction: column; }
.ag-tools { margin-top: auto; padding: 20px 24px 24px; border-top: 1px solid var(--pline-2); }
.ag-tools .mono { color: var(--p-t4); }
.ag-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.ag-chip { display: inline-flex; align-items: center; height: 28px; padding: 0 10px; border-radius: 7px; font: 500 12px/1 var(--mono); color: var(--p-t2); box-shadow: inset 0 0 0 1px var(--pline); white-space: nowrap; flex: none;
  transition: color .4s var(--ease), background-color .4s var(--ease), box-shadow .4s var(--ease); }
.ag-chip.on { color: var(--p-t1); background: rgba(var(--p-acc-rgb), .1); box-shadow: inset 0 0 0 1px rgba(var(--p-acc-rgb), .5); }
.ag-log { min-width: 0; }
.ag-rows { list-style: none; margin: 0; padding: 10px 0 14px; }
.ag-row { display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: center; min-height: 46px; padding: 6px 24px; font: 500 12.5px/1.5 var(--mono); color: var(--p-t2);
  transition: opacity .45s var(--ease), background-color .5s var(--ease), box-shadow .5s var(--ease); }
/* rows arrive one at a time; the list holds its full height (site.js measures it) so the page never moves */
.js .ag-row:not(.in) { max-height: 0; min-height: 0; padding-block: 0; opacity: 0; overflow: hidden; }
.js .ag-row { max-height: 120px; transition: max-height .5s var(--ease-fig), min-height .5s var(--ease-fig), padding .5s var(--ease-fig), opacity .4s var(--ease) .1s, background-color .5s var(--ease), box-shadow .5s var(--ease); }
@media (prefers-reduced-motion: reduce) { .js .ag-row { transition: none; } }
.ag-row.on { background: rgba(var(--p-acc-rgb), .07); box-shadow: inset 2px 0 0 var(--p-acc); }
.ag-role { font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--p-t4); }
.ag-row[data-k="res"] .ag-role { color: var(--p-acc); }
.ag-row[data-k="event"] .ag-role { color: var(--p-acc); }
.ag-body { min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.ag-body b { font-weight: 600; color: var(--p-t1); }
.ag-args { color: var(--p-t3); }
.ag-sep { color: var(--p-t5); }
.ag-say { font: 400 14px/1.5 var(--sans); letter-spacing: -.01em; color: var(--p-t1); }
.ag-row[data-k="agent"] .ag-role { color: var(--p-str); }
@media (max-width: 900px) {
  .ag-win { grid-template-columns: 1fr; }
  .ag-cfg { border-right: 0; border-bottom: 1px solid var(--pline); }
}
@media (max-width: 640px) {
  .ag-h, .ag-code { padding-inline: 16px; }
  .ag-row { grid-template-columns: 52px minmax(0, 1fr); padding-inline: 16px; }
  .ag-code { font-size: 12px; }
}

/* ---------- pricing ---------- */
.pr { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: stretch; }
.ledger { border-radius: 14px; border: 1px solid var(--line-2); background: #fbf8f0; overflow: hidden; box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 1px 2px rgba(var(--ink-rgb), .05), 0 20px 40px -24px rgba(var(--ink-rgb), .18); }
.lg-h, .lg-r { display: grid; grid-template-columns: 96px minmax(0, 1.2fr) minmax(0, 1fr) 128px; align-items: center; padding: 0 24px; }
.lg-h { height: 44px; border-bottom: 1px solid var(--line-2); background: rgba(var(--ink-rgb), .02); }
.lg-h .mono:last-child, .lg-r > :last-child { text-align: right; justify-self: end; }
.lg-r { position: relative; height: 56px; border-bottom: 1px solid var(--line); font-size: 14px; color: var(--t2); transition: background-color .45s var(--ease), box-shadow .45s var(--ease); }
.lg-r:last-child { border-bottom: 0; }
.lg-r .act { font: 600 12.5px/1 var(--mono); color: var(--ink); }
.lg-r .file { font: 500 12.5px/1 var(--mono); color: var(--t3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lg-r .meter { display: inline-flex; align-items: center; gap: 8px; height: 26px; padding: 0 10px; border-radius: 999px; font-size: 12.5px; font-weight: 510; white-space: nowrap; }
.meter.billed { color: var(--acc-deep); background: rgba(var(--acc-rgb), .09); box-shadow: inset 0 0 0 1px rgba(var(--acc-rgb), .28); }
.meter.free { color: var(--t3); box-shadow: inset 0 0 0 1px var(--line-2); }
.lg-r.on { background: rgba(var(--acc-rgb), .05); box-shadow: inset 2px 0 0 var(--acc); }
.terms { display: grid; grid-template-rows: repeat(3, 1fr); border-radius: 14px; border: 1px solid var(--line-2); overflow: hidden; background: rgba(255,255,255,.22); }
.term { padding: 22px 24px; display: flex; flex-direction: column; justify-content: flex-start; }
.term + .term { border-top: 1px solid var(--line); }
.term p { font-size: 14px; color: var(--t3); margin-top: 2px; }
@media (max-width: 1000px) { .pr { grid-template-columns: 1fr; } .terms { grid-template-rows: none; grid-template-columns: repeat(3, 1fr); } .term + .term { border-top: 0; border-left: 1px solid var(--line); } }
@media (max-width: 720px) {
  .terms { grid-template-columns: 1fr; } .term + .term { border-left: 0; border-top: 1px solid var(--line); }
  .lg-h { display: none; }
  .lg-r { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; height: auto; padding: 14px 16px; row-gap: 6px; }
  .lg-r .act { grid-row: 1; grid-column: 1; }
  .lg-r .file { grid-row: 2; grid-column: 1; }
  .lg-r .out { grid-row: 2; grid-column: 2; justify-self: end; font-size: 13px; color: var(--t3); }
  .lg-r > :last-child { grid-row: 1; grid-column: 2; }
}

/* ---------- questions ---------- */
.fq { margin-left: calc(50% + 32px); border-top: 1px solid var(--line-2); }
.fq-link { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: var(--line-3); }
.fq-link:hover { color: var(--acc); text-decoration-color: currentColor; }
.fq details { border-bottom: 1px solid var(--line-2); interpolate-size: allow-keywords; }
.fq summary { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 68px; padding: 18px 4px; cursor: pointer; list-style: none;
  font-size: 17px; font-weight: 510; letter-spacing: -.014em; color: var(--ink); transition: color .2s var(--ease); }
.fq summary::-webkit-details-marker { display: none; }
.fq summary:hover { color: var(--acc-deep); }
.fq summary:focus-visible { outline: 2px solid var(--acc); outline-offset: -2px; border-radius: 8px; }
/* the chevron: two strokes, drawn in CSS; it turns to point up when the answer is open */
.fq-chev { position: relative; flex: none; width: 28px; height: 28px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line-2); transition: box-shadow .2s var(--ease), background-color .2s var(--ease); }
.fq-chev::before { content: ""; position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; margin: -5.5px 0 0 -3.5px; border-right: 1.5px solid var(--t3); border-bottom: 1.5px solid var(--t3);
  transform: rotate(45deg); transition: transform .35s var(--ease-fig), margin .35s var(--ease-fig), border-color .2s var(--ease); }
.fq summary:hover .fq-chev { box-shadow: inset 0 0 0 1px var(--line-3); background: rgba(var(--ink-rgb), .025); }
.fq details[open] .fq-chev::before { transform: rotate(225deg); margin-top: -1.5px; border-color: var(--acc); }
.fq details::details-content { height: 0; overflow: hidden; opacity: 0; transition: height .4s var(--ease-fig), opacity .3s var(--ease), content-visibility .4s allow-discrete; }
.fq details[open]::details-content { height: auto; opacity: 1; }
.fq-a { padding: 0 48px 24px 4px; font-size: 16px; line-height: 1.65; color: var(--t3); max-width: 64ch; text-wrap: pretty; }
@media (prefers-reduced-motion: reduce) { .fq details::details-content, .fq-chev::before { transition: none; } }
@media (max-width: 900px) { .fq { margin-left: 0; } }
@media (max-width: 640px) { .fq summary { font-size: 16px; min-height: 60px; gap: 16px; } .fq-a { padding-right: 8px; font-size: 15.5px; } }

/* ---------- closer ---------- */
.closer { position: relative; isolation: isolate; overflow: hidden; background: var(--plate); color: var(--p-t1); padding: 200px 0 210px; text-align: center; }
.closer h2 { font-size: clamp(36px, 4.6vw, 60px); color: var(--p-t1); }
.closer p { margin: 18px auto 0; max-width: 30em; font-size: 18px; color: var(--p-t3); }
.closer .btn { margin-top: 36px; height: 44px; padding: 0 22px; font-size: 15px; }
.cl-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.cl-bg .glow { position: absolute; inset: 0; background: radial-gradient(42% 62% at 50% 100%, rgba(var(--p-acc-rgb), .16), rgba(var(--p-acc-rgb), .05) 45%, transparent 75%); }
.cl-bg .dots { position: absolute; inset: 0; background-image: radial-gradient(rgba(245, 243, 237, .16) 1px, transparent 1.5px); background-size: 24px 24px;
  -webkit-mask-image: radial-gradient(62% 78% at 50% 100%, #000, rgba(0,0,0,.5) 38%, transparent 72%); mask-image: radial-gradient(62% 78% at 50% 100%, #000, rgba(0,0,0,.5) 38%, transparent 72%); }
.cl-bg .dots.lit { background-image: radial-gradient(rgba(var(--p-acc-rgb), .75) 1px, transparent 1.5px);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 40%, #000 60%, transparent), radial-gradient(62% 78% at 50% 100%, #000, rgba(0,0,0,.5) 38%, transparent 72%);
  mask-image: linear-gradient(180deg, transparent, #000 40%, #000 60%, transparent), radial-gradient(62% 78% at 50% 100%, #000, rgba(0,0,0,.5) 38%, transparent 72%);
  -webkit-mask-size: 100% 140px, 100% 100%; mask-size: 100% 140px, 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-composite: source-in; mask-composite: intersect; -webkit-mask-position: 0 120%, 0 0; mask-position: 0 120%, 0 0;
  animation: scan 7.5s var(--ease) infinite; }
@keyframes scan { from { -webkit-mask-position: 0 115%, 0 0; mask-position: 0 115%, 0 0; } to { -webkit-mask-position: 0 -15%, 0 0; mask-position: 0 -15%, 0 0; } }
@media (prefers-reduced-motion: reduce) { .cl-bg .dots.lit { animation: none; opacity: 0; } }
.closer::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, rgba(245,243,237,.06), rgba(var(--p-acc-rgb), .6) 50%, rgba(245,243,237,.06)); }
@media (max-width: 640px) { .closer { padding: 140px 0 150px; } .closer .btn { width: 100%; height: 48px; } }

/* ---------- footer ---------- */
.foot { position: relative; background: var(--plate); color: var(--p-t3); padding: 72px 0 40px; font-size: 14px; }
.foot::before { content: ""; position: absolute; left: 50%; top: 0; width: 760px; max-width: 100%; height: 200px; transform: translateX(-50%); background: radial-gradient(50% 100% at 50% 0, rgba(var(--p-acc-rgb), .10), transparent 70%); pointer-events: none; }
.foot .brand { color: var(--p-t1); }
.foot .brand span { color: var(--p-acc); }
.foot-top { position: relative; display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: 40px; }
.foot-brand p { margin-top: 14px; max-width: 26em; color: var(--p-t3); font-size: 14px; }
.foot-col { display: flex; flex-direction: column; gap: 10px; }
.foot-col h2 { font-size: 13px; font-weight: 510; letter-spacing: -.005em; color: var(--p-t1); margin-bottom: 6px; }
.foot-col a { color: var(--p-t3); transition: color .2s var(--ease); width: max-content; max-width: 100%; }
.foot-col a:hover { color: var(--p-t1); }
.foot-col a span { color: var(--p-t4); }
.foot-machine a { font: 500 12.5px/1.6 var(--mono); }
.foot-bot { position: relative; display: flex; justify-content: space-between; gap: 24px; margin-top: 64px; padding-top: 24px; border-top: 1px solid var(--pline); font-size: 13px; color: var(--p-t4); }
@media (max-width: 900px) { .foot-top { grid-template-columns: repeat(2, minmax(0, 1fr)); } .foot-brand { grid-column: 1 / -1; } }
@media (max-width: 640px) { .foot-bot { flex-direction: column; gap: 8px; } .foot-col a span { display: block; } .foot-machine { grid-column: 1 / -1; } .foot-machine a { white-space: nowrap; } }

/* ---------- access page ---------- */
.page { padding: calc(var(--hdr) + 96px) 0 160px; }
.acc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px); gap: 80px; align-items: start; }
.acc-copy h1 { font-size: clamp(40px, 4.8vw, 60px); }
.acc-copy > p { margin-top: 20px; font-size: 18px; color: var(--t3); max-width: 26em; }
.acc-steps { list-style: none; margin: 40px 0 0; padding: 0; border-top: 1px solid var(--line-2); max-width: 30em; }
.acc-steps li { display: grid; grid-template-columns: 40px 1fr; padding: 18px 0; border-bottom: 1px solid var(--line); }
.acc-steps li span { font: 500 12px/1.9 var(--mono); color: var(--acc); }
.acc-steps li b { display: block; font-weight: 590; font-size: 15px; }
.acc-steps li p { font-size: 14px; color: var(--t3); }
.form-card { position: relative; border-radius: 18px; border: 1px solid transparent; padding: 32px;
  background: linear-gradient(180deg, #fcfaf4, #f6f0e2) padding-box, linear-gradient(180deg, rgba(var(--ink-rgb), .18), rgba(var(--ink-rgb), .08) 40%, rgba(var(--ink-rgb), .06)) border-box;
  box-shadow: 0 1px 2px rgba(var(--ink-rgb), .05), 0 30px 60px -36px rgba(var(--ink-rgb), .35); }
.f-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 16px; }
.f-field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.f-field.full { grid-column: 1 / -1; }
.f-field label { font-size: 13px; font-weight: 510; color: var(--t2); }
.f-field label i { font-style: normal; color: var(--t4); font-weight: 400; }
.f-field input, .f-field select, .f-field textarea {
  width: 100%; font: 400 15px/1.4 var(--sans); letter-spacing: -.01em; color: var(--ink); background: #fffdf8;
  border: 1px solid var(--line-3); border-radius: 10px; padding: 11px 13px; outline: none; transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.f-field input, .f-field select { height: 44px; }
.f-field textarea { min-height: 104px; resize: vertical; }
.f-field select { appearance: none; -webkit-appearance: none; padding-right: 38px;
  background-image: linear-gradient(45deg, transparent 50%, var(--t3) 50%), linear-gradient(135deg, var(--t3) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
.f-field input:focus, .f-field select:focus, .f-field textarea:focus { border-color: var(--acc); box-shadow: 0 0 0 3px rgba(var(--acc-rgb), .16); }
.f-field [aria-invalid="true"] { border-color: var(--madder); }
.f-err { font-size: 12.5px; color: var(--madder); min-height: 0; }
.f-err:empty { display: none; }
.f-actions { display: flex; align-items: center; gap: 16px; margin-top: 26px; }
.f-actions .btn { height: 44px; padding: 0 22px; font-size: 15px; }
.f-status { font-size: 13.5px; color: var(--t3); }
.f-status.err { color: var(--madder); }
.f-done { text-align: left; }
.f-done h2 { font-size: 28px; }
.f-done p { margin-top: 10px; color: var(--t3); font-size: 16px; }
.f-done .btn { margin-top: 28px; }
@media (max-width: 1000px) { .acc { grid-template-columns: 1fr; gap: 48px; } }
@media (max-width: 1024px), (pointer: coarse) { .f-field input, .f-field select, .f-field textarea { font-size: 16px; } }
@media (max-width: 640px) {
  .page { padding: calc(var(--hdr) + 56px) 0 100px; }
  .form-card { padding: 22px 18px; }
  .f-grid { grid-template-columns: 1fr; }
  .f-field input, .f-field select, .f-field textarea { font-size: 16px; }
  .f-actions { flex-direction: column; align-items: stretch; }
  .f-actions .btn { width: 100%; height: 48px; }
}

/* ---------- 404 ---------- */
.nf { min-height: calc(100dvh - 300px); display: flex; align-items: center; }
.nf .mono { color: var(--acc); }
.nf h1 { margin-top: 18px; font-size: clamp(40px, 5vw, 64px); }
.nf p { margin-top: 18px; font-size: 18px; color: var(--t3); max-width: 28em; }
.nf .hero-cta { margin-top: 32px; }