/* Tackled marketing site — design tokens lifted straight from the shipping app
   (web/src/styles/tokens.css + meter.css) so the site and the product read as
   one thing, not a separate "marketing skin." */
:root{
  --ink:#1B1A2E;
  --ink-soft:#5B5872;
  --muted:#9893A8;
  --canvas:#F5F2EC;
  --card:#FFFFFF;
  --coral:#FF5E5B;
  --coral-dark:#E84946;
  --teal:#14B8A6;
  --gold:#FFC93C;
  --line:rgba(27,26,46,0.09);
  --line-strong:rgba(27,26,46,0.16);
  --shadow:0 1px 2px rgba(27,26,46,.04), 0 3px 10px rgba(27,26,46,.045);
  --shadow-lg:0 8px 24px rgba(27,26,46,.08), 0 2px 6px rgba(27,26,46,.05);
  --radius:18px;
  --radius-sm:12px;
  --wrap:1080px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important} }

body{
  font-family:"Inter",system-ui,-apple-system,sans-serif;
  background:var(--canvas);
  color:var(--ink);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  background-image:radial-gradient(circle at 50% -10%, rgba(255,94,91,.08), transparent 45%);
}

img,svg{display:block;max-width:100%}
a{color:inherit}
button{font:inherit}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}

h1,h2,h3,.display{
  font-family:"Bricolage Grotesque","Inter",sans-serif;
  letter-spacing:-.02em;
  line-height:1.05;
}

/* ---------- nav ---------- */
.nav{
  position:sticky;top:0;z-index:40;
  background:rgba(245,242,236,.82);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav-row{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;gap:20px}
.brand{display:flex;align-items:center;gap:8px;font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:19px;letter-spacing:-.02em;text-decoration:none}
.brand .bolt{color:var(--coral)}
.nav-links{display:flex;gap:28px;align-items:center}
.nav-links a{font-size:14px;font-weight:500;color:var(--ink-soft);text-decoration:none;transition:color .15s}
.nav-links a:hover{color:var(--ink)}
@media (max-width:720px){ .nav-links a.hide-mobile{display:none} }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:"Inter",sans-serif;font-weight:600;font-size:15px;
  padding:13px 22px;border-radius:999px;border:1px solid transparent;
  text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:transform .18s cubic-bezier(.2,.8,.2,1), box-shadow .18s, background .18s, border-color .18s;
}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--coral);color:#fff;box-shadow:0 6px 18px rgba(255,94,91,.35)}
.btn-primary:hover{background:var(--coral-dark);box-shadow:0 8px 22px rgba(255,94,91,.42);transform:translateY(-1px)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line-strong)}
.btn-ghost:hover{border-color:var(--ink-soft)}
.btn-sm{padding:10px 18px;font-size:14px}
:focus-visible{outline:2px solid var(--coral-dark);outline-offset:2px}

/* ---------- hero ---------- */
.hero{padding:64px 0 40px}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
@media (max-width:900px){ .hero-grid{grid-template-columns:1fr;gap:44px} }

.eyebrow{
  display:inline-flex;align-items:center;gap:7px;
  font-size:12.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--coral-dark);margin-bottom:18px;
}
.eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--coral)}

.hero h1{font-weight:800;font-size:clamp(34px,5.2vw,56px);margin-bottom:20px}
.hero h1 .accent{color:var(--coral)}
.hero .lede{font-size:18px;color:var(--ink-soft);max-width:46ch;margin-bottom:30px}
.cta-row{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-bottom:18px}
.cta-more{font-size:14px;font-weight:600;color:var(--ink-soft);text-decoration:none;border-bottom:1px solid var(--line-strong);padding-bottom:2px}
.cta-more:hover{color:var(--ink);border-color:var(--ink-soft)}
.fine-print{font-size:13px;color:var(--muted)}

/* ---------- demo meter (signature element) ---------- */
.demo-card{
  background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow-lg);
  border:1px solid var(--line);padding:26px 26px 22px;
  transition:box-shadow .4s, transform .4s cubic-bezier(.2,.8,.2,1);
}
.demo-card.maxed{box-shadow:0 0 0 2px var(--teal), 0 18px 34px rgba(20,184,166,.22)}
.demo-card.pulse{animation:demoPulse .7s cubic-bezier(.2,.9,.3,1)}
@keyframes demoPulse{0%{transform:scale(1)}40%{transform:scale(1.02)}100%{transform:scale(1)}}

.demo-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.demo-day{font-size:12px;font-weight:600;letter-spacing:.02em;color:var(--muted)}
.demo-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.demo-label{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.demo-count{font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:16px;color:var(--ink-soft)}
.demo-count b{color:var(--ink);font-size:19px}

.demo-cells{display:flex;gap:7px;margin-bottom:16px}
.demo-cell{
  flex:1;height:16px;border-radius:7px;background:rgba(27,26,46,.07);
  position:relative;overflow:hidden;
  transition:background .5s ease, transform .35s cubic-bezier(.2,.9,.3,1);
}
.demo-cell.on{background:linear-gradient(180deg,#FF7A6B,var(--coral));transform:translateY(-1px)}
.demo-cell.on.mid{background:linear-gradient(180deg,#FFD56B,var(--gold))}
.demo-cell.on.high{background:linear-gradient(180deg,#3FE0CE,var(--teal))}

.demo-note{
  display:flex;align-items:center;gap:8px;
  font-size:13.5px;color:var(--ink-soft);font-weight:500;
  height:20px;opacity:0;transform:translateY(4px);
  transition:opacity .35s ease, transform .35s ease;
}
.demo-note.show{opacity:1;transform:translateY(0)}
.demo-note .plus{color:var(--teal);font-weight:700}

.demo-caption{margin-top:16px;font-size:13px;color:var(--muted);text-align:center}

/* ---------- section shell ---------- */
.section{padding:76px 0}
.section-head{max-width:640px;margin:0 auto 44px;text-align:center}
.section-head h2{font-weight:800;font-size:clamp(26px,4vw,36px);margin-bottom:12px}
.section-head p{color:var(--ink-soft);font-size:16.5px}
.section-alt{background:var(--card);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

/* ---------- comparison ---------- */
.compare{display:grid;grid-template-columns:1fr 1fr;gap:22px;max-width:860px;margin:0 auto}
@media (max-width:720px){ .compare{grid-template-columns:1fr} }
.compare-col{border-radius:var(--radius);padding:28px 26px;border:1px solid var(--line)}
.compare-col.bad{background:transparent}
.compare-col.good{background:var(--card);box-shadow:var(--shadow-lg);border-color:transparent;position:relative}
.compare-col h3{font-family:"Inter",sans-serif;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin-bottom:18px}
.compare-col.bad h3{color:var(--muted)}
.compare-col.good h3{color:var(--teal)}
.compare-list{list-style:none;display:flex;flex-direction:column;gap:14px}
.compare-list li{display:flex;gap:10px;font-size:15px;line-height:1.4}
.compare-col.bad li{color:var(--ink-soft)}
.compare-col.good li{color:var(--ink);font-weight:500}
.compare-list .mark{flex:none;width:18px;text-align:center;font-weight:700}
.compare-col.bad .mark{color:var(--muted)}
.compare-col.good .mark{color:var(--teal)}

/* ---------- feature grid ---------- */
.features{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
@media (max-width:920px){ .features{grid-template-columns:1fr 1fr} }
@media (max-width:560px){ .features{grid-template-columns:1fr} }
.feature{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:26px 22px;box-shadow:var(--shadow);
  transition:transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s;
}
.feature:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.feature .ico{font-size:26px;margin-bottom:14px;display:block}
.feature h3{font-family:"Inter",sans-serif;font-size:16px;font-weight:700;margin-bottom:8px}
.feature p{font-size:14.5px;color:var(--ink-soft);line-height:1.5}
.feature .tag{
  display:inline-block;margin-top:12px;font-size:11.5px;font-weight:700;letter-spacing:.04em;
  color:var(--coral-dark);background:rgba(255,94,91,.1);padding:3px 9px;border-radius:999px;
}

/* ---------- flow (real chronology → numbers justified) ---------- */
.flow{display:flex;gap:0;align-items:stretch;max-width:960px;margin:0 auto}
@media (max-width:860px){ .flow{flex-direction:column;gap:14px} }
.flow-step{flex:1;position:relative;padding:26px 22px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.flow-num{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:13px;color:var(--coral);letter-spacing:.04em;margin-bottom:10px}
.flow-step h3{font-family:"Inter",sans-serif;font-size:15.5px;font-weight:700;margin-bottom:6px}
.flow-step p{font-size:13.5px;color:var(--ink-soft);line-height:1.45}
.flow-arrow{flex:none;display:flex;align-items:center;justify-content:center;width:34px;color:var(--muted);font-size:18px}
@media (max-width:860px){ .flow-arrow{width:auto;height:14px;transform:rotate(90deg)} }

/* ---------- closing cta ---------- */
.closing{text-align:center;padding:90px 0}
.closing h2{font-weight:800;font-size:clamp(28px,4.5vw,42px);margin-bottom:16px}
.closing p{color:var(--ink-soft);font-size:17px;max-width:44ch;margin:0 auto 32px}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line);padding:36px 0}
.foot-row{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.foot-note{font-size:13.5px;color:var(--muted);max-width:44ch}
.foot-links{display:flex;gap:20px}
.foot-links a{font-size:13.5px;color:var(--ink-soft);text-decoration:none}
.foot-links a:hover{color:var(--ink)}

/* ---------- simple pages (privacy / support) ---------- */
.doc{max-width:680px;margin:0 auto;padding:64px 24px 100px}
.doc h1{font-weight:800;font-size:clamp(28px,4vw,38px);margin-bottom:8px}
.doc .updated{font-size:13px;color:var(--muted);margin-bottom:36px}
.doc h2{font-family:"Inter",sans-serif;font-size:18px;font-weight:700;margin:32px 0 10px}
.doc p, .doc li{font-size:15.5px;color:var(--ink-soft);line-height:1.7}
.doc ul{padding-left:20px;margin:8px 0}
.doc a{color:var(--coral-dark);text-decoration:underline}