/* ============================================================
   Smith Ideas — shared site stylesheet
   Warm/plum system, matching Backstage's established identity
   ============================================================ */

:root{
  --paper: #f5f3f0;
  --card: #FFFFFF;
  --ink: #1A1D1B;
  --muted: #5B615C;
  --faint: #8A9089;
  --line: #D9DCD6;

  --accent: #4b3cff;
  --accent-dark: #3a2ecc;
  --accent-soft: #EBE8FF;

  --good: #16A34A;
  --warn: #F59E0B;
  --bad: #DC2626;

  --font-body: 'Merriweather Sans', system-ui, sans-serif;
}

*{ box-sizing: border-box; }
body{
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
a{ color: var(--accent); text-decoration: none; }
a:hover{ color: var(--accent-dark); text-decoration: underline; text-underline-offset: 2px; }
button{ font-family: inherit; cursor: pointer; }
:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; }

.wrap{ max-width: 680px; margin: 0 auto; padding: 48px 20px 70px; }

/* ---------- Header ---------- */
header.site-header{
  display: flex; align-items: center; justify-content: space-between;
  padding: 28px 0 8px;
}
.brand{ display: flex; align-items: center; gap: 10px; }
.brand-mark{
  width: 28px; height: 28px; object-fit: contain; flex-shrink: 0;
  transition: transform .18s ease;
}
.brand-mark:hover{ transform: scale(1.12); }
.brand-name{ font-family: var(--font-body); font-weight: 600; font-size: 18px; letter-spacing: -0.01em; color: var(--ink); }

nav.site-nav ul{ display: flex; gap: 20px; list-style: none; margin: 0; padding: 0; }
nav.site-nav a{ font-family: var(--font-body); font-variant-caps: all-small-caps; font-size: 15px; font-weight: 700; letter-spacing: 0.4px; color: var(--muted); }
nav.site-nav a:hover{ color: var(--accent); }

hr.site-hr{ border: none; border-top: 1px solid var(--line); margin: 0 0 30px; }

/* ---------- Generic content elements ---------- */
.eyebrow{
  font-family: var(--font-body); font-variant-caps: all-small-caps; font-size: 15px; font-weight: 700; letter-spacing: 0.4px;
  color: var(--accent); margin-bottom: 14px;
}
h1{ font-family: var(--font-body); font-size: clamp(28px, 6vw, 38px); font-weight: 800; letter-spacing: -0.01em; line-height: 1.25; margin: 0 0 16px; }
h2{ font-family: var(--font-body); font-size: 22px; font-weight: 800; margin: 40px 0 16px; }
h1 u{ text-decoration-color: var(--accent); text-decoration-thickness: 3px; text-underline-offset: 4px; }

@keyframes shake-word {
  0%, 90%, 100% { transform: translateX(0) rotate(0); }
  91% { transform: translateX(-3px) rotate(-2deg); }
  92% { transform: translateX(3px) rotate(2deg); }
  93% { transform: translateX(-3px) rotate(-2deg); }
  94% { transform: translateX(3px) rotate(2deg); }
  95% { transform: translateX(-2px) rotate(-1deg); }
  96% { transform: translateX(2px) rotate(1deg); }
  97%, 98%, 99% { transform: translateX(0) rotate(0); }
}
.shake-word{
  display: inline-block;
  animation: shake-word 6s ease-in-out infinite;
}

p{ font-size: 18px; margin: 0 0 20px; }
p.lede{ font-size: 18px; color: var(--muted); max-width: 520px; }

/* Content lists (Reality check bullets, Next steps, Benefits, etc.) —
   these previously had no explicit sizing and fell back to a smaller
   browser default, which is why they read smaller than surrounding text.
   .steps and .opt-list keep their own explicit rules below, which win
   on specificity over this general one. */
.wrap ul, .wrap ol{ font-size: 18px; line-height: 1.65; margin: 0 0 20px; padding-left: 26px; }
.wrap ul li, .wrap ol li{ margin-bottom: 10px; }
p.small{ font-size: 13.5px; color: var(--muted); }

.card{
  background: var(--card); border: 1px solid var(--line); border-radius: 3px;
  padding: 34px 32px; margin-top: 20px; box-shadow: 0 24px 60px -36px rgba(26,29,27,0.3);
}
.card iframe{ width: 100% !important; height: auto !important; min-height: 420px !important; max-height: none !important; }

.field{ margin-bottom: 16px; }
.field label{
  display: block; font-family: var(--font-body); font-variant-caps: all-small-caps; font-size: 14px; font-weight: 700;
  letter-spacing: 0.3px; color: var(--muted); margin-bottom: 8px;
}
input[type=text], input[type=email], textarea{
  width: 100%; font-family: var(--font-body); font-size: 16px; color: var(--ink);
  background: var(--paper); border: 1.5px solid var(--line); border-radius: 8px;
  padding: 12px 14px; line-height: 1.5;
}
textarea{ min-height: 110px; resize: vertical; }
input:focus, textarea:focus{ outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.submit-btn{
  width: 100%; border: none; border-radius: 999px; padding: 15px 26px;
  font-family: var(--font-body); font-weight: 700; font-size: 13.5px; letter-spacing: 0.4px;
  text-transform: uppercase; background: var(--accent); color: #fff; margin-top: 4px;
}
.submit-btn:hover{ background: var(--accent-dark); }

.char-counter{ font-family: var(--font-body); font-size: 12px; color: var(--faint); text-align: right; margin: 0 0 10px; }
.char-counter.warn{ color: var(--warn); font-weight: 700; }
.char-counter.over{ color: var(--bad); font-weight: 700; }

.btn{
  display: inline-block; border: none; border-radius: 999px; padding: 15px 26px;
  font-family: var(--font-body); font-weight: 700; font-size: 13.5px; letter-spacing: 0.4px;
  text-transform: uppercase; background: var(--accent); color: #fff;
  transition: background .15s ease;
}
.btn:hover{ background: var(--accent-dark); color: #fff; text-decoration: none; }

.whitelist-note{
  display: flex; gap: 10px; align-items: flex-start; background: var(--accent-soft);
  border: 1px dashed rgba(91,58,92,0.35); border-radius: 9px; padding: 14px 16px;
  margin-top: 20px; font-size: 13.5px; color: var(--ink);
}
.whitelist-note b{ color: var(--accent-dark); }

.steps{ list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; }
.steps li{ display: flex; gap: 12px; font-size: 18px; color: var(--ink); }
.steps .num{ font-family: var(--font-body); font-weight: 700; color: var(--accent); flex-shrink: 0; }

.placeholder-note{
  background: #FFF7ED; border: 1px dashed #B8860B66; border-radius: 9px; padding: 14px 16px;
  font-size: 13px; color: var(--muted); margin: 20px 0;
}

/* ---------- Footer ---------- */
/* ---------- Quiz: progress bar ---------- */
.quiz-meta{ display:flex; align-items:center; justify-content:space-between; font-family: var(--font-body); font-size:12px; color: var(--faint); margin-bottom:10px; }
.progress-track{ display:flex; gap:6px; }
.progress-seg{ height:4px; flex:1; border-radius:99px; background: var(--line); }
.progress-seg.done{ background: var(--ink); }

/* ---------- Quiz: question options ---------- */
.q-category{ font-family: var(--font-body); font-variant-caps: all-small-caps; font-size:15px; font-weight:700; letter-spacing:0.3px; color: var(--accent); margin: 30px 0 6px; }
.q-prompt{ font-size: 26px; font-weight:800; margin: 0 0 24px; line-height:1.3; }
.opt-list{ display:flex; flex-direction:column; gap:10px; }
.opt-btn{
  display:flex; align-items:center; gap:12px; width:100%; text-align:left; font-size:16px;
  border:1.5px solid var(--line); background: var(--card); color: var(--ink);
  border-radius:10px; padding:14px 16px; transition: border-color .15s ease;
}
.opt-btn:hover{ border-color: var(--accent); }
.opt-btn.selected{ background: var(--ink); border-color: var(--ink); color: var(--paper); }
.opt-dot{ width:16px; height:16px; border-radius:50%; border:1.5px solid var(--faint); flex-shrink:0; display:flex; align-items:center; justify-content:center; }
.opt-btn.selected .opt-dot{ border-color: var(--paper); }
.opt-dot-fill{ width:7px; height:7px; border-radius:50%; background: var(--paper); display:none; }
.opt-btn.selected .opt-dot-fill{ display:block; }
.opt-text-input{
  margin-top:8px; width:100%; font-family: var(--font-body); font-size:15px; color: var(--ink);
  background: var(--card); border:1.5px solid var(--line); border-radius:9px; padding:12px 14px;
}
.opt-text-input:focus{ outline:none; border-color: var(--accent); }

.quiz-nav{ display:flex; align-items:center; justify-content:space-between; gap:16px; border-top:1px solid var(--line); padding-top:22px; margin-top:34px; }
.link-btn{ background:none; border:none; font-family: var(--font-body); font-size:13px; color: var(--muted); cursor:pointer; }
.link-btn:hover{ color: var(--accent); }
.btn:disabled{ opacity:.4; cursor:not-allowed; background: var(--accent); }

/* ---------- Results ---------- */
.cat-grid{ border:1px solid var(--line); border-radius:12px; overflow:hidden; margin-top:24px; }
.cat-row{ display:flex; align-items:center; justify-content:space-between; padding:14px 18px; border-bottom:1px solid var(--line); }
.cat-row:last-child{ border-bottom:none; }
.cat-row-label{ font-weight:600; }
.cat-row-status{ display:flex; align-items:center; gap:9px; }
.cat-row-status span.status-text{ font-size:14px; color: var(--muted); }
.cat-row.flagged .status-text{ color: var(--ink); font-weight:600; }
.status-dot{ width:9px; height:9px; border-radius:50%; flex-shrink:0; }
.status-dot.green{ background: var(--good); }
.status-dot.yellow{ background: var(--warn); }
.status-dot.red{ background: var(--bad); }

.risk-box{ background: var(--ink); color: var(--paper); border-radius:12px; padding:22px 24px; margin-top:22px; }
.risk-eyebrow{ font-family: var(--font-body); font-variant-caps: all-small-caps; font-size:15px; font-weight:700; letter-spacing:0.3px; color: rgba(238,240,238,0.75); margin-bottom:10px; }
.risk-text{ font-size:17px; line-height:1.6; }

.notes-title{ font-family: var(--font-body); font-variant-caps: all-small-caps; font-size:15px; font-weight:700; letter-spacing:0.3px; color: var(--faint); margin: 30px 0 12px; }
.note-card{ border:1px solid var(--line); background: var(--card); border-radius:10px; padding:14px 16px; margin-bottom:10px; }
.note-card-head{ display:flex; align-items:center; gap:9px; margin-bottom:6px; font-weight:600; font-size:14.5px; }
.note-card p{ margin:0; font-size:14.5px; color: var(--muted); }

.upsell-box{ border:1px solid var(--line); border-radius:12px; padding:26px 28px; margin-top:36px; }
.upsell-box h2{ margin-top:0; }

.domain-row{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:14px 0; border-bottom:1px solid var(--line);
}
.domain-row:last-of-type{ border-bottom:none; }
.domain-name{ font-family: var(--font-body); font-size:16px; font-weight:700; color: var(--ink); }
.btn-small{ padding:9px 18px; font-size:12px; flex-shrink:0; }

/* ---------- Footer ---------- */
footer.site-footer{
  text-align: left; margin-top: 56px; font-size: 12.5px; color: var(--faint); line-height: 1.8;
}
footer.site-footer a{ color: var(--faint); }
footer.site-footer a:hover{ color: var(--muted); }
.footer-dot{ margin: 0 8px; }