/* ROBLOXPAD landing */
.hero { padding: 34px 0 20px; position: relative }
.hgrid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 24px; align-items: center }
.htext { display: grid; gap: 22px; justify-items: start }
.pill { font-size: 15px; min-height: 36px; padding: 0 16px }
#h1 { display: grid; gap: 6px; margin: 0 }
#h1 .h1a { font-size: clamp(60px, 10.5vw, 132px); line-height: .9; letter-spacing: -.035em; color: var(--ink); padding-right: .12em; padding-bottom: .06em; text-shadow: 4px 5px 0 var(--mint); display: inline-block }
#h1 .h1b { font-size: clamp(30px, 4.2vw, 52px); line-height: 1.05; letter-spacing: -.01em; padding-bottom: .1em }
#h1 em { font-style: normal; background: linear-gradient(transparent 62%, var(--mint) 62%, var(--mint) 92%, transparent 92%); padding: 0 .08em; box-decoration-break: clone; -webkit-box-decoration-break: clone }
.three { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; max-width: 540px }
.three li { display: flex; align-items: flex-start; gap: 14px; font-size: 19px; font-weight: 700; line-height: 1.35 }
.three .n { flex: none; width: 36px; height: 36px; border: 3px solid var(--ink); border-radius: 12px; background: var(--mint); display: inline-flex; align-items: center; justify-content: center; font: 700 19px/1 var(--display); box-shadow: 0 3px 0 var(--ink) }
.ctas { gap: 16px }
.fine { font-size: 15px; font-weight: 700; color: var(--ink2); max-width: 520px }

/* hero art */
.hart { position: relative; aspect-ratio: 1 / 1; max-width: 560px; width: 100%; justify-self: center }
.hart .blob { position: absolute; inset: 7% 6% 5%; border: var(--line); border-radius: 46% 54% 52% 48% / 52% 46% 54% 48%; background: var(--mintl); box-shadow: var(--sh2); animation: morph 9s ease-in-out infinite }
@keyframes morph { 0%, 100% { border-radius: 46% 54% 52% 48% / 52% 46% 54% 48% } 50% { border-radius: 54% 46% 44% 56% / 46% 56% 44% 54% } }
.hart .cart { position: absolute; inset: 6% 4% 4% 4%; width: 92%; height: 90%; object-fit: contain; animation: cartfloat 4.2s ease-in-out infinite; filter: drop-shadow(0 10px 0 rgba(5, 74, 43, .12)) }
@keyframes cartfloat { 0%, 100% { transform: translateY(0) rotate(-1.5deg) } 50% { transform: translateY(-16px) rotate(1.5deg) } }
.hart .cloud { position: absolute; width: 30%; animation: drift 7s ease-in-out infinite }
.hart .c1 { left: -4%; top: 6% } .hart .c2 { right: -3%; bottom: 14%; width: 26%; animation-delay: -3s }
@keyframes drift { 0%, 100% { transform: translateX(0) } 50% { transform: translateX(14px) } }
.hart .coin { position: absolute; width: 56px; height: 56px; border: var(--line); border-radius: 50%; background: var(--mint); box-shadow: 0 4px 0 var(--ink); display: flex; align-items: center; justify-content: center; font: 700 28px/1 var(--display); animation: bob 3.2s ease-in-out infinite }
.hart .coin b { font-weight: 700 }
.hart .k1 { right: 6%; top: 14% } .hart .k2 { left: 3%; bottom: 20%; width: 44px; height: 44px; font-size: 22px; animation-delay: -1s } .hart .k3 { right: 16%; bottom: 3%; width: 38px; height: 38px; font-size: 19px; animation-delay: -2s }
.hart .spark { position: absolute; width: 34px; animation: twinkle 2.4s ease-in-out infinite } .hart .s1 { left: 12%; top: 30% } .hart .s2 { right: 4%; top: 48%; width: 26px; animation-delay: -1.2s }
@keyframes twinkle { 0%, 100% { transform: scale(1) rotate(0) } 50% { transform: scale(.6) rotate(25deg) } }

/* sections */
.sec { padding: 56px 0 }
.shead { margin-bottom: 30px } .shead h2 { font-size: clamp(34px, 5vw, 54px) } .shead p { margin-top: 10px; font-size: 19px; font-weight: 600; color: var(--ink2); max-width: 620px }

/* steps */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; position: relative; counter-reset: s }
.steps::before { content: ''; position: absolute; left: 12%; right: 12%; top: 76px; border-top: 5px dashed var(--mint2); z-index: 0 }
.step { position: relative; z-index: 1; display: grid; gap: 12px; justify-items: center; text-align: center; padding: 8px 14px 0 }
.step .ico { position: relative; width: 168px; height: 168px; border: var(--line); border-radius: 50%; background: var(--paper); box-shadow: var(--sh); display: flex; align-items: center; justify-content: center; transition: transform .3s cubic-bezier(.3, 1.6, .5, 1) }
.step:hover .ico { transform: scale(1.06) rotate(-3deg) }
.step .ico svg { width: 120px; height: 120px }
.step .num { position: absolute; left: -2px; top: -2px; width: 46px; height: 46px; border: var(--line); border-radius: 50%; background: var(--mint); display: flex; align-items: center; justify-content: center; font: 700 24px/1 var(--display); box-shadow: 0 3px 0 var(--ink) }
.step h3 { font-size: 30px; margin-top: 10px } .step p { font-size: 17.5px; font-weight: 600; color: var(--ink2); max-width: 340px }
@media (max-width: 860px) {
  .steps { grid-template-columns: 1fr; gap: 20px }
  .steps::before { display: none }
  .step { grid-template-columns: 96px 1fr; justify-items: start; text-align: left; align-items: center; gap: 4px 16px; padding: 18px; border: var(--line); border-radius: var(--r); background: var(--paper); box-shadow: var(--sh) }
  .step .ico { width: 96px; height: 96px; grid-row: 1 / 3; box-shadow: none; border-width: 3px } .step .ico svg { width: 66px; height: 66px } .step .num { width: 34px; height: 34px; font-size: 18px }
  .step h3 { font-size: 25px; margin: 0; align-self: end } .step p { font-size: 16px; align-self: start }
}

/* honest */
.honest { display: grid; grid-template-columns: .8fr 1.2fr; gap: 30px; align-items: center; padding: 32px }
.honest h2 { font-size: clamp(30px, 4vw, 44px) }
.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px }
.ticks li { display: flex; gap: 14px; align-items: flex-start; font-weight: 700; font-size: 17.5px; line-height: 1.4 }
.tk { flex: none; width: 30px; height: 30px; border: 3px solid var(--ink); border-radius: 10px; background: var(--mint); position: relative; margin-top: 1px }
.tk::after { content: ''; position: absolute; left: 8px; top: 3px; width: 7px; height: 13px; border: solid var(--ink); border-width: 0 3.5px 3.5px 0; transform: rotate(45deg) }
@media (max-width: 860px) { .honest { grid-template-columns: 1fr; padding: 22px } }

/* final band */
.cta { padding-top: 24px }
.band { display: flex; align-items: center; gap: 22px; padding: 28px 32px; border: var(--line); border-radius: 30px; background: var(--mint); box-shadow: var(--sh2) }
.band img { flex: none; width: 84px; height: 84px; object-fit: contain; animation: bob 3.4s ease-in-out infinite }
.band h2 { font-size: clamp(28px, 3.6vw, 42px) } .band p { margin-top: 6px; font-weight: 700; font-size: 18px }
.band .btn { margin-left: auto; flex: none }
@media (max-width: 760px) { .band { flex-direction: column; text-align: center; padding: 24px 20px } .band .btn { margin: 0; width: 100% } }

/* phone: hero is its own layout (art first and smaller, big buttons) */
@media (max-width: 900px) {
  .hgrid { grid-template-columns: 1fr; gap: 6px }
  .hart { order: -1; max-width: 300px; margin-bottom: -6px }
  .htext { justify-items: stretch }
  .htext .pill { justify-self: start }
  .three li { font-size: 17.5px }
  .ctas .btn { flex: 1 1 100% }
  #h1 .h1a { font-size: clamp(56px, 17vw, 96px) }
}

/* ---------- RobloxPad additions ---------- */
.lead { font-size: 21px; font-weight: 700; line-height: 1.4; max-width: 540px; color: var(--ink2) }
.hart .coin { background: transparent; border: 0; box-shadow: none; padding: 0 } .hart .coin svg { width: 100%; height: 100% }
.hart .k1 { width: 64px; height: 64px } .hart .k2 { width: 48px; height: 48px } .hart .k3 { width: 42px; height: 42px }
.split2 { display: grid; grid-template-columns: 1fr 1fr; gap: 22px }
.feecard { display: grid; gap: 8px; padding: 28px } .feecard .pct { font: 700 clamp(60px, 9vw, 96px)/.95 var(--display); letter-spacing: -.03em; text-shadow: 3px 4px 0 var(--mint) } .feecard.sunny .pct { text-shadow: 3px 4px 0 var(--sun) }
.feecard.sunny { background: var(--sunl) } .feecard h3 { font-size: 28px } .feecard p { font-weight: 600; color: var(--ink2); font-size: 17.5px }
@media (max-width: 760px) { .split2 { grid-template-columns: 1fr } .lead { font-size: 18px } }
#h1 .h1a { font-size: clamp(48px, 8.4vw, 112px); white-space: nowrap }
@media (max-width: 900px) { #h1 .h1a { font-size: clamp(44px, 14vw, 88px) } }