/* bex+Co. October Beauty Pro Giveaway: /giveaway/ entry page. Round 14 design (concept s-loud-clean,
   vault clients/bex/fill-chairs-giveaway-2026-09/concepts-r2/s-loud-clean/style.css), ported 2026-09-29.
   Rules for sections the page doesn't have were pruned; nothing that renders was changed.
   Loads after bex-kit-v2.css and bex-kit-lux-v1.css. Kit tokens only, no hex.
   /giveaway/rules/ and /giveaway/partners/ use giveaway-pages.css instead. */

:root{
  --on-dark:var(--paper);
  --on-dark-2:color-mix(in srgb,var(--paper) 82%,transparent);
  --hair-dark:color-mix(in srgb,var(--paper) 16%,transparent);
  --d-line:color-mix(in srgb,var(--ink) 12%,transparent);
  --d-line-2:color-mix(in srgb,var(--ink) 22%,transparent);
  --d-dash:color-mix(in srgb,var(--primary) 40%,transparent);
  --d-stub:color-mix(in srgb,var(--lux-iris) 28%,var(--tone));
  --d-shadow:drop-shadow(0 2px 3px color-mix(in srgb,var(--teal-950) 20%,transparent)) drop-shadow(0 30px 44px color-mix(in srgb,var(--teal-950) 45%,transparent));
  --d-card-sh:0 2px 4px color-mix(in srgb,var(--teal-950) 14%,transparent),0 30px 60px -14px color-mix(in srgb,var(--teal-950) 50%,transparent);
  --d-card-sh-light:0 2px 4px color-mix(in srgb,var(--deep) 8%,transparent),0 24px 48px -12px color-mix(in srgb,var(--deep) 24%,transparent);
  --d-r:22px;
  --d-notch:14px;
}
[hidden]{display:none!important}
html{overflow-x:clip}
.wrap{max-width:1320px;margin:0 auto;padding:0 30px}
em{font-style:italic;font-weight:500}

/* ---------------- the Friday Winner seal (from A) ---------------- */
.sa-s1{stop-color:var(--lux-blush)}.sa-s2{stop-color:var(--lux-iris)}.sa-s3{stop-color:color-mix(in srgb,var(--lux-iris) 50%,var(--mint))}.sa-s4{stop-color:color-mix(in srgb,var(--mint) 60%,var(--tone))}.sa-s5{stop-color:var(--lux-blush)}
.seal{display:block;aspect-ratio:1;color:var(--lux-deep);--sa-fill:url(#sa-grad);--sa-stroke:none;filter:drop-shadow(0 12px 26px color-mix(in srgb,var(--teal-950) 50%,transparent))}
.seal svg{width:100%;height:100%;display:block;overflow:visible}
.sa-body{fill:var(--sa-fill);stroke:var(--sa-stroke);stroke-width:.8;stroke-dasharray:2 2.4}
.sa-line{fill:none;stroke:currentColor;stroke-width:1.2;opacity:.7}
.sa-inner{stroke-width:.9;opacity:.4}
.sa-ring{fill:currentColor;font-family:var(--sans);font-weight:700;font-size:13px}
.sa-small{fill:currentColor;font-family:var(--sans);font-weight:700;font-size:10.5px;letter-spacing:3.2px}
.sa-big{fill:currentColor;font-family:var(--serif);font-style:italic;font-weight:500;font-size:37px}

/* ---------------- header ---------------- */
.hdr{position:sticky;top:0;z-index:200;background:color-mix(in srgb,var(--lux-deep) 84%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--hair-dark)}
.hdr-in{max-width:1320px;margin:0 auto;padding:0 30px;height:66px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.hdr-brand{display:flex;align-items:center;gap:14px}
.hdr-brand img{height:26px;width:auto;filter:brightness(0) invert(1)}
.hdr-div{width:1px;height:22px;background:var(--hair-dark)}
.hdr-name{font-size:.7rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--on-dark-2)}
.hdr-cta{font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--lux-deep);background:var(--paper);padding:12px 22px;border-radius:999px;white-space:nowrap;transition:.2s var(--ease)}
.hdr-cta:hover{background:var(--lux-iris)}

/* ---------------- the stage: deep teal, one soft spotlight ---------------- */
.stage{position:relative;overflow:hidden;color:var(--on-dark);
  background:
    radial-gradient(70% 60% at 50% -12%,color-mix(in srgb,var(--mint) 30%,transparent),transparent 68%),
    radial-gradient(40% 35% at 88% 38%,color-mix(in srgb,var(--lux-iris) 12%,transparent),transparent 70%),
    radial-gradient(60% 40% at 50% 104%,color-mix(in srgb,var(--tealbright) 30%,transparent),transparent 70%),
    var(--lux-panel)}
.spot{position:absolute;left:50%;top:-10%;width:min(1100px,110vw);height:120%;transform:translateX(-50%);pointer-events:none;
  background:linear-gradient(180deg,color-mix(in srgb,var(--paper) 13%,transparent),transparent 72%);
  clip-path:polygon(40% 0,60% 0,100% 100%,0 100%);filter:blur(60px);opacity:.6}
.stage .eyebrow{color:var(--mint)}


/* ---------------- the ticket ---------------- */
.tk{position:relative;filter:var(--d-shadow)}
.tk-main,.tk-stub{background:var(--tone);position:relative;color:var(--ink)}
.tk-main{border-radius:var(--d-r) var(--d-r) 0 0;padding:26px 30px 24px;
  -webkit-mask:radial-gradient(circle at 0 100%,transparent var(--d-notch),black calc(var(--d-notch) + .5px)) left/51% 100% no-repeat,radial-gradient(circle at 100% 100%,transparent var(--d-notch),black calc(var(--d-notch) + .5px)) right/51% 100% no-repeat;
          mask:radial-gradient(circle at 0 100%,transparent var(--d-notch),black calc(var(--d-notch) + .5px)) left/51% 100% no-repeat,radial-gradient(circle at 100% 100%,transparent var(--d-notch),black calc(var(--d-notch) + .5px)) right/51% 100% no-repeat}
.tk-stub{background:var(--d-stub);border-radius:0 0 var(--d-r) var(--d-r);padding:18px 30px 20px;display:flex;align-items:center;gap:14px;
  -webkit-mask:radial-gradient(circle at 0 0,transparent var(--d-notch),black calc(var(--d-notch) + .5px)) left/51% 100% no-repeat,radial-gradient(circle at 100% 0,transparent var(--d-notch),black calc(var(--d-notch) + .5px)) right/51% 100% no-repeat;
          mask:radial-gradient(circle at 0 0,transparent var(--d-notch),black calc(var(--d-notch) + .5px)) left/51% 100% no-repeat,radial-gradient(circle at 100% 0,transparent var(--d-notch),black calc(var(--d-notch) + .5px)) right/51% 100% no-repeat}
.tk-stub::before{content:"";position:absolute;top:0;left:24px;right:24px;border-top:2px dashed var(--d-dash)}
.tk-title{font-family:var(--serif);font-size:2.1rem;line-height:1.05;margin:0 0 18px;color:var(--deep)}
.tk-title em{color:var(--primary)}
.tk-form{display:grid;gap:12px}
.fld{display:grid;gap:6px}
.fld span{font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.fld input{font:inherit;font-size:16px;padding:15px 16px;border-radius:12px;border:1px solid var(--d-line-2);background:var(--paper);color:var(--ink);outline:none;transition:.2s var(--ease)}
.fld input:focus{border-color:var(--primary);box-shadow:0 0 0 4px color-mix(in srgb,var(--primary) 14%,transparent);background:var(--tone)}
.tk-btn{width:100%;padding:20px 24px;font-size:.9rem;margin-top:4px}
.tk-fine{font-size:.76rem;line-height:1.5;color:var(--secondary);margin:2px 0 0;text-align:center}
.tk-fine a{text-decoration:underline;text-underline-offset:2px}
.tk-back{margin:0 0 12px;padding:10px 12px;border-radius:10px;background:color-mix(in srgb,var(--primary) 10%,transparent);color:var(--ink);font-size:.92rem;font-weight:700;line-height:1.4;text-align:center}
.tk-err{font-size:.85rem;color:var(--primary);font-weight:700;margin:0;text-align:center}
.faces{display:flex;align-items:center;flex:none}
.faces img,.face-plus{width:44px;height:44px;border-radius:50%;border:2.5px solid var(--d-stub);margin-left:-12px;object-fit:cover;background:var(--sand)}
.faces img:first-child{margin-left:0}
.face-plus{display:grid;place-items:center;background:var(--primary);color:var(--paper);font-weight:700;font-size:1.15rem;line-height:1}
.faces-cap{margin:0;font-size:.88rem;line-height:1.4;color:var(--ink)}


/* ---------------- ticker ---------------- */
.ticker{position:relative;z-index:3;background:var(--lux-iridescent);color:var(--lux-deep);overflow:hidden;white-space:nowrap;border-block:1px solid color-mix(in srgb,var(--lux-deep) 20%,transparent)}
.ticker-track{display:inline-flex;align-items:center;gap:30px;padding:20px 0;animation:winmarq 44s linear infinite}
.ticker span{font-size:.9rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase}
.ticker span.it{font-family:var(--serif);font-style:italic;font-weight:500;font-size:2.1rem;letter-spacing:0;text-transform:none;line-height:1}
.ticker i{font-style:normal;font-size:1rem;color:var(--primary)}
@keyframes winmarq{from{transform:translateX(0)}to{transform:translateX(-50%)}}


/* ---------------- you're in ---------------- */
.in-top{padding:40px 0 70px}
.in-wrap{position:relative;z-index:1;max-width:660px;display:grid;gap:22px}
.in-pic{margin:0 auto -38px;position:relative;z-index:2;width:200px;background:var(--tone);padding:9px 9px 0;border-radius:16px;box-shadow:var(--d-card-sh);transform:rotate(-5deg)}
.in-pic img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:10px}
.in-pic figcaption{font-family:var(--serif);font-style:italic;font-size:1.2rem;text-align:center;padding:9px 0 11px;color:var(--deep)}
.tk-in .tk-main{padding-top:50px;padding-bottom:28px}
.in-h{font-size:clamp(2.8rem,8vw,4.2rem);line-height:.96;margin:6px 0 14px;color:var(--deep);max-width:78%}
.in-h em{color:var(--primary)}
.in-l{margin:0;font-size:1.08rem;color:var(--ink)}
.stamp{position:absolute;right:22px;top:62px;width:96px;height:96px;border-radius:50%;display:grid;place-items:center;text-align:center;border:2.5px solid var(--primary);color:var(--primary);font-family:var(--serif);font-style:italic;font-size:1.35rem;line-height:1;transform:rotate(12deg);opacity:.9;box-shadow:inset 0 0 0 5px var(--tone),inset 0 0 0 6.5px color-mix(in srgb,var(--primary) 50%,transparent)}
.in-meter{flex-wrap:wrap;gap:8px}
.m{font-size:.68rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:9px 13px;border-radius:999px;border:1.5px dashed var(--d-dash);color:var(--secondary);background:color-mix(in srgb,var(--tone) 60%,transparent)}
.m b{color:var(--deep);margin-left:4px}
.m.on{border:1.5px solid var(--primary);background:var(--primary);color:var(--paper)}
.m.on b{color:var(--paper)}
.in-body{background:var(--sand);padding:36px 0 90px}
.in-card{background:var(--tone);border-radius:var(--d-r);padding:28px;box-shadow:var(--d-card-sh-light);position:relative}
.in-card h2{font-size:clamp(2rem,5.4vw,2.7rem);margin:0 0 6px;color:var(--deep)}
.in-card h2 em{color:var(--primary)}
.in-card .eyebrow{margin-bottom:10px}
.q{display:grid;gap:16px;margin-top:12px}
.q fieldset{border:0;margin:0;padding:0}
.q legend{font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);margin-bottom:8px}
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chips .chip{font-size:.82rem;padding:10px 15px}
.q .btn{justify-self:start}
.link-row{display:flex;align-items:center;gap:8px;margin:14px 0 12px;padding:6px 6px 6px 16px;border-radius:14px;border:1.5px dashed var(--d-dash);background:var(--paper)}
.link-row code{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--sans);font-weight:700;font-size:.95rem;color:var(--deep)}
.link-row .copy{width:auto;padding:12px 18px;border-radius:10px}
.share{display:flex;gap:8px;flex-wrap:wrap}
.pill{font:inherit;font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:11px 18px;border-radius:999px;border:1.5px solid var(--primary);background:transparent;color:var(--primary);cursor:pointer;white-space:nowrap;transition:.2s var(--ease)}
.pill:hover{background:var(--primary);color:var(--paper)}
.in-walk{background:var(--lux-iridescent);color:var(--lux-deep)}
.in-walk h2{color:var(--lux-deep)}
.in-walk p{color:color-mix(in srgb,var(--ink) 85%,transparent)}
.in-walk .eyebrow{color:var(--primary)}
.in-walk::before{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--lux-iridescent);filter:blur(16px);opacity:.45;z-index:-1}

/* ---------------- footer ---------------- */
.foot{background:var(--teal-950);color:color-mix(in srgb,var(--paper) 74%,transparent);padding:42px 0 48px;text-align:center;font-size:.86rem}
.foot p{margin:0 0 6px}
.foot a{color:var(--paper);text-decoration:underline;text-underline-offset:2px}


/* ---------------- phones: headline, then ticket ---------------- */
@media(max-width:760px){
  .wrap,.hdr-in{padding-left:16px;padding-right:16px}
  .hdr-in{height:60px}
  .hdr-name,.hdr-div{display:none}
  .hdr-cta{padding:11px 18px;font-size:.66rem}
  .tk-main{padding:22px 18px 20px}
  .tk-stub{padding:16px 18px}
  .tk-title{font-size:1.75rem}
  .faces img,.face-plus{width:38px;height:38px;margin-left:-10px}
  .faces-cap{font-size:.82rem}
  .ticker span.it{font-size:1.6rem}
  .ticker span{font-size:.74rem}
  .ticker-track{padding:16px 0}
  .in-top{padding:26px 0 48px}
  .in-card{padding:22px 18px}
  .stamp{width:76px;height:76px;font-size:1.05rem;right:14px;top:50px}
}

@media(prefers-reduced-motion:reduce){
  .ticker-track{animation:none}
}

/* ================= round 5 (K): hero ends, then two marquees ================= */
.ticker{border-block:0}
.ticker-track{padding:22px 0}


/* slim legal footer */
.foot{padding:26px 0 30px;font-size:.8rem}
.foot p{margin:0 0 4px}


/* header lockup: divider + text centered on the optical center of the "Co" (the C's ink), ruled 09-29.
   The nudges are measured, not eyeballed: see the round 5 report. */
:root{--wm-nudge-div:2.6px;--wm-nudge-text:2.6px}
.hdr-brand{align-items:center}
.hdr-div{transform:translateY(var(--wm-nudge-div))}
.hdr-name{transform:translateY(var(--wm-nudge-text));line-height:1}
@media(max-width:760px){
  .hdr-brand{gap:12px}
  .hdr-div{display:block;height:24px}
  /* Andrew 10-01: three stacked lines read clunky. Phones show two: OCTOBER / GIVEAWAY */
  :root{--wm-nudge-text:0px}
  .hdr-bp{display:none}
  .hdr-name{display:block;font-size:.6rem;letter-spacing:.24em;line-height:1.45;max-width:7.5em}
  .hdr-cta{padding:10px 14px;font-size:.62rem;letter-spacing:.12em}
}

/* faces: the section that ends the page */
.win-sec{padding:clamp(64px,7vw,96px) 0 0}
.win-head{position:relative;z-index:1;text-align:center;margin-bottom:clamp(34px,4vw,50px)}
.win-head h2{font-size:clamp(2.8rem,6vw,5.6rem);line-height:.95;letter-spacing:-.02em;color:var(--on-dark);margin:0 0 18px}
.win-head h2 em{display:block;color:var(--lux-iris)}
.win-head .lead{color:var(--on-dark-2);margin:0 auto 26px;font-size:1.2rem;max-width:44ch}
.win-btn{background:var(--paper);color:var(--lux-deep);padding:18px 34px;font-size:.84rem}
.win-btn:hover{background:var(--lux-iris);transform:translateY(-2px)}
.win-note{position:relative;z-index:1;margin:0;padding:14px 16px 20px;text-align:center;font-size:.8rem;color:var(--on-dark-2)}
@media(max-width:760px){ .win-head .lead{font-size:1.05rem} }
/* ================= round 7 (M): light under the hero, circles that pop ================= */

/* the faces section goes LIGHT: only the hero stays dark */
.win-light{background:var(--sand);color:var(--ink);padding:clamp(64px,7vw,100px) 0 clamp(10px,2vw,20px);overflow:hidden}
.win-light .win-head h2{color:var(--deep)}
.win-light .win-head h2 .ln,.win-light .win-head h2 em{display:block}
.win-light .win-head h2 em{color:var(--primary)}
.win-light .win-head .lead{color:color-mix(in srgb,var(--ink) 84%,transparent);max-width:none}
.win-light .win-head .lead .ln{display:block}
.win-light .win-btn{background:var(--primary);color:var(--paper);padding:18px 34px;font-size:.84rem}
.win-light .win-btn:hover{background:var(--deep)}
.win-light .win-note{color:var(--secondary);padding:18px 16px 28px}

.circles{display:none}
.faces-circles .circles{display:block}

/* three very slow rows, drifting opposite ways */
.circles{--c:104px;--gap:24px;position:relative;z-index:1;padding:14px 0 6px}
.c-row{position:relative;padding:12px 0}
.c-row.has-pop{z-index:4}
.c-track{display:flex;gap:var(--gap);width:max-content;animation:winmarq 170s linear infinite}
.c-row-2 .c-track{animation-direction:reverse;animation-duration:190s;margin-left:calc(var(--c) * -.55)}
.c-row-3 .c-track{animation-duration:210s;margin-left:calc(var(--c) * -.25)}
.cf{position:relative;flex:none;width:var(--c);height:var(--c)}
.cf img{width:100%;height:100%;border-radius:50%;object-fit:cover;object-position:50% 30%;border:3px solid var(--paper);background:var(--paper);box-shadow:0 8px 18px -8px color-mix(in srgb,var(--deep) 45%,transparent);transition:transform .45s cubic-bezier(.3,1.6,.5,1),box-shadow .3s var(--ease)}
/* the pop: the face jumps, an iridescent ring, a "Could be you" tag, confetti */
.cf.pop{z-index:3}
.cf.pop img{transform:scale(1.22);box-shadow:0 0 0 3px var(--paper),0 0 0 7px var(--lux-iris),0 18px 34px -10px color-mix(in srgb,var(--deep) 55%,transparent)}
.cf::before{content:"";position:absolute;inset:-16%;border-radius:50%;background:var(--lux-iridescent);filter:blur(12px);opacity:0;transform:scale(.6);transition:opacity .3s var(--ease),transform .45s var(--ease);z-index:-1}
.cf.pop::before{opacity:.95;transform:scale(1.15)}
.c-tag{position:absolute;left:50%;bottom:-12px;z-index:5;transform:translate(-50%,6px) scale(.7);opacity:0;white-space:nowrap;padding:7px 12px;border-radius:999px;background:var(--lux-deep);color:var(--paper);font-size:.62rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;box-shadow:0 8px 18px -6px color-mix(in srgb,var(--teal-950) 60%,transparent);animation:ctag .42s cubic-bezier(.3,1.6,.5,1) forwards}
.c-tag.out{animation:ctagout .28s var(--ease) forwards}
@keyframes ctag{to{transform:translate(-50%,0) scale(1);opacity:1}}
@keyframes ctagout{from{transform:translate(-50%,0) scale(1);opacity:1}to{transform:translate(-50%,4px) scale(.8);opacity:0}}
.cfx{position:absolute;left:50%;top:50%;width:11px;height:7px;border-radius:1.5px;z-index:2;pointer-events:none}


@media(max-width:760px){
  .circles{--c:66px;--gap:14px}
  .c-row{padding:9px 0}
  .c-tag{font-size:.5rem;padding:5px 8px;letter-spacing:.1em;bottom:-10px}
  .cfx{width:7px;height:5px}
  .win-light .win-head h2{font-size:clamp(2.5rem,12vw,3.2rem)}
  .win-light .win-head .lead{font-size:1.05rem}
}
@media(prefers-reduced-motion:reduce){ .c-track{animation:none} }

/* ================= shared calm card (kept from round 8) ================= */
.calm .tk{filter:none;background:var(--tone);border-radius:20px;overflow:hidden;box-shadow:0 1px 2px color-mix(in srgb,var(--teal-950) 20%,transparent),0 26px 60px -22px color-mix(in srgb,var(--teal-950) 65%,transparent)}
.calm .tk-main,.calm .tk-stub{-webkit-mask:none;mask:none;border-radius:0}
.calm .tk-main{background:transparent;padding:28px 28px 22px}
.calm .tk-stub{background:color-mix(in srgb,var(--sand) 45%,var(--tone));padding:14px 28px;gap:12px}
.calm .tk-stub::before{display:none}
.calm .faces img,.calm .face-plus{width:34px;height:34px;margin-left:-9px;border-width:2px;border-color:color-mix(in srgb,var(--sand) 45%,var(--tone))}
.calm .faces img:first-child{margin-left:0}
.calm .face-plus{font-size:1rem}
.calm .faces-cap{font-size:.82rem}
.calm .tk-title{font-size:1.8rem;margin-bottom:16px}
.calm .fld input{padding:13px 15px}
.calm .tk-btn{padding:17px 22px}
/* top nav: darker than the hero, never the gray-green (Andrew 09-29) */
.calm .hdr{background:color-mix(in srgb,var(--teal-950) 94%,transparent);border-bottom-color:color-mix(in srgb,var(--paper) 8%,transparent)}
/* the two reassurances live under the button, side by side */
.tk-perks{list-style:none;margin:2px 0 0;padding:0;display:flex;justify-content:center;flex-wrap:wrap;gap:6px 18px}
.tk-perks li{display:inline-flex;align-items:center;gap:6px;font-size:.84rem;font-weight:700;color:var(--deep)}
.tk-perks svg{width:16px;height:16px;color:var(--primary)}

/* ================= p1 "The ticket is the hero" (2026-09-29) =================
   One centered stack under a soft spotlight: headline, three check lines, then the notched
   ticket (the old loved one, rebuilt crisp), then the four prizes. The ticket is the biggest,
   brightest object on the first screen. Kit tokens only, no hex. */
.tp{--tk-w:640px;--tp-notch:16px;--tp-r:26px}
.tp-in{position:relative;z-index:1;max-width:1320px;margin:0 auto;padding:clamp(30px,4.2vh,46px) 30px clamp(64px,7vw,92px);
  display:flex;flex-direction:column;align-items:center;text-align:center}

/* the spotlight: a soft cone from the top that pools on the ticket */
.tp-beam{position:absolute;left:50%;top:-4%;width:min(1180px,120vw);height:78%;transform:translateX(-50%);pointer-events:none;z-index:0;
  background:linear-gradient(180deg,color-mix(in srgb,var(--paper) 11%,transparent),color-mix(in srgb,var(--mint) 9%,transparent) 70%,transparent);
  clip-path:polygon(41% 0,59% 0,86% 100%,14% 100%);filter:blur(56px)}

/* headline */
.tp-h1{margin:0;color:var(--on-dark);font-weight:400;letter-spacing:-.025em;line-height:.9;font-size:clamp(3.2rem,6.1vw,6.7rem)}
.tp-h1 .l1,.tp-h1 .l2{display:block}
.tp-h1 em{color:var(--lux-iris);font-weight:500;padding-bottom:.04em}

/* the promise: kicker + three simple check lines */
.tp-promise{margin-top:clamp(16px,2.6vh,26px)}
.tp-kicker{margin:0 0 12px;font-family:var(--serif);font-size:clamp(1.5rem,1.9vw,1.95rem);line-height:1.15;color:var(--on-dark)}
.tp-checks{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:10px 34px}
.tp-checks li{display:inline-flex;align-items:center;gap:9px;font-family:var(--sans);font-weight:700;font-size:1.12rem;line-height:1.3;color:var(--on-dark)}
.tp-checks svg{flex:none;width:22px;height:22px;color:var(--mint)}

/* the ticket */
.tp-card{position:relative;width:min(var(--tk-w),100%);margin-top:clamp(22px,3.4vh,34px);text-align:left}
.tp-glow{position:absolute;z-index:-1;inset:-6px -10px 0;border-radius:40px;pointer-events:none;
  background:linear-gradient(115deg,color-mix(in srgb,var(--lux-blush) 55%,transparent),color-mix(in srgb,var(--lux-iris) 62%,transparent) 40%,color-mix(in srgb,var(--mint) 50%,transparent));
  filter:blur(46px);opacity:.7}
.tp-card::before{content:"";position:absolute;z-index:-2;left:50%;top:50%;width:175%;height:165%;transform:translate(-50%,-50%);pointer-events:none;
  background:radial-gradient(ellipse closest-side,color-mix(in srgb,var(--mint) 16%,transparent),transparent)}
.tp .tk{filter:drop-shadow(0 1px 1.5px color-mix(in srgb,var(--teal-950) 22%,transparent)) drop-shadow(0 30px 44px color-mix(in srgb,var(--teal-950) 42%,transparent));
  background:none;border-radius:0;overflow:visible;box-shadow:none}
.tp .tk-main{border-radius:var(--tp-r) var(--tp-r) 0 0;padding:34px 40px 24px;
  background:var(--lux-iridescent) top/100% 6px no-repeat,var(--tone);
  -webkit-mask:radial-gradient(circle at 0 100%,transparent var(--tp-notch),black calc(var(--tp-notch) + .5px)) left/51% 100% no-repeat,radial-gradient(circle at 100% 100%,transparent var(--tp-notch),black calc(var(--tp-notch) + .5px)) right/51% 100% no-repeat;
          mask:radial-gradient(circle at 0 100%,transparent var(--tp-notch),black calc(var(--tp-notch) + .5px)) left/51% 100% no-repeat,radial-gradient(circle at 100% 100%,transparent var(--tp-notch),black calc(var(--tp-notch) + .5px)) right/51% 100% no-repeat}
.tp .tk-stub{border-radius:0 0 var(--tp-r) var(--tp-r);padding:18px 40px 20px;gap:16px;justify-content:center;
  background:color-mix(in srgb,var(--lux-iris) 34%,var(--tone));
  -webkit-mask:radial-gradient(circle at 0 0,transparent var(--tp-notch),black calc(var(--tp-notch) + .5px)) left/51% 100% no-repeat,radial-gradient(circle at 100% 0,transparent var(--tp-notch),black calc(var(--tp-notch) + .5px)) right/51% 100% no-repeat;
          mask:radial-gradient(circle at 0 0,transparent var(--tp-notch),black calc(var(--tp-notch) + .5px)) left/51% 100% no-repeat,radial-gradient(circle at 100% 0,transparent var(--tp-notch),black calc(var(--tp-notch) + .5px)) right/51% 100% no-repeat}
.tp .tk-stub::before{display:block;left:calc(var(--tp-notch) + 12px);right:calc(var(--tp-notch) + 12px);border-top:2px dashed color-mix(in srgb,var(--primary) 38%,transparent)}
.tp .tk-title{font-family:var(--serif);font-size:2.45rem;line-height:1.05;margin:0 0 20px;color:var(--deep);text-align:center}
.tp .tk-form{gap:14px}
.tp-fields{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.tp .fld{gap:7px}
.tp .fld span{font-size:.68rem;letter-spacing:.16em;color:var(--secondary)}
.tp .fld input{padding:15px 16px;border-radius:12px;background:var(--paper);min-height:52px}
.tp .tk-btn{padding:22px 24px;margin-top:4px;font-size:1rem;letter-spacing:.16em;border-radius:999px;
  box-shadow:0 12px 26px -10px color-mix(in srgb,var(--primary) 75%,transparent)}
.tp .tk-btn:hover{background:var(--deep);transform:translateY(-1px)}
.tp .tk-perks{gap:6px 26px;margin-top:4px}
.tp .tk-perks li{font-size:.9rem}
.tp .tk-perks svg{width:17px;height:17px}
.tp .tk-fine{font-size:.74rem;max-width:52ch;margin:0 auto}
.tp .faces img,.tp .face-plus{width:40px;height:40px;margin-left:-11px;border:2.5px solid color-mix(in srgb,var(--lux-iris) 34%,var(--tone))}
.tp .faces img:first-child{margin-left:0}
.tp .face-plus{font-size:1.1rem}
.tp .faces-cap{font-family:var(--serif);font-style:italic;font-size:1.12rem;line-height:1.25;color:var(--deep)}

/* the prizes: below the ticket, a clean row of four */
.tp-prizes{width:100%;max-width:1080px;margin-top:clamp(68px,8vw,96px)}
.tp-pl{margin:0 0 24px;text-align:center;font-size:clamp(1rem,2.6vw,1.25rem);font-weight:900;letter-spacing:.22em;text-transform:uppercase;color:var(--mint)}
.tp-row{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,2vw,26px)}
.tp-row .tp-pz{display:block;color:var(--on-dark);text-align:center;cursor:default}
.tp-th img{transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.tp-th{position:relative;display:block;aspect-ratio:4/3;border-radius:16px;overflow:hidden;background:var(--lux-deep);
  box-shadow:0 0 0 1px var(--hair-dark),0 18px 34px -18px color-mix(in srgb,var(--teal-950) 90%,transparent);transition:transform .3s var(--ease)}
.tp-th img{width:100%;height:100%;object-fit:cover;object-position:50% 28%}
.tp-seal{display:grid;place-items:center;background:radial-gradient(70% 60% at 50% 0%,color-mix(in srgb,var(--mint) 30%,transparent),transparent 72%),var(--lux-deep)}
.tp-seal .seal{width:58%;filter:drop-shadow(0 10px 20px color-mix(in srgb,var(--teal-950) 60%,transparent))}
.tp-lb{display:block;margin-top:12px;font-family:var(--serif);font-style:italic;font-weight:500;font-size:clamp(1.1rem,1.4vw,1.35rem);line-height:1.15}
/* zoom on hover only on a real mouse (Andrew 2026-10-01). Shared by the opt-in page and the /giveaway/in/ prize row; the cards are not links. */
@media (hover:hover) and (pointer:fine){ .tp-row .tp-pz:hover .tp-th img{transform:scale(1.05)} }

/* phones: same order, stacked, ticket full width, prizes 2x2 */
@media(max-width:760px){
  .tp{--tp-notch:13px;--tp-r:20px}
  .tp-in{padding:24px 16px 52px}
  .tp-h1{font-size:calc((100vw - 32px) / 5.75)}
  .tp-promise{margin-top:18px}
  .tp-kicker{font-size:1.45rem;margin-bottom:12px}
  .tp-checks{flex-direction:column;align-items:flex-start;gap:9px;width:max-content;max-width:100%;margin:0 auto}
  .tp-checks li{font-size:1.06rem}
  .tp-checks svg{width:20px;height:20px}
  .tp-card{margin-top:24px}
  .tp-glow{filter:blur(30px);inset:0 -4px}
  .tp .tk-main{padding:26px 20px 20px}
  .tp .tk-title{font-size:1.9rem;margin-bottom:16px}
  .tp-fields{grid-template-columns:1fr;gap:12px}
  .tp .tk-form{gap:12px}
  .tp .tk-btn{padding:20px 20px;font-size:.94rem}
  .tp .tk-perks{gap:6px 16px}
  .tp .tk-perks li{font-size:.84rem}
  .tp .tk-stub{padding:15px 20px 16px;gap:12px;justify-content:flex-start}
  .tp .faces img,.tp .face-plus{width:34px;height:34px;margin-left:-10px;border-width:2px}
  .tp .faces img:first-child{margin-left:0}
  .tp .faces-cap{font-size:1rem}
  .tp-prizes{margin-top:60px}
  .tp-pl{margin-bottom:16px}
  .tp-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 14px}
  .tp-th{aspect-ratio:4/5;border-radius:14px}   /* Andrew 10-01: 4:5 on phones too, both pages */
  .tp-lb{font-size:1.1rem;margin-top:9px}
}
@media(prefers-reduced-motion:reduce){ .tp-th,.tp-th img{transition:none} .tp-row .tp-pz:hover .tp-th img{transform:none} }

/* ================= round 11 (q): B's two columns, the punch ticket on the right, big prize cards below ================= */
.tp-sub{display:block;margin-top:4px;font-size:.8rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--mint)}
@media(min-width:1000px){
  .tp{--tk-w:540px}
  .tp-in{display:grid;grid-template-columns:minmax(0,1fr) var(--tk-w);grid-template-areas:"h1 card" "promise card" "prizes prizes";grid-template-rows:auto 1fr auto;column-gap:clamp(48px,6vw,96px);align-items:start;justify-items:start;text-align:left;max-width:1320px;padding-top:clamp(40px,6vh,64px)}
  .tp-h1{grid-area:h1;align-self:end;font-size:clamp(4rem,6.4vw,7.2rem)}
  .tp-promise{grid-area:promise;margin-top:clamp(26px,3.6vh,38px)}
  .tp-kicker{font-size:clamp(1.6rem,2vw,2.05rem);margin-bottom:16px}
  .tp-checks{flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:14px}
  .tp-checks li{font-size:clamp(1.25rem,1.55vw,1.5rem);font-weight:400;gap:14px}
  .tp-checks svg{width:30px;height:30px;padding:6px;border-radius:50%;background:color-mix(in srgb,var(--mint) 18%,transparent)}
  .tp-card{grid-area:card;margin-top:0;justify-self:end;align-self:center}
  .tp .tk-main{padding:32px 36px 22px}
  .tp .tk-title{font-size:2.3rem}
  .tp-fields{grid-template-columns:1fr}
  .tp-beam{left:auto;right:calc(max(0px,(100vw - 1320px) / 2) - 150px);width:900px;transform:none}
  /* the prizes: a big, visual four-column row across the full width */
  .tp-prizes{grid-area:prizes;max-width:none;margin-top:clamp(76px,9vh,108px)}
  .tp-pl{font-size:clamp(1.15rem,1.4vw,1.45rem);margin-bottom:28px}
  .tp-row{gap:clamp(18px,2vw,28px)}
  .tp-th{aspect-ratio:4/5;border-radius:20px}
  .tp-lb{font-size:clamp(1.3rem,1.7vw,1.6rem);margin-top:14px}
}
/* phones: everything centered (the stack already is); prize labels centered too */
@media(max-width:760px){
  .tp-row .tp-pz{text-align:center}
  .tp-checks{align-items:center}
}
@media(min-width:1000px){
  .tp-in{grid-template-areas:". card" "h1 card" "promise card" ". card" "prizes prizes";grid-template-rows:1fr auto auto 1fr auto}
  .tp-h1{font-size:clamp(4rem,7.3vw,7.6rem)}
}
.tp .faces-cap{text-wrap:balance}
@media(max-width:760px){ .tp-sub{font-size:.66rem;letter-spacing:.12em} }

/* ================= round 12: bigger promise, bold full-width headline, no bottom marquee ================= */
/* the promise + three checks: bigger at every width */
.tp-kicker{font-size:clamp(1.9rem,2.5vw,2.5rem)}
.tp-checks li{font-size:clamp(1.3rem,1.9vw,1.85rem)}
@media(min-width:1000px){
  .tp-kicker{font-size:clamp(2rem,2.6vw,2.6rem);margin-bottom:20px}
  .tp-checks{gap:18px}
  .tp-checks li{font-size:clamp(1.45rem,2vw,1.95rem);gap:16px}
  .tp-checks svg{width:36px;height:36px;padding:8px}
}
@media(max-width:760px){
  .tp-kicker{font-size:1.7rem}
  .tp-checks li{font-size:1.28rem}
  .tp-checks svg{width:24px;height:24px}
}

/* ================= round 13 (r): the LOUD layer from the Liberty Hill mailer (build_bold.py) =================
   Lato 900 caps, tight leading, iridescent type on the key words, an iridescent pill, a round sticker.
   One serif italic line stays: the ticket's "It's free". Layout = round 11 split. */
/* Lato 900: the kit ships Lato 400/700 only, so its @font-face lives in fonts/lato-900.css (linked after the kit). */
:root{--loud:900 1em/.93 var(--sans)}

.lp-pill{display:inline-block;margin:0 0 20px;padding:10px 18px;border-radius:999px;background:var(--lux-iridescent);color:var(--lux-deep);font-family:var(--sans);font-weight:900;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;line-height:1.2}

.tp-h1{font-family:var(--sans);font-weight:900;text-transform:uppercase;letter-spacing:-.015em;line-height:.93;color:var(--paper)}
.tp-h1 em{font-style:normal;font-weight:900;color:transparent;background-image:var(--lux-iridescent);-webkit-background-clip:text;background-clip:text;padding-bottom:.04em}
/* ?h1=mix: second line back in Garamond italic, still iridescent */
.h1-mix .tp-h1 em{font-family:var(--serif);font-style:italic;font-weight:500;text-transform:none;letter-spacing:-.02em;font-size:1.28em;line-height:.9}

.lp-stick{display:grid;place-items:center;text-align:center;width:124px;height:124px;border-radius:50%;background:var(--lux-iridescent);color:var(--lux-deep);font-family:var(--sans);font-weight:900;font-size:.8rem;letter-spacing:.08em;line-height:1.15;text-transform:uppercase;transform:rotate(-10deg);box-shadow:0 16px 34px -12px color-mix(in srgb,var(--teal-950) 75%,transparent);position:relative;z-index:3}

.tp-kicker{font-family:var(--sans);font-weight:900;text-transform:uppercase;letter-spacing:.16em;color:var(--mint)}
.tp-checks li{font-weight:700}

/* the light section's headline: two-tone caps like the mailer back */
.win-light .win-head h2.lp-h2{font-family:var(--sans);font-weight:900;text-transform:uppercase;letter-spacing:-.015em;line-height:.93;font-size:clamp(2.6rem,5.6vw,5rem);color:var(--deep)}
.win-light .win-head h2.lp-h2 em{font-style:normal;color:var(--primary)}

@media(min-width:1000px){
  .tp-in{grid-template-areas:". card" "pill card" "h1 card" "promise card" ". card" "prizes prizes";grid-template-rows:1fr auto auto auto 1fr auto}
  .lp-pill{grid-area:pill}
  .tp-h1{grid-area:h1;font-size:clamp(3.2rem,calc((min(100vw,1320px) - 690px) / 9.2),5.2rem)}
  .lp-stick{grid-area:h1;justify-self:end;align-self:start;margin:-58px -8px 0 0}
  .tp-kicker{font-size:clamp(.95rem,1.1vw,1.1rem);margin-bottom:18px}
  .tp-promise{margin-top:clamp(30px,4vh,44px)}
}
@media(max-width:999px){
  .tp-in{position:relative}
  .lp-stick{position:absolute;right:12px;top:14px;width:92px;height:92px;font-size:.62rem}
}
@media(max-width:760px){
  .lp-pill{font-size:.64rem;letter-spacing:.12em;padding:8px 14px;margin-bottom:16px;max-width:calc(100% - 96px)}
  .tp-h1{font-size:calc((100vw - 32px) / 9.2)}
  .tp-kicker{font-size:.9rem;margin-bottom:14px}
  .lp-stick{top:10px;right:8px;width:84px;height:84px;font-size:.56rem}
}
/* three stacked lines, much bigger; the sticker rides beside "HERE." */
.tp-h1 .w{display:block;white-space:nowrap}
.tp-h1 .lp-stick{display:inline-grid;vertical-align:middle;margin:-.2em 0 0 .28em;position:relative;top:-.08em}
@media(min-width:1000px){
  .tp-h1{font-size:clamp(3.6rem,calc((min(100vw,1320px) - 690px) / 7.35),6.6rem);line-height:.9}
  .lp-stick{grid-area:auto;justify-self:auto;align-self:auto;margin:0}
  .tp-h1 .lp-stick{margin:-.2em 0 0 .28em}
}
@media(max-width:999px){ .tp-h1 .lp-stick{position:relative;right:auto;top:-.08em} }
@media(max-width:760px){
  .tp-h1{font-size:calc((100vw - 32px) / 7.35);line-height:.9}
  .lp-pill{max-width:none}
}
/* sticker lives outside the H1 (headline gate), placed beside "HERE." from the measured word width (2.71em) */
.lp-hwrap{position:relative;--h1fs:calc((100vw - 32px) / 7.35)}
.lp-hwrap .tp-h1{font-size:var(--h1fs)}
.lp-hwrap .lp-stick{position:absolute;margin:0;top:auto;right:auto;left:calc(50% + var(--h1fs) * 1.355 + 10px);bottom:calc(var(--h1fs) * .45 - 42px);width:84px;height:84px;font-size:.56rem}
@media(min-width:1000px){
  .lp-hwrap{grid-area:h1;width:100%;--h1fs:clamp(3.6rem,calc((min(100vw,1320px) - 690px) / 7.35),6.6rem)}
  .lp-hwrap .lp-stick{left:calc(var(--h1fs) * 2.71 + 22px);bottom:calc(var(--h1fs) * .45 - 62px);width:124px;height:124px;font-size:.8rem}
}
@media(min-width:761px) and (max-width:999px){ .lp-hwrap{--h1fs:calc((100vw - 60px) / 7.35)} }
/* sticker sits level with the top of "HERE." and hangs below it, never into the line above */
.lp-hwrap .lp-stick{width:72px;height:72px;font-size:.5rem;bottom:calc(var(--h1fs) * .9 - 68px)}
.lp-hwrap + .tp-promise,.tp-promise{margin-top:34px}
@media(min-width:1000px){
  .lp-hwrap .lp-stick{width:104px;height:104px;font-size:.7rem;bottom:calc(var(--h1fs) * .9 - 98px)}
  .tp-promise{margin-top:52px}
}

/* ================= round 14 (s): cleaner loud hero ================= */
/* pill: New winners every Friday, text optically centered (trim to cap height where supported) */
.lp-pill{display:inline-flex;align-items:center;line-height:1;padding:12px 20px}
.lp-pill span{display:block;line-height:1;text-box:trim-both cap alphabetic}
/* two-line headline, no sticker */
.lp-stick{display:none}
.lp-hwrap{--h1ratio:9.45}
.lp-hwrap .tp-h1{font-size:var(--h1fs);line-height:.92}
.lp-hwrap{--h1fs:calc((100vw - 32px) / var(--h1ratio))}
@media(min-width:1000px){ .lp-hwrap{--h1fs:clamp(3.2rem,calc((min(100vw,1320px) - 690px) / var(--h1ratio)),5.8rem)} }
@media(min-width:761px) and (max-width:999px){ .lp-hwrap{--h1fs:calc((100vw - 60px) / var(--h1ratio))} }
/* a small curved arrow from the headline down into the promise */
.lp-arrow{display:block;width:50px;height:56px;margin:12px 0 -30px 10px;overflow:visible}
.lp-arrow-l,.lp-arrow-h{fill:none;stroke:url(#lp-arrow-g);stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}
.tp-promise{margin-top:0}
@media(min-width:1000px){ .tp-promise{margin-top:0} .lp-arrow{margin:14px 0 -26px 14px} }
@media(max-width:760px){ .lp-arrow{margin:8px auto -18px;width:40px;height:46px} }
/* the button: bigger words, a slow pulse */
.tp .tk-btn{font-size:1.28rem;letter-spacing:.14em;padding:24px 24px;animation:btnpulse 2.4s ease-out infinite}
@keyframes btnpulse{
  0%{box-shadow:0 10px 24px -8px color-mix(in srgb,var(--primary) 55%,transparent),0 0 0 0 color-mix(in srgb,var(--primary) 45%,transparent);transform:scale(1)}
  45%{transform:scale(1.015)}
  70%{box-shadow:0 10px 24px -8px color-mix(in srgb,var(--primary) 55%,transparent),0 0 0 16px color-mix(in srgb,var(--primary) 0%,transparent);transform:scale(1)}
  100%{box-shadow:0 10px 24px -8px color-mix(in srgb,var(--primary) 55%,transparent),0 0 0 0 color-mix(in srgb,var(--primary) 0%,transparent)}
}
@media(max-width:760px){ .tp .tk-btn{font-size:1.15rem;padding:22px 20px} }
@media(prefers-reduced-motion:reduce){ .tp .tk-btn{animation:none} }
/* fields: text inside the boxes, no labels above (labels stay for screen readers) */
.tp .fld span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.tp .fld{position:relative}
.tp-fields{grid-template-columns:1fr;gap:12px}
.tp .fld input{min-height:62px;padding:18px 20px;border-radius:14px;font-size:1.06rem;background:var(--paper);border:1px solid color-mix(in srgb,var(--ink) 16%,transparent)}
.tp .fld input::placeholder{color:color-mix(in srgb,var(--ink) 58%,transparent)}
.lp-arrow{width:58px;height:66px;margin:14px 0 -30px 16px}
.lp-arrow-l,.lp-arrow-h{stroke:var(--lux-iris);stroke-width:3.4}
@media(max-width:760px){ .lp-arrow{margin:10px auto -20px;width:44px;height:50px} }

/* ================= port glue: the real form states (giveaway.js), styled to the concept ================= */
.gv-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;overflow:hidden}
.btn[disabled]{opacity:.65;cursor:progress}
.in-card .tk-err{text-align:left;margin-top:4px}
.q-done,.walk-done{margin:14px 0 0}
.gv-copied{margin:10px 0 0;font-size:.85rem;color:var(--secondary)}
.gv-copied:empty{display:none}
.in-notyou{margin:4px 0 0;text-align:center}
.gv-notyou{font:inherit;font-size:.85rem;background:none;border:0;padding:6px;color:var(--secondary);text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.gv-notyou:hover{color:var(--primary)}
/* round 14.1: no arrow; WINNING HERE (no period) sized up to fill the same width as line 1 (measured 8.68em vs 7.25em) */
.lp-hwrap{--h1ratio:8.8}
.lp-hwrap .tp-h1 em{font-size:1.197em;line-height:.9;display:inline-block}
.tp-promise{margin-top:30px}
@media(min-width:1000px){ .tp-promise{margin-top:40px} }
/* round 14.2: WINNING HERE a little smaller, a little more air between the lines (Andrew) */
.lp-hwrap .tp-h1{line-height:1}
.lp-hwrap .tp-h1 em{font-size:1.1em;line-height:1;margin-top:.06em}
/* ticket stub: faces + caption centered as one group under the button (Andrew) */
.tp .tk-stub{justify-content:center}
.tp .faces-cap{flex:0 1 auto;width:auto}
@media(max-width:760px){ .tp .tk-stub{justify-content:center} }
.tp .faces-cap{max-width:11.2em;text-wrap:balance}
.tp .faces-cap{max-width:none;width:max-content;text-wrap:nowrap;white-space:nowrap}
/* round 14.3: a touch less line height, WINNING HERE a touch smaller, and a bold gradient arrow at the end of it pointing at the form (desktop only) */
.lp-hwrap .tp-h1{line-height:.95}
.lp-hwrap .tp-h1 em{font-size:1.05em;line-height:.95;margin-top:.02em}
.lp-point{display:none}
.lp-pg1{stop-color:var(--lux-iris)}.lp-pg2{stop-color:var(--mint)}.lp-pg3{stop-color:var(--lux-blush)}
@media(min-width:1000px){
  .lp-point{display:inline-block;width:.86em;height:.52em;margin-left:.16em;vertical-align:.08em;overflow:visible;animation:lppoint 1.8s ease-in-out infinite}
  .lp-point path{fill:none;stroke:url(#lp-point-g);stroke-width:11;stroke-linecap:round;stroke-linejoin:round}
}
@keyframes lppoint{0%,100%{transform:translateX(0)}50%{transform:translateX(.12em)}}
@media(prefers-reduced-motion:reduce){ .lp-point{animation:none} }
@media(min-width:1000px){ .lp-point{width:.95em;height:.6em;vertical-align:.04em} .lp-point path{stroke-width:14} }
/* round 14.4: footer lockup (bex+Co. | Shared Workspace Salon), text + divider centered on the Co ink (measured: C ink 24-95% of wordmark height, center 59.5%, so +9.5% of height) */
.ft-lock{--wmh:64px;display:flex;align-items:center;justify-content:center;gap:18px;margin:0 auto 26px;height:var(--wmh)}
.ft-lock img{height:var(--wmh);width:auto;filter:brightness(0) invert(1);opacity:.95}
.ft-div,.ft-sws{transform:translateY(calc(var(--wmh) * .095))}
.ft-div{width:1px;height:calc(var(--wmh) * .72);background:color-mix(in srgb,var(--paper) 35%,transparent)}
.ft-sws{font-family:var(--sans);font-weight:900;font-size:calc(var(--wmh) * .18);line-height:1.3;letter-spacing:.2em;text-transform:uppercase;color:var(--paper);text-align:left}
.ft-sws sup{font-size:.6em;top:-.55em;letter-spacing:0}
.foot{padding-top:44px}
@media(max-width:760px){ .ft-lock{--wmh:46px;gap:13px;margin-bottom:20px} .foot{padding-top:34px} }
/* phone: tighter space under WINNING HERE. desktop: tighter space above What you could win */
@media(max-width:760px){ .tp-promise{margin-top:14px} }
@media(min-width:1000px){ .tp-prizes{margin-top:72px} }
@media(max-width:760px){ .lp-hwrap + .tp-promise,.tp-promise{margin-top:12px} }

/* ================= 2026-09-30 r3: Bex's note above the heading + the hero's full ticket in the faces section (Andrew picked B) =================
   A big real portrait of Bex with a letterhead note (bex+Co. wordmark, EB Garamond italic, signed xo, Bex) overlapping its right edge,
   centered above the heading on every width. Under it, heading + sub line + the hero's own ticket as one centered column, with page 1's
   gradient arrow bouncing at the Enter to win button on desktop. Kit tokens only, no hex. */
#faces{padding-top:clamp(48px,5.4vw,76px)}
.fx-bex{position:relative;z-index:1;margin:0 auto clamp(34px,4vw,52px)}
.fx-main.win-head{margin-bottom:clamp(18px,2.4vw,28px)}
.win-light .win-head .lead{margin-bottom:4px}

/* ---------- the portrait + the letterhead note ---------- */
.nt{--pic-w:clamp(340px,33vw,450px);--card-w:clamp(292px,27vw,356px);--ov:64px;--card-top:0px;
  position:relative;display:grid;width:calc(var(--pic-w) + var(--card-w) - var(--ov));max-width:100%;margin:0 auto;isolation:isolate}
.nt > *{grid-area:1/1}
.nt-plate{width:var(--pic-w);aspect-ratio:4/5;border-radius:30px;background:var(--lux-iridescent);transform:translate(-18px,18px) rotate(-3deg);z-index:-1}
.nt-pic{display:block;width:var(--pic-w);aspect-ratio:4/5;height:auto;object-fit:cover;object-position:50% 24%;border-radius:30px;
  box-shadow:0 2px 4px color-mix(in srgb,var(--deep) 10%,transparent),0 34px 56px -26px color-mix(in srgb,var(--teal-950) 50%,transparent)}
.nt-card{position:relative;justify-self:end;align-self:center;width:var(--card-w);margin-top:var(--card-top);transform:rotate(2deg);text-align:left}
/* the soft iridescent shadow under the note (C's card glow), then the paper with the iridescent strip on top */
.nt-glow{position:absolute;left:6%;right:6%;top:14%;bottom:-16px;border-radius:30px;background:var(--lux-iridescent);filter:blur(26px);opacity:.9;pointer-events:none}
.nt-paper{position:relative;display:block;padding:24px 26px 20px;border-radius:18px;
  background:var(--lux-iridescent) top/100% 6px no-repeat,var(--tone);color:var(--deep);
  font-family:var(--serif);font-style:italic;font-weight:400;font-size:1.28rem;line-height:1.32;
  box-shadow:0 1px 2px color-mix(in srgb,var(--deep) 10%,transparent),0 18px 34px -20px color-mix(in srgb,var(--deep) 32%,transparent)}
.nt-logo{display:block;height:22px;width:auto;margin:4px 0 16px}
.nt-p{display:block;text-wrap:pretty}
.nt-p + .nt-p{margin-top:9px}
.nt-sign{display:block;margin-top:12px;text-align:right;font-size:1.75rem;line-height:1;font-weight:500;color:var(--primary)}

/* ---------- the ticket: the hero's own, lighter shadow on the sand ---------- */
.win-entry{position:relative;z-index:1}
.win-entry .tp-card{margin:22px auto 0}
.win-entry .tk{filter:drop-shadow(0 1px 1px color-mix(in srgb,var(--deep) 10%,transparent)) drop-shadow(0 12px 18px color-mix(in srgb,var(--deep) 11%,transparent))}
.win-entry .tp-glow{opacity:.3;filter:blur(34px)}
.win-entry .tp-card::before{display:none}

/* ---------- the bouncing arrow at Enter to win (hero ticket + faces ticket), desktop only ----------
   Page 1's arrow path + gradient. On the sand it gets a dark keyline so it reads; on the dark hero stage it doesn't need one. */
.btn-arrow{--aw:78px;display:none;position:absolute;z-index:3;left:calc(-1 * (var(--aw) + 26px));top:50%;width:var(--aw);height:calc(var(--aw) * .6);transform:translateY(-50%);pointer-events:none}
.btn-arrow svg{display:block;width:100%;height:100%;overflow:visible;animation:fxbounce 1.3s ease-in-out infinite}
.btn-arrow path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.btn-arrow-k{stroke:var(--lux-deep);stroke-width:21}
.btn-arrow-p{stroke-width:14}
.hero-ticket .btn-arrow-k{display:none}
@keyframes fxbounce{0%,100%{transform:translateX(-6px)}50%{transform:translateX(8px)}}
@media(min-width:900px){ .btn-arrow.is-set{display:block} }
/* the hero's two-column layout (1000px+) leaves no room beside the ticket until 1080px: the arrow would touch the check lines */
@media(min-width:1000px) and (max-width:1079px){ .hero-ticket .btn-arrow{display:none!important} }
/* ---------- phones: portrait on top, the note over its lower corner ---------- */
@media(max-width:760px){
  .fx-bex{margin-bottom:30px}
  .nt{--pic-w:min(226px,60vw);--card-w:min(248px,67vw);--card-top:min(176px,47vw);width:min(100%,calc(var(--pic-w) + var(--card-w) - 40px))}
  .nt-card{align-self:start;transform:rotate(2.5deg)}
  .nt-plate{transform:translate(-4px,10px) rotate(-3deg);border-radius:24px}
  .nt-pic{border-radius:24px}
  .nt-paper{font-size:1.1rem;padding:18px 18px 16px;border-radius:16px}
  .nt-logo{height:18px;margin:2px 0 12px}
  .nt-sign{font-size:1.5rem}
  .win-entry .tp-card{margin-top:20px}
}
@media(prefers-reduced-motion:reduce){ .btn-arrow svg{animation:none} }
/* narrow phones: the faces heading keeps its two lines and the lead its two lines (at 360 they broke to four and three) */
@media(max-width:760px){ .win-light .win-head h2.lp-h2{font-size:min(2.6rem,calc((100vw - 34px) / 8.3))} }
@media(max-width:380px){ .win-light .win-head .lead{font-size:.96rem} }

/* ================= 2026-09-30: two URLs (/giveaway/ entry, /giveaway/in/ You're in) ================= */
/* /giveaway/in/ hides the entry page before first paint (inline head script adds the class) */
.gv-route-in #page,.gv-route-in #gv-nav-cta{display:none!important}
/* the returning entrant's bar: slim and quiet, between the header and the hero */
.gv-back{margin:0;padding:10px 16px;text-align:center;font-size:.86rem;line-height:1.35;background:color-mix(in srgb,var(--lux-deep) 60%,var(--teal-950));border-bottom:1px solid var(--hair-dark)}
.gv-back a{color:var(--on-dark-2)}
.gv-back b{font-weight:700;color:var(--paper)}
.gv-back-go{color:var(--lux-iris);font-weight:700;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.gv-back a:hover .gv-back-go{color:var(--paper)}
/* small tablets (481-760): the same portrait + note stack, bigger, kept together and centered (Andrew 09-30: the note floated away) */
@media(min-width:481px) and (max-width:760px){
  .nt{--pic-w:300px;--card-w:290px;--card-top:220px;width:calc(var(--pic-w) + var(--card-w) - 70px)}
}
/* hero, 1000-1140px: the two-column headline kept a 3.2rem floor and ran under the ticket ("BEAUTY PROS AR|" at 1024).
   Same fit formula, a lower floor, so it shrinks with its column until there's room. */
@media(min-width:1000px){ .lp-hwrap{--h1fs:clamp(2.2rem,calc((min(100vw,1320px) - 690px) / var(--h1ratio)),5.8rem)} }

/* ================= 2026-09-30: the culture wall behind Bex (entry page, #faces) =================
   Two faint 3x4 grids of real bex+Co. photos (a 4th row since 09-30, down beside the heading), one on each side of the portrait + note. Each grid starts at the edge of
   Bex's block (--hole = half its width + breathing room) and runs outward, so the tiles nearest her are whole; a mask
   fades them to nothing toward her and toward the top and bottom of the area. 761px and up only. */
.bxg{display:none}
@media(min-width:761px){
  .fx-bex{--hole:calc((clamp(340px,33vw,450px) + clamp(292px,27vw,356px) - 64px) / 2 + 28px)}
  .bxg{display:block;position:absolute;z-index:-1;left:50%;width:100vw;transform:translateX(-50%);top:calc(-1 * clamp(48px,5.4vw,76px));bottom:-24px;overflow:hidden;pointer-events:none;
    -webkit-mask:linear-gradient(180deg,transparent 0,black 22%,black 74%,transparent 100%);mask:linear-gradient(180deg,transparent 0,black 22%,black 74%,transparent 100%)}
  .bxg-side{position:absolute;top:0;bottom:0;width:560px;display:grid;grid-template-columns:repeat(3,164px);grid-auto-rows:205px;gap:16px;align-content:center}
  .bxg-l{right:calc(50% + var(--hole));justify-content:end;
    -webkit-mask:linear-gradient(270deg,transparent 0,black 150px);mask:linear-gradient(270deg,transparent 0,black 150px)}
  .bxg-r{left:calc(50% + var(--hole));justify-content:start;
    -webkit-mask:linear-gradient(90deg,transparent 0,black 150px);mask:linear-gradient(90deg,transparent 0,black 150px)}
  .bxg img{display:block;width:100%;height:100%;object-fit:cover;border-radius:14px;opacity:.17;filter:grayscale(.35) blur(.4px)}
}

/* 4 rows (Andrew 09-30: "1 more row below"): the wall runs on down beside the heading and melts into the sand above the
   ticket. Rows start at the top now (they were centered on 3), the bottom edge reaches past the heading, and the fade
   takes the 4th row out before the form. */
@media(min-width:761px){
  .bxg{bottom:calc(-1 * clamp(150px,17vw,245px));
    -webkit-mask:linear-gradient(180deg,transparent 0,black 16%,black 66%,transparent 97%);mask:linear-gradient(180deg,transparent 0,black 16%,black 66%,transparent 97%)}
  .bxg-side{align-content:start;padding-top:8px;grid-template-columns:repeat(3,clamp(118px,11.4vw,164px));grid-auto-rows:auto;gap:clamp(12px,1.1vw,16px)}
  .bxg img{height:auto;aspect-ratio:4/5}
}

/* 2026-10-01 (Andrew): darker and moodier, the /apply/ stage, for contrast and one look across apply, the calculator and the giveaway.
   Same base and glow colors as the calculator's .scl-app: teal-950 under a violet glow at the top and a mint glow at the bottom, both
   centered so neither side of the page is lit more than the other. The spotlight beam (.tp-beam) stays; it is the only light on the page,
   so it is softer on phones, where the cone sits right behind the headline.
   r2 (Andrew 10-01, "a bit dark"): a lighter teal (tealbright) blends up from the bottom left, the old giveaway teal as an accent. */
.stage.tp{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)}
.tp-beam{opacity:.62}
@media(max-width:760px){
  .tp-beam{opacity:.3}
}

/* ================= 2026-09-30: the header button's pop-up (#gv-pop) =================
   A dark stage card (page 1's .stage.tp) holding the pill, a small loud line and the entry ticket. Soft scale/fade in.
   Phones: a near-full-screen sheet that fits a 390x760 screen without scrolling. Kit tokens only, no hex. */
.gv-pop{border:0;padding:0;margin:auto;width:min(620px,calc(100% - 32px));max-width:none;max-height:calc(100dvh - 32px);overflow:auto;background:transparent;color:var(--on-dark);border-radius:28px;
  box-shadow:0 40px 90px -30px color-mix(in srgb,var(--teal-950) 80%,transparent)}
.gv-pop::backdrop{background:color-mix(in srgb,var(--teal-950) 72%,transparent);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}
/* fade the dialog, zoom the content: a transform on the dialog drags the position:fixed close X along with it (10-01) */
.gv-pop[open]{animation:gvpopfade .3s ease-out}
.gv-pop[open] .gv-pop-in{animation:gvpopin .32s cubic-bezier(.25,1.2,.4,1)}
.gv-pop[open]::backdrop{animation:gvpopfade .3s ease-out}
@keyframes gvpopin{from{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:none}}
@keyframes gvpopfade{from{opacity:0}to{opacity:1}}
.gv-pop-stage{border-radius:28px;min-height:100%}
.gv-pop-stage .tp-beam{left:50%;right:auto;width:120%;transform:translateX(-50%);height:70%}
.gv-pop-in{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;text-align:center;padding:34px 40px 40px}
.gv-pop-pill{margin:0 0 14px}
.gv-pop-h{margin:0;font-family:var(--sans);font-weight:900;text-transform:uppercase;letter-spacing:-.015em;line-height:.95;font-size:2.15rem;color:var(--paper)}
.gv-pop-h span,.gv-pop-h em{display:block}
.gv-pop-h em{font-style:normal;font-weight:900;color:transparent;background-image:var(--lux-iridescent);-webkit-background-clip:text;background-clip:text}
.gv-pop .gv-pop-card{margin-top:22px;width:min(540px,100%)}
.gv-pop-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;
  color:var(--paper);background:color-mix(in srgb,var(--paper) 12%,transparent)}
.gv-pop-x:hover{background:color-mix(in srgb,var(--paper) 22%,transparent)}
.gv-pop-x:focus-visible{outline:3px solid var(--lux-iris);outline-offset:2px}
.gv-pop-x svg{width:18px;height:18px}
@media(max-width:760px){
  .gv-pop{width:calc(100% - 16px);max-height:calc(100dvh - 16px);min-height:min(calc(100dvh - 16px),700px);border-radius:22px}
  .gv-pop-stage{border-radius:22px;min-height:min(calc(100dvh - 16px),700px);display:flex;flex-direction:column;justify-content:center}
  .gv-pop-in{padding:22px 16px 18px}
  .gv-pop-pill{margin-bottom:10px}
  .gv-pop-h{font-size:1.65rem}
  .gv-pop .gv-pop-card{margin-top:16px}
  .gv-pop .tk-main{padding:20px 18px 16px}
  .gv-pop .tk-title{font-size:1.65rem;margin-bottom:12px}
  .gv-pop .tk-form{gap:10px}
  .gv-pop .fld input{min-height:54px;padding:14px 16px}
  .gv-pop .tk-btn{padding:18px 18px}
  .gv-pop .tk-stub{padding:12px 16px 13px}
  .gv-pop-x{top:10px;right:10px;width:36px;height:36px}
}
@media(prefers-reduced-motion:reduce){ .gv-pop[open],.gv-pop[open] .gv-pop-in,.gv-pop[open]::backdrop{animation:none} }

/* pop-up r2 (Andrew 09-30: "much darker bg like 95% dark and no box behind this"): the page is dimmed to ~95%, and the pill,
   the loud line and the ticket float straight on it. No panel, no spotlight. The X sits at the viewport's top right.
   The dialog box is wider than the content on desktop so the bouncing arrow beside the ticket has room. */
.gv-pop{width:min(820px,calc(100% - 32px));background:transparent;box-shadow:none;border-radius:0;overflow:auto}
.gv-pop::backdrop{background:color-mix(in srgb,var(--teal-950) 95%,transparent);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.gv-pop .gv-pop-stage{background:none;border-radius:0;min-height:0;position:relative;overflow:visible;color:var(--on-dark)}
.gv-pop-in{padding:30px 0 34px}
.gv-pop .gv-pop-card{width:min(540px,100%)}
.gv-pop-x{position:fixed;top:18px;right:18px;width:44px;height:44px;background:color-mix(in srgb,var(--paper) 14%,transparent)}
.gv-pop .btn-arrow-k{display:none}
@media(max-width:760px){
  .gv-pop{width:calc(100% - 24px);min-height:0}
  .gv-pop .gv-pop-stage{min-height:0;display:block}
  .gv-pop-in{padding:46px 0 12px}
  .gv-pop-x{top:10px;right:10px;width:38px;height:38px}
}
/* the ticket's soft glow floats free (nothing clips it into a box): the oversized mint layer is off, the dialog only scrolls
   up and down if a screen is too short, and there's room under the ticket for the glow to fade out. Phones: the dialog is
   the full width (any clip lands on the screen edge) and the glow is smaller. */
.gv-pop{overflow-x:hidden;overflow-y:auto}
.gv-pop .gv-pop-stage{overflow:visible}
.gv-pop .gv-pop-card::before{display:none}
.gv-pop-in{padding-bottom:84px}
@media(max-width:760px){
  .gv-pop{width:100%;max-width:100%}
  .gv-pop-in{padding:46px 12px 40px}
  .gv-pop .tp-glow{inset:4px;filter:blur(20px);opacity:.5}
}

/* ================= 2026-09-30: Andrew's prize photos (entry cards + the success page's prize row) =================
   Each file is a 4:5 crop (800x1000). The cards are 4:5 on desktop and 4:3 or 16:10 elsewhere, so each photo has its
   own focal point: both faces + the hands (tools), Bex's face + the Entrepreneur masthead (education), the heads + all
   three bex+Co. jacket logos (grand). The grand card's seal now sits small in the corner; the photo leads. */
.tp-th img.pz-tools{object-position:50% 30%}
.tp-th img.pz-education{object-position:50% 38%}
.tp-th img.pz-grand{object-position:50% 24%}
.pz-grand-th{position:relative}
.pz-seal{position:absolute;right:6%;bottom:5%;width:19%;pointer-events:none}
.pz-seal .seal{width:100%;filter:drop-shadow(0 6px 14px color-mix(in srgb,var(--teal-950) 55%,transparent))}

/* r3 (Andrew 10-01): on the You're-in page the lighter teal comes from the TOP left, so the stage's bottom edge stays one even color
   where the green tab (.ub-tab) folds down from it (a bottom-left glow left a seam beside the tab). The footer gets the same blend. */
.stage.tp.ub-top{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% 0%,color-mix(in srgb,var(--tealbright) 55%,transparent),transparent 70%),
    var(--teal-950)}
.foot{background:
    radial-gradient(70% 160% at 0% 100%,color-mix(in srgb,var(--tealbright) 55%,transparent),transparent 70%),
    var(--teal-950)}

/* the $$$ after "Beauty biz education" (Andrew 10-02): the SAME markup and rule as the Stylist Profit Calculator's headline $$$
   (static/tools/stylist-profit-calculator/stylist-calculator.css, .scl-h1 .scl-cash), so the two read as one system. Copied, not reinvented. */
.tp-lb .scl-cash,.ticker .scl-cash{font-family:var(--serif);font-style:italic;font-weight:400;font-size:1.14em;letter-spacing:0;text-transform:none;
  padding:0 .1em 0 .02em;color:transparent;background-image:var(--lux-iridescent);-webkit-background-clip:text;background-clip:text}
.tp-lb{text-wrap:balance}
/* on the light tan ground of the "You're in" page the pale iridescent $$$ almost disappears: same face, italic and size, a deeper teal sheen from the kit */
.ut-wrap-wide .tp-lb .scl-cash{background-image:linear-gradient(115deg,var(--primary),var(--tealbright) 55%,var(--deep))}
/* The Instagram handle on the entry tickets (Andrew 2026-10-06: "make that a requirement on the initial entry page ... very subtly, why we're asking").
   Same box as the other two fields with an @ sitting inside it, and one quiet line under it. The label stays for screen readers. */
.tp .fld-ig .ig-lab{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.tp .fld-ig .ig-box{position:relative;display:grid}
.tp .fld-ig .ig-at{position:absolute;left:20px;top:50%;transform:translateY(-50%);font-style:normal;font-weight:700;font-size:1.06rem;line-height:1;color:color-mix(in srgb,var(--ink) 70%,transparent);pointer-events:none}
.tp .fld-ig input{padding-left:42px}
.tp .fld-ig .ig-help{margin:0 2px;font-size:.78rem;line-height:1.4;color:var(--secondary)}
.tp .fld input[aria-invalid=true]{border-color:var(--primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 14%,transparent)}
.gv-pop .tp .fld-ig .ig-at,.gv-pop .fld-ig .ig-at{left:16px}
.gv-pop .tp .fld-ig input,.gv-pop .fld-ig input{padding-left:36px}

/* ================= 2026-10-06: real values on the prize cards (Andrew: photo shoot $500 value, Blueprint $2,497 value) =================
   Same markup on /giveaway/ (dark stage) and /giveaway/in/ (sand): .pz-grand-prize is the big one, .pz-tag its small badge on the photo,
   .pz-val the value pill under a label, .pz-in the short "what's inside" under the Blueprint. Only these two prizes carry a value. */
.pz-tag{position:absolute;z-index:2;left:10px;top:10px;padding:6px 11px 5px;border-radius:999px;background:var(--lux-iridescent);color:var(--lux-deep);
  font-family:var(--sans);font-weight:900;font-size:.64rem;line-height:1;letter-spacing:.14em;text-transform:uppercase;box-shadow:0 6px 14px -6px color-mix(in srgb,var(--teal-950) 70%,transparent)}
.pz-grand-prize .tp-th{box-shadow:0 0 0 2px var(--lux-iris),0 18px 34px -18px color-mix(in srgb,var(--teal-950) 90%,transparent)}
.pz-val{display:inline-block;margin-top:9px;padding:6px 12px 5px;border-radius:999px;font-family:var(--sans);font-weight:900;font-size:.72rem;line-height:1;letter-spacing:.12em;text-transform:uppercase;
  color:var(--mint);box-shadow:inset 0 0 0 1.5px currentColor}
.pz-in{display:block;margin:10px auto 0;max-width:28ch;font-family:var(--sans);font-weight:500;font-size:.86rem;line-height:1.4;font-style:normal;text-wrap:balance;color:color-mix(in srgb,var(--on-dark) 82%,transparent)}
.pz-in b{display:block;margin-bottom:3px;font-weight:900;font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;opacity:.75}
@media(max-width:760px){
  .pz-tag{left:8px;top:8px;font-size:.58rem;padding:5px 9px 4px}
  .pz-val{font-size:.66rem;margin-top:7px}
  .pz-in{font-size:.78rem;line-height:1.35}
}

/* ================= 2026-10-06: the grand-prize tile plays the real Liberty Hill shoot (Andrew). Same box as the photo it replaced (.tp-th, 4:5, rounded,
   badge + $500 pill unchanged); the clip is 9:16 so object-fit:cover crops it to 4:5 and object-position 68% 45% keeps softbox, model and stand in frame (the clip is narrower than the tile ratio, so only y has slack). The poster is also the element's background so there is never a blank frame while the clip starts.
   Starts only when on screen (inline script before giveaway.js); reduced-motion and Data Saver visitors keep the poster. ================= */
.tp-th video.pz-vid{display:block;width:100%;height:100%;object-fit:cover;object-position:68% 45%;background:var(--lux-deep) url(/giveaway/img/shoot-video-poster.jpg) 68% 45%/cover no-repeat;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
@media (hover:hover) and (pointer:fine){ .tp-row .tp-pz:hover .tp-th video.pz-vid{transform:scale(1.05)} }
@media(prefers-reduced-motion:reduce){ .tp-th video.pz-vid{transition:none} .tp-row .tp-pz:hover .tp-th video.pz-vid{transform:none} }

/* ================= 2026-10-07: the Blueprint tile is the picked "D2 Duo" motion (Andrew), replacing the course photo. Same box as before (.tp-th, 4:5, rounded,
   caption + $2,497 pill untouched). Spec: bex-gw-r8d-money-1006/out/LIVE-CSS-NOTE.md. Ground, beam, growth line and $ signs are CSS + one inline SVG;
   the laptop and phone are ONE transparent WebP (1000px, ~107 KB). Every size is cqw or % of a 4:5 scene, so it scales with the tile.
   The base styles ARE the finished frame: no .pzb-go class (reduced motion, Data Saver, off screen, no JS) means a fully drawn line and steady $.
   A tiny script near the video one adds .pzb-go only while the tile is on screen. Only opacity, transform, stroke-dashoffset and background-position animate. ================= */
.pzb{position:absolute;inset:0;display:grid;place-items:center;overflow:hidden;isolation:isolate;border-radius:inherit;
  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)}
.pzb::after{content:"";position:absolute;inset:0;z-index:20;pointer-events:none;opacity:.05;mix-blend-mode:overlay;background-size:20% auto;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
/* the 4:5 scene: fills the tile when the tile is 4:5 (phones, 1000px+); on a 4:3 tile (761 to 999px) it sits centered and the ground above carries to the edges */
.pzb-st{position:relative;height:100%;aspect-ratio:4/5;container-type:inline-size;--loop:6s}
.pzb-beam{position:absolute;left:50%;top:-6%;width:120%;height:72%;transform:translateX(-50%);z-index:0;pointer-events:none;
  background:linear-gradient(180deg,color-mix(in srgb,var(--paper) 10%,transparent),color-mix(in srgb,var(--mint) 6%,transparent) 70%,transparent);
  clip-path:polygon(41% 0,59% 0,86% 100%,14% 100%);filter:blur(4.8cqw)}
.pzb-chart{position:absolute;inset:0;width:100%;height:100%;z-index:1;overflow:visible}
.pzb-grid line{stroke:var(--paper);stroke-opacity:.07;stroke-width:1.4;stroke-dasharray:2 12}
.pzb-s1{stop-color:var(--lux-blush)}.pzb-s2{stop-color:var(--lux-iris)}.pzb-s3{stop-color:color-mix(in srgb,var(--lux-iris) 75%,var(--mint))}.pzb-s4{stop-color:color-mix(in srgb,var(--mint) 55%,var(--tone))}.pzb-s5{stop-color:var(--sand)}
.pzb-a1{stop-color:var(--lux-iris)}.pzb-a2{stop-color:var(--mint)}.pzb-a3{stop-color:var(--tealbright)}
.pzb-m{stop-color:var(--paper)}
.pzb-ar{opacity:.5}
.pzb-ln{fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1 1;stroke-dashoffset:0}
.pzb-glow{stroke:var(--mint);stroke-width:12.8;opacity:.5625}
.pzb-stroke{stroke-width:4;opacity:.75}
.pzb-cash{position:absolute;z-index:3;font-family:var(--serif);font-style:italic;font-weight:400;line-height:1;color:transparent;
  background-image:var(--lux-iridescent);background-size:240% 100%;background-position:0% 50%;-webkit-background-clip:text;background-clip:text;
  filter:drop-shadow(0 0 1.6cqw color-mix(in srgb,var(--lux-iris) 45%,transparent))}
.pzb-cash.pzb-soft{filter:blur(.35cqw) drop-shadow(0 0 1.4cqw color-mix(in srgb,var(--lux-iris) 30%,transparent))}
/* beats the shared ".tp-th img" cover rule and the 1.05 hover zoom: the devices are placed by %, not cropped */
.tp-th img.pzb-dev{position:absolute;z-index:5;display:block;left:-1.667%;top:41.185%;width:103.333%;height:auto;aspect-ratio:1000/660;object-fit:fill;transition:none}
.tp-row .tp-pz:hover .tp-th img.pzb-dev{transform:none}
/* round 2 (Andrew: the tile looked empty): the D2 title and wordmark are back, as real text, same spot and size as the picked concept (cqw of the scene).
   The phone floors are in the max-width:760px rule below; nowrap keeps "The Beauty Empire" on one line whatever the floor does. */
.tp-th img.pzb-wm{position:absolute;z-index:8;left:6.667%;top:5.2%;width:auto;height:3.704cqw;object-fit:contain;filter:brightness(0) invert(1);transition:none}
.pzb-ttl{position:absolute;z-index:8;left:6.667%;top:11.704%;font-family:var(--sans);font-weight:900;font-size:6.852cqw;text-align:left;line-height:.96;letter-spacing:-.02em;text-transform:uppercase;white-space:nowrap;color:var(--paper)}
.pzb-iri{display:inline-block;padding-bottom:.26em;margin-bottom:-.26em;padding-top:.06em;margin-top:-.06em;color:transparent;background-image:var(--lux-iridescent);-webkit-background-clip:text;background-clip:text}
@media(max-width:760px){.tp-th img.pzb-wm{height:max(3.704cqw,9px)}.pzb-ttl{font-size:max(6.852cqw,11.5px)}}   /* phone tile is ~172px wide: floors only here; on the 4:3 tablet band the scene is smaller still and a floor would run into the $ */
@keyframes pzb-draw{0%{stroke-dashoffset:1;opacity:1}5%{stroke-dashoffset:1}46%{stroke-dashoffset:0}86%{stroke-dashoffset:0;opacity:1}97%,100%{stroke-dashoffset:0;opacity:0}}
@keyframes pzb-area{0%,28%{opacity:0;transform:translateY(2%)}52%{opacity:1;transform:none}86%{opacity:1}97%,100%{opacity:0}}
@keyframes pzb-shimmer{from{background-position:0% 50%}to{background-position:100% 50%}}
@keyframes pzb-float{0%,100%{transform:translateY(0);opacity:var(--o0,.55)}50%{transform:translateY(calc(var(--dy,-1.2) * 1cqw));opacity:var(--o1,1)}}
@keyframes pzb-breathe{0%,100%{opacity:.75}50%{opacity:1}}
.pzb-go .pzb-ln{animation:pzb-draw var(--loop) cubic-bezier(.55,.1,.3,1) infinite}
.pzb-go .pzb-ar{animation:pzb-area var(--loop) ease-out infinite}
.pzb-go .pzb-cash{animation:pzb-shimmer calc(var(--loop) / 2) ease-in-out infinite alternate,pzb-float var(--loop) ease-in-out infinite;animation-delay:0s,var(--d,0s)}
.pzb-go .pzb-beam{animation:pzb-breathe var(--loop) ease-in-out infinite}
@media(prefers-reduced-motion:reduce){.pzb *{animation:none!important}}