:root {
  color-scheme: dark;
  --lime: #c6ff2e;
  --cyan: #32d9ff;
  --muted: #929c98;
  --line: rgba(255, 255, 255, 0.1);
}

/* Segundo order bump: destaque ciano, escolha independente do vitalício. */
.upgrade.upgrade-prompts {
  border-color: #32d9ff55;
  background: #32d9ff08;
}
.upgrade-prompts .badge,
.upgrade.upgrade-prompts b {
  color: var(--cyan);
}
.upgrade-prompts input[type="checkbox"] {
  accent-color: var(--cyan);
}
.upgrade.upgrade-prompts:has(input:checked) {
  border-color: var(--cyan);
  background: #32d9ff14;
}
.payment-method{display:flex;align-items:center;gap:12px;border:1px solid #c6ff2e88;background:#c6ff2e0c;border-radius:12px;padding:14px 16px;margin:18px 0 14px}.payment-method .pix-mark{display:grid;place-items:center;width:30px;height:30px;border-radius:8px;background:#c6ff2e;color:#101713;font-size:12px;transform:rotate(45deg)}.payment-method .pix-mark::first-letter{transform:rotate(-45deg)}.payment-method div{display:grid;gap:2px}.payment-method strong{font-size:14px}.payment-method small{color:var(--muted);font-size:11px}.payment-method .selected{margin-left:auto;color:var(--lime);font-size:11px;font-weight:700}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: radial-gradient(ellipse at 10% 25%, #14322244, transparent 45%), #080c0b;
  color: #f6f8f7;
  font-family: "DM Sans", sans-serif;
}
a {
  color: inherit;
  text-decoration: none;
}
button,
input,
textarea {
  font: inherit;
}
button,
a {
  touch-action: manipulation;
}
button {
  cursor: pointer;
}
button:disabled {
  cursor: wait;
  opacity: 0.5;
}
[hidden] {
  display: none !important;
}
svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
h1,
h2,
h3,
.brand {
  font-family: "Space Grotesk", sans-serif;
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 4px;
}
.topbar {
  max-width: 1160px;
  margin: auto;
  padding: 24px 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--line);
}
.brand {
  display: flex;
  align-items: center;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.5px;
}
.brand > span:last-child {
  color: var(--lime);
}
.brand-icon {
  background: #c6ff2e16;
  color: var(--lime);
  border: 1px solid #c6ff2e33;
  padding: 8px;
  margin-right: 10px;
  border-radius: 9px;
}
.secure {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--muted);
}
.secure svg {
  color: var(--lime);
  width: 16px;
}
.checkout-layout {
  max-width: 1100px;
  margin: 48px auto 72px;
  padding: 0 28px;
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 64px;
  align-items: start;
}
.back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 35px;
}
.back svg {
  width: 14px;
}
.eyebrow {
  font: 700 10px monospace;
  letter-spacing: 2px;
  color: var(--lime);
}
h1 {
  font-size: 54px;
  line-height: 1.05;
  letter-spacing: -2.5px;
  margin: 18px 0;
}
h1 em {
  font-style: normal;
  color: var(--lime);
}
.intro {
  font-size: 15px;
  line-height: 1.7;
  color: var(--muted);
  max-width: 380px;
}
.offer-price {
  margin-top: 24px;
}
.offer-price > span {
  color: var(--muted);
  font-size: 14px;
}
.offer-price > strong {
  display: block;
  color: var(--lime);
  font:
    700 52px/1.2 "Space Grotesk",
    sans-serif;
  letter-spacing: -2px;
}
.offer-price small {
  font-size: 26px;
}
.offer-price p {
  color: var(--muted);
  font-size: 11px;
  margin: 8px 0 0;
}
/* A janela rola por dentro em telas pequenas, sem esconder QR ou botões. */
body.payment-open {
  overflow: hidden;
}
.payment-dialog {
  width: min(480px, calc(100% - 24px));
  max-height: calc(100dvh - 24px);
  padding: 0;
  margin: auto;
  border: 1px solid #c6ff2e40;
  border-radius: 24px;
  background: #101613;
  color: #f6f8f7;
  box-shadow: 0 30px 100px #0009;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.payment-dialog::backdrop {
  background: #020806cc;
  backdrop-filter: blur(8px);
}
.payment-dialog[open] {
  animation: appear 0.22s ease-out;
}
.dialog-shell {
  padding: clamp(20px, 5vw, 30px);
}
.dialog-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.dialog-close {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #ffffff06;
  color: #c9d6ce;
}
.dialog-close:hover {
  background: #ffffff12;
}
.payment-loading {
  padding: 35px 0;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.7;
}
.payment-spinner {
  display: inline-block;
  width: 38px;
  height: 38px;
  border: 3px solid #c6ff2e22;
  border-top-color: var(--lime);
  border-radius: 50%;
  animation: payment-spin 0.8s linear infinite;
}
@keyframes payment-spin {
  to {
    transform: rotate(360deg);
  }
}
.payment-amount {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 15px;
  border: 1px solid #c6ff2e22;
  border-radius: 12px;
  background: #c6ff2e08;
  font-size: 12px;
}
.payment-amount strong {
  font:
    700 28px "Space Grotesk",
    sans-serif;
  color: var(--lime);
  white-space: nowrap;
}
.payment-dialog .pix-result {
  border: 0;
  padding: 0;
  margin: 20px 0 0;
}
.payment-dialog #studentHelp {
  margin: 16px 0 0;
  line-height: 1.7;
}
.course-cover {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  min-height: 240px;
  margin: 32px 0;
  border: 1px solid #c6ff2e33;
  border-radius: 20px;
  background: linear-gradient(115deg, #1a2b17, #0c1b1d 85%);
  padding: 25px;
}
.cover-tag {
  font: 700 9px monospace;
  letter-spacing: 2px;
  color: var(--lime);
}
.cover-icon {
  position: absolute;
  right: 20px;
  top: 65px;
  width: 100px;
  height: 100px;
  color: #32d9ff33;
}
.course-cover p {
  font: 700 10px monospace;
  letter-spacing: 3px;
  color: #ffffff66;
  margin: 25px 0 9px;
}
.course-cover strong {
  font:
    700 33px/1.1 "Space Grotesk",
    sans-serif;
  letter-spacing: -1px;
}
.cover-footer {
  font: 700 8px monospace;
  letter-spacing: 2px;
  color: #ffffff66;
  margin-top: 22px;
}
.benefits {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 20px;
}
.benefits li {
  display: flex;
  gap: 14px;
  align-items: center;
}
.benefits svg {
  color: var(--lime);
  padding: 11px;
  width: 42px;
  height: 42px;
  background: #c6ff2e0b;
  border: 1px solid #c6ff2e20;
  border-radius: 12px;
}
.benefits strong,
.benefits span {
  display: block;
  font-size: 13px;
}
.benefits span {
  color: var(--muted);
  font-size: 12px;
  margin-top: 5px;
}
.payment-panel {
  border: 1px solid var(--line);
  border-radius: 24px;
  background: #101613;
  box-shadow: 0 25px 90px #0006;
  overflow: hidden;
}
.session-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #32d9ff0a;
  border-bottom: 1px solid #32d9ff22;
  padding: 17px 22px;
  color: #95e9fa;
}
.session-bar > div {
  flex: 1;
}
.session-bar strong {
  font-size: 11px;
  display: block;
}
.session-bar small {
  display: block;
  font-size: 9px;
  color: #7da1a7;
  margin-top: 4px;
}
.session-bar > span {
  font: 700 22px monospace;
  letter-spacing: 1px;
}
.panel-body {
  padding: 28px;
}
.step {
  font: 700 9px monospace;
  letter-spacing: 1.2px;
  color: #8d9691;
  display: flex;
  gap: 8px;
  align-items: center;
}
.step > span {
  color: var(--lime);
  border: 1px solid #c6ff2e33;
  border-radius: 50%;
  padding: 5px;
}
h2 {
  font-size: 26px;
  letter-spacing: -1px;
  margin: 18px 0 8px;
}
.subtle {
  font-size: 12px;
  color: var(--muted);
  margin: 0 0 28px;
}
.access-delivery {
  display: flex;
  gap: 12px;
  margin: 18px 0 20px;
  padding: 14px;
  border: 1px solid rgba(50,217,255,.16);
  border-radius: 14px;
  background: rgba(50,217,255,.045);
}
.access-delivery > svg { width: 20px; height: 20px; flex: 0 0 auto; color: #32d9ff; margin-top: 2px; }
.access-delivery strong, .access-delivery span { display: block; }
.access-delivery strong { font-size: 12px; color: #e4e4e7; }
.access-delivery span { margin-top: 4px; font-size: 11px; line-height: 1.55; color: #71717a; }
.trust-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; margin-top: 14px; }
.trust-row span { display: flex; min-width: 0; align-items: center; justify-content: center; gap: 5px; border: 1px solid rgba(255,255,255,.06); border-radius: 9px; padding: 9px 5px; color: #71717a; font-size: 9px; font-weight: 700; text-align: center; }
.trust-row svg { width: 13px; height: 13px; flex: 0 0 auto; color: #b7ff2a; }
fieldset {
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
}
label {
  display: block;
  font-weight: 500;
  font-size: 12px;
  margin: 17px 0 9px;
}
input:not([type="checkbox"]),
textarea {
  width: 100%;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #080e0b;
  color: white;
  font-size: 16px;
}
input::placeholder {
  color: #53645b;
  font-size: 13px;
}
input:focus {
  border-color: #c6ff2e88;
  outline: none;
}
input[type="checkbox"] {
  appearance: auto;
  accent-color: var(--lime);
  width: 21px;
  height: 21px;
  margin: 4px 0 0;
  flex-shrink: 0;
}
.upgrade {
  display: flex;
  gap: 12px;
  padding: 17px;
  margin: 24px 0;
  border: 1px solid #c6ff2e55;
  border-radius: 13px;
  background: linear-gradient(110deg, #c6ff2e0d, #32d9ff04);
  cursor: pointer;
}
.upgrade:has(input:checked) {
  border-color: var(--lime);
  background: #c6ff2e16;
}
.upgrade-copy {
  display: grid;
  gap: 7px;
}
.badge {
  font: 700 8px monospace;
  letter-spacing: 1px;
  color: var(--lime);
}
.upgrade strong {
  font-size: 15px;
}
.upgrade-copy > span:not(.badge) {
  font-size: 11px;
  line-height: 1.6;
  color: #99a99f;
}
.upgrade b {
  color: var(--lime);
  font-size: 12px;
}
.receipt {
  margin: 20px 0;
}
.receipt > div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  padding: 7px 0;
  color: var(--muted);
}
.receipt strong {
  color: #e4eae6;
}
.receipt .total {
  border-top: 1px solid var(--line);
  padding-top: 17px;
  margin-top: 9px;
  color: #e4eae6;
}
.total > strong {
  font:
    700 29px "Space Grotesk",
    sans-serif;
  letter-spacing: -1px;
}
.total small {
  display: block;
  color: #6f8477;
  font-size: 9px;
  margin-top: 5px;
}
.primary,
.secondary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  min-height: 52px;
  border-radius: 11px;
  border: 0;
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  padding: 14px;
}
.primary {
  background: var(--lime);
  color: #101906;
  transition:
    filter 0.2s,
    transform 0.2s;
}
.primary:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}
.primary svg {
  width: 17px;
}
.secondary {
  border: 1px solid #32d9ff33;
  background: #32d9ff08;
  color: var(--cyan);
  margin-top: 12px;
}
.privacy {
  display: flex;
  align-items: start;
  gap: 7px;
  font-size: 10px;
  line-height: 1.6;
  color: #6f8477;
  text-align: center;
  margin: 21px 0 0;
}
.privacy svg {
  width: 13px;
  height: 17px;
}
.message {
  border: 1px solid #fbbf2444;
  background: #fbbf2409;
  border-radius: 10px;
  padding: 13px;
  font-size: 12px;
  color: #fcd98b;
  line-height: 1.6;
}
.pix-result {
  border-top: 1px solid var(--line);
  padding-top: 24px;
  margin-top: 20px;
}
.pix-result h3 {
  font-size: 24px;
  margin: 10px 0;
}
.pix-result > p:not(.eyebrow) {
  font-size: 12px;
  line-height: 1.6;
  color: var(--muted);
}
.pix-result img {
  max-width: 100%;
  height: auto;
  background: white;
  border-radius: 12px;
  margin: 20px auto;
  display: block;
}
.pix-result textarea {
  font-family: monospace;
  font-size: 11px;
  resize: none;
  word-break: break-all;
}
.pix-result small {
  display: block;
  margin: 14px 0;
  font-size: 10px;
  line-height: 1.7;
  color: var(--muted);
}
.waiting {
  border-radius: 10px;
  background: #32d9ff09;
  padding: 12px;
  text-align: center;
}
footer {
  text-align: center;
  padding: 20px;
  font-size: 10px;
  color: #5e7065;
}
.payment-panel,
.offer {
  animation: appear 0.5s ease-out both;
}
@keyframes appear {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (max-width: 800px) {
  .checkout-layout {
    grid-template-columns: 1fr;
    gap: 26px;
    max-width: 560px;
    margin: 25px auto;
    padding: 0 16px;
  }
  .topbar {
    padding: 15px 18px;
  }
  .secure {
    font-size: 10px;
  }
  .brand {
    font-size: 16px;
  }
  .back {
    margin-bottom: 18px;
  }
  .offer h1 {
    font-size: 36px;
    letter-spacing: -1.5px;
  }
  .offer h1 br {
    display: none;
  }
  .intro {
    font-size: 13px;
    margin-bottom: 0;
    max-width: none;
  }
  .course-cover,
  .benefits {
    display: none;
  }
  .eyebrow {
    font-size: 9px;
  }
  .panel-body {
    padding: 23px 20px;
  }
  .session-bar {
    padding: 15px 18px;
  }
  .session-bar > svg {
    width: 17px;
  }
  .session-bar strong {
    font-size: 10px;
  }
  .session-bar small {
    font-size: 9px;
  }
  .session-bar > span {
    font-size: 21px;
  }
  .payment-panel {
    border-radius: 20px;
  }
  .total > strong {
    font-size: 27px;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    scroll-behavior: auto !important;
  }
}

/* Checkout clean: visual claro inspirado em páginas brasileiras de pagamento.
   Mantém os order bumps e a lógica Pix acima; este bloco só redefine a apresentação. */
:root {
  color-scheme: light;
  --checkout-ink: #18242d;
  --checkout-muted: #6f7d86;
  --checkout-line: #dce4e9;
  --checkout-green: #20b968;
}

body {
  background: #eef2f5;
  color: var(--checkout-ink);
}

.topbar {
  max-width: 980px;
  padding: 23px 22px;
  border-bottom: 0;
}

.brand { color: #16232b; }
.brand > span:last-child { color: #397188; }
.brand-icon {
  color: #2e6e86;
  background: #e1eef4;
  border-color: #c9dee8;
}
.secure { color: #71808a; }
.secure svg { color: var(--checkout-green); }

.checkout-layout {
  max-width: 980px;
  margin: 10px auto 56px;
  grid-template-columns: minmax(280px, .8fr) minmax(420px, 1.2fr);
  gap: 22px;
  padding: 0 22px;
}

.offer,
.payment-panel {
  border: 1px solid var(--checkout-line);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 12px 35px rgba(30, 50, 65, .08);
}

.offer { padding: 28px; }
.back { color: #64747e; margin-bottom: 28px; }
.eyebrow { color: #277b60; }
.offer h1 {
  color: #17232b;
  font-size: clamp(32px, 4vw, 48px);
  letter-spacing: -1.8px;
  margin: 16px 0;
}
.offer h1 em { color: #1b9a5a; }
.intro { color: #66757f; }
.offer-price > span { color: #75828a; }
.offer-price > strong { color: #16232b; }
.offer-price p { color: #73818a; }
.course-cover {
  min-height: 200px;
  margin: 28px 0;
  border-color: #cfe3d6;
  background: linear-gradient(125deg, #ecf8ef, #eaf5f8);
}
.cover-tag { color: #25835a; }
.course-cover p { color: #688079; }
.course-cover strong { color: #19312b; }
.cover-footer { color: #6b8378; }
.cover-icon { color: #2a9b6b44; }
.benefits { gap: 15px; }
.benefits strong { color: #23323a; }
.benefits span { color: #74828a; }
.benefits svg {
  color: #208b59;
  background: #edf8f1;
  border-color: #d0ead9;
}

.payment-panel { overflow: hidden; }
.session-bar {
  color: #276a43;
  background: #effaf3;
  border-bottom-color: #d7ecde;
}
.session-bar small { color: #71877a; }
.session-bar > span { color: #1b9c59; }
.panel-body { padding: 28px 30px 26px; }
.step { color: #7b8991; }
.step > span { color: #208f57; border-color: #bfe3ca; }
h2 { color: #18242d; }
.subtle { color: var(--checkout-muted); }
.access-delivery {
  background: #f7fafb;
  border-color: #dce7ec;
}
.access-delivery > svg { color: #3b829a; }
.access-delivery strong { color: #33454e; }
.access-delivery span { color: #718089; }
.affiliate-notice {
  margin: -6px 0 18px;
  border: 1px solid #bfe6ce;
  border-radius: 10px;
  background: #effaf3;
  padding: 10px 12px;
  color: #237546;
  font-size: 12px;
  font-weight: 700;
}

label { color: #34444c; }
input:not([type="checkbox"]), textarea {
  color: #1a2a32;
  background: #fff;
  border-color: #cbd7dd;
}
input::placeholder { color: #9aa8af; }
input:focus { border-color: #39a96e; box-shadow: 0 0 0 3px #39a96e1c; }

.upgrade {
  background: #fbfdf9;
  border-color: #c9e4d1;
}
.upgrade:has(input:checked) { background: #f0faef; border-color: #52b977; }
.upgrade-copy > span:not(.badge) { color: #6d7d84; }
.badge, .upgrade b { color: #218d56; }
.upgrade.upgrade-prompts { background: #f8fbfc; border-color: #cce3ea; }
.upgrade-prompts .badge, .upgrade.upgrade-prompts b { color: #277e98; }
.upgrade.upgrade-prompts:has(input:checked) { background: #edf9fb; border-color: #54a9bc; }

.payment-method {
  background: #f1fbf5;
  border-color: #4abb7a;
}
.payment-method .selected { color: #218d56; }
.payment-method small { color: #71817a; }
.receipt > div { color: #708089; }
.receipt strong { color: #30404a; }
.receipt .total { border-top-color: #e0e7eb; color: #203039; }
.total > strong { color: #167e4a; }
.total small { color: #7b8b92; }
.primary {
  color: #fff;
  background: var(--checkout-green);
  border-radius: 7px;
  box-shadow: 0 7px 16px #20b9682e;
}
.primary:hover { background: #179e58; }
.secondary {
  color: #40515a;
  background: #f5f8f9;
  border-color: #d4dfe4;
}
.privacy { color: #7a888f; }
.trust-row span { color: #6f7d84; border-color: #e0e7eb; }
.trust-row svg { color: #24965b; }
footer { color: #77858d; }
footer a { color: #397188; }

.payment-dialog {
  color: var(--checkout-ink);
  background: #fff;
  border-color: #d5e1e5;
}
.payment-dialog::backdrop { background: rgba(20, 35, 42, .48); }
.dialog-close { color: #56656d; background: #f3f6f7; border-color: #dce5e9; }
.payment-dialog .subtle, .payment-dialog .privacy { color: #718089; }
.payment-amount { background: #f1fbf5; border-color: #c6e8d1; }
.payment-amount strong { color: #16804b; }
.payment-dialog .pix-result p { color: #66767e; }
.payment-dialog textarea { background: #fff; color: #203039; border-color: #cbd7dd; }
.waiting { background: #f1f8fb; color: #55727d; }

@media (max-width: 800px) {
  .checkout-layout { margin-top: 0; }
  .offer { padding: 22px; }
  .offer h1 { font-size: 34px; }
  .payment-panel { border-radius: 12px; }
  .panel-body { padding: 24px 20px; }
}

/* Selo Pix legível em vez do losango rotacionado, especialmente no celular. */
.payment-method .pix-mark {
  display: grid;
  place-items: center;
  width: 38px;
  height: 30px;
  margin: 0;
  border-radius: 8px;
  background: #19a965;
  color: #fff;
  transform: none;
  font: 800 10px/1 "Space Grotesk", sans-serif;
  letter-spacing: .4px;
}
.payment-method .pix-mark svg {
  width: 19px;
  height: 19px;
  color: #fff;
}
.payment-method .pix-mark {
  background: #effbf4;
  border: 1px solid #bfe7cf;
}
.payment-method .pix-mark img {
  display: block;
  width: 21px;
  height: 21px;
  object-fit: contain;
}

@media (max-width: 480px) {
  .payment-method { gap: 9px; padding: 12px; }
  .payment-method .pix-mark { width: 36px; height: 28px; font-size: 9px; }
  .payment-method .selected { font-size: 10px; }
}

/* Página única de pagamento: referência visual de checkout Kiwify, só Pix. */
.checkout-layout {
  grid-template-columns: minmax(0, 560px);
  justify-content: center;
  max-width: 592px;
  gap: 14px;
}
.offer {
  padding: 12px 8px 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}
.offer .back,
.offer .course-cover,
.offer .benefits { display: none; }
.offer .eyebrow { margin-bottom: 7px; }
.offer h1 { max-width: none; margin: 0 0 7px; font-size: 22px; }
.offer .intro { max-width: none; margin-bottom: 12px; font-size: 14px; }
.offer-price { margin: 0; padding: 13px 15px; border-radius: 8px; }
.offer-price strong { font-size: 34px; }
.payment-panel {
  border-radius: 8px;
  box-shadow: 0 14px 36px rgba(22, 38, 54, .11);
  animation: checkout-in .46s cubic-bezier(.2,.8,.2,1) both;
}
.checkout-header { border-radius: 8px 8px 0 0; }
.field input:focus { box-shadow: 0 0 0 3px rgba(43, 176, 94, .13); }
.pay-button { min-height: 52px; border-radius: 5px; }
@keyframes checkout-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

@media (max-width: 640px) {
  .checkout-layout { padding-inline: 14px; }
  .offer { padding-inline: 2px; }
  .offer h1 { font-size: 20px; }
  .payment-panel { border-radius: 7px; }
}

/* Estrutura final no padrão de checkout brasileiro: cartão único, leve e focado no Pix. */
body { background: #f2f4f6; color: #26333b; }.topbar { max-width: 560px; padding: 18px 12px 10px; }.brand { font-size: 16px; }.brand-icon { border-radius: 5px; padding: 7px; }.secure { display: none; }
.checkout-layout { max-width: 560px; margin: 0 auto 38px; padding: 0 12px; gap: 10px; }.offer { padding: 10px 4px 2px; }.offer .eyebrow { font-size: 9px; }.offer h1 { font-size: 20px; letter-spacing: -.5px; }.offer .intro { font-size: 12px; }.offer-price { border: 1px solid #dae2e5; background: #fff; }.offer-price > strong { color: #17262e; font-size: 30px; }.offer-price p { font-size: 10px; }
.payment-panel { border: 1px solid #d9e0e4; border-radius: 5px; box-shadow: 0 2px 8px #18303e12; }.session-bar { padding: 12px 17px; background: #fffaf0; border-bottom-color: #f3e2b7; color: #8b6411; }.session-bar > span { color: #8b6411; font-size: 18px; }.panel-body { padding: 21px 17px 19px; }.step,.access-delivery { display: none; }.panel-body h2 { margin: 0 0 4px; font-size: 21px; }.subtle { margin-bottom: 16px; font-size: 11px; }
.kiwify-fields { display: grid; gap: 9px; }.kiwify-fields label { display: grid; gap: 5px; margin: 0; color: #687780; font-size: 10px; font-weight: 600; }.kiwify-fields input:not([type="checkbox"]) { min-height: 41px; padding: 10px 11px; border-radius: 3px; border-color: #cad5db; font-size: 13px; }.two-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.kiwify-payment-title { margin: 17px 0 7px; color: #64737d; font-size: 11px; font-weight: 700; }.payment-method { min-height: 56px; margin: 0 0 13px; padding: 10px 12px; border-radius: 3px; background: #fff; border-color: #1ba45a; box-shadow: 0 0 0 1px #1ba45a22; }.payment-method .selected { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: #24b964; color: #fff; font-size: 11px; }.payment-method .pix-mark { background: transparent; border: 0; }
.upgrade { margin: 12px 0; padding: 12px; border-radius: 5px; }.upgrade strong { font-size: 13px; }.upgrade-copy > span:not(.badge) { font-size: 10px; }.receipt { margin: 14px 0; padding-top: 8px; border-top: 1px solid #e5ebee; }.receipt > div { font-size: 11px; }.total > strong { color: #26333b; font-size: 25px; }.primary { min-height: 49px; border-radius: 4px; background: #20b968; box-shadow: none; }.privacy { margin-top: 14px; }.trust-row { display: none; } footer { padding: 12px 20px 24px; }
@media (max-width: 380px) { .two-fields { grid-template-columns: 1fr; } }

/* Acabamento de formulário: feedback imediato, confiança e melhor toque no celular. */
.kiwify-fields input:invalid:not(:placeholder-shown) { border-color: #d85b5b; }.kiwify-fields input:valid:not(:placeholder-shown) { border-color: #6bbd8d; }.kiwify-fields label:focus-within { color: #238d57; }.primary:disabled { background: #95cfae; }.trust-row { display: grid; margin-top: 13px; }.trust-row span { padding: 8px 3px; background: #fafcfc; font-size: 8px; }.trust-row svg { color: #1da560; }.payment-panel { position: relative; }.payment-panel::after { content: 'PIX'; position: absolute; right: 15px; top: 59px; color: #1ba45a18; font: 700 32px 'Space Grotesk'; pointer-events: none; }

/* Faixa de sessão com hierarquia de checkout: prazo à esquerda e relógio à direita. */
.session-bar { min-height: 62px; border-radius: 5px 5px 0 0; }.session-bar > svg { width: 20px; height: 20px; color: #ad7a10; }.session-bar strong { color: #966c13; font-size: 11px; }.session-bar small { color: #9a8a6d; font-size: 9px; }.session-bar > span { font: 700 18px/1 'Space Grotesk'; letter-spacing: .5px; }.payment-panel::after { top: 65px; }

/* Layout final inspirado em checkout de produto digital: sem marca ou identidade de terceiros. */
body { background: #f4f6f7; }.topbar { display: none; }.checkout-layout { width: min(100%, 492px); max-width: 492px; margin: 0 auto 34px; padding: 18px 12px 0; gap: 12px; }.offer { padding: 0; }.offer .back { display: inline-flex; margin: 0 0 18px; color: #67757c; font-size: 11px; }.checkout-product { display: flex; align-items: center; gap: 12px; min-height: 57px; margin-bottom: 14px; color: #111d23; font-size: 16px; }.product-logo { display: grid; place-items: center; width: 57px; height: 51px; border-radius: 4px; background: #fffdf6; box-shadow: 0 1px 5px #1c2e3617; color: #1e8d5a; font: 700 22px 'Space Grotesk'; }.offer .eyebrow { display: none; }.offer h1 { margin: 0 0 5px; color: #18262d; font-size: 18px; font-weight: 700; }.offer .intro { margin: 0; color: #77848b; font-size: 12px; line-height: 1.45; }.offer-price { display: none; }
.payment-panel { border: 1px solid #d7e0e4; border-radius: 4px; background: #fff; box-shadow: 0 1px 4px #20364018; }.payment-panel::after { display: none; }.session-bar { min-height: 54px; padding: 10px 15px; background: #fffdf8; border-bottom: 1px solid #ece3c8; }.panel-body { padding: 17px; }.panel-body h2 { font-size: 18px; }.subtle { font-size: 11px; }.kiwify-fields { gap: 8px; }.kiwify-fields label { gap: 4px; font-size: 10px; }.kiwify-fields input:not([type="checkbox"]) { height: 39px; min-height: 39px; padding: 8px 10px; border-radius: 2px; background: #fff; }.kiwify-payment-title { margin-top: 15px; }.payment-method { border-radius: 2px; box-shadow: 0 0 0 1px #21a75c1f; }.upgrade { border-radius: 3px; }.receipt { padding: 12px; border: 1px solid #e0e7e9; border-radius: 3px; background: #fbfcfc; }.receipt .total { margin-top: 6px; }.primary { border-radius: 3px; min-height: 48px; background: #22b765; font-size: 13px; }.privacy { color: #7c898f; }.trust-row { margin-top: 12px; }.trust-row span { background: transparent; }

/* Desktop: mesma hierarquia, com largura apropriada em vez de uma coluna minúscula. */
@media (min-width: 900px) {
  .checkout-layout { width: min(100% - 48px, 672px); max-width: 672px; padding-top: 32px; gap: 30px; }
  .offer { padding: 0 16px; }.offer .back,.offer .eyebrow,.offer h1,.offer .intro { display: none; }.checkout-product { min-height: 78px; margin: 0; gap: 17px; font-size: 22px; color: #080d10; }.product-logo { width: 128px; height: 78px; font-size: 31px; border-radius: 6px; background: linear-gradient(135deg,#fffdf5,#f4edd8); }
  .payment-panel { border-radius: 5px; }.session-bar { min-height: 47px; width: 400px; margin: 28px auto 25px; padding: 0 14px; border: 0; border-radius: 5px; background: #050505; color: #fff; }.session-bar > svg { display: none; }.session-bar strong { color: #fff; font-size: 12px; }.session-bar small { display: none; }.session-bar > span { color: #fff; font-size: 15px; }.panel-body { padding: 0 25px 25px; border-top: 1px solid #e8edf0; }.panel-body h2,.panel-body > .subtle { display: none; }.kiwify-fields { gap: 10px; padding-top: 25px; }.kiwify-fields label { gap: 0; font-size: 0; }.kiwify-fields input:not([type="checkbox"]) { height: 49px; min-height: 49px; padding: 12px 14px; border-radius: 4px; font-size: 15px; }.kiwify-fields input::placeholder { font-size: 15px; }.two-fields { gap: 8px; }.kiwify-payment-title { margin: 30px 0 10px; font-size: 12px; }.payment-method { min-height: 65px; padding: 12px 17px; border-radius: 4px; }.upgrade { padding: 15px; }.receipt { padding: 15px; }.primary { min-height: 54px; font-size: 14px; }
}

.checkout-product img.product-logo { display: block; object-fit: cover; color: transparent; font-size: 0; }

/* A expiração continua ativa via JavaScript, sem adicionar urgência visual ao checkout. */
.session-bar { display: none; }

/* Confirmação final: uma tela própria, sem a aparência de formulário de Pix. */
.payment-dialog.payment-approved { width: min(560px, calc(100% - 28px)); border-color: rgb(183 255 42 / 18%); background: radial-gradient(circle at 50% 15%, rgb(183 255 42 / 12%), transparent 28%), linear-gradient(145deg, #111713, #070a08 76%); color: #f6f8f7; text-align: center; box-shadow: 0 32px 110px rgb(0 0 0 / 72%); }
.payment-dialog.payment-approved .dialog-shell { padding: clamp(28px, 6vw, 42px); }
.payment-dialog.payment-approved .dialog-header { justify-content: center; }
.payment-dialog.payment-approved .dialog-header .eyebrow { color: #f4c417; }
.payment-dialog.payment-approved .dialog-close { position: absolute; top: 18px; right: 18px; border-color: rgb(255 255 255 / 10%); background: rgb(255 255 255 / 4%); color: #d5ddd7; }
.approval-badge { display: grid; place-items: center; width: 70px; height: 70px; margin: 22px auto 24px; border-radius: 50%; background: #b7ff2a; color: #071000; box-shadow: 0 0 0 10px rgb(183 255 42 / 7%), 0 0 38px rgb(183 255 42 / 36%); animation: approval-pop 520ms cubic-bezier(.16,1,.3,1) both; }
.approval-badge svg { width: 37px; height: 37px; stroke-width: 3; }
.payment-dialog.payment-approved #dialogTitle { margin: 0; font: 800 clamp(29px, 7vw, 38px)/1.1 "Space Grotesk", sans-serif; letter-spacing: -1.7px; }
.payment-dialog.payment-approved #studentHelp { max-width: 405px; margin: 13px auto 0; color: #9aa59e; font-size: 13px; }
.payment-dialog.payment-approved #studentLink { min-height: 56px; margin-top: 28px; border-radius: 15px; background: #b7ff2a; color: #071000; font-size: 13px; box-shadow: 0 14px 32px rgb(183 255 42 / 18%); }
.payment-dialog.payment-approved .privacy { display: none; }
.approval-support { display: flex; flex-direction: column; gap: 7px; margin-top: 20px; padding-top: 19px; border-top: 1px solid rgb(255 255 255 / 8%); font-size: 12px; line-height: 1.5; }
.approval-support span { color: #7d8981; }
.approval-support a { color: #f4c417; font-weight: 700; text-decoration: none; }
.approval-support a:hover { text-decoration: underline; }
@keyframes approval-pop { from { opacity: 0; transform: scale(.62); } to { opacity: 1; transform: scale(1); } }
@media (max-width: 480px) { .payment-dialog.payment-approved .dialog-shell { padding: 30px 22px; } .payment-dialog.payment-approved .dialog-close { top: 12px; right: 12px; width: 38px; height: 38px; } }