:root {
  color-scheme:light;
  --bg:#edf2fa;
  --ink:#142745;
  --muted:#455d78;
  --line:#becbe0;
  --card:#f8faff;
  --field:#e1eafa;
  --accent:#184aac;
  --button:#1949a8;
  --on:#fff;
  --focus:#2457c1;
  --edge:#416fb3;
  --trace:#7298ca;
  --pin:#ffab57;
  --pin-edge:#683a16;
  --mark:polygon(50% 0, 100% 26%, 100% 74%, 50% 100%, 0 74%, 0 26%);
}
:root[data-theme=dark] {
  color-scheme:dark;
  --bg:#0c1421;
  --ink:#eef5ff;
  --muted:#a9bad1;
  --line:#314762;
  --card:#121f30;
  --field:#101e31;
  --accent:#8db9ff;
  --button:#8db9ff;
  --on:#10213d;
  --focus:#a0d7ff;
  --edge:#3c5a86;
  --trace:#3f6492;
  --pin:#ffae62;
  --pin-edge:#fff0da;
}

* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: var(--bg); color: var(--ink); font: 16px/1.42 Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
h1,h2,p,ul,fieldset { margin: 0; }
a { color: inherit; text-decoration: none; }
button,input { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.wrap { width: min(1230px, calc(100% - 76px)); margin-inline: auto; }
header { min-height: 68px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; }
#theme { width: 44px; height: 44px; border: 1px solid var(--line); background: var(--card); border-radius: 50%; font-size: 24px; }
.sun,[data-theme=dark] .moon { display: none; }
[data-theme=dark] .sun { display: inline; }
.hero { padding-block: clamp(23px,3.3vw,48px) 30px; }
.intro { text-align: center; }
h1 { font-size: clamp(36px,5.2vw,76px); line-height: 1.02; letter-spacing: -.043em; text-wrap: balance; font-weight: 770; }
h1 em { color: var(--accent); font-style: normal; }
.intro p { color: var(--muted); margin: 12px auto 0; max-width: 62ch; font-size: clamp(15px,1.4vw,19px); }
.route { margin-top: 21px; border: 1px solid var(--line); border-radius: 20px; background: var(--field); overflow: hidden; }
.road { position: relative; }
.road:focus-within { outline: 2px solid var(--focus); outline-offset: -3px; }
.road input { position: absolute; inset: 0 14%; margin: 0; width: 72%; height: 100%; appearance: none; background: transparent; cursor: ew-resize; outline: none; }
.road input::-webkit-slider-runnable-track { background: transparent; }
.road input::-moz-range-track { background: transparent; }
.road input::-webkit-slider-thumb { appearance: none; width: 1px; height: 44px; background: transparent; border: 0; }
.road input::-moz-range-thumb { width: 1px; height: 44px; background: transparent; border: 0; }
.milestones { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); align-items: center; gap: 5px; padding: 0 10px 12px; }
.milestones button { justify-self: center; min-height: 42px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); font-size: 14px; font-weight: 650; }
.milestones button[aria-pressed=true] { background: var(--button); border-color: var(--button); color: var(--on); }
.details { display: grid; grid-template-columns: .82fr 1.18fr; gap: 12px; margin-top: 12px; }
.result,.contact { padding: clamp(16px,2.1vw,25px); border: 1px solid var(--line); border-radius: 18px; background: var(--card); min-width: 0; }
.result h2,.contact h2 { font-size: clamp(21px,2.25vw,31px); letter-spacing: -.035em; line-height: 1.14; }
.result .label { color: var(--muted); font-size: 13px; font-weight: 650; margin-bottom: 5px; }
.price { color: var(--accent); font-size: clamp(36px,4.1vw,60px); font-weight: 750; font-variant-numeric: tabular-nums; letter-spacing: -.045em; line-height: 1.12; margin-top: 4px; }
.result ul { color: var(--muted); padding-left: 19px; margin-top: 8px; font-size: 14px; }
.result li + li { margin-top: 3px; }
.form-fields { display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: 8px 10px; margin-top: 12px; }
.field { min-width: 0; display: grid; gap: 5px; }
.field label,legend { font-size: 13px; font-weight: 660; }
fieldset { min-width: 0; border: 0; padding: 0; }
legend { margin-bottom: 5px; }
.field input { min-width: 0; width: 100%; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); min-height: 44px; padding: 8px 10px; }
.field input::placeholder { color: var(--muted); opacity: 1; font-size: 14px; }
.channels { display: flex; flex-wrap: wrap; gap: 4px; }
.channels label { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--line); border-radius: 8px; min-height: 44px; padding: 4px 6px; font-size: 12px; cursor: pointer; }
.channels label:has(:checked) { border-color: var(--accent); color: var(--accent); }
.channels input { accent-color: var(--accent); margin: 0; }
.submit { display: flex; align-items: center; justify-content: space-between; gap: 8px; background: var(--button); color: var(--on); min-height: 44px; padding: 7px 12px; border: 1px solid var(--button); border-radius: 8px; font-size: 14px; font-weight: 720; }
.submit:hover { filter: brightness(.88); }
.meta,#status { margin-top: 8px; color: var(--muted); font-size: 12px; }
#status { color: var(--accent); font-weight: 650; }
@media (max-width: 800px) {
  .wrap { width: calc(100% - 40px); }
  .details { grid-template-columns: 1fr; }
}
@media (max-width: 460px) {
  .wrap { width: calc(100% - 28px); }
  header { min-height: 61px; }
  h1 { font-size: clamp(31px,8vw,39px); }
  h1 br { display: none; }
  .route { margin-top: 15px; border-radius: 15px; }
  .milestones { padding: 0 4px 9px; }
  .milestones button { font-size: 12px; padding-inline: 5px; }
  .form-fields { grid-template-columns: 1fr; }
}

.wrap { width:min(1240px,calc(100% - 78px)); }
#theme,.route,.result,.contact,.milestones button,.field input,.channels label,.submit { border-radius:5px; }
.hero { padding-block:clamp(24px,4vw,55px) 30px; }
.intro { display:grid; grid-template-columns:1fr minmax(235px, .32fr); align-items:end; gap:25px; text-align:left; }
h1 { font-size:clamp(37px,5.1vw,75px); letter-spacing:-.04em; text-wrap:initial; }
.intro p { margin:0 0 4px; max-width:31ch; font-size:clamp(15px,1.4vw,19px); }
.route { margin-top:25px; }
.route-header { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 13px; border-bottom:1px solid var(--line); }
.route-header h2 { font-size:14px; font-weight:650; }
#stage,.price { font-family:"IBM Plex Mono","SF Mono",Consolas,monospace; }
#stage { color:var(--accent); font-size:13px; }
.milestones { padding-top:5px; }
.price { letter-spacing:-.068em; font-weight:740; }
.result,.contact { border-top:2px solid var(--trace); }
@media (max-width:900px) {
  .wrap { width:calc(100% - 40px); }
  .intro { grid-template-columns:1fr; gap:10px; }
  .intro p { max-width:55ch; }
}
@media (max-width:460px) {
  .wrap { width:calc(100% - 28px); }
  h1 { font-size:clamp(30px,8.1vw,38px); text-wrap:balance; }
  .route { margin-top:15px; }
  .route-header { padding:8px 10px; }
}

.road {
  height: clamp(105px, 11vw, 158px);
  isolation: isolate;
  background-image:
    linear-gradient(90deg, color-mix(in srgb,var(--trace) 27%,transparent) 1px, transparent 1px),
    linear-gradient(color-mix(in srgb,var(--trace) 27%,transparent) 1px, transparent 1px);
  background-size: 24px 24px;
}
.road::before,
.road::after {
  content: "";
  position: absolute;
  inset-inline: 2%;
  height: 8px;
  border-top: 1px solid var(--trace);
  background: repeating-linear-gradient(90deg,var(--trace) 0 1px,transparent 1px 12px);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  opacity: .55;
  pointer-events: none;
}
.road::before { top: 17%; }
.road::after { bottom: 17%; transform: rotate(180deg); }
.rail {
  position: absolute;
  inset: 50% 0 auto;
  height: 25px;
  transform: translateY(-50%);
  border-block: 1px solid var(--edge);
  background: color-mix(in srgb,var(--edge) 25%,var(--field));
}
.rail-progress {
  height: 100%;
  width: var(--position);
  background: linear-gradient(90deg,color-mix(in srgb,var(--button) 37%,var(--field)),var(--button));
  box-shadow: 0 0 14px color-mix(in srgb,var(--button) 44%,transparent);
  transition: width 310ms cubic-bezier(.22,.72,.31,1);
}
.rail-nodes {
  position: absolute;
  inset: 0 2%;
  display: grid;
  grid-template-columns: repeat(4,1fr);
  align-items: center;
  justify-items: center;
}
.rail-nodes span {
  width: 12px;
  height: 12px;
  border: 1px solid var(--accent);
  background: var(--field);
  transform: rotate(45deg);
}
.rail-head {
  position: absolute;
  top: 50%;
  left: var(--position);
  width: 21px;
  height: 21px;
  transform: translate(-50%,-50%) rotate(45deg);
  background: var(--pin);
  border: 2px solid var(--pin-edge);
  box-shadow: 0 0 0 3px var(--field), 0 0 17px var(--pin);
  transition: left 310ms cubic-bezier(.22,.72,.31,1);
}
.road input { z-index: 1; }
.milestones { padding-inline: 2%; column-gap: 0; }
@media (max-width:460px) {
  .road { height: 104px; background-size: 17px 17px; }
  .rail { height: 20px; }
  .rail-head { width: 18px; height: 18px; }
  .rail-nodes span { width: 10px; height: 10px; }
}
@media (prefers-reduced-motion:reduce) {
  .rail-head,.rail-progress { transition: none; }
}

main {
  --position: 14%;
  --wave-height: .79;
  --wave-blue: #3069cd;
  --wave-mid: #477de0;
  --wave-pale: #6b9bee;
}
:root[data-theme=dark] main {
  --wave-blue: #2d70e8;
  --wave-mid: #4e8ffa;
  --wave-pale: #94baff;
}
main[data-level="1"] { --wave-height: .88; }
main[data-level="2"] { --wave-height: .70; }
main[data-level="3"] { --wave-height: 1.073; }

.road { overflow: hidden; }
#waves {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: scaleY(var(--wave-height));
  transform-origin: center bottom;
  transition: transform 480ms cubic-bezier(.22,.7,.28,1);
  pointer-events: none;
}
@media (max-width:460px) {
  .road { height: 133px; }
}
@media (prefers-reduced-motion:reduce) {
  #waves { transition: none; }
}

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.road { touch-action: pan-y; cursor: grab; }
.road input { pointer-events: none; }
.road.dragging { cursor: grabbing; }
.road.dragging .rail-head,.road.dragging .rail-progress { transition: none; }
.channels { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 5px; }
.channels label { padding-inline: 8px; }
@media (max-width: 460px) {
  .intro h1 { text-wrap: initial; }
  .intro h1 br { display: initial; }
}

.rail-head { left: clamp(16px,var(--position),calc(100% - 16px)); }
.road.dragging .rail-head { box-shadow: 0 0 0 4px var(--field), 0 0 21px var(--pin); }
.road.settling .rail-head,.road.settling .rail-progress { transition-duration: 620ms; transition-timing-function: cubic-bezier(.24,.66,.37,1); }

@media (max-width:460px) {
  .rail-head { left: clamp(14px,var(--position),calc(100% - 14px)); }
}
@media (prefers-reduced-motion:reduce) {
  .road.settling .rail-head,.road.settling .rail-progress,.road.tracking .rail-head,.road.tracking .rail-progress { transition: none; }
}

.brand {
  display: block;
  position: relative;
  flex: 0 1 clamp(119px,35vw,207px);
  aspect-ratio: 3;
}
.brand-day,.brand-night { position: absolute; inset: 0; width: 100%; height: 100%; }
.brand-day,.brand-night { object-fit: contain; }
.brand-night { display: none; }
.brand-night-mark {
  clip-path: inset(0 77% 0 0);
  filter: brightness(0) saturate(100%) invert(76%) sepia(28%) saturate(1580%) hue-rotate(181deg) brightness(104%);
}
.brand-night-word { clip-path: inset(0 0 0 23%); filter: brightness(0) invert(1); }
[data-theme=dark] .brand-day { display: none; }
[data-theme=dark] .brand-night { display: block; }
.header-actions { display: flex; align-items: center; gap: 16px; }
.phone { color: var(--ink); font-size: 15px; font-weight: 690; white-space: nowrap; font-variant-numeric: tabular-nums; }
.phone:hover { color: var(--accent); }
#theme { flex: 0 0 auto; }
@media (max-width:500px) {
  .header-actions { gap: 7px; }
  .phone { font-size: 12px; }
  #theme { width: 40px; height: 40px; font-size: 21px; }
}

/* Continuation of the approved first screen. */
:root {
  --landing-glow: #d9e7ff;
  --journey-panel: #dfebfc;
  --closing-bg: #19386d;
  --closing-ink: #f2f7ff;
  --closing-muted: #d3e2ff;
}
:root[data-theme=dark] {
  --landing-glow: #1b3659;
  --journey-panel: #101d30;
  --closing-bg: #142746;
  --closing-ink: #f2f7ff;
  --closing-muted: #c7d9f7;
}
#feedback,#route-title { scroll-margin-top: 20px; }
.journey,.assembly,.work {
  margin-top: clamp(44px,7vw,106px);
  padding-top: clamp(26px,4vw,52px);
  border-top: 1px solid var(--line);
}
.section-title {
  font-size: clamp(36px,5.5vw,78px);
  font-weight: 760;
  line-height: .99;
  letter-spacing: -.055em;
  text-wrap: balance;
}
.section-title em { color: var(--accent); font-style: normal; }
.journey-intro,.assembly {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  align-items: end;
  gap: 24px 40px;
}
.journey-intro > p {
  max-width: 34ch;
  color: var(--muted);
  font-size: clamp(16px,1.7vw,22px);
}
.scenario {
  margin-top: clamp(22px,3.5vw,44px);
  border: 1px solid var(--line);
  border-radius: 24px;
  overflow: hidden;
  background: radial-gradient(ellipse at 75% 100%, var(--landing-glow), transparent 65%), var(--journey-panel);
}
.scenario-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 5px 12px;
  padding: 14px clamp(14px,3vw,34px);
  border-bottom: 1px solid var(--line);
  font-size: 14px;
  font-weight: 650;
}
.scenario-header span,.desk-label,.message span { color: var(--muted); font-size: 12px; }
.scenario-steps {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  list-style: none;
  gap: 6px;
  margin: 0;
  padding: 14px clamp(10px,3vw,34px) 0;
}
.scenario-steps button {
  width: 100%;
  min-height: 46px;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--card);
  color: var(--muted);
  font-size: clamp(12px,1.5vw,15px);
  font-weight: 680;
}
.scenario-steps button:hover { border-color: var(--accent); color: var(--ink); }
.scenario-steps button[aria-pressed=true] { background: var(--button); border-color: var(--button); color: var(--on); }
.scenario-body {
  display: grid;
  grid-template-columns: 1.4fr .8fr;
  align-items: start;
  column-gap: clamp(16px,5vw,72px);
  padding: clamp(14px,3vw,34px);
}
.dialogue { display: grid; align-content: start; gap: 10px; min-height: 184px; }
.message,.desk {
  display: grid;
  gap: 4px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 13px;
  padding: 12px 15px;
}
.message { width: fit-content; max-width: 95%; }
.message p,.desk p { overflow-wrap: anywhere; }
.assistant-message { justify-self: end; background: var(--field); border-color: var(--edge); }
.desk { align-self: center; padding: clamp(14px,2vw,24px); }
.desk strong { color: var(--accent); font-size: clamp(19px,2.3vw,32px); line-height: 1.1; letter-spacing: -.025em; }
.desk p:last-child { margin-top: 3px; font-size: 14px; }
.scenario-noscript { padding: 0 14px 14px; }
.assembly { align-items: start; grid-template-columns: .85fr 1.15fr; }
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  margin-top: 10px;
  color: var(--accent);
  font-weight: 680;
}
.text-link:hover { text-decoration: underline; }
.assembly-list { margin: 0; }
.assembly-list > div {
  display: grid;
  grid-template-columns: minmax(100px,.65fr) 1fr;
  align-items: start;
  gap: 8px 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}
.assembly-list > div:first-child { padding-top: 0; }
.assembly-list dt { font-size: clamp(16px,1.9vw,24px); font-weight: 710; letter-spacing: -.025em; overflow-wrap: anywhere; }
.assembly-list dd,.work-steps p { margin: 0; color: var(--muted); }
.assembly-kit dt { color: var(--accent); }
.work-steps {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: clamp(16px,4vw,48px);
  margin: clamp(20px,3vw,36px) 0 0;
  padding: 0;
  list-style: none;
  counter-reset: work;
}
.work-steps li { position: relative; counter-increment: work; padding: 13px 0 0 34px; border-top: 1px solid var(--line); }
.work-steps li::before { position: absolute; left: 0; top: 16px; content: counter(work,decimal-leading-zero); color: var(--accent); font: 600 13px/1.3 ui-monospace,monospace; }
.work-steps h3 { margin: 0 0 4px; font-size: clamp(17px,1.9vw,24px); letter-spacing: -.03em; }
.closing {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  justify-items: start;
  gap: 14px;
  margin-top: clamp(44px,8vw,110px);
  padding: clamp(22px,6vw,78px);
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--closing-bg);
  color: var(--closing-ink);
}
.closing::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  content: "";
  background: repeating-radial-gradient(ellipse at 100% 140%, transparent 0 30px, #829fee30 31px 32px, transparent 33px 49px);
  mask-image: linear-gradient(110deg, transparent 30%, black 100%);
  pointer-events: none;
}
.closing p { max-width: 45ch; color: var(--closing-muted); }
.closing-action {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  min-height: 48px;
  padding: 8px 16px;
  border-radius: 8px;
  background: #dce9ff;
  color: #122a51;
  font-weight: 730;
}
.closing-action:hover { background: #fff; }
.closing-action:focus-visible { outline-color: white; }
.landing-footer {
  margin-top: clamp(24px,5vw,64px);
  border-top: 1px solid var(--line);
  background: var(--card);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.25fr .85fr auto;
  align-items: start;
  gap: clamp(20px,4vw,56px);
  padding-block: clamp(26px,5vw,64px);
}
.footer-brand {
  width: min(100%,280px);
  margin-left: -6px;
}
.footer-nav,.footer-contact { display: grid; justify-items: start; }
.footer-nav a,.footer-bottom a,.footer-phone {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.footer-nav a { font-weight: 650; }
.footer-contact p { color: var(--muted); font-size: 14px; }
.footer-phone {
  font-size: clamp(17px,2.25vw,30px);
  font-weight: 730;
  letter-spacing: -.035em;
  white-space: nowrap;
}
.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-top: 1px solid var(--line);
  padding-block: 5px max(5px, env(safe-area-inset-bottom));
  color: var(--muted);
  font-size: 14px;
}
.footer-notice {
  display: grid;
  gap: 3px;
  padding-block: 8px;
}
.footer-notice p + p { font-size: 12px; }
.footer-bottom a { gap: 8px; }
.landing-footer a:hover { color: var(--accent); }

#journey-title,#assembly-title,#work-title {
  scroll-margin-block-start: max(0px, calc(25vh - .425em));
  scroll-margin-block-start: max(0px, calc(25dvh - .425em));
}
@media (max-width: 760px) {
  .footer-grid { grid-template-columns: 1fr auto; gap: 12px 20px; }
  .footer-brand { grid-column: 1 / -1; width: min(100%,220px); }
}
@media (max-width: 375px) {
  .footer-grid { grid-template-columns: 1fr; }
}

.project-dialog {
  width: min(560px, calc(100% - 24px));
  max-height: calc(100dvh - 24px);
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--card);
  color: var(--ink);
  overscroll-behavior: contain;
}
.project-dialog::backdrop { background: #07101bc9; }
.project-dialog .contact { border: 0; }
.project-dialog .contact h2 { padding-right: 48px; }
.project-dialog .form-fields { grid-template-columns: 1fr; }
.project-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--bg);
  font-size: 25px;
}
.project-topics { margin-top: 14px; }
.topic-options { display: flex; flex-wrap: wrap; gap: 6px; }
.topic-options label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 5px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg);
  font-size: 13px;
  cursor: pointer;
}
.topic-options label:has(:checked) { border-color: var(--accent); color: var(--accent); }
.topic-options input { margin: 0; accent-color: var(--accent); }
body:has(.project-dialog[open]) { overflow: hidden; }

@media (max-width: 700px) {
  .journey-intro,.assembly,.scenario-body,.work-steps { grid-template-columns: 1fr; }
  .journey-intro,.assembly { gap: 13px; }
  .scenario-body { row-gap: 12px; }
  .dialogue { min-height: 174px; }
  .desk { align-self: auto; }
  .work-steps { gap: 15px; }
  .closing::before { opacity: .65; }
}