/* The giveaway page (/claim): one ticket with the visitor's store code. */
body{min-height:100vh;display:flex;flex-direction:column}
.claim-main{flex:1;width:100%;max-width:640px;margin:0 auto;padding:140px var(--gutter) 72px}
.claim-main section{padding:0}

.claim-eyebrow{display:flex;align-items:center;gap:10px;font-family:var(--sans);font-size:15px;font-weight:500;color:var(--ink-2);margin:0}
.claim-eyebrow svg{width:15px;height:15px;fill:var(--gold);flex:0 0 auto}
/* "Christmas came early": the sparkle twinkles */
.claim .claim-eyebrow svg{animation:claim-twinkle 2.6s ease-in-out infinite}
@keyframes claim-twinkle{0%,100%{transform:scale(1) rotate(0);opacity:1}45%{transform:scale(1.35) rotate(45deg);opacity:.75}60%{transform:scale(.9) rotate(60deg);opacity:1}}
.claim h1{font-size:var(--text-title);line-height:var(--text-title-leading);letter-spacing:-.035em;margin-top:22px}
.claim h1 em{font-family:var(--serif);font-style:italic;font-weight:600;color:var(--gold)}
.claim-lead{font-size:var(--text-lede);line-height:var(--text-lede-leading);color:var(--ink-2);max-width:40ch;margin-top:22px}

/* ---------- The ticket ---------- */
/* Two pieces of paper joined at the perforation: the top (the product and
   the live count) and the stub (the code). Getting a code tears the stub
   off along a ragged edge that claim.js draws. The shadow is a filter on the
   whole ticket, so it follows the torn shapes. */
.claim-ticket{position:relative;margin-top:40px;filter:drop-shadow(0 1px 1px rgba(11,11,11,.04)) drop-shadow(0 16px 20px rgba(11,11,11,.09));
  transition:margin-bottom .5s}
html[data-theme="dark"] .claim-ticket{filter:drop-shadow(0 18px 26px rgba(0,0,0,.55))}
.claim-ticket__top,.claim-ticket__stub{position:relative;background:var(--paper,#fff);border:1px solid var(--hair)}
.claim-ticket__top{border-bottom:0;border-radius:28px 28px 0 0;padding:30px 30px 26px}
.claim-ticket__stub{border-top:0;border-radius:0 0 28px 28px;padding:26px 30px 32px}
.claim-ticket__head{display:flex;align-items:center;gap:16px}
.claim-ticket__icon{width:60px;height:60px;border-radius:15px;border:1px solid var(--hair-2);background:#fff;flex:0 0 auto}
.claim-ticket__title{font-size:17px;font-weight:600;color:var(--ink);line-height:1.3;margin:0}
.claim-ticket__sub{font-size:14.5px;color:var(--ink-3);line-height:1.45;margin:3px 0 0}
.claim-ticket__tear{position:absolute;top:-1px;left:-1px;right:-1px;height:0;border-top:2px dashed var(--hair-2);transition:opacity .2s}
.claim-ticket__tear::before,.claim-ticket__tear::after{content:"";position:absolute;top:-12px;width:22px;height:22px;border-radius:50%;background:var(--bg);border:1px solid var(--hair)}
.claim-ticket__tear::before{left:-12px;clip-path:inset(0 0 0 50%)}
.claim-ticket__tear::after{right:-12px;clip-path:inset(0 50% 0 0)}

/* Torn: each piece keeps its side of the ragged edge, and the stub hangs a
   little lower. Ripping tugs, swings and settles. */
.claim-ticket.is-torn{margin-bottom:12px}
.claim-ticket.is-torn .claim-ticket__tear{opacity:0}
.claim-ticket.is-torn .claim-ticket__top{clip-path:var(--tear-top)}
.claim-ticket.is-torn .claim-ticket__stub{clip-path:var(--tear-stub);transform:translateY(12px)}
.claim-ticket.is-ripping .claim-ticket__stub{transform-origin:100% 0;animation:claim-rip .8s cubic-bezier(.22,.8,.3,1) both}
@keyframes claim-rip{
  0%{transform:none}
  14%{transform:translateY(-2px) rotate(.35deg)}
  52%{transform:translateY(20px) rotate(-1.8deg)}
  78%{transform:translateY(10px) rotate(.3deg)}
  100%{transform:translateY(12px)}
}

/* The live count, one row per tier */
/* The phone is picked at the top of the ticket, and only while picking */
.claim-phones{margin-top:24px}
.claim-ticket:not([data-view="pick"]) .claim-phones{display:none}
/* So is the region, when a store's codes come in pools for different
   countries: two quiet pills, the picked one inked, the other faded */
.claim-regions{margin-top:24px}
.claim-ticket:not([data-view="pick"]) .claim-regions{display:none}
.claim-region-list{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.claim-region{position:relative;display:flex;align-items:center;justify-content:center;min-height:50px;padding:10px 8px;border-radius:999px;
  background:var(--hair);color:var(--ink);font-size:14.5px;font-weight:600;text-align:center;white-space:nowrap;cursor:pointer;transition:background-color .2s,color .2s}
.claim-region input{position:absolute;opacity:0;pointer-events:none}
.claim-region:has(input:checked){background:var(--ink);color:var(--bg)}
.claim-region-list:has(input:checked) .claim-region:not(:has(input:checked)){color:var(--ink-3)}
.claim-region:has(input:disabled){cursor:not-allowed;opacity:.45}
.claim-region:has(input:focus-visible){outline:2px solid var(--ink);outline-offset:3px}
.claim-tiers{margin-top:24px}
.claim-tiers[hidden]{display:none}
.claim-tiers__head{display:flex;align-items:baseline;justify-content:space-between;margin:0 0 12px}
.claim-tiers__head .claim-label{margin:0}
.claim-live{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:500;color:var(--ink-3)}
/* The live dot blinks orange, with a ring that grows and fades */
.claim-live::before{content:"";width:7px;height:7px;border-radius:50%;background:#F57C1F;box-shadow:0 0 0 0 rgba(245,124,31,.55);
  animation:claim-live 1.4s ease-in-out infinite}
@keyframes claim-live{
  0%{opacity:1;box-shadow:0 0 0 0 rgba(245,124,31,.55)}
  50%{opacity:.35;box-shadow:0 0 0 5px rgba(245,124,31,0)}
  100%{opacity:1;box-shadow:0 0 0 0 rgba(245,124,31,0)}
}
.claim-tiers__list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.claim-tier{display:grid;grid-template-columns:72px 1fr auto;align-items:center;gap:14px;font-size:15px}
.claim-tier__name{font-weight:600;color:var(--ink)}
.claim-tier__bar{height:6px;border-radius:999px;background:var(--hair);overflow:hidden}
.claim-tier__bar span{display:block;height:100%;border-radius:inherit;background:var(--ink);transition:width .6s ease}
.claim-tier__count{font-size:13.5px;color:var(--ink-3);font-variant-numeric:tabular-nums;white-space:nowrap}
.claim-tier.is-out .claim-tier__name,.claim-tier.is-out .claim-tier__count{color:var(--ink-3)}
.claim-tier.is-out .claim-tier__bar span{background:var(--ink-3)}
.claim-tiers.is-single .claim-tier{grid-template-columns:1fr auto}
.claim-tiers.is-single .claim-tier__name{display:none}

.claim-chose{margin:0 0 18px;padding:12px 16px;border-radius:14px;border:1px solid var(--hair);font-size:15px;line-height:1.5;color:var(--ink-2)}
.claim-chose strong{color:var(--ink);font-weight:600}
.claim-chose[hidden]{display:none}
.claim-heads-up{margin:0 0 18px;padding:12px 16px;border-radius:14px;background:var(--accent-olive-soft);font-size:15px;line-height:1.5;color:var(--ink-2)}
.claim-heads-up strong{color:var(--ink);font-weight:600}
.claim-heads-up[hidden]{display:none}

/* Picking a price: the big price, a slider with one stop per tier, and
   what the price comes with. The fill and the stops line up with the
   thumb's centre, which never leaves the track. */
.claim-price{margin-bottom:28px}
.claim-price[hidden],.claim-perks[hidden]{display:none}
.claim-price__amount{font-size:clamp(44px,10vw,56px);font-weight:600;line-height:1;letter-spacing:-.025em;color:var(--ink);margin:4px 0 0;font-variant-numeric:tabular-nums}
.claim-price__sub{min-height:1.5em;font-size:15px;line-height:1.5;color:var(--ink-3);margin:10px 0 0}
.claim-slider{--thumb:30px;position:relative;margin-top:22px}
.claim-slider input{-webkit-appearance:none;appearance:none;display:block;width:100%;height:var(--thumb);margin:0;background:transparent;cursor:pointer;touch-action:pan-y}
.claim-slider input:focus{outline:none}
.claim-slider input::-webkit-slider-runnable-track{height:8px;border-radius:999px;background:linear-gradient(90deg,var(--ink) 0 var(--fill,0px),var(--hair) var(--fill,0px) 100%)}
.claim-slider input::-moz-range-track{height:8px;border-radius:999px;background:var(--hair)}
.claim-slider input::-moz-range-progress{height:8px;border-radius:999px;background:var(--ink)}
.claim-slider input::-webkit-slider-thumb{-webkit-appearance:none;width:var(--thumb);height:var(--thumb);margin-top:calc((8px - var(--thumb)) / 2);border-radius:50%;
  background:var(--ink);border:5px solid var(--paper,#fff);box-shadow:0 0 0 1.5px var(--ink),0 6px 14px rgba(11,11,11,.18);transition:transform .2s}
.claim-slider input::-moz-range-thumb{box-sizing:border-box;width:var(--thumb);height:var(--thumb);border-radius:50%;
  background:var(--ink);border:5px solid var(--paper,#fff);box-shadow:0 0 0 1.5px var(--ink),0 6px 14px rgba(11,11,11,.18);transition:transform .2s}
.claim-slider input:active::-webkit-slider-thumb{transform:scale(1.08)}
.claim-slider input:active::-moz-range-thumb{transform:scale(1.08)}
.claim-slider input:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 1.5px var(--ink),0 0 0 6px var(--accent-olive-soft),0 0 0 7.5px var(--ink)}
.claim-slider input:focus-visible::-moz-range-thumb{box-shadow:0 0 0 1.5px var(--ink),0 0 0 6px var(--accent-olive-soft),0 0 0 7.5px var(--ink)}
.claim-stops{position:relative;list-style:none;margin:8px 0 0;padding:0;height:38px}
.claim-stops li{position:absolute;top:0;transform:translateX(-50%)}
.claim-stops li:first-child{transform:translateX(calc(var(--thumb) / -2))}
.claim-stops li:last-child{transform:translateX(calc(var(--thumb) / 2 - 100%))}
.claim-stops button{display:grid;gap:1px;padding:2px 0;border:0;background:none;font:inherit;font-size:14px;font-weight:600;color:var(--ink-3);
  font-variant-numeric:tabular-nums;white-space:nowrap;cursor:pointer;transition:color .2s}
.claim-stops li:first-child button{text-align:left}
.claim-stops li:last-child button{text-align:right}
.claim-stops li:not(:first-child):not(:last-child) button{text-align:center}
.claim-stops .is-at button{color:var(--ink)}
.claim-stops .is-out button{color:var(--ink-4,var(--ink-3));opacity:.7}
.claim-stops small{font-size:11.5px;font-weight:500;color:var(--ink-3)}
.claim-perks{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:10px}
.claim-perks li{position:relative;padding-left:32px;font-size:15.5px;line-height:1.45;color:var(--ink-2)}
.claim-perks li::before{content:"✓";position:absolute;left:0;top:0;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;
  background:var(--ink);color:var(--paper,#fff);font-size:12px;font-weight:600;line-height:1}
.claim-perks li.is-thanks{color:var(--ink)}
.claim-perks li.is-thanks::before{content:"✦";background:var(--accent-olive-soft);color:var(--gold);font-size:13px}
.claim-perks li.is-new{animation:claim-arrive .45s cubic-bezier(.2,.8,.3,1) both}

/* The Ultra bonus on the two top prices. On the slider it lands word by
   word, with a shine across "Ultra" and two sparkles in the corner; after
   the scratch it sits under the code. */
.claim-bonus{--bonus:var(--gold);--bonus-text:#5C6436;--bonus-shine:#C9B98A;position:relative;margin-top:18px;padding:18px 20px 18px;border-radius:18px;
  background:var(--accent-olive-soft);border:1px solid color-mix(in srgb,var(--bonus) 38%,transparent);overflow:hidden}
html[data-theme="dark"] .claim-bonus{--bonus:#AEB77E;--bonus-text:#B9C288;--bonus-shine:#E8DBAE}
.claim-bonus[hidden]{display:none}
.claim-bonus__eyebrow{margin:0;font-size:12.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--bonus-text)}
.claim-bonus__title{margin:8px 0 0;font-family:var(--serif);font-size:clamp(28px,6.4vw,34px);line-height:1.08;letter-spacing:-.02em;color:var(--ink);font-weight:600}
.claim-bonus__title .w{display:inline-block}
.claim-ultra{font-style:italic;color:var(--bonus);background:linear-gradient(100deg,var(--bonus) 0 38%,var(--bonus-shine) 50%,var(--bonus) 62% 100%);
  background-size:260% 100%;background-position:0 0;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;padding-right:.08em}
.claim-bonus__line{margin:6px 0 0;font-size:16px;font-weight:500;line-height:1.45;color:var(--ink)}
.claim-bonus__fine{margin:10px 0 0;font-size:13.5px;line-height:1.5;color:var(--ink-3)}
.claim-bonus__spark{position:absolute;top:14px;right:16px;width:18px;height:18px;fill:var(--bonus);animation:claim-twinkle 2.6s ease-in-out infinite}
.claim-bonus__spark--small{top:26px;right:42px;width:10px;height:10px;animation-delay:-1.3s;opacity:.8}
.claim-bonus.is-new{animation:claim-bonus-pop .5s cubic-bezier(.2,.8,.3,1) both}
.claim-bonus.is-new .w{animation:claim-word .55s cubic-bezier(.2,.8,.3,1) both;animation-delay:calc(.1s + var(--i) * 75ms)}
.claim-bonus.is-new .claim-ultra{animation:claim-shine 1.3s .55s ease-in-out both}
.claim-bonus.is-new .claim-bonus__line{animation:claim-arrive .5s .6s cubic-bezier(.2,.8,.3,1) both}
.claim-bonus.is-new .claim-bonus__fine{animation:claim-arrive .5s .72s cubic-bezier(.2,.8,.3,1) both}
@keyframes claim-bonus-pop{from{opacity:0;transform:translateY(8px) scale(.97)}}
@keyframes claim-word{from{opacity:0;transform:translateY(.35em);filter:blur(6px)}}
@keyframes claim-shine{from{background-position:100% 0}to{background-position:0 0}}
.claim-bonus--won{margin:16px 0 0}

.claim-view[hidden],[data-steps][hidden],.claim-btn[hidden],.claim-platform[hidden]{display:none!important}

/* Before the first answer from /api/claim: the shape of the pick view, no words */
.claim-loading{display:grid;gap:14px}
.claim-loading span{display:block;height:58px;border-radius:999px;background:var(--hair);animation:claim-pulse 1.4s ease-in-out infinite}
.claim-loading span:first-child{width:38%;height:14px;border-radius:7px}
@keyframes claim-pulse{50%{opacity:.45}}
.claim-label{font-size:15px;font-weight:600;color:var(--ink);margin:0 0 12px}

/* Choosing the phone */
.claim-platforms{display:grid;grid-template-columns:1fr 1fr;gap:10px}
/* Each phone is just its store's badge, the same pair as the footer. Once
   one is picked the other fades back. The names and notes stay for screen
   readers only. */
.claim-platform{position:relative;display:flex;align-items:center;justify-content:center;padding:6px 4px;border-radius:12px;cursor:pointer}
.claim-platform input{position:absolute;opacity:0;pointer-events:none}
.claim-platform__badge{display:block;width:auto;max-width:100%;height:40px;object-fit:contain;transition:opacity .25s,filter .25s}
.claim-platforms:has(input:checked) .claim-platform:not(:has(input:checked)) .claim-platform__badge{opacity:.35;filter:grayscale(1)}
.claim-platforms:has(input:checked) .claim-platform:not(:has(input:checked)):hover .claim-platform__badge{opacity:.6}
/* theme.css whitens SVG images in the dark; the badges keep their own colours */
html[data-theme="dark"] .claim-platform img.claim-platform__badge{filter:none}
.claim-platform__name,.claim-platform__store{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.claim-platform:has(input:focus-visible){outline:2px solid var(--ink);outline-offset:3px}
.claim-platform:has(input:disabled){cursor:not-allowed;opacity:.55}

/* Buttons */
.claim-btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:58px;margin-top:16px;padding:0 24px;border-radius:999px;
  font-family:var(--sans);font-size:17px;font-weight:600;text-decoration:none;cursor:pointer;border:1.5px solid transparent;
  transition:transform .2s,background-color .25s,border-color .25s,color .25s,opacity .25s}
.claim-btn .arrow{transition:transform .25s}
.claim-btn:hover .arrow{transform:translateX(3px)}
.claim-btn--primary{background:var(--ink);color:var(--bg)}
.claim-btn--primary:hover{transform:translateY(-1px)}
.claim-btn--primary:disabled{opacity:.4;cursor:not-allowed;transform:none}
.claim-btn--ghost{background:transparent;color:var(--ink);border-color:var(--hair-2)}
.claim-btn--ghost:hover{border-color:var(--ink)}
.claim-btn svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.claim-btn:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.claim-pick .claim-btn{margin-top:20px}
/* The phone's prices (or its countdown to a drop) open once it's chosen */
.claim-price:not([hidden]) + .claim-btn,.claim-drop:not([hidden]) + .claim-price[hidden] + .claim-btn,
.claim-drop[hidden] + .claim-price[hidden] + .claim-btn{margin-top:0}
.claim-price.is-arriving,.claim-drop.is-arriving{animation:claim-arrive .45s cubic-bezier(.2,.8,.3,1) both}
.claim-drop{margin-bottom:28px}
.claim-drop[hidden]{display:none}
.claim-drop__clock{font-size:clamp(44px,10vw,56px);font-weight:600;line-height:1;letter-spacing:-.025em;color:var(--ink);margin:4px 0 0;font-variant-numeric:tabular-nums}

.claim-inline{min-height:0;margin:12px 0 0;font-size:14.5px;line-height:1.5;color:var(--clay)}
.claim-inline:empty{display:none}
.claim-fine{font-size:13.5px;line-height:1.55;color:var(--ink-3);margin:14px 0 0;text-align:center}

/* The code */
.claim-code__value{display:grid;place-items:center;min-height:96px;margin:0;padding:22px 16px;box-sizing:border-box;border-radius:18px;background:var(--accent-olive-soft);border:1px solid var(--hair);text-align:center;
  font-family:ui-monospace,Menlo,monospace;font-size:clamp(20px,5.4vw,30px);font-weight:600;letter-spacing:.12em;color:var(--ink);overflow-wrap:anywhere;
  user-select:all;-webkit-user-select:all}
.claim-code__value:focus{outline:none}

/* The scratch card: foil over a fresh code until about half is rubbed off.
   A sheen runs across it until the first touch, the cursor is a coin, and
   the buttons and steps wait underneath. */
.claim-scratch{position:relative;border-radius:18px;overflow:hidden;isolation:isolate}
.claim-foil{position:absolute;inset:0;z-index:1;display:block;width:100%;height:100%;touch-action:none;-webkit-tap-highlight-color:transparent;
  cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='13' fill='%23D9C68E' stroke='%238A7A45' stroke-width='2'/%3E%3Ccircle cx='16' cy='16' r='9' fill='none' stroke='%238A7A45' stroke-width='1.2' stroke-dasharray='2 2'/%3E%3Cpath d='M16 10c.3 2.9 2.6 5.2 5.5 5.5-2.9.3-5.2 2.6-5.5 5.5-.3-2.9-2.6-5.2-5.5-5.5 2.9-.3 5.2-2.6 5.5-5.5z' fill='%238A7A45'/%3E%3C/svg%3E") 16 16,pointer;
  transition:opacity .55s ease,transform .55s ease}
.claim-foil[hidden]{display:none}
.claim-foil:focus{outline:none}
.claim-foil:focus-visible{outline:2px solid var(--ink);outline-offset:-5px;border-radius:18px}
.claim-foil.is-gone{opacity:0;transform:scale(1.06);pointer-events:none}
.claim-scratch::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.6) 50%,transparent 62%);background-size:260% 100%;background-position:130% 0}
.claim-ticket.is-sealed:not(.is-scratching) .claim-scratch::after{opacity:1;animation:claim-sheen 3s ease-in-out .9s infinite}
@keyframes claim-sheen{0%{background-position:130% 0}55%,100%{background-position:-30% 0}}
.claim-ticket.is-sealed #claim-redeem,.claim-ticket.is-sealed #claim-copy,.claim-ticket.is-sealed #claim-note,
.claim-ticket.is-sealed .claim-how,.claim-ticket.is-sealed #claim-bonus-won{display:none!important}
.claim-ticket.is-revealed .claim-scratch{animation:claim-glow 1.2s ease-out both}
.claim-ticket.is-revealed #claim-bonus-won{animation:claim-bonus-pop .5s .15s cubic-bezier(.2,.8,.3,1) both}
.claim-ticket.is-revealed #claim-bonus-won .w{animation:claim-word .55s cubic-bezier(.2,.8,.3,1) both;animation-delay:calc(.3s + var(--i) * 75ms)}
.claim-ticket.is-revealed #claim-bonus-won .claim-ultra{animation:claim-shine 1.3s .75s ease-in-out both}
.claim-ticket.is-revealed #claim-redeem,.claim-ticket.is-revealed #claim-copy,.claim-ticket.is-revealed #claim-note,
.claim-ticket.is-revealed .claim-how{animation:claim-arrive .5s .35s cubic-bezier(.2,.8,.3,1) both}
@keyframes claim-glow{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--gold) 45%,transparent)}100%{box-shadow:0 0 0 14px transparent}}
.claim-code .claim-btn--primary{margin-top:18px}
.claim-code .claim-btn--ghost{margin-top:10px}

.claim-how{margin-top:28px;padding-top:26px;border-top:1px solid var(--hair)}
.claim-how h2{font-family:var(--sans);font-size:18px;font-weight:600;letter-spacing:0;line-height:1.3}
.claim-steps{list-style:none;counter-reset:step;margin:18px 0 0;padding:0;display:grid;gap:16px}
.claim-steps li{counter-increment:step;position:relative;min-height:34px;padding:4px 0 0 48px;font-size:16px;line-height:1.55;color:var(--ink-2)}
.claim-steps li::before{content:counter(step);position:absolute;left:0;top:0;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;
  border:1.5px solid var(--hair-2);font-size:14px;font-weight:600;color:var(--ink);box-sizing:border-box}
.claim-steps a,.claim-aside a{color:var(--ink);font-weight:500;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.claim-aside{font-size:14px;line-height:1.6;color:var(--ink-3);margin:18px 0 0}

/* Closed, claimed out, and the rest */
.claim-message__title{font-family:var(--serif);font-size:clamp(26px,4.4vw,32px);line-height:1.15;color:var(--ink);margin:0;font-weight:600}
.claim-message__body{font-size:16px;line-height:1.6;color:var(--ink-2);margin:12px 0 0}
.claim-message .claim-btn{margin-top:22px}
.claim-noscript{font-size:15px;color:var(--ink-2);margin:20px 0 0}

.claim-privacy{font-size:13px;line-height:1.6;color:var(--ink-3);margin:16px auto 0;max-width:46ch;text-align:center}

/* ---------- One small thing ---------- */
.claim-main .claim-thanks{margin-top:64px;padding-top:36px;border-top:1px solid var(--hair)}
.claim-main .claim-thanks[hidden]{display:none}
.claim-thanks.is-arriving{animation:claim-arrive .7s cubic-bezier(.2,.8,.3,1) both}
@keyframes claim-arrive{from{opacity:0;transform:translateY(10px)}}
.claim-eyebrow--quiet{font-size:14px;color:var(--ink-3)}
.claim-thanks h2{font-size:clamp(30px,5vw,40px);line-height:1.08;margin-top:12px;max-width:16ch}
.claim-thanks h2 em{font-family:var(--serif);font-style:italic;font-weight:600;color:var(--gold)}
.claim-thanks p:not(.claim-eyebrow){font-size:var(--text-sub);line-height:var(--text-sub-leading);color:var(--ink-2);margin-top:14px;max-width:46ch}

@media(max-width:600px){
  .claim-main{padding-top:118px;padding-bottom:56px}
  .claim-ticket{margin-top:32px}
  .claim-ticket__top{padding:24px 20px 22px;border-radius:24px 24px 0 0}
  .claim-ticket__stub{padding:22px 20px 26px;border-radius:0 0 24px 24px}
  .claim-ticket__icon{width:52px;height:52px;border-radius:13px}
  .claim-platform__badge{height:36px}
  .claim-steps li{font-size:15.5px}
  .claim-main .claim-thanks{margin-top:52px}
}
@media(prefers-reduced-motion:reduce){
  .claim-btn,.claim-btn .arrow,.claim-platform,.claim-platform__badge,.claim-region,.claim-tier__bar span,.claim-stops button{transition:none}
  .claim-slider input::-webkit-slider-thumb{transition:none}
  .claim-slider input::-moz-range-thumb{transition:none}
  .claim-live::before,.claim-loading span,.claim-ticket.is-ripping .claim-ticket__stub,.claim .claim-eyebrow svg,.claim-thanks.is-arriving,.claim-perks li.is-new{animation:none}
  .claim-bonus__spark,.claim-bonus.is-new,.claim-bonus.is-new *,.claim-ticket.is-revealed *,.claim-ticket.is-sealed .claim-scratch::after{animation:none!important}
  .claim-ticket,.claim-foil{transition:none}
  .claim-btn--primary:hover{transform:none}
}