:root{
    --bg:#fbfaf7; --panel:#ffffff; --line:#e7e3da;
    --ink:#1d2016; --mute:#5f6656;
    --leaf:#2f6b3a; --leaf-2:#3e8c4b; --tom:#c8452f; --sun:#d8a125;
    --radius:14px;
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --bg:#101208; --panel:#171a10; --line:#2b3020;
      --ink:#eef0e6; --mute:#9aa38c;
      --leaf:#7ec98c; --leaf-2:#5fae70; --tom:#ef7157; --sun:#e5b84b;
    }
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    margin:0; background:var(--bg); color:var(--ink);
    font:16px/1.6 ui-sans-serif,-apple-system,"Segoe UI",Inter,Helvetica,Arial,sans-serif;
    -webkit-font-smoothing:antialiased;
  }
  a{color:inherit}
  .wrap{width:min(1080px,92vw); margin:0 auto}
  h1,h2,h3{line-height:1.15; letter-spacing:-0.02em; margin:0}

  /* header */
  header{position:sticky; top:0; z-index:20; backdrop-filter:blur(10px);
    background:color-mix(in srgb, var(--bg) 82%, transparent); border-bottom:1px solid var(--line)}
  .bar{display:flex; align-items:center; gap:24px; padding:14px 0}
  .logo{display:flex; align-items:center; gap:9px; font-weight:650; letter-spacing:-0.02em; text-decoration:none}
  .logo .dot{width:11px; height:11px; border-radius:50%; background:var(--tom); box-shadow:0 0 0 3px color-mix(in srgb,var(--tom) 22%,transparent)}
  nav{margin-left:auto; display:flex; gap:22px; font-size:14px; color:var(--mute)}
  nav a{text-decoration:none}
  nav a:hover{color:var(--ink)}
  @media(max-width:680px){nav{display:none}}

  .btn{display:inline-flex; align-items:center; gap:8px; padding:11px 18px; border-radius:10px;
    font-size:15px; font-weight:560; text-decoration:none; border:1px solid transparent; white-space:nowrap}
  .btn-primary{background:var(--leaf); color:#fff}
  :root:not([data-theme="light"]) .btn-primary{color:#0f1409}
  @media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .btn-primary{color:#0f1409}}
  .btn-primary:hover{background:var(--leaf-2)}
  .btn-ghost{border-color:var(--line); color:var(--ink)}
  .btn-ghost:hover{border-color:var(--mute)}

  /* hero */
  .hero{padding:82px 0 64px; display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center}
  @media(max-width:860px){.hero{grid-template-columns:1fr; padding:52px 0 40px; gap:36px}}
  .eyebrow{display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:560;
    color:var(--leaf); background:color-mix(in srgb,var(--leaf) 12%,transparent);
    border:1px solid color-mix(in srgb,var(--leaf) 26%,transparent); padding:5px 11px; border-radius:999px}
  .hero h1{font-size:clamp(34px,5.2vw,54px); margin:18px 0 0; font-weight:680}
  .hero h1 em{font-style:normal; color:var(--tom)}
  .lede{font-size:18px; color:var(--mute); margin:18px 0 0; max-width:52ch}
  .cta{display:flex; gap:12px; margin-top:28px; flex-wrap:wrap}
  .fineprint{font-size:13px; color:var(--mute); margin-top:14px}

  /* hero card */
  .card{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius)}
  .scan{padding:20px; box-shadow:0 18px 44px -28px rgba(0,0,0,.45)}
  .scan-head{display:flex; align-items:center; justify-content:space-between; font-size:12.5px; color:var(--mute); margin-bottom:14px}
  .pill{font-size:11.5px; font-weight:600; padding:3px 9px; border-radius:999px;
    background:color-mix(in srgb,var(--sun) 18%,transparent); color:var(--sun);
    border:1px solid color-mix(in srgb,var(--sun) 34%,transparent)}
  .diag{display:flex; align-items:baseline; gap:10px}
  .diag b{font-size:21px; font-weight:640}
  .conf{font-size:13px; color:var(--mute)}
  .meters{margin-top:18px; display:grid; gap:13px}
  .meter b{display:flex; justify-content:space-between; font-size:13px; font-weight:520; color:var(--mute)}
  .meter b span:last-child{color:var(--ink); font-variant-numeric:tabular-nums}
  .track{height:7px; border-radius:99px; background:color-mix(in srgb,var(--ink) 9%,transparent); margin-top:6px; overflow:hidden}
  .fill{height:100%; border-radius:99px}
  .actions{margin-top:20px; border-top:1px solid var(--line); padding-top:16px; display:grid; gap:9px}
  .act{display:flex; gap:10px; font-size:14px; align-items:flex-start}
  .rank{flex:none; width:19px; height:19px; border-radius:5px; font-size:11px; font-weight:700;
    display:grid; place-items:center; background:color-mix(in srgb,var(--leaf) 16%,transparent); color:var(--leaf); margin-top:2px}

  /* sections */
  section{padding:66px 0; border-top:1px solid var(--line)}
  .kicker{font-size:13px; font-weight:620; letter-spacing:.08em; text-transform:uppercase; color:var(--mute)}
  section h2{font-size:clamp(25px,3.4vw,34px); margin:12px 0 0; font-weight:660; max-width:22ch}
  section .sub{color:var(--mute); margin:14px 0 0; max-width:60ch}

  .grid{display:grid; gap:16px; margin-top:36px}
  .g3{grid-template-columns:repeat(3,1fr)}
  .g4{grid-template-columns:repeat(4,1fr)}
  @media(max-width:860px){.g3,.g4{grid-template-columns:repeat(2,1fr)}}
  @media(max-width:560px){.g3,.g4{grid-template-columns:1fr}}
  .cell{padding:22px; background:var(--panel); border:1px solid var(--line); border-radius:var(--radius)}
  .cell h3{font-size:16.5px; font-weight:620; margin-bottom:8px}
  .cell p{margin:0; font-size:14.5px; color:var(--mute)}
  .cell .tag{font-size:11.5px; font-weight:650; letter-spacing:.05em; text-transform:uppercase; color:var(--leaf); display:block; margin-bottom:10px}

  ol.steps{counter-reset:s; list-style:none; padding:0; margin:36px 0 0; display:grid; gap:16px; grid-template-columns:repeat(3,1fr)}
  @media(max-width:760px){ol.steps{grid-template-columns:1fr}}
  ol.steps li{counter-increment:s; padding:22px; background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); position:relative}
  ol.steps li::before{content:counter(s); font-size:12px; font-weight:700; color:var(--leaf);
    background:color-mix(in srgb,var(--leaf) 14%,transparent); width:24px; height:24px; border-radius:7px;
    display:grid; place-items:center; margin-bottom:12px}
  ol.steps h3{font-size:16.5px; margin-bottom:7px}
  ol.steps p{margin:0; font-size:14.5px; color:var(--mute)}

  table{width:100%; border-collapse:collapse; margin-top:30px; font-size:14.5px}
  .tablewrap{overflow-x:auto}
  th,td{text-align:left; padding:12px 14px; border-bottom:1px solid var(--line)}
  th{font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--mute); font-weight:620}
  td code{font-size:13px; background:color-mix(in srgb,var(--ink) 7%,transparent); padding:2px 6px; border-radius:5px}

  .honest{display:flex; gap:12px; align-items:flex-start; margin-top:30px; padding:18px 20px;
    border-radius:var(--radius); border:1px dashed var(--line); color:var(--mute); font-size:14.5px}

  /* signup */
  .signup{background:var(--panel); border:1px solid var(--line); border-radius:20px; padding:44px; text-align:center; margin-top:8px}
  @media(max-width:560px){.signup{padding:30px 22px}}
  .signup h2{margin:0 auto; max-width:20ch}
  form{display:flex; gap:10px; justify-content:center; margin:26px auto 0; max-width:440px; flex-wrap:wrap}
  input[type=email]{flex:1 1 230px; padding:12px 14px; border-radius:10px; border:1px solid var(--line);
    background:var(--bg); color:var(--ink); font-size:15px; font-family:inherit}
  input[type=email]:focus{outline:2px solid color-mix(in srgb,var(--leaf) 50%,transparent); outline-offset:1px; border-color:transparent}

  .hp{position:absolute; left:-9999px; width:1px; height:1px; opacity:0}
  .status{min-height:1.4em; margin:14px 0 0; font-size:14px; color:var(--mute)}
  .status.ok{color:var(--leaf)}
  .status.err{color:var(--tom)}

  footer{border-top:1px solid var(--line); padding:30px 0; display:flex; gap:16px; flex-wrap:wrap;
    align-items:center; font-size:14px; color:var(--mute)}
  footer nav{margin-left:auto; display:flex; gap:18px}

  /* contact page */
  .page{padding:56px 0 70px; max-width:640px}
  .page h1{font-size:clamp(30px,4.4vw,42px); font-weight:680}
  .field{display:grid; gap:6px; margin-top:18px; text-align:left}
  .field label{font-size:13.5px; font-weight:560; color:var(--mute)}
  .field input, .field textarea, .field select{
    padding:12px 14px; border-radius:10px; border:1px solid var(--line);
    background:var(--panel); color:var(--ink); font-size:15px; font-family:inherit; width:100%}
  .field textarea{min-height:150px; resize:vertical; line-height:1.55}
  .field input:focus, .field textarea:focus, .field select:focus{
    outline:2px solid color-mix(in srgb,var(--leaf) 50%,transparent); outline-offset:1px; border-color:transparent}
  .field .hint{font-size:12.5px; color:var(--mute)}
  form.stack{display:block; max-width:none; margin:0}
  form.stack button{margin-top:24px}

  /* long-form prose pages (about, privacy, terms) */
  .page h2{font-size:20px; font-weight:640; margin:38px 0 0}
  .page p{margin:14px 0 0; color:var(--ink)}
  .page p.sub{color:var(--mute)}
  .page ul{margin:14px 0 0; padding-left:22px; color:var(--ink)}
  .page li{margin:8px 0}
  .page a{color:var(--leaf); text-decoration:underline; text-underline-offset:2px}
  .page .cta{margin-top:28px}
  .page .fineprint{margin-top:34px; padding-top:18px; border-top:1px solid var(--line)}