/* Codriver website. Deep navy, white, one lime accent; Archivo headings, Inter text. */
:root {
  --ink: #0a1220;
  --ink-2: #3a475a;
  --muted: #5b6677;
  --line: #e2e6ec;
  --soft: #f5f7fa;
  --night: #0a1220;
  --night-2: #13213a;
  --night-text: #a9b6c8;
  --accent: #c8f04b;
  --ok-bg: #dcf3e3;
  --ok-fg: #145a2e;
  --bad: #b3261e;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --display: "Archivo", system-ui, sans-serif;
  --body: "Inter", system-ui, sans-serif;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 124px;  }
body { margin: 0; background: #fff; color: var(--ink); font-family: var(--body); overflow-x: clip; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
img, svg { max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid #3e6fd8; outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.display { font-family: var(--display); }
.defs { position: absolute; width: 0; height: 0; }

/* ---------- Shared blocks ---------- */
.wrap { position: relative; max-width: 1240px; margin: 0 auto; padding: 104px 20px; }
.stack { display: flex; flex-direction: column; }
.section { position: relative; overflow: clip; }
.dark { background: var(--night); color: #fff; }
.soft { background: var(--soft); }
.white { background: #fff; }
.bg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.eyebrow { font-size: 13px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.dark .eyebrow { color: var(--night-text); }
.eyebrow.lime { color: var(--accent); }
.h2 { margin: 0; font-family: var(--display); font-weight: 900; font-size: clamp(30px, 4vw, 54px); line-height: 1.04; letter-spacing: -0.02em; }
.lead { margin: 0; font-size: 17px; line-height: 1.6; color: var(--ink-2); }
.dark .lead { color: var(--night-text); }
.head { display: flex; flex-direction: column; gap: 14px; }
.head.center { align-items: center; text-align: center; }
.chip-ai { flex: none; font-size: 10.5px; font-weight: 800; letter-spacing: 0.08em; padding: 3px 8px; border-radius: 999px; background: var(--ink); color: var(--accent); }
.chip-ai.lime { background: var(--accent); color: var(--ink); }
.ico { flex: none; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.tile-ico { flex: none; width: 44px; height: 44px; border-radius: 14px; background: var(--ink); color: var(--accent); display: flex; align-items: center; justify-content: center; }
.tile-ico .ico { width: 22px; height: 22px; }
.tile-ico.lime { background: var(--accent); color: var(--ink); }
.tile-ico.light { background: var(--soft); color: var(--ink); border: 1px solid var(--line); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 12px 24px; border-radius: 999px; font-weight: 700; font-size: 16px; text-decoration: none; border: none; cursor: pointer; transition: transform .2s var(--ease), box-shadow .2s ease, background-color .2s ease; }
.btn:hover { transform: translateY(-2px); }
.btn-lime { background: var(--accent); color: var(--ink); box-shadow: 0 10px 30px rgba(200, 240, 75, 0.25); }
.btn-dark { background: var(--ink); color: #fff; }
.btn-white { background: #fff; color: var(--ink); }
.btn-ghost { background: rgba(255, 255, 255, 0.05); color: #fff; border: 1px solid rgba(255, 255, 255, 0.24); }
.btn-line { background: #fff; color: var(--ink); border: 1px solid var(--ink); }
.btn-lg { font-size: 17px; padding: 17px 28px; }

/* ---------- Scroll reveals (main.js marks [data-in]). Hidden only when JavaScript runs. ---------- */
.js [data-reveal] { opacity: 0; transition: opacity .9s var(--ease), transform .9s var(--ease), clip-path 1s var(--ease); transition-delay: var(--delay, 0s); }
.js [data-reveal="up"] { transform: translateY(28px); }
.js [data-reveal="left"] { transform: translateX(-28px); }
.js [data-reveal="right"] { transform: translateX(28px); }
.js [data-reveal="zoom"] { transform: scale(0.96) translateY(16px); }
.js [data-reveal][data-in] { opacity: 1; transform: none; }

/* ---------- Motion ---------- */
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
.float { animation: float 6s ease-in-out infinite; }
.float-2 { animation: float 7.5s ease-in-out infinite; animation-delay: -3s; }
@keyframes marquee { to { transform: translateX(-50%); } }
@keyframes orbit { to { transform: rotate(360deg); } }
.orbit { transform-box: fill-box; transform-origin: center; animation: orbit 90s linear infinite; }
.orbit-2 { transform-box: fill-box; transform-origin: center; animation: orbit 140s linear infinite reverse; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.rise { animation: rise .7s var(--ease) both; }
@keyframes spin { to { transform: rotate(360deg); } }
.spin { animation: spin .8s linear infinite; }
.wheel-spin { transform-box: fill-box; transform-origin: center; animation: spin .5s linear infinite; }
@keyframes bob { 0%, 80%, 100% { transform: translateY(0); opacity: .4; } 40% { transform: translateY(-4px); opacity: 1; } }
@keyframes scan { 0%, 100% { top: 6%; } 50% { top: 90%; } }
@keyframes caret { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes pulse { from { box-shadow: 0 0 0 0 rgba(200, 240, 75, .6); } to { box-shadow: 0 0 0 10px rgba(200, 240, 75, 0); } }
@keyframes draw { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }

/* ---------- Loader: the owner's logo, animated. Fades out by itself. ---------- */
.loader { position: fixed; inset: 0; z-index: 50; background: var(--night); display: flex; align-items: center; justify-content: center; pointer-events: none; animation: loader-out .5s ease 1.9s forwards; }
@keyframes loader-out { to { opacity: 0; visibility: hidden; } }
.logo-anim { height: 96px; width: auto; max-width: 86vw; overflow: visible; }
.logo-anim .l { opacity: 0; transform-box: fill-box; transform-origin: center bottom; animation: lg-letter .6s cubic-bezier(.2, .8, .2, 1) forwards; animation-delay: calc(var(--i) * 70ms); }
.logo-anim .dash { transform-box: fill-box; transform-origin: left center; transform: scaleX(0); animation: lg-dash .3s ease-out forwards; animation-delay: calc(.45s + var(--i) * 55ms); }
.logo-anim .car { animation: lg-car 1.1s cubic-bezier(.2, .8, .2, 1) .4s both; }
@keyframes lg-letter { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes lg-dash { to { transform: scaleX(1); } }
@keyframes lg-car { from { transform: translateX(-760px); opacity: 0; } 15% { opacity: 1; } to { transform: none; opacity: 1; } }

/* ---------- Header ---------- */
.header { position: sticky; top: 0; z-index: 30; background: rgba(10, 18, 32, .88); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid rgba(255, 255, 255, .08); }
.header-in { max-width: 1240px; margin: 0 auto; padding: 12px 20px; display: flex; align-items: center; gap: 20px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; margin-right: auto; }
.logo-box { width: 38px; height: 38px; flex: none; border: 1.5px dashed #8fa0b8; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 9px; color: #8fa0b8; }
.wordmark { font-family: var(--display); font-weight: 900; font-size: 21px; letter-spacing: .12em; color: #fff; }
.nav { display: flex; gap: 24px; }
.nav a { color: #c9d2de; text-decoration: none; font-weight: 500; font-size: 15px; padding: 10px 0; transition: color .2s ease; }
.nav a:hover { color: #fff; }
.header .btn { font-size: 15px; padding: 10px 20px; min-height: 44px; white-space: nowrap; }
.menu { position: relative; }
.menu > summary { list-style: none; cursor: pointer; width: 44px; height: 44px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .2); display: flex; align-items: center; justify-content: center; color: #fff; }
.menu > summary::-webkit-details-marker { display: none; }
.menu .nav { position: absolute; right: 0; top: 52px; min-width: 220px; flex-direction: column; gap: 0; padding: 10px; border-radius: 16px; background: var(--night-2); border: 1px solid rgba(255, 255, 255, .12); box-shadow: 0 20px 40px rgba(0, 0, 0, .4); }
.menu .nav a { padding: 12px; }
@media (min-width: 960px) { .menu { display: none; } }
@media (max-width: 959px) { .nav-desk { display: none; } }
@media (max-width: 420px) { .header-in { gap: 10px; } .header .btn { padding: 10px 14px; font-size: 14px; } .wordmark { font-size: 17px; letter-spacing: .08em; } .logo-box { width: 32px; height: 32px; } }

/* ---------- Hero ---------- */
.hero-in { position: relative; max-width: 1240px; margin: 0 auto; padding: 88px 20px 8px; display: flex; flex-wrap: wrap; gap: 56px; align-items: center; }
.hero { display: flex; flex-direction: column; }
.hero .hero-in { order: 1; width: 100%; }
.hero .lot { order: 2; }
.lot { position: relative; display: block; width: min(100%, 760px); height: auto; margin-top: -10px; }
.hero-copy { flex: 1 1 460px; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.pill { align-self: flex-start; display: flex; align-items: center; gap: 8px; border: 1px solid rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .05); color: #c9d2de; font-weight: 500; font-size: 13px; padding: 7px 14px; border-radius: 999px; }
.pill i { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.h1 { margin: 0; font-family: var(--display); font-weight: 900; font-size: clamp(40px, 6.2vw, 84px); line-height: .98; letter-spacing: -.025em; }
.h1 span { color: var(--accent); }
.hero-text { margin: 0; font-size: 19px; line-height: 1.6; color: var(--night-text); max-width: 32em; }
.row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.hero-art { flex: 1 1 460px; min-width: 0; position: relative; padding-bottom: 70px; }
.mock { background: rgba(255, 255, 255, .97); color: var(--ink); border-radius: 20px; overflow: hidden; box-shadow: 0 40px 80px rgba(0, 0, 0, .45); }
.mock-bar { display: flex; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid #e8ecf1; font-size: 14px; font-weight: 600; }
.mock-bar small { font-size: 12px; font-weight: 400; color: var(--muted); }
.digest { padding: 20px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.stat { background: var(--soft); border-radius: 14px; padding: 16px; display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }
.stat b { font-family: var(--display); font-weight: 800; font-size: 26px; color: var(--ink); }
.stat.full { grid-column: 1 / -1; gap: 10px; }
.toast { position: absolute; left: 0; bottom: 0; width: min(280px, 80%); background: var(--night-2); color: #fff; border: 1px solid rgba(255, 255, 255, .12); border-radius: 18px; padding: 16px; display: flex; gap: 12px; align-items: center; box-shadow: 0 24px 50px rgba(0, 0, 0, .5); font-size: 14px; font-weight: 600; }
.toast small { display: block; font-size: 12px; font-weight: 400; color: var(--night-text); margin-top: 2px; }
.toast .tile-ico { width: 40px; height: 40px; border-radius: 12px; }

/* ---------- Marquee ---------- */
.marquee { background: var(--accent); color: var(--ink); overflow: clip; border-bottom: 1px solid var(--ink); }
.marquee-track { display: flex; width: max-content; padding: 20px 0; animation: marquee 45s linear infinite; }
.marquee-track span { display: flex; align-items: center; gap: 26px; padding-right: 26px; font-family: var(--display); font-weight: 800; font-size: 24px; white-space: nowrap; }
.marquee-track svg { width: 14px; height: 14px; fill: var(--ink); }

/* ---------- Cards and grids ---------- */
.grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.card { background: #fff; border: 1px solid var(--line); border-radius: 22px; padding: 28px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.lift { transition: box-shadow .3s ease, translate .3s var(--ease); }
.lift:hover { translate: 0 -4px; box-shadow: 0 18px 40px rgba(10, 18, 32, .08); }
.card p { margin: 0; }
.card-title { font-family: var(--display); font-weight: 800; font-size: 22px; line-height: 1.25; }
.card-text { font-size: 16px; line-height: 1.6; color: var(--ink-2); }
.problem { background: rgba(255, 255, 255, .92); backdrop-filter: blur(6px); }
.problem-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.outline-num { font-family: var(--display); font-weight: 900; font-size: 44px; line-height: 1; color: transparent; -webkit-text-stroke: 1.5px var(--ink); }
.problem svg { width: 140px; height: 90px; flex: none; }

/* Bento */
.bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.big { grid-column: span 2; grid-row: span 2; background: var(--soft); }
.wide { grid-column: span 2; }
@media (max-width: 1000px) { .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .bento { grid-template-columns: minmax(0, 1fr); } .big, .wide { grid-column: auto; grid-row: auto; } }
.tile-head { display: flex; align-items: center; gap: 12px; }
.tile h3 { margin: 0; font-family: var(--display); font-weight: 800; font-size: 20px; line-height: 1.2; }
.big h3 { font-size: 30px; line-height: 1.12; }
.wide h3 { font-size: 28px; line-height: 1.15; }
.bullets { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.bullets li { display: flex; gap: 10px; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.bullets li::before { content: ""; flex: none; width: 6px; height: 6px; margin-top: 8px; border-radius: 50%; background: var(--ink); }
.list-mock { background: #fff; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; margin-top: auto; }
.list-mock .mock-bar { padding: 14px 18px; border-color: #eef1f5; }
.call { display: flex; align-items: center; gap: 14px; padding: 13px 18px; border-bottom: 1px solid #eef1f5; }
.call:last-child { border-bottom: none; }
.num { width: 28px; height: 28px; flex: none; border-radius: 50%; background: var(--ink); color: #fff; font-size: 12px; font-weight: 600; display: flex; align-items: center; justify-content: center; }
.call-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-weight: 600; font-size: 15px; }
.call-text small { font-size: 13px; font-weight: 400; color: var(--muted); }
.tag { flex: none; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px; }
.tag.hot { background: #fde2d8; color: #8a2a0a; } .tag.warm { background: #fff1c7; color: #6b4a00; } .tag.ok { background: #dcf3e3; color: #145a2e; } .tag.info { background: #e3ebfa; color: #1d3f8a; }
.copilot { position: relative; background: var(--night); color: #fff; border: none; overflow: clip; }
.copilot > * { position: relative; }
.copilot .bg { position: absolute; }
.bubble { max-width: 85%; padding: 11px 14px; font-size: 14px; line-height: 1.5; }
.bubble.me { align-self: flex-end; background: var(--accent); color: var(--ink); border-radius: 16px 16px 4px 16px; font-weight: 500; }
.bubble.bot { align-self: flex-start; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .12); border-radius: 16px 16px 16px 4px; color: #e3e9f1; }
.note { margin: 0; font-size: 12px; color: var(--muted); }

/* ---------- Growth showcase ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; background: #fff; border: 1px solid var(--line); padding: 8px 14px; border-radius: 999px; }
.chip i { width: 8px; height: 8px; border-radius: 50%; }
.dark .chip { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .14); font-weight: 600; }
.dark .chip .ico { color: var(--accent); width: 16px; height: 16px; stroke-width: 2.4; }
.mark { background: linear-gradient(transparent 62%, var(--accent) 62%); }
.tabs { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 4px; max-width: 760px; box-shadow: 0 10px 30px rgba(10, 18, 32, .06); }
.tabs-pill { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(33.3333% - 8px); border-radius: 999px; background: var(--ink); box-shadow: 0 8px 20px rgba(10, 18, 32, .25); transition: left .45s var(--ease); }
.tab { position: relative; z-index: 1; font-size: 15px; font-weight: 700; min-height: 50px; padding: 8px 10px; border: none; border-radius: 999px; background: transparent; cursor: pointer; color: var(--ink); transition: color .35s ease; }
.tab[aria-selected="true"] { color: #fff; }
@media (max-width: 520px) { .tab { font-size: 13px; } }
.showcase { display: flex; flex-wrap: wrap; flex-direction: row-reverse; gap: 24px; align-items: flex-start; }
.spot-col { flex: 1 1 540px; min-width: 0; }
@media (min-width: 1000px) { .spot-col { position: sticky; top: 92px; } }
.spot { position: relative; overflow: clip; background: var(--night); color: #fff; border-radius: 28px; padding: clamp(20px, 3vw, 32px); display: flex; flex-direction: column; gap: 20px; box-shadow: 0 40px 80px rgba(10, 18, 32, .28); }
.spot > * { position: relative; }
.spot .spot-rings { position: absolute; right: -160px; top: -160px; width: 480px; height: 480px; pointer-events: none; }
.spot-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.spot-pos { font-family: var(--display); font-weight: 800; font-size: 14px; color: #8fa0b8; margin-right: 4px; }
.where { font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .2); color: #c9d2de; }
.tour-btn { margin-left: auto; display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; min-height: 40px; padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .06); color: #fff; cursor: pointer; }
.tour-btn svg { width: 14px; height: 14px; fill: #fff; }
.progress { height: 3px; border-radius: 999px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.progress i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .75s linear; }
.spot h3 { margin: 0; font-family: var(--display); font-weight: 900; font-size: clamp(24px, 3vw, 36px); line-height: 1.08; }
.spot-text { margin: 8px 0 0; font-size: 16px; line-height: 1.6; color: #c9d2de; }
.stage { background: var(--soft); color: var(--ink); border-radius: 20px; min-height: 290px; overflow: hidden; }
.stage-bar { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--line); background: #fff; }
.stage-bar .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); animation: pulse 1.6s ease-out infinite; }
.stage-bar .eyebrow { font-size: 12px; }
.stage-bar small { margin-left: auto; font-size: 12px; color: var(--muted); }
.how { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.how div { display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: 16px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); font-size: 13.5px; line-height: 1.5; color: #e3e9f1; }
.how b { width: 26px; height: 26px; border-radius: 8px; background: var(--accent); color: var(--ink); font-family: var(--display); font-weight: 900; font-size: 13px; display: flex; align-items: center; justify-content: center; }
.why { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 16px; background: rgba(200, 240, 75, .1); font-size: 14.5px; line-height: 1.5; }
.why .ico { color: var(--accent); stroke-width: 2; margin-top: 1px; }
.why strong { color: var(--accent); }
.feature-list { flex: 1 1 360px; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.lane-intro { margin: 0 0 6px; font-family: var(--display); font-weight: 800; font-size: 20px; line-height: 1.3; }
.frow { position: relative; overflow: hidden; display: flex; align-items: center; gap: 14px; width: 100%; color: var(--ink); cursor: pointer; min-height: 64px; padding: 12px 14px; border-radius: 18px; border: 1.5px solid var(--line); background: rgba(255, 255, 255, .65); text-align: left; transition: translate .25s var(--ease), box-shadow .25s ease, background-color .25s ease, border-color .25s ease; }
.frow:hover { translate: 4px 0; box-shadow: 0 10px 24px rgba(10, 18, 32, .08); }
.frow[aria-pressed="true"] { border-color: var(--ink); background: #fff; box-shadow: 0 14px 30px rgba(10, 18, 32, .12); }
.frow .tile-ico { width: 40px; height: 40px; border-radius: 12px; transition: background-color .3s ease, color .3s ease; }
.frow[aria-pressed="true"] .tile-ico { background: var(--accent); color: var(--ink); }
.frow-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-weight: 700; font-size: 15px; line-height: 1.3; }
.frow-text small { font-size: 12.5px; font-weight: 400; color: var(--muted); }
.frow .bar { position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: var(--ink); transition: width .75s linear; }

/* Live demos (built by main.js) */
.demo { padding: 18px; display: flex; flex-direction: column; gap: 10px; }
.in { transition: opacity .45s ease, transform .45s var(--ease); }
.hide { opacity: 0; transform: translateY(10px); }
.hide.from-left { transform: translateX(-12px); }
.hide.from-right { transform: translateX(8px); }
.hide.from-top { transform: translateY(-12px) scale(.97); }
.hide.pop { transform: translateY(8px) scale(.9); }
.msg { max-width: 85%; padding: 10px 14px; font-size: 14px; line-height: 1.5; }
.msg.me { align-self: flex-end; background: var(--accent); border-radius: 16px 16px 4px 16px; }
.msg.bot { align-self: flex-start; background: #fff; border: 1px solid var(--line); border-radius: 16px 16px 16px 4px; }
.typing { align-self: flex-start; display: flex; gap: 5px; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; }
.typing span { width: 7px; height: 7px; border-radius: 50%; background: #8fa0b8; animation: bob 1s ease-in-out infinite; }
.typing span:nth-child(2) { animation-delay: .15s; } .typing span:nth-child(3) { animation-delay: .3s; }
.box { background: #fff; border: 1px solid var(--line); border-radius: 12px; }
.step { display: flex; align-items: center; gap: 12px; padding: 10px 12px; font-weight: 600; font-size: 15px; }
.step .tick { width: 26px; height: 26px; flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--line); transform: scale(.7); transition: background-color .4s ease, transform .4s cubic-bezier(.3, 1.6, .5, 1); }
.step .tick .ico { width: 14px; height: 14px; stroke-width: 3; }
.step.done .tick { background: var(--accent); transform: none; }
.track { height: 8px; border-radius: 999px; background: var(--line); overflow: hidden; }
.track i { display: block; height: 100%; border-radius: 999px; background: var(--ink); width: 0; transition: width .6s var(--ease); }
.lrow { display: flex; align-items: center; gap: 12px; padding: 11px 12px; font-weight: 600; font-size: 14.5px; }
.lrow .num { width: 26px; height: 26px; font-weight: 700; }
.lrow span:nth-child(2) { flex: 1 1 auto; min-width: 0; }
.scan { display: flex; gap: 16px; flex-wrap: wrap; flex-direction: row; }
.scan-doc { position: relative; flex: 0 0 120px; height: 150px; overflow: hidden; }
.scan-doc i { display: block; margin: 0 14px 8px; height: 6px; border-radius: 3px; background: var(--line); }
.scan-doc i:first-child { margin: 14px; height: 40px; border-radius: 8px; }
.scan-line { position: absolute; left: 0; right: 0; height: 3px; background: var(--accent); box-shadow: 0 0 14px 4px rgba(200, 240, 75, .6); animation: scan 2.4s ease-in-out infinite; }
.scan-rows { flex: 1 1 200px; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.srow { display: flex; justify-content: space-between; gap: 10px; padding: 9px 12px; border-radius: 10px; font-size: 13.5px; }
.srow span:first-child { color: var(--muted); } .srow span:last-child { font-weight: 600; }
.alert-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; box-shadow: 0 8px 18px rgba(10, 18, 32, .06); font-size: 14px; font-weight: 500; line-height: 1.4; }
.alert-row .tile-ico { width: 34px; height: 34px; border-radius: 10px; }
.alert-row .tile-ico .ico { width: 17px; height: 17px; }
.query { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 14px; background: #fff; border: 1.5px solid var(--ink); font-size: 15px; font-weight: 500; }
.query .ico { color: var(--muted); width: 18px; height: 18px; }
.query span { flex: 1 1 auto; min-width: 0; }
.caret { width: 2px; height: 18px; background: var(--ink); animation: caret 1s step-end infinite; flex: none; }
.qchip { font-size: 13px; font-weight: 700; padding: 8px 12px; border-radius: 999px; background: var(--ink); color: var(--accent); }
.paycard { width: 240px; max-width: 100%; align-self: center; border-radius: 22px; padding: 18px; display: flex; flex-direction: column; gap: 10px; text-align: center; box-shadow: 0 16px 30px rgba(10, 18, 32, .08); font-size: 12px; color: var(--muted); }
.paycard b { font-family: var(--display); font-weight: 900; font-size: 34px; color: var(--ink); }
.paybtn { display: block; font-weight: 700; font-size: 15px; padding: 12px; border-radius: 999px; background: var(--ink); color: #fff; transition: transform .2s ease, opacity .3s ease; }
.paybtn.press { transform: scale(.94); } .paybtn.dim { opacity: .35; }
.proc { transition: opacity .3s ease; opacity: 0; } .proc.on { opacity: 1; }
.paid { display: flex; align-items: center; justify-content: center; gap: 6px; font-weight: 700; font-size: 14px; color: var(--ok-fg); background: var(--ok-bg); padding: 8px; border-radius: 10px; opacity: 0; transform: scale(.8); transition: opacity .4s ease, transform .4s cubic-bezier(.3, 1.6, .5, 1); }
.paid.on { opacity: 1; transform: none; }
.paid .ico { width: 18px; height: 18px; stroke-width: 3; }
.gauge { align-items: center; padding: 20px; }
.gauge svg { width: 240px; height: 136px; }
.needle { transform-origin: 120px 120px; transition: transform 1.4s var(--ease); transform: rotate(-90deg); }
.arc { transition: stroke-dashoffset 1.4s var(--ease); }
.demo-label { font-weight: 600; font-size: 14px; text-align: center; }
.road-demo { position: relative; height: 70px; margin: 8px 0; }
.road-demo .asphalt { position: absolute; left: 0; right: 0; top: 40px; height: 22px; border-radius: 999px; background: var(--ink); }
.road-demo .lane { position: absolute; left: 12px; right: 12px; top: 50px; height: 2px; background: repeating-linear-gradient(90deg, var(--accent) 0 14px, transparent 14px 26px); }
.road-demo .goal { position: absolute; right: 0; top: 0; font-family: var(--display); font-weight: 900; font-size: 11px; background: var(--accent); padding: 4px 8px; border-radius: 6px; }
.road-demo .rcar { position: absolute; top: 22px; left: 0; transition: left 2.4s cubic-bezier(.4, 0, .2, 1); }
.road-demo .rcar svg { width: 72px; height: 26px; color: #fff; overflow: visible; }
.bars { display: flex; align-items: flex-end; gap: 10px; height: 120px; padding: 0 4px; border-bottom: 2px solid var(--line); }
.bars i { flex: 1 1 0; border-radius: 8px 8px 0 0; background: #b7c0cc; height: 3%; transition: height .9s var(--ease); }
.bars i.top { background: var(--ink); }
.figs { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; }
.fig { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; font-size: 12px; color: var(--muted); }
.fig b { font-family: var(--display); font-weight: 800; font-size: 18px; color: var(--ink); }

/* ---------- Customers ---------- */
.cust-in { position: relative; max-width: 1240px; margin: 0 auto; padding: 104px 20px clamp(210px, 21vw, 280px); display: flex; flex-wrap: wrap; gap: 56px; align-items: center; }
.cust-copy { flex: 1 1 440px; min-width: 0; display: flex; flex-direction: column; gap: 22px; }
.checks { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 14px; }
.checks li { display: flex; gap: 12px; font-size: 16px; line-height: 1.5; color: #c9d2de; }
.checks .ico { color: var(--accent); stroke-width: 2.2; margin-top: 2px; }
.phone-col { flex: 1 1 300px; min-width: 0; display: flex; justify-content: center; }
.phone { width: 290px; max-width: 100%; background: #1a2a44; border: 1px solid rgba(255, 255, 255, .14); border-radius: 40px; padding: 12px; box-shadow: 0 40px 80px rgba(0, 0, 0, .5); }
.phone-screen { border-radius: 30px; background: #fff; color: var(--ink); padding: 24px 18px; display: flex; flex-direction: column; gap: 14px; font-size: 12px; }
.phone-screen .hi { font-family: var(--display); font-weight: 800; font-size: 24px; }
.next-pay { background: var(--night); color: #fff; border-radius: 20px; padding: 18px; display: flex; flex-direction: column; gap: 6px; }
.next-pay small { color: var(--night-text); font-size: 12px; }
.next-pay b { font-family: var(--display); font-weight: 900; font-size: 32px; }
.next-pay span { margin-top: 8px; text-align: center; background: var(--accent); color: var(--ink); font-weight: 700; font-size: 15px; padding: 12px; border-radius: 999px; }
.title-road { background: var(--soft); border-radius: 16px; padding: 14px; display: flex; flex-direction: column; gap: 8px; color: var(--muted); }
.title-road b { font-size: 13px; color: var(--ink); }
.title-road .track i { width: 62%; }
.phone-btns { display: flex; gap: 8px; }
.phone-btns span { flex: 1; text-align: center; background: var(--soft); border-radius: 12px; padding: 10px 4px; font-weight: 600; }
.road-strip { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: clamp(200px, 20vw, 280px); pointer-events: none; }

/* ---------- Switching ---------- */
.steps-road { position: absolute; left: 0; right: 0; top: 18px; width: 100%; height: 40px; pointer-events: none; }
.steps { position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; }
.steps > div { display: flex; flex-direction: column; gap: 14px; }
.steps p { margin: 0; }
.steps svg { width: 76px; height: 76px; }

/* ---------- Security ---------- */
.sec-card { flex-direction: row; gap: 16px; align-items: flex-start; padding: 26px; }
.sec-card .tile-ico { width: 42px; height: 42px; border-radius: 12px; }
.sec-card b { display: block; font-size: 17px; font-weight: 600; margin-bottom: 6px; }
.sec-card span { font-size: 15px; line-height: 1.55; color: var(--ink-2); }

/* ---------- Pricing ---------- */
.white .chip .ico, .soft .chip .ico { width: 15px; height: 15px; stroke-width: 2.6; color: var(--ok-fg); }
.plans { width: 100%; max-width: 920px; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; align-items: stretch; margin-top: 8px; }
.plan { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 26px; border-radius: 22px; background: #fff; border: 1px solid var(--line); box-shadow: 0 12px 30px rgba(10, 18, 32, .06); transition: box-shadow .3s ease, translate .3s var(--ease); }
.plan:hover { translate: 0 -4px; box-shadow: 0 22px 44px rgba(10, 18, 32, .1); }
.plan h3 { margin: 0; font-family: var(--display); font-weight: 900; font-size: 22px; }
.plan-tag { margin: 0; font-size: 14px; line-height: 1.5; color: var(--muted); }
.price { display: flex; align-items: baseline; gap: 6px; margin-top: 4px; }
.price b { font-family: var(--display); font-weight: 900; font-size: 32px; letter-spacing: -.01em; }
.price span { font-size: 14px; color: var(--muted); }
.plan small { font-size: 12.5px; color: var(--muted); }
.plan .btn { width: 100%; margin: 6px 0 4px; }
.plan-items { margin: 0; padding: 14px 0 0; list-style: none; display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--line); }
.plan-items li { display: flex; gap: 10px; font-size: 14px; line-height: 1.45; color: var(--ink-2); }
.plan-items li span:first-child { flex: none; width: 20px; height: 20px; margin-top: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--soft); border: 1px solid var(--line); color: var(--ink); }
.plan-items .ico { width: 11px; height: 11px; stroke-width: 3.4; }
.plan-ai { background: var(--night); color: #fff; border: 2px solid var(--accent); box-shadow: 0 24px 50px rgba(10, 18, 32, .22); }
.plan-ai .plan-tag, .plan-ai .price span, .plan-ai small { color: var(--night-text); }
.plan-ai .plan-items { border-top-color: rgba(255, 255, 255, .12); }
.plan-ai .plan-items li { color: #e3e9f1; }
.plan-ai .plan-items li:not(:first-child) span:first-child { background: var(--accent); border-color: var(--accent); color: var(--ink); }
.plan-ai .plan-items li:first-child { font-weight: 600; color: #fff; }
.plan-ai .plan-items li:first-child span:first-child { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .2); color: #fff; }
/* AI service line at the foot of the plan: AI features are in the license; the dealer connects an AI service, or we do it for a fee. */
.plan-host { margin: 0; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .12); display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; line-height: 1.5; color: #e3e9f1; }
.plan-host-ico { flex: none; width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--accent); color: var(--ink); }
.plan-host-ico .ico { width: 12px; height: 12px; stroke-width: 2.6; }
.plan-host b { color: #fff; font-weight: 600; }
.plan-host em { font-style: normal; font-weight: 600; color: var(--accent); }
.plan-badge { position: absolute; top: -12px; left: 24px; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: 5px 12px; border-radius: 999px; background: var(--accent); color: var(--ink); }
.compare-btn svg { width: 14px; height: 14px; transition: transform .35s var(--ease); }
.compare-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.collapse { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .45s var(--ease), opacity .35s ease; }
.collapse.open { grid-template-rows: 1fr; opacity: 1; }
.collapse > div { overflow: hidden; }
.compare { width: 100%; max-width: 920px; }
.table-box { overflow-x: auto; border-radius: 18px; border: 1px solid var(--line); background: #fff; }
table { width: 100%; min-width: 480px; border-collapse: collapse; font-size: 14px; }
th, td { padding: 11px 16px; text-align: center; }
th:first-child, td:first-child { text-align: left; }
th { color: var(--muted); font-weight: 600; background: var(--soft); }
th:nth-child(2), th:nth-child(3) { color: var(--ink); font-weight: 700; }
tbody tr { border-top: 1px solid var(--line); }
td:first-child { color: var(--ink-2); }
td.y { color: var(--ink); font-weight: 700; } td.y.ai { color: var(--ok-fg); } td.n { color: #b7c0cc; font-weight: 700; }
.footnote { margin: 0; font-size: 12.5px; color: var(--muted); text-align: center; }
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- FAQ ---------- */
.faq-in { display: flex; flex-wrap: wrap; gap: 28px 56px; align-items: flex-start; padding-top: 72px; padding-bottom: 72px; }
.faq-intro { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.faq-intro .h2 { font-size: clamp(28px, 3vw, 40px); }
.faq-intro a { align-self: flex-start; font-weight: 700; font-size: 14px; padding: 6px 0; }
.faq-list { flex: 2 1 460px; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.qa { border-radius: 16px; border: 1px solid var(--line); background: var(--soft); transition: opacity .9s var(--ease), transform .9s var(--ease), background-color .3s ease, border-color .3s ease, box-shadow .3s ease; }
.qa.open { border-color: var(--ink); background: #fff; box-shadow: 0 12px 26px rgba(10, 18, 32, .08); }
.qa button { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 14px; min-height: 52px; padding: 10px 16px; border: none; background: transparent; font-weight: 600; font-size: 15.5px; text-align: left; cursor: pointer; }
.qa .plus { flex: none; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--ink); color: #fff; transition: transform .35s var(--ease), background-color .3s ease, color .3s ease; }
.qa.open .plus { transform: rotate(45deg); background: var(--accent); color: var(--ink); }
.qa .plus svg { width: 12px; height: 12px; }
.qa p { margin: 0; padding: 0 16px 14px; font-size: 14.5px; line-height: 1.55; color: var(--ink-2); }

/* ---------- Demo ---------- */
.demo-in { display: flex; flex-wrap: wrap; gap: 48px; align-items: flex-start; }
.demo-copy { flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.demo-copy .h2 { font-size: clamp(32px, 4.6vw, 62px); line-height: 1; }
.demo-copy .h2 span { color: var(--accent); }
.demo-copy p { margin: 0; font-size: 18px; line-height: 1.6; color: var(--night-text); }
.keys { width: min(280px, 100%); height: auto; margin-top: 8px; overflow: visible; }
.form-card { flex: 1 1 480px; min-width: 0; background: #fff; color: var(--ink); border-radius: 26px; padding: clamp(20px, 3vw, 36px); box-shadow: 0 40px 80px rgba(0, 0, 0, .4); }
.form { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.form[hidden] { display: none; }
.span { grid-column: 1 / -1; }
.field { min-width: 0; }
.fbox { position: relative; border-radius: 14px; background: var(--soft); border: 1.5px solid #d5dbe3; transition: border-color .25s ease, box-shadow .25s ease, background-color .25s ease; }
.fbox:focus-within { background: #fff; border-color: var(--ink); box-shadow: 0 0 0 4px rgba(200, 240, 75, .45); }
.field.bad .fbox { border-color: var(--bad); }
.fbox > .ico { position: absolute; left: 15px; top: 20px; width: 18px; height: 18px; color: #8fa0b8; transition: color .25s ease; }
.fbox:focus-within > .ico { color: var(--ink); }
.fbox input, .fbox textarea { width: 100%; min-height: 54px; padding: 24px 44px 8px 44px; border: none; background: transparent; font-size: 15px; color: var(--ink); outline: none; border-radius: 14px; }
.fbox textarea { min-height: 96px; padding: 26px 16px; resize: vertical; }
.fbox label { position: absolute; left: 44px; top: 19px; pointer-events: none; font-size: 15px; color: var(--muted); transition: top .2s ease, font-size .2s ease, color .2s ease; }
.fbox.msgbox label { left: 16px; }
.fbox:focus-within label, .fbox.filled label { top: 9px; font-size: 11.5px; font-weight: 600; color: var(--ink-2); }
.fbox .ok { position: absolute; right: 14px; top: 19px; width: 20px; height: 20px; opacity: 0; transform: scale(.6); transition: opacity .25s ease, transform .25s cubic-bezier(.3, 1.6, .5, 1); }
.field.valid .ok { opacity: 1; transform: none; }
.count { position: absolute; right: 14px; bottom: 8px; font-size: 12px; color: var(--muted); }
.err { display: none; align-items: center; gap: 6px; margin-top: 6px; font-size: 12.5px; font-weight: 600; color: var(--bad); }
.err .ico { width: 14px; height: 14px; stroke-width: 2.4; }
.field.bad .err, .err.show { display: flex; }
fieldset { border: none; margin: 0; padding: 0; min-width: 0; }
legend { padding: 0; margin-bottom: 8px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pills button { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; min-height: 42px; padding: 8px 14px; border-radius: 999px; cursor: pointer; border: 1.5px solid #d5dbe3; background: #fff; color: var(--ink); transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .15s ease; }
.pills button .ico { display: none; width: 13px; height: 13px; stroke-width: 3.2; color: var(--accent); }
.pills button[aria-checked="true"] { border-color: var(--ink); background: var(--ink); color: #fff; transform: scale(1.03); }
.pills button[aria-checked="true"] .ico { display: block; }
.switch { display: flex; align-items: flex-start; gap: 12px; padding: 4px 0; border: none; background: transparent; text-align: left; cursor: pointer; color: var(--ink-2); font-size: 14px; line-height: 1.5; }
.switch .trk { flex: none; position: relative; width: 46px; height: 26px; border-radius: 999px; margin-top: 1px; background: #d5dbe3; transition: background-color .25s ease, box-shadow .25s ease; }
.switch .knob { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: left .25s cubic-bezier(.3, 1.4, .5, 1), background-color .25s ease; }
.switch[aria-checked="true"] .trk { background: var(--ink); }
.switch[aria-checked="true"] .knob { left: 23px; background: var(--accent); }
.switch.bad .trk { box-shadow: 0 0 0 2px var(--bad); }
.submit { font-size: 15.5px; min-height: 50px; }
.submit .ico { color: var(--accent); width: 18px; height: 18px; stroke-width: 2.4; }
.submit .spin { display: none; width: 20px; height: 20px; }
.submit.sending .spin { display: block; }
.submit.sending .ico { display: none; }
.trust { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 13px; color: var(--muted); }
.trust .ico { width: 14px; height: 14px; stroke-width: 2; }
.done { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 18px 0; }
.done[hidden] { display: none; }
.done p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--ink-2); }
.done .display { font-weight: 900; font-size: 28px; color: var(--ink); }
.done .ring { stroke-dasharray: 100; animation: draw .7s ease-out both; }
.done .tickmark { stroke-dasharray: 100; animation: draw .45s ease-out .55s both; }

/* ---------- Footer ---------- */
.footer { background: #070d18; color: var(--night-text); border-top: 1px solid rgba(255, 255, 255, .08); }
.footer-in { max-width: 1240px; margin: 0 auto; padding: 64px 20px 28px; display: flex; flex-direction: column; gap: 44px; }
.footer-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 36px 32px; }
.footer-cols > div { display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.footer-cols p { margin: 0; line-height: 1.6; }
.footer-cols .head-sm { font-size: 12px; font-weight: 600; letter-spacing: .1em; color: #fff; text-transform: uppercase; }
.footer-cols a { color: var(--night-text); text-decoration: none; padding: 4px 0; }
.footer-cols a:hover { color: #fff; }
.footer-cols .btn { align-self: flex-start; font-size: 14px; padding: 11px 18px; min-height: 44px; color: var(--ink); }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .08); font-size: 13px; color: #8fa0b8; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .js [data-reveal] { opacity: 1; transform: none; clip-path: none; }
  .loader { display: none; }
}



/* ===================== Round 3 fixes (owner 2026-11-05) ===================== */

/* Logo: the owner's file, exactly as uploaded (dark version on the dark header, loader and footer) */
.logo { display: block; height: 48px; width: auto; }
.footer-brand .logo { height: 58px; }

/* Hero: the road is its own drawing at the bottom right; the lot sits further right on wide screens */
.hero-road { position: absolute; top: 0; right: 0; height: 100%; width: auto; aspect-ratio: 800 / 570; max-width: 62%; pointer-events: none; }
@media (max-width: 999px) { .hero-road { top: auto; bottom: 0; height: auto; width: 70%; max-width: none; } }
@media (min-width: 1000px) { .hero .lot { margin-left: 4%; width: min(50%, 820px); } }

/* Customers: the road to the title sits under the content, true proportions, soft ends */
.cust-in { padding-bottom: 8px; }
.road-strip { position: relative; left: auto; right: auto; bottom: auto; display: block; width: 100%; max-width: 1500px; height: auto; margin: 0 auto 8px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }

/* Security: copy and live control watch feed on the left, the six protections on the right */
.sec-in { display: flex; flex-wrap: wrap; gap: 40px; align-items: flex-start; }
.sec-copy { flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
@media (min-width: 1000px) { .sec-copy { position: sticky; top: 90px; } }
.audit { background: var(--night); color: #fff; border-radius: 20px; padding: 18px; box-shadow: 0 24px 50px rgba(10, 18, 32, .2); }
.audit-bar { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; padding-bottom: 12px; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.audit-bar .live { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); animation: pulse 1.6s ease-out infinite; }
.audit-bar small { margin-left: auto; font-weight: 500; font-size: 12px; color: var(--night-text); }
.audit-list { list-style: none; margin: 0; padding: 12px 0 0; display: flex; flex-direction: column; gap: 8px; }
.audit-list li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .08); }
.audit-list li.flag { border-color: rgba(255, 159, 107, .55); background: rgba(255, 159, 107, .08); }
.audit-ico { flex: none; width: 32px; height: 32px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, .08); color: #c9d2de; }
.flag .audit-ico { background: #ff9f6b; color: var(--ink); }
.audit-ico.ok { background: var(--accent); color: var(--ink); }
.audit-ico .ico { width: 16px; height: 16px; stroke-width: 2.2; }
.audit-list li > span:nth-child(2) { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.audit-list b { font-size: 13.5px; font-weight: 600; }
.audit-list small { font-size: 12px; color: var(--night-text); }
.audit-list em { flex: none; font-style: normal; font-size: 11.5px; color: #8fa0b8; }
.audit-note { margin: 10px 0 0; font-size: 11px; color: #8fa0b8; }
.sec-grid { flex: 1.3 1 460px; min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 560px) { .sec-grid { grid-template-columns: minmax(0, 1fr); } }
.sec-item { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 20px; display: flex; flex-direction: column; gap: 8px; }
.sec-item .tile-ico { transition: background-color .3s ease, color .3s ease; }
.sec-item:hover .tile-ico { background: var(--accent); color: var(--ink); }
.sec-item b { margin-top: 6px; font-size: 16px; font-weight: 700; }
.sec-item p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--ink-2); }

/* Demo: bigger keys, compact form */
.demo-in { align-items: center; }
.keys { width: min(440px, 100%); align-self: center; margin-top: 6px; }
.form-card { flex: 1 1 440px; max-width: 560px; padding: 22px; margin-left: auto; margin-right: auto; }
.form { gap: 10px; }
.fbox input, .fbox textarea { min-height: 46px; padding: 19px 36px 5px 38px; font-size: 14px; }
.fbox textarea { min-height: 70px; padding: 22px 14px 18px; }
.fbox > .ico { left: 13px; top: 15px; width: 16px; height: 16px; }
.fbox label { left: 38px; top: 14px; font-size: 14px; }
.fbox.msgbox label { left: 14px; }
.fbox:focus-within label, .fbox.filled label { top: 6px; font-size: 10.5px; }
.fbox .ok { right: 12px; top: 13px; width: 18px; height: 18px; }
legend { margin-bottom: 6px; font-size: 12px; }
.pills { gap: 6px; }
.pills button { min-height: 34px; padding: 5px 12px; font-size: 13px; }
.switch { font-size: 13px; }
.submit { min-height: 46px; font-size: 15px; }
.trust { font-size: 12px; }

/* Footer: closing call to action, road line, columns with icons */
.footer-cta { background: #0c1626; border-bottom: 1px solid rgba(255, 255, 255, .06); }
.footer-cta-in { max-width: 1240px; margin: 0 auto; padding: 52px 20px 44px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; }
.footer-cta .h2 { color: #fff; font-size: clamp(24px, 2.6vw, 34px); }
.footer-cta .h2 span { color: var(--accent); }
.footer-cta p { margin: 8px 0 0; font-size: 15px; color: var(--night-text); }
.footer-road { display: block; width: 100%; height: 24px; }
.footer-in { max-width: 1240px; padding-top: 56px; }
.footer-cols { grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); }
@media (max-width: 860px) { .footer-cols { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); } }
.footer-cols nav { display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.footer-cols a { transition: color .2s ease, translate .2s ease; }
.footer-cols a:hover { translate: 3px 0; }
.footer-brand { gap: 14px; }
.footer-badges { display: flex; flex-wrap: wrap; gap: 8px; }
.footer-badges span { display: flex; align-items: center; gap: 6px; font-size: 12px; padding: 5px 10px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .12); color: #c9d2de; }
.footer-badges .ico { width: 13px; height: 13px; stroke-width: 2.6; color: var(--accent); }
.contact-line { display: flex; align-items: center; gap: 8px; }
.contact-line .ico { width: 16px; height: 16px; color: var(--accent); }
.to-top { display: inline-flex; align-items: center; gap: 6px; color: #c9d2de; text-decoration: none; font-weight: 600; }
.to-top .ico { width: 16px; height: 16px; }
.to-top:hover { color: var(--accent); }

/* ---------- Mockup proportions (owner 2026-11-05) ----------
   On screens 900px and wider the page is laid out at the mockup width (1440) and scaled as one picture to fit
   the screen (script in index.html), so every part keeps the mockup's proportions. Fixed mockup sizes here. */
@media (min-width: 900px) {
  .h1 { font-size: 84px; }
  .h2 { font-size: 54px; }
  .spot h3 { font-size: 36px; }
  .demo-copy .h2 { font-size: 62px; }
  .footer-cta .h2 { font-size: 40px; }
  .faq-intro .h2 { font-size: 44px; }
}

/* Footer: bigger text and logo (owner 2026-11-05) */
.footer-cols > div, .footer-cols nav { font-size: 16px; }
.footer-cols p { font-size: 17px; }
.footer-cols .head-sm { font-size: 13px; }
.footer-brand .logo { height: 84px; }
.footer-badges span { font-size: 14px; padding: 7px 12px; }
.footer-badges .ico { width: 15px; height: 15px; }
.contact-line .ico { width: 18px; height: 18px; }
.footer-bottom { font-size: 15px; }
.footer-cta p { font-size: 18px; }

/* ---------- Scale (owner 2026-11-05): mockup proportions at the size the owner accepted ----------
   Laptops and desktops: one fixed scale (script in the page head); the content area is wide so the page fills
   the screen. Parts with their own size limit are matched to it. */
@media (min-width: 1000px) {
  .wrap, .hero-in, .cust-in, .header-in, .footer-in, .footer-cta-in { max-width: 2240px; }
  .plans, .compare { max-width: 1400px; }
  .head[style*="max-width"] { max-width: 1100px !important; }
  .form-card { max-width: 780px; }
  .keys { width: min(640px, 100%); }
  .hero .lot { width: min(50%, 1250px); }
  .logo { height: 66px; }
  .footer-brand .logo { height: 112px; }
  .logo-anim { height: 127px; }
  .road-strip { max-width: 2200px; }
}

/* ---------- Readable text on laptops and desktops (owner 2026-11-05) ---------- */
@media (min-width: 1000px) {
  .nav a { font-size: 19px; }
  .btn { font-size: 19px; min-height: 58px; padding: 14px 28px; }
  .header .btn { font-size: 18px; min-height: 52px; }
  .eyebrow { font-size: 15px; }
  .lead { font-size: 22px; }
  .hero-text { font-size: 24px; }
  .pill { font-size: 16px; }
  .card-text { font-size: 20px; }
  .card-title { font-size: 26px; }
  .tile h3 { font-size: 24px; }
  .bullets li { font-size: 18px; }
  .call-text { font-size: 18px; } .call-text small { font-size: 15px; }
  .chip { font-size: 17px; }
  .frow-text { font-size: 18px; } .frow-text small { font-size: 15px; }
  .lane-intro { font-size: 24px; }
  .spot-text { font-size: 20px; }
  .how div { font-size: 17px; }
  .why { font-size: 18px; }
  .checks li { font-size: 20px; }
  .sec-item b { font-size: 21px; } .sec-item p { font-size: 18px; }
  .audit-bar { font-size: 17px; } .audit-list b { font-size: 17px; } .audit-list small { font-size: 15px; } .audit-list em { font-size: 14px; }
  .plan h3 { font-size: 28px; } .plan-tag { font-size: 18px; } .price b { font-size: 42px; } .price span, .plan small { font-size: 16px; }
  .plan-items li { font-size: 18px; } .plan-badge { font-size: 13px; }
  table { font-size: 18px; } .footnote { font-size: 15px; }
  .qa button { font-size: 20px; min-height: 64px; } .qa p { font-size: 19px; }
  .faq-intro .lead { font-size: 19px !important; } .faq-intro a { font-size: 18px; }
  .demo-copy p { font-size: 22px; }
  /* Form: two even columns, full-size advanced inputs */
  .form { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .fbox input, .fbox textarea { min-height: 62px; padding: 26px 44px 8px 50px; font-size: 19px; }
  .fbox textarea { min-height: 110px; padding: 30px 18px 22px; }
  .fbox > .ico { left: 17px; top: 21px; width: 20px; height: 20px; }
  .fbox label { left: 50px; top: 20px; font-size: 18px; }
  .fbox.msgbox label { left: 18px; }
  .fbox:focus-within label, .fbox.filled label { top: 8px; font-size: 13px; }
  .fbox .ok { top: 20px; width: 22px; height: 22px; }
  .count { font-size: 14px; }
  .err { font-size: 15px; }
  legend { font-size: 15px; margin-bottom: 8px; }
  .pills button { font-size: 16px; min-height: 44px; padding: 8px 16px; }
  .switch { font-size: 17px; }
  .submit { font-size: 20px; min-height: 60px; }
  .trust { font-size: 15px; }
  /* Footer */
  .footer-cols > div, .footer-cols nav { font-size: 21px; gap: 12px; }
  .footer-cols p { font-size: 22px; }
  .footer-cols .head-sm { font-size: 16px; }
  .footer-badges span { font-size: 17px; padding: 8px 14px; }
  .footer-bottom { font-size: 18px; }
  .footer-cta p { font-size: 22px; }
}

/* ---------- Text 25% larger than the drawings on laptops and desktops (owner 2026-11-05) ---------- */
@media (min-width: 1000px) {
  .h1 { font-size: 92px; }
  .h2 { font-size: 60px; }
  .spot h3 { font-size: 40px; }
  .demo-copy .h2 { font-size: 68px; }
  .footer-cta .h2 { font-size: 46px; }
  .faq-intro .h2 { font-size: 50px; }
  .nav a { font-size: 23px; }
  .btn { font-size: 23px; min-height: 66px; padding: 16px 32px; }
  .header .btn { font-size: 22px; min-height: 58px; }
  .eyebrow { font-size: 18px; }
  .lead { font-size: 27px; }
  .hero-text { font-size: 29px; }
  .pill { font-size: 20px; padding: 9px 18px; }
  .stat { font-size: 16px; } .stat b { font-size: 32px; }
  .mock-bar { font-size: 18px; } .mock-bar small { font-size: 15px; }
  .toast { font-size: 18px; } .toast small { font-size: 15px; }
  .marquee-track span { font-size: 28px; }
  .card-text { font-size: 24px; }
  .card-title { font-size: 31px; }
  .tile h3 { font-size: 29px; }
  .big h3 { font-size: 36px; }
  .wide h3 { font-size: 33px; }
  .bullets li { font-size: 22px; }
  .call-text { font-size: 21px; } .call-text small { font-size: 18px; }
  .tag { font-size: 15px; }
  .bubble { font-size: 19px; }
  .chip { font-size: 21px; }
  .tab { font-size: 20px; min-height: 60px; }
  .frow-text { font-size: 22px; } .frow-text small { font-size: 18px; }
  .chip-ai { font-size: 13px; }
  .where { font-size: 14px; }
  .tour-btn { font-size: 16px; }
  .lane-intro { font-size: 29px; }
  .spot-text { font-size: 24px; }
  .stage-bar small { font-size: 15px; }
  .msg, .step, .lrow, .srow, .alert-row, .query, .qchip, .demo-label { font-size: 19px; }
  .how div { font-size: 21px; }
  .why { font-size: 22px; }
  .checks li { font-size: 24px; }
  .card-title, .steps .card-title { font-size: 31px; }
  .sec-item b { font-size: 25px; } .sec-item p { font-size: 22px; }
  .audit-bar { font-size: 20px; } .audit-list b { font-size: 20px; } .audit-list small { font-size: 18px; } .audit-list em { font-size: 17px; }
  .plan h3 { font-size: 34px; } .plan-tag { font-size: 22px; } .price b { font-size: 52px; } .price span, .plan small { font-size: 19px; }
  .plan-items li { font-size: 22px; } .plan-badge { font-size: 15px; }
  table { font-size: 22px; } .footnote { font-size: 18px; }
  .qa button { font-size: 24px; min-height: 76px; } .qa p { font-size: 23px; }
  .faq-intro .lead { font-size: 23px !important; } .faq-intro a { font-size: 22px; }
  .demo-copy p { font-size: 27px; }
  .fbox input, .fbox textarea { min-height: 72px; padding: 30px 50px 10px 56px; font-size: 23px; }
  .fbox textarea { min-height: 130px; padding: 34px 20px 26px; }
  .fbox > .ico { left: 19px; top: 25px; width: 22px; height: 22px; }
  .fbox label { left: 56px; top: 23px; font-size: 22px; }
  .fbox.msgbox label { left: 20px; }
  .fbox:focus-within label, .fbox.filled label { top: 9px; font-size: 15px; }
  .fbox .ok { top: 24px; width: 24px; height: 24px; }
  .count { font-size: 16px; }
  .err { font-size: 18px; }
  legend { font-size: 18px; margin-bottom: 10px; }
  .pills button { font-size: 20px; min-height: 52px; padding: 10px 20px; }
  .switch { font-size: 21px; }
  .switch .trk { width: 56px; height: 32px; } .switch .knob { width: 26px; height: 26px; } .switch[aria-checked="true"] .knob { left: 27px; }
  .submit { font-size: 24px; min-height: 72px; }
  .trust { font-size: 18px; }
  .footer-cols > div, .footer-cols nav { font-size: 25px; }
  .footer-cols p { font-size: 26px; }
  .footer-cols .head-sm { font-size: 19px; }
  .footer-badges span { font-size: 20px; }
  .footer-bottom { font-size: 21px; }
  .footer-cta p { font-size: 26px; }
}

/* ---------- Text 10% larger again, footer included (owner 2026-11-05) ---------- */
@media (min-width: 1000px) {
  .h1 { font-size: 101px; }
  .h2 { font-size: 66px; }
  .spot h3 { font-size: 44px; }
  .demo-copy .h2 { font-size: 75px; }
  .footer-cta .h2 { font-size: 51px; }
  .faq-intro .h2 { font-size: 55px; }
  .nav a { font-size: 25px; }
  .btn { font-size: 25px; min-height: 73px; padding: 16px 32px; }
  .header .btn { font-size: 24px; min-height: 64px; }
  .eyebrow { font-size: 20px; }
  .lead { font-size: 30px; }
  .hero-text { font-size: 32px; }
  .pill { font-size: 22px; padding: 9px 18px; }
  .stat { font-size: 18px; } .stat b { font-size: 35px; }
  .mock-bar { font-size: 20px; } .mock-bar small { font-size: 17px; }
  .toast { font-size: 20px; } .toast small { font-size: 17px; }
  .marquee-track span { font-size: 31px; }
  .card-text { font-size: 26px; }
  .card-title { font-size: 34px; }
  .tile h3 { font-size: 32px; }
  .big h3 { font-size: 40px; }
  .wide h3 { font-size: 36px; }
  .bullets li { font-size: 24px; }
  .call-text { font-size: 23px; } .call-text small { font-size: 20px; }
  .tag { font-size: 17px; }
  .bubble { font-size: 21px; }
  .chip { font-size: 23px; }
  .tab { font-size: 22px; min-height: 66px; }
  .frow-text { font-size: 24px; } .frow-text small { font-size: 20px; }
  .chip-ai { font-size: 14px; }
  .where { font-size: 15px; }
  .tour-btn { font-size: 18px; }
  .lane-intro { font-size: 32px; }
  .spot-text { font-size: 26px; }
  .stage-bar small { font-size: 17px; }
  .msg, .step, .lrow, .srow, .alert-row, .query, .qchip, .demo-label { font-size: 21px; }
  .how div { font-size: 23px; }
  .why { font-size: 24px; }
  .checks li { font-size: 26px; }
  .card-title, .steps .card-title { font-size: 34px; }
  .sec-item b { font-size: 28px; } .sec-item p { font-size: 24px; }
  .audit-bar { font-size: 22px; } .audit-list b { font-size: 22px; } .audit-list small { font-size: 20px; } .audit-list em { font-size: 19px; }
  .plan h3 { font-size: 37px; } .plan-tag { font-size: 24px; } .price b { font-size: 57px; } .price span, .plan small { font-size: 21px; }
  .plan-items li { font-size: 24px; } .plan-badge { font-size: 17px; }
  table { font-size: 24px; } .footnote { font-size: 20px; }
  .qa button { font-size: 26px; min-height: 84px; } .qa p { font-size: 25px; }
  .faq-intro .lead { font-size: 25px !important; } .faq-intro a { font-size: 24px; }
  .demo-copy p { font-size: 30px; }
  .fbox input, .fbox textarea { min-height: 79px; padding: 30px 50px 10px 56px; font-size: 25px; }
  .fbox textarea { min-height: 143px; padding: 34px 20px 26px; }
  .fbox > .ico { left: 19px; top: 25px; width: 22px; height: 22px; }
  .fbox label { left: 56px; top: 23px; font-size: 24px; }
  .fbox.msgbox label { left: 20px; }
  .fbox:focus-within label, .fbox.filled label { top: 9px; font-size: 17px; }
  .fbox .ok { top: 24px; width: 24px; height: 24px; }
  .count { font-size: 18px; }
  .err { font-size: 20px; }
  legend { font-size: 20px; margin-bottom: 10px; }
  .pills button { font-size: 22px; min-height: 57px; padding: 10px 20px; }
  .switch { font-size: 23px; }
  .switch .trk { width: 56px; height: 32px; } .switch .knob { width: 26px; height: 26px; } .switch[aria-checked="true"] .knob { left: 27px; }
  .submit { font-size: 26px; min-height: 79px; }
  .trust { font-size: 20px; }
  .footer-cols > div, .footer-cols nav { font-size: 28px; }
  .footer-cols p { font-size: 29px; }
  .footer-cols .head-sm { font-size: 21px; }
  .footer-badges span { font-size: 22px; }
  .footer-bottom { font-size: 23px; }
  .footer-cta p { font-size: 29px; }
  .footer-brand .logo { height: 123px; }
}

/* Hero lot (BUY HERE PAY HERE) centred in the first section (owner 2026-11-05) */
@media (min-width: 1000px) { .hero .lot { align-self: center; margin-left: 0; margin-right: 0; } }

/* ===================== Section review round (owner 2026-11-05) ===================== */

/* Gradients in the dark sections and dark cards: soft lime and blue glows over the navy */
.dark {
  background:
    radial-gradient(1100px 620px at 88% -8%, rgba(200, 240, 75, .14), transparent 62%),
    radial-gradient(900px 560px at -6% 108%, rgba(62, 111, 216, .22), transparent 62%),
    linear-gradient(180deg, #0a1220 0%, #0d1830 100%);
}
#top.dark {
  background:
    radial-gradient(900px 520px at 78% 8%, rgba(200, 240, 75, .12), transparent 60%),
    radial-gradient(1000px 700px at 10% 100%, rgba(62, 111, 216, .2), transparent 62%),
    linear-gradient(180deg, #0a1220 0%, #0c1629 100%);
}
.footer-cta { background: radial-gradient(800px 300px at 90% 0%, rgba(200, 240, 75, .14), transparent 65%), linear-gradient(90deg, #0c1626, #12223c); }
.footer { background: linear-gradient(180deg, #08101d 0%, #060b14 100%); }
.copilot, .spot, .audit { background: radial-gradient(600px 360px at 100% 0%, rgba(200, 240, 75, .12), transparent 60%), linear-gradient(160deg, #0f1a2e 0%, #0a1220 70%); }
.plan-ai { background: radial-gradient(520px 320px at 100% 0%, rgba(200, 240, 75, .16), transparent 62%), linear-gradient(165deg, #12203a 0%, #0a1220 75%); }

/* Live demo step rows: tick and text always side by side */
.demo .step { display: flex !important; flex-direction: row !important; align-items: center; }

/* Pricing animation: list items cascade in, AI card breathes, badge shine, compare rows slide in */
.plan .plan-items li { opacity: 0; transform: translateY(12px); transition: opacity .5s ease, transform .5s cubic-bezier(.2, .8, .2, 1); transition-delay: calc(.25s + var(--i, 0) * 70ms); }
.plan[data-in] .plan-items li, .no-motion .plan .plan-items li { opacity: 1; transform: none; }
@keyframes breathe { 0%, 100% { box-shadow: 0 24px 50px rgba(10, 18, 32, .22), 0 0 0 0 rgba(200, 240, 75, .0); } 50% { box-shadow: 0 30px 60px rgba(10, 18, 32, .28), 0 0 0 8px rgba(200, 240, 75, .14); } }
.plan-ai[data-in] { animation: breathe 3.6s ease-in-out 1s infinite; }
.plan-badge { overflow: hidden; }
.plan-badge::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .7) 50%, transparent 70%); transform: translateX(-120%); animation: shine 3.2s ease-in-out 1.2s infinite; }
@keyframes shine { 0%, 60% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
.compare.open tbody tr { animation: row-in .45s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i, 0) * 45ms); }
@keyframes row-in { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: none; } }
.price b { background: linear-gradient(90deg, currentColor, currentColor); -webkit-background-clip: text; background-clip: text; }

/* Form: errors float under the field (no layout jump), selected pill keeps its size */
.field { position: relative; }
.field .err { position: absolute; left: 4px; top: 100%; margin-top: 3px; white-space: nowrap; }
.pills button[aria-checked="true"] { transform: none; }
.fbox input, .fbox textarea { box-sizing: border-box; }

@media (min-width: 1000px) {
  /* Form wider, copy column narrower */
  .demo-copy { flex: 1 1 560px; max-width: 980px; }
  .form-card { flex: 1 1 900px; max-width: 1180px; padding: 36px; }
  .form { row-gap: 34px; column-gap: 18px; }
  .err { font-size: 16px; }

  /* Icons and small parts scaled to the bigger text */
  .tile-ico { width: 60px; height: 60px; border-radius: 16px; }
  .tile-ico .ico { width: 28px; height: 28px; }
  .frow .tile-ico { width: 54px; height: 54px; border-radius: 14px; }
  .frow .tile-ico .ico { width: 26px; height: 26px; }
  .sec-item .tile-ico { width: 60px; height: 60px; }
  .bullets li::before { width: 8px; height: 8px; margin-top: .62em; }
  .checks .ico { width: 28px; height: 28px; margin-top: 2px; }
  .chip .ico, .white .chip .ico, .soft .chip .ico { width: 22px; height: 22px; }
  .chip i { width: 11px; height: 11px; }
  .plan-items li span:first-child { width: 30px; height: 30px; }
  .plan-items .ico { width: 15px; height: 15px; }
  .qa .plus { width: 40px; height: 40px; } .qa .plus svg { width: 16px; height: 16px; }
  .audit-ico { width: 44px; height: 44px; border-radius: 12px; } .audit-ico .ico { width: 22px; height: 22px; }
  .step .tick { width: 36px; height: 36px; } .step .tick .ico { width: 18px; height: 18px; }
  .lrow .num, .num { width: 36px; height: 36px; font-size: 16px; }
  .alert-row .tile-ico { width: 46px; height: 46px; }
  .contact-line .ico { width: 26px; height: 26px; }
  .copilot .card-text { font-size: 22px !important; }
  .note { font-size: 17px; }
  .stage-bar .eyebrow { font-size: 14px; }
  .spot-pos { font-size: 18px; }
  .chip-ai { font-size: 14px; padding: 4px 10px; }
  /* Client area phone mockup */
  .phone { width: 400px; border-radius: 52px; padding: 16px; }
  .phone-screen { border-radius: 40px; padding: 32px 24px; gap: 18px; font-size: 17px; }
  .phone-screen .hi { font-size: 34px; }
  .next-pay { padding: 24px; border-radius: 26px; } .next-pay small { font-size: 16px; } .next-pay b { font-size: 46px; } .next-pay span { font-size: 21px; padding: 16px; }
  .title-road b { font-size: 18px; } .title-road { font-size: 16px; padding: 18px; }
  .phone-btns span { font-size: 16px; padding: 14px 4px; }
  /* Hero mock card */
  .stat { font-size: 17px; } .stat b { font-size: 36px; }
  .mock-bar { font-size: 21px; padding: 20px 24px; } .mock-bar small { font-size: 17px; }
}

/* Header: glass effect (owner 2026-11-05) */
.header {
  background: linear-gradient(180deg, rgba(14, 24, 42, .62), rgba(10, 18, 32, .48));
  backdrop-filter: blur(20px) saturate(170%);
  -webkit-backdrop-filter: blur(20px) saturate(170%);
  border-bottom: 1px solid rgba(255, 255, 255, .12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 10px 30px rgba(0, 0, 0, .25);
}
.nav a { position: relative; }
.nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 2px; border-radius: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .25s ease; }
.nav a:hover::after { transform: scaleX(1); }

/* Buttons: one consistent shape and height, no wrapping, clear hover and press */
.btn { white-space: nowrap; line-height: 1; letter-spacing: .01em; border: 1.5px solid transparent; transition: transform .2s cubic-bezier(.2, .8, .2, 1), box-shadow .2s ease, background-color .2s ease, border-color .2s ease, color .2s ease; }
.btn:active { transform: translateY(0) scale(.98); }
.btn-lime { background: var(--accent); color: var(--ink); box-shadow: 0 8px 24px rgba(200, 240, 75, .28), inset 0 -2px 0 rgba(0, 0, 0, .08); }
.btn-lime:hover { background: #d4f56a; box-shadow: 0 12px 30px rgba(200, 240, 75, .4), inset 0 -2px 0 rgba(0, 0, 0, .08); }
.btn-ghost { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .28); color: #fff; backdrop-filter: blur(8px); }
.btn-ghost:hover { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .5); }
.btn-dark:hover { background: #16243c; }
.btn-line { border-color: var(--ink); }
.btn-line:hover { background: var(--ink); color: #fff; }
.btn-white { border-color: var(--line); }
@media (min-width: 1000px) {
  .btn { font-size: 22px; min-height: 64px; padding: 0 34px; }
  .btn-lg { font-size: 23px; min-height: 70px; padding: 0 38px; }
  .header .btn { font-size: 20px; min-height: 54px; padding: 0 28px; }
  .header-in { padding-top: 14px; padding-bottom: 14px; }
  .plan .btn { min-height: 64px; }
  .submit { min-height: 72px; }
}

/* Header: clear over the hero at the top, glass once the page scrolls (owner 2026-11-05) */
.header { transition: background .3s ease, border-color .3s ease, box-shadow .3s ease, backdrop-filter .3s ease; }
.header:not(.scrolled) { background: #0a1220; border-bottom-color: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
body { background: #ffffff; }

/* Captcha row: code image, new code button, input */
.captcha-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.captcha-img { display: block; height: 52px; width: auto; border-radius: 12px; border: 1.5px solid #d5dbe3; background: #f0f4f8; }
.captcha-new { flex: none; width: 46px; height: 46px; border-radius: 12px; border: 1.5px solid #d5dbe3; background: #fff; color: var(--ink); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background-color .2s ease, transform .3s ease; }
.captcha-new:hover { background: var(--soft); }
.captcha-new:active .ico { transform: rotate(-180deg); }
.captcha-new .ico { transition: transform .4s ease; }
.captcha-row .fbox { flex: 1 1 200px; min-width: 0; }
.captcha-row .fbox input { text-transform: uppercase; letter-spacing: .3em; }
@media (min-width: 1000px) {
  .captcha-img { height: 72px; border-radius: 14px; }
  .captcha-new { width: 64px; height: 64px; border-radius: 14px; }
  .captcha-new .ico { width: 28px; height: 28px; }
}

/* ---------- Buttons and footer, final sizing (owner 2026-11-05) ---------- */
@media (min-width: 1000px) {
  .btn { font-size: 28px; min-height: 78px; padding: 0 42px; gap: 12px; }
  .btn-lg { font-size: 30px; min-height: 84px; padding: 0 46px; }
  .header .btn { font-size: 24px; min-height: 62px; padding: 0 32px; }
  .plan .btn { min-height: 78px; }
  .compare-btn svg { width: 22px; height: 22px; }
  .submit { font-size: 28px; min-height: 84px; }
  .submit .ico, .submit .spin { width: 30px; height: 30px; }
  .captcha-img { height: 78px; }
  .captcha-new { width: 78px; height: 78px; }
  .captcha-new .ico { width: 32px; height: 32px; }
  .footer-cta .btn { font-size: 26px; min-height: 72px; }

  .footer-cols > div, .footer-cols nav, .footer-cols a, .contact-line { font-size: 31px; }
  .footer-cols p { font-size: 31px; line-height: 1.5; }
  .footer-cols .head-sm { font-size: 22px; letter-spacing: .12em; }
  .footer-cols nav, .footer-cols > div { gap: 14px; }
  .footer-badges { gap: 10px; }
  .footer-badges span { font-size: 23px; padding: 10px 18px; }
  .footer-badges .ico { width: 22px; height: 22px; }
  .contact-line { gap: 12px; }
  .contact-line .ico { width: 30px; height: 30px; }
  .footer-bottom, .to-top { font-size: 25px; }
  .to-top .ico { width: 26px; height: 26px; }
  .footer-cta p { font-size: 30px; }
}

/* Footer brand: smaller tagline, about paragraph (owner 2026-11-05) */
.footer-tag { font-weight: 600; color: #e3e9f1; }
.footer-about { color: var(--night-text); max-width: 36em; }
.footer-cols p.footer-tag { font-size: 16px; }
.footer-cols p.footer-about { font-size: 14px; line-height: 1.65; }
@media (min-width: 1000px) {
  .footer-cols p.footer-tag { font-size: 25px; line-height: 1.4; }
  .footer-cols p.footer-about { font-size: 22px; line-height: 1.65; }
}

/* Footer links: smaller, display font, animated underline (owner 2026-11-05) */
.footer-cols nav a, .to-top {
  align-self: flex-start;
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: .01em;
  color: #c9d2de;
  text-decoration: none;
  padding: 2px 0 6px;
  background-image: linear-gradient(var(--accent), var(--accent));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 2px;
  transition: background-size .35s cubic-bezier(.2, .8, .2, 1), color .2s ease, translate .25s ease;
}
.footer-cols nav a:hover, .footer-cols nav a:focus-visible, .to-top:hover { color: #fff; background-size: 100% 2px; translate: 4px 0; }
.footer-cols nav a { font-size: 15px; }
@media (min-width: 1000px) {
  .footer-cols nav a, .footer-cols a { font-size: 24px; }
  .contact-line { font-size: 24px; }
  .contact-line .ico { width: 26px; height: 26px; }
  .footer-cols nav { gap: 12px; }
  .to-top { font-size: 22px; }
}

/* Footer email link: same animated underline as the footer links */
.contact-line a { color: inherit; text-decoration: none; background-image: linear-gradient(var(--accent), var(--accent)); background-repeat: no-repeat; background-position: 0 100%; background-size: 0% 2px; padding-bottom: 4px; transition: background-size .35s cubic-bezier(.2, .8, .2, 1), color .2s ease; }
.contact-line a:hover, .contact-line a:focus-visible { color: #fff; background-size: 100% 2px; }

/* Footer: three columns after the Legal column was removed (owner 2026-11-05) */
.footer-cols { grid-template-columns: minmax(0, 1.8fr) repeat(2, minmax(0, 1fr)); }
@media (max-width: 860px) { .footer-cols { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); } }

/* Pricing: "Starting at" before the price (owner 2026-11-05) */
.price .from { font-style: normal; font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); align-self: center; margin-right: 4px; }
.plan-ai .price .from { color: var(--accent); }
@media (min-width: 1000px) { .price .from { font-size: 18px; } }

/* Problem cards (restored): drawings and text sized with the rest of the page */
@media (min-width: 1000px) {
  .problem svg { width: 200px; height: 128px; }
  .outline-num { font-size: 64px; }
}

/* Language menu (replaces the pill switcher): globe + code, glass panel with full names */
.lang-menu { position: relative; }
.lang-menu > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 6px; min-height: 40px; padding: 6px 12px; border-radius: 999px; color: #e3e9f1; font-weight: 700; font-size: 13px; letter-spacing: .04em; border: 1px solid rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .06); transition: background-color .2s ease, border-color .2s ease; }
.lang-menu > summary::-webkit-details-marker { display: none; }
.lang-menu > summary:hover, .lang-menu[open] > summary { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .32); }
.lang-menu > summary .ico { width: 17px; height: 17px; }
.lang-menu .lm-caret { width: 13px !important; height: 13px !important; transition: transform .25s ease; }
.lang-menu[open] .lm-caret { transform: rotate(180deg); }
.lang-list { position: absolute; top: calc(100% + 10px); inset-inline-end: 0; min-width: 210px; padding: 6px; border-radius: 16px; display: flex; flex-direction: column; gap: 2px; background: rgba(14, 24, 42, .92); backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%); border: 1px solid rgba(255, 255, 255, .14); box-shadow: 0 24px 50px rgba(0, 0, 0, .45); animation: lm-in .2s cubic-bezier(.2, .8, .2, 1); z-index: 40; }
@keyframes lm-in { from { opacity: 0; transform: translateY(-6px) scale(.98); } to { opacity: 1; transform: none; } }
.lang-list button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border: none; border-radius: 11px; background: transparent; color: #e3e9f1; font-size: 15px; font-weight: 600; text-align: start; cursor: pointer; transition: background-color .15s ease; }
.lang-list button:hover { background: rgba(255, 255, 255, .08); }
.lang-list button span { flex: 1 1 auto; }
.lang-list button em { font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: .06em; color: #8fa0b8; }
.lang-list .lm-check { width: 16px; height: 16px; color: var(--accent); stroke-width: 2.6; visibility: hidden; }
.lang-list button[aria-pressed="true"] { background: rgba(200, 240, 75, .1); }
.lang-list button[aria-pressed="true"] .lm-check { visibility: visible; }
@media (min-width: 1000px) {
  .lang-menu > summary { min-height: 54px; padding: 8px 18px; font-size: 19px; gap: 8px; }
  .lang-menu > summary .ico { width: 24px; height: 24px; }
  .lang-menu .lm-caret { width: 18px !important; height: 18px !important; }
  .lang-list { min-width: 290px; padding: 8px; border-radius: 20px; }
  .lang-list button { font-size: 21px; padding: 14px 16px; border-radius: 14px; }
  .lang-list button em { font-size: 15px; }
  .lang-list .lm-check { width: 22px; height: 22px; }
}

/* Phones: roomy header (logo full size, demo button lives in the hero), smaller feature strip */
@media (max-width: 560px) {
  .header .btn { display: none; }
  .header-in { gap: 10px; }
  .logo { height: 36px; min-width: 104px; }
  .marquee-track { padding: 12px 0; }
  .marquee-track span { font-size: 16px; gap: 14px; padding-right: 14px; }
  .marquee-track svg { width: 11px; height: 11px; }
}


/* Bar above the header linking back to the Coderisland site (Codriver is served at coderisland.com/codriver/). */
.parent-bar { background: linear-gradient(90deg, #0b2a33, #05090f 55%, #2a140c); border-bottom: 1px solid rgba(31, 181, 168, .35); font-size: 15px; }
.parent-bar-in { max-width: 1240px; margin: 0 auto; padding: 0 20px; min-height: 52px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.parent-link { display: inline-flex; align-items: center; gap: 10px; color: #ffffff; text-decoration: none; font-size: 16px; font-weight: 700; padding: 8px 0; transition: color .2s ease; }
.parent-link img { height: 26px; width: auto; display: block; }
.parent-link:hover { color: var(--accent); }
.parent-link .ico { width: 20px; height: 20px; transition: transform .2s ease; }
.parent-link:hover .ico { transform: translateX(-3px); }
.parent-note { color: #c9d4e3; font-weight: 500; }
@media (max-width: 560px) { .parent-note { display: none; } }
/* Laptops and desktops: the page is scaled (script in the head), so the bar uses the same enlarged sizes as the nav. */
@media (min-width: 1000px) {
  .parent-bar-in { max-width: 2240px; min-height: 84px; }
  .parent-link { font-size: 26px; gap: 14px; }
  .parent-link img { height: 44px; }
  .parent-link .ico { width: 30px; height: 30px; }
  .parent-note { font-size: 23px; }
}

/* Header Sign up button (coderisland.com signup): hidden on phones, where it is in the menu. */
.btn-signup { min-height: 40px; padding-inline: 16px; }
@media (max-width: 959px) { .btn-signup { display: none; } }

/* Pricing: one plan (owner 2026-11-09), centered, its list in two columns where there is room */
.plans-one { max-width: 760px; grid-template-columns: 1fr; }
.plans-one .plan-items { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); column-gap: 24px; }
.plans-one .plan-items li:first-child { grid-column: 1 / -1; }
@media (min-width: 1000px) { .plans-one { max-width: 1160px; } .plans-one .plan-items { grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); } }