:root {
  --cyan:#09b7c7;
  --yellow:#ffe500;
  --ink:#111111;
  --red:#f04438;
  --white:#fff;
  --paper:#f8f7ef;
  --shadow:7px 7px 0 var(--ink)
}

* {
  box-sizing:border-box
}

html {
  scroll-behavior:smooth
}

body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:Arial,Helvetica,sans-serif;
  line-height:1.45
}

button,a {
  touch-action:manipulation
}

a {
  color:inherit
}

.container {
  width:min(1180px,calc(100% - 36px));
  margin:auto
}

h1,h2,h3,p {
  margin-top:0
}

h1,h2,h3,.display,.pill,.cta,.step-number {
  font-family:Impact,"Arial Black",Arial,sans-serif;
  font-weight:900;
  letter-spacing:.015em
}

h1 {
  font-size:clamp(3.2rem,8vw,7rem);
  line-height:.95;
  text-transform:uppercase
}

h2 {
  font-size:clamp(2.2rem,5vw,4.5rem);
  line-height:1;
  text-transform:uppercase
}

h3 {
  font-size:1.5rem;
  line-height:1.08
}

p {
  font-size:1.04rem
}

.outline {
  border:4px solid var(--ink);
  box-shadow:var(--shadow)
}

.tag {
  display:inline-block;
  background:var(--yellow);
  border:3px solid var(--ink);
  padding:7px 14px;
  font-weight:900;
  text-transform:uppercase;
  transform:rotate(-2deg)
}

.highlight {
  background:var(--yellow);
  box-decoration-break:clone;
  -webkit-box-decoration-break:clone;
  padding:0 .08em
}

.cta {
  display:inline-flex;
  justify-content:center;
  align-items:center;
  gap:12px;
  text-align:center;
  text-decoration:none;
  text-transform:uppercase;
  font-size:1.25rem;
  background:var(--yellow);
  border:4px solid var(--ink);
  box-shadow:6px 6px 0 var(--ink);
  padding:16px 25px;
  transition:transform .15s,box-shadow .15s
}

.cta:hover {
  transform:translate(3px,3px);
  box-shadow:3px 3px 0 var(--ink)
}

.cta:focus-visible,.slider-arrow:focus-visible {
  outline:4px solid var(--red);
  outline-offset:4px
}

.small {
  font-size:.83rem
}

.muted {
  opacity:.75
}

.eyebrow {
  font-size:.85rem;
  text-transform:uppercase;
  font-weight:900;
  letter-spacing:.08em
}

header {
  background:var(--cyan);
  border-bottom:4px solid var(--ink)
}

.nav {
  min-height:90px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px
}

.brand {
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
  font:900 1.65rem Impact,"Arial Black",sans-serif;
  letter-spacing:.02em
}

.brand img {
  width:68px;
  height:68px;
  object-fit:cover;
  border:3px solid var(--ink);
  border-radius:12px
}

.nav-links {
  display:flex;
  align-items:center;
  gap:22px;
  font-weight:900
}

.nav-links a {
  text-decoration:none
}

.nav-links .cta {
  font-size:.95rem;
  padding:9px 15px;
  box-shadow:4px 4px 0 var(--ink)
}

.hero {
  background:var(--cyan);
  position:relative;
  overflow:hidden;
  padding:55px 0 75px
}

.hero:before {
  content:"";
  position:absolute;
  inset:0;
  background-image:radial-gradient(#1112 1.4px,transparent 1.4px);
  background-size:20px 20px;
  opacity:.3;
  pointer-events:none
}

.hero-grid {
  position:relative;
  display:grid;
  grid-template-columns:1.15fr .85fr;
  align-items:center;
  gap:40px
}

.hero p {
  font-size:1.3rem;
  font-weight:700;
  max-width:600px
}

.hero .actions {
  display:flex;
  flex-wrap:wrap;
  gap:18px;
  align-items:center;
  margin-top:28px
}

.hero-art {
  position:relative
}

.hero-art img {
  display:block;
  width:100%;
  border:5px solid var(--ink);
  box-shadow:11px 11px 0 var(--ink);
  border-radius:18px
}

.sticker {
  position:absolute;
  right:-12px;
  top:-24px;
  background:var(--red);
  color:white;
  border:4px solid var(--ink);
  border-radius:50%;
  width:135px;
  height:135px;
  display:grid;
  place-items:center;
  text-align:center;
  font:900 1.35rem Impact,"Arial Black",sans-serif;
  transform:rotate(13deg);
  text-shadow:2px 2px var(--ink)
}

.trust {
  background:var(--ink);
  color:white;
  padding:18px 0
}

.trust .container {
  display:flex;
  gap:16px 30px;
  justify-content:center;
  flex-wrap:wrap;
  font-weight:900;
  text-transform:uppercase
}

.trust b {
  color:var(--yellow)
}

section {
  padding:85px 0
}

.section-heading {
  text-align:center;
  max-width:850px;
  margin:0 auto 40px
}

.section-heading p {
  font-size:1.15rem
}

.steps {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px
}

.step {
  background:white;
  border:4px solid var(--ink);
  box-shadow:6px 6px 0 var(--ink);
  padding:24px 18px;
  position:relative
}

.step:nth-child(2) {
  background:#fff4ad
}

.step:nth-child(3) {
  background:#d3fbff
}

.step:nth-child(4) {
  background:#e5f9d6
}

.step-number {
  width:53px;
  height:53px;
  border:3px solid var(--ink);
  background:var(--red);
  color:white;
  display:grid;
  place-items:center;
  border-radius:50%;
  font-size:2rem;
  margin-bottom:18px
}

.step p {
  margin-bottom:0
}

.steps .step:not(:last-child):after {
  content:"➜";
  position:absolute;
  right:-24px;
  top:46%;
  z-index:2;
  font-size:2.3rem;
  color:var(--ink);
  text-shadow:2px 2px var(--yellow)
}

.blue {
  background:var(--cyan)
}

.premium {
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:30px;
  align-items:start
}

.price-card {
  background:var(--yellow);
  padding:28px;
  border:5px solid var(--ink);
  box-shadow:10px 10px 0 var(--ink);
  text-align:center;
  transform:rotate(-1deg)
}

.price {
  font:900 clamp(5rem,10vw,8rem)/1 Impact,"Arial Black",sans-serif
}

.price-card .cta {
  background:white;
  width:100%
}

.features {
  background:white;
  border:4px solid var(--ink);
  box-shadow:8px 8px 0 var(--ink);
  padding:30px
}

.feature-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:15px 22px
}

.feature {
  display:flex;
  align-items:flex-start;
  gap:11px;
  font-size:1rem;
  font-weight:700
}

.check {
  flex:none;
  display:grid;
  place-items:center;
  width:27px;
  height:27px;
  background:#7ef257;
  border:2px solid var(--ink);
  font-weight:900
}

.note {
  margin-top:25px;
  padding:12px 15px;
  background:#f1f1ed;
  border-left:5px solid var(--ink);
  font-size:.88rem
}

.math {
  background:var(--ink);
  color:white
}

.math h2 {
  color:var(--yellow)
}

.math-cards {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px
}

.math-card {
  background:white;
  color:var(--ink);
  border:4px solid var(--ink);
  box-shadow:6px 6px 0 var(--yellow);
  padding:25px;
  text-align:center
}

.math-card .earn {
  font:900 clamp(2.6rem,5vw,4rem) Impact,"Arial Black",sans-serif;
  color:#057c89
}

.math-card p {
  margin-bottom:0
}

.math .disclaimer {
  max-width:850px;
  margin:30px auto 0;
  text-align:center;
  color:#e2e2e2;
  font-size:.86rem
}

.visual {
  background:#e9fcff
}

.visual img {
  width:100%;
  height:auto;
  display:block;
  border:5px solid var(--ink);
  box-shadow:10px 10px 0 var(--ink)
}

.visual .container {
  display:grid;
  gap:22px
}

.visual p {
  text-align:center
}

.visual .caption {
  font-size:.82rem
}

.testimonials {
  background:var(--yellow)
}

.slider-shell {
  max-width:880px;
  margin:auto;
  display:flex;
  align-items:center;
  gap:20px
}

.slider-arrow {
  flex:none;
  width:66px;
  height:66px;
  background:var(--yellow);
  border:4px solid var(--ink);
  box-shadow:4px 4px 0 var(--ink);
  font:900 2.5rem Arial,sans-serif;
  cursor:pointer
}

.slider-arrow:hover {
  background:white
}

.quote-card {
  background:white;
  border:5px solid var(--ink);
  box-shadow:9px 9px 0 var(--ink);
  padding:30px;
  flex:1;
  min-height:280px
}

.quote-top {
  display:flex;
  align-items:center;
  gap:16px
}

.avatar {
  object-fit: cover;
  width:82px;
  height:82px;
  border:3px solid var(--ink);
  border-radius:50%;
  background:var(--cyan);
  flex:none
}

.quote-text {
  font-size:1.35rem;
  font-weight:800;
  margin:22px 0
}

.quote-name {
  font-weight:900
}

.dots {
  display:flex;
  justify-content:center;
  gap:10px;
  margin-top:25px
}

.dot {
  height:12px;
  width:12px;
  border-radius:50%;
  background:#1114;
  border:2px solid var(--ink)
}

.dot.active {
  background:var(--red)
}

.sample-flag {
  display:inline-block;
  background:var(--red);
  color:white;
  padding:5px 10px;
  border:2px solid var(--ink);
  font-size:.72rem;
  font-weight:900;
  letter-spacing:.05em
}

.faq-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px
}

details {
  background:white;
  border:3px solid var(--ink);
  padding:20px
}

summary {
  font-weight:900;
  font-size:1.1rem;
  cursor:pointer
}

details p {
  margin:14px 0 0
}

.final-cta {
  background:var(--cyan);
  text-align:center
}

.final-cta .container {
  max-width:900px
}

.final-cta p {
  font-size:1.3rem;
  font-weight:700
}

footer {
  background:var(--ink);
  color:white;
  padding:30px 0
}

footer .container {
  display:flex;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap
}

footer a {
  color:var(--yellow)
}

@media(max-width:900px) {
  .hero-grid,.premium {
    grid-template-columns:1fr
  }
  .hero-art {
    max-width:580px;
    margin:auto
  }
  .steps {
    grid-template-columns:repeat(2,1fr)
  }
  .steps .step:after {
    display:none
  }
  .math-cards {
    grid-template-columns:1fr
  }
  .nav-links a:not(.cta) {
    display:none
  }
}

@media(max-width:600px) {
  section {
    padding:55px 0
  }
  .nav {
    min-height:75px
  }
  .brand {
    font-size:1.2rem
  }
  .brand img {
    width:50px;
    height:50px
  }
  .nav-links .cta {
    font-size:.76rem;
    padding:8px
  }
  .hero {
    padding:38px 0 55px
  }
  .hero p {
    font-size:1.05rem
  }
  .steps,.feature-grid,.faq-grid {
    grid-template-columns:1fr
  }
  .sticker {
    width:100px;
    height:100px;
    font-size:1rem
  }
  .slider-shell {
    gap:6px
  }
  .slider-arrow {
    width:39px;
    height:50px;
    font-size:1.7rem;
    box-shadow:none
  }
  .quote-card {
    padding:16px;
    min-height:360px
  }
  .quote-text {
    font-size:1.1rem
  }
  .avatar {
    width:60px;
    height:60px
  }
  .price-card {
    transform:none
  }
  .cta {
    font-size:1.05rem
  }
}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  * {
    transition:none!important
  }
}

/* Section-specific text treatments. */
.hero-disclaimer { margin-top: 24px; }
.price-disclaimer { margin: 20px 0 0; }
.earnings-emphasis { color: var(--white); }
.final-disclaimer { margin-top: 22px; }
.quote-top { margin-top: 16px; }