:root {
    --bg: #fff;
    --ink: #1c1b1b;
    --text: #2c2d33;
    --muted: #6a6c77;
    --line: #e2e2e2;
    --green: #59b957;
    --green-dark: #32ab26;
    --green-soft: #f1f9f0;
    --red: #f94c43;
  }
  * { box-sizing: border-box; }
  html, body { margin: 0; }
  body {
    min-height: 100vh;
    background: var(--bg);
    color: var(--text);
    font: 400 16px/1.55 "Open Sans", system-ui, sans-serif;
  }
  .topbar { height: 6px; background: var(--green); }
  header { display: flex; justify-content: center; padding: 28px 16px 4px; }
  header img { width: 160px; height: auto; }

  main { max-width: 720px; margin: 0 auto; padding: 8px 16px 64px; }

  .progress { display: flex; gap: 6px; margin: 20px 0 32px; }
  .progress span { flex: 1; height: 6px; background: var(--line); }
  .progress span.on { background: var(--green); }

  .step { display: none; animation: rise .3s ease; }
  .step.active { display: block; }
  @keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
  @media (prefers-reduced-motion: reduce) { .step { animation: none; } }

  .kicker {
    margin: 0 0 10px;
    color: var(--green-dark);
    font-weight: 600; font-size: 13px; text-transform: uppercase; letter-spacing: 3px;
  }
  h1, h2 {
    margin: 0 0 10px;
    color: var(--ink);
    font: 800 clamp(26px, 5.5vw, 40px)/1.15 "Open Sans", sans-serif;
    text-transform: uppercase; letter-spacing: .5px;
  }
  .sub { margin: 0 0 28px; color: var(--muted); }

  .grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
  .grid.two { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }

  .opt {
    display: flex; align-items: center; gap: 12px;
    width: 100%; padding: 16px 18px;
    background: var(--bg); color: var(--ink);
    border: 2px solid var(--green); border-radius: 10px;
    font: 700 16px/1.25 "Open Sans", sans-serif; text-align: left;
    cursor: pointer; transition: background .12s, color .12s, transform .12s;
  }
  .opt:hover { background: var(--green-soft); transform: translateY(-1px); }
  .opt:active, .opt.picked { background: var(--green); color: #fff; }
  .opt.picked small { color: #eaf7e9; }
  .opt:focus-visible, .btn:focus-visible, select:focus-visible, .foot-links a:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
  .opt .emo { font-size: 26px; line-height: 1; }
  .opt small { display: block; margin-top: 2px; font-weight: 400; font-size: 13px; color: var(--muted); }
  .opt.no { border-color: var(--line); }
  .opt.no:hover { background: #f6f6f6; }

  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 16px 34px;
    background: var(--green); color: #fff;
    border: 0; border-radius: 0;
    font: 600 14px/1 "Open Sans", sans-serif; text-transform: uppercase; letter-spacing: 2.6px;
    text-decoration: none; cursor: pointer; transition: background .12s;
  }
  .btn:hover { background: var(--green-dark); }
  .btn:disabled { opacity: .4; cursor: not-allowed; background: var(--green); }
  .btn.ghost {
    background: transparent; color: var(--ink); border: 1px solid #ccc;
    padding: 12px 20px; font-size: 12px; letter-spacing: 2px;
  }
  .btn.ghost:hover { border-color: var(--ink); }

  label.field { display: block; margin-bottom: 20px; color: var(--ink); font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: 2px; }
  select {
    display: block; width: 100%; margin-top: 8px; padding: 15px 18px;
    background: var(--bg); color: var(--ink);
    border: 2px solid var(--green); border-radius: 10px;
    font: 600 16px "Open Sans", sans-serif; text-transform: none; letter-spacing: 0; appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--green) 50%), linear-gradient(135deg, var(--green) 50%, transparent 50%);
    background-position: calc(100% - 26px) 50%, calc(100% - 19px) 50%;
    background-size: 7px 7px; background-repeat: no-repeat;
  }

  .nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 32px; }
  .nav.stack { flex-direction: column; justify-content: center; gap: 14px; }

  .notice {
    padding: 16px 18px; margin-top: 20px;
    background: #fff5f4; border: 1px solid var(--red); border-radius: 10px; color: var(--ink);
  }

  /* footer */
  .site-footer {
    max-width: 720px; margin: 0 auto; padding: 28px 16px 40px;
    border-top: 1px solid var(--line);
    font-size: 13px; color: var(--muted); text-align: center;
  }
  .site-footer p { margin: 8px 0; }
  .site-footer a { color: inherit; }
  .site-footer a:hover { color: var(--green-dark); }
  .foot-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 24px; margin-bottom: 14px; }
  .foot-links a { color: var(--ink); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 2px; text-decoration: none; }

  /* text pages (terms, privacy, contact) */
  header a { display: inline-block; }
  .page h1 { margin-bottom: 24px; }
  .prose { font-size: 15px; line-height: 1.75; overflow-wrap: anywhere; }
  .prose h2, .prose h3 { margin: 32px 0 8px; color: var(--ink); font: 700 16px/1.3 "Open Sans", sans-serif; text-transform: uppercase; letter-spacing: 2px; }
  .prose strong, .prose b { color: var(--ink); }
  .prose blockquote { margin: 16px 0; padding: 4px 18px; border-left: 4px solid var(--green); background: var(--green-soft); }
  .prose a { color: var(--green-dark); }
  .info { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); margin: 24px 0; }
  .info div { padding: 16px 18px; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); }
  .info b { display: block; margin-bottom: 4px; color: var(--green-dark); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; }
  .info a { color: var(--ink); }
  .info small { display: block; margin-top: 4px; color: var(--muted); }