/* ============================================================================
   MyChoice — shared design system
   ----------------------------------------------------------------------------
   Canonical tokens + components for mychoice-web. Extracted from the homepage
   so every page reads as one product instead of three separate builds.

   Currently used by: /alpha/ (hub), /alpha/join/ (signup).
   NOT yet used by: / , /get-your-data/, /app/ — those still carry their own
   inline styles. Migrate them one at a time; the tokens below are identical to
   the homepage's, so a migrated page should look unchanged.

   No external fonts or assets — the site CSP allows font-src 'self' only.
   ========================================================================== */

:root{
  /* Brand */
  --teal:#2fb3a0;
  --teal-d:#1f9384;
  --teal-soft:#e6f6f3;
  --teal-line:#cfeee8;
  --navy:#16324b;
  --lav:#6f6ae0;

  /* Ink + surfaces */
  --ink:#16324b;
  --muted:#5d7288;
  --page:#f6faf9;
  --card:#fff;
  --line:#e4ecec;

  /* Status */
  --good:#1a9d6b;
  --good-soft:#f0faf5;
  --bad:#c0435f;
  --bad-soft:#fdf3f5;
  --watch:#b56b1c;
  --watch-soft:#fdf1df;
  --watch-line:#fde3cf;

  /* Form */
  --r:18px;
  --r-sm:12px;
  --shadow:0 1px 2px rgba(20,50,60,.05),0 10px 26px rgba(20,50,60,.07);
  --shadow-lift:0 2px 6px rgba(20,50,60,.06),0 18px 40px rgba(20,50,60,.10);
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--page);color:var(--ink);
  font-family:var(--sans);-webkit-font-smoothing:antialiased;line-height:1.5;
}
a{color:var(--teal-d)}
:focus-visible{outline:2.5px solid var(--teal-d);outline-offset:2px;border-radius:6px}

.wrap{max-width:1120px;margin:0 auto;padding:0 20px}
.wrap.narrow{max-width:860px}
.spacer{flex:1}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------------------------------------------------------------- Nav ---- */
.nav{display:flex;align-items:center;gap:14px;padding:18px 0;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand .word{font-size:21px;font-weight:800;letter-spacing:-.02em;color:var(--navy)}
.brand .word b{color:var(--teal-d)}
.by{font-size:12px;color:var(--muted);margin-top:4px}
.navlinks{display:flex;gap:20px;align-items:center;flex-wrap:wrap}
.navlinks a{font-size:14px;font-weight:600;color:var(--navy);text-decoration:none}
.navlinks a:hover{color:var(--teal-d)}

/* ------------------------------------------------------------ Buttons ---- */
.btn{
  display:inline-block;background:var(--teal-d);color:#fff !important;border:0;border-radius:var(--r-sm);
  padding:12px 20px;font-weight:700;font-size:14.5px;font-family:inherit;cursor:pointer;
  text-decoration:none;transition:background .15s,transform .15s;
}
.btn:hover{background:#187a6d}
.btn:active{transform:translateY(1px)}
.btn.ghost{background:#fff;color:var(--teal-d) !important;border:1.5px solid #bcdfd9}
.btn.ghost:hover{background:var(--teal-soft)}
.btn.big{padding:14px 26px;font-size:15.5px}
.btn[aria-disabled="true"]{background:#c3d0d4;cursor:not-allowed;pointer-events:none}

/* --------------------------------------------------------------- Hero ---- */
.hero{
  border-radius:22px;margin:10px 0 26px;padding:46px 44px;color:#fff;
  background:linear-gradient(135deg,#16324b 0%,#1f9384 78%,#2fb3a0 100%);
  box-shadow:var(--shadow);
}
.hero .eyebrow{
  display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.25);border-radius:999px;padding:6px 14px;
}
.hero h1{font-size:clamp(28px,4.4vw,42px);line-height:1.12;margin:18px 0 0;letter-spacing:-.02em;max-width:20ch}
.hero p.sub{margin:16px 0 0;font-size:17px;line-height:1.55;opacity:.94;max-width:56ch}
.hero .ctas{margin-top:26px;display:flex;gap:12px;flex-wrap:wrap}
.hero .btn{background:#fff;color:var(--navy) !important}
.hero .btn:hover{background:var(--teal-soft)}
.hero .btn.ghost{background:transparent;color:#fff !important;border:1.5px solid rgba(255,255,255,.55)}
.hero .btn.ghost:hover{background:rgba(255,255,255,.12)}
.hero .fine{margin-top:16px;font-size:12.5px;opacity:.78;max-width:60ch}
@media(max-width:820px){.hero{padding:34px 24px}}

/* ----------------------------------------------------------- Sections ---- */
section{padding:34px 0 8px}
.kicker{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--teal-d)}
h2.title{font-size:clamp(22px,3vw,28px);margin:8px 0 10px;letter-spacing:-.015em;color:var(--navy)}
p.lead{font-size:16px;color:var(--muted);max-width:64ch;margin:0 0 22px}

/* -------------------------------------------------------------- Cards ---- */
.grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:980px){.g4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:820px){.g2,.g3{grid-template-columns:1fr}}
@media(max-width:560px){.g4{grid-template-columns:1fr}}

.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:22px;box-shadow:var(--shadow)}
.card h3{margin:10px 0 6px;font-size:17px;color:var(--navy)}
.card p{margin:0;font-size:14px;color:var(--muted);line-height:1.6}
.card p + p{margin-top:10px}
.card .cta-row{margin-top:16px;display:flex;gap:10px;flex-wrap:wrap}
.card.quiet{background:transparent;box-shadow:none;border-style:dashed}

.ico{width:42px;height:42px;border-radius:12px;background:var(--teal-soft);
  display:flex;align-items:center;justify-content:center;color:var(--teal-d)}

.tag{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--teal-d);background:var(--teal-soft);border-radius:999px;padding:4px 11px}
.tag.lav{color:#4b46c4;background:#eeedfb}
.tag.watch{color:var(--watch);background:var(--watch-soft)}
.tag.muted{color:var(--muted);background:#eef3f2}

/* -------------------------------------------------------------- Steps ---- */
.step .n{width:30px;height:30px;border-radius:50%;background:var(--navy);color:#fff;font-weight:800;font-size:14px;
  display:flex;align-items:center;justify-content:center}
.step .when{display:block;margin-top:12px;font-size:12.5px;color:var(--teal-d);font-weight:700}

/* -------------------------------------------------------- Status board ---- */
.board{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:24px;box-shadow:var(--shadow)}
.board h3{margin:0 0 4px;font-size:16px;color:var(--navy)}
.board .boardnote{margin:0 0 16px;font-size:13.5px;color:var(--muted)}
.statelist{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.statelist li{display:flex;gap:10px;align-items:flex-start;font-size:14px;padding:10px 13px;border-radius:10px;line-height:1.5}
.statelist li .mk{flex:none;font-weight:800;line-height:1.4}
.statelist li b{color:var(--navy);font-weight:700}
.statelist li span.det{color:var(--muted)}
.st-yes{background:var(--good-soft)}       .st-yes .mk{color:var(--good)}
.st-work{background:var(--watch-soft)}     .st-work .mk{color:var(--watch)}
.st-no{background:var(--bad-soft)}         .st-no .mk{color:var(--bad)}

/* --------------------------------------------------------- Update feed ---- */
.feed{display:grid;gap:14px}
.entry{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:20px 22px;box-shadow:var(--shadow)}
.entry .meta{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:10px}
.entry .date{font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.entry h3{margin:0 0 6px;font-size:17px;color:var(--navy);letter-spacing:-.01em}
.entry p{margin:0;font-size:14.5px;color:var(--muted);line-height:1.65}
.entry p + p{margin-top:10px}
.entry.new{border-color:#bcdfd9;box-shadow:var(--shadow-lift)}
.entry .newflag{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--teal-d)}

/* --------------------------------------------------------------- Note ---- */
.note{display:flex;gap:12px;align-items:flex-start;background:var(--teal-soft);border:1px solid var(--teal-line);
  border-radius:14px;padding:16px 18px;margin:0 0 22px;font-size:14.5px;color:var(--ink);line-height:1.6}
.note b{color:var(--teal-d)}
.note .vb{font-size:18px;flex:none;line-height:1.3}
.note.warn{background:var(--watch-soft);border-color:var(--watch-line);color:#7a4318}
.note.warn b{color:var(--watch)}

/* --------------------------------------------------------------- Form ---- */
.field{margin:14px 0}
.field label{display:block;font-weight:600;font-size:13.5px;color:var(--navy);margin-bottom:6px}
.field input,.field select,.field textarea{
  width:100%;border:1px solid var(--line);border-radius:10px;padding:11px 12px;
  font-size:14.5px;font-family:inherit;color:var(--ink);background:#fff;
}
.field textarea{min-height:110px;resize:vertical;line-height:1.55}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--teal);outline:none;box-shadow:0 0 0 3px rgba(47,179,160,.16)}
.field .hint{font-size:12.5px;color:var(--muted);margin-top:6px}
.consent{display:flex;gap:9px;align-items:flex-start;font-size:13.5px;margin-top:12px;line-height:1.55}
.consent input{margin-top:3px;flex:none}
.status{font-size:13.5px;color:var(--muted);margin-top:12px;min-height:1.2em}
.status.err{color:var(--bad)}
.draft{background:var(--watch-soft);border:1px solid var(--watch-line);color:#7a4318;
  border-radius:10px;padding:10px 13px;font-size:12.5px;margin-top:14px;line-height:1.55}

/* ------------------------------------------------------------- Footer ---- */
footer{margin:44px 0 0;padding:26px 0 40px;border-top:1px solid var(--line);font-size:13px;color:var(--muted)}
footer .cols{display:flex;gap:24px;flex-wrap:wrap;align-items:center}
footer a{color:var(--muted);text-decoration:none}
footer a:hover{color:var(--teal-d)}
footer .fine{margin-top:12px;line-height:1.6;max-width:78ch}

/* -------------------------------------------------- Wide-desktop scale ---- */
@media(min-width:1280px){
  .wrap{max-width:1220px}
  .hero{padding:56px 56px}
  .hero h1{font-size:clamp(34px,3.2vw,48px)}
  .hero p.sub{font-size:19px}
  h2.title{font-size:clamp(26px,2.4vw,33px)}
  p.lead{font-size:17.5px;max-width:68ch}
  .card{padding:26px}
  .card h3{font-size:18.5px}
  .card p{font-size:15px}
  .statelist li{font-size:15px}
  .entry p{font-size:15.5px}
  .navlinks a{font-size:15px}
  body{line-height:1.55}
}

/* ----------------------------------------------------------- A11y prefs -- */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .btn{transition:none}
}