/* Design A — lendwyseoffer.com: editorial. Deep green, yellow banner, Source Serif headlines, centered column. */
:root { --font-serif: 'Source Serif 4', Georgia, serif; }

.banner { margin: 0; padding: 10px 16px; text-align: center; font-size: 14px; color: var(--ink); background: var(--yellow); }

.hero { color: #fff; padding-bottom: 44px;
  background: radial-gradient(1000px 520px at 50% -12%, #0d5c49 0%, transparent 62%), var(--g-900); }
.top { max-width: 1120px; margin: 0 auto; padding: 22px 24px 0; }
.logo { width: 140px; height: auto; filter: brightness(0) invert(1); }

.stage { max-width: 760px; margin: 0 auto; padding: 52px 24px 40px; }
.card, .facts { max-width: 540px; margin-left: auto; margin-right: auto; }
.pitch { text-align: center; margin-bottom: 30px; }
h1 { margin: 0; font-family: var(--font-serif); font-weight: 600; font-size: clamp(38px, 5vw, 56px); line-height: 1.04; letter-spacing: -.02em; }
h1 em { font-style: italic; font-weight: 500; color: var(--yellow); }
.sub { margin: 16px auto 0; max-width: 440px; font-size: 18px; line-height: 1.5; color: var(--mint); }

.card { color: var(--ink); background: #fffdf8; border-radius: var(--radius-lg); padding: 30px 30px 26px;
  box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 40px 80px -36px rgba(2,20,15,.85); }
.card-title { margin: 0; font-family: var(--font-serif); font-weight: 600; font-size: 26px; letter-spacing: -.01em; line-height: 1.15; }
.card-sub { margin: 6px 0 20px; color: var(--muted); font-size: 15px; }
.lwf legend, .lwf-confirm h2, .lwf-done h2 { font-family: var(--font-serif); font-weight: 600; letter-spacing: -.01em; }
.lwf-code { background: #fff; border-style: dashed; }
.lwf-code:focus { border-style: solid; }

.facts { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 28px; margin-bottom: 0; }
.facts div { text-align: center; padding: 0 8px; }
.facts div + div { border-left: 1px solid rgba(188,220,207,.22); }
.facts dt { font-size: 13px; color: var(--mint-2); margin-bottom: 4px; }
.facts dd { margin: 0; font-family: var(--font-serif); font-weight: 600; font-size: 26px; color: #fff; font-variant-numeric: tabular-nums; }
.facts small { font-family: var(--font-ui); font-size: 13px; font-weight: 600; color: var(--mint); }

/* After the code: drop the pitch and facts, keep the card. */
body:not([data-screen=gate]) .pitch, body:not([data-screen=gate]) .facts,
body:not([data-screen=gate]) .card-title, body:not([data-screen=gate]) .card-sub { display: none; }
body:not([data-screen=gate]) .stage { padding-top: 32px; }

.trust { max-width: 1120px; margin: 0 auto; padding: 22px 24px 0; border-top: 1px solid rgba(188,220,207,.16); }

@media (max-width: 520px) {
  .banner { font-size: 13px; padding: 9px 14px; }
  .top { padding: 18px 16px 0; }
  .logo { width: 120px; }
  .stage { padding: 30px 16px 30px; }
  h1 { font-size: 36px; }
  .sub { font-size: 16.5px; }
  .card { padding: 22px 18px 22px; border-radius: 14px; }
  .card-title { font-size: 23px; }
  .facts dd { font-size: 20px; }
  .facts dt { font-size: 11.5px; }
  .facts div { padding: 0 4px; }
  .trust { padding: 20px 16px 0; }
}