/* Cart-Flow marketing site — the one stylesheet.
   Built from cartflow-site/design/Cart-Flow Website.dc.html. The design document carries every
   rule as an inline style (it is a Claude Design canvas doc); they are extracted into classes
   here. The .blueprint frame + .corner registration marks come from the Industry design system
   (design/_ds/industry-…/styles.css) — only those two rules are lifted, because the rest of
   Industry sets a steel accent and a grey ground that this page overrides anyway.

   No build step. Plain CSS, matching the rest of the repo. */

/* ── tokens ─────────────────────────────────────────────────────────────── */
:root {
  --ink:     #0E1030;  /* headings, dark bands, footer */
  --blue:    #1B23D6;  /* primary action, links, kickers, numerals */
  --yellow:  #FFE81A;  /* accent on dark grounds ONLY — fails contrast on white */
  --body:    #3a3d52;  /* paragraph text */
  --muted:   #5c5f75;  /* captions, eyebrows */
  --paper:   #f6f7fb;  /* alternating band, figure mats */
  --on-ink:  #c9cbdb;  /* body text on the ink band */
  --on-ink-dim: #7c7f99;

  --line:    rgba(14,16,48,.12);
  --line-2:  rgba(14,16,48,.18);
  --line-3:  rgba(14,16,48,.30);

  --cond: 'Barlow Condensed', 'Barlow Semi Condensed', system-ui, sans-serif;
  --sans: Barlow, system-ui, -apple-system, 'Segoe UI', sans-serif;

  --gut: clamp(20px, 4vw, 32px);   /* horizontal page gutter */
  --sec: clamp(48px, 7vw, 80px);   /* default section rhythm */
}

/* ── base ───────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: #ffffff;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--ink); }

img { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }
p { margin: 0; }
ul { margin: 0; }

:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.band-ink :focus-visible, .band-blue :focus-visible { outline-color: var(--yellow); }

::selection { background: rgba(27,35,214,.18); }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--blue); color: #fff; padding: 12px 18px;
  font-family: var(--cond); text-transform: uppercase; letter-spacing: .14em;
}
.skip:focus { left: 0; color: #fff; }

/* ── layout ─────────────────────────────────────────────────────────────── */
.page { display: flex; flex-direction: column; min-height: 100vh; background: #fff; }
main { flex: 1; }

.sec { padding: var(--sec) var(--gut); }
.sec-rule { border-bottom: 1px solid var(--line); }
.sec-head { padding: clamp(44px, 6vw, 66px) var(--gut) clamp(30px, 4vw, 44px); }
.sec-tight { padding-top: clamp(34px, 5vw, 56px); }

.wrap   { max-width: 1280px; margin: 0 auto; }
.wrap-l { max-width: 1240px; margin: 0 auto; }
.wrap-m { max-width: 1180px; margin: 0 auto; }
.wrap-s { max-width: 1100px; margin: 0 auto; }
.wrap-p { max-width: 1000px; margin: 0 auto; }  /* prose */
.wrap-n { max-width: 820px;  margin: 0 auto; }  /* legal */

.stack   { display: flex; flex-direction: column; }
.gap-8   { gap: 8px; }  .gap-10 { gap: 10px; } .gap-12 { gap: 12px; }
.gap-14  { gap: 14px; } .gap-16 { gap: 16px; } .gap-18 { gap: 18px; }
.gap-20  { gap: 20px; } .gap-22 { gap: 22px; } .gap-26 { gap: 26px; }
.gap-34  { gap: 34px; }

.grid { display: grid; gap: 24px; }
.grid-280 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid-300 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 22px; }
.grid-320 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.grid-240 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 26px; }
.grid-230 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; }

.split {                                   /* copy beside a figure */
  display: grid; gap: clamp(32px, 5vw, 56px); align-items: center;
  grid-template-columns: minmax(320px, 1fr) minmax(380px, 1.15fr);
}
.split-even { grid-template-columns: minmax(320px, 1fr) minmax(340px, 1fr); }
.split-form {
  grid-template-columns: minmax(300px, 1fr) minmax(360px, 1.1fr);
  align-items: start; gap: clamp(32px, 4.5vw, 52px);
}

.row-between {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
}

/* ── bands ──────────────────────────────────────────────────────────────── */
.band-paper { background: var(--paper); }
.band-ink   { background: var(--ink); color: #f2f2f3; }
.band-blue  { background: var(--blue); color: #ffffff; }
.band-ink p, .band-ink li { color: var(--on-ink); }
.band-blue p { color: rgba(255,255,255,.82); }

/* ── type ───────────────────────────────────────────────────────────────── */
.eyebrow {
  font-family: var(--cond); font-weight: 700; letter-spacing: .2em;
  text-transform: uppercase; font-size: 13px; color: var(--blue);
}
.band-ink .eyebrow { color: var(--yellow); }
/* Captions under the driver-app phone trio on the dark band. */
.cap-ink {
  font-family: var(--cond); text-transform: uppercase; letter-spacing: .14em;
  font-size: 11px; color: rgba(242,242,243,.65); text-align: center;
}

.display {
  font-weight: 800; letter-spacing: -.035em; line-height: .98;
  margin: 0; text-wrap: balance;
  font-size: clamp(42px, 8vw, 68px);
}
.display-sm { font-size: clamp(36px, 6.4vw, 56px); line-height: 1; letter-spacing: -.03em; }
.display-xs { font-size: clamp(34px, 5.6vw, 52px); line-height: 1; letter-spacing: -.03em; }
.display-legal { font-size: clamp(32px, 5vw, 46px); line-height: 1.02; letter-spacing: -.03em; }

.h-cond {
  font-family: var(--cond); font-weight: 700; text-transform: uppercase;
  margin: 0; line-height: 1.05;
}
.h-44 { font-size: clamp(30px, 5vw, 44px); }
.h-46 { font-size: clamp(30px, 5.2vw, 46px); line-height: 1.02; }
.h-40 { font-size: clamp(28px, 4.6vw, 40px); letter-spacing: .01em; }
.h-34 { font-size: clamp(26px, 4vw, 34px); }
.h-32 { font-size: clamp(25px, 3.6vw, 32px); }
.h-27 { font-size: 27px; }
.h-26 { font-size: 26px; }
.h-25 { font-size: 25px; }
.h-23 { font-size: 23px; }
.h-22 { font-size: 22px; }

.lede    { font-size: clamp(18px, 2.2vw, 20px); line-height: 1.5; color: var(--body); max-width: 52ch; text-wrap: pretty; }
.lede-19 { font-size: 19px; line-height: 1.55; color: var(--body); max-width: 62ch; }
.copy-21 { font-size: 21px; line-height: 1.6; color: var(--ink); }
.copy-19 { font-size: 19px; line-height: 1.55; color: var(--body); }
.copy-18 { font-size: 18px; line-height: 1.65; color: var(--body); }
.copy-17 { font-size: 17px; line-height: 1.65; color: var(--body); }
.copy-16 { font-size: 16px; line-height: 1.55; color: var(--body); }
.copy-15 { font-size: 15px; color: var(--body); }
.measure { max-width: 68ch; }
.measure-50 { max-width: 50ch; }
.measure-48 { max-width: 48ch; }

.num {                                     /* the 01…06 kickers */
  font-family: var(--cond); letter-spacing: .18em;
  text-transform: uppercase; font-size: 12px; color: var(--blue);
}
.num-big {
  font-family: var(--cond); font-weight: 700; font-size: clamp(44px, 7vw, 64px);
  line-height: .8; color: var(--blue);
}

.label {
  font-family: var(--cond); text-transform: uppercase; letter-spacing: .16em;
  font-size: 12px; color: var(--muted);
}
.caption {
  font-family: var(--cond); text-transform: uppercase; letter-spacing: .14em;
  font-size: 11px; color: var(--muted); padding: 12px 4px 4px;
}
.note { font-size: 13px; line-height: 1.5; color: var(--muted); }

.meta-row {
  display: flex; gap: 26px; flex-wrap: wrap; padding-top: 6px;
  font-family: var(--cond); text-transform: uppercase; letter-spacing: .12em;
  font-size: 13px; color: var(--muted);
}
.meta-row .dot { color: var(--line-3); }

/* ── dash list ──────────────────────────────────────────────────────────── */
.dash-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.dash-list li { display: flex; gap: 12px; align-items: flex-start; font-size: 17px; }
.dash-list li::before { content: "—"; font-weight: 800; color: var(--blue); flex: none; }
.band-ink .dash-list li { color: #f2f2f3; }
.band-ink .dash-list li::before { color: var(--yellow); }

.bullets {
  padding-left: 20px; display: flex; flex-direction: column; gap: 8px;
  font-size: 16px; color: var(--body); line-height: 1.5;
}

/* ── buttons ────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--cond); font-weight: 700; text-transform: uppercase;
  letter-spacing: .14em; font-size: 15px; line-height: 1;
  padding: 15px 24px; border: 2px solid transparent; border-radius: 0;
  cursor: pointer; text-align: center; transition: background-color .12s, color .12s;
}
.btn-lg { font-size: 16px; padding: 18px 30px; }
.btn-xl { font-size: 17px; padding: 20px 34px; }
.btn-sm { font-size: 14px; padding: 13px 22px; }

.btn-blue    { background: var(--blue); color: #fff; border-color: var(--blue); }
.btn-blue:hover { background: var(--ink); border-color: var(--ink); color: #fff; }

.btn-outline { background: none; color: var(--ink); border-color: var(--ink); }
.btn-outline:hover { background: var(--ink); color: #fff; }

.btn-yellow  { background: var(--yellow); color: var(--ink); border-color: var(--yellow); }
.btn-yellow:hover { background: #fff; border-color: #fff; color: var(--ink); }

.btn-start { align-self: flex-start; }

.link-cta {                                /* "All features" underlined text action */
  font-family: var(--cond); text-transform: uppercase; letter-spacing: .14em;
  font-size: 14px; color: var(--blue); border-bottom: 2px solid var(--blue);
  padding-bottom: 2px; white-space: nowrap;
}
.link-cta:hover { color: var(--ink); border-bottom-color: var(--ink); }

/* ── blueprint frame (from the Industry design system) ──────────────────── */
.blueprint { position: relative; border: 1px solid var(--line-2); border-radius: 0; }
.blueprint > .corner { position: absolute; width: 11px; height: 11px; color: rgba(14,16,48,.55); }
.blueprint > .corner::before,
.blueprint > .corner::after { content: ""; position: absolute; background: currentColor; }
.blueprint > .corner::before { left: 5px; top: 0; width: 1px; height: 100%; }
.blueprint > .corner::after  { top: 5px; left: 0; width: 100%; height: 1px; }
.blueprint > .corner.tl { top: -6px; left: -6px; }
.blueprint > .corner.tr { top: -6px; right: -6px; }
.blueprint > .corner.bl { bottom: -6px; left: -6px; }
.blueprint > .corner.br { bottom: -6px; right: -6px; }
.band-ink .blueprint { border-color: rgba(255,255,255,.28); }
.band-ink .blueprint > .corner { color: rgba(255,255,255,.55); }

.bp-card { padding: clamp(22px, 3vw, 30px); display: flex; flex-direction: column; gap: 10px; }
.bp-pad  { padding: clamp(24px, 3.4vw, 34px); }

.figure { border-color: rgba(14,16,48,.2); padding: 10px; background: var(--paper); }
.figure-plain { background: none; }

/* ── page furniture ─────────────────────────────────────────────────────── */
.topbar {
  background: var(--ink); color: #f2f2f3;
  padding: 9px var(--gut);
  display: flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--cond); letter-spacing: .14em; text-transform: uppercase;
  font-size: 12px; text-align: center;
}
.topbar .pip { width: 7px; height: 7px; background: var(--yellow); flex: none; }

.site-header {
  position: sticky; top: 0; z-index: 50; background: #fff;
  border-bottom: 1px solid rgba(14,16,48,.14);
  padding: 14px var(--gut);
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand:hover { color: inherit; }
.brand .wordmark {
  font-weight: 800; font-size: 23px; letter-spacing: -.03em; color: var(--ink);
}
.brand .wordmark .tld { color: var(--blue); }

.mainnav { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.mainnav a {
  padding: 9px 12px; font-family: var(--cond); text-transform: uppercase;
  letter-spacing: .12em; font-size: 14px; color: var(--ink);
}
.mainnav a:hover { color: var(--blue); }
.mainnav a[aria-current="page"] { color: var(--blue); box-shadow: inset 0 -2px 0 var(--blue); }
/* The nav "Request a demo" is a button, not a text link — keep its text white
   against the blue/ink fill (the .mainnav a rules above would ink it out). */
.mainnav .btn { margin-left: 8px; color: #fff; }
.mainnav .btn:hover { color: #fff; }
.mainnav .btn[aria-current="page"] { box-shadow: none; background: var(--ink); border-color: var(--ink); color: #fff; }

.site-footer { background: var(--ink); color: var(--on-ink); padding: 54px var(--gut) 34px; }
.site-footer .brand .wordmark { color: #fff; font-size: 20px; }
.footcol { display: flex; flex-direction: column; gap: 10px; }
.footcol .head {
  font-family: var(--cond); text-transform: uppercase; letter-spacing: .18em;
  font-size: 12px; color: var(--on-ink-dim);
}
.footcol a { color: var(--on-ink); font-size: 16px; }
.footcol a:hover { color: #fff; }
.footcol a.btn-yellow { color: var(--ink); }        /* .footcol a outranks .btn-yellow */
.footcol a.btn-yellow:hover { color: var(--ink); }
.footcol a.mail { color: #fff; font-size: 17px; font-weight: 600; }
.footnote {
  border-top: 1px solid rgba(255,255,255,.14); padding-top: 20px;
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-size: 14px; color: var(--on-ink-dim);
}

/* ── page-specific patterns ─────────────────────────────────────────────── */
.problem { display: flex; flex-direction: column; gap: 10px;
           border-top: 3px solid var(--blue); padding-top: 18px; }

.feature-row {                             /* features page: label | detail */
  display: grid; gap: 30px;
  grid-template-columns: minmax(200px, 1fr) minmax(280px, 1.6fr);
}

.step {                                    /* how-it-works: 01 | copy */
  display: grid; grid-template-columns: 120px 1fr; gap: 28px;
  padding: 32px 0; border-top: 1px solid rgba(14,16,48,.16);
}
.step:last-child { border-bottom: 1px solid rgba(14,16,48,.16); }

.roadmap-item {
  border: 1px dashed var(--line-3); padding: 18px 20px;
  font-family: var(--cond); text-transform: uppercase; letter-spacing: .1em;
  font-size: 16px; color: var(--muted);
}
.pill-dark {
  font-family: var(--cond); letter-spacing: .14em; text-transform: uppercase;
  font-size: 12px; color: #fff; background: var(--ink); padding: 5px 10px;
}

.aside-box {                               /* demo page: "rather just email?" */
  border-top: 1px solid rgba(14,16,48,.16); padding-top: 20px; margin-top: 8px;
  display: flex; flex-direction: column; gap: 6px;
}
.mail-lg { font-size: 20px; font-weight: 700; }
.mail-xl { font-size: 24px; font-weight: 700; letter-spacing: -.02em; }

.legal-block { display: flex; flex-direction: column; gap: 8px; }
.legal-warn {
  font-family: var(--cond); letter-spacing: .1em; text-transform: uppercase;
  font-size: 16px; color: var(--muted);
}

/* ── form ───────────────────────────────────────────────────────────────── */
.form { padding: clamp(24px, 3.4vw, 34px); display: flex; flex-direction: column; gap: 18px;
        background: var(--paper); border-color: rgba(14,16,48,.2); }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field {
  display: flex; flex-direction: column; gap: 7px; min-width: 0;
  font-family: var(--cond); text-transform: uppercase; letter-spacing: .12em;
  font-size: 12px; color: var(--ink);
}
.field .req { color: var(--blue); }
.field > input, .field > select, .field > textarea {
  border: 1px solid var(--line-3); background: #fff; width: 100%;
  padding: 12px 13px; font-family: var(--sans); font-size: 16px; color: var(--ink);
  border-radius: 0; text-transform: none; letter-spacing: normal;
}
.field > textarea { resize: vertical; }
.field > :is(input, select, textarea):focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }

/* ── responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 860px) {
  .split, .split-even, .split-form { grid-template-columns: 1fr; }
  .split .figure { order: 2; }
}
@media (max-width: 760px) {
  .site-header { gap: 12px; }
  .mainnav { gap: 2px; width: 100%; }
  .mainnav a { padding: 8px 10px; }
  .mainnav .btn { margin-left: 0; margin-top: 6px; width: 100%; }
  .feature-row { grid-template-columns: 1fr; gap: 16px; }
  .step { grid-template-columns: 1fr; gap: 10px; padding: 26px 0; }
  .pair { grid-template-columns: 1fr; }
  .meta-row { gap: 8px 14px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* ── print ──────────────────────────────────────────────────────────────── */
@media print {
  .topbar, .site-header, .site-footer, .btn { display: none; }
  body { color: #000; }
}