/* shenhavs · page layer. The engine's tokens are rebranded here; nothing in
   scrollcraft.css is edited. Ivory ink because שנהב is ivory; one ember
   accent, taken from the lamp that rims him in every shot. */
:root {
  --sc-canvas:     #0b0b0d;
  --sc-surface:    #16171b;
  --sc-ink:        #f1ebdf;
  --sc-ink-soft:   #aaa498;
  --sc-accent:     #ff6b2c;
  --sc-accent-ink: #160b05;
  --sc-font-display: "Karantina", "IBM Plex Sans Hebrew", system-ui, sans-serif;
  --sc-font-text:    "IBM Plex Sans Hebrew", system-ui, sans-serif;
  --sc-font-mono:    "IBM Plex Sans Hebrew", system-ui, sans-serif;
  --sc-leading-body: 1.66;
  --sc-shadow-color: 230 20% 3%;

  --surface-2: #1d1f24;
  --ink-dim: #7d786f;
  --r-ui: 10px;
  --r-panel: 14px;
  --wo-h: 4.25rem;
}

html { scroll-padding-top: 1rem; }

/* Mobile browsers hide their address bar on scroll and the screen grows by its
   height. Scenes sized to 100svh (the height with the bar showing) then leave
   an empty strip below them. So scenes take the full height (100lvh), and
   anything anchored to their bottom is lifted by the bar's height (--bar), so
   it is not hidden behind the bar while it is still showing. On desktop
   --bar is 0 and nothing moves. */
:root { --bar: 0px; }
@supports (height: 100lvh) {
  :root { --bar: calc(100lvh - 100svh); }
  .sc-stage { height: 100lvh; }
}
body { background: var(--sc-canvas); font-weight: 400; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.skip {
  position: fixed; top: 0.75rem; right: 0.75rem; z-index: 100;
  padding: 0.6rem 1rem; border-radius: var(--r-ui);
  background: var(--sc-accent); color: var(--sc-accent-ink); font-weight: 600; text-decoration: none;
  transform: translateY(-160%); transition: transform var(--sc-d-fast) var(--sc-ease-out);
}
.skip:focus-visible { transform: none; }

/* ------------------------------------------------------------- buttons -- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 3rem; padding: 0.7rem 1.45rem;
  border-radius: var(--r-ui); border: 1px solid transparent;
  font-weight: 600; font-size: var(--sc-t-base); line-height: 1; white-space: nowrap;
  text-decoration: none; cursor: pointer;
  transition: transform 140ms var(--sc-ease-out), background-color 160ms var(--sc-ease-out), box-shadow 160ms var(--sc-ease-out);
}
.btn--primary { background: var(--sc-accent); color: var(--sc-accent-ink); box-shadow: var(--sc-e2), inset 0 1px 0 rgb(255 255 255 / 0.22); }
.btn:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover { background: #ff7d45; box-shadow: var(--sc-e3), inset 0 1px 0 rgb(255 255 255 / 0.25); }
}
.btn--sm { min-height: 2.6rem; padding: 0.55rem 1.05rem; font-size: var(--sc-t-sm); }
.btn--lg { min-height: 3.4rem; padding: 0.85rem 1.9rem; font-size: var(--sc-t-lg); }

/* ---------------------------------------------------------------- mast -- */
.mast { position: fixed; top: 0; right: 0; z-index: var(--sc-z-chrome); padding: 1.25rem var(--sc-gutter); pointer-events: none; }
.mast { transition: opacity 240ms var(--sc-ease-out); }
.mast.is-away { opacity: 0; }
.mast.is-away .mast__mark { pointer-events: none; }
.mast__mark {
  pointer-events: auto; display: inline-block; padding: 0.25rem 0;
  font-weight: 600; font-size: 1.05rem; letter-spacing: 0.01em; text-decoration: none; color: var(--sc-ink);
  direction: ltr;
}
.mast__mark::after { content: ""; display: inline-block; width: 0.38em; height: 0.38em; margin-inline-start: 0.18em; border-radius: 50%; background: var(--sc-accent); vertical-align: 0.05em; }

/* ================================================================ HERO == */
.hero__stage { background: #07070a; }
.hero__plane { position: absolute; inset: 0; margin: 0; pointer-events: none; }
.hero__plane img { width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 50%; }

/* far: softer, darker, smaller drift. Distance reads as lower contrast. */
.hero__plate img {
  filter: brightness(0.5) saturate(0.9) blur(1.5px);
  transform-origin: 50% 60%;
  transform: translate3d(calc(var(--px, 0) * -10px), calc(var(--py, 0) * -6px), 0) scale(calc(1.06 + var(--sc-p, 0) * 0.06));
}
/* mid: the masthead his head overlaps. Recedes as the camera pushes in. */
.hero__name {
  inset: auto; top: 0; right: 15vw; left: auto;
  font-family: var(--sc-font-display); font-weight: 700;
  font-size: 33vw; line-height: 0.78; letter-spacing: -0.01em;
  color: var(--sc-ink); opacity: calc(0.92 - var(--sc-p, 0) * 0.5);
  transform-origin: 70% 30%;
  transform: translate3d(calc(var(--px, 0) * -18px), calc(var(--sc-p, 0) * -7vh + var(--py, 0) * -8px), 0) scale(calc(1 - var(--sc-p, 0) * 0.08));
}
.hero__name span { display: block; }
/* focal: he approaches. Pivot at his base so he grows from the frame floor. */
.hero__subject img {
  transform-origin: 30% 100%;
  transform: translate3d(calc(var(--px, 0) * 8px), calc(var(--py, 0) * 3px), 0) scale(calc(1 + var(--sc-p, 0) * 0.15));
}
/* near: dust in the monitor light passes the camera. */
.hero__dust {
  width: 100%; height: 100%;
  transform: translate3d(calc(var(--px, 0) * 26px), calc(var(--py, 0) * 16px), 0) scale(calc(1 + var(--sc-p, 0) * 0.5));
}
.hero__scrim {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 64% 74% at 100% 100%, rgb(9 9 11 / 0.94) 0%, rgb(9 9 11 / 0.82) 45%, transparent 76%),
    linear-gradient(to top, rgb(9 9 11 / 0.85) 0%, transparent 26%);
}
.hero__copy {
  position: absolute; z-index: var(--sc-z-copy);
  right: var(--sc-gutter); bottom: clamp(3.5rem, 9vh, 7rem);
  width: min(38rem, 44vw);
}
.hero__title {
  margin: 0; font-family: var(--sc-font-display); font-weight: 700;
  font-size: clamp(4rem, 7vw, 7.4rem); line-height: 0.84; letter-spacing: 0;
}
.hero__sub { margin: 1.1rem 0 1.5rem; max-width: 36ch; font-size: var(--sc-t-lg); line-height: 1.5; color: #d9d2c5; text-wrap: pretty; }
.hero__beat {
  margin: 0; font-family: var(--sc-font-display); font-weight: 700;
  font-size: clamp(4rem, 7.6vw, 8rem); line-height: 0.86;
}
.hero__beat br + * , .hero__beat { text-wrap: balance; }

/* ============================================================== NIGHT == */
.night__scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(270deg, rgb(9 9 11 / 0.88) 0%, rgb(9 9 11 / 0.6) 26%, transparent 46%);
}
.night__copy {
  position: absolute; z-index: var(--sc-z-copy);
  right: var(--sc-gutter); top: 50%; transform: translateY(-46%);
  width: min(30rem, 34vw);
  display: grid;
}
.night__copy > * { grid-area: 1 / 1; margin: 0; align-self: center; }
.night__block p { margin: 0; }
.night__time { font-family: var(--sc-font-display); font-weight: 700; font-size: clamp(5rem, 9vw, 9rem); line-height: 0.9; color: var(--sc-accent); }
.night__line { font-size: var(--sc-t-xl); line-height: 1.32; font-weight: 500; text-wrap: balance; }
.night__line--turn { font-family: var(--sc-font-display); font-weight: 700; font-size: clamp(3.2rem, 5.4vw, 5.6rem); line-height: 0.92; }

.night__pings {
  position: absolute; z-index: var(--sc-z-copy);
  left: 37%; top: 9vh; width: min(20rem, 24vw);
  list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem;
}
.night__pings li {
  display: grid; gap: 0.1rem; padding: 0.7rem 0.9rem;
  background: rgb(22 23 27 / 0.92); border: 1px solid var(--sc-hairline);
  border-radius: var(--r-ui); box-shadow: var(--sc-e2), var(--sc-edge);
  font-size: var(--sc-t-sm); line-height: 1.4;
}
.night__pings b { font-weight: 600; font-size: var(--sc-t-xs); color: var(--sc-accent); }
.night__pings span { color: var(--sc-ink); }

/* ============================================================== BUILD == */
.build__stage {
  display: grid; grid-template-columns: minmax(19rem, 0.78fr) 2fr; gap: clamp(1.5rem, 3vw, 3rem);
  padding: 5.5rem var(--sc-gutter) calc(var(--wo-h) + var(--bar) + 2rem);
  background:
    radial-gradient(60rem 40rem at 30% 40%, rgb(255 107 44 / 0.05), transparent 70%),
    var(--sc-canvas);
}
.build__side { align-self: center; display: grid; gap: 1.6rem; }
.build__title { margin: 0; font-family: var(--sc-font-display); font-weight: 700; font-size: clamp(2.8rem, 4.4vw, 4.6rem); line-height: 0.9; text-wrap: balance; }
.build__title span { color: var(--sc-ink-soft); }

.chooser { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chooser label { position: relative; cursor: pointer; }
.chooser input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chooser span {
  display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0.45rem 1rem;
  border: 1px solid var(--sc-hairline-strong); border-radius: var(--r-ui);
  font-size: var(--sc-t-sm); font-weight: 500; color: var(--sc-ink);
  transition: background-color 160ms var(--sc-ease-out), border-color 160ms var(--sc-ease-out), color 160ms var(--sc-ease-out), transform 120ms var(--sc-ease-out);
}
.chooser input:checked + span { background: var(--sc-ink); color: var(--sc-canvas); border-color: var(--sc-ink); }
.chooser input:focus-visible + span { outline: 2px solid var(--sc-accent); outline-offset: 3px; }
.chooser label:active span { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .chooser input:not(:checked) + span:hover { border-color: var(--sc-ink-soft); } }

.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.15rem; }
.steps li { display: flex; align-items: center; gap: 0.75rem; padding: 0.45rem 0; color: var(--ink-dim); font-weight: 500; transition: color 200ms var(--sc-ease-out); }
.steps i { width: 0.7rem; height: 0.7rem; border-radius: 50%; border: 1.5px solid currentColor; flex: none; transition: background-color 200ms var(--sc-ease-out), border-color 200ms var(--sc-ease-out); }
.steps li[data-state="live"] { color: var(--sc-ink); }
.steps li[data-state="live"] i { border-color: var(--sc-accent); box-shadow: 0 0 0 4px rgb(255 107 44 / 0.18); }
.steps li[data-state="done"] { color: var(--sc-ink-soft); }
.steps li[data-state="done"] i { background: var(--sc-accent); border-color: var(--sc-accent); }
.build__done { margin: 0; font-size: var(--sc-t-lg); line-height: 1.45; opacity: 0; transform: translateY(8px); transition: opacity 300ms var(--sc-ease-out), transform 300ms var(--sc-ease-out); }
.build__done a { color: var(--sc-accent); font-weight: 600; }
.build__done.is-on { opacity: 1; transform: none; }

.build__canvas {
  min-height: 0; height: 100%;
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto minmax(0, 1fr) minmax(0, 0.92fr);
  gap: 0.9rem;
}
.build__tag { grid-column: 1 / -1; margin: 0; display: flex; align-items: center; gap: 0.5rem; font-size: var(--sc-t-xs); color: var(--sc-ink-soft); letter-spacing: 0.02em; }
.build__tag i { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--sc-accent); }

.mod {
  position: relative; min-height: 0; overflow: hidden;
  background: var(--sc-surface); border: 1px dashed var(--sc-hairline-strong); border-radius: var(--r-panel);
  padding: 0.9rem 1rem; display: flex; flex-direction: column; gap: 0.75rem;
  opacity: 0.34; transition: opacity 320ms var(--sc-ease-out), border-color 320ms var(--sc-ease-out), box-shadow 320ms var(--sc-ease-out);
}
.mod[data-state="live"] { opacity: 1; border-style: solid; border-color: rgb(255 107 44 / 0.55); box-shadow: var(--sc-e3), var(--sc-edge); }
.mod[data-state="done"] { opacity: 1; border-style: solid; border-color: var(--sc-hairline); box-shadow: var(--sc-e2), var(--sc-edge); }
.mod--agent { grid-column: 1 / span 4; grid-row: 2 / span 2; }
.mod--site  { grid-column: 5 / span 8; grid-row: 2; padding: 0; }
.mod--flow  { grid-column: 5 / span 4; grid-row: 3; }
.mod--dash  { grid-column: 9 / span 4; grid-row: 3; }
.mod__head { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; font-size: var(--sc-t-xs); color: var(--sc-ink-soft); }
.mod__name { font-weight: 600; color: var(--sc-ink); }
.mod__live { display: inline-flex; align-items: center; gap: 0.35rem; }
.mod__live::before { content: ""; width: 0.42rem; height: 0.42rem; border-radius: 50%; background: var(--ink-dim); }
.mod[data-state="live"] .mod__live::before, .mod[data-state="done"] .mod__live::before { background: #6fd18a; }

/* chat */
.chat { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.55rem; overflow: hidden; }
.chat li {
  max-width: 86%; padding: 0.55rem 0.75rem; border-radius: 12px;
  font-size: var(--sc-t-sm); line-height: 1.45;
  animation: pop 260ms var(--sc-ease-out) both;
}
.chat li[hidden] { display: none; }
.chat .c { align-self: flex-start; background: var(--surface-2); border-start-start-radius: 4px; }
.chat .a { align-self: flex-end; background: rgb(255 107 44 / 0.14); border: 1px solid rgb(255 107 44 / 0.28); border-start-end-radius: 4px; }
.chat .typing { align-self: flex-end; display: inline-flex; gap: 4px; padding: 0.7rem 0.8rem; background: rgb(255 107 44 / 0.1); }
.chat .typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--sc-accent); animation: blink 1s infinite; }
.chat .typing i:nth-child(2) { animation-delay: 0.15s; } .chat .typing i:nth-child(3) { animation-delay: 0.3s; }
.chat .ok { align-self: center; max-width: none; display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.35rem 0.75rem; background: transparent; border: 1px solid rgb(111 209 138 / 0.4); color: #9fe0b0; font-size: var(--sc-t-xs); font-weight: 600; }
@keyframes pop { from { opacity: 0; transform: translateY(6px) scale(0.97); } to { opacity: 1; transform: none; } }
@keyframes blink { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } }

/* flow */
.flow { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.15rem; counter-reset: f; }
.flow li { position: relative; display: flex; align-items: center; gap: 0.6rem; padding: 0.28rem 0; font-size: var(--sc-t-xs); line-height: 1.35; color: var(--ink-dim); transition: color 220ms var(--sc-ease-out); }
.flow li::before { content: ""; flex: none; width: 0.8rem; height: 0.8rem; border-radius: 4px; border: 1.5px solid currentColor; background: var(--sc-surface); position: relative; z-index: 1; transition: background-color 220ms var(--sc-ease-out), border-color 220ms var(--sc-ease-out); }
.flow li + li::after { content: ""; position: absolute; right: calc(0.4rem - 0.75px); bottom: calc(50% + 0.4rem); height: calc(100% - 0.65rem); width: 1.5px; background: var(--sc-hairline-strong); }
.flow li.is-on { color: var(--sc-ink); }
.flow li.is-on::before { background: var(--sc-accent); border-color: var(--sc-accent); }
.flow li.is-on + li.is-on::after { background: var(--sc-accent); }

/* dashboard */
.kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; }
.kpi { display: grid; gap: 0.1rem; }
.kpi b { font-size: clamp(1.25rem, 1.8vw, 1.8rem); font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; }
.kpi span { font-size: 0.72rem; line-height: 1.3; color: var(--sc-ink-soft); }
.rows { width: 100%; border-collapse: collapse; font-size: 0.74rem; }
.rows td { padding: 0.32rem 0; border-top: 1px solid var(--sc-hairline); color: var(--sc-ink-soft); white-space: nowrap; }
.rows td:first-child { color: var(--sc-ink); font-weight: 500; }
.rows td:last-child { text-align: left; color: #9fe0b0; }
.rows tr { opacity: 0; transition: opacity 260ms var(--sc-ease-out); }
.rows tr.is-on { opacity: 1; }

/* website preview: the client's own world, daylight inside the night */
.browser { height: 100%; display: flex; flex-direction: column; }
.browser__bar { display: flex; align-items: center; gap: 0.35rem; padding: 0.55rem 0.8rem; border-bottom: 1px solid var(--sc-hairline); direction: ltr; }
.browser__bar i { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--surface-2); }
.browser__url { margin-inline: auto; padding: 0.15rem 0.9rem; border-radius: 6px; background: var(--surface-2); font-size: 0.72rem; color: var(--sc-ink-soft); }
.demo {
  --d-bg: #e9e6e0; --d-ink: #222; --d-acc: #888;
  flex: 1; min-height: 0; display: flex; flex-direction: column;
  background: #26282d; color: var(--d-ink);
  transition: background-color 360ms var(--sc-ease-out);
}
.demo__nav { display: flex; align-items: center; gap: 1rem; padding: 0.7rem 1.1rem; font-size: 0.74rem; opacity: 0; transition: opacity 300ms var(--sc-ease-out); }
.demo__nav b { margin-inline-end: auto; font-size: 0.9rem; }
.demo__hero { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 1.15fr; gap: 1rem; padding: 0.4rem 1.1rem 1.1rem; }
.demo__text { align-self: center; display: grid; gap: 0.55rem; justify-items: start; }
.demo__title, .demo__tagline { margin: 0; color: transparent; border-radius: 4px; background: rgb(255 255 255 / 0.08); transition: color 300ms var(--sc-ease-out), background-color 300ms var(--sc-ease-out); }
.demo__title { font-family: var(--sc-font-display); font-weight: 700; font-size: clamp(1.6rem, 2.9vw, 3rem); line-height: 0.92; }
.demo__tagline { font-size: clamp(0.72rem, 0.9vw, 0.9rem); line-height: 1.4; }
.demo__cta { display: inline-block; padding: 0.45rem 0.9rem; border-radius: 6px; font-size: 0.74rem; font-weight: 600; background: var(--d-acc); color: #fff; opacity: 0; transform: translateY(4px); transition: opacity 300ms var(--sc-ease-out), transform 300ms var(--sc-ease-out); }
.demo__img { position: relative; border-radius: 8px; overflow: hidden; background: rgb(255 255 255 / 0.06); }
.demo__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; clip-path: inset(0 0 100% 0); transition: clip-path 520ms var(--sc-ease-out); }
.demo[data-stage="1"], .demo[data-stage="2"], .demo[data-stage="3"], .demo[data-stage="4"] { background: var(--d-bg); }
.demo:is([data-stage="2"], [data-stage="3"], [data-stage="4"]) .demo__img img { clip-path: inset(0 0 0 0); }
.demo:is([data-stage="1"], [data-stage="2"]) :is(.demo__title, .demo__tagline) { background: color-mix(in oklab, var(--d-ink) 10%, transparent); }
.demo:is([data-stage="3"], [data-stage="4"]) :is(.demo__title, .demo__tagline) { color: var(--d-ink); background: transparent; }
.demo[data-stage="4"] .demo__nav { opacity: 1; }
.demo[data-stage="4"] .demo__cta { opacity: 1; transform: none; }
.mod.is-swapping .chat, .mod.is-swapping .flow, .mod.is-swapping .kpis, .mod.is-swapping .rows, .mod.is-swapping .demo { opacity: 0.25; }
.chat, .flow, .kpis, .rows, .demo { transition: opacity 160ms var(--sc-ease-out), background-color 360ms var(--sc-ease-out); }

/* ============================================================= SECURE == */
.secure { padding-block: clamp(4rem, 8vw, 8rem) clamp(5rem, 10vw, 9rem); }
.secure__wrap { display: grid; grid-template-columns: 1.3fr 0.7fr; gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.secure__lock { grid-column: 2; grid-row: 1; margin: 0; justify-self: center; width: min(15rem, 60%); }
.secure__lock svg { width: 100%; height: auto; stroke: var(--sc-ink); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.secure__lock .draw { stroke-dasharray: 1; }
.secure__lock .d1 { stroke: var(--sc-accent); stroke-dashoffset: max(0, calc(1 - var(--sc-p, 0) * 3)); }
.secure__lock .d2 { stroke-dashoffset: max(0, calc(1.5 - var(--sc-p, 0) * 3)); }
.secure__lock .d3 { stroke-dashoffset: max(0, calc(2 - var(--sc-p, 0) * 3.2)); }
.secure__text { grid-column: 1; grid-row: 1; }
.secure__title { font-family: var(--sc-font-display); font-weight: 700; font-size: clamp(4rem, 9vw, 9rem); line-height: 0.82; margin: 0; }
.secure__lede { font-size: var(--sc-t-xl); line-height: 1.4; max-width: 30ch; margin: 0; text-wrap: pretty; }
.vows { margin: 0; margin-top: var(--sc-7) !important; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6rem 2.5rem; max-width: 46rem; }
.vows div { border-top: 1px solid var(--sc-hairline-strong); padding-top: 0.9rem; }
.vows dt { font-weight: 600; font-size: var(--sc-t-lg); }
.vows dd { margin: 0.2rem 0 0; color: var(--sc-ink-soft); }

/* ============================================================== RANGE == */
/* The engine pans left. Hebrew reads right to left, so the stage is mirrored
   and each item mirrored back: the rail now travels the reading direction. */
.range__stage { transform: scaleX(-1); direction: ltr; display: flex; align-items: center; }
.rail { direction: ltr; gap: clamp(1rem, 2vw, 2rem); padding-inline: var(--sc-gutter); align-items: stretch; }
.rail__item { transform: scaleX(-1); direction: rtl; flex: none; }
.rail__lead { width: min(26rem, 80vw); align-self: center; display: grid; gap: 1rem; }
.range__title { margin: 0; font-family: var(--sc-font-display); font-weight: 700; font-size: clamp(3.4rem, 6vw, 6rem); line-height: 0.86; }
.rail__lead p { margin: 0; color: var(--sc-ink-soft); max-width: 34ch; }
.rail__lead [data-bind] { color: var(--sc-ink); }
.cap { width: min(21rem, 78vw); }
.cap__card {
  height: 100%; min-height: 23rem; padding: 1.5rem; display: flex; flex-direction: column; gap: 0.75rem;
  background: var(--sc-surface); border: 1px solid var(--sc-hairline); border-radius: var(--r-panel);
  box-shadow: var(--sc-e2), var(--sc-edge);
}
.cap__icon { width: 2.4rem; height: 2.4rem; fill: none; stroke: var(--sc-accent); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 1.5rem; }
.cap h3 { margin: 0; font-family: var(--sc-font-display); font-weight: 700; font-size: 2.5rem; line-height: 0.9; }
.cap p { margin: 0; color: var(--sc-ink-soft); font-size: var(--sc-t-sm); }
.cap__yours { margin-top: auto !important; padding-top: 0.9rem; border-top: 1px solid var(--sc-hairline); color: var(--sc-ink) !important; }
.cap__yours b { color: var(--sc-accent); font-weight: 600; }
.rail__note { width: min(20rem, 76vw); align-self: center; }
.rail__note p { margin: 0; font-family: var(--sc-font-display); font-weight: 700; font-size: clamp(2.4rem, 3.6vw, 3.6rem); line-height: 0.92; }
.rail__note span { color: var(--sc-accent); }
@media (prefers-reduced-motion: no-preference) {
  .rail .cap { opacity: clamp(0.55, calc(var(--sc-p, 0) * 9 - var(--i, 0) * 1.4 + 1), 1); }
}

/* ============================================================== ABOUT == */
.about__scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(270deg, rgb(9 9 11 / 0.9) 0%, rgb(9 9 11 / 0.62) 30%, transparent 52%); }
.about__copy { position: absolute; z-index: var(--sc-z-copy); right: var(--sc-gutter); top: 50%; transform: translateY(-50%); width: min(32rem, 38vw); display: grid; gap: 1.1rem; }
.about__title { margin: 0; font-family: var(--sc-font-display); font-weight: 700; font-size: clamp(3.6rem, 6.4vw, 6.6rem); line-height: 0.88; }
.about__p { margin: 0; font-size: var(--sc-t-lg); line-height: 1.55; color: #ddd6c9; text-wrap: pretty; }

/* ============================================================== ORDER == */
.order { min-height: 100svh; display: flex; flex-direction: column; padding-top: clamp(4rem, 8vw, 7rem); background: var(--sc-canvas); }
.order__wrap { flex: 1; display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.order__title { margin: 0; font-family: var(--sc-font-display); font-weight: 700; font-size: clamp(3.6rem, 7vw, 7.4rem); line-height: 0.84; text-wrap: balance; }
.order__lede { margin: 1.2rem 0 0; font-size: var(--sc-t-lg); color: var(--sc-ink-soft); max-width: 32ch; }
.ticket {
  background: #f1ebdf; color: #17140f; border-radius: var(--r-panel);
  padding: clamp(1.25rem, 2.4vw, 2rem); display: grid; gap: 1.1rem;
  box-shadow: var(--sc-e3); position: relative;
  --sc-hairline: rgb(23 20 15 / 0.14);
}
.ticket::before { content: ""; position: absolute; inset-inline: 1.25rem; top: 3.3rem; border-top: 1.5px dashed rgb(23 20 15 / 0.22); }
.ticket__top { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 0.6rem; font-family: var(--sc-font-display); font-weight: 700; font-size: 2rem; line-height: 1; }
.ticket__top .sc-nums { font-family: var(--sc-font-text); font-weight: 500; font-size: var(--sc-t-sm); color: #5b5348; }
.ticket__row { display: grid; gap: 0.45rem; border: 0; margin: 0; padding: 0; min-width: 0; }
.ticket__k { padding: 0; font-size: var(--sc-t-xs); font-weight: 600; color: #5b5348; }
.ticket select, .ticket textarea {
  width: 100%; border: 1px solid rgb(23 20 15 / 0.2); border-radius: var(--r-ui); background: #fbf8f2; color: #17140f;
  padding: 0.7rem 0.85rem; font-size: var(--sc-t-base);
}
.ticket textarea { resize: vertical; line-height: 1.55; min-height: 7.5rem; }
.ticket select:focus-visible, .ticket textarea:focus-visible { outline: 2px solid #c2410c; outline-offset: 2px; }
.ticket__checks { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.ticket__checks label { position: relative; cursor: pointer; }
.ticket__checks input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.ticket__checks span { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 2.6rem; padding: 0.4rem 0.85rem; border: 1px solid rgb(23 20 15 / 0.22); border-radius: var(--r-ui); font-size: var(--sc-t-sm); font-weight: 500; transition: background-color 160ms var(--sc-ease-out), color 160ms var(--sc-ease-out); }
.ticket__checks span::before { content: ""; width: 0.8rem; height: 0.8rem; border-radius: 3px; border: 1.5px solid currentColor; }
.ticket__checks input:checked + span { background: #17140f; color: #f1ebdf; }
.ticket__checks input:checked + span::before { background: var(--sc-accent); border-color: var(--sc-accent); }
.ticket__checks input:focus-visible + span { outline: 2px solid #c2410c; outline-offset: 2px; }
.ticket__send { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; padding-top: 0.4rem; }
.ticket .btn--primary { color: #160b05; }
.ticket .btn:focus-visible { outline-color: #c2410c; }
.ticket__alt { color: #17140f; font-weight: 500; }
.foot { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem 1.5rem; padding: 2.5rem var(--sc-gutter) 1.75rem; font-size: var(--sc-t-xs); color: var(--ink-dim); }

/* ======================================================== WORK ORDER == */
.wo {
  position: fixed; z-index: var(--sc-z-chrome); bottom: max(0.75rem, env(safe-area-inset-bottom)); left: 50%;
  width: min(62rem, calc(100% - 1.5rem)); translate: -50% 0;
  transition: transform 420ms var(--sc-ease-drawer), opacity 300ms var(--sc-ease-out);
}
.wo[data-hidden="true"]:not(:focus-within) { transform: translateY(calc(100% + 1.5rem)); opacity: 0; }
.wo__inner {
  display: flex; align-items: center; gap: 1rem; min-height: var(--wo-h); padding: 0.55rem 0.6rem 0.55rem 0.6rem; padding-inline-start: 1.1rem;
  background: rgb(22 23 27 / 0.97); border: 1px solid var(--sc-hairline-strong); border-radius: var(--r-panel);
  box-shadow: var(--sc-e3), var(--sc-edge);
}
.wo__title { margin: 0; display: grid; line-height: 1.2; flex: none; }
.wo__k { font-size: 0.72rem; color: var(--sc-ink-soft); }
.wo__biz { font-weight: 600; font-size: var(--sc-t-sm); }
.wo__stamps { list-style: none; margin: 0 auto; padding: 0; display: flex; gap: 0.3rem; }
.wo__stamps a {
  display: inline-flex; align-items: center; gap: 0.4rem; min-height: 2.4rem; padding: 0.3rem 0.7rem;
  border-radius: 8px; text-decoration: none; font-size: var(--sc-t-xs); font-weight: 500; color: var(--ink-dim);
  transition: color 200ms var(--sc-ease-out), background-color 160ms var(--sc-ease-out);
}
.wo__stamps a::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; border: 1.5px solid currentColor; transition: background-color 200ms, border-color 200ms; }
.wo__stamps a.is-stamped { color: var(--sc-ink); }
.wo__stamps a.is-stamped::before { background: var(--sc-accent); border-color: var(--sc-accent); }
@media (hover: hover) and (pointer: fine) { .wo__stamps a:hover { background: var(--surface-2); } }
.wo__count { display: none; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); margin-inline-start: auto; }

/* ============================================================= MOBILE == */
@media (max-width: 860px) {
  :root { --wo-h: 3.6rem; }
  .mast { padding-block: 1rem; }

  .hero__plane img { object-position: 27% 50%; }
  .hero__plate img { object-position: 45% 50%; }
  .hero__subject img { transform-origin: 50% 100%; }
  .hero__subject { translate: 0 15svh; }
  .hero__name { top: 6.5svh; right: 50%; translate: 50% 0; font-size: 42vw; transform-origin: 50% 30%; }
  .hero__scrim { background: linear-gradient(to top, rgb(9 9 11 / 0.95) 0%, rgb(9 9 11 / 0.82) 30%, rgb(9 9 11 / 0.2) 52%, transparent 62%); }
  .hero__copy { right: var(--sc-gutter); left: var(--sc-gutter); width: auto; bottom: calc(var(--wo-h) + var(--bar) + 2rem); }
  .hero__title { font-size: clamp(3.4rem, 15vw, 4.6rem); }
  .hero__sub { font-size: var(--sc-t-base); margin: 0.9rem 0 1.25rem; }
  .hero__beat { font-size: clamp(3.4rem, 15vw, 4.6rem); }

  .night__scrim { background: linear-gradient(to top, rgb(9 9 11 / 0.94) 0%, rgb(9 9 11 / 0.7) 30%, transparent 52%); }
  .night__copy { left: var(--sc-gutter); width: auto; top: auto; bottom: calc(var(--wo-h) + var(--bar) + 2rem); transform: none; }
  .night__copy > * { align-self: end; }
  .night__time { font-size: 5rem; }
  .night__line { font-size: var(--sc-t-lg); }
  .night__line--turn { font-size: 3.2rem; }
  .night__pings { left: var(--sc-gutter); right: var(--sc-gutter); width: auto; top: 4.5rem; }
  .night__pings li { padding: 0.55rem 0.8rem; }

  .build__stage { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); gap: 1rem; padding: 4.25rem var(--sc-gutter) calc(var(--wo-h) + var(--bar) + 1.75rem); }
  .build__side { align-self: start; gap: 0.9rem; }
  .build__title { font-size: 2.6rem; }
  .build__title span { display: none; }
  .chooser { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(var(--sc-gutter) * -1); padding-inline: var(--sc-gutter); scrollbar-width: none; }
  .chooser label { flex: none; }
  .steps { display: none; }
  .build__done { position: absolute; inset-inline: var(--sc-gutter); bottom: calc(var(--wo-h) + var(--bar) + 1.5rem); z-index: 3; padding: 1rem; border-radius: var(--r-panel); background: var(--sc-surface); box-shadow: var(--sc-e3); font-size: var(--sc-t-base); }
  .build__canvas { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); position: relative; }
  .mod { grid-column: 1 !important; grid-row: 2 !important; opacity: 0 !important; visibility: hidden; transition: opacity 260ms var(--sc-ease-out), visibility 0s 260ms; }
  .mod.is-current { opacity: 1 !important; visibility: visible; transition: opacity 260ms var(--sc-ease-out); }
  .demo__hero { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .demo__title { font-size: 2.2rem; }
  .kpi b { font-size: 1.6rem; }
  .rows { font-size: 0.8rem; }

  .secure__wrap { grid-template-columns: 1fr; }
  .secure__lock { grid-column: 1; grid-row: 1; width: 7rem; justify-self: start; }
  .secure__text { grid-row: 2; }
  .vows { grid-template-columns: 1fr; gap: 1.1rem; }

  .cap__card { min-height: 21rem; }

  .about__scrim { background: linear-gradient(to top, rgb(9 9 11 / 0.95) 0%, rgb(9 9 11 / 0.78) 34%, transparent 58%); }
  .about__copy { left: var(--sc-gutter); width: auto; top: auto; bottom: calc(var(--wo-h) + var(--bar) + 1.75rem); transform: none; gap: 0.8rem; }
  .about__title { font-size: 3.4rem; }
  .about__p { font-size: var(--sc-t-base); }

  .order__wrap { grid-template-columns: 1fr; align-content: start; }

  .wo__inner { gap: 0.6rem; padding-inline-start: 0.9rem; }
  .wo__stamps { display: none; }
  .wo__count { display: inline; }
}
@media (max-width: 380px) {
  .hero__sub { font-size: var(--sc-t-sm); }
  .wo__k { display: none; }
}

/* ===================================================== REDUCED MOTION == */
@media (prefers-reduced-motion: reduce) {
  .hero__plane img, .hero__name, .hero__dust { transform: none !important; }
  .hero__name { opacity: 0.9; }
  .hero__dust { display: none; }
  .range__stage { transform: none; direction: rtl; }
  .rail { direction: rtl; }
  .rail__item { transform: none; }
  .chat li { animation: none; }
  .chat .typing i { animation: none; opacity: 0.7; }
  .secure__lock .draw { stroke-dashoffset: 0 !important; }
  .demo__img img { transition: none; }
}