/* ============================================================
   Progress Tab — landing styles. Shares the extension's
   "quiet instrument" tokens (teal / dawn / paper) so the site
   and the card feel like one object. Static, no build step.
   ============================================================ */
:root{
  --paper:#FBFCFD; --ink:#19232B; --slate:#647079; --slate-soft:#919BA2;
  --teal:#1E7A6C; --teal-dark:#186A5E; --dawn:#E7A35C; --dawn-bright:#F2B85A;
  --dawn-dark:#8A5E17; --rule:#DCE2E7; --edge:#E5EAED; --card:#FFFFFF;
  --maxw:1080px;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:
    radial-gradient(1200px 600px at 80% -10%, rgba(231,163,92,.07), transparent 60%),
    var(--paper);
  color:var(--ink); font-family:var(--sans);
  line-height:1.6; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a{color:inherit}
h1,h2,h3{line-height:1.15; letter-spacing:-.01em; margin:0}
.led{
  display:inline-block; width:.5em; height:.5em; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, var(--dawn-bright), var(--dawn) 60%, var(--dawn-dark));
  box-shadow:0 0 0 2px rgba(231,163,92,.18); margin-right:.55em; vertical-align:.05em;
}

/* ---- nav ---- */
.nav{
  max-width:var(--maxw); margin:0 auto; padding:22px 24px;
  display:flex; align-items:center; justify-content:space-between;
}
.brand{ font-weight:650; font-size:1.05rem; text-decoration:none; letter-spacing:-.01em; }
.nav-right{ display:flex; align-items:center; gap:18px }
.nav-link{ color:var(--slate); text-decoration:none; font-size:.92rem }
.nav-link:hover{ color:var(--ink) }
.lang{ display:inline-flex; border:1px solid var(--edge); border-radius:999px; overflow:hidden }
.lang-btn{
  border:0; background:transparent; color:var(--slate-soft); font:inherit; font-size:.8rem;
  font-weight:600; padding:5px 11px; cursor:pointer; letter-spacing:.02em;
}
.lang-btn[aria-pressed="true"]{ background:var(--ink); color:#fff }

/* ---- hero ---- */
.hero{
  max-width:var(--maxw); margin:0 auto; padding:48px 24px 40px;
  display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center;
}
.tagline{ font-family:var(--serif); font-size:clamp(2rem,4.2vw,3rem); font-weight:600 }
.sub{ color:var(--slate); font-size:1.12rem; max-width:34ch; margin:20px 0 28px }
.cta-row{ display:flex; flex-direction:column; gap:10px; align-items:flex-start }
.cta{
  display:inline-flex; align-items:center; gap:10px; text-decoration:none;
  background:var(--teal); color:#fff; font-weight:600; font-size:1.02rem;
  padding:13px 22px; border-radius:12px; box-shadow:0 1px 0 rgba(24,106,94,.5), 0 10px 24px -12px rgba(30,122,108,.7);
  transition:transform .12s ease, background .12s ease;
}
.cta:hover{ background:var(--teal-dark); transform:translateY(-1px) }
.cta.is-soon{ background:var(--slate-soft); box-shadow:none; cursor:default; pointer-events:none }
.chrome{ flex:none }
.cta-note{ color:var(--slate-soft); font-size:.86rem }

/* ---- preview card ---- */
.preview{ display:flex; flex-direction:column; gap:12px; align-items:center }
.card{
  width:100%; max-width:380px; background:var(--card); border:1px solid var(--edge);
  border-radius:18px; padding:24px 24px 18px;
  box-shadow:0 1px 2px rgba(25,35,43,.04), 0 30px 60px -34px rgba(25,35,43,.35);
}
.card-head{ display:flex; justify-content:space-between; align-items:center; font-size:.74rem }
.kicker{ color:var(--teal-dark); font-weight:700; letter-spacing:.09em; text-transform:uppercase }
.stamp{ color:var(--slate-soft); letter-spacing:.02em }
.card-name{ font-family:var(--serif); font-size:1.18rem; font-weight:600; margin:14px 0 10px }
.card-reading{ display:flex; align-items:baseline; gap:14px; flex-wrap:wrap }
.value{ font-family:var(--serif); font-size:2.9rem; font-weight:600; line-height:1; letter-spacing:-.02em }
.value .pct{ font-size:1.5rem; margin-left:1px; color:var(--slate) }
.card-delta{ color:var(--teal-dark); font-weight:600; font-size:.92rem }
.card-delta .chev{ color:var(--teal) }
.card-delta .muted{ color:var(--slate-soft); font-weight:500 }
.spark{ width:100%; height:64px; margin:14px 0 6px; display:block }
.spark-area{ fill:rgba(231,163,92,.12); stroke:none }
.spark-line{ fill:none; stroke:var(--dawn); stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round }
.spark-dot{ fill:var(--dawn-dark) }
.card-compare{ font-size:.9rem; color:var(--ink); margin:6px 0 0 }
.card-compare .you{ color:var(--slate) }
.card-compare .real{ color:var(--teal-dark) }
.card-compare .tail{ color:var(--slate-soft); font-weight:500 }
.card-foot{ margin-top:14px; padding-top:12px; border-top:1px solid var(--rule); font-size:.8rem }
.card-foot .src{ color:var(--slate-soft) }
.preview-cap{ color:var(--slate-soft); font-size:.85rem; text-align:center; margin:0; max-width:34ch }

/* ---- bands / cols ---- */
.band{ max-width:var(--maxw); margin:0 auto; padding:56px 24px }
.band-h, .why-h, .final h2{ font-family:var(--serif); font-weight:600 }
.band-h{ font-size:1.7rem; margin-bottom:6px }
.band-lead{ color:var(--slate); max-width:60ch; font-size:1.05rem }
.cols{ display:grid; grid-template-columns:repeat(3,1fr); gap:30px; margin-top:30px }
.col-num{ color:var(--dawn-dark); font-weight:700; font-size:.8rem; letter-spacing:.08em }
.col h3{ font-size:1.14rem; margin:8px 0 8px; font-weight:650 }
.col p{ color:var(--slate); margin:0; font-size:.99rem }

/* ---- why ---- */
.why{ background:linear-gradient(180deg, rgba(30,122,108,.05), rgba(30,122,108,0)); border-block:1px solid var(--rule) }
.why{ }
.why{ padding:0 }
.why > *{ max-width:var(--maxw); margin-inline:auto; padding-inline:24px }
.why{ padding-block:60px }
.why-h{ font-size:2rem; margin-bottom:14px }
.why-b{ color:var(--ink); font-size:1.18rem; max-width:62ch; line-height:1.7 }

/* ---- privacy band ---- */
.privacy-band{ }
.ghost-link{ display:inline-block; margin-top:16px; color:var(--teal-dark); font-weight:600; text-decoration:none }
.ghost-link:hover{ text-decoration:underline }

/* ---- final ---- */
.final{ max-width:var(--maxw); margin:0 auto; padding:20px 24px 80px; text-align:center }
.final h2{ font-size:1.7rem; margin-bottom:22px }

/* ---- footer ---- */
.foot{
  border-top:1px solid var(--rule); background:#fff;
}
.foot{
  display:flex; flex-wrap:wrap; gap:14px 28px; align-items:center; justify-content:space-between;
  max-width:var(--maxw); margin:0 auto; padding:28px 24px;
}
.foot-brand{ font-weight:650 }
.foot-note{ color:var(--slate-soft); font-size:.9rem; flex:1; min-width:200px }
.foot-links a{ color:var(--slate); text-decoration:none; font-size:.9rem }
.foot-links a:hover{ color:var(--ink) }

/* ---- privacy page ---- */
.doc{ max-width:740px; margin:0 auto; padding:20px 24px 80px }
.doc h1{ font-family:var(--serif); font-size:2rem; font-weight:600; margin:18px 0 8px }
.doc .updated{ color:var(--slate-soft); font-size:.9rem; margin:0 0 28px }
.doc h2{ font-family:var(--serif); font-size:1.25rem; margin:34px 0 8px }
.doc p, .doc li{ color:var(--ink) }
.doc p{ margin:10px 0 }
.doc ul{ margin:10px 0; padding-left:22px }
.doc li{ margin:6px 0 }
.doc a{ color:var(--teal-dark) }
.back{ display:inline-block; margin-top:8px; color:var(--slate); text-decoration:none; font-size:.92rem }

/* ---- responsive ---- */
@media (max-width:820px){
  .hero{ grid-template-columns:1fr; gap:36px; padding-top:32px }
  .preview{ order:2 }
  .cols{ grid-template-columns:1fr; gap:24px }
  .sub{ max-width:none }
}
@media (prefers-reduced-motion:reduce){ .cta{ transition:none } }