/* Marketing home page only. The signed-in app, the auth screen and the policy
   pages all use styles.css; this file is deliberately separate so the two can
   evolve without one silently restyling the other.

   Single-theme by choice: every other page on the site is light-only, and a
   dark home page that flips to a light sign-in screen on the very next click
   reads as a bug rather than a preference. */

:root {
  --brand:#0d9488; --brand-strong:#0f766e; --brand-wash:#f0fdfa;
  --ink:#0f172a; --ink-soft:#334155; --muted:#64748b;
  --ground:#ffffff; --ground-2:#f7f9fb; --line:#e6ecf2;
  --shadow:0 1px 2px rgba(15,23,42,.05), 0 12px 32px -12px rgba(15,23,42,.16);
  --radius:14px;
  --measure:62ch;

  /* Buttons carry their own colour tokens rather than reusing --brand: white
     needs the deeper teal behind it to clear 4.5:1 (5.47:1), where the lighter
     brand teal only manages 3.74:1. */
  --btn-bg:#0f766e; --btn-bg-hover:#115e59; --btn-fg:#ffffff;
}

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

body {
  margin:0; background:var(--ground-2); color:var(--ink);
  font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased;
}
.wrap { max-width:1080px; margin:0 auto; padding:0 24px; }
section { padding:96px 0; }
h1, h2, h3 { text-wrap:balance; margin:0; letter-spacing:-0.03em; line-height:1.08; font-weight:800; }
h1 { font-size:clamp(38px,6.2vw,62px); }
h2 { font-size:clamp(28px,4vw,40px); letter-spacing:-0.028em; }
h3 { font-size:19px; letter-spacing:-0.015em; line-height:1.3; }
p { margin:0; max-width:var(--measure); }
a { color:var(--brand-strong); }
img { max-width:100%; }

.eyebrow {
  font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size:12px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--brand-strong); margin-bottom:14px;
}
.lede { font-size:19px; color:var(--ink-soft); margin-top:20px; }
.stack { display:flex; flex-direction:column; gap:18px; }

/* ── header ─────────────────────────────────────────────────────────────── */
.site-head {
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--ground-2) 88%, transparent);
  backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid transparent; transition:border-color .2s ease;
}
.site-head.stuck { border-bottom-color:var(--line); }
.bar { display:flex; align-items:center; justify-content:space-between; height:66px; }
.home-brand {
  display:flex; align-items:center; gap:10px; font-weight:800;
  letter-spacing:-0.02em; font-size:17px; color:var(--ink); text-decoration:none;
}
.home-brand .loop { color:var(--brand); }
.nav-actions { display:flex; align-items:center; gap:10px; }
.nav-link {
  color:var(--ink-soft); text-decoration:none; font-size:15px; font-weight:600;
  padding:11px 8px; border-radius:8px;
}
.nav-link:hover { color:var(--brand-strong); }

.home-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:11px 20px; border-radius:999px; font-size:15px; font-weight:600;
  text-decoration:none; border:1px solid transparent; cursor:pointer;
  transition:transform .15s ease, background .15s ease, border-color .15s ease;
}
.home-btn-primary { background:var(--btn-bg); color:var(--btn-fg); }
.home-btn-primary:hover { background:var(--btn-bg-hover); transform:translateY(-1px); }
.home-btn-ghost { color:var(--ink); border-color:var(--line); background:var(--ground); }
.home-btn-ghost:hover { border-color:var(--brand); }
.home-btn-lg { padding:15px 28px; font-size:16px; }
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline:2px solid var(--brand); outline-offset:3px; border-radius:999px;
}

/* ── hero ───────────────────────────────────────────────────────────────── */
.hero { padding:88px 0 40px; position:relative; overflow:hidden; }
.hero-inner { text-align:center; display:flex; flex-direction:column; align-items:center; }
.hero .lede { margin-left:auto; margin-right:auto; }
.hero-cta { display:flex; gap:12px; flex-wrap:wrap; justify-content:center; margin-top:32px; }
.hero-note { font-size:14px; color:var(--muted); margin-top:16px; }

/* ── screenshot frames ──────────────────────────────────────────────────── */
.shot {
  margin-top:56px; border-radius:var(--radius); overflow:hidden;
  border:1px solid var(--line); box-shadow:var(--shadow); background:var(--ground);
}
.shot-bar {
  display:flex; align-items:center; gap:7px; padding:11px 14px;
  border-bottom:1px solid var(--line); background:var(--ground-2);
}
.shot-bar i { width:9px; height:9px; border-radius:50%; background:var(--line); }
.shot img { display:block; width:100%; height:auto; }
.bleed { max-width:1180px; margin-left:auto; margin-right:auto; }

/* ── panels ─────────────────────────────────────────────────────────────── */
.grid { display:grid; gap:22px; }
.grid-3 { grid-template-columns:repeat(3,1fr); }
.grid-2 { grid-template-columns:1.05fr .95fr; align-items:center; gap:56px; }
.home-card {
  background:var(--ground); border:1px solid var(--line); border-radius:var(--radius);
  padding:26px; box-shadow:0 1px 2px rgba(15,23,42,.04);
}
.home-card p { color:var(--muted); font-size:15.5px; margin-top:8px; }

/* Numbered because setup genuinely is a sequence — you can't pick marketplaces
   before the account is connected. */
.step-num {
  width:30px; height:30px; border-radius:50%; background:var(--brand-wash);
  color:var(--brand-strong); display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:14px; margin-bottom:16px;
  font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* The daily run, in the order it actually happens. */
.loop-list { display:flex; flex-direction:column; margin-top:8px; }
.loop-item { display:flex; gap:18px; padding:18px 0; border-top:1px solid var(--line); }
.loop-item:first-child { border-top:none; }
.loop-key {
  font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:12.5px;
  color:var(--brand-strong); padding-top:3px; white-space:nowrap; min-width:74px;
}
.loop-item strong { display:block; font-size:16px; letter-spacing:-0.01em; }
.loop-item p { font-size:15px; color:var(--muted); margin-top:3px; }

/* ── pricing ────────────────────────────────────────────────────────────── */
.price-figure {
  font-size:clamp(64px,11vw,104px); font-weight:800; letter-spacing:-0.05em;
  line-height:1; color:var(--brand);
}
.price-figure span { font-size:.32em; letter-spacing:-0.02em; color:var(--ink-soft); font-weight:700; }
.price-points { display:flex; flex-direction:column; gap:12px; margin-top:26px; }
.price-point { display:flex; gap:11px; align-items:flex-start; font-size:16px; color:var(--ink-soft); }
.tick { flex:0 0 19px; height:19px; border-radius:50%; background:var(--brand-wash); position:relative; margin-top:3px; }
.tick::after {
  content:""; position:absolute; left:6px; top:5px; width:5px; height:8px;
  border:solid var(--brand-strong); border-width:0 2px 2px 0; transform:rotate(45deg);
}

/* ── faq ────────────────────────────────────────────────────────────────── */
.faq details { border-top:1px solid var(--line); padding:20px 0; }
.faq p { color:var(--muted); margin-top:10px; font-size:15.5px; }
.faq summary {
  cursor:pointer; font-weight:600; font-size:17px; letter-spacing:-0.01em;
  list-style:none; display:flex; justify-content:space-between; gap:20px; align-items:center;
}
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:"+"; color:var(--brand); font-weight:700; font-size:20px; }
/* U+2212 minus — this is a CSS string, so it takes the unicode escape rather
   than an HTML entity, and it matches the "+" in weight where a hyphen won't. */
.faq details[open] summary::after { content:"\2212"; }

/* ── closing call to action ─────────────────────────────────────────────── */
.closing {
  background:var(--btn-bg); color:#ffffff; border-radius:22px;
  padding:64px 40px; text-align:center;
}
.closing h2 { color:#ffffff; }
.closing p { color:#e4fbf7; margin:16px auto 0; }
.closing .home-btn { background:#ffffff; color:var(--btn-bg); }
.closing .home-btn:hover { background:var(--brand-wash); }

/* ── footer ─────────────────────────────────────────────────────────────── */
.site-foot { border-top:1px solid var(--line); padding:36px 0 56px; color:var(--muted); font-size:14px; }
.foot-row { display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; align-items:center; }
.foot-links { display:flex; gap:20px; flex-wrap:wrap; }
.site-foot a { color:var(--muted); text-decoration:none; }
.site-foot a:hover { color:var(--brand-strong); }

/* ── scroll reveal ──────────────────────────────────────────────────────── */
/* Gated on .js, set by an inline script in <head>. Without it, a script that
   fails to load would leave every section permanently at opacity 0 — the whole
   page invisible to anyone with JS off, and to crawlers that don't run it. */
.js .reveal { opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .6s ease; }
.js .reveal.in { opacity:1; transform:none; }

@media (max-width:880px) {
  .grid-3 { grid-template-columns:1fr; }
  .grid-2 { grid-template-columns:1fr; gap:34px; }
  section { padding:68px 0; }
}
@media (max-width:520px) {
  /* Sign in and Get started both survive the squeeze — Pricing is the one
     that doesn't, since it's an anchor to a section further down the page. */
  .nav-link { display:none; }
  .nav-actions { gap:8px; }
  .nav-actions .home-btn { padding:10px 15px; font-size:14px; }
  .closing { padding:44px 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity:1; transform:none; transition:none; }
  .home-btn:hover { transform:none; }
  html { scroll-behavior:auto; }
}
html { scroll-behavior:smooth; }