:root {
      --bg:        #FFFFFF;
      --bg-soft:   #FAFAFC;
      --bg-card:   #F6F5FB;
      --ink:       #20203D;
      --ink-soft:  #5C5C7A;
      --muted:     #8C8CA8;
      --border:    #ECECF3;

      --navy:      #1C1E52;
      --gold:      #FFC845;
      --gold-d:    #E6B030;
      --coral:     #FF6F91;
      --coral-d:   #E85878;
      --green:     #009F33;
      --green-bg:  #E4F7EA;
      --blue:      #4A90E2;

      --logo-gold: #F8B818;   /* dourado exato da logo — usado no botão do vídeo */

      --display: 'Reddit Sans', sans-serif;
      --body:    'Reddit Sans', sans-serif;

      --space-1: 8px;
      --space-2: 16px;
      --space-3: 24px;
      --button-height: 56px;
      --radius-sm: 6px;
      --radius-md: 10px;
      --radius-lg: 14px;

      --shadow-sm: 0 2px 8px rgba(32,32,61,.06);
      --shadow-md: 0 6px 18px rgba(32,32,61,.09);
      --shadow-lg: 0 16px 40px rgba(32,32,61,.14);
    }

    *,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0 }
    html { scroll-behavior: smooth }
    body { font-family: var(--body); background: var(--bg); color: var(--ink); min-height: 100vh; -webkit-font-smoothing: antialiased; overflow-x: hidden }
    img { max-width: 100%; display: block }
    button { font-weight: 600; font-family: var(--body) }

    /* ── LAYOUT ── */
    .overlay { position: fixed; inset: 0; z-index: 9999; background: var(--bg); overflow-y: auto; -webkit-overflow-scrolling: touch }
    .inner { display: flex; flex-direction: column; align-items: center; padding: max(16px, env(safe-area-inset-top)) 16px max(32px, env(safe-area-inset-bottom)) }
    .card-wrap { width: 100%; max-width: 480px }

    /* ── HEADER (logo fixo em toda tela) ── */
    .site-header { display: flex; justify-content: center; padding: 4px 0 16px }
    .brand-logo { height: 66px; width: auto; display: block }

    /* ── PROGRESS ── */
    .prog-wrap { margin-bottom: var(--space-3) }
    .prog-track { width: 100%; height: 6px; background: var(--bg-card); border-radius: var(--radius-sm); overflow: hidden }
    .prog-fill { height: 100%; background: var(--coral); border-radius: var(--radius-sm); transition: width .5s cubic-bezier(.4,0,.2,1) }
    .step-count { font-size: 11px; font-weight: 600; color: var(--muted); text-align: center; margin-top: 8px; letter-spacing: 1.2px; text-transform: uppercase }

    /* ── SCREENS ── */
    .screen { display: none; animation: riseIn .3s cubic-bezier(.22,1,.36,1) both }
    .screen.active { display: block }
    @keyframes riseIn { from { opacity: 0; transform: translateY(10px) } to { opacity: 1; transform: translateY(0) } }

    .quiz-card { background: var(--bg); padding: 0 }

    /* ── TYPOGRAPHY ── */
    .step-title { font-family: var(--display); font-weight: 600; font-size: 24px; color: var(--ink); text-align: center; margin-bottom: 8px; line-height: 1.25; letter-spacing: -.2px }
    .step-title em { font-style: normal; color: var(--coral); font-weight: 600 }
    .step-sub { font-size: 15px; font-weight: 400; color: var(--ink-soft); text-align: center; margin-bottom: 24px; line-height: 1.45 }

    .mini-back { font-size: 13px; font-weight: 600; color: var(--ink-soft); cursor: pointer; margin-top: var(--space-3); display: inline-flex; align-items: center; gap: 4px; user-select: none }
    .mini-back:active { opacity: .6 }

    /* ── INPUTS ── */
    .fld { margin-bottom: 16px }
    .fld:last-child { margin-bottom: 0 }
    .lbl { display: block; font-size: 12.8px; font-weight: 600; color: var(--coral-d); letter-spacing: .8px; text-transform: uppercase; margin-bottom: 8px }
    .inp {
      width: 100%; padding: 16px 16px;
      background: var(--bg-card); border: 1.5px solid transparent;
      border-radius: var(--radius-md); color: var(--ink);
      font-family: var(--body); font-weight: 500; font-size: 16px;
      transition: border-color .2s, background .2s; outline: none;
    }
    .inp:focus { border-color: var(--gold); background: #fff; box-shadow: 0 0 0 3px rgba(255,200,69,.15) }
    .inp::placeholder { color: var(--muted); font-weight: 400 }
    .hint { font-size: 12.5px; color: var(--muted); margin-top: 8px; line-height: 1.45 }

    /* ── IMAGE CHIPS (grid — cor do cabelo, tipo de cabelo, olhos) ── */
    .img-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-1) }
    .img-grid.col1 { grid-template-columns: 1fr; gap: var(--space-1); max-width: 100%; margin: 0 auto }

    .img-chip {
      background: var(--bg-card); border: 2px solid transparent; border-radius: var(--radius-md);
      cursor: pointer; transition: border-color .18s, transform .12s, box-shadow .18s;
      overflow: hidden; display: flex; flex-direction: column; user-select: none;
    }
    .img-chip:active { transform: scale(.98) }
    .img-chip.sel { border-color: var(--gold); box-shadow: var(--shadow-md) }

    .img-chip-pic { width: 100%; aspect-ratio: 1/1; background: var(--border); overflow: hidden; position: relative }
    .img-grid.col1 .img-chip-pic { aspect-ratio: 2.8/1 }
    .img-grid.col1 .img-chip-pic img { object-position: top }
    .img-chip-pic img { width: 100%; height: 100%; object-fit: cover; display: block; position: relative; z-index: 1 }
    .img-chip-pic .ph-skeleton { position: absolute; inset: 0; background: linear-gradient(90deg, #ECECF3 25%, #F6F5FB 37%, #ECECF3 63%); background-size: 400% 100%; animation: shimmer 1.4s ease infinite }
    @keyframes shimmer { 0% { background-position: 100% 0 } 100% { background-position: 0 0 } }

    .img-chip-label { padding: 8px 8px 8px; text-align: center }
    .img-chip-label .chip-label { font-size: 14.5px; font-weight: 600; color: var(--ink); line-height: 1.45; display: block }
    .img-chip.sel .chip-label { color: var(--coral-d) }

    .img-chip.sel .img-chip-pic::after {
      content: ''; position: absolute; top: 8px; right: 8px; width: 22px; height: 22px; border-radius: 50%;
      background: var(--gold);
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpolyline points='2,6 5,9 10,3' fill='none' stroke='%2320203D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
      background-repeat: no-repeat; background-position: center; box-shadow: var(--shadow-sm);
    }

    /* ── TILE CARDS (coluna, imagens grandes — pele, ensinamento, cenário) ── */
    .tile-list { display: flex; flex-direction: column; gap: 12px }
    .tile-card { position: relative; border-radius: var(--radius-md); overflow: hidden; cursor: pointer; border: 2px solid transparent; transition: border-color .18s, box-shadow .18s; background: var(--bg-card) }
    .tile-card:active { transform: scale(.99) }
    .tile-card.sel { border-color: var(--gold); box-shadow: var(--shadow-md) }
    .tile-card-pic { width: 100%; aspect-ratio: 2.2/1; position: relative; background: var(--border) }
    .tile-card-pic img { width: 100%; height: 100%; object-fit: cover }
    .tile-card-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 65%, rgba(28,30,82,.68) 60%) }
    .tile-card-label { position: absolute; left: 0; right: 0; bottom: 0; padding: 12px 16px; color: #fff; font-weight: 600; font-size: 16.5px; line-height: 1.45 }
    .tile-card-sub { font-size: 11.5px; font-weight: 400; opacity: .85; margin-top: 4px; line-height: 1.45 }

    /* ── BULLET (etiqueta sobreposta na imagem — sexo e pele) ── */
    .tile-bullet { position: absolute; background: rgba(28,30,82,.82); color: #fff; font-weight: 600; font-size: 14.5px; padding: 8px 16px; border-radius: 20px; line-height: 1.45 }
    .tile-bullet-left { left: 10px; bottom: 10px; font-size: 16px; text-transform: uppercase; letter-spacing: .4px; padding: 8px 16px }

    /* ── GENDER CARDS (empilhados) ── */
    .gender-grid { display: flex; flex-direction: column; gap: var(--space-1) }
    .gender-card {
      background: var(--bg-card); border: 2px solid transparent; border-radius: var(--radius-md);
      cursor: pointer; transition: border-color .18s, box-shadow .18s; overflow: hidden;
    }
    .gender-card.sel { border-color: var(--gold); box-shadow: var(--shadow-md) }
    .gender-card-pic { width: 100%; aspect-ratio: 1.7/1; background: var(--border); overflow: hidden; position: relative }
    .gender-card-pic img { width: 100%; height: 100%; object-fit: cover; object-position: top }
    .gender-card-pic .tile-card-scrim { background: linear-gradient(180deg, transparent 80%, rgba(28,30,82,.68) 77%) }
    .gender-card-pic .tile-card-label { padding: 8px 16px; font-size: 15.5px }

    /* ── CUSTOM SCENARIO ── */
    .custom-toggle { text-align: center; margin-top: 16px; font-size: 13.5px; font-weight: 600; color: var(--coral-d); cursor: pointer; text-decoration: underline; text-decoration-style: dotted }
    .custom-scenario-fld { display: none; margin-top: 16px }

    /* ── ADDON SECTION ── */
    .opt-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-1) }
    .opt-chip { padding: 24px 16px; background: var(--bg-card); border: 2px solid transparent; border-radius: var(--radius-md); cursor: pointer; transition: border-color .18s, transform .12s, box-shadow .18s; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center; user-select: none }
    .opt-chip:active { transform: scale(.98) }
    .opt-chip.sel { border-color: var(--gold); box-shadow: var(--shadow-md) }
    .opt-chip-label { font-size: 14.5px; font-weight: 600; color: var(--ink); line-height: 1.45 }
    .opt-chip-sub { font-size: 11.5px; color: var(--muted); line-height: 1.45; font-weight: 400 }
    .opt-chip.sel .opt-chip-label { color: var(--coral-d) }

    .addon-section-tag { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 11.5px; font-weight: 600; color: var(--green); letter-spacing: .3px; margin-bottom: 8px; margin-top: var(--space-3) }
    .addon-section-tag svg { width: 14px; height: 14px; stroke: var(--green); fill: none; stroke-width: 2; flex-shrink: 0 }

    .addon-card { background: var(--bg-card); border: 2px solid transparent; border-radius: var(--radius-md); margin-bottom: 12px; overflow: hidden; cursor: pointer; transition: border-color .18s, box-shadow .18s }
    .addon-card:active { transform: scale(.99) }
    .addon-card.sel { border-color: var(--green); box-shadow: var(--shadow-md) }
    .addon-body { display: flex; align-items: flex-start; gap: 16px; padding: 16px }
    .addon-thumb { width: 64px; height: 64px; border-radius: var(--radius-sm); background: var(--border); flex-shrink: 0; overflow: visible; position: relative; display: flex; align-items: center; justify-content: center }
    .addon-thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-sm) }
    .addon-ribbon { position: absolute; top: -6px; right: -8px; background: var(--green); color: #fff; font-size: 8px; font-weight: 600; padding: 3px 8px; border-radius: 4px; letter-spacing: .2px; text-transform: uppercase; white-space: nowrap; box-shadow: var(--shadow-sm) }
    .addon-info { flex: 1; padding-top: 1px }
    .addon-name { font-size: 15px; font-weight: 600; color: var(--ink); margin-bottom: 4px; line-height: 1.45 }
    .addon-desc { font-size: 12.5px; color: var(--ink-soft); line-height: 1.45; font-weight: 400 }
    .addon-price-row { display: flex; align-items: baseline; gap: 8px; margin-top: 8px; flex-wrap: wrap }
    .addon-price-old { font-size: 12.5px; color: var(--muted); text-decoration: line-through; text-decoration-color: var(--coral-d); text-decoration-thickness: 2px; font-weight: 500 }
    .addon-price { font-size: 16px; font-weight: 600; color: var(--green) }
    .addon-action { display: flex; align-items: center; gap: var(--space-1); padding: 12px 16px; background: rgba(0,159,51,.05); border-top: 1px solid var(--border) }
    .addon-card.sel .addon-action { background: rgba(0,159,51,.1) }
    .addon-check { width: 20px; height: 20px; border-radius: 5px; border: 2px solid #D9D9E6; background: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all .18s }
    .addon-card.sel .addon-check { background: var(--green); border-color: var(--green) }
    .addon-check svg { width: 12px; height: 12px; stroke: #fff; fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; opacity: 0 }
    .addon-card.sel .addon-check svg { opacity: 1 }
    .addon-action-txt { font-size: 13px; font-weight: 500; color: var(--ink-soft) }
    .addon-card.sel .addon-action-txt { color: var(--ink) }

    /* ── INCLUDED TAG ── */
    .included-tag { background: #FFF8E8; border: 1.5px solid #FFE7B0; border-radius: var(--radius-sm); padding: 12px 16px; font-size: 12.5px; font-weight: 600; color: var(--ink); text-align: center; line-height: 1.45; margin-bottom: 16px }

    /* ── BÔNUS (paywall) ── */
    .bonus-stack { margin: 16px 0 8px }
    .bonus-stack-title { font-size: 13.5px; font-weight: 600; color: var(--ink); margin-bottom: 8px; text-align: center }
    .bonus-list { display: flex; flex-direction: column; gap: var(--space-1) }
    .bonus-card { display: flex; align-items: center; gap: 16px; background: var(--bg-card); border-radius: var(--radius-md); padding: 12px 16px }
    .bonus-thumb { width: 56px; height: 56px; border-radius: var(--radius-sm); background: #FFF3D6; display: flex; align-items: center; justify-content: center; flex-shrink: 0; position: relative }
    .bonus-thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-sm) }
    .bonus-ribbon { position: absolute; top: -6px; right: -8px; background: var(--gold); color: var(--navy); font-size: 8.5px; font-weight: 600; padding: 3px 8px; border-radius: 4px; letter-spacing: .3px; text-transform: uppercase; white-space: nowrap }
    .bonus-info { flex: 1 }
    .bonus-name { font-size: 14px; font-weight: 600; color: var(--ink); line-height: 1.45 }
    .bonus-desc { font-size: 11.5px; color: var(--ink-soft); margin-top: 4px; line-height: 1.45 }

    /* ── RECEIPT ── */
    .receipt { background: var(--bg-card); border-radius: var(--radius-md); padding: 16px 16px; margin-top: 16px }
    .rr { display: flex; justify-content: space-between; align-items: center; padding: 4px 0; font-size: 13px; gap: 8px }
    .rr.sub .rv { text-decoration: line-through; color: var(--muted) }
    .rr.disc .rl { color: var(--coral-d) }
    .rr.disc .rv { color: var(--coral-d); font-weight: 600 }
    .rr.add .rl { color: var(--ink-soft) }
    .rr.add .rv { color: var(--ink-soft) }
    .rr.tot { border-top: 1.5px solid var(--border); margin-top: 8px; padding-top: 8px }
    .rr.tot .rv { font-weight: 600; font-size: 23px; color: var(--green) }
    .rl { font-weight: 500; flex: 1; color: var(--ink-soft) }
    .rv { font-weight: 600; flex-shrink: 0; text-align: right; color: var(--ink) }

    /* ── NAVIGATION ── */
    .nav { display: flex; gap: var(--space-1); margin-top: var(--space-3) }
    .btn-next, .btn-cta, .popup-btn, .micro-opt-btn, #sc-checkout .kw-pay-btn {
      width: 100%; min-height: var(--button-height); padding: 16px 16px;
      border: 0; border-radius: var(--radius-md); background: var(--green); color: #fff;
      font: 600 16px/1.4 var(--body); text-align: center; cursor: pointer;
      transition: background .15s, opacity .15s;
    }
    .btn-cta, #sc-checkout .kw-pay-btn { display: block }
    .btn-next:hover, .btn-cta:hover, .popup-btn:hover, #sc-checkout .kw-pay-btn:hover { background: #00802A }
    .btn-next:disabled, #sc-checkout .kw-pay-btn:disabled { background: #E4E4EC; color: var(--ink-soft); cursor: not-allowed }
    button:focus-visible, [role="button"]:focus-visible, a:focus-visible { outline: 3px solid var(--gold-d); outline-offset: 3px }
    .nav-stack { display: flex; flex-direction: column; gap: var(--space-1); margin-top: var(--space-3) }
    .btn-mini-back, .mini-back, .custom-toggle {
      min-height: 44px; display: flex; align-items: center; justify-content: center;
      padding: 8px 16px; font: 600 14px/1.4 var(--body); color: var(--ink-soft); cursor: pointer;
    }
    .btn-mini-back { background: transparent; border: 0; width: 100% }

    /* ── PROMO BAR ── */
    .promo-bar { background: var(--coral); color: #fff; text-align: center; font-size: 12px; font-weight: 600; padding: 8px 16px; letter-spacing: .8px; text-transform: uppercase; border-radius: var(--radius-sm); margin-bottom: var(--space-3) }

    /* ── INTRO ── */
    .intro-hero-banner { width: 80%; margin: 0 auto 24px }
    .intro-hero-banner img { width: 100%; height: auto; display: block; object-fit: contain }

    .intro-headline { font-family: var(--display); font-size: 27px; font-weight: 600; color: var(--ink); text-align: center; line-height: 1.25; margin-bottom: 12px; letter-spacing: -.3px }
    .intro-headline em { font-style: normal; color: var(--coral) }
    .intro-sub { font-size: 15.5px; font-weight: 400; color: var(--ink-soft); text-align: center; line-height: 1.45; margin-bottom: 24px }
    .intro-sub strong { color: var(--ink); font-weight: 600 }

    .minute-badge { display: flex; align-items: center; gap: 8px; background: var(--bg-card); color: var(--ink-soft); font-size: 12px; font-weight: 600; padding: 8px 16px; border-radius: var(--radius-sm); margin: 16px auto 0; width: fit-content }
    .minute-badge svg { width: 14px; height: 14px; stroke: var(--coral-d); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round }

    .guarantee-row { display: flex; align-items: center; gap: 12px; background: #FFF8E8; border-radius: var(--radius-md); padding: 16px 16px; margin-top: 16px }
    .guarantee-row .g-icon { flex-shrink: 0 }
    .guarantee-row .g-icon svg { width: 20px; height: 20px; stroke: var(--gold-d); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round }
    .guarantee-row p { font-size: 13px; font-weight: 400; color: var(--ink-soft); line-height: 1.45 }
    .guarantee-row p strong { color: var(--ink); font-weight: 600 }

    /* ── PROVA SOCIAL ── */
    .social-headline { font-family: var(--display); font-size: 24px; font-weight: 600; color: var(--ink); text-align: center; line-height: 1.25; margin-bottom: var(--space-3); letter-spacing: -.2px }
    .social-headline strong { color: var(--coral-d) }

    .carousel-wrap { overflow: hidden; width: 100%; margin-bottom: 24px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent) }
    .carousel-track { display: flex; gap: var(--space-1); width: max-content; animation: carouselScroll 34s linear infinite }
    .carousel-track img { width: 138px; height: 138px; border-radius: var(--radius-md); object-fit: cover; flex-shrink: 0; box-shadow: var(--shadow-sm) }
    @keyframes carouselScroll { from { transform: translateX(0) } to { transform: translateX(-50%) } }

    .badge-row { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: var(--space-3) }
    .mini-badge { display: flex; align-items: center; gap: 4px; background: var(--bg-card); padding: 8px 8px; border-radius: var(--radius-sm); font-size: 10.5px; font-weight: 600; color: var(--ink-soft) }
    .mini-badge svg { width: 13px; height: 13px; stroke: var(--green); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0 }

    /* ── FEEDBACK SCREENS ── */
    .fb-wrap { text-align: center; padding: 24px 0 8px }
    .fb-icon { width: 128px; height: 128px; display: flex; align-items: center; justify-content: center; margin: 0 auto 24px; position: relative }
    .fb-icon img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 12px 20px rgba(32,32,61,.18)); animation: floatIcon 3s ease-in-out infinite }
    @keyframes floatIcon { 0%,100% { transform: translateY(0) rotate(-2deg) } 50% { transform: translateY(-10px) rotate(2deg) } }
    .fb-text { font-family: var(--display); font-size: 23px; font-weight: 600; color: var(--ink); line-height: 1.25; margin-bottom: 8px; padding: 0 4px }
    .fb-text .child-name-dyn, .fb-text .child-name-solo { color: var(--coral) }
    .fb-sub { font-size: 15.5px; color: var(--ink-soft); font-weight: 400; margin-bottom: 24px; line-height: 1.45 }

    .fb-loader { max-width: 220px; margin: 0 auto 8px }
    .fb-loader-track { width: 100%; height: 6px; background: var(--bg-card); border-radius: var(--radius-sm); overflow: hidden }
    .fb-loader-fill { height: 100%; width: 0%; background: var(--coral); border-radius: var(--radius-sm) }

    .fb-check { width: 54px; height: 54px; border-radius: 50%; background: var(--green-bg); display: flex; align-items: center; justify-content: center; margin: 0 auto 24px; animation: checkPop .4s ease }
    .fb-check svg { width: 24px; height: 24px; stroke: var(--green); fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round }
    @keyframes checkPop { 0% { transform: scale(0); opacity: 0 } 70% { transform: scale(1.15) } 100% { transform: scale(1); opacity: 1 } }

    /* ── LOADING ── */
    .loading-wrap { text-align: center; padding: 16px 0 8px }
    .ld-icon-wrap { width: 130px; height: 130px; margin: 0 auto 16px; position: relative }
    .ld-icon-wrap img { width: 100%; height: 100%; object-fit: contain; animation: floatBook 3s ease-in-out infinite }
    @keyframes floatBook { 0%,100% { transform: translateY(0) rotate(-1deg) } 50% { transform: translateY(-8px) rotate(1deg) } }

    .ld-msg { font-family: var(--display); font-size: 17px; font-weight: 600; color: var(--ink); text-align: center; margin-bottom: 24px; line-height: 1.45 }
    .ld-msg .child-name-dyn { color: var(--coral) }

    .ld-bars { display: flex; flex-direction: column; gap: 16px; max-width: 320px; margin: 0 auto }
    .ld-bar-line { display: flex; justify-content: space-between; font-size: 13px; font-weight: 600; color: var(--ink-soft); margin-bottom: 8px }
    .ld-bar-track { width: 100%; height: 8px; background: var(--bg-card); border-radius: var(--radius-sm); overflow: hidden }
    .ld-bar-fill { height: 100%; width: 0%; background: var(--coral); border-radius: var(--radius-sm) }

    /* ── MICRO PERGUNTA (popup durante loading) ── */
    .micro-note { font-size: 12.5px; font-weight: 600; color: var(--coral-d); margin: -10px 0 16px; text-align: center }
    .micro-opts { display: flex; flex-direction: column; gap: var(--space-1); margin-top: 4px }
    .micro-opt-btn { background: var(--bg-card); color: var(--ink); border: 1px solid var(--border) }
    .micro-opt-btn:hover { border-color: var(--gold) }
    .micro-opt-btn.primary { background: var(--green); color: #fff }
    .micro-opt-btn.secondary { background: var(--bg-card); color: var(--ink-soft) }

    /* ── RESULT / PAYWALL ── */
    .result-headline { font-family: var(--display); font-size: 26px; font-weight: 600; color: var(--ink); line-height: 1.25; margin-bottom: 8px; letter-spacing: -.3px; text-align: center }
    .result-headline .child-name-dyn { color: var(--coral) }
    .result-sub { font-size: 14.5px; color: var(--ink-soft); font-weight: 400; line-height: 1.45; margin-bottom: 8px; text-align: center }

    .social-proof-row { display: flex; align-items: center; justify-content: center; gap: var(--space-1); margin-bottom: 24px }
    .social-proof-avatars { display: flex }
    .social-proof-avatars img { width: 28px; height: 28px; border-radius: 50%; border: 2.5px solid #fff; object-fit: cover; margin-left: -9px; box-shadow: var(--shadow-sm) }
    .social-proof-avatars img:first-child { margin-left: 0 }
    .social-proof-text { font-size: 13px; font-weight: 500; color: var(--ink-soft) }
    .social-proof-text strong { color: var(--ink); font-weight: 600 }

    .book-result-wrap { position: relative; width: 200px; height: 260px; margin: 0 auto 24px }
    .book-result { width: 200px; height: 260px; background: linear-gradient(155deg, #FFFFFF 0%, #FAFAFA 55%, #F6F5FB 100%); border-radius: 4px var(--radius-md) var(--radius-md) 4px; box-shadow: 0 20px 32px rgba(32,32,61,.16), inset -5px 0 0 rgba(0,0,0,.04); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px 16px; position: relative }
    .book-result::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 10px; background: var(--gold); border-radius: 4px 0 0 4px }
    .book-result::after { content: ''; position: absolute; inset: 11px; border: 1.5px solid rgba(255,200,69,.25); pointer-events: none }
    .book-result.menino::before { background: var(--blue) }
    .book-result.menino::after { border-color: rgba(74,144,226,.28) }
    .book-result.menina::before { background: var(--coral) }
    .book-result.menina::after { border-color: rgba(255,111,145,.28) }
    .br-star-icon { position: relative; margin-bottom: 8px }
    .br-star-icon svg { width: 28px; height: 28px; fill: var(--gold) }
    .br-name { font-family: var(--display); font-weight: 600; font-size: 23px; color: var(--ink); text-align: center; line-height: 1.45; margin-bottom: 4px; position: relative }
    .br-sub { font-size: 10px; letter-spacing: 1.8px; text-transform: uppercase; color: var(--coral-d); text-align: center; position: relative; font-weight: 600 }
    .book-result-sparkle { position: absolute; top: 50%; left: 50%; width: 16px; height: 16px; margin: -8px; color: var(--gold) }
    .book-result-sparkle svg { width: 16px; height: 16px; fill: currentColor }
    @keyframes orbitSparkle {
      0%   { transform: rotate(0deg) translateX(122px) rotate(0deg); opacity: .5 }
      50%  { transform: rotate(180deg) translateX(122px) rotate(-180deg); opacity: 1 }
      100% { transform: rotate(360deg) translateX(122px) rotate(-360deg); opacity: .5 }
    }
    .book-result-sparkle.s1 { animation: orbitSparkle 7s linear infinite }
    .book-result-sparkle.s2 { animation: orbitSparkle 7s linear infinite reverse; animation-delay: -3.5s }

    .urgency-timer { display: flex; align-items: center; justify-content: center; gap: 8px; background: var(--coral-d); color: #fff; font-size: 12.5px; font-weight: 600; padding: 8px 16px; border-radius: var(--radius-sm); margin-bottom: 16px }
    .urgency-timer svg { width: 15px; height: 15px; stroke: #fff; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0 }
    .urgency-timer strong { color: #fff; font-weight: 600 }

    .price-anchor-card { background: #FFF8E8; border-radius: var(--radius-lg); padding: 24px 16px; margin-bottom: var(--space-3); text-align: center }
    .price-anchor-old { font-size: 14.5px; color: var(--muted); text-decoration: line-through; text-decoration-color: var(--coral-d); font-weight: 500 }
    .price-anchor-new { font-family: var(--display); font-size: 36px; font-weight: 600; color: var(--green); margin: 4px 0 8px; line-height: 1.25 }
    .price-anchor-tag { font-size: 12px; color: var(--coral-d); font-weight: 600; letter-spacing: .2px }

    .security-badges { width: 100%; margin-top: 16px; border-radius: var(--radius-md); overflow: hidden }
    .security-badges img { width: 100%; height: auto; display: block }

    /* ── REVIEWS ── */
    .section-heading { font-family: var(--display); font-size: 21px; font-weight: 600; color: var(--ink); text-align: center; margin: 32px 0 4px; letter-spacing: -.2px; line-height: 1.25 }
    .section-sub { font-size: 13px; color: var(--ink-soft); text-align: center; margin-bottom: var(--space-3); font-weight: 400; line-height: 1.45 }

    .video-review-stack { display: flex; flex-direction: column; gap: 12px; margin-bottom: var(--space-3) }
    .vsl-video { display: block; margin: 0 auto; width: 100%; max-width: 400px; height: auto; border-radius: var(--radius-md); background: #000 }

    /* ── VSL: sem controles nativos, botão próprio de play/pause no centro ── */
    .vsl-wrap { position: relative; width: 100%; max-width: 400px; margin: 0 auto; border-radius: var(--radius-md); overflow: hidden; background: #000; line-height: 0 }
    .vsl-wrap .vsl-video { max-width: 100%; border-radius: 0 }
    .vsl-play-toggle {
      position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
      width: 86px; height: 86px; padding: 0; border: none; border-radius: 50%;
      background: var(--logo-gold); color: var(--ink); cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      box-shadow: 0 10px 28px rgba(0,0,0,.42);
      transition: opacity .25s, transform .12s; -webkit-tap-highlight-color: transparent;
    }
    .vsl-play-toggle:active { transform: translate(-50%,-50%) scale(.93) }
    .vsl-play-toggle svg { width: 38px; height: 38px; fill: currentColor; display: block }
    .vsl-play-toggle .ico-pause { display: none }
    .vsl-wrap.playing .vsl-play-toggle .ico-play { display: none }
    .vsl-wrap.playing .vsl-play-toggle .ico-pause { display: block }
    /* tocando: o botão sai da frente (padrão). Tocar no vídeo pausa e ele volta. */
    .vsl-wrap.playing .vsl-play-toggle { opacity: 0; pointer-events: none }
    .vsl-wrap.playing:hover .vsl-play-toggle,
    .vsl-wrap.playing .vsl-play-toggle:focus-visible { opacity: 1; pointer-events: auto }
    .vsl-wrap .vsl-video { cursor: pointer }
    .review-card { background: var(--bg-card); border-radius: var(--radius-md); padding: 16px; margin-bottom: 8px }
    .review-header { display: flex; align-items: center; gap: 12px; margin-bottom: 8px }
    .review-avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex-shrink: 0; box-shadow: var(--shadow-sm) }
    .review-info h4 { font-size: 13.5px; font-weight: 600; color: var(--ink) }
    .review-stars { color: var(--gold-d); font-size: 12px; margin-top: 4px; letter-spacing: 1px }
    .review-text { font-size: 14px; color: var(--ink-soft); line-height: 1.45; font-weight: 400 }
    .review-text strong { color: var(--ink); font-weight: 600 }
    .review-date { font-size: 11px; color: var(--muted); margin-top: 8px; display: block; font-weight: 500 }

    /* ── FAQ ── */
    .faq-item { border-bottom: 1.5px solid var(--border) }
    .faq-q { min-height: 48px; padding: 16px 0; font-size: 14.5px; font-weight: 600; color: var(--ink); cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 12px; transition: color .2s }
    .faq-q::after { content: '+'; font-size: 20px; color: var(--coral); transition: transform .3s; font-weight: 300; flex-shrink: 0 }
    .faq-item.open .faq-q::after { transform: rotate(45deg) }
    .faq-a { max-height: 0; overflow: hidden; transition: max-height .35s ease, padding .35s ease; font-size: 13px; color: var(--ink-soft); line-height: 1.45; font-weight: 400 }
    .faq-item.open .faq-a { max-height: 260px; padding-bottom: 16px }

    .price-pick-wrap { margin-top: 8px }
    .price-pick-info { font-size: 12.5px; color: var(--muted); text-align: center; margin-top: 12px; font-weight: 500 }

    /* ── POPUPS ── */
    .popup-overlay { position: fixed; inset: 0; background: rgba(32,32,61,.55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); z-index: 100000; display: none; align-items: center; justify-content: center; padding: 24px; opacity: 0; transition: opacity .3s }
    .popup-overlay.active { opacity: 1 }
    .popup-card { background: #fff; border-radius: var(--radius-lg); padding: 32px 24px; text-align: center; max-width: 340px; width: 100%; max-height: calc(100dvh - 32px); overflow-y: auto; transform: translateY(20px) scale(.95); transition: transform .35s cubic-bezier(.175,.885,.32,1.275); box-shadow: var(--shadow-lg) }
    .popup-overlay.active .popup-card { transform: translateY(0) scale(1) }
    .popup-icon { display: flex; justify-content: center }
    .popup-icon img { margin-bottom: 16px }
    .popup-title { font-family: var(--display); font-size: 22px; font-weight: 600; color: var(--ink); margin-bottom: 8px; line-height: 1.25 }
    .popup-title em { color: var(--coral); font-style: normal }
    .popup-sub { font-size: 14px; color: var(--ink-soft); margin-bottom: 24px; line-height: 1.45; font-weight: 400 }
    .popup-sub strong { color: var(--ink); font-weight: 600 }
    @keyframes spinAnim { to { transform: rotate(360deg) } }

    @media(max-width:380px) {
      .intro-headline { font-size: 23px }
      .step-title { font-size: 21px }
    }

    /* Checkout */
    #sc-checkout {
      background: #eff1f3;
      margin: 0;
      padding: 0 0 24px;
      min-height: 100%;
      font-family: var(--body);
      color: #000;
    }
    #sc-checkout .kw-content { max-width: 1000px; margin: 0 auto; padding: 0; }
    #sc-checkout .kw-col-main { max-width: 688px; margin-left: auto; margin-right: auto; }

    #sc-checkout .kw-banner-img { width: 100%; height: auto; display: block; border-radius: 6px; margin-bottom: 8px; }

    #sc-checkout .kw-checkoutblock {
      background: #fff;
      color: #000;
      border-radius: var(--radius-md);
      padding: var(--space-2);
      box-shadow: 0 1px 3px 0 rgba(0,0,0,.1), 0 1px 2px 0 rgba(0,0,0,.06);
      border: 1px solid #e5e7eb;
    }
    @media(min-width:640px){ #sc-checkout .kw-checkoutblock { padding: 16px 24px; } }

    #sc-checkout .kw-prod-header { display: flex; align-items: center; width: 100%; }
    #sc-checkout .kw-prod-thumb { position: relative; border-radius: var(--radius-md); max-height: 96px; height: auto; width: auto; max-width: 96px; flex-shrink: 0; }
    #sc-checkout .kw-prod-info { margin-left: 16px; }
    #sc-checkout .kw-prod-title { font-weight: 700; font-size: 18px; color: #000; margin: 0; }
    #sc-checkout .kw-prod-sub { margin-top: 8px; font-size: 12px; color: #000; }

    #sc-checkout .kiwi-input { position: relative; margin-bottom: 12px; }
    #sc-checkout .kiwi-input-field {
      -webkit-appearance: none;
      appearance: none;
      background-color: #fff;
      border: 1px solid #cfcfcf;
      border-radius: var(--radius-md);
      box-sizing: border-box;
      color: #333;
      font-family: var(--body);
      font-size: 16px;
      font-weight: 500;
      height: var(--button-height);
      outline: 0;
      padding: 16px 40px 0 16px;
      width: 100%;
      transition: border-color .2s;
    }
    #sc-checkout .kiwi-input-field:focus { background: #fff; border-color: #247ef3; box-shadow: 0 0 0 3px rgba(36,126,243,.15); }
    #sc-checkout .kiwi-label {
      position: absolute; top: 20px; left: 15px; color: var(--ink-soft);
      font-size: 16px; line-height: 1; pointer-events: none; transition: top .15s, font-size .15s;
    }
    #sc-checkout .kiwi-input-field:focus + .kiwi-label,
    #sc-checkout .kiwi-input-field:not(:placeholder-shown) + .kiwi-label { top: 8px; font-size: 11px }
    #sc-checkout .kiwi-icon { bottom: 18px; position: absolute; right: 12px; color: #000; display: flex; }
    #sc-checkout .kiwi-icon svg { height: 20px; width: 20px; }
    #sc-checkout .kiwi-input.error .kiwi-input-field { border-color: #d20000; }
    #sc-checkout .kiwi-input.error .kiwi-label { color: #d20000; }

    #sc-checkout .kw-methods-grid { display: grid; grid-template-columns: 1fr; gap: 8px; margin-bottom: 16px; margin-top: 24px; }
    #sc-checkout .kw-method {
      display: flex; width: 100%; border: 1px solid #d1d5db; border-radius: 4px; height: 64px;
      position: relative; box-shadow: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -1px rgba(0,0,0,.06);
      justify-content: center; align-items: center; gap: 8px; font-size: 14px; cursor: pointer;
      color: #374151; background: #fff; transition: border-color .15s, color .15s;
    }
    #sc-checkout .kw-method svg, #sc-checkout .kw-method img.kw-icon-img { width: 20px; height: 20px; flex-shrink: 0; }
    #sc-checkout .kw-method-badge { position: absolute; width: 16px; height: 16px; top: -4px; right: -6px; display: none; }
    #sc-checkout .kw-badge-icon {
      display: block; width: 16px; height: 16px; background-color: #22c55e;
      -webkit-mask-image: url(assets/icone-check.webp);
      mask-image: url(assets/icone-check.webp);
      -webkit-mask-size: contain; mask-size: contain;
      -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
      -webkit-mask-position: center; mask-position: center;
    }
    #sc-checkout .kw-method.active { border-color: #4299e1; color: #4299e1; }
    #sc-checkout .kw-method.active .kw-method-badge { display: block; }
    #sc-checkout .kw-method.active#methPix { border-color: #48bb78; color: #16a34a; }

    /* Pix — CTA button dedicado */
    #sc-checkout .kw-pix-panel { padding-top: 8px; }

    #sc-checkout .kw-pay-btn { margin-top: var(--space-3) }

    #sc-checkout .kw-security-row { width: 100%; font-size: 13px; color: #4b5563; display: flex; align-items: center; margin-top: 16px; }
    #sc-checkout .kw-security-row .kw-sec-icon { padding: 8px; display: flex; justify-content: center; align-items: center; color: #000; flex-shrink: 0; }
    #sc-checkout .kw-security-row .kw-sec-icon svg { width: 20px; height: 20px; }
    #sc-checkout .kw-security-row .kw-sec-text { font-size: 11px; }

    #sc-checkout .kw-erro { background: #fef2f2; border: 1px solid #fecaca; border-radius: 6px; padding: 12px; font-size: 13px; color: #d20000; margin-top: 8px; display: none; font-weight: 600; }
    #sc-checkout .kw-erro:not(:empty) { display: block; }

    #sc-checkout .kw-ob { background: #eff6ff; border: 2px dashed #93c5fd; border-radius: 8px; padding: 16px 12px; margin-top: var(--space-3); cursor: pointer; }
    #sc-checkout .kw-ob-title { text-align: center; color: #1d6fd8; font-weight: 800; font-size: 13.5px; margin-bottom: 12px; letter-spacing: .2px; }
    #sc-checkout .kw-ob-row { display: flex; align-items: center; gap: var(--space-1); }
    #sc-checkout .kw-ob-arrow { width: 22px; height: 22px; flex-shrink: 0; color: #dc2626; }
    #sc-checkout .kw-ob-check { width: 20px; height: 20px; border-radius: 4px; border: 2px solid #9ca3af; background: #fff; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; color: transparent; transition: all .15s; }
    #sc-checkout .kw-ob-check.on { background: #4299e1; border-color: #4299e1; color: #fff; }
    #sc-checkout .kw-ob-img { width: 56px; height: 56px; object-fit: cover; border-radius: 6px; flex-shrink: 0; }
    #sc-checkout .kw-ob-desc { font-size: 13px; color: #111; line-height: 1.4; }
    #sc-checkout .kw-ob-headline { color: #dc2626; font-weight: 800; }

    #sc-checkout .kw-footer { text-align: center; padding-top: 8px; color: #6b7280; font-size: 11px; }
    #sc-checkout .kw-footer img { width: 120px; height: auto; margin: 8px auto; display: block; }
    #sc-checkout .kw-footer article { text-align: left; margin-top: 8px; }
    #sc-checkout .kw-footer a { font-weight: 700; color: #6b7280; }

    #sc-checkout .kw-pix-result { text-align: center; }
    #sc-checkout .kw-pix-result .kw-pix-title { font-size: 17px; font-weight: 800; color: #000; margin-bottom: 3px; }
    #sc-checkout .kw-pix-result .kw-pix-sub { font-size: 12.5px; color: #6c7378; margin-bottom: 16px; }
    #sc-checkout .kw-qr-wrap { width: 170px; height: 170px; margin: 0 auto 16px; background: #fff; border: 1px solid #e4e4e8; border-radius: 8px; padding: 8px; display: flex; align-items: center; justify-content: center; }
    #sc-checkout .kw-qr-wrap img { width: 100%; height: 100%; object-fit: contain; }
    #sc-checkout .kw-pix-total { font-size: 25px; font-weight: 800; color: #28b463; margin-bottom: 16px; }
    #sc-checkout .kw-pix-email { font-size: 12px; color: #6c7378; margin: -6px 0 16px; text-align: center; line-height: 1.4 }
    #sc-checkout .kw-pix-email strong { color: #000; word-break: break-all }
    #sc-checkout .kw-cc-label { font-size: 11px; font-weight: 700; color: #6c7378; margin-bottom: 8px; text-transform: uppercase; letter-spacing: .3px; text-align: left; }
    #sc-checkout .kw-cc-box { display: flex; background: #f2f2f4; border: 1px solid #cfcfcf; border-radius: 6px; overflow: hidden; margin-bottom: 12px; }
    #sc-checkout .kw-cc-text { flex: 1; padding: 8px 12px; font-size: 11px; color: #5a5a68; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
    #sc-checkout .kw-copy-pix-btn { margin-top: 0; margin-bottom: 16px; }
    #sc-checkout .kw-await-bar { display: flex; align-items: center; gap: 8px; padding: 12px; background: rgba(40,180,99,.08); border: 1px solid rgba(40,180,99,.2); border-radius: 8px; font-size: 12.5px; color: #16a34a; margin-bottom: 8px; text-align: left; }
    #sc-checkout .kw-spin { width: 14px; height: 14px; border: 2px solid rgba(40,180,99,.3); border-top-color: #28b463; border-radius: 50%; animation: sc_spin .8s linear infinite; flex-shrink: 0; }
    @keyframes sc_spin { to { transform: rotate(360deg); } }
    #sc-checkout .kw-pix-timer { text-align: center; font-size: 12px; color: #6c7378; margin-top: 4px; }
    #sc-checkout .kw-pix-steps { padding: 16px 0 0; text-align: left; }
    #sc-checkout .kw-pix-steps-title { font-size: 11px; font-weight: 700; color: #9ca3af; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 12px; }
    #sc-checkout .kw-pix-step { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 8px; }
    #sc-checkout .kw-pix-step-num { width: 22px; height: 22px; border-radius: 50%; background: #e8f5e9; border: 1.5px solid #a5d6a7; display: flex; align-items: center; justify-content: center; font-size: 11.5px; font-weight: 800; color: #16a34a; flex-shrink: 0; margin-top: 1px; }
    #sc-checkout .kw-pix-step-txt { font-size: 13px; color: #5a5a68; line-height: 1.5; }
    #sc-checkout .kw-pix-step-txt strong { color: #000; }

    #sc-checkout .kw-reviews { margin-top: 16px; }
    #sc-checkout .kw-review-card { border-radius: var(--radius-md); max-width: 100%; width: 100%; padding: 24px 16px; border: 1px solid #e5e7eb; background: #fff; margin-bottom: 12px; text-align: center; }
    #sc-checkout .kw-review-avatar { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; margin: 0 auto; display: block; }
    #sc-checkout .kw-review-quote { font-weight: 600; font-size: 15px; margin-top: 8px; color: #000; }
    #sc-checkout .kw-review-stars { display: flex; justify-content: center; gap: 4px; margin-top: 8px; color: #faca15; }
    #sc-checkout .kw-review-stars svg { width: 20px; height: 20px; }
    #sc-checkout .kw-review-name { font-size: 13px; margin-top: 8px; color: #000; }

    /* ── TRANSIÇÃO RÁPIDA PRO CHECKOUT ── */
    #sc-redirect.active { display: flex; align-items: center; justify-content: center; min-height: 60vh }
    .redirect-wrap { display: flex; flex-direction: column; align-items: center; gap: 24px; text-align: center }
    .redirect-spinner {
      width: 40px; height: 40px; border-radius: 50%;
      border: 3px solid #DCEBFB; border-top-color: var(--blue);
      animation: redirectSpin .7s linear infinite;
    }
    @keyframes redirectSpin { to { transform: rotate(360deg) } }
    .redirect-text { font-family: var(--display); font-size: 17px; font-weight: 600; color: var(--ink) }
    .redirect-track { width: 200px; height: 4px; background: #DCEBFB; border-radius: 4px; overflow: hidden }
    .redirect-fill { height: 100%; width: 0%; background: var(--blue); border-radius: 4px; animation: checkoutProgress 1.1s ease forwards }

    /* ── TELA DE AGRADECIMENTO (pós-compra) ── */
    .ty-wrap { padding: 24px 4px; text-align: center }
    .ty-icon {
      width: 72px; height: 72px; border-radius: 50%; background: var(--green-bg);
      border: 2px solid var(--green); display: flex; align-items: center; justify-content: center;
      margin: 0 auto 16px; font-size: 30px; animation: checkPop .4s ease;
    }
    .ty-title { font-family: var(--display); font-size: 22px; font-weight: 700; color: var(--ink); margin-bottom: 8px }
    .ty-sub { color: var(--ink-soft); font-size: 14px; line-height: 1.6; margin-bottom: 24px }
    .ty-email { color: var(--green); word-break: break-all }

    .ty-steps { background: var(--bg-card); border-radius: var(--radius-md); padding: 16px 16px; text-align: left; margin-bottom: 16px }
    .ty-step { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 16px }
    .ty-step:last-child { margin-bottom: 0 }
    .ty-step-icon { font-size: 20px; flex-shrink: 0; line-height: 1.3 }
    .ty-step-txt { font-size: 13.5px; color: var(--ink-soft); line-height: 1.5 }
    .ty-step-txt strong { color: var(--ink) }

    .ty-warning { background: #FFF8E8; border: 1px solid #F5DFA0; border-radius: var(--radius-md); padding: 16px 16px; text-align: left; margin-bottom: 16px }
    .ty-warning-title { font-size: 13.5px; font-weight: 700; color: #92650A; margin-bottom: 8px }
    .ty-warning-txt { font-size: 13px; color: #7A5B0F; line-height: 1.55 }
    .ty-warning-txt strong { font-weight: 700 }

    .ty-support { background: var(--bg-soft); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 16px; text-align: center }
    .ty-support-title { font-size: 14px; font-weight: 700; color: var(--ink); margin-bottom: 4px }
    .ty-support-txt { font-size: 13px; color: var(--ink-soft); line-height: 1.5; margin-bottom: 12px }
    .ty-support-email {
      display: inline-flex; align-items: center; gap: 8px; background: var(--ink);
      color: #fff; padding: 12px 16px; border-radius: var(--radius-sm); font-weight: 600;
      font-size: 14px; text-decoration: none; transition: opacity .15s;
    }
    .ty-support-email:hover { opacity: .85 }

    .discount-note { font-size: 11px; color: var(--ink-soft) }
    .discount-inactive { opacity: .5 }
    .space-top { margin-top: var(--space-3) }
    .space-top-small { margin-top: var(--space-1) }
    .section-space { margin-top: 32px }
    .field-space { margin-top: var(--space-2) }
    .result-heading { text-align: center; margin-bottom: var(--space-2) }
    .popup-gift { width: 56px; height: 56px; object-fit: contain }
    .micro-question { font-size: 19px }
    .pix-icon { display: inline-block; vertical-align: middle; margin-right: 8px; filter: brightness(0) invert(1) }
    .button-spinner { display: inline-block; vertical-align: middle; width: 16px; height: 16px; margin-right: 8px; border: 2px solid #ffffff66; border-top-color: #fff; border-radius: 50%; animation: spinAnim .6s linear infinite }
    .kw-prod-info, .addon-info, .bonus-info { min-width: 0 }
    .screen { overflow-wrap: anywhere }
    .ty-support-email { min-height: 48px; justify-content: center; overflow-wrap: anywhere; max-width: 100% }
    @keyframes checkoutProgress { to { width: 100% } }
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important }
    }