/* BoothBright - design tokens + layout */
:root {
  --ink: #20242c;
  --ink-soft: #4b5563;
  --bg: #fbfaf7;
  --card: #ffffff;
  --line: #e6e2da;
  --accent: #b4530f;        /* terracotta, AA on white for large text/buttons w/ white text? see note */
  --accent-ink: #8a3f0a;
  --accent-soft: #fbeadd;
  --ok: #1e6b45;
  --warn: #92600a;
  --bad: #a02c2c;
  --radius: 10px;
  --maxw: 1060px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; background: var(--ink); color: #fff;
  padding: .5rem .9rem; z-index: 100; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 1.25rem; }

header.site {
  background: #fffdf9; border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 20;
}
.nav { display: flex; align-items: center; gap: 1rem; min-height: 62px; flex-wrap: wrap; padding-top:.4rem; padding-bottom:.4rem;}
.brand { display: inline-flex; align-items: center; gap: .55rem; font-weight: 700; text-decoration: none; color: var(--ink); font-size: 1.05rem; }
.brand svg { display: block; }
.nav-links { display: flex; gap: 1rem; margin-left: auto; flex-wrap: wrap; align-items:center; }
.nav-links a { color: var(--ink-soft); text-decoration: none; font-size: .95rem; padding: .35rem .5rem; border-radius: 6px; }
.nav-links a:hover, .nav-links a:focus-visible { color: var(--accent-ink); background: var(--accent-soft); }

.btn {
  display: inline-block; text-decoration: none; cursor: pointer;
  border-radius: 999px; padding: .65rem 1.25rem; font-weight: 600; font-size: .98rem;
  border: 1px solid transparent; transition: background .15s ease;
}
.btn-primary { background: var(--accent-ink); color: #fff; }
.btn-primary:hover, .btn-primary:focus-visible { background: var(--accent); color:#fff; }
.btn-secondary { background: transparent; color: var(--accent-ink); border-color: var(--accent-ink); }
.btn-secondary:hover, .btn-secondary:focus-visible { background: var(--accent-soft); }

.hero { padding: 4.2rem 0 3rem; background:
  radial-gradient(1000px 400px at 85% -10%, #f6ede2 0%, transparent 60%), var(--bg); }
.hero h1 { font-size: clamp(1.9rem, 4.5vw, 3rem); line-height: 1.15; margin: 0 0 1rem; max-width: 21ch; }
.hero p.lede { font-size: 1.13rem; color: var(--ink-soft); max-width: 56ch; margin: 0 0 1.6rem; }
.hero .ctas { display: flex; gap: .8rem; flex-wrap: wrap; }
.hero-note { margin-top: 1.1rem; font-size: .86rem; color: var(--ink-soft); }

.factbar { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); margin: 2.6rem 0 0; padding: 0; list-style: none; }
.factbar li { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: .9rem 1rem; font-size: .88rem; color: var(--ink-soft); }
.factbar strong { color: var(--ink); display:block; font-size: 1.05rem; margin-bottom:.15rem;}
.factbar a { color: inherit; }

section { padding: 3.4rem 0; }
section.alt { background: #fffdf9; border-block: 1px solid var(--line); }
h2 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); margin: 0 0 .4rem; }
.section-sub { color: var(--ink-soft); max-width: 60ch; margin: 0 0 1.8rem; }

.grid3 { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.25rem 1.3rem; }
.card h3 { margin: .1rem 0 .45rem; font-size: 1.05rem; }
.card p { margin: 0; color: var(--ink-soft); font-size: .95rem; }
.card .tag { display:inline-block; font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color:var(--accent-ink); background:var(--accent-soft); border-radius:999px; padding:.15rem .6rem; margin-bottom:.6rem;}

.steps { counter-reset: step; display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); padding:0; list-style:none;}
.steps li { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:1.1rem 1.2rem 1.1rem 3.2rem; position:relative; font-size:.95rem; color:var(--ink-soft);}
.steps li::before { counter-increment: step; content: counter(step); position:absolute; left:1rem; top:1.05rem;
  width:1.55rem; height:1.55rem; display:grid; place-items:center; background:var(--accent-soft); color:var(--accent-ink);
  font-weight:700; border-radius:50%; font-size:.9rem;}
.steps strong{color:var(--ink);}

/* Grader */
.grader-grid { display:grid; gap:1.2rem; grid-template-columns: 1fr; }
@media(min-width:880px){ .grader-grid{ grid-template-columns: 1fr 1fr; } }
.field label { display:block; font-weight:600; margin-bottom:.3rem; font-size:.95rem;}
.field .hint { font-weight:400; color:var(--ink-soft); font-size:.82rem; display:block;}
textarea, input[type="text"], input[type="email"], input[type="url"], select {
  width:100%; padding:.65rem .75rem; border:1px solid var(--line); border-radius:8px; font:inherit; background:#fff; color:var(--ink);}
textarea { min-height:110px; resize:vertical;}
textarea:focus-visible, input:focus-visible, select:focus-visible, button:focus-visible, a:focus-visible {
  outline: 3px solid #d97b2f; outline-offset: 2px; }
.grader-actions { margin-top:.9rem; display:flex; gap:.7rem; flex-wrap:wrap; }
.score-card { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:1.2rem 1.3rem; }
.score-num { font-size:2.6rem; font-weight:800; line-height:1; }
.band { display:inline-block; margin-left:.5rem; font-size:.85rem; font-weight:700; padding:.2rem .65rem; border-radius:999px; vertical-align:middle;}
.band.good{background:#e2f3ea;color:var(--ok);} .band.mid{background:#fbf1dc;color:var(--warn);} .band.poor{background:#fae4e4;color:var(--bad);}
.issues { list-style:none; margin:1rem 0 0; padding:0; display:grid; gap:.55rem;}
.issues li { display:flex; gap:.6rem; align-items:flex-start; font-size:.92rem; color:var(--ink-soft);}
.sev { flex:0 0 auto; font-size:.68rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase; border-radius:4px; padding:.14rem .45rem; margin-top:.18rem;}
.sev.high{background:#fae4e4;color:var(--bad);} .sev.med{background:#fbf1dc;color:var(--warn);} .sev.low{background:#eef1f5;color:var(--ink-soft);} .sev.pass{background:#e2f3ea;color:var(--ok);}
.tool-disclaimer{font-size:.8rem;color:var(--ink-soft);margin-top:1rem;}

/* Pricing */
.plans { display:grid; gap:1.1rem; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); align-items:start;}
.plan { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:1.4rem;}
.plan.featured { border-color: var(--accent-ink); box-shadow: 0 4px 18px rgba(180,83,15,.08);}
.price { font-size:2rem; font-weight:800; margin:.2rem 0 .1rem;}
.per { color:var(--ink-soft); font-size:.85rem; margin-bottom:.9rem;}
.plan ul { margin:0 0 1.1rem; padding-left:1.1rem; color:var(--ink-soft); font-size:.93rem;}
.plan li{margin-bottom:.35rem;}
.guarantee { margin-top:1.4rem; background:var(--accent-soft); border-radius:var(--radius); padding:1rem 1.2rem; font-size:.92rem;}

/* FAQ */
details { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding: .9rem 1.1rem; margin-bottom:.7rem;}
details summary { cursor:pointer; font-weight:600;}
details p { color:var(--ink-soft); font-size:.94rem; margin:.6rem 0 0;}

/* Contact */
.contact-grid { display:grid; gap:1.4rem; grid-template-columns:1fr;}
@media(min-width:880px){ .contact-grid{grid-template-columns:1.1fr .9fr;} }
.demo-note { background:#fffbe8; border:1px solid #eadfae; color:#6b5410; font-size:.85rem; border-radius:8px; padding:.6rem .8rem; margin-bottom:1rem;}
.form-success { display:none; background:#e2f3ea; border:1px solid #bfe3cf; color:var(--ok); border-radius:8px; padding:1rem; margin-top:1rem;}
.form-success.show{display:block;}
.error-msg{color:var(--bad);font-size:.85rem;margin:.35rem 0 0;display:none;}
.error-msg.show{display:block;}

footer.site { border-top:1px solid var(--line); padding:2.2rem 0 3rem; color:var(--ink-soft); font-size:.85rem; background:#fffdf9;}
footer.site nav a { color:var(--accent-ink); }

/* Honeypot: visually hidden from humans */
.hp-wrap { position:absolute; left:-9999px; top:-9999px; height:1px; width:1px; overflow:hidden; }
.consent-row input[type="checkbox"] { width:auto; margin-right:.5rem; }
.consent-row label a { color:var(--accent-ink); }
.score-stats { color:var(--ink-soft); font-size:.85rem; margin:.3rem 0 .6rem; }

/* Legal / content pages */
.page { max-width:760px; margin:0 auto; padding:3rem 1.25rem 4rem; }
.page h1 { font-size:clamp(1.5rem,3vw,2rem); margin-top:0; }
.page h2 { font-size:1.15rem; margin-top:1.8rem; }
.page p, .page li { color:var(--ink-soft); font-size:.96rem; }