/* =========================================================
   Wait-List Landing — styles (CarOnSale design family)
   Tokens from colors_and_type.css (Roboto, COS yellow/black)
   ========================================================= */
:root{
  --ink:#0B1220;          /* deep near-black for dark sections */
  --ink-soft:#1F2A44;     /* heading on light */
  --body:#4B5563;         /* body on light */
  --amber:var(--cos-yellow-500);   /* #FCC024 */
  --amber-d:var(--cos-yellow-600); /* #EBAA00 — amber text on white */
  --hl:#FFF6E0;           /* highlight box bg */
  --card:#F6F8FA;         /* feature card bg */
  --line:#E6E6E6;
  --line-d:#243149;       /* dark-section hairline */
  --maxw:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--cos-font-sans);color:var(--ink-soft);background:#fff;-webkit-font-smoothing:antialiased}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px}
section{position:relative}
em.acc{font-style:italic;color:var(--amber-d)}
.dark em.acc{color:var(--amber)}

/* ---------- shared type ---------- */
.eyebrow{font-weight:600;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--amber-d);margin:0}
.dark .eyebrow{color:var(--amber)}
h1,h2,h3{margin:0;letter-spacing:-0.02em;color:var(--ink-soft)}
/* headline-font tweak: opt into Poppins (COS refresh display) */
html[data-head="poppins"] h1,
html[data-head="poppins"] h2,
html[data-head="poppins"] h3,
html[data-head="poppins"] .h2,
html[data-head="poppins"] .price,
html[data-head="poppins"] .plan .price,
html[data-head="poppins"] .wm-name{font-family:var(--cos-font-display);letter-spacing:-0.03em}
.dark h1,.dark h2,.dark h3{color:#fff}
.h2{font-weight:700;font-size:40px;line-height:1.1}
.lead{font-size:18px;line-height:1.55;color:var(--body)}
.dark .lead{color:#aeb6c4}

/* ---------- brand logo ---------- */
.wm{display:inline-flex;align-items:center;gap:10px;text-decoration:none}
.wm-mark{width:40px;height:40px;flex:0 0 auto;display:block}
.wm.lg .wm-mark{width:64px;height:64px}

/* ---------- scarcity indicator (live remaining slots) ---------- */
.scarcity{display:none;align-items:center;gap:9px;width:fit-content;margin:0 0 20px;
  font-size:13px;font-weight:700;letter-spacing:.01em;padding:9px 15px;border-radius:999px;border:1px solid;
  background:var(--hl);border-color:#F3D98A;color:#7a5b00}
.scarcity.show{display:inline-flex}
.scarcity::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--amber-d);flex:0 0 auto;
  animation:scarcity-pulse 1.8s ease-out infinite}
.dark .scarcity{background:rgba(252,192,36,.14);border-color:rgba(252,192,36,.38);color:var(--amber)}
.dark .scarcity::before{background:var(--amber)}
.waitlist .scarcity{margin:4px 0 0}
@keyframes scarcity-pulse{
  0%{box-shadow:0 0 0 0 rgba(235,170,0,.5)}
  70%{box-shadow:0 0 0 7px rgba(235,170,0,0)}
  100%{box-shadow:0 0 0 0 rgba(235,170,0,0)}
}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--cos-font-sans);
  font-weight:600;font-size:15px;letter-spacing:.2px;padding:13px 22px;border-radius:8px;border:1px solid transparent;
  cursor:pointer;text-decoration:none;white-space:nowrap;transition:background .16s,transform .12s,box-shadow .16s}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--amber);color:#0B1220;box-shadow:0 10px 30px rgba(252,192,36,.28)}
.btn-primary:hover{background:var(--amber-d)}
.btn-lg{font-size:16px;padding:16px 28px}
.btn svg{width:16px;height:16px}
.btn-ghost{background:transparent;color:#0B1220;border-color:#0B1220}
.btn-ghost:hover{background:#0B1220;color:#fff}
.dark .btn-ghost{color:#fff;border-color:#3a4a66}
.dark .btn-ghost:hover{background:#fff;color:#0B1220;border-color:#fff}
.trust{font-size:13px;color:#9aa3b2;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.light .trust{color:#7c8597}
.trust .dot{width:3px;height:3px;border-radius:50%;background:currentColor;opacity:.55;flex:0 0 auto}

/* yellow corner-square motif */
.corner{position:absolute;top:0;right:0;width:148px;height:148px;background:var(--amber);pointer-events:none}
.corner::after{content:"";position:absolute;right:26px;top:26px;width:30px;height:30px;border-radius:6px;background:#0B1220}
.corner::before{content:"";position:absolute;right:31px;top:31px;width:11px;height:11px;border-radius:2px;background:var(--amber);z-index:2}

/* ================= NAV ================= */
.nav{position:sticky;top:0;z-index:40;background:rgba(11,18,32,.92);backdrop-filter:saturate(1.2) blur(8px);
  border-bottom:1px solid var(--line-d)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:68px}
.nav .navbtn{font-weight:600;font-size:14px;padding:10px 18px;border-radius:7px;background:var(--amber);color:#0B1220;border:none;cursor:pointer;text-decoration:none}
.nav .navbtn:hover{background:var(--amber-d)}

/* ================= HERO ================= */
.hero{background:var(--ink);color:#fff;overflow:hidden}
.hero .grid{display:grid;grid-template-columns:1.12fr .88fr;gap:52px;align-items:center;padding:72px 0 88px}
.hero h1{font-weight:700;font-size:54px;line-height:1.06;max-width:15ch;margin:18px 0 0;color:#fff}
.hero .sub{font-size:19px;line-height:1.5;color:#aeb6c4;margin:22px 0 30px;max-width:44ch}
.hero .cta-row{display:flex;gap:16px;align-items:center;margin-bottom:20px;flex-wrap:wrap}
/* pricing teaser card */
.price-card{background:#11192b;border:1px solid var(--line-d);border-radius:16px;padding:28px;position:relative}
.price-card .plabel{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--amber);font-weight:600}
.price-card .big{display:flex;align-items:baseline;gap:8px;margin-top:12px}
.price-card .big b{font-size:64px;font-weight:700;letter-spacing:-0.03em;line-height:1;color:#fff}
.price-card .big span{font-size:18px;color:#aeb6c4}
.price-card .was{margin-top:10px;font-size:14px;color:#7c8597}
.price-card .was s{color:#5f6b80}
.price-card .disc{display:inline-block;margin-top:16px;background:rgba(252,192,36,.14);color:var(--amber);
  font-size:13px;font-weight:600;padding:8px 13px;border-radius:8px}
.price-card .vin{margin-top:20px;border-top:1px solid var(--line-d);padding-top:18px}
.price-card .vin .vlabel{font-size:12px;color:#8a93a3;margin-bottom:8px}
.price-card .vin .row{display:flex;gap:10px}
.price-card .vin input{flex:1;background:#0B1220;border:1px solid #2d3b56;border-radius:8px;height:42px;color:#fff;padding:0 12px;font-size:13px;font-family:var(--cos-font-sans);letter-spacing:.04em}
.price-card .vin input:focus{outline:none;border-color:var(--amber)}
.price-card .vin .go{height:42px;padding:0 16px;border-radius:8px;background:var(--amber);color:#0B1220;border:none;font-weight:600;font-size:13px;cursor:pointer}

/* ================= PROBLEM ================= */
.problem{padding:96px 0}
.problem .grid{display:grid;grid-template-columns:0.92fr 1.08fr;gap:72px;align-items:start}
.problem .head{margin:0}
.problem h2{font-weight:700;font-size:46px;line-height:1.08;margin-top:16px;max-width:13ch}
.problem .stack{display:flex;flex-direction:column;gap:28px;padding-top:6px}
.problem .stack .blk{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:start}
.problem .stack p{margin:0;font-size:17px;line-height:1.62;color:var(--body)}
.problem .stack .blk:last-child p{font-weight:500;color:var(--ink-soft)}
.problem .n{font-weight:700;color:var(--amber-d);font-size:14px;letter-spacing:.04em;line-height:1.4;
  padding-top:5px;position:relative}
.problem .n::after{content:"";position:absolute;left:1px;top:30px;bottom:-22px;width:1px;background:var(--line)}
.problem .stack .blk:last-child .n::after{display:none}

/* ================= SOLUTION OVERVIEW ================= */
.solution{padding:88px 0;background:var(--card)}
.badge-pill{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);
  border-radius:999px;padding:8px 16px;font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--amber-d)}
.badge-pill .sq{width:9px;height:9px;border-radius:2px;background:var(--amber)}
.solution .top{display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px;margin-bottom:48px}
.solution .top h2{font-weight:700;font-size:40px;line-height:1.1}
.cards{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:24px 20px;box-shadow:var(--cos-shadow-lift)}
.card .chead{display:flex;flex-direction:column;align-items:flex-start;gap:14px;margin-bottom:12px}
.card .ico{width:44px;height:44px;border-radius:11px;background:var(--ink);display:grid;place-items:center;flex:0 0 auto}
.card .ico svg{width:23px;height:23px;color:var(--amber)}
.card h3{font-weight:700;font-size:17px;line-height:1.25;margin:0}
.card p{margin:0;font-size:14px;line-height:1.5;color:var(--body)}
.card .cbody{display:contents}

/* ================= PILLARS ================= */
.pillars{padding:64px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.pillars .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.pillar{display:flex;gap:16px;align-items:flex-start}
.pillar .pi{width:48px;height:48px;border-radius:12px;background:var(--hl);display:grid;place-items:center;flex:0 0 auto;color:var(--amber-d)}
.pillar .pi svg{width:24px;height:24px}
.pillar .pt b{display:block;font-size:22px;font-weight:700;letter-spacing:-0.02em;margin-bottom:4px}
.pillar .pt span{font-size:15px;color:var(--body);line-height:1.45}

/* ================= FEATURE DEEP-DIVES ================= */
.feature{padding:88px 0}
.feature .grid{display:grid;grid-template-columns:42fr 58fr;gap:56px;align-items:center}
.feature.flip .grid{grid-template-columns:58fr 42fr}
.feature.flip .txt{order:2}
.feature.flip .vis{order:1}
.clabel{font-weight:600;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--amber-d);margin:0 0 14px}
.feature h2{font-weight:700;font-size:34px;line-height:1.14;max-width:16ch}
.feature .desc{font-size:17px;line-height:1.55;color:var(--body);margin:18px 0 22px;max-width:42ch}
.bullets{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:12px}
.bullets li{display:flex;gap:12px;font-size:15px;line-height:1.5;color:var(--ink-soft)}
.bullets .ck{width:22px;height:22px;border-radius:50%;background:var(--hl);display:grid;place-items:center;flex:0 0 auto;margin-top:1px}
.bullets .ck svg{width:12px;height:12px;color:var(--amber-d)}

/* mockup cards */
.mock{background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--cos-shadow-lift);overflow:hidden}
.mock .mhead{padding:18px 20px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:12px}
.mock .veh b{font-weight:700;font-size:15px;color:var(--ink-soft)}
.mock .veh span{font-size:13px;color:#8a93a3}
.mock .vin-tag{font-size:11px;color:#8a93a3;background:var(--card);border:1px solid var(--line);padding:5px 9px;border-radius:6px;letter-spacing:.03em}
.mock .mbody{padding:20px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.pbox{border:1px solid var(--line);border-radius:12px;padding:16px}
.pbox.b2b{background:var(--card)}
.pbox .k{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#8a93a3;font-weight:600}
.pbox .v{font-size:26px;font-weight:700;color:var(--ink-soft);margin-top:7px;letter-spacing:-0.02em}
.pbox .r{font-size:12px;color:#8a93a3;margin-top:4px}
.tags{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
.tag{font-size:12px;color:var(--ink-soft);background:var(--card);border:1px solid var(--line);padding:6px 11px;border-radius:999px;font-weight:500}
.tag b{color:var(--amber-d)}

/* dark KI recommendation mock */
.mock.dark{background:var(--ink);border-color:var(--line-d)}
.mock.dark .mhead{border-color:var(--line-d)}
.kihead{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.kihead .lab{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#8a93a3;font-weight:600}
.kihead .conf{background:var(--amber);color:#0B1220;font-weight:700;font-size:11px;padding:5px 10px;border-radius:6px;letter-spacing:.03em}
.mock.dark .mbody{padding:24px 20px}
.kirec{font-weight:700;font-size:24px;color:#fff;letter-spacing:-0.02em}
.kisub{font-size:14px;line-height:1.5;color:#aeb6c4;margin-top:8px}
.kiinsight{margin-top:18px;background:#11192b;border:1px solid var(--line-d);border-radius:12px;padding:16px;display:flex;gap:12px}
.kiinsight .ic{width:30px;height:30px;border-radius:8px;background:rgba(252,192,36,.14);display:grid;place-items:center;flex:0 0 auto;color:var(--amber)}
.kiinsight .ic svg{width:16px;height:16px}
.kiinsight p{margin:0;font-size:13px;line-height:1.5;color:#cdd3de}
.kiinsight b{color:var(--amber)}

/* warning mock */
.warn{margin-top:4px;background:var(--hl);border:1px solid #F3D98A;border-radius:12px;padding:16px;display:flex;gap:12px}
.warn .ic{width:30px;height:30px;border-radius:8px;background:var(--amber);display:grid;place-items:center;flex:0 0 auto;color:#0B1220}
.warn .ic svg{width:17px;height:17px}
.warn .wt b{display:block;font-size:14px;color:#7a5b00;margin-bottom:4px}
.warn .wt p{margin:0;font-size:13px;line-height:1.5;color:#8a6d1f}
.recline{margin-top:14px;display:flex;align-items:center;gap:10px;font-size:14px;color:var(--ink-soft)}
.recline .badge{background:var(--ink);color:var(--amber);font-weight:700;font-size:12px;padding:6px 11px;border-radius:7px}

/* ================= PRICING ================= */
.pricing{padding:88px 0;background:var(--ink);color:#fff;overflow:hidden}
.pricing .top{text-align:center;display:flex;flex-direction:column;align-items:center;gap:16px;margin-bottom:44px}
.pricing .top h2{font-weight:700;font-size:38px;line-height:1.14;max-width:20ch}
.plan{max-width:560px;margin:0 auto;background:#11192b;border:1px solid var(--line-d);border-radius:20px;padding:40px;position:relative;overflow:hidden}
.plan .slots{position:absolute;top:0;right:0;background:var(--amber);color:#0B1220;font-weight:700;font-size:12px;letter-spacing:.06em;padding:9px 16px;border-bottom-left-radius:14px}
.plan .ptop{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap}
.plan .price{font-size:64px;font-weight:700;letter-spacing:-0.03em;line-height:1}
.plan .per{font-size:18px;color:#aeb6c4;margin-bottom:8px}
.plan .note{font-size:14px;color:#8a93a3;margin-top:10px}
.plan .anchor{font-size:14px;color:#aeb6c4;margin-top:6px}
.plan .anchor s{color:#5f6b80}
.plan .checklist{list-style:none;padding:0;margin:26px 0;display:flex;flex-direction:column;gap:14px;border-top:1px solid var(--line-d);padding-top:26px}
.plan .checklist li{display:flex;gap:12px;font-size:15px;color:#e7eaf0}
.plan .checklist .ck{width:22px;height:22px;border-radius:50%;background:rgba(252,192,36,.16);display:grid;place-items:center;flex:0 0 auto}
.plan .checklist .ck svg{width:12px;height:12px;color:var(--amber)}
.plan .btn{width:100%}
.plan .fine{font-size:12px;color:#7c8597;text-align:center;margin-top:16px;line-height:1.5}

/* ================= FORM ================= */
.waitlist{padding:88px 0}
.waitlist .inner{max-width:680px;margin:0 auto}
.waitlist .top{text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px;margin-bottom:36px}
.waitlist .top h2{font-weight:700;font-size:36px}
.waitlist .top p{margin:0;font-size:17px;color:var(--body);max-width:44ch}
.form{background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--cos-shadow-lift);padding:32px}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.field{display:flex;flex-direction:column;gap:7px}
.field.full{grid-column:1 / -1}
.field label{font-size:13px;font-weight:600;color:var(--ink-soft)}
.field input{height:48px;border:1px solid #d4dae3;border-radius:9px;padding:0 14px;font-size:15px;font-family:var(--cos-font-sans);color:var(--ink-soft);background:#fff;transition:border-color .15s,box-shadow .15s}
.field input::placeholder{color:#aab2c0}
.field input:focus{outline:none;border-color:var(--amber);box-shadow:0 0 0 3px rgba(252,192,36,.28)}
.field input.invalid{border-color:var(--cos-error-400)}
.field .err{font-size:12px;color:var(--cos-error-400);display:none}
.field .err.show{display:block}
.form .submit-row{margin-top:24px}
.form .submit-row .btn{width:100%}
.form .consent{font-size:12px;color:#8a93a3;line-height:1.55;margin-top:16px;text-align:center}
.form .consent a{color:var(--amber-d);text-decoration:underline}
.form-error{display:none;background:var(--cos-error-bg);border:1px solid #f3c6c6;color:var(--cos-error-500);
  font-size:13px;padding:12px 14px;border-radius:9px;margin-top:16px}
.form-error.show{display:block}

/* success state */
.success{display:none;text-align:center;background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--cos-shadow-lift);padding:48px 36px}
.success.show{display:block;animation:rise .4s ease both}
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.success .check{width:72px;height:72px;border-radius:50%;background:var(--amber);display:grid;place-items:center;margin:0 auto 24px}
.success .check svg{width:34px;height:34px;color:#0B1220}
.success h2{font-weight:700;font-size:30px;margin-bottom:16px}
.success p{font-size:16px;line-height:1.6;color:var(--body);max-width:48ch;margin:0 auto 16px}
.success .spam{font-size:13px;color:#8a93a3;margin-top:8px}

/* ================= CLOSING ================= */
.closing{background:var(--ink);color:#fff;padding:96px 0;text-align:center;overflow:hidden}
.closing .wm{justify-content:center;margin-bottom:28px}
.closing h2{font-weight:700;font-size:46px;line-height:1.1;max-width:18ch;margin:0 auto 18px}
.closing .sub{font-size:18px;color:#aeb6c4;max-width:48ch;margin:0 auto 32px;line-height:1.5}

/* ================= FOOTER ================= */
.footer{background:#070c15;color:#8a93a3;padding:36px 0}
.footer .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.footer .links{display:flex;gap:20px}
.footer a{color:#aeb6c4;text-decoration:none;font-size:14px}
.footer a:hover{color:#fff}
.footer .made{font-size:12px;color:#5f6b80}
.footer .cpy{font-size:13px}

/* ================= RESPONSIVE ================= */
@media (max-width:980px){
  .hero .grid,.feature .grid,.feature.flip .grid{grid-template-columns:1fr;gap:36px}
  .problem .grid{grid-template-columns:1fr;gap:32px}
  .problem h2{max-width:18ch}
  .feature.flip .txt{order:1}.feature.flip .vis{order:2}
  /* 5 cards → 2×2 grid + full-width 5th card (avoids an orphan cell) */
  .cards{grid-template-columns:repeat(2,1fr)}
  .card .chead{flex-direction:row;align-items:center}
  .card.wide{grid-column:1 / -1}
  .card.wide .cbody{display:flex;align-items:center;gap:24px}
  .card.wide .chead{flex:0 0 240px;margin-bottom:0}
  .card.wide p{flex:1}
  .hero h1{font-size:42px}.h2,.solution .top h2,.feature h2,.closing h2{font-size:32px}
}
@media (max-width:560px){
  .wrap{padding:0 20px}
  .hero h1{font-size:34px}.hero .grid{padding:48px 0 56px}
  .fgrid{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr}
  /* wide 5th card collapses back to a normal stacked card on phones */
  .card.wide .cbody{display:block}
  .card.wide .chead{flex-basis:auto}
  .pillars .grid{grid-template-columns:1fr;gap:24px}
  .plan{padding:28px 22px}.plan .price{font-size:52px}
  .closing h2{font-size:32px}
  .corner{width:104px;height:104px}
  .footer .wrap{flex-direction:column;align-items:flex-start}
}