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

    :root {
      --purple:        #7C3AED;
      --purple-deep:   #4C1D95;
      --purple-mid:    #A78BFA;
      --purple-light:  #C4B5FD;
      --green:         #10B981;
      --green-dark:    #059669;
      --green-deep:    #065F46;
      --cover:  #0C0520;
      --n900: #111827; --n700: #374151;
      --n500: #6B7280; --n300: #D1D5DB;
      --n200: #E5E7EB; --n100: #F3F4F6; --n50: #F9FAFB;
    }

    html, body { height: 100%; scroll-behavior: smooth; }

    body {
      font-family: 'Inter', sans-serif;
      background: var(--cover) !important;
      color: #fff;
      min-height: 100vh;
      display: flex;            /* main grows, footer sits at the bottom — no forced scroll */
      flex-direction: column;
      overflow-x: hidden;
      transition: background .3s, color .3s;
    }

    .bg-glow {
      pointer-events: none; position: fixed; inset: 0; z-index: 0;
      background:
        radial-gradient(ellipse 55% 50% at 25% 52%, rgba(124,58,237,.18) 0%, transparent 65%),
        radial-gradient(ellipse 60% 65% at 78% 52%, rgba(99,40,210,.28) 0%, transparent 60%),
        radial-gradient(ellipse 35% 40% at 80% 12%, rgba(76,29,149,.18) 0%, transparent 65%);
      transition: opacity .4s;
    }
    .bg-dots {
      pointer-events: none; position: fixed; inset: 0; z-index: 0;
      background-image: radial-gradient(circle, rgba(124,58,237,.14) 1px, transparent 1px);
      background-size: 28px 28px;
      mask-image: radial-gradient(ellipse 90% 90% at 50% 50%, black 30%, transparent 100%);
    }

    #nav {
      position: fixed; top: 0; left: 0; right: 0; z-index: 200;
      height: 62px;
      transition: background .35s, backdrop-filter .35s, box-shadow .35s;
    }
    #nav.stuck {
      background: rgba(12,6,32,.88);
      backdrop-filter: blur(18px) saturate(1.4);
      box-shadow: 0 1px 0 rgba(124,58,237,.18);
    }
    .nav-inner {
      max-width: 1200px; margin: 0 auto; padding: 0 48px;
      height: 100%; display: flex; align-items: center; gap: 40px;
    }
    .nav-logo { display: flex; align-items: center; gap: 9px; text-decoration: none; }
    .nav-logo span { font-size: 19px; font-weight: 700; color: #fff; }
    .nav-end { margin-left: auto; display: flex; align-items: center; gap: 14px; }
    .nav-signin {
      background: rgba(255,255,255,.1); color: #fff;
      border: 1px solid rgba(255,255,255,.2);
      border-radius: 8px; padding: 8px 16px;
      font-size: 13.5px; font-weight: 600;
      text-decoration: none; transition: background .2s, border-color .2s;
    }
    .nav-signin:hover { background: rgba(255,255,255,.2); border-color: rgba(255,255,255,.35); color: #fff; }

    .theme-toggle {
      position: relative; width: 50px; height: 26px; border-radius: 13px;
      background: rgba(255,255,255,.13); border: 1.5px solid rgba(255,255,255,.22);
      cursor: pointer; outline: none; transition: background .3s, border-color .3s;
      flex-shrink: 0; padding: 0;
    }
    .theme-toggle:hover { background: rgba(255,255,255,.2); }
    .tt-thumb {
      position: absolute; top: 2px; left: 2px;
      width: 20px; height: 20px; border-radius: 50%;
      background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.25);
      transition: transform .35s cubic-bezier(.34,1.4,.64,1);
      display: flex; align-items: center; justify-content: center;
    }
    .tt-moon { display: block; color: #4C1D95; }
    .tt-sun  { display: none;  color: #F59E0B; }

    [data-theme="light"] { --cover: #F0EEFF; }
    [data-theme="light"] body { background: var(--cover) !important; color: var(--n900); }
    [data-theme="light"] #nav.stuck { background: rgba(246,244,255,.94); box-shadow: 0 1px 0 rgba(0,0,0,.08); }
    [data-theme="light"] .nav-logo span { color: var(--n900); }
    [data-theme="light"] .nav-signin { background: rgba(0,0,0,.06); color: var(--n900); border-color: rgba(0,0,0,.15); }
    [data-theme="light"] .nav-signin:hover { background: rgba(0,0,0,.12); }
    [data-theme="light"] .theme-toggle { background: rgba(0,0,0,.08); border-color: rgba(0,0,0,.15); }
    [data-theme="light"] .theme-toggle:hover { background: rgba(0,0,0,.13); }
    [data-theme="light"] .tt-thumb { transform: translateX(24px); background: #1E1B4B; }
    [data-theme="light"] .tt-moon { display: none; }
    [data-theme="light"] .tt-sun { display: block; color: #F59E0B; }
    [data-theme="light"] .bg-glow { opacity: .3; }
    [data-theme="light"] .bg-dots { opacity: .5; }
    [data-theme="light"] .page-pill { background: rgba(124,58,237,.12); color: #4C1D95; }
    [data-theme="light"] .page-h1 { color: var(--n900); }
    [data-theme="light"] .page-h1 .grad { background: linear-gradient(130deg, #4C1D95 0%, #6D28D9 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
    [data-theme="light"] .page-sub { color: var(--n700); }
    [data-theme="light"] .scan-card { background: #fff; border-color: rgba(109,40,217,.25); box-shadow: 0 12px 48px rgba(109,40,217,.1), 0 2px 8px rgba(0,0,0,.06); }
    [data-theme="light"] .input-label { color: var(--purple-deep); }
    [data-theme="light"] .url-input { background: #fff; border-color: rgba(109,40,217,.35); color: var(--n900); box-shadow: 0 2px 8px rgba(0,0,0,.06); }
    [data-theme="light"] .url-input::placeholder { color: var(--n300); }
    [data-theme="light"] .url-input:focus { border-color: var(--purple); box-shadow: 0 0 0 3px rgba(124,58,237,.12); }
    [data-theme="light"] .scan-note, [data-theme="light"] .trust-item { color: var(--n700); }
    [data-theme="light"] .scan-step { background: rgba(0,0,0,.04); border-color: rgba(0,0,0,.1); }
    [data-theme="light"] .scan-step.active { background: rgba(124,58,237,.08); border-color: rgba(124,58,237,.3); }
    [data-theme="light"] .scan-step.done { background: rgba(5,150,105,.07); border-color: rgba(5,150,105,.28); }
    [data-theme="light"] .step-title-t { color: var(--n900); }
    [data-theme="light"] .step-sub-t { color: var(--n500); }
    [data-theme="light"] .scanning-url { background: rgba(0,0,0,.05); border-color: rgba(0,0,0,.12); color: var(--n700); }
    [data-theme="light"] .scanning-label { color: var(--purple); }
    [data-theme="light"] .scan-step .step-status { color: var(--n500); }
    [data-theme="light"] .scan-step.active .step-status { color: var(--purple); }
    [data-theme="light"] .scan-step.done .step-status { color: var(--green-dark); }
    [data-theme="light"] .email-card { background: #fff; border-color: rgba(109,40,217,.25); box-shadow: 0 12px 48px rgba(109,40,217,.1); }
    [data-theme="light"] .email-h { color: var(--n900); }
    [data-theme="light"] .email-sub { color: var(--n700); }
    [data-theme="light"] .email-input { background: #fff; border-color: rgba(109,40,217,.35); color: var(--n900); box-shadow: 0 2px 8px rgba(0,0,0,.06); }
    [data-theme="light"] .email-input::placeholder { color: var(--n300); }
    [data-theme="light"] .email-input:focus { border-color: var(--purple); box-shadow: 0 0 0 3px rgba(124,58,237,.12); }
    [data-theme="light"] .email-note, [data-theme="light"] .scan-disclaimer { color: var(--n700); }
    [data-theme="light"] .scan-disclaimer a { color: var(--purple-deep); }
    [data-theme="light"] .result-timing { background: rgba(5,150,105,.08); border-color: rgba(5,150,105,.3); color: var(--green-dark); }
    [data-theme="light"] .page-h1.success-h, [data-theme="light"] .success-p { color: var(--n900); }
    [data-theme="light"] .btn-rescan { background: rgba(124,58,237,.12); color: var(--purple-deep); border-color: rgba(109,40,217,.3); }
    [data-theme="light"] .btn-rescan:hover { background: rgba(124,58,237,.2); }
    [data-theme="light"] .consent-text { color: var(--n700); }
    [data-theme="light"] .consent-text a { color: var(--purple-deep); }
    [data-theme="light"] footer { background: #EDE8FF; border-top-color: rgba(109,40,217,.15); color: var(--n700); }
    [data-theme="light"] footer a { color: var(--n700); }
    [data-theme="light"] footer a:hover { color: var(--n900); }

    /* Sized so stage 1 (hero + card + trust row) fits a 768 px laptop viewport without scrolling. */
    main { position: relative; z-index: 1; flex: 1 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 78px 24px 20px; text-align: center; background: transparent !important; }
    
    .stage { 
      display: none; 
      flex-direction: column; 
      align-items: center; 
      width: 100%; 
      max-width: 640px; 
      background: transparent !important; 
      border: none !important; 
      box-shadow: none !important; 
    }
    .stage.visible { display: flex; }
    
    .page-pill { 
      display: inline-flex; 
      align-items: center; 
      gap: 8px; 
      background: rgba(124,58,237,.14); 
      border: 1px solid rgba(124,58,237,.32); 
      border-radius: 100px; 
      padding: 5px 14px;
      font-size: 11px; 
      font-weight: 700; 
      letter-spacing: .08em; 
      text-transform: uppercase; 
      color: var(--purple-light); 
      margin-bottom: 14px;
      animation: borderPulse 3s ease-in-out infinite; 
    }
    .pill-dot { 
      width: 6px; 
      height: 6px; 
      border-radius: 50%; 
      background: #EF4444; 
      animation: trafficPulse 3s ease-in-out infinite; 
    }

    @keyframes trafficPulse {
      0%, 100% { background: #EF4444; }
      33%      { background: #F59E0B; }
      66%      { background: #10B981; }
    }

    @keyframes borderPulse {
      0%, 100% { border-color: rgba(239, 68, 68, 0.4); }
      33%      { border-color: rgba(245, 158, 11, 0.4); }
      66%      { border-color: rgba(16, 185, 129, 0.4); }
    }

    .page-h1 { font-family: 'Poppins', sans-serif; font-size: clamp(28px, 4.2vw, 46px); font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; margin-bottom: 12px; color: #fff; }
    .page-h1 .grad { background: linear-gradient(130deg, var(--purple-mid) 0%, #C4B5FD 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
    .page-sub { font-size: 15px; color: rgba(255,255,255,.74); line-height: 1.6; max-width: 500px; margin-bottom: 22px; }
    
    .scan-card { 
      position: relative;
      z-index: 10;
      background: rgba(255,255,255,.04); 
      border: 1.5px solid rgba(124,58,237,.35); 
      border-radius: 22px; 
      padding: 26px 28px;
      width: 100%; 
      box-shadow: 0 0 80px rgba(109,40,217,.22), 0 24px 64px rgba(0,0,0,.45); 
    }
    .input-label { display: block; font-size: 11.5px; font-weight: 700; color: var(--purple-light); letter-spacing: .08em; text-transform: uppercase; text-align: left; margin-bottom: 8px; }
    .url-input { width: 100%; background: #fff; border: 2.5px solid rgba(255,255,255,.9); border-radius: 12px; padding: 14px 18px; font-family: 'Inter', sans-serif; font-size: 16px; font-weight: 500; color: #111827; outline: none; transition: border-color .2s, box-shadow .2s; margin-bottom: 12px; display: block; box-shadow: 0 4px 20px rgba(0,0,0,.2); }
    .url-input::placeholder { color: #9CA3AF; font-weight: 400; }
    .url-input:focus { border-color: var(--purple); box-shadow: 0 0 0 4px rgba(124,58,237,.22), 0 4px 20px rgba(0,0,0,.2); }
    
    .btn-scan { 
      position: relative;
      z-index: 11;
      pointer-events: auto !important;
      cursor: pointer !important;
      width: 100%; 
      background: linear-gradient(135deg, #10B981 0%, #059669 100%); 
      color: #fff; 
      border: none; 
      border-radius: 12px; 
      padding: 14px 24px;
      font-family: 'Poppins', sans-serif; 
      font-size: 16px; 
      font-weight: 700; 
      letter-spacing: .01em; 
      transition: opacity .2s, transform .12s, box-shadow .2s; 
      display: flex; 
      align-items: center; 
      justify-content: center; 
      gap: 10px; 
      box-shadow: 0 8px 32px rgba(16,185,129,.45), 0 2px 8px rgba(0,0,0,.2); 
    }
    .btn-scan:hover { opacity: .92; box-shadow: 0 12px 40px rgba(16,185,129,.55), 0 2px 8px rgba(0,0,0,.2); }
    .btn-scan:active { transform: scale(.98); }
    .scan-note { font-size: 12.5px; color: rgba(255,255,255,.62); margin-top: 10px; text-align: center; }
    
    .scan-disclaimer { font-size: 12.5px; color: rgba(255,255,255,.8); margin-top: 10px; line-height: 1.5; text-align: center; }
    .scan-disclaimer a { color: var(--purple-light); text-decoration: underline; }

    .trust-row { display: flex; align-items: center; gap: 10px 20px; margin-top: 18px; justify-content: center; flex-wrap: wrap; }
    .trust-item { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 500; color: rgba(255,255,255,.68); }

    .scan-orb { position: relative; width: 100px; height: 100px; margin-bottom: 22px; }
    .orb-ring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(124,58,237,.22); animation: ringExpand 2s ease-in-out infinite; }
    .orb-ring:nth-child(2) { animation-delay: .67s; }
    .orb-ring:nth-child(3) { animation-delay: 1.34s; }
    @keyframes ringExpand { 0% { transform: scale(.6); opacity: .7; } 100% { transform: scale(1.5); opacity: 0; } }
    .orb-core { position: absolute; inset: 20px; border-radius: 50%; background: radial-gradient(circle, rgba(124,58,237,.55), rgba(79,28,196,.3)); border: 1.5px solid rgba(124,58,237,.65); display: flex; align-items: center; justify-content: center; box-shadow: 0 0 32px rgba(124,58,237,.45); }
    .orb-spinner { position: absolute; inset: 12px; border-radius: 50%; border: 2.5px solid transparent; border-top-color: var(--purple-mid); animation: spin 1.1s linear infinite; }
    @keyframes spin { to { transform: rotate(360deg); } }
    .scanning-label { font-size: 12px; font-weight: 700; color: var(--purple-light); letter-spacing: .1em; text-transform: uppercase; margin-bottom: 8px; }
    .scanning-url { font-size: 13px; color: rgba(255,255,255,.62); font-family: 'Courier New', monospace; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: 8px; padding: 8px 18px; margin-bottom: 18px; max-width: 100%; overflow-wrap: anywhere; }
    .scan-steps { display: flex; flex-direction: column; gap: 10px; width: 100%; text-align: left; }
    /* Waiting steps stay readable (the mock faded the whole card to 30 %). */
    .scan-step { display: flex; align-items: center; gap: 14px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); border-radius: 14px; padding: 16px 18px; opacity: .78; transition: opacity .4s, border-color .4s, background .4s; }
    .scan-step.active { opacity: 1; background: rgba(124,58,237,.1); border-color: rgba(124,58,237,.35); }
    .scan-step.done { opacity: 1; background: rgba(16,185,129,.07); border-color: rgba(16,185,129,.3); }
    
    .step-ico { width: 36px; height: 36px; border-radius: 9px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: rgba(124,58,237,.15); border: 1px solid rgba(124,58,237,.28); transition: background .3s, border-color .3s; }
    .step-ico .check-mark { display: none; }
    .scan-step.done .step-ico { background: rgba(16,185,129,.18) !important; border-color: rgba(16,185,129,.5) !important; }
    .scan-step.done .step-ico .check-mark { display: block !important; }

    .step-body-text { flex: 1; }
    .step-title-t { font-size: 14px; font-weight: 600; color: #fff; margin-bottom: 3px; }
    .step-sub-t { font-size: 12px; color: rgba(255,255,255,.62); line-height: 1.5; }
    .step-status { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; flex-shrink: 0; color: rgba(255,255,255,.6); }
    .scan-step.active .step-status { color: var(--purple-light); }
    .scan-step.done .step-status { color: #6EE7B7; }

    .email-check { width: 64px; height: 64px; border-radius: 50%; background: radial-gradient(circle, rgba(16,185,129,.32), rgba(5,150,105,.1)); border: 2px solid rgba(16,185,129,.5); display: flex; align-items: center; justify-content: center; margin-bottom: 14px; box-shadow: 0 0 48px rgba(16,185,129,.28); animation: popIn .5s cubic-bezier(.34,1.56,.64,1) both; }
    @keyframes popIn { from{transform:scale(0);opacity:0} to{transform:scale(1);opacity:1} }
    .email-card { background: rgba(255,255,255,.04); border: 1.5px solid rgba(124,58,237,.35); border-radius: 22px; padding: 24px 26px; width: 100%; box-shadow: 0 0 80px rgba(109,40,217,.2), 0 24px 64px rgba(0,0,0,.4); text-align: left; }
    .result-timing { display: flex; align-items: center; gap: 8px; background: rgba(16,185,129,.09); border: 1px solid rgba(16,185,129,.28); border-radius: 8px; padding: 9px 14px; margin-bottom: 14px; font-size: 12.5px; color: #6EE7B7; font-weight: 600; }
    .email-h { font-family: 'Poppins', sans-serif; font-size: 21px; font-weight: 800; color: #fff; margin-bottom: 6px; }
    .email-sub { font-size: 14px; color: rgba(255,255,255,.72); line-height: 1.6; margin-bottom: 14px; }
    .email-input { width: 100%; background: #fff; border: 2.5px solid rgba(255,255,255,.9); border-radius: 12px; padding: 15px 18px; font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 500; color: #111827; outline: none; margin-bottom: 12px; display: block; box-shadow: 0 4px 16px rgba(0,0,0,.18); transition: border-color .2s, box-shadow .2s; }
    .email-input::placeholder { color: #9CA3AF; font-weight: 400; }
    .email-input:focus { border-color: var(--purple); box-shadow: 0 0 0 4px rgba(124,58,237,.18), 0 4px 16px rgba(0,0,0,.18); }
    
    .consent-label { display: flex; align-items: flex-start; gap: 12px; margin: 12px 0 14px; cursor: pointer; user-select: none; }
    .consent-checkbox { width: 18px; height: 18px; margin-top: 3px; flex-shrink: 0; accent-color: var(--purple); cursor: pointer; }
    .consent-text { font-size: 12.5px; color: rgba(255, 255, 255, 0.86); line-height: 1.5; }
    .consent-text a { color: var(--purple-light); text-decoration: underline; }
    .consent-text a:hover { color: #fff; }

    .btn-submit { width: 100%; background: linear-gradient(135deg, #10B981 0%, #059669 100%); color: #fff; border: none; border-radius: 12px; padding: 16px; font-family: 'Poppins', sans-serif; font-size: 15px; font-weight: 700; cursor: pointer; letter-spacing: .01em; display: flex; align-items: center; justify-content: center; gap: 8px; transition: opacity .2s, transform .12s, box-shadow .2s; box-shadow: 0 8px 28px rgba(16,185,129,.4); }
    .btn-submit:hover { opacity: .9; box-shadow: 0 10px 36px rgba(16,185,129,.5); }
    .btn-submit:active { transform: scale(.98); }
    .email-note { font-size: 12px; color: rgba(255,255,255,.66); margin-top: 10px; text-align: center; line-height: 1.5; }

    .success-orb { width: 96px; height: 96px; border-radius: 50%; background: radial-gradient(circle, rgba(16,185,129,.38), rgba(5,150,105,.12)); border: 2px solid rgba(16,185,129,.55); display: flex; align-items: center; justify-content: center; margin-bottom: 24px; box-shadow: 0 0 60px rgba(16,185,129,.32); animation: popIn .5s cubic-bezier(.34,1.56,.64,1) both; }
    .success-p { color: rgba(255,255,255,.78); font-size: 16px; line-height: 1.7; }
    
    .success-actions { display: flex; align-items: center; gap: 16px; margin-top: 24px; flex-wrap: wrap; justify-content: center; }
    .btn-rescan {
      background: rgba(124,58,237,.18); color: var(--purple-light);
      border: 1px solid rgba(124,58,237,.4); border-radius: 10px;
      padding: 12px 22px; font-family: 'Poppins', sans-serif; font-size: 14px; font-weight: 600;
      cursor: pointer; transition: background .2s, color .2s, border-color .2s;
    }
    .btn-rescan:hover { background: rgba(124,58,237,.32); color: #fff; border-color: rgba(124,58,237,.6); }
    .back-link { font-size: 14px; font-weight: 600; color: var(--purple-light); text-decoration: none; transition: color .2s; }
    .back-link:hover { color: #fff; }

    footer { position: relative; z-index: 1; flex-shrink: 0; text-align: center; padding: 12px 16px; font-size: 12.5px; color: rgba(255,255,255,.6); border-top: 1px solid rgba(255,255,255,.08); }
    footer a { color: rgba(255,255,255,.72); text-decoration: none; transition: color .2s; }
    footer a:hover { color: #fff; }

    @keyframes fadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
    .stage.visible { animation: fadeUp .45s cubic-bezier(.22,1,.36,1) both; }

    @media (max-width: 620px) {
      .nav-inner { padding: 0 20px; gap: 16px; }
      main { padding: 72px 16px 14px; }
      .page-pill { margin-bottom: 10px; }
      .page-h1 { font-size: clamp(25px, 7vw, 32px); margin-bottom: 10px; }
      .page-sub { font-size: 14px; line-height: 1.5; margin-bottom: 14px; }
      .scan-card, .email-card { padding: 18px 16px; border-radius: 18px; }
      .url-input, .email-input { padding: 13px 14px; font-size: 16px; }
      .scan-disclaimer { font-size: 12px; margin-top: 8px; }
      .scan-note { margin-top: 8px; }
      .trust-row { margin-top: 12px; gap: 8px 14px; }
      .scan-orb { width: 84px; height: 84px; margin-bottom: 16px; }
      .scan-step { padding: 12px 14px; gap: 10px; }
      .email-h { font-size: 19px; }
      .success-actions { flex-direction: column; gap: 12px; }
      /* Email stage on a phone: the card's intro repeats the page intro — drop it, shrink the orb. */
      .email-check { width: 52px; height: 52px; margin-bottom: 10px; }
      .email-sub { display: none; }
      .result-timing { margin-bottom: 10px; padding: 8px 12px; }
      .consent-label { margin: 10px 0 12px; }
      .btn-submit { padding: 14px; }
      .email-note { margin-top: 8px; }
      #stage-email .page-sub, #stage-success .page-sub { margin-bottom: 12px !important; }
      .success-orb { width: 80px; height: 80px; margin-bottom: 16px; }
      footer { padding: 10px 12px; font-size: 12px; }
    }
  

    /* ── Lupe additions on top of the design mock (real scanner behaviour) ── */
    .hp { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
    .scan-error {
      margin: 12px 0 0; padding: 10px 14px; border-radius: 10px; text-align: left;
      font-size: 14px; line-height: 1.45; color: #FCA5A5;
      background: rgba(239,68,68,.12); border: 1px solid rgba(239,68,68,.35);
    }
    [data-theme="light"] .scan-error { color: #B91C1C; background: #FEF2F2; border-color: #FECACA; }
    .teaser { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
    .teaser .chip {
      font-size: 12px; line-height: 1.3; padding: 4px 9px; border-radius: 999px;
      background: rgba(167,139,250,.14); border: 1px solid rgba(167,139,250,.35); color: var(--purple-light);
    }
    .teaser .chip.warn { background: rgba(245,158,11,.14); border-color: rgba(245,158,11,.4); color: #FCD34D; }
    [data-theme="light"] .teaser .chip { background: #F5F3FF; border-color: #DDD6FE; color: var(--purple-deep); }
    [data-theme="light"] .teaser .chip.warn { background: #FFFBEB; border-color: #FDE68A; color: #92400E; }
    .step-status.slow { color: var(--purple-light); }
    button[disabled] { opacity: .6; cursor: default; }