/* Where To Buy → Klaviyo — onboarding styles (theme-aware) */
:root {
  --ground:#F5F7F3; --surface:#FFFFFF; --surface-2:#F0F3ED;
  --ink:#17211B; --ink-2:#4C5A50; --ink-3:#7A8A7E;
  --line:#DCE3D9; --line-2:#C6D0C2;
  --accent:#1F6F4A; --accent-press:#185839; --accent-ink:#FFFFFF; --accent-soft:#E4F0E8;
  --good:#1F8A57; --warn:#B0791A;
  --shadow:0 1px 2px rgba(20,40,28,.06),0 8px 30px rgba(20,40,28,.08);
  --radius:14px;
  --mono:ui-monospace,"SF Mono","SFMono-Regular",Menlo,Consolas,monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --ground:#0E1512; --surface:#16201B; --surface-2:#1C2822;
  --ink:#E7EEE8; --ink-2:#A9B7AD; --ink-3:#7C8B80;
  --line:#263229; --line-2:#334337;
  --accent:#4FBE86; --accent-press:#6BCE99; --accent-ink:#08130C; --accent-soft:#17271D;
  --good:#4FBE86; --warn:#D6A93E;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 12px 40px rgba(0,0,0,.35);
}}
:root[data-theme="dark"]{
  --ground:#0E1512; --surface:#16201B; --surface-2:#1C2822;
  --ink:#E7EEE8; --ink-2:#A9B7AD; --ink-3:#7C8B80;
  --line:#263229; --line-2:#334337;
  --accent:#4FBE86; --accent-press:#6BCE99; --accent-ink:#08130C; --accent-soft:#17271D;
  --good:#4FBE86; --warn:#D6A93E;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 12px 40px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--sans);line-height:1.5;-webkit-font-smoothing:antialiased;display:flex;flex-direction:column;min-height:100vh}
a{color:var(--accent)}
header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;max-width:620px;width:100%;margin:0 auto}
.wordmark{display:flex;align-items:center;gap:9px;font-weight:650;letter-spacing:-.01em;font-size:.95rem}
.wordmark .leaf{width:22px;height:22px;display:grid;place-items:center;background:var(--accent);color:var(--accent-ink);border-radius:7px;font-size:.8rem}
.wordmark .arrow{color:var(--ink-3);font-weight:400}
.themebtn{border:1px solid var(--line);background:var(--surface);color:var(--ink-2);border-radius:8px;width:34px;height:30px;cursor:pointer;font-size:.9rem}
.themebtn:hover{border-color:var(--line-2)}
main{flex:1;display:flex;justify-content:center;align-items:flex-start;padding:12px 20px 48px}
.card{width:100%;max-width:540px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.steps{display:flex;padding:14px 22px;border-bottom:1px solid var(--line)}
.step{display:flex;align-items:center;gap:8px;flex:1;font-size:.78rem;color:var(--ink-3);min-width:0}
.step .dot{width:22px;height:22px;border-radius:999px;display:grid;place-items:center;flex:none;border:1.5px solid var(--line-2);font-size:.72rem;font-weight:650;font-variant-numeric:tabular-nums;color:var(--ink-3);background:var(--surface)}
.step .lbl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.step.active{color:var(--ink)}
.step.active .dot{border-color:var(--accent);color:var(--accent)}
.step.done .dot{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.step.done{color:var(--ink-2)}
@media (max-width:460px){.step .lbl{display:none}.step{flex:none}.steps{gap:6px}}
.panel{padding:26px 24px 24px}
.panel[hidden]{display:none}
h1{font-size:1.32rem;line-height:1.2;letter-spacing:-.02em;margin:0 0 6px;text-wrap:balance}
.sub{color:var(--ink-2);margin:0 0 20px;font-size:.95rem}
label{display:block;font-size:.8rem;font-weight:600;margin:0 0 6px;color:var(--ink)}
.hint{font-size:.78rem;color:var(--ink-3)}
input[type=text],input[type=email],input[type=url]{width:100%;padding:11px 12px;font-size:.95rem;font-family:var(--sans);background:var(--surface);color:var(--ink);border:1px solid var(--line-2);border-radius:10px;outline:none}
input:focus-visible{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.field+.field{margin-top:16px}
.row{display:flex;gap:8px}.row>input{flex:1}
button.primary{appearance:none;border:0;cursor:pointer;font-family:var(--sans);background:var(--accent);color:var(--accent-ink);font-weight:640;font-size:.95rem;padding:12px 16px;border-radius:10px;width:100%;margin-top:20px}
button.primary:hover{background:var(--accent-press)}
button.primary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
button.primary:disabled{opacity:.5;cursor:default}
button.ghost{appearance:none;cursor:pointer;font-family:var(--sans);white-space:nowrap;background:var(--surface);color:var(--ink);font-weight:560;font-size:.9rem;padding:11px 14px;border:1px solid var(--line-2);border-radius:10px}
button.ghost:hover{border-color:var(--accent);color:var(--accent)}
button.ghost:disabled{opacity:.5;cursor:default}
.backlink{background:none;border:0;color:var(--ink-3);cursor:pointer;font:inherit;font-size:.82rem;padding:0;margin-top:16px}
.backlink:hover{color:var(--ink)}
.detect{margin-top:18px;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.detect .drow{display:flex;align-items:center;gap:10px;padding:11px 14px;border-top:1px solid var(--line);font-size:.9rem}
.detect .drow:first-child{border-top:0}
.detect .k{color:var(--ink-2);width:132px;flex:none}
.detect .v{font-family:var(--mono);font-size:.84rem;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.tick{color:var(--good);font-weight:700;flex:none}
.pill{font-size:.72rem;font-weight:600;padding:2px 9px;border-radius:999px;background:var(--accent-soft);color:var(--accent)}
.looking{display:flex;align-items:center;gap:9px;color:var(--ink-2);font-size:.88rem;margin-top:16px}
.spin{width:15px;height:15px;border:2px solid var(--line-2);border-top-color:var(--accent);border-radius:999px;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spin{animation:none}}
.callout{margin-top:18px;font-size:.82rem;color:var(--ink-2);background:var(--surface-2);border-radius:10px;padding:11px 14px;border:1px solid var(--line)}
.callout b{color:var(--ink);font-weight:620}
.err{color:var(--warn);font-size:.82rem;margin-top:8px;min-height:1em}
.success-badge{display:inline-flex;align-items:center;gap:8px;color:var(--good);font-weight:620;font-size:.9rem;margin-bottom:4px}
.keycard{margin-top:6px;background:var(--surface-2);border:1px solid var(--line);border-radius:12px;padding:14px 16px}
.keycard .klabel{font-size:.72rem;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-3);font-weight:600}
.keyrow{display:flex;align-items:center;gap:10px;margin-top:6px}
.keyrow code{font-family:var(--mono);font-size:1rem;font-weight:600;color:var(--ink);flex:1;overflow-x:auto}
.copybtn{border:1px solid var(--line-2);background:var(--surface);color:var(--ink-2);border-radius:8px;padding:6px 10px;font-size:.78rem;cursor:pointer;flex:none}
.copybtn:hover{border-color:var(--accent);color:var(--accent)}
.tabs{display:flex;gap:6px;margin:22px 0 0}
.tab{flex:1;text-align:center;padding:9px;border:1px solid var(--line);background:var(--surface);border-radius:10px;cursor:pointer;font-size:.86rem;font-weight:560;color:var(--ink-2)}
.tab[aria-selected="true"]{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.tabpanel[hidden]{display:none}
.tabpanel{margin-top:16px}
ol.steps-list{margin:0;padding-left:20px;color:var(--ink);font-size:.92rem}
ol.steps-list li{margin:8px 0}
.paste{font-family:var(--mono);font-size:.82rem;background:var(--surface-2);padding:1px 6px;border-radius:5px}
pre{background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:14px;overflow-x:auto;font-family:var(--mono);font-size:.76rem;line-height:1.55;color:var(--ink);margin:0}
.livebadge{margin-top:18px;display:flex;align-items:center;gap:10px;background:var(--accent-soft);border-radius:10px;padding:11px 14px;color:var(--accent);font-weight:600;font-size:.88rem}
.livedot{width:9px;height:9px;border-radius:999px;background:var(--good);box-shadow:0 0 0 4px color-mix(in srgb,var(--good) 22%,transparent)}
footer{text-align:center;color:var(--ink-3);font-size:.76rem;padding:0 20px 28px}