/* Tavient AI. The brand is three colours from the supplied mark: navy, white,
   emerald. Emerald owns one role on this page: the output (the node, the
   result, the action). Everything else is navy and porcelain. */
:root {
  --sc-canvas:     #08131E;
  --sc-surface:    #0F2234;
  --sc-ink:        #EEF4F7;
  --sc-ink-soft:   #97ABBC;
  --sc-accent:     #12B892;
  --sc-accent-ink: #03140E;
  --sc-font-display: "Outfit", "Geist", system-ui, sans-serif;
  --sc-font-text:    "Geist", system-ui, sans-serif;
  --sc-font-mono:    "Geist Mono", ui-monospace, monospace;

  --navy: #0B1B2B;
  --slate: #3A5268;
  --rig-h: 4rem;
  --sc-shadow-color: 212 70% 3%;
}

body { letter-spacing: 0.002em; line-height: 1.66; }
[hidden] { display: none !important; }
/* Jump links land below the fixed top bar. */
main > section[id] { scroll-margin-top: calc(var(--rig-h) - 1px); }
h1, h2, h3 { font-weight: 500; }

.skip {
  position: fixed; left: var(--sc-4); top: var(--sc-4); z-index: 100;
  padding: var(--sc-2) var(--sc-4); border-radius: var(--sc-r-pill);
  background: var(--sc-accent); color: var(--sc-accent-ink); font-weight: 600;
  transform: translateY(-200%);
}
.skip:focus-visible { transform: none; }

/* ------------------------------------------------------------- buttons -- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sc-2);
  height: 3rem; padding: 0 1.45rem; border-radius: var(--sc-r-pill);
  font: 600 var(--sc-t-sm)/1 var(--sc-font-text); letter-spacing: 0.005em;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  border: 1px solid transparent; background: none; color: var(--sc-ink);
  transition: background-color var(--sc-d-fast) var(--sc-ease-out),
              border-color var(--sc-d-fast) var(--sc-ease-out),
              color var(--sc-d-fast) var(--sc-ease-out),
              transform 120ms var(--sc-ease-out);
}
.btn:active { transform: scale(0.97); }
.btn--primary { background: var(--sc-accent); color: var(--sc-accent-ink); box-shadow: var(--sc-e1); }
.btn--quiet { border-color: var(--sc-hairline-strong); }
.btn--small { height: 2.5rem; padding: 0 1.1rem; }
.btn--big { height: 3.4rem; padding: 0 1.8rem; font-size: var(--sc-t-base); }
@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover { background: color-mix(in oklab, var(--sc-accent) 86%, white); }
  .btn--quiet:hover { border-color: color-mix(in oklab, var(--sc-ink) 60%, transparent); }
}
.link { color: var(--sc-accent); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.3em; }

/* ----------------------------------------------------------------- rig --
   The top bar. Logo always top left, plain links, one action. */
.rig {
  position: fixed; inset: 0 0 auto 0; z-index: var(--sc-z-chrome);
  height: var(--rig-h);
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--sc-5);
  padding-inline: var(--sc-gutter);
  background: linear-gradient(to bottom, color-mix(in oklab, var(--sc-canvas) 70%, transparent), transparent);
  transition: background-color var(--sc-d-slow) var(--sc-ease-out), box-shadow var(--sc-d-slow) var(--sc-ease-out);
}
.rig.is-solid {
  background: color-mix(in oklab, var(--sc-canvas) 95%, transparent);
  box-shadow: inset 0 -1px 0 var(--sc-hairline);
}
.rig__brand { display: inline-flex; align-items: center; gap: 0.65rem; text-decoration: none; color: var(--sc-ink); }
.rig__mark { width: 2.1rem; height: 2.1rem; color: var(--sc-ink); overflow: visible; }
.rig__word { font: 600 1.12rem/1 var(--sc-font-display); letter-spacing: -0.01em; }
.rig__nav ul { display: flex; justify-content: center; gap: clamp(1rem, 2.6vw, 2.6rem); list-style: none; margin: 0; padding: 0; }
.rig__nav a {
  position: relative; display: inline-block; padding: 0.5rem 0;
  font: 500 var(--sc-t-sm)/1 var(--sc-font-text);
  color: var(--sc-ink-soft); text-decoration: none;
  transition: color var(--sc-d-fast) var(--sc-ease-out);
}
.rig__nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px;
  background: var(--sc-accent); transform: scaleX(0); transform-origin: 0 50%;
  transition: transform var(--sc-d-base) var(--sc-ease-out);
}
.rig__nav a[aria-current="true"] { color: var(--sc-ink); }
.rig__nav a[aria-current="true"]::after { transform: scaleX(1); }
@media (hover: hover) and (pointer: fine) { .rig__nav a:hover { color: var(--sc-ink); } }
.rig__end { display: flex; align-items: center; gap: var(--sc-3); }
.rig__menu { display: none; }

/* ---------------------------------------------------------------- hero -- */
.hero__stage { isolation: isolate; }
.hero__far {
  position: absolute; inset: -6%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(circle, color-mix(in oklab, var(--sc-ink) 9%, transparent) 1px, transparent 1.6px) 0 0 / 30px 30px;
  -webkit-mask-image: radial-gradient(70% 70% at 64% 52%, #000 20%, transparent 78%);
          mask-image: radial-gradient(70% 70% at 64% 52%, #000 20%, transparent 78%);
  transform: translate3d(var(--far-x, 0px), var(--far-y, 0px), 0);
}
.hero__haze {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(34vmax 30vmax at var(--hx, 68%) var(--hy, 60%), color-mix(in oklab, var(--sc-accent) 30%, transparent), transparent 70%),
    radial-gradient(60vmax 40vmax at 70% 30%, color-mix(in oklab, #1d4a6e 40%, transparent), transparent 70%);
  opacity: var(--haze, 0.35);
}
.hero__gl {
  position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%;
  opacity: 0; transition: opacity 600ms var(--sc-ease-out);
}
.gl-ready .hero__gl { opacity: 1; }
.hero__fallback {
  position: absolute; z-index: 2; color: var(--sc-ink);
  width: min(44vh, 30vw); height: min(44vh, 30vw);
  right: 15vw; top: 50%; translate: 0 -46%;
  opacity: 0; transition: opacity 400ms var(--sc-ease-out);
}
.no-gl .hero__fallback { opacity: 1; }
.no-gl .hero__gl { display: none; }

.hero__labels { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.hero__label {
  position: absolute; left: 0; top: 0; white-space: nowrap;
  font: 500 var(--sc-t-xs)/1 var(--sc-font-mono); letter-spacing: 0.04em;
  color: var(--sc-ink-soft); opacity: 0;
  transform: translate3d(-200px, -200px, 0);
}
.hero__label::before {
  content: ""; display: inline-block; vertical-align: middle; width: 1.6rem; height: 1px; margin-right: 0.6rem;
  background: color-mix(in oklab, var(--sc-ink) 40%, transparent);
}
.hero__label--l::before, .hero__label--r::before { display: none; }
.hero__label--o { color: var(--sc-accent); }

.hero__copy {
  position: absolute; z-index: 4;
  left: var(--sc-gutter); bottom: clamp(2.5rem, 9vh, 7rem);
  max-width: min(40rem, 44vw);
}
.hero__eyebrow {
  margin: 0 0 var(--sc-4);
  font: 500 var(--sc-t-xs)/1 var(--sc-font-mono); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--sc-accent);
}
.hero__title {
  margin: 0;
  font: 500 clamp(2.7rem, 1.3rem + 4.2vw, 5.6rem)/0.98 var(--sc-font-display);
  letter-spacing: -0.042em;
  text-wrap: balance;
}
.hero__title span { display: block; color: var(--sc-accent); }
.hero__sub {
  margin: var(--sc-5) 0 0; max-width: 36ch;
  font-size: var(--sc-t-lg); line-height: 1.5; letter-spacing: -0.008em;
  color: var(--sc-ink-soft); text-wrap: pretty;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--sc-3); margin-top: var(--sc-6); }
.hero__trust { display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem; list-style: none; margin: var(--sc-5) 0 0; padding: 0; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
.hero__trust li { display: inline-flex; align-items: center; gap: 0.5rem; }
.hero__trust li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--sc-accent); }

.hero__near { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.near {
  position: absolute; display: grid; place-items: center;
  border-radius: 26%;
  background: color-mix(in oklab, var(--sc-surface) 86%, transparent);
  box-shadow: var(--sc-e3), inset 0 1px 0 color-mix(in oklab, var(--sc-ink) 12%, transparent);
  transform: translate3d(var(--nx, 0px), var(--ny, 0px), 0) scale(var(--ns, 1)) rotate(var(--nr, 0deg));
  opacity: var(--no, 1);
  will-change: transform, opacity;
}
.near svg { width: 52%; height: 52%; fill: none; stroke: color-mix(in oklab, var(--sc-ink) 70%, transparent); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.near--a { width: clamp(7rem, 15vw, 15rem); aspect-ratio: 1; right: -3vw; bottom: -7vh; filter: blur(7px); --nr: -9deg; }
.near--b { width: clamp(4.5rem, 8vw, 8rem);  aspect-ratio: 1; right: 43vw; top: 64vh;    filter: blur(4px); --nr: 12deg; }
.near--c { width: clamp(5rem, 9vw, 9rem);   aspect-ratio: 1; right: 6vw;  top: -4vh;    filter: blur(5.5px); --nr: 7deg; }

/* ---------------------------------------------------------------- pile -- */
.pile { padding-block: clamp(4rem, 9vw, 9rem) clamp(4rem, 8vw, 8rem); }
.pile__head { max-width: 40rem; }
.pile__list { list-style: none; margin: clamp(3rem, 6vw, 5.5rem) 0 0; padding: 0; }
.chore {
  --strike: 0;
  display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 1.1rem;
  margin: 0 0 clamp(1rem, 2vw, 1.6rem);
  font: 500 clamp(1.9rem, 1.3rem + 2vw, 3rem)/1.14 var(--sc-font-display); letter-spacing: -0.03em;
}
.chore:nth-child(2) { padding-left: 9vw; }
.chore:nth-child(3) { padding-left: 3vw; }
.chore:nth-child(4) { padding-left: 14vw; }
.chore:nth-child(5) { padding-left: 5vw; }
.chore:nth-child(6) { padding-left: 19vw; }
.chore__text {
  color: color-mix(in oklab, var(--sc-ink) calc(100% - var(--strike) * 42%), var(--sc-ink-soft));
  /* A background strike, cloned per line fragment, so a wrapped chore is
     struck on every line it occupies. */
  background: linear-gradient(var(--sc-accent), var(--sc-accent)) no-repeat 0 60% / calc(var(--strike) * 100%) 3px;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.chore__tag {
  font: 500 var(--sc-t-xs)/1 var(--sc-font-mono); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--sc-accent);
  opacity: clamp(0, calc(var(--strike) * 3 - 2), 1);
}
.pile__coda {
  margin: clamp(3rem, 6vw, 5rem) 0 0 auto; max-width: 22ch; text-align: right;
  font: 500 var(--sc-t-xl)/1.25 var(--sc-font-display); letter-spacing: -0.02em;
}

/* ------------------------------------------------------------ services -- */
.svc { padding-block: clamp(5rem, 9vw, 9rem); }
.svc__head { max-width: 44rem; }
.svc__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2.5rem, 5vw, 4.5rem) clamp(2rem, 5vw, 5rem); margin-top: clamp(2.5rem, 5vw, 4rem); }
.sys { border-top: 1px solid var(--sc-hairline-strong); padding-top: var(--sc-5); }
.sys__fig { width: min(100%, 22rem); height: auto; aspect-ratio: 2 / 1; margin-bottom: var(--sc-5); overflow: visible; }
.sys__fig .sys__wire { fill: none; stroke: color-mix(in oklab, var(--sc-ink) 22%, transparent); stroke-width: 2; }
.sys__fig .sys__pulse { fill: none; stroke: var(--sc-accent); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 14 100; stroke-dashoffset: 0; }
.sys__fig .sys__arc { fill: none; stroke: var(--sc-accent); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 22 100; }
.sys__fig .sys__node { fill: var(--sc-canvas); stroke: var(--sc-ink); stroke-width: 3; }
.sys__fig .sys__node--lit { fill: var(--sc-accent); stroke: none; }
.sys__fig .sys__dot { fill: var(--sc-ink); }
.sys__fig text { font: 500 11px var(--sc-font-mono); fill: var(--sc-ink-soft); letter-spacing: 0.04em; }
.sys__fig .sys__bars rect { fill: var(--sc-ink); }
.sys__fig .sys__bars rect.is-lit { fill: var(--sc-accent); }
.sys__fig .sys__grid rect { fill: color-mix(in oklab, var(--sc-ink) 16%, transparent); }
.sys__fig .sys__grid rect.is-done { fill: var(--sc-accent); }
.sys__name { margin: 0 0 var(--sc-2); font: 500 var(--sc-t-xl)/1.1 var(--sc-font-display); letter-spacing: -0.02em; }
.sys__lede { margin: 0 0 var(--sc-4); font-size: var(--sc-t-lg); line-height: 1.45; max-width: 34ch; }
.sys__label { margin: 0; }
.sys__label div { display: grid; grid-template-columns: 9rem 1fr; gap: var(--sc-3); padding-block: 0.7rem; border-top: 1px solid var(--sc-hairline); }
.sys__label dt { font: 500 var(--sc-t-xs)/1.7 var(--sc-font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--sc-ink-soft); }
.sys__label dd { margin: 0; font-size: var(--sc-t-sm); line-height: 1.55; color: color-mix(in oklab, var(--sc-ink) 88%, var(--sc-ink-soft)); }
.svc__foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sc-5);
  margin-top: clamp(3rem, 6vw, 5rem); padding-top: var(--sc-6); border-top: 1px solid var(--sc-hairline);
}
.svc__foot p { margin: 0; max-width: 52ch; color: var(--sc-ink-soft); }
.svc__foot strong { color: var(--sc-ink); font-weight: 600; }

/* ----------------------------------------------------------------- run -- */
.run__canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.run__head { position: absolute; z-index: 2; left: var(--sc-gutter); top: calc(var(--rig-h) + 3.5vh); max-width: 31rem; }
.run__head .sc-body { margin-top: var(--sc-3); font-size: var(--sc-t-base); }
.run__tag {
  display: inline-block; margin: 0 0 var(--sc-3); padding: 0.3rem 0.7rem; border-radius: var(--sc-r-pill);
  border: 1px solid color-mix(in oklab, var(--sc-accent) 60%, transparent);
  font: 500 var(--sc-t-xs)/1 var(--sc-font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--sc-accent);
}
.run__bar { margin-top: var(--sc-4); height: 4px; border-radius: 4px; background: var(--sc-hairline); overflow: hidden; max-width: 22rem; }
.run__bar span { display: block; height: 100%; background: var(--sc-accent); transform: scaleX(var(--run, 0)); transform-origin: 0 50%; }
.run__meta {
  margin: var(--sc-3) 0 0; font: 500 var(--sc-t-xs)/1.4 var(--sc-font-mono); letter-spacing: 0.04em;
  color: var(--sc-ink-soft);
}
.run__count {
  position: absolute; z-index: 2; left: 0; top: 0; margin: 0; white-space: nowrap;
  font: 500 var(--sc-t-sm)/1 var(--sc-font-mono); color: var(--sc-ink-soft);
  transform: translate3d(var(--cx, -999px), var(--cy, 0px), 0) translateX(-50%);
}
.run__count span { color: var(--sc-ink); font-size: var(--sc-t-lg); margin-right: 0.3rem; }
.run__lanes { list-style: none; margin: 0; padding: 0; }
.lane {
  position: absolute; z-index: 2; left: 0; top: 0;
  display: grid; grid-template-columns: 1fr auto; column-gap: var(--sc-4); align-items: end;
  transform: translate3d(var(--lx, -999px), var(--ly, 0px), 0);
  width: var(--lw, 20rem);
}
.lane__name { font: 600 var(--sc-t-sm)/1.2 var(--sc-font-text); }
.lane__dest { grid-row: 2; font: 500 var(--sc-t-xs)/1.4 var(--sc-font-mono); color: var(--sc-ink-soft); }
.lane__n { grid-row: 1 / span 2; grid-column: 2; font: 500 var(--sc-t-xl)/1 var(--sc-font-display); letter-spacing: -0.02em; }
.lane[data-lane="0"] .lane__n, .lane[data-lane="1"] .lane__n { color: var(--sc-accent); }
.run__ticker {
  position: absolute; z-index: 2; left: var(--sc-gutter); bottom: 4.5vh;
  list-style: none; margin: 0; padding: 0; width: min(31rem, 40vw);
  font: 400 var(--sc-t-xs)/1.9 var(--sc-font-mono); color: var(--sc-ink-soft);
  opacity: calc(1 - clamp(0, (var(--sc-p, 0) - 0.76) * 12, 1));
}
.run__ticker li { display: grid; grid-template-columns: 3.4rem 1fr auto; gap: var(--sc-3); white-space: nowrap; overflow: hidden; }
.run__ticker li span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; }
.run__ticker li b { font-weight: 500; color: var(--sc-ink); }
.run__verdict { position: absolute; z-index: 2; left: var(--sc-gutter); top: 44vh; max-width: min(30rem, 36vw); }
.run__big { margin: 0; font: 500 var(--sc-t-2xl)/1.08 var(--sc-font-display); letter-spacing: -0.03em; text-wrap: balance; }
.run__big span { color: var(--sc-accent); }
.run__small { margin: var(--sc-4) 0 0; color: var(--sc-ink-soft); max-width: 34ch; }

/* ------------------------------------------------------------- handoff -- */
.handoff { padding-block: clamp(5rem, 10vw, 10rem); }
.handoff__wrap { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); column-gap: clamp(2rem, 6vw, 7rem); }
.handoff__title { grid-column: 1; align-self: start; max-width: 24rem; position: sticky; top: calc(var(--rig-h) + 12vh); }
.handoff__title .sc-body { margin-top: var(--sc-4); }
.handoff__track { grid-column: 2; position: relative; padding-left: 4.5rem; }
.handoff__wire { position: absolute; left: 0.5rem; top: 0.35rem; bottom: 0; width: 40px; height: calc(100% - 0.35rem); overflow: visible; }
.handoff__wire path { fill: none; stroke-width: 2; vector-effect: non-scaling-stroke; }
.handoff__wire-base { stroke: var(--sc-hairline-strong); }
.handoff__wire-lit { stroke: var(--sc-accent); stroke-width: 3; stroke-dasharray: 100 100; stroke-dashoffset: calc(100 - var(--wire, 0) * 100); }
.steps { list-style: none; margin: 0; padding: 0; }
.step { position: relative; padding-bottom: clamp(2.5rem, 5vw, 4.5rem); }
.step::before {
  content: ""; position: absolute; left: -3.65rem; top: 0.3rem; width: 20px; height: 20px; border-radius: 50%;
  background: var(--navy); border: 4px solid var(--sc-ink);
}
.step__n { display: block; margin-bottom: var(--sc-2); font: 500 var(--sc-t-xs)/1 var(--sc-font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--sc-accent); }
.step h3 { margin: 0 0 var(--sc-3); font: 500 var(--sc-t-xl)/1.1 var(--sc-font-display); letter-spacing: -0.02em; }
.step p { margin: 0; max-width: 46ch; color: var(--sc-ink-soft); }
.promises { grid-column: 2; list-style: none; margin: clamp(3rem, 6vw, 5rem) 0 0; padding: 0; }
.promises li {
  display: flex; align-items: baseline; gap: var(--sc-4);
  padding-block: var(--sc-4); border-top: 1px solid var(--sc-hairline);
  font: 500 var(--sc-t-lg)/1.35 var(--sc-font-display); letter-spacing: -0.01em;
}
.promises li::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--sc-accent); transform: translateY(-0.1em); }

/* ----------------------------------------------------------------- faq -- */
.faq { padding-block: clamp(5rem, 9vw, 9rem); }
.faq__wrap { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(2rem, 6vw, 7rem); }
.faq__head .sc-body { margin-top: var(--sc-4); }
.faq__list details { border-top: 1px solid var(--sc-hairline); }
.faq__list details:last-child { border-bottom: 1px solid var(--sc-hairline); }
.faq__list summary {
  display: flex; justify-content: space-between; align-items: center; gap: var(--sc-4);
  padding: 1.15rem 0; cursor: pointer; list-style: none;
  font: 500 var(--sc-t-lg)/1.35 var(--sc-font-display); letter-spacing: -0.01em;
}
.faq__list summary::-webkit-details-marker { display: none; }
.faq__list summary::after {
  content: ""; flex: none; width: 12px; height: 12px; margin-right: 4px;
  border-right: 2px solid var(--sc-accent); border-bottom: 2px solid var(--sc-accent);
  transform: translateY(-3px) rotate(45deg); transition: transform var(--sc-d-base) var(--sc-ease-out);
}
.faq__list details[open] summary::after { transform: translateY(3px) rotate(-135deg); }
.faq__list details p { margin: 0 0 1.25rem; max-width: 62ch; color: var(--sc-ink-soft); }

/* ---------------------------------------------------------------- blog -- */
.latest-sec { padding-block: 0 clamp(4rem, 8vw, 7rem); }
.latest-sec:has(.latest:empty) { display: none; }
.latest-sec__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--sc-4); }
.latest { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: var(--sc-5); list-style: none; margin: var(--sc-6) 0 0; padding: 0; }
.latest a {
  display: flex; flex-direction: column; gap: var(--sc-2); height: 100%; padding: var(--sc-5);
  border: 1px solid var(--sc-hairline-strong); border-radius: var(--sc-r-lg); color: inherit; text-decoration: none;
  transition: border-color var(--sc-d-fast) var(--sc-ease-out);
}
@media (hover: hover) and (pointer: fine) { .latest a:hover { border-color: color-mix(in oklab, var(--sc-accent) 60%, transparent); } }
.latest__date { font: 500 var(--sc-t-xs)/1.4 var(--sc-font-mono); color: var(--sc-ink-soft); }
.latest__title { font: 500 var(--sc-t-lg)/1.3 var(--sc-font-display); letter-spacing: -0.01em; }
.latest__desc { font-size: var(--sc-t-sm); line-height: 1.55; color: var(--sc-ink-soft); }

/* ---------------------------------------------------------------- pick -- */
.pick { padding-block: clamp(5rem, 9vw, 9rem) clamp(4rem, 7vw, 7rem); }
.pick__head { max-width: 40rem; }
.pick__opt { margin: 0 0 var(--sc-3); font: 500 var(--sc-t-xs)/1 var(--sc-font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--sc-accent); }
.pick__groups { columns: 3 17rem; column-gap: clamp(2rem, 4vw, 4rem); margin-top: clamp(2.5rem, 5vw, 4rem); }
.pick__group { break-inside: avoid; margin-bottom: var(--sc-6); }
.pick__group h3 {
  margin: 0 0 var(--sc-3); font: 500 var(--sc-t-xs)/1.4 var(--sc-font-mono); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--sc-ink-soft);
}
.tog {
  display: inline-flex; align-items: center; gap: 0.6rem;
  margin: 0 0.45rem 0.55rem 0; min-height: 2.75rem; padding: 0.55rem 1rem 0.55rem 0.85rem;
  border-radius: var(--sc-r-pill); border: 1px solid var(--sc-hairline-strong);
  background: transparent; color: var(--sc-ink);
  font-size: var(--sc-t-sm); line-height: 1.3; text-align: left; cursor: pointer;
  transition: background-color var(--sc-d-fast) var(--sc-ease-out), border-color var(--sc-d-fast) var(--sc-ease-out),
              color var(--sc-d-fast) var(--sc-ease-out), transform 120ms var(--sc-ease-out);
}
.tog::before {
  content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%;
  border: 2px solid currentColor; opacity: 0.7;
}
.tog:active { transform: scale(0.97); }
.tog[aria-pressed="true"] { background: var(--sc-accent); border-color: var(--sc-accent); color: var(--sc-accent-ink); font-weight: 600; }
.tog[aria-pressed="true"]::before { background: currentColor; opacity: 1; }
@media (hover: hover) and (pointer: fine) { .tog:hover { border-color: color-mix(in oklab, var(--sc-ink) 60%, transparent); } }
.pick__hours { margin-top: var(--sc-6); padding-top: var(--sc-6); border-top: 1px solid var(--sc-hairline); max-width: 40rem; }
.pick__hours label { display: block; margin-bottom: var(--sc-3); }
.pick__range { display: flex; align-items: center; gap: var(--sc-5); }
.pick__range input { flex: 1; min-width: 0; height: 2.75rem; cursor: pointer; }
.pick__range output { flex: none; min-width: 7.5ch; font: 500 var(--sc-t-xl)/1 var(--sc-font-display); letter-spacing: -0.02em; }

/* ---------------------------------------------------------------- book -- */
.out { padding-block: clamp(5rem, 9vw, 9rem); }
.out__wrap { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); align-items: center; gap: clamp(2rem, 5vw, 5rem); }
.out__brief { max-width: 32rem; }
.out__list { list-style: none; margin: var(--sc-5) 0 0; padding: 0; }
.out__list li { position: relative; padding: 0.55rem 0 0.55rem 1.9rem; font-size: var(--sc-t-lg); line-height: 1.45; }
.out__list li::before {
  content: ""; position: absolute; left: 0; top: 0.95rem; width: 12px; height: 7px;
  border-left: 2px solid var(--sc-accent); border-bottom: 2px solid var(--sc-accent); transform: rotate(-45deg);
}
.out__actions { display: flex; flex-wrap: wrap; gap: var(--sc-3); margin-top: var(--sc-6); }
.out__text { margin: var(--sc-5) 0 0; font-size: var(--sc-t-sm); line-height: 1.55; color: var(--sc-ink-soft); }
.out__text:empty { display: none; }
.out__text b { color: var(--sc-ink); font-weight: 600; }
.out__copy {
  margin-top: var(--sc-2); padding: 0; border: 0; background: none; cursor: pointer;
  color: var(--sc-accent); font: 600 var(--sc-t-sm)/1.6 var(--sc-font-text);
  text-decoration: underline; text-underline-offset: 0.3em;
}
.out__note { margin: var(--sc-4) 0 0; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); max-width: 40ch; }

.out__machine { position: relative; width: min(100%, 44rem); aspect-ratio: 1.35; justify-self: center; }
.out__mark { position: absolute; left: 25%; top: 6%; width: 50%; height: auto; overflow: visible; }
.out__ring { fill: none; stroke: var(--sc-ink); stroke-width: 4.5; }
.out__wire { fill: none; stroke: var(--sc-ink); stroke-width: 4.5; stroke-linecap: round; stroke-dasharray: 100 100; stroke-dashoffset: calc(100 - var(--draw, 1) * 100); }
.out__links { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.out__links path { fill: none; stroke: color-mix(in oklab, var(--sc-ink) 34%, transparent); stroke-width: 1.5; stroke-dasharray: 3 5; }
.feed { position: absolute; top: 20.8%; translate: 0 -50%; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.45rem; }
.feed--l { right: 75.5%; align-items: flex-end; }
.feed--r { left: 75.5%; align-items: flex-start; }
.feed li {
  max-width: 12rem; padding: 0.38rem 0.75rem; border-radius: var(--sc-r-pill);
  border: 1px solid var(--sc-hairline-strong); background: var(--sc-surface);
  font-size: var(--sc-t-xs); line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.feed li.is-placeholder { border-style: dashed; background: transparent; color: var(--sc-ink-soft); }
.feed li.is-more { border: 0; background: none; color: var(--sc-ink-soft); padding-block: 0; }
.node {
  position: absolute; left: 50%; top: 58.7%; width: 15.5%; aspect-ratio: 1; min-width: 7rem;
  translate: -50% -50%;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--sc-accent); color: var(--sc-accent-ink); text-decoration: none; text-align: center;
  font: 600 var(--sc-t-sm)/1.15 var(--sc-font-text);
  box-shadow: 0 10px 28px -8px hsl(160 80% 4% / 0.7), 0 2px 6px hsl(212 70% 3% / 0.5);
  transition: background-color var(--sc-d-fast) var(--sc-ease-out);
}
.node span { padding: 0 0.7rem; }
@media (hover: hover) and (pointer: fine) { .node:hover { background: color-mix(in oklab, var(--sc-accent) 86%, white); } }

/* -------------------------------------------------------------- footer -- */
.site-foot { position: relative; z-index: 2; background: #060F18; border-top: 1px solid var(--sc-hairline); padding: clamp(3rem, 6vw, 4.5rem) 0 1.5rem; }
.site-foot__wrap { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--sc-6); }
.site-foot__brand p { margin: var(--sc-3) 0 0; max-width: 34ch; color: var(--sc-ink-soft); font-size: var(--sc-t-sm); }
.foot__brand { display: inline-flex; align-items: center; gap: 0.6rem; color: var(--sc-ink); text-decoration: none; font: 600 1.15rem/1 var(--sc-font-display); }
.foot__brand svg { width: 1.8rem; height: 1.8rem; color: var(--sc-ink); }
.site-foot__links, .site-foot__contact { display: flex; flex-direction: column; gap: 0.6rem; align-items: flex-start; }
.site-foot a:not(.foot__brand) { color: var(--sc-ink-soft); text-decoration: none; font-size: var(--sc-t-sm); }
@media (hover: hover) and (pointer: fine) { .site-foot a:not(.foot__brand):hover { color: var(--sc-ink); } }
.site-foot__base { margin-top: var(--sc-7); padding-top: var(--sc-4); border-top: 1px solid var(--sc-hairline); font-size: var(--sc-t-xs); color: var(--sc-ink-soft); }

/* -------------------------------------------------------------- phones -- */
@media (max-width: 860px) {
  :root { --rig-h: 3.75rem; }
  .rig { grid-template-columns: auto 1fr auto; gap: var(--sc-3); }
  .rig__end { grid-column: 3; }
  .rig__word { font-size: 1.02rem; }
  .rig__mark { width: 1.9rem; height: 1.9rem; }
  .rig__end .btn { height: 2.4rem; padding: 0 0.95rem; font-size: 0.82rem; }
  .rig__menu {
    display: grid; place-content: center; gap: 5px; width: 2.6rem; height: 2.6rem; border-radius: 50%;
    border: 1px solid var(--sc-hairline-strong); background: none; cursor: pointer; padding: 0;
  }
  .rig__menu span { display: block; width: 16px; height: 2px; border-radius: 2px; background: var(--sc-ink); transition: transform var(--sc-d-base) var(--sc-ease-out); }
  .menu-open .rig__menu span:first-child { transform: translateY(3.5px) rotate(45deg); }
  .menu-open .rig__menu span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
  .rig__nav {
    position: fixed; left: 0; right: 0; top: var(--rig-h);
    background: var(--sc-canvas); border-bottom: 1px solid var(--sc-hairline);
    padding: var(--sc-3) var(--sc-gutter) var(--sc-5);
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity var(--sc-d-base) var(--sc-ease-out), transform var(--sc-d-base) var(--sc-ease-out), visibility var(--sc-d-base);
  }
  .menu-open .rig__nav { opacity: 1; visibility: visible; transform: none; }
  .menu-open .rig { background: var(--sc-canvas); }
  .rig__nav ul { flex-direction: column; gap: 0; }
  .rig__nav a { display: block; padding: 0.95rem 0; font-size: var(--sc-t-lg); color: var(--sc-ink); border-bottom: 1px solid var(--sc-hairline); }
  .rig__nav a::after { display: none; }

  .hero__copy { left: var(--sc-gutter); right: var(--sc-gutter); top: calc(var(--rig-h) + 3vh); bottom: auto; max-width: none; }
  .hero__title { font-size: clamp(2.3rem, 10vw, 3.3rem); }
  .hero__sub { font-size: var(--sc-t-base); margin-top: var(--sc-3); }
  .hero__actions { margin-top: var(--sc-4); }
  .hero__actions .btn { height: 3rem; padding: 0 1.2rem; font-size: var(--sc-t-sm); }
  .hero__trust { display: none; }
  .hero__fallback { width: 52vw; height: 52vw; right: 24vw; top: auto; bottom: 8vh; translate: 0 0; }
  .near--a { width: 30vw; right: -9vw; bottom: -5vh; }
  .near--b { width: 17vw; right: auto; left: -5vw; top: auto; bottom: 18vh; }
  .near--c { display: none; }
  .hero__far { -webkit-mask-image: radial-gradient(80% 60% at 50% 72%, #000 20%, transparent 80%); mask-image: radial-gradient(80% 60% at 50% 72%, #000 20%, transparent 80%); }

  .chore { font-size: var(--sc-t-xl); padding-left: 0 !important; }
  .pile__coda { text-align: left; margin-left: 0; }

  .svc__grid { grid-template-columns: 1fr; }
  .sys__label div { grid-template-columns: 1fr; gap: 0.15rem; }
  .svc__foot .btn { white-space: normal; height: auto; min-height: 3rem; padding: 0.7rem 1.2rem; text-align: center; }

  .run__head { top: calc(var(--rig-h) + 1.5vh); right: var(--sc-gutter); }
  .run__head h2 { font-size: var(--sc-t-xl); }
  .run__head .sc-body { font-size: var(--sc-t-sm); margin-top: var(--sc-2); }
  .run__tag { margin-bottom: var(--sc-2); }
  .run__bar { margin-top: var(--sc-2); }
  .run__meta { margin-top: var(--sc-2); }
  .run__ticker { display: none; }
  .lane { display: block; text-align: center; width: var(--lw, 5rem); }
  .lane__name { display: block; font-size: 0.72rem; line-height: 1.2; }
  .lane__dest { display: none; }
  .lane__n { display: block; font-size: var(--sc-t-lg); margin-top: 0.2rem; }
  .run__verdict { left: var(--sc-gutter); right: var(--sc-gutter); top: calc(var(--rig-h) + 25vh); max-width: none; }
  .run__big { font-size: var(--sc-t-xl); }
  .run__small { display: none; }

  .handoff__wrap { grid-template-columns: 1fr; }
  .handoff__title { max-width: none; margin-bottom: var(--sc-7); position: static; }
  .handoff__track { grid-column: 1; padding-left: 3.4rem; }
  .promises { grid-column: 1; }
  .handoff__wire { left: 0; }
  .step::before { left: -3rem; }

  .faq__wrap { grid-template-columns: 1fr; }

  .out__wrap { grid-template-columns: 1fr; }
  .out__list li { font-size: var(--sc-t-base); }
  .out__actions .btn { width: 100%; }
  .out__machine { width: 100%; aspect-ratio: 0.95; }
  .out__mark { left: 22%; width: 56%; top: 24%; }
  .feed { top: 0; translate: none; gap: 0.35rem; }
  .feed--l { right: 52%; left: 0; }
  .feed--r { left: 52%; right: 0; }
  .feed li { max-width: 100%; font-size: 0.7rem; }
  .node { left: 50%; top: calc(24% + 56% * 0.95 * 50 / 64); width: 26%; min-width: 6rem; font-size: 0.8rem; }

  .site-foot__wrap { grid-template-columns: 1fr 1fr; }
  .site-foot__brand { grid-column: 1 / -1; }
}

@media (max-width: 380px) {
  .rig { gap: var(--sc-2); }
  .rig__word { font-size: 0.95rem; }
  .rig__end .btn { padding: 0 0.75rem; }
}

@media (max-width: 860px) and (max-height: 700px) {
  .hero__sub { display: none; }
}

/* ------------------------------------------------------- reduced motion -- */
@media (prefers-reduced-motion: reduce) {
  .near { transform: rotate(var(--nr, 0deg)); }
  .hero__far { transform: none; }
  .chore { --strike: 1 !important; }
}