/* ==========================================================================
   Variables & Reset
   ========================================================================== */
:root { --jp-black: #0b0b0f; --jp-white: #ffffff; --jp-gold: #d4af37; --jp-green: #00703c; --jp-red: #c8102e; --bg-page: #f6f7fb; --bg-card: rgba(255, 255, 255, 0.82); --bg-soft: #f2f4f7; --border-soft: rgba(15, 23, 42, 0.08); --border-strong: rgba(15, 23, 42, 0.14); --text-main: #171717; --text-muted: #444; --shadow-sm: 0 6px 20px rgba(15, 23, 42, 0.05); --shadow-md: 0 18px 50px rgba(15, 23, 42, 0.10); --shadow-lg: 0 24px 70px rgba(15, 23, 42, 0.14); --radius-sm: 14px; --radius-md: 20px; --radius-lg: 28px; --ease: 220ms cubic-bezier(0.22, 1, 0.36, 1); }
*, *::before, *::after { box-sizing: border-box; }
/* ==========================================================================
   Main Container
   ========================================================================== */
.diagnostic-engine { max-width: 620px; width: 100%; margin: 56px auto; padding: 42px 32px; font-family: Inter, -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif; background: linear-gradient(180deg, rgba(255,255,255,0.96) 0%, rgba(255,255,255,0.88) 100%); border: 1px solid var(--border-soft); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); text-align: center; position: relative; overflow: hidden; box-sizing: border-box; }
.diagnostic-engine::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at top left, rgba(212, 175, 55, 0.08), transparent 30%), radial-gradient(circle at top right, rgba(0, 112, 60, 0.06), transparent 28%); pointer-events: none; }
.diagnostic-engine > * { position: relative; z-index: 1; }
/* ==========================================================================
   Header & Progress
   ========================================================================== */
.audit-header h2 { font-size: clamp(28px, 4vw, 34px); line-height: 1.08; font-weight: 800; letter-spacing: -0.03em; margin: 0 0 12px; color: var(--jp-black); }
.audit-header p { max-width: 500px; margin: 0 auto 26px; color: var(--text-muted); font-size: 15.5px; line-height: 1.65; }
.progress-tracker { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 16px; margin-bottom: 34px; border-radius: 999px; border: 1px solid rgba(15, 23, 42, 0.07); background: rgba(255, 255, 255, 0.9); color: var(--jp-black); font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; box-shadow: var(--shadow-sm); }
/* ==========================================================================
   Quiz Steps & Answer Buttons
   ========================================================================== */
.quiz-step h3 { font-size: clamp(21px, 3vw, 24px); line-height: 1.35; font-weight: 700; margin: 0 0 28px; color: var(--text-main); letter-spacing: -0.02em; }
.answer-btn { display: block; width: 100%; max-width: 100%; padding: 18px 18px; margin-bottom: 14px; background: rgba(255, 255, 255, 0.92); border: 1px solid var(--border-soft); border-radius: 18px; cursor: pointer; font-size: 15.5px; font-weight: 600; color: var(--text-main); text-align: left; position: relative; overflow: hidden; transition: transform var(--ease), box-shadow var(--ease), border-color var(--ease), background var(--ease), color var(--ease); box-shadow: 0 1px 0 rgba(255,255,255,0.8) inset; }
.answer-btn::after { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(212,175,55,0.06), rgba(0,112,60,0.04)); opacity: 0; transition: opacity var(--ease); pointer-events: none; }
.answer-btn:hover { transform: translateY(-2px); border-color: rgba(11, 11, 15, 0.16); background: #ffffff; box-shadow: var(--shadow-md); }
.answer-btn:hover::after { opacity: 1; }
.answer-btn input[type="radio"] { display: none; }
.answer-btn.selected { background: linear-gradient(180deg, #111217 0%, #0b0b0f 100%); color: var(--jp-white); border-color: #111217; box-shadow: 0 18px 40px rgba(11, 11, 15, 0.28); transform: translateY(-1px); }
.answer-btn.selected::after { opacity: 0; }
/* ==========================================================================
   Email Capture Gate
   ========================================================================== */
#email-capture-gate h3 { margin: 0 0 12px; font-size: clamp(26px, 4vw, 32px); line-height: 1.15; font-weight: 800; letter-spacing: -0.03em; color: var(--jp-black); }
.gate-subtext { max-width: 460px; margin: 0 auto 20px; color: #555 !important; font-size: 15.5px; line-height: 1.65; font-weight: 500; }
#newsletter-optin-form { max-width: 460px; margin: 0 auto; }
input[type="email"] { width: 100%; max-width: 100%; min-height: 58px; padding: 0 18px; margin-bottom: 12px; border: 1px solid var(--border-soft); border-radius: 18px; font-size: 15.5px; color: var(--text-main); background: #ffffff; text-align: center; transition: border-color var(--ease), box-shadow var(--ease), background var(--ease), transform var(--ease); }
input[type="email"]::placeholder { color: #9aa1ad; }
input[type="email"]:focus { outline: none; background: #ffffff; border-color: rgba(11, 11, 15, 0.18); box-shadow: 0 0 0 4px rgba(11, 11, 15, 0.05); transform: translateY(-1px); }
/* ==========================================================================
   Results & Score Preview
   ========================================================================== */
.partial-result-card, .result-summary-card { margin-bottom: 22px; padding: 26px 22px; border: 1px solid var(--border-soft); border-radius: 22px; background: linear-gradient(180deg, rgba(255,255,255,0.96) 0%, rgba(246,247,251,0.92) 100%); box-shadow: var(--shadow-sm); text-align: center; }
.result-summary-card h3 { margin: 0 0 12px; font-size: clamp(22px, 3.5vw, 28px); font-weight: 800; color: var(--jp-black); line-height: 1.2; }
.result-summary-card p { color: var(--text-main); font-size: 15.5px; line-height: 1.6; margin: 0; }
.mini-label { display: inline-block; margin: 0 0 12px; padding: 7px 12px; border-radius: 999px; background: rgba(11, 11, 15, 0.06); color: var(--jp-black); font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
#preview-score { color: var(--jp-red); font-weight: 900; }
.blurred-result-preview { width: 100%; margin: 22px auto 0; padding: 18px 16px; border-radius: 18px; background: rgba(255, 255, 255, 0.72); border: 1px solid rgba(15, 23, 42, 0.08); position: relative; overflow: hidden; }
.blurred-result-preview::after { content: ""; position: absolute; inset: 0; backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px); background: rgba(255, 255, 255, 0.38); pointer-events: none; }
.blur-row { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid rgba(15, 23, 42, 0.06); text-align: left; }
.blur-row:first-child { padding-top: 0; }
.blur-row:last-child { border-bottom: 0; padding-bottom: 0; }
.blur-label { font-size: 14px; font-weight: 700; color: var(--text-main); white-space: nowrap; }
.blur-value { font-size: 14px; font-weight: 600; color: #4b5563; text-align: right; }
/* ==========================================================================
   Primary Actions
   ========================================================================== */
.primary-btn { width: 100%; min-height: 58px; padding: 18px 22px; border: 0; border-radius: 18px; cursor: pointer; background: linear-gradient(180deg, #111217 0%, #0b0b0f 100%); color: var(--jp-white); font-size: 15px; font-weight: 800; letter-spacing: 0.04em; box-shadow: 0 16px 36px rgba(11, 11, 15, 0.22); transition: transform var(--ease), box-shadow var(--ease), opacity var(--ease); }
.primary-btn:hover { transform: translateY(-2px); box-shadow: 0 22px 42px rgba(11, 11, 15, 0.28); }
.primary-btn:active { transform: translateY(0); }
.microcopy { max-width: 460px; margin: 12px auto 0; font-size: 12.5px; line-height: 1.5; color: var(--text-muted); font-weight: 500; }
/* ==========================================================================
   Bundle Pitch & Pricing
   ========================================================================== */
.bundle-pitch-box { margin-top: 34px; padding: 42px 26px 28px; border-radius: 24px; position: relative; overflow: hidden; background: linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(255,250,240,0.98) 100%); border: 1px solid rgba(212, 175, 55, 0.35); box-shadow: 0 18px 50px rgba(212, 175, 55, 0.10), inset 0 1px 0 rgba(255,255,255,0.9); }
.bundle-pitch-box::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at top, rgba(212,175,55,0.14), transparent 40%), linear-gradient(135deg, rgba(212,175,55,0.05), transparent 45%); pointer-events: none; }
.bundle-pitch-box > * { position: relative; z-index: 1; }
.flash-sale-banner { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; min-height: 34px; padding: 0 16px; border-radius: 999px; background: linear-gradient(180deg, #d61b3c 0%, #b90f2c 100%); color: var(--jp-white); font-size: 11px; font-weight: 800; letter-spacing: 0.13em; text-transform: uppercase; box-shadow: 0 12px 24px rgba(200, 16, 46, 0.24); white-space: nowrap; }
.bundle-pitch-box h4 { margin: 18px 0 10px; font-size: 24px; line-height: 1.2; font-weight: 800; letter-spacing: -0.03em; color: var(--jp-black); }
.bundle-pitch-box p { color: var(--text-main); font-size: 15.5px; line-height: 1.65; font-weight: 500; }
.bundle-pitch-box img { display: block; width: 100%; max-width: 420px; height: auto; margin: 22px auto; border-radius: 12px; box-shadow: 0 8px 30px rgba(0,0,0,0.08); }
.price-drop { margin: 24px 0 18px; display: flex; justify-content: center; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.old-price { text-decoration: line-through; color: #8b93a1; font-size: 20px; font-weight: 600; }
.new-price { color: var(--jp-red); font-size: clamp(38px, 6vw, 48px); line-height: 1; font-weight: 900; letter-spacing: -0.05em; }
.countdown-timer { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 0 16px; margin-bottom: 24px; border-radius: 999px; background: #fff2f4; border: 1px solid rgba(200, 16, 46, 0.10); color: var(--text-main); font-size: 14px; font-weight: 700; }
#timer { color: var(--jp-red); font-weight: 900; font-variant-numeric: tabular-nums; margin-left: 6px; }
.lemonsqueezy-buy-button { display: block; width: 100%; min-height: 60px; padding: 18px 22px; border-radius: 18px; text-decoration: none; background: linear-gradient(180deg, #008847 0%, #006d39 100%); color: var(--jp-white); font-size: 16px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; box-shadow: 0 18px 34px rgba(0, 112, 60, 0.25); transition: transform var(--ease), box-shadow var(--ease), filter var(--ease); }
.lemonsqueezy-buy-button:hover { transform: translateY(-2px); filter: saturate(1.04); box-shadow: 0 22px 38px rgba(0, 112, 60, 0.32); }
.lemonsqueezy-buy-button:active { transform: translateY(0); }
/* ==========================================================================
   Responsive Utilities
   ========================================================================== */
@media (max-width: 600px) {
  .diagnostic-engine {
    width: calc(100% - 28px);
    margin: 22px auto;
    padding: 30px 18px;
    border-radius: 22px;
  }
  .audit-header h2 {
    font-size: 28px;
  }
  .quiz-step h3 {
    font-size: 20px;
    margin-bottom: 22px;
  }
  #email-capture-gate h3 {
    font-size: 26px;
  }
  .blur-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  .blur-label {
    white-space: normal;
  }
  .blur-value {
    text-align: left;
  }
  .answer-btn, .primary-btn, input[type="email"], .lemonsqueezy-buy-button {
    border-radius: 16px;
  }
  .bundle-pitch-box {
    padding: 46px 18px 22px;
    border-radius: 22px;
  }
  .flash-sale-banner {
    top: 12px;
    font-size: 10px;
    padding: 0 14px;
  }
  .new-price {
    font-size: 36px;
  }
}