/* drawrabbit.com/start (20 Oct 2026): DrawRabbit Pro bought on the website. Built on the gift page's styles
   (web/gift/gift.css: the type scale, sections, testimonials, plans and payment), so the two read as one brand; only
   what's new here is below. */

/* ── the opening screen: what it is, shown with a lesson playing, and the one button ── */
.sHero { position: relative; padding: calc(max(16px, env(safe-area-inset-top)) + 52px) 24px 44px; overflow: hidden;
  background: radial-gradient(120% 70% at 50% 30%, #1D3354 0%, #112139 55%, var(--night) 100%) }
.sBrand { position: absolute; left: max(16px, env(safe-area-inset-left)); top: max(17px, calc(env(safe-area-inset-top) + 5px)); display: flex; align-items: center; gap: 8px }
.sBrand img { width: 28px; height: 28px; border-radius: 7px; box-shadow: 0 2px 10px rgba(0, 0, 0, .4), 0 0 0 1px rgba(255, 255, 255, .12) }
.sBrand span { font: 800 17px var(--f-app); color: var(--ink-l); letter-spacing: -.01em }
.sHeroIn { display: grid; justify-items: center; gap: 14px; text-align: center }
.sTitle { font: 900 calc(var(--t-h2) + 4px)/1.08 var(--f-disp); letter-spacing: -.01em; margin: 0; color: var(--ink-l); text-wrap: balance }
.sTitle em { font-style: normal; color: var(--blueL) }
.sLead { max-width: 340px }
.sHero .sheetWrap { margin-top: 10px }
.sCta { margin-top: 16px; width: min(340px, 100%); height: 56px; border: 0; border-radius: 16px; cursor: pointer;
  font: 800 17px var(--f-app); letter-spacing: .02em; color: #FFFFFF; background: linear-gradient(180deg, #5A93D6, var(--blue) 55%, #3670B5);
  box-shadow: 0 5px 0 var(--blueDk), 0 14px 30px -8px rgba(62, 123, 196, .55); transition: transform .12s, box-shadow .12s }
.sCta:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--blueDk) }
.sCta:focus-visible { outline: 2px solid var(--blueL); outline-offset: 4px }

/* ── what's in it: four points, then what people say ── */
.sWhy { padding-top: 48px }
.sPoints { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 18px; width: min(340px, 86vw); text-align: left }
.sPoints li { display: grid; grid-template-columns: 40px 1fr; gap: 14px; align-items: start }
.sPoints svg { width: 40px; height: 40px; padding: 9px; border-radius: 12px; background: rgba(143, 189, 242, .12); fill: none; stroke: var(--blueL); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round }
.sPoints b { display: block; font: 800 var(--t-body)/1.3 var(--f-disp); color: var(--ink-l); margin-top: 1px }
.sPoints span { display: block; margin-top: 3px; font: 400 var(--t-cap)/1.5 var(--f-body); color: var(--mute-l) }
.sWhy .says { margin-top: 26px }
@media (min-width: 700px) { .sPoints { width: 460px } }

/* ── after paying ── */
.sDone { display: grid; gap: 14px; justify-items: center; text-align: center; padding: 6px 0 4px; outline: none }
.sDone[hidden] { display: none }
.sCode { display: flex; align-items: center; gap: 10px; padding: 14px 14px 14px 20px; border-radius: 14px; border: 1px solid rgba(143, 189, 242, .35); background: rgba(62, 123, 196, .10) }
.sCode span { font: 700 26px/1 ui-monospace, Menlo, monospace; letter-spacing: .12em; color: var(--ink-l); min-width: 9.5ch }
.sCode button { border: 1px solid rgba(255, 255, 255, .22); background: transparent; border-radius: 10px; padding: 8px 12px; font: 600 13px var(--f-body); color: var(--ink-l); cursor: pointer }
.sCode.waiting span { opacity: .35 }
.sWait { font-size: var(--t-cap) }
.sSteps { margin: 6px 0 0; padding: 0; list-style: none; counter-reset: s; display: grid; gap: 14px; width: 100%; text-align: left }
.sSteps li { counter-increment: s; position: relative; padding-left: 38px; font: 400 var(--t-body)/1.5 var(--f-body); color: var(--mute-l) }
.sSteps li::before { content: counter(s); position: absolute; left: 0; top: 0; width: 26px; height: 26px; border-radius: 13px; background: rgba(143, 189, 242, .16); color: var(--blueL); font: 800 13px/26px var(--f-app); text-align: center }
.sSteps b { color: var(--ink-l); font-weight: 600 }
.sStore { margin-top: 10px; color: #FFFFFF; font: 800 15px var(--f-app); letter-spacing: .06em; background: linear-gradient(180deg, #5A93D6, var(--blue) 55%, #3670B5); box-shadow: 0 4px 0 var(--blueDk) }
#give.paid .plans, #give.paid #offer, #give.paid > .fine, #give.paid > .p, #give.paid > .h2, #give.paid > .sec-eyebrow { display: none }

/* ── drawrabbit.com/buy (20 Oct 2026): the plans on their own, under the mark ── */
.bTop { padding: max(17px, calc(env(safe-area-inset-top) + 5px)) max(16px, env(safe-area-inset-left)) 0 }
.bTop .sBrand { position: static; text-decoration: none; color: inherit; display: inline-flex }
[data-page="buy"] #give { border-top: 0; padding-top: 28px }