: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;

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

      --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: 16px 16px 40px }
    .card-wrap { width: 100%; max-width: 480px }

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

    /* ── PROGRESS ── */
    .prog-wrap { margin-bottom: 18px }
    .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 }
    /* Keep the first paint stable, including while fonts and pixels load. */
    #sc-intro { animation: none; opacity: 1; transform: none }
    @keyframes riseIn { from { opacity: 0; transform: translateY(10px) } to { opacity: 1; transform: translateY(0) } }

    .quiz-card { background: var(--bg); padding: 4px 2px 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.1; 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: 20px; line-height: 1.1 }

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

    /* ── INPUTS ── */
    .fld { margin-bottom: 14px }
    .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: 7px }
    .inp {
      width: 100%; padding: 15px 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 }
    textarea.inp { resize: none; min-height: 120px }
    .hint { font-size: 12.5px; color: var(--muted); margin-top: 6px; line-height: 1.1 }

    /* ── IMAGE CHIPS (grid — cor do cabelo, tipo de cabelo, olhos) ── */
    .img-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px }
    .img-grid.cols3 { grid-template-columns: 1fr 1fr 1fr }
    .img-grid.col1 { grid-template-columns: 1fr; gap: 10px; max-width: 86%; 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-chip-pic.wide { aspect-ratio: 4/3 }
    .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: 6px 8px 7px; text-align: center }
    .img-chip-label .chip-label { font-size: 14.5px; font-weight: 600; color: var(--ink); line-height: 1.1; 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.1 }
    .tile-card-sub { font-size: 11.5px; font-weight: 400; opacity: .85; margin-top: 2px; line-height: 1.1 }

    /* ── 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: 7px 15px; border-radius: 20px; line-height: 1.1 }
    .tile-bullet-left { left: 10px; bottom: 10px; font-size: 16px; text-transform: uppercase; letter-spacing: .4px; padding: 8px 16px }
    .tile-bullet-center { left: 50%; bottom: 10px; transform: translateX(-50%) }

    /* ── GENDER CARDS (empilhados) ── */
    .gender-grid { display: flex; flex-direction: column; gap: 10px }
    .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: 7px 16px; font-size: 15.5px }

    /* ── CUSTOM SCENARIO ── */
    .custom-toggle { text-align: center; margin-top: 14px; 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: 14px }

    /* ── ADDON SECTION ── */
    .opt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px }
    .opt-chip { padding: 22px 14px; 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: 5px; 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.1 }
    .opt-chip-sub { font-size: 11.5px; color: var(--muted); line-height: 1.1; 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: 6px; font-size: 11.5px; font-weight: 600; color: var(--green); letter-spacing: .3px; margin-bottom: 10px; margin-top: 18px }
    .addon-section-tag svg { width: 14px; height: 14px; stroke: var(--green); fill: none; stroke-width: 2; flex-shrink: 0 }
    .addon-section-tag:first-of-type { margin-top: 6px }

    .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: 14px; 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-thumb svg { width: 28px; height: 28px; stroke: var(--coral-d); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round }
    .addon-ribbon { position: absolute; top: -6px; right: -8px; background: var(--green); color: #fff; font-size: 8px; font-weight: 600; padding: 3px 6px; 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.1 }
    .addon-desc { font-size: 12.5px; color: var(--ink-soft); line-height: 1.1; 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: 10px; 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: 11px 14px; font-size: 12.5px; font-weight: 600; color: var(--ink); text-align: center; line-height: 1.1; margin-bottom: 16px }

    /* ── BÔNUS (paywall) ── */
    .bonus-stack { margin: 18px 0 6px }
    .bonus-stack-title { font-size: 13.5px; font-weight: 600; color: var(--ink); margin-bottom: 10px; text-align: center }
    .bonus-list { display: flex; flex-direction: column; gap: 10px }
    .bonus-card { display: flex; align-items: center; gap: 14px; background: var(--bg-card); border-radius: var(--radius-md); padding: 12px 14px }
    .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-thumb svg { width: 25px; height: 25px; stroke: var(--gold-d); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round }
    .bonus-ribbon { position: absolute; top: -6px; right: -8px; background: var(--gold); color: var(--navy); font-size: 8.5px; font-weight: 600; padding: 3px 6px; 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.1 }
    .bonus-desc { font-size: 11.5px; color: var(--ink-soft); margin-top: 2px; line-height: 1.1 }

    /* ── RECEIPT ── */
    .receipt { background: var(--bg-card); border-radius: var(--radius-md); padding: 16px 18px; 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: 10px }
    .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: 10px; margin-top: 18px }
    .btn-back { flex: 1; padding: 14px; background: var(--bg-card); border: none; border-radius: var(--radius-md); color: var(--ink-soft); font-weight: 600; font-size: 14px; cursor: pointer; transition: background .18s }
    .btn-back:hover { background: var(--border) }
    .btn-next { flex: 2; padding: 15px; background: var(--green); border: none; border-radius: var(--radius-md); color: #fff; font-weight: 600; font-size: 15px; letter-spacing: .1px; cursor: pointer; transition: filter .15s, transform .1s; box-shadow: none }
    .btn-next:hover { filter: brightness(.92) }
    .btn-next:active { transform: scale(.98) }
    .btn-next:disabled { background: #E4E4EC; color: #B5B5C7; cursor: not-allowed; filter: none }
    .btn-cta { width: 100%; padding: 17px; background: var(--green); border: none; border-radius: var(--radius-md); color: #fff; font-weight: 600; font-size: 15.5px; letter-spacing: .5px; text-transform: uppercase; cursor: pointer; transition: filter .15s, transform .1s; box-shadow: none; display: flex; align-items: center; justify-content: center; gap: 9px; text-align: center }
    .btn-cta:hover { filter: brightness(.92) }
    .btn-cta:active { transform: scale(.98) }
    .btn-cta:disabled { background: #E4E4EC; color: #B5B5C7; cursor: not-allowed; filter: none }

    .nav-stack { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 18px }
    .btn-mini-back { background: none; border: none; color: var(--ink-soft); font-size: 12.5px; font-weight: 600; cursor: pointer; padding: 6px }
    .btn-mini-back:hover { color: var(--ink) }

    @keyframes pulseZoom { 0%,100% { transform: scale(1) } 50% { transform: scale(1.035) } }
    .btn-pulse { animation: pulseZoom 2.1s ease-in-out infinite }
    .btn-pulse:hover, .btn-pulse:active { animation-play-state: paused }

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

    /* ── INTRO ── */
    .intro-hero-banner { width: 80%; margin: 0 auto 22px }
    .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.1; 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.1; margin-bottom: 22px }
    .intro-sub strong { color: var(--ink); font-weight: 600 }

    .minute-badge { display: flex; align-items: center; gap: 6px; background: var(--bg-card); color: var(--ink-soft); font-size: 12px; font-weight: 600; padding: 8px 16px; border-radius: var(--radius-sm); margin: 14px 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: 14px 16px; margin-top: 14px }
    .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.1 }
    .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.1; margin-bottom: 18px; letter-spacing: -.2px }
    .social-headline strong { color: var(--coral-d) }

    .carousel-wrap { overflow: hidden; width: 100%; margin-bottom: 20px; -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: 10px; 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: 6px; justify-content: center; margin-top: 18px }
    .mini-badge { display: flex; align-items: center; gap: 5px; background: var(--bg-card); padding: 6px 10px; 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: 20px 0 6px }
    .fb-icon { width: 128px; height: 128px; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; 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.1; margin-bottom: 10px; 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: 26px; line-height: 1.1 }

    .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 20px; 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: 14px 0 8px }
    .ld-icon-wrap { width: 130px; height: 130px; margin: 0 auto 18px; 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: 26px; line-height: 1.1 }
    .ld-msg .child-name-dyn { color: var(--coral) }

    .ld-bars { display: flex; flex-direction: column; gap: 18px; 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: 7px }
    .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) }

    .ld-reveal { text-align: center; margin-top: 30px; animation: riseIn .4s ease both }
    .ld-reveal-icon { width: 52px; height: 52px; border-radius: 50%; background: var(--green-bg); display: flex; align-items: center; justify-content: center; margin: 0 auto 16px }
    .ld-reveal-icon svg { width: 23px; height: 23px; stroke: var(--green); fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round }
    .ld-reveal-txt { font-family: var(--display); font-size: 17px; font-weight: 600; color: var(--ink); margin-bottom: 20px; line-height: 1.1 }
    .ld-reveal-txt .child-name-dyn { color: var(--coral) }

    /* ── 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: 10px; margin-top: 4px }
    .micro-opt-btn { padding: 14px; background: var(--bg-card); border: 1.5px solid transparent; border-radius: var(--radius-md); font-weight: 600; font-size: 14.5px; color: var(--ink); cursor: pointer; transition: all .15s }
    .micro-opt-btn:hover { border-color: var(--gold) }
    .micro-opt-btn:active { transform: scale(.98) }
    .micro-opt-btn.primary { background: var(--green); color: #fff; font-size: 15.5px; padding: 16px }
    .micro-opt-btn.secondary { background: var(--bg-card); color: var(--muted); font-size: 12.5px; font-weight: 500; padding: 9px }

    /* ── RESULT / PAYWALL ── */
    .result-headline { font-family: var(--display); font-size: 26px; font-weight: 600; color: var(--ink); line-height: 1.1; margin-bottom: 9px; 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.1; margin-bottom: 8px; text-align: center }

    .social-proof-row { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 22px }
    .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 18px; 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: 10px }
    .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.1; margin-bottom: 5px; 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: 10px 14px; border-radius: var(--radius-sm); margin-bottom: 14px }
    .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: 20px 18px; margin-bottom: 18px; 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 6px; line-height: 1.1 }
    .price-anchor-tag { font-size: 12px; color: var(--coral-d); font-weight: 600; letter-spacing: .2px }

    .security-badges { width: 100%; margin-top: 14px; 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 5px; letter-spacing: -.2px; line-height: 1.1 }
    .section-sub { font-size: 13px; color: var(--ink-soft); text-align: center; margin-bottom: 18px; font-weight: 400; line-height: 1.1 }

    .video-review-stack { display: flex; flex-direction: column; gap: 12px; margin-bottom: 18px }
    .video-review-card { border-radius: var(--radius-md); overflow: hidden; background: var(--bg-card); position: relative }
    .video-review-card video { width: 100%; height: 220px; object-fit: cover; display: block; background: #1C1E52 }
    .video-review-label { position: absolute; left: 10px; bottom: 10px; background: rgba(28,30,82,.72); color: #fff; font-size: 11px; font-weight: 600; padding: 5px 10px; border-radius: var(--radius-sm) }

    .review-card { background: var(--bg-card); border-radius: var(--radius-md); padding: 18px; margin-bottom: 10px }
    .review-header { display: flex; align-items: center; gap: 12px; margin-bottom: 10px }
    .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: 2px; letter-spacing: 1px }
    .review-text { font-size: 14px; color: var(--ink-soft); line-height: 1.1; 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 { 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.1; 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: 20px; opacity: 0; transition: opacity .3s }
    .popup-overlay.active { opacity: 1 }
    .popup-card { background: #fff; border-radius: var(--radius-lg); padding: 30px 26px; text-align: center; max-width: 340px; width: 100%; 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: 14px }
    .popup-icon svg { width: 40px; height: 40px; stroke: var(--gold-d); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 14px }
    .popup-title { font-family: var(--display); font-size: 22px; font-weight: 600; color: var(--ink); margin-bottom: 9px; line-height: 1.1 }
    .popup-title em { color: var(--coral); font-style: normal }
    .popup-sub { font-size: 14px; color: var(--ink-soft); margin-bottom: 22px; line-height: 1.1; font-weight: 400 }
    .popup-sub strong { color: var(--ink); font-weight: 600 }
    .popup-btn { background: var(--green); color: #fff; font-weight: 600; font-size: 15px; letter-spacing: .4px; text-transform: uppercase; padding: 15px; width: 100%; border: none; border-radius: var(--radius-md); cursor: pointer; transition: filter .15s; box-shadow: none }
    .popup-btn:hover { filter: brightness(.92) }
    .popup-btn:disabled { opacity: .75; cursor: wait }
    @keyframes spinAnim { to { transform: rotate(360deg) } }
    .popup-btn.pix-verde { background: #009F33; text-transform: none; font-size: 17px; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 8px }
    .popup-link { background: none; border: 0; color: var(--ink-soft); font-size: 13px; text-decoration: underline; margin-top: 14px; cursor: pointer; font-family: inherit }
    .popup-tel { width: 100%; box-sizing: border-box; border: 1px solid #cfcfcf; border-radius: 6px; padding: 13px 12px; font-size: 16px; margin-bottom: 12px; font-family: inherit; text-align: center }
    .popup-erro { color: #d20000; font-size: 13px; font-weight: 600; margin-top: 10px; min-height: 0 }
    .popup-erro:empty { display: none }

    @media(max-width:380px) {
      .intro-headline { font-size: 23px }
      .step-title { font-size: 21px }
    }
    @media(max-height:680px) {
      .inner { padding-top: 8px }
      .step-sub { margin-bottom: 14px }
      .nav { margin-top: 14px }
    }

    /* ══════════════════════════════════════════════════════════
       CLONE VISUAL KIWIFY — classes e valores extraídos direto
       do bundle CSS oficial (pay.kiwify.com.br), escopado em #sc-checkout
    ══════════════════════════════════════════════════════════ */
    #sc-checkout {
      background: #eff1f3;
      margin: -16px -16px 0;
      padding: 0 0 24px;
      min-height: 100%;
      font-family: 'Open Sans', sans-serif, Arial;
      color: #000;
    }
    #sc-checkout .kw-content { max-width: 1000px; margin: 0 auto; padding: 8px; }
    #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: .375rem;
      padding: 16px 12px;
      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: .375rem; 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: 6px; font-size: 12px; color: #000; }

    /* kiwi-input — floating label, extraído literal do bundle */
    #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: 4px;
      box-sizing: border-box;
      color: #333;
      font-family: 'Open Sans', sans-serif;
      font-size: 16px;
      font-weight: 500;
      height: 48px;
      outline: 0;
      padding: 16px 40px 0 14px;
      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-input-field:focus + .kiwi-label,
    #sc-checkout .kiwi-input-field:not(:placeholder-shown) + .kiwi-label,
    #sc-checkout .kiwi-label.selected { font-size: 12px; transform: translate3d(0,-8px,0); }
    #sc-checkout .kiwi-label {
      color: #6c7378;
      font-size: 15px;
      font-weight: 500;
      left: 15px;
      line-height: 1;
      pointer-events: none;
      position: absolute;
      top: 17px;
      transform: none;
      transform-origin: left top 0;
      transition: all .25s ease-in-out 0s;
    }
    #sc-checkout .kiwi-icon { bottom: 15px; 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; }

    /* select flutuante (parcelas) — css-1t5upd/1bjxe9/1u0qflz literais */
    #sc-checkout .kw-select-wrap { background-color: #fff; border: 1px solid #cfcfcf; border-radius: 4px; color: #333; position: relative; overflow: hidden; margin-bottom: 12px; }
    #sc-checkout .kw-select-wrap:before { border-bottom: 1px solid #2c2e2f; border-right: 1px solid #2c2e2f; content: ""; height: 8px; width: 8px; pointer-events: none; position: absolute; right: 16px; top: calc(50% - 2px); transform: translateY(-50%) rotate(45deg); }
    #sc-checkout .kw-select { -webkit-appearance: none; appearance: none; background-color: transparent; border: none; box-sizing: border-box; color: #333; font-family: 'Open Sans', sans-serif; font-size: 16px; font-weight: 500; height: 48px; outline: 0; padding: 16px 36px 0 14px; width: 100%; }
    #sc-checkout .kw-select-label { color: #6c7378; font-size: 15px; font-weight: 500; left: 14px; line-height: 1; pointer-events: none; position: absolute; top: 16px; }
    #sc-checkout .kw-select-label.selected { font-size: 12px; transform: translate3d(0,-8px,0); }

    /* Métodos de pagamento — grid + border/shadow-md do bundle, badge check no canto */
    #sc-checkout .kw-methods-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 16px; margin-top: 24px; }
    #sc-checkout .kw-methods-grid.so-pix { grid-template-columns: 1fr; }
    #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(/historinha/assets/79ccb08149340d.svg);
      mask-image: url(/historinha/assets/79ccb08149340d.svg);
      -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; }

    /* Painel do cartão — checkout-bg #fafafa literal */
    #sc-checkout .kw-card-panel { width: 100%; padding: 16px; padding-top: 12px; border-radius: 4px; border: 1px solid #9ca3af; background-color: #fafafa; }
    @media(min-width:640px){ #sc-checkout .kw-card-panel { padding: 12px 16px; } }

    /* Formulário de cartão Appmax */
    #sc-checkout .kw-card-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
    #sc-checkout .kw-card-row .kiwi-input { margin-bottom: 12px; }
    #sc-checkout .kw-card-panel .kiwi-input-field { background: #fff; }
    #sc-checkout .kw-card-brand { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-size: 11px; font-weight: 700; color: #6b7280; letter-spacing: .3px; pointer-events: none; }
    #sc-checkout .kw-card-panel .kw-pay-btn { margin-top: 8px; }
    #sc-checkout .kw-card-analise { display: none; align-items: center; gap: 10px; margin-top: 12px; padding: 12px; border-radius: 6px; background: #eff6ff; border: 1px solid #bfdbfe; color: #1e40af; font-size: 13px; font-weight: 600; }
    #sc-checkout .kw-card-analise.on { display: flex; }
    #sc-checkout .kw-card-analise .kw-mini-spin { width: 16px; height: 16px; border: 2px solid #bfdbfe; border-top-color: #1e40af; border-radius: 50%; animation: spinAnim .6s linear infinite; flex-shrink: 0; }

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

    /* Botão Pagar agora — background-color #28b463 literal, font system-ui literal */
    #sc-checkout .kw-pay-btn {
      width: 100%; padding: 16px; border-radius: .375rem; text-align: center; color: #fff;
      font-size: 18px; font-weight: 600; cursor: pointer; border: none;
      background-color: #28b463 !important;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif !important;
      transition: opacity .075s; margin-top: 24px;
      display: flex; align-items: center; justify-content: center; gap: 10px;
    }
    #sc-checkout .kw-pay-btn:hover { opacity: .75; }
    #sc-checkout .kw-pay-btn:disabled { opacity: .6; cursor: not-allowed; }

    #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: 11px; font-size: 13px; color: #d20000; margin-top: 10px; display: none; font-weight: 600; }
    #sc-checkout .kw-erro:not(:empty) { display: block; }

    /* Order bump — layout idêntico ao print: dashed border, título no topo, seta+check+imagem+texto embaixo */
    #sc-checkout .kw-ob { background: #eff6ff; border: 2px dashed #93c5fd; border-radius: 8px; padding: 14px 12px; margin-top: 18px; 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: 10px; }
    #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; }

    /* Footer — logo + termos, texto literal */
    #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-footer button { font-weight: 700; background: none; border: none; color: #6b7280; font-size: 11px; cursor: pointer; padding: 0; margin-top: 6px; }

    /* PIX gerado (fora do padrão Kiwify, mas mantendo paleta) */
    #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 14px; 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: 14px; }
    #sc-checkout .kw-cc-label { font-size: 11px; font-weight: 700; color: #6c7378; margin-bottom: 6px; 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: 10px 12px; font-size: 11px; color: #5a5a68; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
    #sc-checkout .kw-copy-pix-btn { background-color: #28b463 !important; margin-top: 0; margin-bottom: 16px; }
    #sc-checkout .kw-await-bar { display: flex; align-items: center; gap: 9px; 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: 6px; 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: 11px; margin-bottom: 10px; }
    #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; }

    /* Reviews — cards exatamente como o bundle: rounded-md max-w-sm border border-gray-200 */
    #sc-checkout .kw-reviews { margin-top: 16px; }
    #sc-checkout .kw-review-card { border-radius: .375rem; 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: 10px; color: #000; }
    #sc-checkout .kw-review-stars { display: flex; justify-content: center; gap: 2px; margin-top: 10px; color: #faca15; }
    #sc-checkout .kw-review-stars svg { width: 20px; height: 20px; }
    #sc-checkout .kw-review-name { font-size: 13px; margin-top: 10px; 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: 20px; 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; transition: width 1.1s cubic-bezier(.4,0,.2,1) }

    /* ── 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: 18px 16px; text-align: left; margin-bottom: 16px }
    .ty-step { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px }
    .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: 14px 16px; text-align: left; margin-bottom: 16px }
    .ty-warning-title { font-size: 13.5px; font-weight: 700; color: #92650A; margin-bottom: 6px }
    .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: 11px 18px; border-radius: var(--radius-sm); font-weight: 600;
      font-size: 14px; text-decoration: none; transition: opacity .15s;
    }
    .ty-support-email:hover { opacity: .85 }