/* ============================================================
   Phoenix Competitions — test page stylesheet
   Tokens + component styles, extracted from the design system.
   ============================================================ */

:root{
  --gold-100:#f9edcd; --gold-200:#f2db9c; --gold-300:#ecc668; --gold-400:#e6b33f;
  --gold-500:#d89b2c; --gold-600:#b87e21; --gold-700:#8f611c;
  --char-200:#cccdce; --char-400:#7c8083; --char-500:#585c60; --char-600:#44484c;
  --char-700:#33373b; --char-800:#24272b; --char-900:#17191c;
  --cream-50:#fdfbf6; --cream-100:#faf5ea; --cream-200:#f2ead8; --cream-300:#e7dcc4; --cream-400:#d8c9aa;
  --ember-100:#fbe3d8; --ember-500:#df5a33; --ember-600:#c4451f;
  --green-100:#d9f0e2; --green-500:#2f9e6b; --green-600:#23824f;
  --font-display:'Sora',system-ui,sans-serif; --font-body:'Manrope',system-ui,sans-serif; --font-mono:'JetBrains Mono',ui-monospace,monospace;
  --fs-display:4.25rem; --fs-h1:3rem; --fs-h2:2.25rem; --fs-h3:1.625rem; --fs-h4:1.25rem;
  --fs-lg:1.125rem; --fs-base:1rem; --fs-sm:0.875rem; --fs-xs:0.75rem;
  --ls-tight:-0.03em; --ls-caps:0.08em;
  --space-2:.5rem; --space-3:.75rem; --space-4:1rem; --space-5:1.5rem; --space-6:2rem; --space-7:3rem; --space-8:4rem; --space-9:6rem;
  --radius-sm:10px; --radius-md:14px; --radius-lg:20px; --radius-xl:28px; --radius-pill:999px;
  --shadow-xs:0 1px 2px rgba(74,51,20,.06); --shadow-sm:0 2px 8px rgba(74,51,20,.08);
  --shadow-md:0 8px 24px rgba(74,51,20,.10); --shadow-lg:0 18px 48px rgba(74,51,20,.14);
  --shadow-gold:0 10px 30px rgba(216,155,44,.35);
  --container-max:1200px;
  --ease-out:cubic-bezier(.22,1,.36,1); --dur-fast:140ms; --dur-base:220ms;
  --ring:0 0 0 3px color-mix(in srgb, var(--gold-500) 45%, transparent);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--font-body);font-size:var(--fs-base);line-height:1.5;color:var(--char-700);background:var(--cream-100);-webkit-font-smoothing:antialiased}
section[id]{scroll-margin-top:88px}
h1,h2,h3,h4{font-family:var(--font-display);color:var(--char-900);line-height:1.2;letter-spacing:var(--ls-tight);margin:0}
p{margin:0}
a{color:var(--gold-700);text-decoration:none}
::selection{background:var(--gold-200);color:var(--char-900)}
.wrap{max-width:var(--container-max);margin:0 auto;padding:0 var(--space-5)}
.eyebrow{font-weight:700;font-size:var(--fs-xs);letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--gold-700)}

/* Buttons */
.btn{font-family:var(--font-body);font-weight:700;border:none;border-radius:var(--radius-md);cursor:pointer;display:inline-flex;align-items:center;gap:.5rem;transition:transform var(--dur-fast) var(--ease-out),filter var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out);font-size:var(--fs-base);padding:.7rem 1.25rem}
.btn-lg{font-size:var(--fs-lg);padding:.9rem 1.6rem}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(1px) scale(.99)}
.btn-primary{background:var(--gold-500);color:var(--char-900);box-shadow:var(--shadow-gold)}
.btn-primary:hover{filter:brightness(.97)}
.btn-secondary{background:transparent;color:var(--char-900);border:1.5px solid var(--cream-400)}
.btn-secondary:hover{background:var(--cream-200)}
.btn-dark{background:var(--char-900);color:var(--cream-50)}
.btn-ghost{background:transparent;color:var(--char-700)}
.btn-ghost:hover{background:var(--cream-200)}

/* Header */
header{position:sticky;top:0;z-index:20;background:var(--char-900);color:var(--cream-50)}
.nav{display:flex;align-items:center;justify-content:space-between;height:72px}
.brand{display:flex;align-items:center;gap:.65rem}
.brand img{height:38px;width:auto}
.brand span{font-family:var(--font-display);font-weight:800;font-size:1.15rem;color:var(--cream-50);letter-spacing:var(--ls-tight)}
.nav-links{display:flex;align-items:center;gap:var(--space-6)}
.nav-links a{color:var(--cream-100);font-weight:600;font-size:var(--fs-sm)}
.nav-links a:hover{color:var(--gold-400);text-decoration:none}

/* Hero */
.hero{position:relative;background:var(--char-900);color:var(--cream-50);overflow:hidden;padding:var(--space-9) 0 calc(var(--space-9) + 2rem)}
.hero::after{content:"";position:absolute;top:-30%;right:-10%;width:60%;height:120%;background:radial-gradient(closest-side,rgba(230,179,63,.28),transparent 70%);pointer-events:none}
.hero-inner{position:relative;z-index:2;max-width:760px}
.hero h1{font-size:var(--fs-display);font-weight:800;color:var(--cream-50);margin-bottom:var(--space-5)}
.hero h1 .gold{color:var(--gold-400)}
.hero p.sub{font-size:var(--fs-lg);color:var(--char-200);max-width:620px;margin-bottom:var(--space-6)}
.hero-cta{display:flex;gap:var(--space-4);flex-wrap:wrap;align-items:center}
.stats{display:flex;gap:var(--space-8);margin-top:var(--space-8);flex-wrap:wrap}
.stat .num{font-family:var(--font-mono);font-weight:700;font-size:2rem;color:var(--gold-400)}
.stat .lbl{font-size:var(--fs-sm);color:var(--char-200)}

/* Section */
section.block{padding:var(--space-9) 0}
.sec-head{margin-bottom:var(--space-7)}
.sec-head h2{font-size:var(--fs-h2);font-weight:700;margin:.5rem 0}
.sec-head p{color:var(--char-500);font-size:var(--fs-lg)}

/* Badges */
.badge{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--font-body);font-weight:700;font-size:var(--fs-xs);letter-spacing:var(--ls-caps);text-transform:uppercase;padding:.3rem .65rem;border-radius:var(--radius-pill)}
.badge .dot{width:7px;height:7px;border-radius:50%;background:currentColor}
.badge-gold{background:var(--gold-100);color:var(--gold-700)}
.badge-urgent{background:var(--ember-100);color:var(--ember-600)}
.badge-success{background:var(--green-100);color:var(--green-600)}
.badge-neutral{background:var(--cream-200);color:var(--char-600)}

/* Cards grid */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-6)}
.card{background:#fff;border:1px solid var(--cream-300);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);overflow:hidden;transition:transform var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out)}
.card.interactive:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.card .thumb{position:relative;aspect-ratio:4/3;background:linear-gradient(135deg,var(--char-700),var(--char-900));display:flex;align-items:flex-end;padding:var(--space-4)}
.thumb.g1{background:linear-gradient(135deg,#5a4a2c,#24272b)}
.thumb.g2{background:linear-gradient(135deg,#6b491a,#17191c)}
.thumb.g3{background:linear-gradient(135deg,#44484c,#17191c)}
.thumb.has-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.thumb.has-photo::before{content:"";position:absolute;top:0;left:0;right:0;height:60%;background:linear-gradient(180deg,rgba(0,0,0,.55),transparent);pointer-events:none}
.thumb.fit-contain{background:var(--cream-50)}
.thumb.fit-contain img{object-fit:contain}
.thumb.fit-contain::before{display:none}
.thumb .top{position:absolute;top:var(--space-4);left:var(--space-4);right:var(--space-4);display:flex;justify-content:space-between;align-items:flex-start;z-index:1}
.chip{font-family:var(--font-mono);font-weight:700;font-size:var(--fs-sm);color:var(--cream-50);background:rgba(23,25,28,.72);backdrop-filter:blur(6px);padding:.35rem .6rem;border-radius:var(--radius-sm)}
.card .body{padding:var(--space-5)}
.card .body h3{font-size:var(--fs-h4);font-weight:700;margin-bottom:.25rem}
.card .body .subtitle{color:var(--char-500);font-size:var(--fs-sm);margin-bottom:var(--space-4)}
.meter{margin:var(--space-4) 0}
.meter .track{height:8px;background:var(--cream-200);border-radius:var(--radius-pill);overflow:hidden}
.meter .fill{height:100%;width:0;background:var(--gold-500);border-radius:var(--radius-pill);transition:width 900ms var(--ease-out)}
.meter .fill.scarce{background:var(--ember-500)}
.meter .meta{display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--char-500);margin-top:.4rem}
.card .foot{display:flex;align-items:center;justify-content:space-between;margin-top:var(--space-5)}
.price{font-family:var(--font-mono);font-weight:700}
.price .amt{font-size:var(--fs-h4);color:var(--char-900)}
.price .per{font-size:var(--fs-xs);color:var(--char-400)}

/* How it works */
.how{background:var(--cream-50)}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-6)}
.step{background:#fff;border:1px solid var(--cream-300);border-radius:var(--radius-lg);padding:var(--space-6);box-shadow:var(--shadow-xs)}
.step .n{font-family:var(--font-mono);font-weight:700;font-size:var(--fs-lg);color:var(--char-900);background:var(--gold-400);width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:var(--space-4)}
.step h4{font-size:var(--fs-h4);font-weight:700;margin-bottom:.5rem}
.step p{color:var(--char-500);font-size:var(--fs-sm)}

/* Winners strip */
.winners{display:flex;gap:var(--space-5);flex-wrap:wrap}
.winner{display:flex;align-items:center;gap:var(--space-4);background:#fff;border:1px solid var(--cream-300);border-radius:var(--radius-lg);padding:var(--space-4) var(--space-5);box-shadow:var(--shadow-xs);flex:1;min-width:260px}
.winner .av{width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,var(--gold-300),var(--gold-600));flex-shrink:0}
.winner .who{font-weight:700;color:var(--char-900)}
.winner .prize{font-size:var(--fs-sm);color:var(--char-500)}

/* Footer */
footer{background:var(--char-900);color:var(--char-200);padding:var(--space-8) 0 var(--space-6);position:relative;overflow:hidden}
footer::after{content:"";position:absolute;top:-40%;right:-5%;width:40%;height:140%;background:radial-gradient(closest-side,rgba(230,179,63,.18),transparent 70%);pointer-events:none}
.foot-top{position:relative;z-index:2;display:flex;justify-content:space-between;gap:var(--space-7);flex-wrap:wrap;padding-bottom:var(--space-6);border-bottom:1px solid var(--char-700)}
.foot-brand{max-width:320px}
.foot-brand .brand{margin-bottom:var(--space-4)}
.foot-brand p{color:var(--char-400);font-size:var(--fs-sm)}
.foot-cols{display:flex;gap:var(--space-8);flex-wrap:wrap}
.foot-col h5{font-family:var(--font-body);font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:var(--ls-caps);color:var(--gold-400);margin:0 0 var(--space-4)}
.foot-col a{display:block;color:var(--char-200);font-size:var(--fs-sm);margin-bottom:.6rem}
.foot-col a:hover{color:var(--gold-400);text-decoration:none}
.compliance{position:relative;z-index:2;margin-top:var(--space-6);display:flex;justify-content:space-between;gap:var(--space-4);flex-wrap:wrap;align-items:center;font-size:var(--fs-xs);color:var(--char-400)}
.compliance .tags{display:flex;gap:.5rem;flex-wrap:wrap}
.age{font-family:var(--font-mono);font-weight:700;color:var(--char-900);background:var(--cream-100);border-radius:var(--radius-sm);padding:.15rem .45rem}

@media(max-width:900px){.grid,.steps{grid-template-columns:1fr}.hero h1{font-size:3rem}.nav-links{display:none}}

/* Toast (feedback for buttons/links with no live destination yet) */
.toast{position:fixed;left:50%;bottom:var(--space-6);transform:translate(-50%,16px);z-index:100;background:var(--char-900);color:var(--cream-50);font-size:var(--fs-sm);font-weight:600;padding:.85rem 1.25rem;border-radius:var(--radius-md);box-shadow:var(--shadow-lg);opacity:0;pointer-events:none;transition:opacity var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out);max-width:min(90vw,420px);text-align:center}
.toast.show{opacity:1;transform:translate(-50%,0)}