:root { color-scheme: light; }
* { box-sizing: border-box; margin: 0; }
body { min-width: 320px; background: #f8f5f1; color: #3d3429; font-family: Inter, system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
.page { width: min(100%, 480px); min-height: 100dvh; margin: 0 auto; padding: 24px 18px 16px; display: flex; flex-direction: column; gap: 12px; position: relative; }
.top-accent { height: 6px; position: absolute; inset: 0 0 auto; background: linear-gradient(90deg, #e8e0f0, #d4c8e8); }
.hero { padding-top: 5px; text-align: center; }
h1 { margin-bottom: 8px; color: #3d3429; font: 700 clamp(1.45rem, 5.2vw, 1.7rem)/1.2 Nunito, sans-serif; }
.sub { max-width: 350px; margin: 0 auto 14px; color: #5c5248; font-size: clamp(.8rem, 3.1vw, .9rem); line-height: 1.4; }
.button { display: inline-block; padding: 12px 24px; border-radius: 999px; background: #c4b5a8; box-shadow: 0 4px 14px rgb(196 181 168 / .45); color: white; font-size: .94rem; font-weight: 600; text-decoration: none; transition: transform .2s ease, background .2s ease, box-shadow .2s ease; }
.button:hover, .button:focus-visible { background: #b8a99a; box-shadow: 0 6px 18px rgb(196 181 168 / .55); transform: translateY(-1px); outline: none; }
.button:focus-visible { outline: 3px solid #3d3429; outline-offset: 3px; }
.money-card { padding: 11px 14px; border-radius: 16px; background: #e8e0f0; text-align: center; }
.big { font: 700 clamp(1.2rem, 4.8vw, 1.5rem)/1.2 Nunito, sans-serif; }
.tiny, .terms, footer { color: #6b5f54; font-size: .69rem; line-height: 1.35; }
.tiny { margin-top: 3px; }
.social-proof { display: flex; align-items: center; justify-content: center; gap: 8px; color: #6b5f54; font-size: .72rem; line-height: 1.3; text-align: left; }
.avatars { display: flex; flex: none; }
.avatars img { width: 26px; height: 26px; margin-left: -7px; overflow: hidden; border: 2px solid #f8f5f1; border-radius: 50%; background: #d4c8e8; object-fit: cover; }
.avatars img:first-child { margin-left: 0; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; text-align: center; }
.step { min-height: 75px; padding: 8px 4px; border-radius: 12px; background: rgb(232 224 240 / .45); color: #4a3f35; font-size: .68rem; line-height: 1.25; }
.step strong { display: block; margin-bottom: 2px; color: #c4b5a8; font-size: .85rem; }
.why ul { list-style: none; padding: 0; color: #4a3f35; font-size: .72rem; line-height: 1.35; }.why li { position: relative; padding-left: 14px; margin-bottom: 4px; }.why li::before { content: '•'; position: absolute; left: 0; color: #c4b5a8; font-weight: 700; }
.terms { padding: 0 4px; text-align: center; }.final-cta { text-align: center; } footer { padding: 2px 0; color: #8a7e72; font-size: .62rem; text-align: center; }
footer a { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
footer a:hover, footer a:focus-visible { color: #5c5248; }
@media (min-height: 760px) { .page { justify-content: space-between; } }
@media (max-height: 680px) { .page { gap: 7px; padding-top: 18px; }.sub { margin-bottom: 8px; font-size: .76rem; }.button { padding: 10px 21px; font-size: .87rem; }.money-card { padding: 8px 10px; }.step { min-height: 66px; font-size: .63rem; }.why ul { font-size: .67rem; }.terms { font-size: .61rem; } }
@media (min-width: 768px) {
  .page { width: min(100%, 1120px); min-height: 100vh; padding: 64px 48px 34px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: center; gap: 28px 40px; }
  .hero, .steps, .final-cta, footer { grid-column: 1 / -1; }
  .hero { max-width: 760px; margin: 0 auto; }
  h1 { margin-bottom: 12px; font-size: clamp(2.1rem, 3.5vw, 3.05rem); }
  .sub { max-width: 650px; margin-bottom: 20px; font-size: 1.05rem; }
  .button { padding: 14px 30px; font-size: 1rem; }
  .money-card { padding: 23px 24px; display: grid; place-content: center; min-height: 124px; }
  .big { font-size: clamp(1.45rem, 2.2vw, 1.9rem); }
  .tiny { font-size: .82rem; }
  .social-proof { justify-content: flex-start; padding: 20px 8px; font-size: .93rem; }
  .avatars img { width: 34px; height: 34px; margin-left: -9px; }
  .steps { gap: 16px; }
  .step { min-height: 112px; padding: 15px 12px; font-size: .9rem; }
  .step strong { margin-bottom: 6px; font-size: 1.15rem; }
  .why { align-self: center; }
  .why ul { font-size: .93rem; line-height: 1.48; }
  .why li { padding-left: 18px; margin-bottom: 7px; }
  .terms { align-self: center; padding: 16px 22px; border-left: 3px solid #d4c8e8; font-size: .84rem; text-align: left; }
  .final-cta { padding-top: 4px; }
  footer { padding-top: 3px; font-size: .72rem; }
}