/* selfdrivingstocks.com: automotive technology. Fog white, cool silver, graphite, one electric cyan-blue. */
:root {
  --fog: #f1f4f6;
  --silver: #dde3e8;
  --rule: #c3cdd6;
  --ink: #161c21;
  --body: #3b4751;
  --muted: #56636e;
  --cy: #12a5e8;
  --cy-ink: #006a9e;
  --pad: clamp(20px, 5vw, 40px);
  --sans: "Sora", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "Space Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
body {
  color: var(--body);
  font: 400 1rem/1.65 var(--sans);
  background: var(--fog);
}
h1, h2, h3, p, ol, dl, dd { margin: 0; }
ol { padding: 0; list-style: none; }
h1, h2, h3 { color: var(--ink); font-weight: 700; letter-spacing: -0.035em; }
a { color: inherit; }
a:focus-visible { outline: 3px solid var(--cy); outline-offset: 3px; }
.wrap { max-width: 1280px; margin-inline: auto; padding-inline: var(--pad); }
.lab, .status, .hint, .scene__hud, .kick, .by, .lanes__n, .spec dt, .deal__facts dt, .foot__c, .note__tag {
  font-family: var(--mono);
  font-size: 0.6875rem;
  line-height: 1.5;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-block: 14px; }
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  text-decoration: none;
  color: var(--ink);
}
.brand svg { flex: none; }
.nav__cta {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--ink);
  border: 1px solid var(--ink);
  border-radius: 10px;
  transition: background-color 0.15s, color 0.15s;
}
.nav__cta:hover { color: #fff; background: var(--ink); }

/* Hero */
.hero { padding-top: clamp(20px, 4vw, 56px); }
.status { display: flex; flex-wrap: wrap; gap: 6px; color: var(--muted); }
.status span { padding: 4px 9px; border: 1px solid var(--rule); border-radius: 6px; }
.status .status__tag { font-weight: 400; color: #06141c; background: var(--cy); border-color: var(--cy); }
.name {
  margin-top: clamp(16px, 2.4vw, 28px);
  /* Three stacked words on phones; one line from 720px. */
  font-size: clamp(2.5rem, calc((100vw - 2 * var(--pad)) / 5.9), 6rem);
  line-height: 0.98;
  letter-spacing: -0.05em;
  white-space: nowrap;
}
.name span { display: block; }
.name b { font-weight: 700; color: #0a8fd4; }
.hero__row { display: grid; gap: 24px; margin-top: clamp(20px, 3vw, 36px); }
.pitch { max-width: 33em; font-size: clamp(1.0625rem, 1.7vw, 1.3125rem); line-height: 1.5; color: var(--ink); }
.actions { display: flex; flex-wrap: wrap; gap: 10px; }
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 54px;
  padding: 0 22px;
  font-weight: 600;
  text-decoration: none;
  color: #fff;
  background: var(--ink);
  border: 1px solid var(--ink);
  border-radius: 10px;
  transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}
.btn svg { color: var(--cy); transition: transform 0.15s; }
.btn:hover { color: #06141c; background: var(--cy); border-color: var(--cy); }
.btn:hover svg { color: inherit; transform: translateX(3px); }
.btn--line { color: var(--ink); background: transparent; }
.hint { margin-top: 12px; letter-spacing: 0.02em; text-transform: none; color: var(--muted); }

/* Perception view: the road ahead, as the sensors see it. */
.scene { position: relative; margin-top: clamp(26px, 4vw, 44px); border-bottom: 1px solid var(--rule); }
.scene__svg { display: block; width: 100%; max-width: none; height: clamp(236px, 33.4vw, 620px); }
.scene__hud {
  position: absolute;
  inset: 0 var(--pad) auto;
  display: flex;
  justify-content: space-between;
  max-width: 1200px;
  margin-inline: auto;
  color: var(--muted);
}
.gr { fill: none; stroke: #ccd5dd; }
.hz { fill: none; stroke: #9eabb6; }
.ln { fill: #fff; }
.pts path, .pts--o, .pts--h { fill: none; stroke: var(--cy); stroke-linecap: round; }
/* Each ring is a dotted line: a near-zero dash with a round cap, repeated. The rings brighten in turn, like a scan moving outward. */
.pts path { stroke-dasharray: 0.01 15; opacity: 0.55; animation: scan 5s calc(var(--i) * 0.14s) ease-in-out infinite; }
@keyframes scan {
  14% { opacity: 1; }
  40% { opacity: 0.55; }
}
.pts--o { stroke-width: 2.4; opacity: 0.6; }
.pts--h { stroke: #0a8fd4; stroke-width: 2.2; }
.bx { fill: rgba(18, 165, 232, 0.1); stroke: #0a8fd4; stroke-width: 1.5; }
.bx--f { fill: none; stroke-width: 1; stroke-opacity: 0.45; }
.tx text { font: 400 21px var(--mono); fill: #075a86; }
.tx .d { fill: var(--muted); }

/* Sections */
.sect { padding-top: clamp(60px, 9vw, 120px); }
.sec { display: grid; gap: 12px; padding-top: 16px; border-top: 1px solid var(--rule); }
.lab { color: var(--cy-ink); }
h2 { max-width: 19em; font-size: clamp(1.625rem, 3.7vw, 2.625rem); line-height: 1.12; }

/* Mockup: a publication home page in a browser window. */
.win { margin-top: clamp(24px, 4vw, 44px); overflow: hidden; color: var(--ink); background: #fff; border: 1px solid var(--rule); border-radius: 16px; box-shadow: 0 40px 70px -50px rgba(22, 28, 33, 0.45); }
.win p { margin: 0; }
.win__bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: #e7ecf0; border-bottom: 1px solid var(--rule); }
.win__bar i { width: 9px; height: 9px; background: #bcc7d0; border-radius: 50%; }
.win__bar span { flex: 1; max-width: 22rem; margin-inline: 8px auto; padding: 3px 12px; font: 400 0.6875rem/1.6 var(--mono); color: var(--muted); background: #fff; border-radius: 6px; }
.pub { padding-inline: clamp(14px, 3vw, 32px); }
.pub__mast { display: flex; align-items: center; gap: 16px; padding-block: 14px; border-bottom: 1px solid var(--ink); }
.pub__logo { margin-right: auto; font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.04em; }
.pub__logo b { font-weight: 700; color: #0a8fd4; }
.pub__nav { display: none; gap: 22px; font-size: 0.8125rem; color: var(--muted); }
.pub__nav b { font-weight: 600; color: var(--ink); }
.pub__sub { padding: 6px 12px; font-size: 0.75rem; font-weight: 600; color: #fff; background: var(--ink); border-radius: 7px; }
.pub__grid { display: grid; gap: 4px; padding-block: 18px 6px; }
.lead__art { overflow: hidden; aspect-ratio: 16 / 9; border-radius: 10px; }
.lead__art svg { display: block; width: 100%; height: 100%; }
.kick { color: var(--cy-ink); }
.lead .kick { margin-top: 16px; }
.lead__h { margin-top: 6px !important; font-size: clamp(1.25rem, 2.6vw, 1.875rem); font-weight: 700; line-height: 1.16; letter-spacing: -0.035em; }
.skel { display: grid; gap: 7px; margin-top: 12px !important; }
.skel i { height: 8px; background: #e7ecf0; border-radius: 4px; }
.skel i:last-child { width: 58%; }
.by { margin-top: 14px !important; color: var(--muted); }
.story { padding-block: 16px; border-top: 1px solid var(--silver); }
.story__h { margin-top: 5px !important; font-size: 1.0625rem; font-weight: 600; line-height: 1.28; letter-spacing: -0.025em; }
.story--pod { display: none; gap: 14px; align-items: center; }
.story--pod svg { flex: none; }
.story--pod div { flex: 1; min-width: 0; }
.wave { height: 18px; margin-top: 10px !important; background: repeating-linear-gradient(90deg, #c3cdd6 0 2px, transparent 2px 5px); -webkit-mask-image: linear-gradient(90deg, #000 38%, rgba(0, 0, 0, 0.35) 38%); mask-image: linear-gradient(90deg, #000 38%, rgba(0, 0, 0, 0.35) 38%); border-radius: 2px; }
.dir { padding-block: 18px 16px; border-top: 1px solid var(--ink); }
.dir__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.dir__top b { font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.03em; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips i { padding: 3px 9px; font: 400 0.6875rem/1.5 var(--mono); color: var(--muted); border: 1px solid var(--rule); border-radius: 999px; }
.chips .on { color: #fff; background: var(--ink); border-color: var(--ink); }
.dir__table { margin-top: 12px; }
.dir__row { display: grid; grid-template-columns: 1.35fr 0.9fr 1.1fr; gap: 10px; align-items: center; padding-block: 10px; font-size: 0.8125rem; line-height: 1.3; border-top: 1px solid var(--silver); }
.dir__row span:first-child { font-weight: 600; }
.dir__row span:nth-child(2) { font: 400 0.6875rem var(--mono); color: var(--cy-ink); }
.dir__row span:last-child { color: var(--muted); }
.dir__row--h { padding-block: 0 8px; border-top: 0; }
.dir__row--h span { font: 400 0.625rem var(--mono) !important; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted) !important; }
.dir__note { margin-top: 4px !important; padding-top: 10px; font: 400 0.6875rem var(--mono); color: var(--muted); border-top: 1px solid var(--silver); }
.note { display: grid; gap: 8px; margin-top: 18px; }
.note p:last-child { max-width: 58em; font-size: 0.8125rem; line-height: 1.55; color: var(--muted); }
.note__tag { color: var(--ink); }
.note__tag::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; background: var(--cy); }

/* Use cases: three lanes of one road. */
.lanes {
  display: grid;
  margin-top: clamp(24px, 4vw, 44px);
  padding: 14px 0;
  background:
    linear-gradient(#fff, #fff) 22px 12px / calc(100% - 44px) 3px no-repeat,
    linear-gradient(#fff, #fff) 22px calc(100% - 12px) / calc(100% - 44px) 3px no-repeat,
    linear-gradient(180deg, #dfe5ea, #d3dbe2);
  border-radius: 20px;
}
.lanes li { position: relative; padding: 30px 26px 32px; }
.lanes li + li::before {
  content: "";
  position: absolute;
  inset: -2px 26px auto;
  height: 4px;
  background: repeating-linear-gradient(90deg, #fff 0 26px, transparent 26px 48px);
}
.lanes__n { color: var(--cy-ink); }
.lanes h3 { margin-top: 10px; font-size: 1.375rem; line-height: 1.2; }
.lanes li > p:last-child { margin-top: 8px; max-width: 30em; }

/* Why this name */
.why { display: grid; gap: 32px; margin-top: clamp(24px, 4vw, 44px); }
.radar { position: relative; width: min(100%, 240px); aspect-ratio: 1; margin-inline: auto; overflow: hidden; background: #fff; border: 1px solid var(--rule); border-radius: 50%; }
.radar svg { position: relative; display: block; width: 100%; height: 100%; }
.radar__sweep { position: absolute; inset: 0; background: conic-gradient(from 0deg, transparent 0 290deg, rgba(18, 165, 232, 0.38) 360deg); animation: sweep 7s linear infinite; }
@keyframes sweep {
  to { transform: rotate(360deg); }
}
.radar__tx text { font: 400 10px var(--mono); fill: var(--muted); }
.spec { border-top: 1.5px solid var(--ink); }
.spec div { display: grid; gap: 6px; padding-block: 20px; border-bottom: 1px solid var(--rule); }
.spec dt { color: var(--cy-ink); }
.spec dd { max-width: 36em; font-size: 1.0625rem; line-height: 1.55; color: var(--ink); }

/* Offer: a split panel, graphite on one side and the form on the other. */
.deal { display: grid; overflow: hidden; background: #fff; border: 1px solid var(--rule); border-radius: 22px; }
.deal__side { display: flex; flex-direction: column; padding: clamp(24px, 4.5vw, 48px) clamp(22px, 4.5vw, 48px) 0; color: #cfd8df; background: var(--ink); }
.deal__side .lab { color: #58c4f7; }
.deal__side h2 { margin-top: 12px; color: #fff; }
.deal__lead { max-width: 26em; margin-top: 14px; }
.deal__facts { display: grid; margin-top: 26px; border-top: 1px solid #323d46; }
.deal__facts div { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; padding-block: 12px; border-bottom: 1px solid #323d46; }
.deal__facts dt { color: #9aa7b2; }
.deal__facts dd { font-weight: 600; color: #fff; overflow-wrap: anywhere; text-align: right; }
.deal__art { display: block; width: 100%; max-width: 420px; margin: auto auto 0; padding-top: 28px; }
.deal__form { padding: clamp(22px, 4.5vw, 48px); }
.offer-form {
  --offer-fg: var(--ink);
  --offer-muted: var(--muted);
  --offer-field-bg: #f5f7f9;
  --offer-border: #b4c0ca;
  --offer-accent: var(--ink);
  --offer-accent-fg: #fff;
  --offer-error: #b83a0b;
  --offer-radius: 10px;
  --offer-gap: 18px;
}
.offer-label { font-size: 0.8125rem; letter-spacing: -0.01em; }
.offer-input { transition: border-color 0.15s, box-shadow 0.15s; }
.offer-input:focus-visible { outline: 0; background: #fff; border-color: var(--cy-ink); box-shadow: 0 0 0 3px rgba(18, 165, 232, 0.35); }
.offer-input[aria-invalid="true"] { background: #fff8f4; box-shadow: inset 0 -2px 0 var(--offer-error); }
.offer-amount__prefix { font-family: var(--mono); color: var(--ink); }
.offer-error { font-weight: 600; }
.offer-error--form { padding: 12px 14px; background: #fff3ec; border-left: 3px solid; border-radius: 0 8px 8px 0; }
.offer-submit, .offer-bin__btn { font-weight: 600; transition: background-color 0.15s, color 0.15s; }
.offer-submit { min-height: 56px; }
.offer-submit:hover, .offer-bin__btn:hover { color: #06141c; background: var(--cy); }
.offer-submit:focus-visible, .offer-bin__btn:focus-visible { outline: 3px solid var(--cy); }
.offer-submit[disabled] { color: #fff; background: var(--ink); }
.offer-bin { background: var(--fog); border-color: var(--rule); border-left: 3px solid var(--cy); border-radius: 0 10px 10px 0; }
.offer-bin__label, .offer-or { font: 400 0.6875rem var(--mono); letter-spacing: 0.08em; text-transform: uppercase; }
.offer-bin__price { font-size: 1.625rem; font-weight: 700; letter-spacing: -0.04em; }
.offer-success { padding: 8px 0; }
.offer-success::before {
  content: "Received";
  display: inline-block;
  margin-bottom: 18px;
  padding: 4px 10px;
  font: 400 0.6875rem/1.5 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #06141c;
  background: var(--cy);
  border-radius: 6px;
}
.offer-success__title { font-size: 1.875rem; font-weight: 700; letter-spacing: -0.04em; }
.offer-success__body { color: var(--body); }
.offer-success__body strong { font-weight: 600; color: var(--ink); }

.foot { display: grid; gap: 10px; margin-top: clamp(56px, 8vw, 104px); padding-block: 26px 40px; font-size: 0.8125rem; line-height: 1.55; color: var(--muted); border-top: 1px solid var(--rule); }
.foot__disc { max-width: 62em; }

@media (min-width: 720px) {
  .name { font-size: clamp(3rem, calc((100vw - 2 * var(--pad)) / 11.1), 6.9rem); }
  .name span { display: inline; }
  .tx text { font-size: 19px; }
  .pub__nav { display: flex; }
  .story--pod { display: flex; }
  .radar { width: 240px; }
  .pub__grid { grid-template-columns: 1.3fr 1fr; gap: 36px; padding-block: 24px 20px; }
  .story:first-child { padding-top: 0; border-top: 0; }
  .dir__row { font-size: 0.875rem; }
  .lanes { grid-template-columns: repeat(3, 1fr); padding: 0 14px; background-position: 12px 22px, calc(100% - 12px) 22px, 0 0; background-size: 3px calc(100% - 44px), 3px calc(100% - 44px), auto; }
  .lanes li { padding: 40px 28px 44px; }
  .lanes li + li::before { inset: 26px auto 26px -2px; width: 4px; height: auto; background: repeating-linear-gradient(180deg, #fff 0 26px, transparent 26px 48px); }
  .why { grid-template-columns: 240px 1fr; gap: clamp(32px, 6vw, 96px); align-items: center; }
}
@media (min-width: 940px) {
  .hero__row { grid-template-columns: 1fr auto; gap: 48px; align-items: end; }
  .hero__cta { justify-self: end; }
  .tx text { font-size: 16px; }
  .sec { grid-template-columns: 12rem 1fr; gap: 24px; align-items: baseline; }
  .deal { grid-template-columns: 0.85fr 1.15fr; }
}
@media (min-width: 1200px) {
  .tx text { font-size: 13.5px; }
  .why { grid-template-columns: 300px 1fr; }
  .radar { width: 300px; }
  .spec div { grid-template-columns: 12.5rem 1fr; gap: 20px; align-items: baseline; }
}