/* bex+Co. October Beauty Pro Giveaway: the "You're in" state, part 2 of 2: the tiles (five since 2026-10-01, laid out 3 + 2), the lightboxes, the done
   effect. Concept u-in-b3-tiles (vault clients/bex/fill-chairs-giveaway-2026-09/concepts-r2/u-in-b3-tiles/tiles.css),
   ported 2026-09-30. Loads after giveaway-in.css. Every class here is .ut-. Kit tokens only, no hex. */

.ut-wrap{max-width:1180px}
html.ut-lock{overflow:hidden}

/* ---------------- the four tiles: the whole tile is the button ---------------- */
.ut-grid-wrap{position:relative;margin-top:84px}
.ut-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;align-items:stretch}
.ut-tile{all:unset;box-sizing:border-box;position:relative;cursor:pointer;display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:26px 20px 24px;border-radius:24px;border:2px solid transparent;color:var(--ink);
  background:linear-gradient(var(--tone),var(--tone)) padding-box,linear-gradient(var(--tone),var(--tone)) border-box;
  box-shadow:var(--d-card-sh-light);transition:transform .25s var(--ease),box-shadow .25s var(--ease);-webkit-tap-highlight-color:transparent}
/* hover: lift + iridescent edge + a soft iridescent halo */
.ut-tile::before{content:"";position:absolute;inset:-2px;border-radius:inherit;background:var(--lux-iridescent);filter:blur(18px);opacity:0;z-index:-1;transition:opacity .25s var(--ease)}
.ut-tile:hover{transform:translateY(-6px);background:linear-gradient(var(--tone),var(--tone)) padding-box,var(--lux-iridescent) border-box}
.ut-tile:hover::before{opacity:.55}
/* press: a quick squish */
.ut-tile:active{transform:translateY(-2px) scale(.96);transition-duration:.08s}
.ut-tile:focus-visible{outline:3px solid var(--primary);outline-offset:4px}

/* the visual on top */
.ut-v{position:relative;height:96px;display:grid;place-items:center;margin-bottom:14px}
.ut-v-bex img{width:88px;height:88px;border-radius:50%;object-fit:cover;object-position:50% 16%;border:3px solid var(--tone);box-shadow:0 0 0 3px var(--lux-iris)}
.ut-ig{position:absolute;right:-4px;bottom:2px;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--primary);color:var(--paper);border:3px solid var(--tone)}
.ut-ig svg{width:16px;height:16px}
.ut-v-icon{width:88px;height:88px;border-radius:50%;margin:4px auto 18px;background:color-mix(in srgb,var(--lux-iris) 42%,var(--tone))}
.ut-v-icon svg{width:58px;height:58px}
.ut-i-card{fill:var(--tone);stroke:var(--deep);stroke-width:2.6}
.ut-i-tick{fill:none;stroke:var(--primary);stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}
.ut-i-line{fill:none;stroke:color-mix(in srgb,var(--deep) 55%,transparent);stroke-width:3;stroke-linecap:round}
.ut-v-pair{display:flex;align-items:center;justify-content:center;grid-template-columns:none}
.ut-v-pair img{width:72px;height:72px;border-radius:50%;object-fit:cover;object-position:50% 30%;border:3px solid var(--tone);box-shadow:0 6px 14px -6px color-mix(in srgb,var(--deep) 45%,transparent)}
.ut-v-pair img + img{margin-left:-22px}
.ut-plus{position:absolute;left:calc(50% + 40px);bottom:6px;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--primary);color:var(--paper);font:900 1.15rem/1 var(--sans);border:3px solid var(--tone)}
.ut-v-photo img{width:140px;height:92px;border-radius:16px;object-fit:cover;object-position:50% 40%;box-shadow:0 6px 14px -6px color-mix(in srgb,var(--deep) 45%,transparent)}

/* title, the big +N, the hint */
.ut-t{display:block;font-family:var(--sans);font-weight:700;font-size:1.14rem;line-height:1.25;color:var(--deep);text-wrap:balance}
.ut-n{display:flex;align-items:baseline;justify-content:center;gap:6px;margin-top:8px;color:var(--primary)}
.ut-n b{font-family:var(--sans);font-weight:900;font-size:2.5rem;line-height:1;letter-spacing:-.02em}
.ut-n small{font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--secondary)}
.ut-h,.ut-d,.ut-err{display:block;margin-top:8px;font-size:.92rem;line-height:1.4;color:color-mix(in srgb,var(--ink) 76%,transparent);text-wrap:balance}
.ut-err{color:var(--primary);font-weight:700}

/* done: a check badge, "+1 added", a little muted, still clickable */
.ut-d{display:none;font-weight:700;color:var(--primary)}
.ut-check{position:absolute;top:12px;right:12px;width:32px;height:32px;border-radius:50%;display:none;place-items:center;background:var(--lux-iridescent);color:var(--lux-deep);
  box-shadow:0 0 0 3px var(--tone)}
.ut-check svg{width:18px;height:18px}
.ut-tile.is-done{background:linear-gradient(color-mix(in srgb,var(--sand) 38%,var(--tone)),color-mix(in srgb,var(--sand) 38%,var(--tone))) padding-box,linear-gradient(var(--tone),var(--tone)) border-box;box-shadow:none}
.ut-tile.is-done:hover{background:linear-gradient(color-mix(in srgb,var(--sand) 38%,var(--tone)),color-mix(in srgb,var(--sand) 38%,var(--tone))) padding-box,var(--lux-iridescent) border-box}
.ut-tile.is-done .ut-v{opacity:.72;filter:saturate(.75)}
.ut-tile.is-done .ut-n{opacity:.55}
.ut-tile.is-done .ut-h{display:none}
.ut-tile.is-done .ut-d{display:block}
.ut-tile.is-done .ut-check{display:grid}
.ut-tile.ut-pop{animation:utpop .55s cubic-bezier(.3,1.6,.5,1)}
@keyframes utpop{0%{transform:scale(1)}35%{transform:scale(1.06)}100%{transform:scale(1)}}

/* the arrow: page 1's gradient arrow, parked at the TOP LEFT of the tile grid and angled down and to the right at the first tile (Follow Bex).
   Desktop and tablet only; phones get a soft iridescent glow ring on the next tile instead. The 104px box holds the whole rotated arrow, so
   nothing clips, and the band above the grid (see .ut-grid-wrap margin) keeps it clear of the subhead. JS fades it once Follow is done. */
.ut-arrow{position:absolute;left:0;top:-86px;width:104px;height:104px;pointer-events:none;z-index:2;transition:opacity .35s var(--ease)}
.ut-arrow-n{position:absolute;left:0;top:0;width:104px;height:104px;display:block}
.ut-arrow svg{position:absolute;left:6px;top:25px;width:92px;height:55px;overflow:visible;transform:rotate(45deg)}
.ut-arrow path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.ut-arrow .ub-arrow-k{stroke:var(--lux-deep);stroke-width:21}
.ut-arrow-p{stroke:url(#ut-arrow-g);stroke-width:14}
.ut-arrow.is-gone{opacity:0}
.ut-arrow.is-nudge .ut-arrow-n{animation:utnudge 1.1s ease-in-out 2}
@keyframes utnudge{0%,100%{transform:translate(0,0)}50%{transform:translate(7px,7px)}}

/* ---------------- the lightboxes ---------------- */
.ut-modal{border:0;padding:0;margin:auto;width:min(560px,calc(100% - 32px));max-height:calc(100dvh - 48px);border-radius:24px;background:var(--tone);color:var(--ink);
  box-shadow:var(--lux-sh-lg);overflow:auto;overscroll-behavior:contain}
.ut-modal::backdrop{background:color-mix(in srgb,var(--teal-950) 64%,transparent);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.ut-modal[open]{animation:utin .3s cubic-bezier(.3,1.3,.5,1)}
@keyframes utin{from{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:none}}
.ut-m-in{position:relative;padding:30px 30px 28px}
.ut-x{all:unset;box-sizing:border-box;position:absolute;top:14px;right:14px;z-index:3;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;cursor:pointer;
  background:color-mix(in srgb,var(--ink) 7%,var(--tone));color:var(--deep)}
.ut-x:hover{background:color-mix(in srgb,var(--lux-iris) 50%,var(--tone))}
.ut-x:focus-visible{outline:3px solid var(--primary);outline-offset:2px}
.ut-x svg{width:18px;height:18px}
.ut-m-n{margin:0 0 6px;font-family:var(--sans);font-weight:700;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--secondary)}
.ut-m-n b{font-weight:900;font-size:1.7rem;letter-spacing:-.01em;color:var(--primary);margin-right:4px;vertical-align:-.12em}
.ut-m-h{margin:0 0 18px;padding-right:44px;font-family:var(--sans);font-weight:900;text-transform:uppercase;letter-spacing:-.01em;line-height:1;font-size:1.75rem;color:var(--deep)}
.ut-m-list{margin:-6px 0 16px;padding:0;list-style:none;display:grid;gap:8px;font-size:1.02rem;line-height:1.45}
.ut-m-list li{position:relative;padding-left:26px}
.ut-m-list li::before{content:"\2713";position:absolute;left:2px;top:0;font-weight:700;color:var(--primary)}
.ut-m-p{margin:0 0 18px;font-size:1.04rem;line-height:1.55;color:color-mix(in srgb,var(--ink) 88%,transparent)}
.ut-btn{width:100%;padding:18px 20px;font-size:.88rem}

/* questions: compact so all four fit a phone screen with little scrolling */
.ut-q{gap:16px;margin-top:0}
.ut-q legend,.ub .ut-q .fld span{font-size:.7rem;margin-bottom:8px}
.ut-q .chips{gap:7px}
.ut-q .chip{font-size:.86rem;padding:8px 13px}
.ub .ut-q .fld input{max-width:none;min-height:46px;padding:11px 14px}
.ut-q .ut-btn{justify-self:stretch;margin-top:2px}
.ut-done{display:flex;align-items:center;gap:14px;padding:6px 0 2px}
.ut-done p{margin:0;font-size:1.1rem;color:var(--deep)}

/* invite: three numbered steps, the link with a big Copy, then Text / Email / More apps */
.ut-steps{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:10px}
.ut-steps li{display:flex;align-items:center;gap:12px;font-size:1.04rem;line-height:1.35;color:var(--ink)}
.ut-steps span{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--lux-iridescent);color:var(--lux-deep);font-family:var(--sans);font-weight:900;font-size:.9rem}
.ub .ut-link{flex-direction:column;align-items:stretch;border-radius:18px;padding:14px 14px 12px;gap:10px}
.ub .ut-link code{white-space:normal;overflow-wrap:anywhere;text-align:center;font-size:1rem;overflow:visible}
.ub .ut-link .copy{width:100%;padding:16px;font-size:.9rem;letter-spacing:.16em}
.ut-share{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:12px}
.ub .ut-share .pill{text-align:center;padding:12px 8px}

/* apply: the salon photo across the top of the box */
.ut-m-photo{margin:-30px -30px 20px;aspect-ratio:16/7;overflow:hidden}
.ut-m-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.ut-x-on-photo{background:color-mix(in srgb,var(--tone) 88%,transparent)}
.ut-fine{margin-top:12px}
#ut-m-apply .ub-walk-done{margin-top:16px}
.ut-modal:has(#gv-fw-done:not([hidden])) .ut-fine{display:none}

/* ---------------- the done effect: confetti, the flying +N, the count bump ---------------- */
.ut-burst{position:fixed;width:0;height:0;z-index:300;pointer-events:none}
.ut-burst .cfx{position:absolute;left:0;top:0;width:11px;height:7px;border-radius:1.5px}
.ut-chip{position:fixed;z-index:301;pointer-events:none;padding:9px 16px;border-radius:999px;background:var(--lux-iridescent);color:var(--lux-deep);
  font-family:var(--sans);font-weight:900;font-size:1.45rem;line-height:1;white-space:nowrap;box-shadow:0 0 0 3px var(--tone),0 14px 30px -10px color-mix(in srgb,var(--teal-950) 60%,transparent)}
.ub-n.ut-bump b{animation:utbump .38s cubic-bezier(.3,1.6,.5,1)}
@keyframes utbump{0%{transform:scale(1)}40%{transform:scale(1.18)}100%{transform:scale(1)}}

/* ---------------- phones: a 2x2 grid, all four visible at once; the glow ring replaces the arrow ---------------- */
@media(max-width:760px){
  .ut-grid-wrap{margin-top:18px}
  .ut-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .ut-tile{padding:18px 10px 16px;border-radius:20px}
  .ut-tile:hover{transform:none}
  .ut-v{height:68px;margin-bottom:10px}
  .ut-v-bex img{width:62px;height:62px;border-width:2px;box-shadow:0 0 0 2px var(--lux-iris)}
  .ut-ig{width:26px;height:26px;right:-5px;bottom:0;border-width:2px}
  .ut-ig svg{width:13px;height:13px}
  .ut-v-icon{width:64px;height:64px;margin:2px auto 12px}
  .ut-v-icon svg{width:42px;height:42px}
  .ut-v-pair img{width:50px;height:50px;border-width:2px}
  .ut-v-pair img + img{margin-left:-16px}
  .ut-plus{width:24px;height:24px;font-size:.9rem;left:calc(50% + 28px);bottom:4px;border-width:2px}
  .ut-v-photo img{width:104px;height:68px;border-radius:12px}
  .ut-t{font-size:.98rem}
  .ut-n{margin-top:6px;gap:4px}
  .ut-n b{font-size:1.95rem}
  .ut-n small{font-size:.56rem;letter-spacing:.08em}
  .ut-h,.ut-d,.ut-err{font-size:.8rem;margin-top:6px;line-height:1.35}
  .ut-check{width:26px;height:26px;top:9px;right:9px}
  .ut-check svg{width:15px;height:15px}
  .ut-arrow{display:none}
  .ut-tile.is-next{box-shadow:0 0 0 3px color-mix(in srgb,var(--lux-iris) 85%,var(--tone)),0 0 26px 2px color-mix(in srgb,var(--lux-iris) 75%,transparent),var(--d-card-sh-light);
    background:linear-gradient(var(--tone),var(--tone)) padding-box,var(--lux-iridescent) border-box}

  .ut-modal{width:calc(100% - 20px);max-height:calc(100dvh - 20px);border-radius:20px}
  .ut-m-in{padding:22px 18px 20px}
  .ut-m-h{font-size:1.4rem;margin-bottom:14px}
  .ut-m-n b{font-size:1.45rem}
  .ut-q{gap:13px}
  .ut-q .chip{font-size:.82rem;padding:7px 11px}
  .ut-q legend,.ub .ut-q .fld span{font-size:.64rem;margin-bottom:7px;letter-spacing:.1em}
  .ut-m-photo{margin:-22px -18px 16px}
  .ut-m-p,.ut-steps li{font-size:.98rem}
}
@media(max-width:374px){
  .ut-tile{padding:16px 8px 14px}
  .ut-t{font-size:.92rem}
  .ut-n b{font-size:1.75rem}
  .ut-h,.ut-d{font-size:.76rem}
}
@media(prefers-reduced-motion:reduce){
  .ut-tile,.ut-tile::before,.ut-arrow{transition:none}
  .ut-tile:hover,.ut-tile:active{transform:none}
  .ut-modal[open],.ut-tile.ut-pop,.ub-n.ut-bump b,.ut-arrow.is-nudge .ut-arrow-n{animation:none}
}
/* r1 fixes: the box opens with focus on its heading (no ring on the X); a tighter gap above the tiles on desktop */
.ut-m-h:focus{outline:none}
@media(min-width:761px){
  .ut-grid-wrap{margin-top:64px}
}

/* ======================= v1.5 (round 2.5, 2026-09-30) ======================= */
/* 1. the small label sits on the optical center of the big number's caps (both boxes trimmed to cap height, then centered) */
.ut-n{align-items:center;gap:7px}
.ut-n b,.ut-n small{text-box:trim-both cap alphabetic}
.ut-n small{line-height:1}

/* 3. desktop: the down-arrow hangs lower and overlaps the next tile's top edge; the gap above the tiles shrinks */
@media(min-width:761px){
  .ut-grid-wrap{margin-top:40px}
}

/* 2. the questions box: one question per screen, a progress bar on top, Back, steady height */
.ut-modal-q{width:min(520px,calc(100% - 32px))}
.ut-modal-q .ut-m-in{padding-top:0}
.ut-prog{height:6px;margin:0 -30px;background:color-mix(in srgb,var(--primary) 14%,var(--tone))}
.ut-prog i{display:block;height:100%;width:20%;border-radius:0 6px 6px 0;background:linear-gradient(90deg,var(--primary),var(--tealbright));transition:width .4s var(--ease)}
.ut-qbar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;min-height:44px;margin:12px 0 8px}
.ut-back{all:unset;box-sizing:border-box;grid-column:1;justify-self:start;display:inline-flex;align-items:center;gap:4px;padding:8px 6px 8px 0;cursor:pointer;
  font-family:var(--sans);font-weight:700;font-size:.88rem;color:var(--primary)}
.ut-back svg{width:16px;height:16px;transform:rotate(90deg)}
.ut-back:hover{color:var(--deep)}
.ut-back:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:6px}
.ut-qcount{grid-column:2;margin:0;font-family:var(--sans);font-weight:900;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--secondary)}
.ut-modal-q .ut-x{position:static;grid-column:3;justify-self:end}
.ut-q-eye{margin:0 0 8px}
.ut-q-eye b{font-size:1.25rem}
.ut-qsteps{display:grid;gap:0}
.ut-qp{grid-area:1/1;border:0;margin:0;padding:0;min-width:0;visibility:hidden;opacity:0;pointer-events:none}
.ut-qp.is-on{visibility:visible;opacity:1;pointer-events:auto}
.ut-qsteps legend.ut-qt,.ut-qdone .ut-qt{float:left;display:block;width:100%;margin:0 0 16px;padding:0;font-family:var(--sans);font-weight:900;text-transform:uppercase;
  letter-spacing:-.01em;line-height:1.05;font-size:1.65rem;color:var(--deep);text-wrap:balance}
.ut-qt:focus{outline:none}
.ut-opt{font-weight:700;font-size:.62em;letter-spacing:.06em;color:var(--secondary)}
.ut-qp > .chips,.ut-qp > label,.ut-qp > .tk-err,.ut-qp > button{clear:both}
.ut-qsteps .chips{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin:0}
.ut-qsteps .chips.ut-rows{grid-template-columns:1fr}
.ut-qsteps .chip{font-size:1rem;font-weight:700;line-height:1.25;padding:14px 12px;border-radius:14px;border:1.5px solid color-mix(in srgb,var(--ink) 14%,transparent);background:var(--paper);color:var(--ink);transition:background .15s var(--ease),border-color .15s var(--ease),transform .1s}
.ut-qsteps .ut-rows .chip{display:flex;align-items:center;justify-content:space-between;gap:12px;text-align:left;padding:13px 16px 13px 18px}
.ut-qsteps .ut-rows .chip::after{content:"";flex:none;width:22px;height:22px;border-radius:50%;border:1.5px solid color-mix(in srgb,var(--ink) 22%,transparent)}
.ut-qsteps .chip:hover{border-color:var(--primary);color:var(--primary)}
.ut-qsteps .chip:active{transform:scale(.98)}
.ut-qsteps .chip[aria-pressed=true]{background:var(--primary);border-color:var(--primary);color:var(--paper)}
.ut-qsteps .ut-rows .chip[aria-pressed=true]::after{border-color:var(--paper);background:radial-gradient(circle,var(--primary) 0 4px,var(--paper) 4.6px)}
.ut-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ub .ut-qsteps .ut-igf{display:block;margin:0 0 12px}
.ub .ut-qsteps .ut-igf input{width:100%;max-width:none;min-height:56px;font-size:1.06rem;padding:14px 16px}
.ut-qsteps .tk-err{margin:0 0 10px;text-align:left}
.ut-qsteps .ut-btn{display:flex;width:100%}
.ut-skip{all:unset;box-sizing:border-box;display:block;width:100%;margin-top:12px;padding:8px;text-align:center;cursor:pointer;font-size:.9rem;color:var(--secondary);text-decoration:underline;text-underline-offset:2px}
.ut-skip:hover{color:var(--primary)}
.ut-skip:focus-visible{outline:2px solid var(--primary);border-radius:6px}
.ut-enter{animation:utfwd .34s var(--ease) both}
.ut-enter-back{animation:utbk .34s var(--ease) both}
@keyframes utfwd{from{opacity:0;transform:translateX(22px)}to{opacity:1;transform:none}}
@keyframes utbk{from{opacity:0;transform:translateX(-22px)}to{opacity:1;transform:none}}
.ut-qdone{flex-direction:column;justify-content:center;align-items:center;text-align:center;min-height:240px;gap:8px}
.ut-qdone .ub-tick{width:64px;height:64px}
.ut-qdone .ub-tick svg{width:34px;height:34px}
.ut-qdone .ut-qt{float:none;margin:0;font-size:2.4rem;color:var(--primary)}
@media(max-width:760px){
  .ut-modal-q{width:calc(100% - 20px)}
  .ut-prog{margin:0 -18px}
  .ut-qbar{margin:8px 0 6px}
  .ut-qsteps legend.ut-qt{font-size:1.4rem;margin-bottom:14px}
  .ut-qsteps .chip{font-size:.95rem;padding:13px 10px}
  .ut-qsteps .chips{gap:8px}
  .ut-qsteps .ut-rows .chip{padding:12px 14px 12px 16px}
}
@media(prefers-reduced-motion:reduce){ .ut-enter,.ut-enter-back{animation:none} .ut-prog i{transition:none} }

/* ======================= v1.6 (Andrew 2026-09-30) =======================
   The questions box header keeps only Back / 1 OF 5 / close and the question. The "+2 entries · 4 quick questions"
   line moves to a quiet footer under a hairline. The steps stack keeps the box height steady. */
.ut-qfoot{margin:22px -30px 0;padding:14px 30px 0;border-top:1px solid var(--d-line);text-align:center;font-family:var(--sans);font-weight:700;font-size:.72rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--secondary)}
.ut-qfoot b{font-weight:900;color:var(--primary);letter-spacing:0;font-size:1.05rem;margin-right:2px;vertical-align:-.06em}
.ut-modal-q .ut-qbar{margin-bottom:12px}
@media(max-width:760px){ .ut-qfoot{margin:18px -18px 0;padding:12px 18px 0} }
/* v1.6: a slightly tighter tile top on desktop so the 2-line apply title's +10 also clears 900px */
@media(min-width:761px){
  .ut-tile{padding-top:22px}
  .ut-v{margin-bottom:10px}
  .ut-grid-wrap{margin-top:36px}
}

/* ================= 2026-10-01: what you could win, under the tiles =================
   The prize row is the opt-in page's own markup and classes (.tp-prizes / .tp-pl / .tp-row / .tp-pz / .tp-th / .tp-lb, in giveaway.css), so the
   heading, the card size, the radius, the photo crops and the hover zoom come from ONE rule set. Page 1 sits on the dark stage; this section sits
   on sand, so only the COLORS are set here. Sizes, spacing and the zoom are never restated. Not clickable: no link or button inside, default cursor. */
.ut-wrap-wide{max-width:1320px}   /* the same 1320px column as page 1's .tp-in, so the cards come out the same width */
.ub .tp-prizes{margin-top:clamp(44px,5vw,64px)}
.ub .tp-pl{color:var(--primary)}
.ub .tp-row .tp-pz{color:var(--deep)}
.ub .tp-sub{color:var(--secondary)}
.ub .tp-th{box-shadow:0 0 0 1px color-mix(in srgb,var(--deep) 10%,transparent),0 16px 30px -18px color-mix(in srgb,var(--deep) 55%,transparent)}
@media(max-width:760px){ .ub .tp-prizes{margin-top:40px} }

/* ================= 2026-10-01: FIVE tiles, laid out 3 + 2 (Andrew: five across felt cramped) =================
   DOM order is the visual order (so Tab follows the eye): Follow +1, Questions +2, Invite +3 on the top row; Profit calculator +5 and the
   +10 apply centered on the bottom row. 761px and up: a 6-column grid where each tile spans 2 and the bottom pair starts at column 2, so the
   gap to the left of the pair equals the gap to its right. Phones: the 2-column grid, the fifth tile centered under the pair above it. */
.ut-i-disp{fill:color-mix(in srgb,var(--primary) 16%,var(--tone));stroke:var(--deep);stroke-width:2.2}
.ut-i-key{fill:var(--primary)}
@media(min-width:761px){
  .ut-grid-wrap{max-width:1040px;margin:84px auto 0}   /* 84px band above the grid holds the arrow, clear of the subhead */
  .ut-grid{grid-template-columns:repeat(6,minmax(0,1fr))}
  .ut-grid > .ut-tile{grid-column:span 2}
}
/* 2026-10-02: SIX tiles (the beauty pro quiz joined as tile 6), so the rows are full again: 3 + 3 on desktop, 2 + 2 + 2 on phones.
   The 3 + 2 centering rules for the calculator and apply tiles are gone with it. */

/* ================= 2026-10-01 r2 (Andrew: "this arrow is bad. angle may not work", too much space under the subhead, not enough above
   the heading) =================
   The arrow goes flat and sits in the LEFT margin, pointing straight right at Follow Bex, the same move as page 1's arrow beside
   ENTER TO WIN. It only shows where the margin is wide enough to hold it (1300px and up); narrower screens get the glow ring the phones
   already use. With no band above the grid, the subhead sits close to the tiles, and the heading gets more room under the tab. */
@media(min-width:761px){
  .ub-body .ub-h2{margin-top:28px}
  .ut-grid-wrap{margin-top:34px}
  .ut-arrow{left:-122px;top:var(--ut-arrow-top,70px);width:104px;height:104px}
  .ut-arrow svg{left:6px;top:25px;transform:none}
}
@media(min-width:761px) and (max-width:1299px){
  .ut-arrow{display:none}
  .ut-tile.is-next{box-shadow:0 0 0 3px color-mix(in srgb,var(--lux-iris) 85%,var(--tone)),0 0 26px 2px color-mix(in srgb,var(--lux-iris) 75%,transparent),var(--d-card-sh-light);
    background:linear-gradient(var(--tone),var(--tone)) padding-box,var(--lux-iridescent) border-box}
}

/* ================= 2026-10-01: the profit calculator opens in a pop-up on this page =================
   The ONE calculator page in an iframe (?embed=giveaway), in the same native <dialog> shell as the questions box: close X, Esc, tap outside, scroll
   lock, focus back on the tile. Dark like the calculator's own stage so the frame has no seam. No +5 header (Andrew 10-01: dropped,
   the tile already says +5); the close X lives in the calculator's own top row. Phones get a full-height sheet. */
.ut-modal-calc{width:min(560px,calc(100% - 32px));background:var(--teal-950);color:var(--paper);overflow:hidden}
.ut-modal-calc[open]{display:flex;flex-direction:column;height:min(820px,calc(100dvh - 48px))}
.ut-cframe{display:block;flex:1;min-height:0;width:100%;border:0;background:var(--teal-950);color-scheme:dark}
@media(max-width:760px){
  .ut-modal-calc{width:100%;max-width:100%;margin:auto 0 0;border-radius:20px 20px 0 0}
  .ut-modal-calc[open]{height:calc(100dvh - 12px);max-height:none}
}

/* the beauty pro quiz pop-up (2026-10-02): the calculator's box (.ut-modal-calc), a little narrower to match the quiz's own 440px card */
.ut-modal-quiz{width:min(440px,calc(100% - 32px))}
@media(max-width:760px){.ut-modal-quiz{width:100%}}

/* the apply pop-up (Andrew 10-02, "we have widows happening"): about 20% narrower than the shared 560px box (448px), and every line of its
   copy wraps so that no line ends on a single word (pretty for paragraphs, balance for the heading). Phones keep the full width. */
#ut-m-apply{width:min(448px,calc(100% - 32px))}
#ut-m-apply .ut-m-h{text-wrap:balance}
#ut-m-apply .ut-m-p,#ut-m-apply .ut-m-list li,#ut-m-apply .ut-fine{text-wrap:pretty}

/* ---------------- the Beauty Brand Check-up result (2026-10-02), inside the step 2 pop-up's done state ----------------
   Same look as the beauty pro quiz's fit chart: a big score out of 10, one bar, then the next steps and a soft apply card. Kit tokens only. */
.ut-br{margin-top:14px;text-align:left}
.ut-done .ut-br-k{margin:0;font-family:var(--sans);font-weight:900;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--secondary)}
.ut-done .ut-br-k2{margin-top:18px}
.ut-done .ut-br-n{margin:2px 0 0;font-family:var(--sans);font-weight:900;font-size:2.4rem;line-height:1;font-variant-numeric:tabular-nums;color:var(--deep)}
.ut-br-n small{font-size:1rem;opacity:.55;margin-left:2px}
.ut-br-bar{height:12px;border-radius:999px;background:color-mix(in srgb,var(--primary) 12%,var(--tone));overflow:hidden;margin:8px 0 6px}
.ut-br-bar i{display:block;height:100%;border-radius:inherit;background:var(--primary)}
.ut-done .ut-br-read{margin:0;font-weight:700;font-size:.95rem;line-height:1.4;color:var(--ink);text-wrap:pretty}
.ut-br-steps{margin:8px 0 0;padding:0 0 0 20px;display:grid;gap:8px;font-size:.95rem;line-height:1.45;color:var(--ink)}
.ut-br-steps li{text-wrap:pretty}
.ut-br-steps li::marker{font-weight:900;color:var(--primary)}
.ut-br-ap{margin-top:16px;padding:14px 16px;border-radius:16px;background:color-mix(in srgb,var(--lux-iris) 30%,var(--tone))}
.ut-done .ut-br-ap p{margin:0 0 10px;font-size:.9rem;line-height:1.45;color:var(--ink);text-wrap:pretty}
.ut-br-go{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;gap:8px;cursor:pointer;padding:10px 16px;border-radius:999px;background:var(--primary);color:var(--paper);
  font-family:var(--sans);font-weight:900;font-size:.82rem;letter-spacing:.08em;text-transform:uppercase}
.ut-br-go:focus-visible{outline:3px solid var(--lux-iris);outline-offset:3px}
.ut-br-plus{display:inline-grid;place-items:center;min-width:34px;height:22px;padding:0 7px;border-radius:999px;background:var(--lux-deep);color:var(--lux-iris);font-size:.72rem;letter-spacing:.02em}
.ut-qdone .ut-br{align-self:stretch}
.ut-qdone:has(.ut-br:not([hidden])){min-height:0}

/* ================= the Beauty Brand Check-up pop-up in the DARK STAGE (Andrew 10-02: "get the styling to look more like the other forms") =================
   Same look as the Stylist Profit Calculator and the beauty pro quiz pop-ups: deep teal stage with the soft light, a thin segmented
   progress bar (8 segments), the centered BEAUTY BRAND CHECK-UP title, white sentence-case questions, glass pill answers that turn
   iridescent when picked, the iridescent button. Scoped to #ut-m-q, so the invite and apply pop-ups keep their light look. Kit tokens only. */
#ut-m-q{color:var(--paper);
  background:
    radial-gradient(60% 34% at 50% -6%,color-mix(in srgb,var(--lux-iris) 18%,transparent),transparent 70%),
    radial-gradient(70% 30% at 50% 106%,color-mix(in srgb,var(--mint) 16%,transparent),transparent 72%),
    radial-gradient(85% 75% at 0% 100%,color-mix(in srgb,var(--tealbright) 55%,transparent),transparent 70%),
    var(--teal-950)}
#ut-m-q .ut-prog{height:2.5px;margin:16px 0 0;border-radius:999px;background:color-mix(in srgb,var(--paper) 28%,transparent);
  -webkit-mask:repeating-linear-gradient(90deg,black 0 calc(12.5% - 4px),transparent calc(12.5% - 4px) 12.5%);
  mask:repeating-linear-gradient(90deg,black 0 calc(12.5% - 4px),transparent calc(12.5% - 4px) 12.5%)}
#ut-m-q .ut-prog i{border-radius:0;background:var(--paper)}
#ut-m-q .ut-qbar{margin:6px 0 14px}
#ut-m-q .ut-qcount{color:var(--paper);font-size:.75rem;letter-spacing:.12em;white-space:nowrap}
#ut-m-q .ut-back{color:color-mix(in srgb,var(--paper) 85%,transparent)}
#ut-m-q .ut-back:hover{color:var(--paper)}
#ut-m-q .ut-back:focus-visible,#ut-m-q .ut-x:focus-visible{outline-color:var(--lux-iris)}
#ut-m-q .ut-x{background:transparent;color:var(--paper)}
#ut-m-q .ut-x:hover{background:color-mix(in srgb,var(--paper) 12%,transparent)}
#ut-m-q .ut-qsteps legend.ut-qt{text-align:center;text-transform:none;font-weight:700;font-size:1.6rem;line-height:1.2;letter-spacing:-.01em;color:var(--paper);text-wrap:balance;margin-bottom:20px}
#ut-m-q .ut-qsteps .chips{gap:10px}
#ut-m-q .ut-qsteps .chip{min-height:56px;padding:13px 16px;border-radius:999px;border:1.5px solid color-mix(in srgb,var(--paper) 22%,transparent);
  background:color-mix(in srgb,var(--paper) 8%,transparent);color:var(--paper);font-size:1.02rem;font-weight:700;text-align:center;justify-content:center}
#ut-m-q .ut-qsteps .chip:hover{border-color:color-mix(in srgb,var(--paper) 55%,transparent);color:var(--paper)}
#ut-m-q .ut-qsteps .chip:focus-visible{outline:3px solid var(--lux-iris);outline-offset:3px}
#ut-m-q .ut-qsteps .chip[aria-pressed=true]{background:var(--lux-iridescent);border-color:transparent;color:var(--lux-deep);
  box-shadow:0 12px 28px -12px color-mix(in srgb,var(--lux-iris) 80%,transparent)}
#ut-m-q .ut-opt{color:color-mix(in srgb,var(--paper) 70%,transparent);font-weight:400}
#ut-m-q .ut-igf input{background:color-mix(in srgb,var(--paper) 8%,transparent);border:1.5px solid color-mix(in srgb,var(--paper) 22%,transparent);color:var(--paper);border-radius:999px;text-align:center}
#ut-m-q .ut-igf input::placeholder{color:color-mix(in srgb,var(--paper) 55%,transparent)}
#ut-m-q .ut-igf input:focus{outline:3px solid var(--lux-iris);outline-offset:2px}
#ut-m-q .ut-btn{width:100%;border:0;border-radius:999px;background:var(--lux-iridescent);color:var(--lux-deep);box-shadow:0 12px 30px -12px color-mix(in srgb,var(--lux-iris) 60%,transparent)}
#ut-m-q .ut-skip{color:color-mix(in srgb,var(--paper) 75%,transparent)}
#ut-m-q .ut-skip:hover{color:var(--paper)}
#ut-m-q .tk-err{color:var(--lux-blush)}
#ut-m-q .ut-qfoot{border-top-color:color-mix(in srgb,var(--paper) 14%,transparent);color:color-mix(in srgb,var(--paper) 70%,transparent)}
#ut-m-q .ut-qfoot b{color:var(--mint)}
/* the done state and the result, on the dark stage */
#ut-m-q .ut-qdone .ut-qt{color:var(--paper);text-transform:uppercase;font-weight:900}
#ut-m-q .ut-done .ut-br-k{color:var(--mint)}
#ut-m-q .ut-done .ut-br-n{color:var(--paper)}
#ut-m-q .ut-br-bar{background:color-mix(in srgb,var(--paper) 15%,transparent)}
#ut-m-q .ut-br-bar i{background:var(--lux-iridescent)}
#ut-m-q .ut-done .ut-br-read,#ut-m-q .ut-br-steps{color:var(--paper)}
#ut-m-q .ut-br-steps li::marker{color:var(--mint)}
#ut-m-q .ut-br-ap{background:color-mix(in srgb,var(--paper) 8%,transparent);border:1px solid color-mix(in srgb,var(--paper) 16%,transparent)}
#ut-m-q .ut-done .ut-br-ap p{color:var(--paper)}
#ut-m-q .ut-br-go{background:var(--lux-iridescent);color:var(--lux-deep)}
#ut-m-q .ut-br-plus{background:var(--lux-deep);color:var(--lux-iris)}
@media(max-width:760px){ #ut-m-q .ut-qsteps legend.ut-qt{font-size:1.4rem} #ut-m-q .ut-qsteps .chip{font-size:.98rem;min-height:52px} }
/* back = the chevron alone, like the calculator (the word "Back" stays as its accessible name); the "+2 when you finish" footer goes once they've finished */
#ut-m-q .ut-back{font-size:0;padding:8px;margin-left:-8px;border-radius:50%}
#ut-m-q .ut-back svg{width:22px;height:22px}
#ut-m-q .ut-back:hover{background:color-mix(in srgb,var(--paper) 12%,transparent)}
#ut-m-q:has(#gv-q-done:not([hidden])) .ut-qfoot{display:none}

/* ======================= the Check-up start screen (Andrew 2026-10-02) =======================
   "add a nice start page to the check up, others have more context at start": the quiz's first slide, in the Check-up's dark stage.
   Big Lato 900 caps with the iridescent second line, one plain line on what you get, the time, the iridescent button, the stylist faces.
   The questions hide while it shows; the footer keeps "+2 entries when you finish". Kit tokens only. */
#ut-m-q.ut-q-at-start #gv-form2{display:none}
#ut-m-q .ut-qstart{padding:34px 4px 6px;text-align:center}
#ut-m-q .ut-st-h{margin:0;font-family:var(--sans);font-weight:900;text-transform:uppercase;letter-spacing:-.025em;line-height:.98;color:var(--paper);font-size:clamp(2rem,8.6vw,2.6rem)}
#ut-m-q .ut-st-h:focus{outline:none}
#ut-m-q .ut-st-h span{display:block}
#ut-m-q .ut-st-h em{display:block;margin-top:.06em;padding-bottom:.06em;font-family:var(--sans);font-weight:900;font-style:normal;letter-spacing:inherit;color:transparent;background-image:var(--lux-iridescent);-webkit-background-clip:text;background-clip:text}
#ut-m-q .ut-st-sub{margin:16px auto 0;max-width:21em;font-family:var(--sans);font-weight:700;font-size:1.08rem;line-height:1.38;color:var(--paper);text-wrap:balance}
#ut-m-q .ut-st-small{margin:10px 0 0;font-size:.875rem;color:color-mix(in srgb,var(--paper) 82%,transparent)}
#ut-m-q .ut-st-go{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:58px;margin-top:22px;padding:14px 18px;border:0;border-radius:999px;cursor:pointer;
  background:var(--lux-iridescent);color:var(--lux-deep);font-family:var(--sans);font-weight:900;font-size:.95rem;letter-spacing:.11em;text-transform:uppercase;
  box-shadow:0 12px 30px -12px color-mix(in srgb,var(--lux-iris) 60%,transparent);transition:transform .2s var(--ease);-webkit-tap-highlight-color:transparent;touch-action:manipulation}
#ut-m-q .ut-st-go:focus-visible{outline:3px solid var(--lux-iris);outline-offset:3px}
@media(hover:hover){#ut-m-q .ut-st-go:hover{transform:translateY(-1px)}}
#ut-m-q .ut-st-proof{margin-top:22px;display:grid;gap:10px;justify-items:center}
#ut-m-q .ut-st-proof p{margin:0;font-family:var(--sans);font-weight:700;font-size:.82rem;color:var(--paper)}
#ut-m-q .ut-st-faces{display:flex}
#ut-m-q .ut-st-faces img{width:34px;height:34px;border-radius:50%;object-fit:cover;margin-left:-8px;border:2px solid var(--teal-950)}
#ut-m-q .ut-st-faces img:first-child{margin-left:0}
@media(prefers-reduced-motion:reduce){#ut-m-q .ut-st-go{transition:none}}

/* ================= 2026-10-06: sand-page colors for the prize values ================= */
.ub .pz-val{color:var(--primary)}
.ub .pz-in{color:color-mix(in srgb,var(--ink) 80%,transparent)}
.ub .pz-grand-prize .tp-th{box-shadow:0 0 0 2px var(--lux-iris),0 16px 30px -18px color-mix(in srgb,var(--deep) 55%,transparent)}

/* ================= 2026-10-06: "Get 3 more chances to win" (replaces the Follow Bex tile) =================
   One card above the tiles: heading, one line, three rows (avatar, @handle, Follow, "I followed"). Phone first: on a phone each row is two lines
   (avatar + handle, then the two buttons side by side). Every class here is .gf-. Kit tokens only, no hex. */
.gf{max-width:760px;margin:0 auto clamp(34px,4.5vw,52px);padding:clamp(20px,2.6vw,28px) clamp(14px,2.6vw,28px) clamp(16px,2.2vw,24px);border-radius:24px;border:2px solid transparent;
  background:linear-gradient(var(--tone),var(--tone)) padding-box,var(--lux-iridescent) border-box;box-shadow:var(--d-card-sh-light)}
.gf-h{margin:0 0 6px;text-align:center;font-family:var(--sans);font-weight:900;text-transform:uppercase;letter-spacing:-.01em;line-height:1.02;font-size:clamp(1.55rem,3.4vw,2.2rem);color:var(--deep);text-wrap:balance}
.gf-sub{margin:0 0 16px;text-align:center;font-size:1.02rem;line-height:1.4;color:color-mix(in srgb,var(--ink) 78%,transparent)}
.gf-sub b{color:var(--deep)}
.gf-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.gf-row{position:relative;display:grid;grid-template-columns:52px minmax(0,1fr) auto auto auto;align-items:center;gap:8px 12px;padding:10px 12px;border-radius:18px;
  background:color-mix(in srgb,var(--sand) 46%,var(--tone));transition:background .25s var(--ease)}
.gf-av{width:52px;height:52px;border-radius:50%;overflow:hidden;display:grid;place-items:center;flex:none;box-shadow:0 0 0 2px var(--tone),0 0 0 4px var(--lux-iris)}
.gf-av img{width:100%;height:100%;object-fit:cover;object-position:50% 16%;display:block}
.gf-av-i{background:var(--lux-iridescent);color:var(--lux-deep);font-family:var(--sans);font-weight:900;font-size:.95rem;letter-spacing:.04em}
.gf-btns{display:contents}
.gf-who{display:block;min-width:0}
.gf-who b{display:block;font-family:var(--sans);font-weight:700;font-size:1.04rem;line-height:1.2;color:var(--deep);overflow-wrap:anywhere}
.gf-who small{display:block;margin-top:2px;font-size:.8rem;line-height:1.2;color:color-mix(in srgb,var(--ink) 66%,transparent)}
.gf-go,.gf-did{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 18px;border-radius:999px;cursor:pointer;
  font-family:var(--sans);font-weight:800;font-size:.95rem;line-height:1;white-space:nowrap;-webkit-tap-highlight-color:transparent;transition:transform .15s var(--ease),background .2s var(--ease),box-shadow .2s var(--ease)}
.gf-go{background:var(--primary);color:var(--paper)}
.gf-go svg{width:18px;height:18px;flex:none}
.gf-did{color:var(--deep);box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--deep) 30%,transparent);background:var(--tone)}
.gf-box{width:22px;height:22px;border-radius:7px;flex:none;display:grid;place-items:center;box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--deep) 45%,transparent);color:transparent;transition:background .2s var(--ease),color .2s var(--ease)}
.gf-box svg{width:15px;height:15px}
.gf-n{font-family:var(--sans);font-weight:900;font-size:1.7rem;line-height:1;letter-spacing:-.02em;color:var(--primary);padding:0 4px}
.gf-go:active,.gf-did:active{transform:scale(.96)}
.gf-go:focus-visible,.gf-did:focus-visible{outline:3px solid var(--primary);outline-offset:3px}
@media(hover:hover){.gf-go:hover{transform:translateY(-2px)}.gf-did:not(:disabled):hover{box-shadow:inset 0 0 0 2px var(--primary)}}
/* after Follow is tapped, the check pulses once so the next step is obvious */
.gf-row.is-went:not(.is-done) .gf-did{animation:gfpulse 1.1s ease-in-out 2;box-shadow:inset 0 0 0 2px var(--primary)}
@keyframes gfpulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
/* done */
.gf-row.is-done{background:color-mix(in srgb,var(--mint) 24%,var(--tone))}
.gf-row.is-done .gf-go{background:color-mix(in srgb,var(--deep) 14%,var(--tone));color:var(--deep)}
.gf-row.is-done .gf-did{cursor:default;box-shadow:none;background:transparent;color:var(--primary)}
.gf-row.is-done .gf-box{background:var(--primary);color:var(--paper);box-shadow:none}
.gf-row.is-done .gf-n{display:none}
.gf-err{grid-column:1/-1;font-size:.88rem;font-weight:700;color:var(--primary)}
.gf-all{margin:14px 0 0;text-align:center;font-weight:800;color:var(--primary)}
.gf-row.ut-pop{animation:utpop .55s cubic-bezier(.3,1.6,.5,1)}
@media(max-width:760px){
  .gf{border-radius:20px;padding:18px 12px 12px}
  .gf-sub{font-size:.95rem;margin-bottom:14px}
  .gf-row{grid-template-columns:46px minmax(0,1fr) auto;gap:10px;padding:10px}
  .gf-av{width:46px;height:46px}
  .gf-who{grid-column:2}
  .gf-n{grid-column:3;justify-self:end;font-size:1.5rem}
  .gf-who b{font-size:1rem}
  .gf-btns{grid-column:1 / -1;display:flex;gap:10px}
  .gf-go,.gf-did{flex:1 1 0;min-width:0;min-height:48px;padding:0 10px;font-size:.92rem}
}
@media(prefers-reduced-motion:reduce){.gf-row.is-went:not(.is-done) .gf-did,.gf-row.ut-pop{animation:none}.gf-go,.gf-did{transition:none}}

/* with Follow Bex moved out, FIVE tiles remain: 3 + 2 on desktop (the bottom pair centered), 2 + 2 + 1 on phones (the last one centered) */
.ut-grid-wrap{margin-top:30px}
@media(min-width:761px){
  .ut-grid-wrap{margin:30px auto 0}
  .ut-grid > .ut-tile:nth-child(4){grid-column:2 / span 2}
  .ut-grid > .ut-tile:nth-child(5){grid-column:4 / span 2}
}
@media(max-width:760px){
  .ut-grid > .ut-tile:last-child:nth-child(odd){grid-column:1 / -1;justify-self:center;width:calc(50% - 6px)}
}