/* The prize draw page (0099). The grand prize is set in type on black: Apple allows its product in
   a promotion only as a real photo, so there is no drawn phone (owner, 19 Oct 2026). */
.draw-hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
.draw-hero h1 span { color: var(--accent-text); }
.draw-state { padding: 12px 16px; border-radius: 14px; background: var(--accent-wash, var(--chip-accent)); color: var(--accent-text); font-weight: 600; font-size: .95rem; max-width: 52ch; }
.draw-small { font-size: .82rem; color: var(--ink-2); margin-top: 14px; }
.btn.is-disabled { opacity: .45; pointer-events: none; }

.draw-prizes { display: grid; gap: 14px; }
.draw-prize { display: flex; gap: 18px; align-items: center; padding: 22px; border-radius: 26px; background: var(--surface); box-shadow: 0 0 0 1px var(--hairline), 0 30px 60px -44px rgba(27,63,140,.45); }
.draw-prize--main { flex-direction: column; text-align: center; padding: 34px 24px 30px; color: #F5F5F7;
  background: radial-gradient(80% 60% at 50% 0%, rgba(255,255,255,.13), transparent 70%), #000; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 30px 60px -40px rgba(0,0,0,.8); }
.draw-prize.draw-prize--main h2 { color: #F5F5F7; }
.draw-prize.draw-prize--main p { color: #A1A1A6; }
.draw-prize.draw-prize--main p.draw-kicker { color: #86868B; }
.draw-prize h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); letter-spacing: -.035em; margin: 2px 0 4px; }
.draw-prize h3 { font-size: 1.15rem; margin: 2px 0; }
.draw-prize p { margin: 0; color: var(--ink-2); font-size: .9rem; }
.draw-prize p.draw-kicker { font-size: .72rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-text); }
.draw-big { display: block; font-size: clamp(6rem, 12vw, 8.5rem); font-weight: 800; line-height: .9; letter-spacing: -.06em;
  background: linear-gradient(172deg, #FFFFFF 8%, #CDCED3 42%, #7F8086 68%, #DEDFE3 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.draw-card { flex: none; width: 92px; height: 60px; border-radius: 12px; display: grid; place-items: center; font-weight: 820; font-size: 1.3rem; color: #1D1D1F;
  background: linear-gradient(135deg, #FBFBFD 0%, #D3D4D9 40%, #F3F3F6 60%, #AEAFB5 100%); box-shadow: 0 16px 28px -16px rgba(0,0,0,.6), inset 0 1px 0 #fff, inset 0 0 0 1px rgba(0,0,0,.06); }

.draw-steps { list-style: none; padding: 0; margin: 0; max-width: none; width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.draw-steps li { padding: 26px; border-radius: 24px; background: var(--surface); box-shadow: 0 0 0 1px var(--hairline); }
.draw-steps span { font-weight: 800; color: var(--accent-text); font-size: .85rem; letter-spacing: .06em; }
.draw-steps h3 { margin: 10px 0 8px; font-size: 1.2rem; }
.draw-steps p { margin: 0; color: var(--ink-2); font-size: .92rem; line-height: 1.6; }
.draw-free { margin-top: 18px; padding: 26px; border-radius: 24px; background: var(--surface); box-shadow: 0 0 0 1px var(--hairline); display: grid; gap: 8px; justify-items: start; }
.draw-free h3, .draw-free p { margin: 0; } .draw-free p { color: var(--ink-2); max-width: 70ch; }
.draw-note { margin-top: 22px; font-size: .78rem; color: var(--ink-3, var(--ink-2)); max-width: 90ch; }

@media (max-width: 860px) {
  .draw-hero-grid, .draw-steps { grid-template-columns: 1fr; }
}