:root {
  --card: #FFFFFF;
  --gumroad-bg: #F4F4F0;
  --green: #00C853;
  --green-hover: #00B248;
  --dark: #0B0B0B;
  --light-bg: #F4F6F3;
  --border: #DCDCDC;
  --text: #121212;
  --muted: #555555;
}

/* Gumroad's checkout follows the visitor's light/dark setting and can't be forced light,
   so the page follows it too. Dark values match Gumroad's dark checkout (rgb 36,36,35). */
@media (prefers-color-scheme: dark) {
  :root {
    --card: #242423;
    --gumroad-bg: #242423;
    --light-bg: #161615;
    --border: #3A3A38;
    --text: #F2F2F0;
    --muted: #A8A8A3;
  }
}

* { box-sizing: border-box; }

html { -webkit-font-smoothing: antialiased; }

body {
  margin: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  font-family: 'Figtree', system-ui, sans-serif;
  color: var(--text);
  background: var(--light-bg);
}

.container { width: 100%; max-width: 1120px; margin-inline: auto; padding-inline: 1.25rem; }

/* Header */
.site-header { background: var(--green); }
.site-header .container { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 0.9rem; }
.logo { text-decoration: none; display: flex; flex-direction: column; line-height: 0.9; }
.logo-main { font-size: 1.6rem; font-weight: 900; letter-spacing: -0.02em; color: white; text-transform: uppercase; }
.logo-main span { color: var(--dark); }
.logo-sub { font-size: 0.6rem; font-weight: 900; color: rgba(255,255,255,0.8); text-transform: uppercase; }
.secure { display: inline-flex; align-items: center; gap: 0.4rem; color: white; font-size: 0.8125rem; font-weight: 700; }
.secure svg { width: 16px; height: 16px; }

main { flex: 1; }

/* Checkout layout: product card + a fixed-height payment box (like the old popup).
   Gumroad's form scrolls inside the box instead of stretching the page. */
.checkout { display: grid; grid-template-columns: 1fr; gap: 1rem; padding-block: 1rem 2rem; }
@media (min-width: 1040px) {
  .checkout { grid-template-columns: 20rem 640px; justify-content: center; gap: 2rem; padding-block: 2rem 2.5rem; align-items: start; }
}
@media (min-width: 700px) and (max-width: 1039px) { .payment { max-width: 640px; width: 100%; margin-inline: auto; } }

.product { background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 1rem; }
.product-top { display: flex; gap: 0.875rem; align-items: center; }
.product img { width: 64px; height: auto; border-radius: 8px; flex-shrink: 0; }
.product h1 { margin: 0 0 0.25rem; font-size: 1rem; line-height: 1.3; font-weight: 800; }
.eyebrow { margin: 0 0 0.25rem; font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.price { margin: 0; font-size: 1.25rem; font-weight: 900; color: var(--green-hover); }
.summary, .trust { display: none; }
@media (min-width: 1040px) {
  .product { padding: 1.25rem; }
  .product-top { flex-direction: column; align-items: stretch; }
  .product img { width: 100%; max-height: 18rem; object-fit: contain; background: var(--light-bg); }
  .product h1 { font-size: 1.2rem; }
  .price { font-size: 1.5rem; }
  .summary { display: block; margin: 1rem 0 0; font-size: 0.875rem; line-height: 1.55; color: var(--muted); }
  .trust { display: grid; list-style: none; margin: 1.25rem 0 0; padding: 1rem 0 0; border-top: 1px solid var(--border); gap: 0.6rem; }
  .trust li { display: flex; gap: 0.5rem; align-items: flex-start; font-size: 0.8125rem; color: var(--muted); }
  .trust svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--green); margin-top: 1px; }
}

/* Fixed-height box that fits the screen (header is ~60px) */
.payment {
  --box-h: clamp(480px, calc(100dvh - 60px - 4rem), 860px);
  container-type: inline-size;
  position: relative; height: var(--box-h); background: var(--gumroad-bg); border-radius: 16px; overflow: hidden;
  box-shadow: 0 12px 40px rgba(0,0,0,0.10);
}
@media (max-width: 1039px) { .payment { --box-h: clamp(460px, calc(100dvh - 60px - 7rem), 820px); } }

/* Hidden parts of Gumroad's form. Only cuts that measured the same on every product:
   - top 48px: the "Checkout" title (title 16-48px, product box starts at 64px)
   - bottom 80px: "Continue shopping" (always the last 96px, below the reCAPTCHA note)
   - when the form is 640px+ wide, also the product box + gift toggle: it ends at 281-285px
     and the totals start at 305px or later, so cutting at 289px never touches the totals. */
.payment iframe {
  --crop-top: 48px;
  --crop-bottom: 80px;
  display: block; width: 100%; border: 0;
  height: calc(var(--box-h) + var(--crop-top) + var(--crop-bottom));
  margin-top: calc(var(--crop-top) * -1);
}
@container (min-width: 640px) { .payment iframe { --crop-top: 289px; } }
.loader { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.75rem; background: var(--gumroad-bg); z-index: 2; transition: opacity 0.2s; }
.loader.done { opacity: 0; pointer-events: none; }
.spinner { width: 32px; height: 32px; border: 3px solid #E5E5E5; border-top-color: var(--green); border-radius: 50%; animation: spin 0.6s linear infinite; }
.loader span { font-size: 0.8125rem; color: #888; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Message pages (thank you, not found, home) */
.message { max-width: 36rem; margin: 3rem auto 4rem; background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 2.5rem 1.5rem; text-align: center; }
.message .icon { width: 64px; height: 64px; margin: 0 auto 1.5rem; border-radius: 50%; background: var(--green); color: white; display: flex; align-items: center; justify-content: center; }
.message .icon.muted { background: var(--light-bg); color: var(--muted); }
.message .icon svg { width: 32px; height: 32px; }
.message h1 { margin: 0 0 0.75rem; font-size: 1.75rem; font-weight: 900; line-height: 1.15; }
.message p { margin: 0 0 1rem; color: var(--muted); line-height: 1.6; }
.steps { text-align: left; background: var(--light-bg); border-radius: 12px; padding: 1.25rem; margin: 1.5rem 0; display: grid; gap: 0.9rem; }
.steps div { display: flex; gap: 0.75rem; }
.steps b { flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; background: var(--green); color: white; font-size: 0.8125rem; display: flex; align-items: center; justify-content: center; }
.steps p { margin: 0; font-size: 0.875rem; color: var(--text); }
.steps p small { display: block; color: var(--muted); font-size: 0.8125rem; margin-top: 0.15rem; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.85rem 1.5rem; background: var(--green); color: white; font-weight: 800; font-size: 0.9375rem; border-radius: 10px; text-decoration: none; }
.btn:hover { background: var(--green-hover); }
a.inline { color: var(--green-hover); font-weight: 700; }

.site-footer { padding: 1.5rem 0; font-size: 0.75rem; color: #8C8C8C; text-align: center; }
.site-footer a { color: inherit; }