/* ═══════════════════════════════════════════════════════
   Hyperscaler Paid Ads Audit Funnel
   Conversion-first design:
   - Light background (white = trust)
   - Brand purple (#C543E6 / #8D3CCE)
   - Inter font (clean, familiar, fast to read)
   - Large tap targets (48px+ minimum on mobile)
   - High contrast, generous spacing
   ═══════════════════════════════════════════════════════ */

   *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

   :root {
     /* Brand colors from Hyperscaler */
     --purple:        #C543E6;
     --purple-dark:   #8D3CCE;
     --purple-soft:   #F5EBFB;
     --purple-tint:   rgba(197, 67, 230, 0.08);
     --purple-glow:   rgba(197, 67, 230, 0.18);
   
     /* Neutral palette */
     --bg:            #FAFAFA;
     --white:         #FFFFFF;
     --text:          #0A0A0A;
     --text-soft:     #4B4B4B;
     --text-muted:    #767676;
     --border:        #E5E5E5;
     --border-strong: #D4D4D4;
   
     /* State */
     --error:         #DC2626;
     --success:       #16A34A;
   
     /* Radii */
     --r-sm:          8px;
     --r:             10px;
     --r-lg:          14px;
   
     --ease:          cubic-bezier(0.22, 1, 0.36, 1);
   }
   
   html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
   
   body {
     font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
     background: var(--bg);
     color: var(--text);
     min-height: 100dvh;
     -webkit-font-smoothing: antialiased;
     font-feature-settings: 'cv11', 'ss01';
     line-height: 1.5;
   }
   
   /* ─── Page layout ──────────────────────────────────── */
   .page {
     max-width: 640px;
     margin: 0 auto;
     padding: 0 16px 40px;
     min-height: 100dvh;
     display: flex;
     flex-direction: column;
   }
   
   /* ─── Header ───────────────────────────────────────── */
   .header {
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 20px 0;
   }
   
   .logo {
     display: flex;
     align-items: center;
     text-decoration: none;
   }
   
   .logo-img {
     height: 24px;
     width: auto;
     object-fit: contain;
   }
   
   .logo-text {
     font-size: 17px;
     font-weight: 700;
     color: var(--text);
     letter-spacing: -0.02em;
   }
   
   .step-indicator {
     font-size: 13px;
     font-weight: 500;
     color: var(--text-muted);
     background: var(--white);
     border: 1px solid var(--border);
     padding: 5px 12px;
     border-radius: 100px;
   }
   
   /* ─── Progress bar ─────────────────────────────────── */
   .progress {
     width: 100%;
     height: 4px;
     background: var(--border);
     border-radius: 100px;
     overflow: hidden;
     margin-bottom: 24px;
   }
   
   .progress-fill {
     height: 100%;
     width: 12.5%;
     background: linear-gradient(90deg, var(--purple-dark), var(--purple));
     border-radius: 100px;
     transition: width 0.5s var(--ease);
   }
   
   /* ─── Intro block ──────────────────────────────────── */
   .intro {
     text-align: center;
     margin-bottom: 24px;
     padding: 0 8px;
   }
   
   .intro.hide { display: none; }
   
   .intro-title {
     font-size: clamp(24px, 5.5vw, 32px);
     font-weight: 700;
     letter-spacing: -0.025em;
     color: var(--text);
     margin-bottom: 12px;
     line-height: 1.15;
   }
   
   .intro-sub {
     font-size: 15px;
     font-weight: 400;
     color: var(--text-soft);
     max-width: 480px;
     margin: 0 auto 16px;
     line-height: 1.55;
   }
   
   .intro-trust {
     display: flex;
     align-items: center;
     justify-content: center;
     flex-wrap: wrap;
     gap: 16px;
   }
   
   .trust-item {
     display: inline-flex;
     align-items: center;
     gap: 6px;
     font-size: 13px;
     font-weight: 500;
     color: var(--text-muted);
   }
   
   .trust-item svg {
     color: var(--purple);
   }
   
   /* ─── Card ─────────────────────────────────────────── */
   .card {
     background: var(--white);
     border: 1px solid var(--border);
     border-radius: var(--r-lg);
     box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.04);
     overflow: hidden;
   }
   
   /* ─── Slides ────────────────────────────────────────── */
   .slides {
     position: relative;
     min-height: 360px;
   }
   
   .slide {
     display: none;
     padding: 32px 28px 8px;
     will-change: transform, opacity;
   }
   
   .slide.active {
     display: block;
     animation: slideIn 0.32s var(--ease) both;
   }
   
   .slide.leaving {
     display: block;
     animation: slideOut 0.22s var(--ease) both;
     position: absolute;
     top: 0; left: 0; right: 0;
   }
   
   .slide.active.back-in {
     animation: slideInBack 0.32s var(--ease) both;
   }
   
   @keyframes slideIn {
     from { opacity: 0; transform: translateX(20px); }
     to   { opacity: 1; transform: none; }
   }
   @keyframes slideOut {
     from { opacity: 1; transform: none; }
     to   { opacity: 0; transform: translateX(-16px); }
   }
   @keyframes slideInBack {
     from { opacity: 0; transform: translateX(-20px); }
     to   { opacity: 1; transform: none; }
   }
   
   /* ─── Question ─────────────────────────────────────── */
   .question {
     font-size: clamp(20px, 4vw, 24px);
     font-weight: 700;
     letter-spacing: -0.02em;
     color: var(--text);
     line-height: 1.25;
     margin-bottom: 6px;
   }
   
   .question-sub {
     font-size: 14px;
     font-weight: 400;
     color: var(--text-muted);
     margin-bottom: 24px;
     line-height: 1.5;
   }
   
   /* ─── Options ──────────────────────────────────────── */
   .options {
     display: grid;
     gap: 10px;
     margin-top: 20px;
   }
   
   .options.grid-2 { grid-template-columns: 1fr 1fr; }
   .options.grid-1 { grid-template-columns: 1fr; }
   
   .option {
     display: flex;
     align-items: center;
     justify-content: flex-start;
     text-align: left;
     padding: 14px 18px;
     min-height: 52px;
     background: var(--white);
     border: 1.5px solid var(--border);
     border-radius: var(--r);
     color: var(--text);
     font-family: inherit;
     font-size: 15px;
     font-weight: 500;
     cursor: pointer;
     transition:
       border-color 0.15s var(--ease),
       background 0.15s var(--ease),
       box-shadow 0.15s var(--ease),
       transform 0.1s var(--ease);
     position: relative;
     -webkit-tap-highlight-color: transparent;
     user-select: none;
   }
   
   .option:hover {
     border-color: var(--purple);
     background: var(--purple-tint);
   }
   
   .option:active {
     transform: scale(0.99);
   }
   
   .option.selected {
     border-color: var(--purple);
     background: var(--purple-tint);
     box-shadow: 0 0 0 3px var(--purple-glow);
     font-weight: 600;
   }
   
   /* Checkmark on selected */
   .option.selected::after {
     content: '';
     position: absolute;
     top: 50%;
     right: 14px;
     transform: translateY(-50%);
     width: 18px;
     height: 18px;
     border-radius: 50%;
     background: var(--purple);
     background-image: url("data:image/svg+xml,%3Csvg width='12' height='10' viewBox='0 0 12 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 5l3 3 7-7' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
     background-repeat: no-repeat;
     background-position: center;
   }
   
   .option.wide {
     padding: 16px 50px 16px 18px;
   }
   
   /* ─── Form ─────────────────────────────────────────── */
   .form {
     display: flex;
     flex-direction: column;
     gap: 14px;
     margin-top: 20px;
   }
   
   .form-row.two {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 12px;
   }
   
   .field {
     display: flex;
     flex-direction: column;
     gap: 6px;
   }
   
   .label {
     font-size: 13px;
     font-weight: 600;
     color: var(--text);
   }
   
   .required {
     color: var(--purple);
     font-weight: 700;
   }
   
   .input {
     width: 100%;
     padding: 13px 14px;
     background: var(--white);
     border: 1.5px solid var(--border);
     border-radius: var(--r);
     font-family: inherit;
     font-size: 15px;
     font-weight: 400;
     color: var(--text);
     outline: none;
     transition: border-color 0.15s, box-shadow 0.15s;
     -webkit-appearance: none;
   }
   
   .input::placeholder {
     color: #B0B0B0;
   }
   
   .input:focus {
     border-color: var(--purple);
     box-shadow: 0 0 0 3px var(--purple-glow);
   }
   
   .input.has-error {
     border-color: var(--error);
     box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
   }
   
   .error-msg {
     font-size: 13px;
     color: var(--error);
     display: none;
     font-weight: 500;
   }
   
   .error-msg.show { display: block; }
   
   /* ─── Submit button ────────────────────────────────── */
   .submit-btn {
     width: 100%;
     padding: 16px 24px;
     margin-top: 4px;
     background: linear-gradient(135deg, var(--purple-dark), var(--purple));
     border: none;
     border-radius: var(--r);
     color: var(--white);
     font-family: inherit;
     font-size: 16px;
     font-weight: 600;
     letter-spacing: -0.01em;
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 8px;
     transition: opacity 0.15s, transform 0.1s var(--ease), box-shadow 0.15s;
     box-shadow: 0 4px 14px var(--purple-glow);
   }
   
   .submit-btn:hover:not(:disabled) {
     opacity: 0.95;
     transform: translateY(-1px);
     box-shadow: 0 6px 20px rgba(197, 67, 230, 0.32);
   }
   
   .submit-btn:active:not(:disabled) {
     transform: translateY(0);
   }
   
   .submit-btn:disabled {
     opacity: 0.45;
     cursor: not-allowed;
   }
   
   .sb-arrow { transition: transform 0.18s var(--ease); }
   .submit-btn:hover:not(:disabled) .sb-arrow { transform: translateX(3px); }
   
   .sb-spinner {
     display: none;
     width: 16px; height: 16px;
     border: 2px solid rgba(255,255,255,0.3);
     border-top-color: var(--white);
     border-radius: 50%;
     animation: spin 0.7s linear infinite;
   }
   .sb-spinner.on { display: block; }
   @keyframes spin { to { transform: rotate(360deg); } }
   
   .submit-btn.loading .sb-label,
   .submit-btn.loading .sb-arrow { display: none; }
   
   /* ─── Privacy line ─────────────────────────────────── */
   .privacy {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 5px;
     font-size: 12.5px;
     color: var(--text-muted);
     margin-top: 4px;
   }
   
   .privacy svg {
     color: var(--text-muted);
     flex-shrink: 0;
   }
   
   /* ─── Nav ──────────────────────────────────────────── */
   .nav {
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 18px 28px 24px;
     border-top: 1px solid var(--border);
     background: #FCFCFC;
   }
   
   .back-btn {
     background: transparent;
     border: none;
     color: var(--text-muted);
     font-family: inherit;
     font-size: 14px;
     font-weight: 500;
     padding: 8px 4px;
     cursor: pointer;
     transition: color 0.15s;
     visibility: hidden;
   }
   
   .back-btn.visible { visibility: visible; }
   .back-btn:hover { color: var(--text); }
   
   .next-btn {
     background: linear-gradient(135deg, var(--purple-dark), var(--purple));
     border: none;
     border-radius: var(--r);
     color: var(--white);
     font-family: inherit;
     font-size: 14.5px;
     font-weight: 600;
     padding: 11px 24px;
     cursor: pointer;
     margin-left: auto;
     display: inline-flex;
     align-items: center;
     gap: 6px;
     transition: opacity 0.15s, transform 0.1s var(--ease), box-shadow 0.15s;
     box-shadow: 0 4px 14px var(--purple-glow);
   }
   
   .next-btn:hover:not(:disabled) {
     opacity: 0.95;
     transform: translateY(-1px);
     box-shadow: 0 6px 18px rgba(197, 67, 230, 0.32);
   }
   
   .next-btn:active:not(:disabled) {
     transform: translateY(0);
   }
   
   .next-btn:disabled {
     opacity: 0.4;
     cursor: not-allowed;
     background: var(--border-strong);
     color: var(--text-muted);
     box-shadow: none;
   }
   
   .next-btn svg { transition: transform 0.18s var(--ease); }
   .next-btn:hover:not(:disabled) svg { transform: translateX(2px); }
   
   /* Hide Continue on step 8 (submit handles it) */
   .nav.step8 .next-btn { display: none; }
   .nav.step8 .back-btn { margin-right: auto; }
   
   /* ─── Bottom trust strip ───────────────────────────── */
   .bottom-trust {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 32px;
     margin-top: 24px;
     padding: 14px 24px;
     background: transparent;
   }
   
   .bt-item {
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 2px;
     text-align: center;
   }
   
   .bt-num {
     font-size: 18px;
     font-weight: 700;
     color: var(--purple);
     letter-spacing: -0.02em;
   }
   
   .bt-lbl {
     font-size: 12px;
     font-weight: 500;
     color: var(--text-muted);
   }
   
   .bottom-trust.hide { display: none; }
   
   /* ─── Thank you ────────────────────────────────────── */
   .ty {
     display: none;
     background: var(--white);
     border: 1px solid var(--border);
     border-radius: var(--r-lg);
     box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.04);
     padding: 48px 32px;
     text-align: center;
     flex-direction: column;
     align-items: center;
     gap: 18px;
   }
   
   .ty.show {
     display: flex;
     animation: tyIn 0.5s var(--ease) both;
   }
   
   @keyframes tyIn {
     from { opacity: 0; transform: translateY(12px); }
     to   { opacity: 1; transform: none; }
   }
   
   .ty-check {
     width: 56px;
     height: 56px;
     border-radius: 50%;
     background: var(--purple-soft);
     color: var(--purple);
     display: flex;
     align-items: center;
     justify-content: center;
     animation: checkPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.12s both;
   }
   
   @keyframes checkPop {
     from { transform: scale(0.5); opacity: 0; }
     to   { transform: scale(1); opacity: 1; }
   }
   
   .ty-title {
     font-size: clamp(24px, 5vw, 30px);
     font-weight: 700;
     letter-spacing: -0.025em;
     color: var(--text);
   }
   
   .ty-text {
     font-size: 15px;
     font-weight: 400;
     color: var(--text-soft);
     max-width: 460px;
     line-height: 1.6;
   }
   
   /* Numbered next-steps */
   .ty-steps {
     display: flex;
     flex-direction: column;
     gap: 14px;
     width: 100%;
     max-width: 420px;
     margin: 8px 0 6px;
     text-align: left;
   }
   
   .ty-step {
     display: flex;
     align-items: flex-start;
     gap: 14px;
     padding: 14px 16px;
     background: #FAFAFA;
     border: 1px solid var(--border);
     border-radius: var(--r);
   }
   
   .ty-step-num {
     flex-shrink: 0;
     width: 26px;
     height: 26px;
     border-radius: 50%;
     background: var(--purple);
     color: var(--white);
     font-size: 13px;
     font-weight: 700;
     display: flex;
     align-items: center;
     justify-content: center;
   }
   
   .ty-step-body {
     display: flex;
     flex-direction: column;
     gap: 2px;
   }
   
   .ty-step-body strong {
     font-size: 14px;
     font-weight: 600;
     color: var(--text);
   }
   
   .ty-step-body span {
     font-size: 13px;
     color: var(--text-muted);
     line-height: 1.45;
   }
   
   /* CTA */
   .ty-cta-wrap {
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 10px;
     margin-top: 8px;
     padding-top: 20px;
     border-top: 1px solid var(--border);
     width: 100%;
     max-width: 420px;
   }
   
   .ty-cta-text {
     font-size: 14px;
     font-weight: 500;
     color: var(--text-soft);
   }
   
   .ty-cta {
     display: inline-flex;
     align-items: center;
     gap: 6px;
     padding: 13px 28px;
     background: linear-gradient(135deg, var(--purple-dark), var(--purple));
     color: var(--white);
     font-size: 14.5px;
     font-weight: 600;
     border-radius: 100px;
     text-decoration: none;
     letter-spacing: -0.01em;
     transition: opacity 0.15s, transform 0.1s var(--ease), box-shadow 0.15s;
     box-shadow: 0 4px 14px var(--purple-glow);
   }
   
   .ty-cta:hover {
     opacity: 0.95;
     transform: translateY(-1px);
     box-shadow: 0 6px 20px rgba(197, 67, 230, 0.32);
   }
   
   /* ─── Footer ───────────────────────────────────────── */
   .footer {
     margin-top: auto;
     padding: 32px 0 0;
     text-align: center;
   }
   
   .footer p {
     font-size: 12.5px;
     color: var(--text-muted);
   }
   
   /* ─── Responsive ───────────────────────────────────── */
   @media (max-width: 600px) {
     .page { padding: 0 12px 32px; }
     .header { padding: 14px 0; }
     .step-indicator { font-size: 12px; padding: 4px 10px; }
   
     .intro-title { font-size: 22px; }
     .intro-sub { font-size: 14px; }
     .intro-trust { gap: 12px; }
     .trust-item { font-size: 12px; }
   
     .slide { padding: 24px 20px 8px; }
     .nav { padding: 14px 20px 20px; }
   
     .question { font-size: 19px; }
     .question-sub { font-size: 13.5px; }
   
     .options.grid-2 { gap: 8px; }
     .option { padding: 13px 14px; font-size: 14.5px; min-height: 48px; }
     .option.wide { padding: 14px 44px 14px 16px; }
   
     .form-row.two { grid-template-columns: 1fr; gap: 14px; }
   
     .bottom-trust { gap: 20px; }
     .bt-num { font-size: 16px; }
     .bt-lbl { font-size: 11px; }
   
     .ty { padding: 36px 20px; }
     .ty-step { padding: 12px 14px; }
   }
   
   @media (max-width: 380px) {
     .options.grid-2 { grid-template-columns: 1fr; }
   }
   
   /* Larger tap targets and keyboard focus visibility */
   .option:focus-visible,
   .input:focus-visible,
   .next-btn:focus-visible,
   .back-btn:focus-visible,
   .submit-btn:focus-visible {
     outline: 2px solid var(--purple);
     outline-offset: 2px;
   }