/* ============================================================
   TapCheck — /free-audit. Uses the tokens in style.css.
   ============================================================ */
.tc { --ok:#34D399; --mid:#FBBF24; --low:#FB923C; --bad:#F87171; --track:rgba(255,255,255,.07); }
[data-theme="light"] .tc { --ok:#059669; --mid:#D97706; --low:#EA580C; --bad:#DC2626; --track:rgba(0,0,0,.07); }

/* ---- hero ---- */
.tc-hero { position:relative; overflow:hidden; padding:76px 0 64px; border-bottom:1px solid var(--border); background:var(--bg); }
.tc-hero::before { content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(circle 520px at 82% 10%, rgba(249,115,22,.14), transparent 70%),
             radial-gradient(circle 420px at 8% 90%, rgba(244,63,94,.10), transparent 70%); }
.tc-hero::after { content:""; position:absolute; inset:0; pointer-events:none; color:rgba(250,250,248,.06);
  background-image:radial-gradient(currentColor 1px, transparent 1px); background-size:24px 24px;
  -webkit-mask-image:radial-gradient(ellipse 60% 70% at 50% 40%, #000 20%, transparent 75%);
          mask-image:radial-gradient(ellipse 60% 70% at 50% 40%, #000 20%, transparent 75%); }
[data-theme="light"] .tc-hero::after { color:rgba(12,10,9,.08); }
.tc-hero .container { position:relative; z-index:2; text-align:center; }
.tc-brand { display:inline-flex; align-items:center; gap:10px; padding:7px 14px 7px 8px; border-radius:999px;
  border:1px solid var(--border-accent); background:rgba(249,115,22,.08); font-size:.82rem; font-weight:700; color:var(--text); }
.tc-brand__mark { width:22px; height:22px; border-radius:50%; background:conic-gradient(from 200deg, #F97316, #F43F5E, #F97316);
  display:grid; place-items:center; animation:tcspin 6s linear infinite; }
.tc-brand__mark::after { content:""; width:12px; height:12px; border-radius:50%; background:var(--bg); }
.tc-brand small { color:var(--text-muted); font-weight:600; }
.tc-hero h1 { margin:18px auto 14px; max-width:820px; color:var(--text); }
.tc-hero h1 em { font-style:normal; background:var(--gradient-text); -webkit-background-clip:text; background-clip:text; color:transparent; }
.tc-hero p.tc-sub { max-width:640px; margin:0 auto; font-size:1.08rem; }

.tc-form { margin:30px auto 0; max-width:620px; display:flex; gap:10px; padding:8px; border-radius:16px;
  background:var(--bg-card); border:1px solid var(--glass-border); box-shadow:var(--shadow-md), var(--shadow-glow); }
.tc-form__field { flex:1; display:flex; align-items:center; min-width:0; padding:0 6px 0 14px; }
.tc-form__field span { color:var(--text-dim); font-size:1rem; font-weight:500; user-select:none; }
.tc-form__field input { flex:1; min-width:0; border:0; outline:0; background:transparent; color:var(--text);
  font:inherit; font-size:1.05rem; font-weight:600; padding:14px 4px; }
.tc-form__field input::placeholder { color:var(--text-dim); font-weight:500; }
.tc-form .btn { flex-shrink:0; }
.tc-form.is-err { border-color:var(--bad); animation:tcshake .35s; }
.tc-meta { margin-top:16px; display:flex; justify-content:center; flex-wrap:wrap; gap:8px 18px; font-size:.84rem; color:var(--text-muted); }
.tc-meta b { color:var(--text); }
.tc-meta i { display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--accent); margin-right:7px; vertical-align:middle; }

@media (max-width:640px) {
  .tc-hero { padding:52px 0 44px; }
  .tc-form { flex-direction:column; padding:8px; }
  .tc-form .btn { width:100%; }
}

/* ---- app shell ---- */
.tc-app { padding:56px 0 24px; }
.tc-app[hidden] { display:none; }
.tc-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); }

/* scanning */
.tc-scan { max-width:720px; margin:0 auto; padding:34px; display:grid; grid-template-columns:180px 1fr; gap:34px; align-items:center; }
.tc-scan__ring { position:relative; width:180px; height:180px; }
.tc-scan__ring svg { width:100%; height:100%; animation:tcspin 1.4s linear infinite; }
.tc-scan__ring .lbl { position:absolute; inset:0; display:grid; place-items:center; text-align:center; font-size:.8rem; color:var(--text-muted); font-weight:600; }
.tc-scan__ring .lbl b { display:block; color:var(--text); font-size:1.05rem; word-break:break-all; padding:0 22px; }
.tc-steps { list-style:none; display:flex; flex-direction:column; gap:12px; }
.tc-steps li { display:flex; align-items:center; gap:12px; font-size:.95rem; color:var(--text-dim); transition:color .3s; }
.tc-steps li .dot { width:20px; height:20px; border-radius:50%; border:2px solid var(--track); flex-shrink:0; position:relative; transition:all .3s; }
.tc-steps li.on { color:var(--text); }
.tc-steps li.on .dot { border-color:var(--accent); border-top-color:transparent; animation:tcspin .8s linear infinite; }
.tc-steps li.done { color:var(--text-muted); }
.tc-steps li.done .dot { border-color:transparent; background:var(--gradient); animation:none; }
.tc-steps li.done .dot::after { content:""; position:absolute; left:6px; top:3px; width:5px; height:9px; border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg); }
@media (max-width:640px) { .tc-scan { grid-template-columns:1fr; justify-items:center; padding:26px 20px; } }

/* error */
.tc-error { max-width:620px; margin:0 auto; padding:30px; text-align:center; }
.tc-error h3 { color:var(--text); margin-bottom:8px; }
.tc-error p { margin-bottom:18px; }

/* result: score */
.tc-result { display:flex; flex-direction:column; gap:22px; }
.tc-score { padding:34px; display:grid; grid-template-columns:260px 1fr; gap:40px; align-items:center; position:relative; overflow:hidden; }
.tc-score::before { content:""; position:absolute; width:520px; height:520px; left:-180px; top:-200px; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, var(--glow, rgba(249,115,22,.16)), transparent 65%); }
.tc-ring { position:relative; width:260px; height:260px; }
.tc-ring svg { width:100%; height:100%; transform:rotate(-90deg); overflow:visible; }
.tc-ring .track { stroke:var(--track); }
.tc-ring .arc { transition:stroke-dashoffset 1.8s cubic-bezier(.2,.8,.2,1); filter:drop-shadow(0 0 10px rgba(249,115,22,.35)); }
.tc-ring .ticks line { stroke:var(--track); stroke-width:2; }
.tc-ring__num { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.tc-ring__num b { font-size:4.6rem; font-weight:800; letter-spacing:-.04em; line-height:1; color:var(--text); font-variant-numeric:tabular-nums; }
.tc-ring__num span { font-size:.85rem; color:var(--text-muted); font-weight:600; margin-top:6px; }
.tc-score__body { position:relative; }
.tc-domain { font-size:.82rem; font-weight:700; color:var(--text-muted); letter-spacing:.06em; text-transform:uppercase; }
.tc-band { display:inline-flex; align-items:center; gap:8px; margin:10px 0 12px; padding:6px 14px; border-radius:999px;
  font-weight:800; font-size:.95rem; color:var(--c); background:color-mix(in srgb, var(--c) 14%, transparent); border:1px solid color-mix(in srgb, var(--c) 35%, transparent); }
.tc-band::before { content:""; width:8px; height:8px; border-radius:50%; background:var(--c); box-shadow:0 0 0 4px color-mix(in srgb, var(--c) 22%, transparent); }
.tc-score__body h2 { font-size:1.7rem; color:var(--text); margin-bottom:8px; line-height:1.25; }
.tc-score__body .scope { font-size:.85rem; color:var(--text-dim); margin-top:10px; }
.tc-bands { display:flex; gap:4px; margin-top:18px; max-width:420px; }
.tc-bands div { flex:1; }
.tc-bands i { display:block; height:6px; border-radius:3px; background:var(--track); position:relative; overflow:hidden; }
.tc-bands i::after { content:""; position:absolute; inset:0; background:var(--c); transform:scaleX(0); transform-origin:left; transition:transform .6s ease; }
.tc-bands div.on i::after { transform:scaleX(1); }
.tc-bands small { display:block; margin-top:6px; font-size:.72rem; color:var(--text-dim); font-weight:600; }
.tc-bands div.on small { color:var(--text); }
@media (max-width:820px) { .tc-score { grid-template-columns:1fr; justify-items:center; text-align:center; padding:28px 20px; }
  .tc-bands { margin-left:auto; margin-right:auto; } .tc-ring { width:220px; height:220px; } .tc-ring__num b { font-size:3.8rem; } }

/* pillars */
.tc-pillars { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.tc-pillar { padding:22px 18px; text-align:center; opacity:0; transform:translateY(12px); transition:opacity .5s ease, transform .5s ease, border-color .2s; }
.tc-pillar.in { opacity:1; transform:none; }
.tc-pillar:hover { border-color:var(--border-accent); }
.tc-mini { position:relative; width:96px; height:96px; margin:0 auto 12px; }
.tc-mini svg { width:100%; height:100%; transform:rotate(-90deg); }
.tc-mini .track { stroke:var(--track); }
.tc-mini .arc { transition:stroke-dashoffset 1.4s cubic-bezier(.2,.8,.2,1); }
.tc-mini b { position:absolute; inset:0; display:grid; place-items:center; font-size:1.5rem; font-weight:800; color:var(--text); font-variant-numeric:tabular-nums; }
.tc-pillar h4 { font-size:.92rem; color:var(--text); margin-bottom:4px; }
.tc-pillar p { font-size:.8rem; line-height:1.4; color:var(--text-dim); }
@media (max-width:820px) { .tc-pillars { grid-template-columns:repeat(2,1fr); } }

/* full-version CTA right after the score */
.tc-cta { padding:26px 30px; display:flex; align-items:center; justify-content:space-between; gap:26px; position:relative; overflow:hidden;
  background:#0C0A09; border:1px solid rgba(249,115,22,.3); box-shadow:var(--shadow-md), var(--shadow-glow); }
.tc-cta::before { content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(circle 300px at 0% 0%, rgba(249,115,22,.26), transparent 70%), radial-gradient(circle 280px at 100% 100%, rgba(244,63,94,.2), transparent 70%); }
.tc-cta > * { position:relative; }
.tc-cta .label { color:#FB923C; }
.tc-cta h3 { color:#FAFAF8; font-size:1.3rem; margin:6px 0 6px; }
.tc-cta p { color:#A8A29E; font-size:.92rem; max-width:560px; margin:0; }
.tc-cta .btn { flex-shrink:0; }
@media (max-width:720px) { .tc-cta { flex-direction:column; align-items:flex-start; padding:24px 20px; } .tc-cta .btn { width:100%; } }

/* anonymised study numbers */
.tc-proof__h { text-align:center; margin:10px auto 14px; max-width:680px; }
.tc-proof__h h3 { color:var(--text); font-size:1.2rem; margin-top:6px; }
.tc-proof__grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.tc-proof__grid .tc-card { padding:20px 18px; }
.tc-proof__grid b { display:block; font-size:1.7rem; font-weight:800; letter-spacing:-.02em; background:var(--gradient-text); -webkit-background-clip:text; background-clip:text; color:transparent; }
.tc-proof__grid span { display:block; margin-top:6px; font-size:.86rem; line-height:1.5; color:var(--text-muted); }
.tc-proof__link { display:block; text-align:center; margin-top:12px; font-size:.88rem; font-weight:600; color:var(--accent); }
@media (max-width:900px) { .tc-proof__grid { grid-template-columns:1fr 1fr; } }

/* findings */
.tc-sec-h { display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap; margin:14px 0 2px; }
.tc-sec-h h3 { color:var(--text); font-size:1.25rem; }
.tc-sec-h span { font-size:.85rem; color:var(--text-muted); }
.tc-finds { display:flex; flex-direction:column; gap:12px; }
.tc-find { padding:22px 24px; display:grid; grid-template-columns:40px 1fr; gap:16px; opacity:0; transform:translateY(12px); transition:opacity .5s ease, transform .5s ease; border-left:3px solid var(--c); }
.tc-find.in { opacity:1; transform:none; }
.tc-find__n { width:40px; height:40px; border-radius:12px; display:grid; place-items:center; font-weight:800; color:var(--c);
  background:color-mix(in srgb, var(--c) 13%, transparent); }
.tc-find h4 { color:var(--text); font-size:1.02rem; margin-bottom:6px; }
.tc-find .what { font-size:.93rem; color:var(--text-muted); line-height:1.6; }
.tc-find .fix { margin-top:10px; font-size:.9rem; color:var(--text); line-height:1.6; }
.tc-find .fix b { color:var(--accent); }
.tc-find .eff { display:inline-block; margin-top:10px; font-size:.75rem; font-weight:700; padding:4px 10px; border-radius:999px; background:var(--bg-surface); color:var(--text-muted); border:1px solid var(--border); }
.tc-clean { padding:22px 24px; color:var(--text-muted); }

.tc-locked { position:relative; padding:20px 24px; overflow:hidden; }
.tc-locked__rows { filter:blur(5px); opacity:.55; pointer-events:none; user-select:none; display:flex; flex-direction:column; gap:12px; }
.tc-locked__rows div { height:14px; border-radius:7px; background:var(--track); }
.tc-locked__rows div:nth-child(2n) { width:72%; } .tc-locked__rows div:nth-child(3n) { width:86%; }
.tc-locked__msg { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:10px; font-weight:700; color:var(--text); font-size:.95rem; text-align:center; padding:0 16px; }
.tc-locked__msg svg { flex-shrink:0; color:var(--accent); }

/* ask google ai */
.tc-qs { display:flex; flex-direction:column; gap:10px; }
.tc-q { padding:18px 20px; display:grid; grid-template-columns:34px 1fr; gap:14px; align-items:start; transition:border-color .2s, transform .2s; }
.tc-q:hover { border-color:var(--border-accent); }
.tc-q__n { width:34px; height:34px; border-radius:10px; display:grid; place-items:center; font-weight:800; color:var(--accent); background:rgba(249,115,22,.12); }
.tc-q.asked .tc-q__n { background:var(--gradient); color:#fff; }
.tc-q.named .tc-q__n { background:color-mix(in srgb, var(--ok) 18%, transparent); color:var(--ok); }
.tc-q.missed .tc-q__n { background:color-mix(in srgb, var(--bad) 16%, transparent); color:var(--bad); }
.tc-q__q { width:100%; font:inherit; font-weight:700; color:var(--text); font-size:1rem; line-height:1.45; background:transparent; border:1px solid transparent; border-radius:8px; padding:4px 8px; margin:-5px -9px; }
.tc-q__q:hover { border-color:var(--border); }
.tc-q__q:focus { outline:none; border-color:rgba(249,115,22,.6); background:var(--bg-surface); }
.tc-q__from { font-size:.8rem; color:var(--text-dim); margin-top:4px; }
.tc-q__row { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-top:12px; }
.tc-q__mark { display:inline-flex; align-items:center; gap:6px; font-size:.82rem; color:var(--text-muted); }
.tc-q__mark button { padding:5px 12px; border-radius:999px; border:1px solid var(--border); background:var(--bg-surface); color:var(--text); font:inherit; font-size:.8rem; font-weight:600; cursor:pointer; }
.tc-q__mark button.on[data-mark="yes"] { border-color:var(--ok); color:var(--ok); }
.tc-q__mark button.on[data-mark="no"] { border-color:var(--bad); color:var(--bad); }
.tc-q--own form { display:flex; gap:10px; }
.tc-q--own .form-input { flex:1; }
.tc-q__tally { text-align:center; font-size:.9rem; color:var(--text-muted); min-height:1.2em; }
.tc-q__tally b { color:var(--text); }
@media (max-width:640px) { .tc-q--own form { flex-direction:column; } }

/* gate */
.tc-gate { padding:34px; display:grid; grid-template-columns:1fr 1.1fr; gap:36px; border:1px solid var(--glass-border); box-shadow:var(--shadow-md), var(--shadow-glow); position:relative; overflow:hidden; }
.tc-gate::after { content:""; position:absolute; right:-140px; bottom:-160px; width:380px; height:380px; border-radius:50%; pointer-events:none; background:radial-gradient(circle, rgba(244,63,94,.12), transparent 70%); }
.tc-gate h3 { font-size:1.45rem; color:var(--text); margin-bottom:10px; }
.tc-gate ul { list-style:none; margin-top:16px; display:flex; flex-direction:column; gap:12px; }
.tc-gate li { display:flex; gap:10px; font-size:.92rem; color:var(--text-muted); line-height:1.5; }
.tc-gate li::before { content:""; flex-shrink:0; width:18px; height:18px; margin-top:2px; border-radius:50%; background:var(--gradient);
  -webkit-mask:radial-gradient(circle, #000 0 4px, transparent 5px), linear-gradient(#000 0 0); }
.tc-gate li b { color:var(--text); }
.tc-gate form { display:flex; flex-direction:column; gap:12px; position:relative; z-index:1; }
.tc-gate .form-checkbox { font-size:.82rem; }
.tc-gate .btn { width:100%; }
.tc-gate .hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.tc-gate .err { border-color:var(--bad) !important; }
.tc-done { text-align:center; padding:10px 0; }
.tc-done__tick { width:56px; height:56px; border-radius:50%; margin:0 auto 14px; background:var(--gradient); display:grid; place-items:center; animation:tcpop .5s cubic-bezier(.2,1.6,.4,1); }
.tc-done h3 { margin-bottom:6px; }
@media (max-width:820px) { .tc-gate { grid-template-columns:1fr; padding:26px 20px; gap:22px; } }

/* share + book */
.tc-share { display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap; padding:6px 0; font-size:.88rem; color:var(--text-muted); }
.tc-share button, .tc-share a { display:inline-flex; align-items:center; gap:7px; padding:9px 14px; border-radius:999px; border:1px solid var(--border);
  background:var(--bg-card); color:var(--text); font:inherit; font-size:.85rem; font-weight:600; cursor:pointer; transition:border-color .2s, transform .2s; }
.tc-share button:hover, .tc-share a:hover { border-color:var(--border-accent); transform:translateY(-1px); }

.tc-book { position:relative; overflow:hidden; border-radius:var(--radius-xl); padding:56px 40px; text-align:center; background:#0C0A09; border:1px solid rgba(249,115,22,.25); }
.tc-book::before { content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(circle 360px at 15% 0%, rgba(249,115,22,.28), transparent 70%), radial-gradient(circle 340px at 90% 100%, rgba(244,63,94,.24), transparent 70%); }
.tc-book > * { position:relative; }
.tc-book .label { color:#FB923C; }
.tc-book h2 { color:#FAFAF8; margin:10px auto 12px; max-width:640px; }
.tc-book p { color:#A8A29E; max-width:600px; margin:0 auto 26px; }
.tc-book__list { display:flex; justify-content:center; flex-wrap:wrap; gap:10px 22px; margin:-8px 0 28px; color:#FAFAF8; font-size:.9rem; font-weight:600; }
.tc-book__list span::before { content:"✓"; color:#FB923C; margin-right:7px; }
@media (max-width:640px) { .tc-book { padding:40px 20px; } }

/* explainer */
.tc-how { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:30px; }
.tc-how .tc-card { padding:24px 22px; }
.tc-how .w { font-size:.75rem; font-weight:800; letter-spacing:.08em; color:var(--accent); text-transform:uppercase; }
.tc-how h3 { font-size:1.05rem; color:var(--text); margin:8px 0; }
.tc-how p { font-size:.88rem; line-height:1.6; }
@media (max-width:900px) { .tc-how { grid-template-columns:1fr 1fr; } }
@media (max-width:560px) { .tc-how { grid-template-columns:1fr; } }
.tc-faq { max-width:780px; margin:30px auto 0; display:flex; flex-direction:column; gap:10px; }
.tc-faq details { padding:18px 22px; }
.tc-faq summary { cursor:pointer; font-weight:700; color:var(--text); list-style:none; display:flex; justify-content:space-between; gap:12px; }
.tc-faq summary::after { content:"+"; color:var(--accent); font-weight:800; transition:transform .2s; }
.tc-faq details[open] summary::after { transform:rotate(45deg); }
.tc-faq details p { margin-top:10px; font-size:.93rem; }

@keyframes tcspin { to { transform:rotate(360deg); } }
@keyframes tcshake { 25% { transform:translateX(-6px); } 75% { transform:translateX(6px); } }
@keyframes tcpop { from { transform:scale(.3); opacity:0; } }
@media (prefers-reduced-motion: reduce) {
  .tc *, .tc *::before, .tc *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}