@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url('fonts/fraunces-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 300 900;
  font-display: swap;
  src: url('fonts/fraunces-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('fonts/publicsans.woff2') format('woff2');
}

:root{
  --ground-deep:  #071120;
  --ground:       #0C1B30;
  --ground-raised:#132A47;
  --ground-line:  #1E3A5F;
  --ink:          #EEE9DB;
  --ink-dim:      #ABB8C7;
  --ink-faint:    #7C8CA0;
  --gold:         #D9A82A;
  --gold-bright:  #F2C94C;
  --gold-dim:     #8F6A18;
  --blue-jacket:  #2868B2;
  --blue-bright:  #5CA1E3;
  --blue-vivid:   #2E7AD1;
  --blue-deep:    #123059;
  --bronze:       #B57A46;
  --silver:       #A7B1BB;
  --platinum:     #F2ECDD;
  --danger:       #E0876B;
  --success:      #7CC49A;

  --font-display: 'Fraunces', 'Iowan Old Style', 'Palatino Linotype', serif;
  --font-body: 'Public Sans', 'Segoe UI', system-ui, sans-serif;

  --measure: 62ch;
  --edge: clamp(1.25rem, 5vw, 4rem);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ color-scheme: dark; }

body{
  margin:0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img,svg{ display:block; max-width:100%; }

a{ color: inherit; }

h1,h2,h3{
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.08;
  margin: 0;
  text-wrap: balance;
  color: var(--ink);
}

p{ margin:0; }

.eyebrow{
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
}
.eyebrow.blue{ color: var(--blue-bright); }

.measure{ max-width: var(--measure); }

section{ position: relative; }

/* ---------- scroll reveal ---------- */
.reveal{
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s cubic-bezier(.16,.8,.3,1), transform .7s cubic-bezier(.16,.8,.3,1);
}
.reveal.is-visible{ opacity: 1; transform: translateY(0); }
.reveal-stagger.is-visible > *{ opacity: 1; transform: translateY(0); }
.reveal-stagger > *{
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .6s cubic-bezier(.16,.8,.3,1), transform .6s cubic-bezier(.16,.8,.3,1);
}
.reveal-stagger > *:nth-child(1){ transition-delay: 0s; }
.reveal-stagger > *:nth-child(2){ transition-delay: .09s; }
.reveal-stagger > *:nth-child(3){ transition-delay: .18s; }
.reveal-stagger > *:nth-child(4){ transition-delay: .27s; }
.reveal-stagger > *:nth-child(5){ transition-delay: .36s; }
.reveal-stagger > *:nth-child(6){ transition-delay: .45s; }
@media (prefers-reduced-motion: reduce){
  .reveal, .reveal-stagger > *{ opacity: 1 !important; transform: none !important; transition: none !important; }
}

.wrap{
  max-width: 1180px;
  margin: 0 auto;
  padding-left: var(--edge);
  padding-right: var(--edge);
}
.wrap.narrow{ max-width: 760px; }

:focus-visible{
  outline: 2px solid var(--gold-bright);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---------- braid divider (frogging trim) ---------- */
.braid{
  height: 10px;
  background-image:
    repeating-linear-gradient(115deg,
      transparent 0 6px,
      rgba(204,159,58,.6) 6px 8px,
      transparent 8px 20px),
    repeating-linear-gradient(115deg,
      transparent 4px 16px,
      rgba(62,130,214,.5) 16px 18px,
      transparent 18px 26px);
}
.braid.dense{
  background-image:
    repeating-linear-gradient(115deg,
      transparent 0 3px,
      rgba(204,159,58,.75) 3px 5px,
      transparent 5px 12px),
    repeating-linear-gradient(115deg,
      transparent 2px 9px,
      rgba(62,130,214,.55) 9px 11px,
      transparent 11px 18px);
}
/* ---------- rail-fence divider (paddock trim) ---------- */
.rail-divider{
  height: 32px;
  opacity: .5;
  background-image:
    linear-gradient(var(--gold-dim), var(--gold-dim)),
    linear-gradient(var(--gold-dim), var(--gold-dim)),
    repeating-linear-gradient(90deg, var(--gold-dim) 0 3px, transparent 3px 58px);
  background-repeat: no-repeat, no-repeat, repeat-x;
  background-size: 100% 2px, 100% 2px, 100% 100%;
  background-position: top, bottom, center;
}

/* ---------- horseshoe mark ---------- */
.horseshoe{
  --hs: 48px;
  --hs-w: 8px;
  width: var(--hs); height: var(--hs);
  border: var(--hs-w) solid var(--gold);
  border-radius: 50%;
  background: transparent;
  clip-path: polygon(0 34%, 100% 34%, 100% 100%, 0 100%);
  flex-shrink: 0;
}
.mark{
  position: absolute;
  pointer-events: none;
  z-index: 0;
}
#giveaways .mark{
  --hs: 170px; --hs-w: 13px;
  top: .5rem; right: var(--edge);
  transform: rotate(11deg);
  opacity: .16;
  border-color: var(--gold-bright);
}
.join .mark{
  --hs: 300px; --hs-w: 22px;
  top: 50%; left: 50%;
  transform: translate(-50%,-58%) rotate(-7deg);
  opacity: .12;
  border-color: var(--gold-bright);
}
.auth-shell .mark, .account-hero .mark{
  --hs: 340px; --hs-w: 26px;
  top: -90px; right: -90px;
  transform: rotate(14deg);
  opacity: .1;
}
#giveaways .wrap{ position: relative; z-index: 1; }
.join > *{ position: relative; z-index: 1; }

/* ---------- tier icons ----------
   One motif per tier, escalating from luck to command:
   Group 3 = horseshoe, Group 2 = checkered flag, Group 1 = star
   (racing's own "black type" class rating), Flagship = ship's wheel
   (the Admiral's own vessel). All CSS-drawn, no image assets. */
.tier-icon{
  --ti: 22px;
  width: var(--ti); height: var(--ti);
  flex-shrink: 0;
  position: relative;
}
.tier-icon.horseshoe{
  --hs: var(--ti); --hs-w: calc(var(--ti) * .19);
  border-color: var(--metal, var(--gold));
}
.tier-icon.flag{
  width: calc(var(--ti) * 1.05);
}
.tier-icon.flag::before{
  content:"";
  position:absolute; left:0; top:0; bottom:-15%;
  width: 12%;
  background: var(--metal, var(--gold));
  border-radius: 1px;
}
.tier-icon.flag::after{
  content:"";
  position:absolute; left:14%; top:0;
  width: 78%; height: 62%;
  background-image: conic-gradient(var(--ground-deep) 90deg, var(--ink) 90deg 180deg, var(--ground-deep) 180deg 270deg, var(--ink) 270deg);
  background-size: 34% 34%;
  border: 1px solid var(--metal, var(--gold));
  clip-path: polygon(0 0, 100% 0, 82% 50%, 100% 100%, 0 100%);
}
.tier-icon.star{
  background: var(--metal, var(--gold));
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.tier-icon.wheel{
  border: max(2px, calc(var(--ti) * .09)) solid var(--metal, var(--gold));
  border-radius: 50%;
}
.tier-icon.wheel::before{
  content:"";
  position:absolute; inset: 36%;
  border: max(1.5px, calc(var(--ti) * .07)) solid var(--metal, var(--gold));
  border-radius: 50%;
  background: var(--ground-raised);
}
.tier-icon.wheel::after{
  content:"";
  position:absolute; inset: 0;
  border-radius: 50%;
  background:
    linear-gradient(var(--metal, var(--gold)), var(--metal, var(--gold))) center / calc(var(--ti) * .14) 100% no-repeat,
    linear-gradient(var(--metal, var(--gold)), var(--metal, var(--gold))) center / 100% calc(var(--ti) * .14) no-repeat,
    linear-gradient(45deg, transparent calc(50% - var(--ti) * .07), var(--metal, var(--gold)) calc(50% - var(--ti) * .07) calc(50% + var(--ti) * .07), transparent calc(50% + var(--ti) * .07)),
    linear-gradient(-45deg, transparent calc(50% - var(--ti) * .07), var(--metal, var(--gold)) calc(50% - var(--ti) * .07) calc(50% + var(--ti) * .07), transparent calc(50% + var(--ti) * .07));
  -webkit-mask-image: radial-gradient(circle, transparent 34%, black 36%, black 100%);
          mask-image: radial-gradient(circle, transparent 34%, black 36%, black 100%);
}

/* ---------- nav ---------- */
header.site{
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(7,17,32,.86);
  backdrop-filter: blur(10px) saturate(1.1);
  border-bottom: 1px solid rgba(204,159,58,.22);
}
.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 1.5rem;
  padding: 2.4rem var(--edge);
}
.brand{
  display:flex;
  align-items:center;
  gap: .7rem;
  text-decoration:none;
}
.brand .wordmark{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.15rem;
  letter-spacing: .01em;
  color: var(--ink);
}
.brand .wordmark em{
  font-style: italic;
  color: var(--gold-bright);
  font-weight: 500;
}
ul.links{
  display:flex;
  align-items:center;
  gap: 1.9rem;
  list-style:none;
  margin:0; padding:0;
}
ul.links a{
  text-decoration:none;
  font-size: .88rem;
  font-weight: 600;
  color: var(--ink-dim);
  transition: color .15s ease;
}
ul.links a:hover{ color: var(--gold-bright); }
ul.links a.current{ color: var(--gold-bright); }
@media (max-width: 780px){ ul.links{ display:none; } }

.nav-links-row{
  display:flex;
  flex-wrap:wrap;
  gap:.7rem;
  padding: 1.2rem var(--edge) 0;
}

.nav-actions{ display:flex; align-items:center; gap: .9rem; }
.nav-account{
  display:flex; align-items:center; gap:.55rem;
  text-decoration:none;
  font-size: .86rem; font-weight:700;
  color: var(--ink-dim);
}
.nav-account:hover{ color: var(--gold-bright); }
.nav-account .dot{
  width:.5rem; height:.5rem; border-radius:50%;
  background: var(--success);
  flex-shrink:0;
}

.btn{
  position: relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  padding: .68rem 1.35rem;
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: .88rem;
  letter-spacing: .01em;
  text-decoration:none;
  cursor:pointer;
  border: 1px solid transparent;
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, opacity .18s ease;
}
.btn:hover{ transform: translateY(-2px); }
.btn:disabled{ opacity:.55; cursor:not-allowed; transform:none; }
.btn::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.55) 46%, transparent 60%);
  transform: translateX(-120%);
  transition: transform .6s ease;
}
.btn:hover::after{ transform: translateX(120%); }
.btn-gold{
  background: linear-gradient(180deg, var(--gold-bright), var(--gold));
  color: var(--ground-deep);
  box-shadow: 0 6px 20px -8px rgba(204,159,58,.7);
}
.btn-gold:hover{ box-shadow: 0 12px 30px -8px rgba(204,159,58,.9), 0 0 0 3px rgba(204,159,58,.18); }
.btn-ghost{
  background: transparent;
  border-color: rgba(238,233,219,.35);
  color: var(--ink);
}
.btn-ghost:hover{ border-color: var(--blue-bright); color: var(--blue-bright); box-shadow: 0 8px 22px -12px rgba(62,130,214,.7); }
.btn-block{ width:100%; }
.btn-sm{ padding: .5rem 1.05rem; font-size: .8rem; }

.ticker-horse{ display:inline-block; animation: horse-gallop .6s ease-in-out infinite; }
@keyframes horse-gallop{
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-3px) rotate(-6deg); }
}
@media (prefers-reduced-motion: reduce){ .ticker-horse{ animation: none; } }
@media (prefers-reduced-motion: reduce){ .btn::after{ display:none; } }

/* ---------- crest / logo marks ---------- */
.logo-chip{
  flex-shrink: 0;
  width: 2.5rem; height: 2.5rem;
  border-radius: 50%;
  background: var(--ink);
  border: 1.5px solid var(--gold);
  overflow: hidden;
  box-shadow: 0 4px 14px -6px rgba(0,0,0,.5);
}
.logo-chip img{
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 16%;
  transform: scale(1.1);
}
.footer-brand .logo-chip{ width: 2.2rem; height: 2.2rem; }

.logo-plaque{
  position: relative;
  display:inline-block;
}
.logo-plaque::before{
  content:"";
  position:absolute;
  inset: -30px;
  z-index:-1;
  background: conic-gradient(from 0deg, rgba(62,130,214,.5), rgba(204,159,58,.5), rgba(62,130,214,.5));
  filter: blur(46px);
  opacity: .5;
  border-radius: 50%;
  animation: spin-glow 14s linear infinite;
}
@keyframes spin-glow{ to{ transform: rotate(360deg); } }
/* Solid medallion behind the mascot so it reads as a badge sitting on
   top of the hero photo, not a flat cutout colliding with it. */
.logo-plaque::after{
  content:"";
  position:absolute;
  inset: -13%;
  z-index:-1;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 36%, var(--ground-raised), var(--ground-deep) 74%);
  border: 2px solid rgba(204,159,58,.55);
  box-shadow: 0 0 0 9px rgba(7,17,32,.4), 0 25px 55px -22px rgba(0,0,0,.75);
}
.logo-plaque img{
  display:block;
  width: clamp(220px, 30vw, 380px);
  height: clamp(220px, 30vw, 380px);
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 22%;
  filter: drop-shadow(0 18px 32px rgba(0,0,0,.55));
}
.logo-plaque.small img{ width: 120px; height: 120px; }

.hero-mark{
  display:block;
  width: min(42vw, 260px);
  height: min(42vw, 260px);
  object-fit: cover;
  object-position: 50% 15%;
  border-radius: 50%;
  border: 3px solid var(--gold);
  box-shadow: 0 0 0 9px rgba(7,17,32,.4), 0 20px 40px -12px rgba(0,0,0,.7);
  animation: word-rise .7s cubic-bezier(.16,.8,.3,1) .1s both;
}
.hero-wordmark{
  display:block;
  width: min(66vw, 460px);
  height: auto;
  margin-top: .75rem;
  filter: drop-shadow(0 10px 20px rgba(0,0,0,.5));
  animation: word-rise .7s cubic-bezier(.16,.8,.3,1) .25s both;
}
@media (prefers-reduced-motion: reduce){ .hero-mark, .hero-wordmark{ animation: none; } }
@media (prefers-reduced-motion: reduce){ .logo-plaque::before{ animation: none; } }

/* ---------- hero ---------- */
.hero{
  position: relative;
  padding: clamp(2.5rem, 7vw, 6rem) var(--edge) clamp(3.5rem, 8vw, 6rem);
  overflow: hidden;
  background:
    radial-gradient(ellipse 1000px 620px at 50% -12%, rgba(62,130,214,.36), transparent 62%),
    radial-gradient(ellipse 760px 520px at 86% 6%, rgba(204,159,58,.2), transparent 60%),
    radial-gradient(ellipse 700px 460px at 8% 96%, rgba(204,159,58,.12), transparent 60%),
    linear-gradient(180deg, rgba(7,17,32,.58) 0%, rgba(7,17,32,.68) 40%, rgba(7,17,32,.97) 78%, var(--ground) 92%);
}
/* A real race day photo, panned slowly behind the gradient tint above —
   negative z-index sinks it below .hero's own background (which only
   works because .hero itself has no z-index, so it never becomes its
   own stacking context). Positioned toward the top of the frame so the
   photographer's watermark, near the bottom of the source photo, falls
   outside the crop / under the opaque tail of the gradient above. */
.hero::after{
  content:"";
  position:absolute; inset: -3%;
  z-index:-1;
  background: url('images/calton-drught-finish.jpg') center 4% / cover no-repeat;
  transform: scale(1.06);
  animation: hero-pan 28s ease-in-out infinite alternate;
}
@keyframes hero-pan{
  from{ transform: scale(1.06) translate(0, 0); }
  to{ transform: scale(1.16) translate(-1.6%, -1%); }
}
@media (prefers-reduced-motion: reduce){ .hero::after{ animation: none; } }
.hero::before{
  content:"";
  position:absolute; inset:0;
  background-image: repeating-linear-gradient(115deg,
    transparent 0 64px,
    rgba(238,233,219,.035) 64px 66px,
    transparent 66px 128px,
    rgba(238,233,219,.02) 128px 130px);
  pointer-events:none;
}
.hero-inner{
  position: relative;
  z-index: 1;
  max-width: 1180px;
  margin: 0 auto;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: 1.1rem;
}
/* ---------- animated brand title ---------- */
.brand-title{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:center;
  gap: 0 .55rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.6rem, 7.4vw, 5.75rem);
  line-height: 1;
  letter-spacing: -.01em;
}
.brand-title.small{ font-size: clamp(1.8rem, 4vw, 2.6rem); }
.brand-title .letters{
  display:inline-flex;
  background: linear-gradient(100deg, var(--blue-deep) 0%, var(--blue-jacket) 30%, var(--blue-bright) 50%, var(--blue-jacket) 70%, var(--blue-deep) 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
}
.brand-title .letters span{
  display:inline-block;
  opacity: 0;
  transform: translateY(.55em);
  animation-name: letter-rise;
  animation-duration: .65s;
  animation-timing-function: cubic-bezier(.16,.8,.3,1);
  animation-fill-mode: forwards;
  color: transparent;
}
.brand-title .letters span:nth-child(1){ animation-delay: .05s; }
.brand-title .letters span:nth-child(2){ animation-delay: .10s; }
.brand-title .letters span:nth-child(3){ animation-delay: .15s; }
.brand-title .letters span:nth-child(4){ animation-delay: .20s; }
.brand-title .letters span:nth-child(5){ animation-delay: .25s; }
.brand-title .letters span:nth-child(6){ animation-delay: .30s; }
.brand-title .letters span:nth-child(7){ animation-delay: .35s; }
.brand-title .accent{
  font-style: italic;
  font-weight: 600;
  opacity: 0;
  transform: translateY(.4em) scale(.94);
  background: linear-gradient(100deg, var(--gold) 0%, var(--gold-bright) 25%, #fff6de 40%, var(--gold-bright) 55%, var(--gold) 80%);
  background-size: 260% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation-name: word-rise, shimmer;
  animation-duration: .6s, 7s;
  animation-timing-function: cubic-bezier(.16,.8,.3,1), ease-in-out;
  animation-delay: .5s, 1.3s;
  animation-iteration-count: 1, infinite;
  animation-fill-mode: forwards, none;
}
.brand-title-bar{
  width: 0;
  height: 3px;
  margin: .3rem auto 0;
  background: linear-gradient(90deg, var(--blue-bright), var(--gold-bright));
  border-radius: 2px;
  animation: draw-bar .7s cubic-bezier(.16,.8,.3,1) 1.15s forwards;
}
@keyframes letter-rise{ to{ opacity: 1; transform: translateY(0); } }
@keyframes word-rise{ to{ opacity: 1; transform: translateY(0) scale(1); } }
@keyframes draw-bar{ to{ width: min(340px, 60%); } }
@media (prefers-reduced-motion: reduce){
  .brand-title .letters span, .brand-title .accent{
    animation: none; opacity: 1; transform: none;
  }
  .brand-title-bar{ animation: none; width: min(340px, 60%); }
}

.hero .eyebrow{ display:flex; align-items:center; gap:.6rem; }
.hero .eyebrow::before, .hero .eyebrow::after{
  content:"";
  width: 28px; height:1px;
  background: linear-gradient(90deg, transparent, var(--gold));
}
.hero .eyebrow::after{ background: linear-gradient(90deg, var(--gold), transparent); }
.hero .slogan{
  display:flex;
  align-items:center;
  gap: 1rem;
  font-family: 'Pinyon Script', var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(2.4rem, 6vw, 3.6rem);
  letter-spacing: .02em;
  background: linear-gradient(100deg, var(--gold) 0%, var(--gold-bright) 25%, #fff6de 40%, var(--gold-bright) 55%, var(--gold) 80%);
  background-size: 260% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 14px rgba(204,159,58,.35));
  animation: shimmer 6s ease-in-out infinite;
}
.hero .slogan::before, .hero .slogan::after{
  content:"";
  width: 46px; height:2px;
  background: linear-gradient(90deg, transparent, var(--gold-bright));
}
.hero .slogan::after{ background: linear-gradient(90deg, var(--gold-bright), transparent); }
@media (prefers-reduced-motion: reduce){ .hero .slogan{ animation: none; } }
.hero h1{
  font-size: clamp(2.6rem, 6.2vw, 5.1rem);
  max-width: 16ch;
}
.hero h1 em{
  font-style: italic;
  background: linear-gradient(100deg, var(--gold) 0%, var(--gold-bright) 25%, #fff6de 40%, var(--gold-bright) 55%, var(--gold) 80%);
  background-size: 260% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shimmer 7s ease-in-out infinite;
}
@keyframes shimmer{
  0%,100%{ background-position: 0% 50%; }
  50%{ background-position: 100% 50%; }
}
@media (prefers-reduced-motion: reduce){ .hero h1 em{ animation: none; } }
.hero .sub{
  max-width: 46ch;
  font-size: 1.13rem;
  color: var(--ink-dim);
}
.hero .ctas{ display:flex; gap: .9rem; flex-wrap:wrap; justify-content:center; margin-top:.4rem; }
.hero .fine{
  margin-top: .4rem;
  font-size: .82rem;
  color: var(--ink-faint);
  letter-spacing: .02em;
}

/* ---------- section shells ---------- */
.section{ padding: clamp(3.5rem, 8vw, 6.5rem) 0; }
.section-head{
  display:flex;
  flex-direction:column;
  gap: .85rem;
  margin-bottom: clamp(2.2rem, 5vw, 3.2rem);
}
.section-head h2{ font-size: clamp(1.9rem, 3.6vw, 2.7rem); }
.section-head .lede{ color: var(--ink-dim); max-width: var(--measure); font-size: 1.05rem; }
.alt{
  background:
    radial-gradient(1000px 420px at 10% -8%, rgba(62,130,214,.22), transparent 60%),
    radial-gradient(820px 420px at 92% 108%, rgba(204,159,58,.16), transparent 60%),
    var(--ground-raised);
}

/* ---------- how it works ---------- */
.steps{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  position: relative;
}
@media (max-width: 780px){ .steps{ grid-template-columns: 1fr; gap: 2.4rem; } }
.step{ display:flex; flex-direction:column; gap:.6rem; }
.step .num{
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: 2.6rem;
  line-height:1;
  color: var(--accent, var(--gold-bright));
}
.step h3{ font-size: 1.15rem; color: var(--ink); }
.step p{ color: var(--ink-dim); font-size: .94rem; max-width: 34ch; }
.step:nth-child(1){ --accent: var(--gold-bright); }
.step:nth-child(2){ --accent: var(--blue-bright); }
.step:nth-child(3){ --accent: var(--gold-bright); }

/* ---------- concept / pull quotes ---------- */
.concept-grid{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
@media (max-width: 860px){ .concept-grid{ grid-template-columns: 1fr; } }
.concept-grid .body{ color: var(--ink-dim); font-size: 1.05rem; display:flex; flex-direction:column; gap:1.1rem; }
.concept-grid .body strong{ color: var(--ink); font-weight:700; }
.quotes{ display:flex; flex-direction:column; gap: 1.2rem; }
.quote-card{
  border: 1px solid rgba(204,159,58,.3);
  border-left: 3px solid var(--gold);
  background: rgba(204,159,58,.05);
  padding: 1.5rem 1.6rem;
  border-radius: 4px;
}
.quote-card .label{ font-size: .7rem; }
.quote-card p{
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.18rem;
  color: var(--ink);
  margin-top: .5rem;
  line-height: 1.4;
}

/* ---------- membership tiers ---------- */
.tiers{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}
@media (max-width: 1080px){ .tiers{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){ .tiers{ grid-template-columns: 1fr; } }
.tier{
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--metal, var(--gold)) 7%, transparent), transparent 45%),
    var(--ground-raised);
  border: 1px solid var(--ground-line);
  border-radius: 6px;
  padding: 2rem 1.8rem 2.1rem;
  display:flex;
  flex-direction:column;
  gap: 1.35rem;
  position:relative;
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.tier:hover{
  transform: translateY(-6px);
  border-color: var(--metal, var(--gold));
  box-shadow: 0 22px 44px -22px color-mix(in srgb, var(--metal, var(--gold)) 65%, transparent);
}
.tier::before{
  content:"";
  position:absolute; top:0; left:0; right:0; height:3px;
  background: var(--metal, var(--gold));
  border-radius: 6px 6px 0 0;
}
.tier .badge{
  width: 2.6rem; height:2.6rem;
  border-radius:50%;
  border: 1.5px solid var(--metal, var(--gold));
  display:flex; align-items:center; justify-content:center;
  font-family: var(--font-display); font-style:italic; font-weight:600;
  color: var(--metal, var(--gold));
  font-size: 1rem;
}
.tier h3{ font-size: 1.55rem; color: var(--ink); }
.tier .price{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2rem;
  color: var(--ink);
  line-height: 1;
}
.tier .price .period{
  font-family: var(--font-body);
  font-weight: 700;
  font-size: .62rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--metal, var(--gold));
  margin-left: .35rem;
}
.tier .includes{ font-size: .86rem; color: var(--ink-faint); font-style: italic; }
.tier ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.65rem; }
.tier .btn{ margin-top: auto; }
.tier ul li{
  display:flex; gap:.6rem; font-size: .95rem; color: var(--ink-dim);
  padding-bottom:.65rem;
  border-bottom: 1px solid rgba(238,233,219,.08);
}
.tier ul li:last-child{ border-bottom:none; padding-bottom:0; }
.tier ul li::before{ content:"—"; color: var(--metal, var(--gold)); flex-shrink:0; }
.tier.group3{ --metal: var(--bronze); }
.tier.group2{ --metal: var(--silver); }
.tier.group1{ --metal: var(--gold-bright); }
.tier.group1{ box-shadow: 0 20px 50px -30px rgba(240,206,124,.6); }
.tier.flagship{ --metal: var(--platinum); }
.tier.flagship{ box-shadow: 0 22px 54px -28px rgba(242,236,221,.55); }

/* ---------- benefit cadence ---------- */
.cadence-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border: 1px solid var(--ground-line);
  border-radius: 6px;
  overflow:hidden;
}
@media (max-width: 820px){ .cadence-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px){ .cadence-grid{ grid-template-columns: 1fr; } }
.cadence-col{
  padding: 1.9rem 1.6rem;
  border-left: 1px solid var(--ground-line);
}
.cadence-col:first-child{ border-left:none; }
.cadence-col .n{
  font-family: var(--font-body);
  font-size: .72rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color: var(--gold);
  display:block; margin-bottom: 1rem;
}
.cadence-col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.6rem; }
.cadence-col li{ font-size: .93rem; color: var(--ink-dim); }

/* ---------- giveaways ---------- */
.chips{ display:flex; flex-wrap:wrap; gap: .65rem; }
.chip{
  border: 1px solid rgba(204,159,58,.4);
  background: rgba(204,159,58,.07);
  color: var(--ink);
  padding: .55rem 1.05rem;
  border-radius: 999px;
  font-size: .88rem;
  font-weight: 600;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.chip:hover{
  transform: translateY(-2px);
  background: rgba(204,159,58,.15);
  box-shadow: 0 10px 22px -12px rgba(204,159,58,.6);
}
.chip:nth-child(3n+2){
  border-color: rgba(62,130,214,.45);
  background: rgba(62,130,214,.08);
}
.chip:nth-child(3n+2):hover{
  background: rgba(62,130,214,.17);
  box-shadow: 0 10px 22px -12px rgba(62,130,214,.6);
}
.fineprint{
  margin-top: 1.6rem;
  font-size: .82rem;
  color: var(--ink-faint);
  max-width: var(--measure);
  border-top: 1px solid rgba(238,233,219,.1);
  padding-top: 1.1rem;
}

/* ---------- heritage ---------- */
.heritage-body{
  max-width: 68ch;
  margin: 0 auto;
  display:flex;
  flex-direction:column;
  gap: 1.1rem;
  color: var(--ink-dim);
  font-size: 1.05rem;
  line-height: 1.75;
}
.heritage-body strong{ color: var(--ink); font-weight: 700; }

/* ---------- pull quote ---------- */
.pull-quote{
  max-width: 58ch;
  margin: 2.4rem auto 0;
  padding-top: 1.8rem;
  border-top: 1px solid rgba(204,159,58,.3);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(1.2rem, 2.4vw, 1.55rem);
  line-height: 1.45;
  text-align: center;
  color: var(--ink);
}
.pull-quote strong{
  font-weight: 700;
  background: linear-gradient(100deg, var(--gold) 0%, var(--gold-bright) 25%, #fff6de 40%, var(--gold-bright) 55%, var(--gold) 80%);
  background-size: 260% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- program cards (Two Ways In) ---------- */
.programs-grid{
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  gap: 1.6rem;
}
.programs-grid .divider{
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--ink-faint);
}
@media (max-width: 760px){
  .programs-grid{ grid-template-columns: 1fr; }
  .programs-grid .divider{ padding: .1rem 0; }
}
.program-card{
  position: relative;
  background: var(--ground-raised);
  border: 1px solid var(--ground-line);
  border-left: 3px solid var(--gold);
  border-radius: 8px;
  padding: 2.1rem 2rem;
  display: flex;
  flex-direction: column;
  gap: .85rem;
  transition: transform .3s cubic-bezier(.16,.8,.3,1), border-color .3s, box-shadow .3s;
}
.program-card:hover{
  transform: translateY(-5px);
  border-color: var(--gold-bright);
  box-shadow: 0 20px 40px -24px rgba(0,0,0,.6);
}
.program-card .badge-circle{
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--gold-bright), var(--gold));
  color: var(--ground-deep);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
}
.program-card h3{ font-family: var(--font-display); font-size: 1.55rem; }
.program-card p{ color: var(--ink-dim); font-size: .95rem; flex-grow: 1; }

/* ---------- why / manifesto ---------- */
.manifesto{ display:flex; flex-direction:column; }
.manifesto-row{
  display:grid;
  grid-template-columns: 13rem 1fr;
  gap: 2rem;
  padding: 1.7rem 0;
  border-top: 1px solid rgba(238,233,219,.1);
  transition: padding-left .25s ease;
}
.manifesto-row:last-child{ border-bottom: 1px solid rgba(238,233,219,.1); }
@media (max-width: 680px){ .manifesto-row{ grid-template-columns: 1fr; gap: .5rem; } }
.manifesto-row:hover{ padding-left: .5rem; }
.manifesto-row .term{
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: 1.5rem;
  color: var(--gold-bright);
}
.manifesto-row:nth-child(even) .term{ color: var(--blue-bright); }
.manifesto-row .def{ color: var(--ink-dim); font-size: 1.02rem; max-width: 56ch; }

/* ---------- community / marquee ---------- */
.audience-line{ color: var(--ink-dim); font-size: 1.08rem; max-width: var(--measure); }
.audience-line strong{ color: var(--ink); }
.marquee{
  margin-top: 2.6rem;
  border-top: 1px solid rgba(204,159,58,.25);
  border-bottom: 1px solid rgba(204,159,58,.25);
  padding: 1.1rem 0;
  overflow: hidden;
  white-space: nowrap;
}
.marquee-track{
  display:inline-flex;
  animation: scroll-left 30s linear infinite;
}
.marquee .set{ display:inline-flex; align-items:center; padding-right: 2.4rem; }
.marquee .tag{
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 1.08rem;
  color: var(--gold-bright);
  margin-right: 2.2rem;
}
.marquee .tag::after{
  content: "\2022";
  font-family: var(--font-body);
  font-style: normal;
  color: var(--ink-faint);
  margin-left: 2.2rem;
}
.marquee .tag:last-child{ margin-right:0; }
.marquee .tag:last-child::after{ content:""; margin-left:0; }
.marquee .tag:nth-child(even){ color: var(--blue-bright); }
@keyframes scroll-left{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce){
  .marquee{ overflow-x:auto; }
  .marquee-track{ animation: none; }
}

/* ---------- join / footer ---------- */
.join{
  text-align:center;
  padding: clamp(3.5rem, 9vw, 6rem) var(--edge);
  background:
    radial-gradient(ellipse 820px 420px at 18% 0%, rgba(62,130,214,.24), transparent 62%),
    radial-gradient(ellipse 820px 420px at 82% 100%, rgba(204,159,58,.2), transparent 62%),
    var(--ground-deep);
}
.join h2{ font-size: clamp(2.1rem, 4.5vw, 3.2rem); }
.join .sub{ color: var(--ink-dim); max-width: 44ch; margin: 1rem auto 1.8rem; font-size: 1.05rem; }

footer{
  background: var(--ground-deep);
  border-top: 1px solid rgba(204,159,58,.18);
  padding: 3.5rem var(--edge) 2rem;
}
.footer-grid{
  max-width: 1180px; margin: 0 auto;
  display:grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 2.5rem;
}
@media (max-width: 780px){ .footer-grid{ grid-template-columns: 1fr 1fr; } }
.footer-grid h4{
  font-family: var(--font-body);
  font-size: .74rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color: var(--gold);
  margin: 0 0 1rem;
}
.footer-grid ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.6rem; }
.footer-grid a{ text-decoration:none; color: var(--ink-dim); font-size: .92rem; }
.footer-grid a:hover{ color: var(--gold-bright); }
.footer-brand p{ color: var(--ink-faint); font-size: .9rem; max-width: 32ch; margin-top: .8rem; }
.footer-bottom{
  max-width: 1180px; margin: 2.8rem auto 0;
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem;
  padding-top: 1.6rem;
  border-top: 1px solid rgba(238,233,219,.08);
  font-size: .8rem;
  color: var(--ink-faint);
}
.footer-bottom .social{ display:flex; gap:1.2rem; }
.footer-bottom .social a{ color: var(--ink-faint); text-decoration:none; font-weight:600; }
.footer-bottom .social a:hover{ color: var(--gold-bright); }

/* ==================================================================
   Auth (login / signup) and member account
   ================================================================== */

.auth-hero, .account-hero{
  position: relative;
  overflow: hidden;
  padding: clamp(3.5rem, 9vw, 6rem) var(--edge) clamp(2.5rem, 6vw, 4rem);
  background:
    radial-gradient(ellipse 900px 520px at 50% -12%, rgba(62,130,214,.38), transparent 62%),
    radial-gradient(ellipse 700px 420px at 88% 4%, rgba(204,159,58,.2), transparent 60%),
    linear-gradient(180deg, var(--ground-deep), var(--ground) 70%);
  text-align: center;
}
.auth-hero .inner, .account-hero .inner{ position: relative; z-index: 1; max-width: 640px; margin: 0 auto; }
.auth-hero .eyebrow, .account-hero .eyebrow{ justify-content: center; display:flex; }
.account-hero .sub{
  max-width: 46ch;
  margin: .9rem auto 0;
  font-size: 1.05rem;
  text-align: center;
  color: var(--ink-dim);
}

/* ---------- race day photo gallery ---------- */
.gallery-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1rem;
}
.gallery-item{
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--ground-line);
  background: var(--ground-raised);
}
.gallery-item.tall{ aspect-ratio: 4 / 5; }
.gallery-item img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s cubic-bezier(.16,.8,.3,1);
}
.gallery-item:hover img{ transform: scale(1.06); }
.gallery-item .caption{
  position: absolute;
  inset: auto 0 0 0;
  padding: .9rem 1rem .7rem;
  font-size: .82rem;
  color: var(--ink);
  background: linear-gradient(180deg, transparent, rgba(6,14,28,.88) 60%);
}

/* ---------- stable roster ---------- */
.stable-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.1rem;
}
.horse-card{
  background: var(--ground-raised);
  border: 1px solid var(--ground-line);
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.horse-card .photo{
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: 22% 40%;
  display: block;
}
.horse-card .body{
  padding: 1.5rem 1.4rem;
  display: flex;
  flex-direction: column;
  gap: .6rem;
}
.horse-card .status{
  align-self: flex-start;
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 700;
  padding: .28rem .65rem;
  border-radius: 999px;
  color: var(--gold-bright);
  border: 1px solid rgba(204,159,58,.4);
}
.horse-card h3{ font-family: var(--font-display); font-size: 1.3rem; }
.horse-card .meta{ font-size: .82rem; color: var(--ink-faint); }
.horse-card p{ font-size: .9rem; color: var(--ink-dim); }

/* ---------- founders ---------- */
.founder-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1.5rem;
}
.founder-card{
  background: var(--ground-raised);
  border: 1px solid var(--ground-line);
  border-radius: 12px;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: .7rem;
}
.founder-avatar{
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.3rem;
  color: var(--ground-deep);
  background: linear-gradient(135deg, var(--gold-bright), var(--gold));
}
.founder-card .role{
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-weight: 700;
  color: var(--gold-bright);
}
.founder-card h3{ font-family: var(--font-display); font-size: 1.4rem; }
.founder-card p{ font-size: .92rem; color: var(--ink-dim); }

.auth-shell{
  position: relative;
  padding: 0 var(--edge) clamp(4rem, 9vw, 6rem);
}
.auth-card{
  position: relative;
  z-index: 1;
  max-width: 440px;
  margin: -2.75rem auto 0;
  background: var(--ground-raised);
  border: 1px solid var(--ground-line);
  border-radius: 10px;
  padding: 2.25rem 2rem 2rem;
  box-shadow: 0 30px 60px -30px rgba(0,0,0,.55);
}

.field{ display:flex; flex-direction:column; gap:.45rem; margin-bottom: 1.15rem; }
.field label{
  font-size: .78rem; font-weight:700; letter-spacing:.04em;
  color: var(--ink-dim);
}
.input{
  font-family: var(--font-body);
  font-size: .96rem;
  color: var(--ink);
  background: var(--ground);
  border: 1px solid var(--ground-line);
  border-radius: 6px;
  padding: .72rem .85rem;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.input::placeholder{ color: var(--ink-faint); }
.input:focus{
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(204,159,58,.18);
}
.input:invalid[data-touched="true"]{ border-color: var(--danger); }
.field .hint{ font-size: .78rem; color: var(--ink-faint); }

.form-actions{ margin-top: 1.5rem; display:flex; flex-direction:column; gap: .9rem; }

.alert{
  display:flex; gap:.6rem; align-items:flex-start;
  font-size: .88rem;
  padding: .8rem .95rem;
  border-radius: 6px;
  margin-bottom: 1.1rem;
  line-height: 1.45;
}
.alert-error{
  background: rgba(224,135,107,.1);
  border: 1px solid rgba(224,135,107,.4);
  color: #F3C7B6;
}
.alert-success{
  background: rgba(124,196,154,.1);
  border: 1px solid rgba(124,196,154,.4);
  color: #C8EAD6;
}
.alert[hidden]{ display:none; }

.auth-switch{
  text-align:center;
  margin-top: 1.6rem;
  font-size: .9rem;
  color: var(--ink-dim);
}
.auth-switch a{ color: var(--gold-bright); font-weight:700; text-decoration:none; }
.auth-switch a:hover{ text-decoration:underline; }

.auth-back{
  display:inline-flex; align-items:center; gap:.4rem;
  font-size: .84rem; font-weight:600;
  color: var(--ink-faint); text-decoration:none;
  margin-bottom: 1.4rem;
}
.auth-back:hover{ color: var(--gold-bright); }

/* ---------- account dashboard ---------- */
.account-shell{ padding: clamp(2.5rem, 6vw, 4rem) 0 clamp(4rem, 8vw, 6rem); }

.status-row{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap: 1.5rem;
  margin-bottom: clamp(2rem, 5vw, 3rem);
}
.status-card{
  display:flex; align-items:center; gap: 1.1rem;
  background: var(--ground-raised);
  border: 1px solid var(--ground-line);
  border-radius: 10px;
  padding: 1.3rem 1.5rem;
  flex: 1 1 320px;
}
.status-card .badge{
  width: 3rem; height: 3rem; flex-shrink:0;
  border-radius:50%;
  border: 1.5px solid var(--metal, var(--gold));
  display:flex; align-items:center; justify-content:center;
  font-family: var(--font-display); font-style:italic; font-weight:600;
  color: var(--metal, var(--gold));
  font-size: 1.1rem;
}
.status-card .badge .tier-icon{ --ti: 26px; }
.status-card h3{ font-size: 1.2rem; }
.status-card .meta{ font-size: .85rem; color: var(--ink-faint); margin-top: .2rem; }
.status-pill{
  display:inline-flex; align-items:center; gap:.4rem;
  font-size: .72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  padding: .3rem .7rem;
  border-radius: 999px;
  background: rgba(124,196,154,.12);
  color: var(--success);
  border: 1px solid rgba(124,196,154,.35);
}
.status-pill .dot{ width:.4rem; height:.4rem; border-radius:50%; background: currentColor; }
.status-pill.paused{ background: rgba(240,206,124,.12); color: var(--gold-bright); border-color: rgba(240,206,124,.35); }
.status-pill.cancelled{ background: rgba(224,135,107,.12); color: var(--danger); border-color: rgba(224,135,107,.35); }
.status-pill.cancelling{ background: rgba(111,163,220,.12); color: var(--blue-bright); border-color: rgba(111,163,220,.35); }

.tabs{
  display:flex; gap: .5rem; flex-wrap:wrap;
  border-bottom: 1px solid var(--ground-line);
  margin-bottom: 2.2rem;
}
.tab{
  font-family: var(--font-body); font-weight:700; font-size: .88rem;
  color: var(--ink-faint);
  background: none; border: none; cursor:pointer;
  padding: .8rem .3rem;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color .15s ease, border-color .15s ease;
}
.tab + .tab{ margin-left: 1.6rem; }
.tab:hover{ color: var(--ink); }
.tab.active{ color: var(--gold-bright); border-bottom-color: var(--gold-bright); }
.tab-panel[hidden]{ display:none; }

.entry-list{ display:flex; flex-direction:column; gap: .75rem; }
.entry-row{
  display:flex; align-items:center; justify-content:space-between; gap: 1rem;
  background: var(--ground-raised);
  border: 1px solid var(--ground-line);
  border-radius: 8px;
  padding: 1rem 1.2rem;
}
.entry-row .name{ font-weight:700; font-size: .96rem; }
.entry-row .date{ font-size: .82rem; color: var(--ink-faint); margin-top:.15rem; }
.entry-status{
  font-size: .72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  padding: .3rem .65rem; border-radius: 999px;
  background: rgba(111,163,220,.14); color: var(--blue-bright);
  border: 1px solid rgba(111,163,220,.35);
  white-space: nowrap;
}
.entry-status.won{ background: rgba(240,206,124,.14); color: var(--gold-bright); border-color: rgba(240,206,124,.4); }

.empty-state{
  text-align:center;
  padding: 3rem 1.5rem;
  color: var(--ink-faint);
  border: 1px dashed var(--ground-line);
  border-radius: 10px;
  font-size: .92rem;
}

.tool-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.4rem; }
.tool-card{
  background: var(--ground-raised);
  border: 1px solid var(--ground-line);
  border-radius: 10px;
  padding: 1.9rem 1.7rem;
  display:flex; flex-direction:column; gap: .7rem;
  text-decoration:none;
  transition: transform .18s ease, border-color .18s ease;
}
.tool-card:hover{ transform: translateY(-3px); border-color: var(--gold-bright); }
.tool-card .tool-icon{
  width: 2.6rem; height: 2.6rem;
  border-radius: 50%;
  border: 1.5px solid var(--gold-bright);
  display:flex; align-items:center; justify-content:center;
  font-size: 1.2rem;
}
.tool-card h3{ font-size: 1.2rem; color: var(--ink); }
.tool-card p{ color: var(--ink-dim); font-size: .88rem; }

.content-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1.25rem; }
.content-card{
  background: var(--ground-raised);
  border: 1px solid var(--ground-line);
  border-radius: 8px;
  padding: 1.3rem 1.4rem;
  display:flex; flex-direction:column; gap: .6rem;
}
.content-card .type{
  font-size: .68rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color: var(--blue-bright);
}
.content-card h3{ font-size: 1.05rem; }
.content-card p{ color: var(--ink-dim); font-size: .88rem; }
.content-card .locked{
  display:flex; align-items:center; gap:.5rem;
  font-size: .82rem; color: var(--ink-faint); font-weight:600;
  margin-top: auto; padding-top: .3rem;
}

.plan-card{
  background: var(--ground-raised);
  border: 1px solid var(--ground-line);
  border-radius: 8px;
  padding: 1.3rem 1.4rem;
  display:flex; flex-direction:column; gap: .7rem;
  position: relative;
  transition: transform .18s ease, border-color .18s ease;
}
.plan-card::before{
  content:"";
  position:absolute; top:0; left:0; right:0; height:3px;
  background: var(--metal, var(--gold));
  border-radius: 8px 8px 0 0;
}
.plan-card:hover{ transform: translateY(-3px); border-color: var(--metal, var(--gold)); }
.plan-card .badge{
  width: 2.2rem; height:2.2rem;
  border-radius:50%;
  border: 1.5px solid var(--metal, var(--gold));
  display:flex; align-items:center; justify-content:center;
}
.plan-card .badge .tier-icon{ --ti: 18px; }
.plan-card h3{ font-size: 1.1rem; margin-top: .2rem; }
.plan-card .price{
  font-family: var(--font-display); font-weight:700; font-size: 1.5rem; color: var(--ink);
}
.plan-card .price .period{
  font-family: var(--font-body); font-weight:700; font-size: .6rem; letter-spacing:.08em;
  text-transform:uppercase; color: var(--metal, var(--gold)); margin-left:.3rem;
}

.profile-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 0 1.5rem; max-width: 520px; }
@media (max-width: 560px){ .profile-grid{ grid-template-columns: 1fr; } }
.profile-grid .field.full{ grid-column: 1 / -1; }

.danger-zone{
  margin-top: 2.5rem;
  padding-top: 1.8rem;
  border-top: 1px solid rgba(238,233,219,.1);
}
.danger-zone p{ color: var(--ink-faint); font-size: .86rem; margin-bottom: .9rem; max-width: 46ch; }
.btn-danger{
  background: transparent;
  border-color: rgba(224,135,107,.5);
  color: var(--danger);
}
.btn-danger:hover{ border-color: var(--danger); box-shadow: 0 8px 22px -12px rgba(224,135,107,.6); }

/* ---------- admin ---------- */
.admin-badge{
  display:inline-flex; align-items:center; gap:.35rem;
  font-size: .68rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color: var(--gold-bright);
  border: 1px solid rgba(240,206,124,.4);
  background: rgba(240,206,124,.1);
  padding: .2rem .55rem;
  border-radius: 999px;
}

.table-scroll{ overflow-x: auto; border: 1px solid var(--ground-line); border-radius: 8px; }
.table-scroll-tall{ max-height: 60vh; overflow-y: auto; }
.table-scroll-tall table.data-table thead th{ position: sticky; top: 0; z-index: 1; }
table.data-table{ width:100%; border-collapse: collapse; font-size: .9rem; min-width: 640px; }
table.data-table th{
  text-align:left; font-size: .7rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color: var(--ink-faint);
  padding: .85rem 1rem;
  background: var(--ground-raised);
  border-bottom: 1px solid var(--ground-line);
  white-space: nowrap;
}
table.data-table td{
  padding: .85rem 1rem;
  border-bottom: 1px solid rgba(238,233,219,.06);
  color: var(--ink-dim);
  vertical-align: middle;
}
table.data-table tr:last-child td{ border-bottom:none; }
table.data-table td.name{ color: var(--ink); font-weight:600; }
table.data-table .row-actions{ display:flex; gap:.5rem; flex-wrap:wrap; }

.tier-tag{
  font-size: .68rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  padding: .2rem .55rem; border-radius:999px;
  border: 1px solid var(--metal, var(--gold));
  color: var(--metal, var(--gold));
}

.admin-panel{ display:flex; flex-direction:column; gap: 1.5rem; }
.admin-panel-head{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1rem; }
.inline-form{ display:grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem 1.2rem; align-items:end; }
.inline-form .field{ margin-bottom:0; }
textarea.input{ resize: vertical; min-height: 7rem; font-family: var(--font-body); }

/* ---------- legal / policy pages ---------- */
.legal-hero{
  padding: clamp(3rem, 8vw, 5rem) var(--edge) clamp(2rem, 5vw, 3rem);
  background:
    radial-gradient(ellipse 800px 420px at 50% -10%, rgba(62,130,214,.28), transparent 62%),
    linear-gradient(180deg, var(--ground-deep), var(--ground) 70%);
  text-align:center;
}
.legal-hero .eyebrow{ justify-content:center; display:flex; }
.legal-hero h1{ font-size: clamp(2rem, 4.4vw, 2.9rem); margin-top:.6rem; }
.legal-hero .updated{ color: var(--ink-faint); font-size: .88rem; margin-top: .8rem; }

.legal-notice{
  border: 1px solid rgba(224,135,107,.4);
  background: rgba(224,135,107,.08);
  color: #F3C7B6;
  border-radius: 8px;
  padding: 1.1rem 1.3rem;
  font-size: .9rem;
  line-height: 1.55;
  margin: 2.2rem 0;
}
.legal-notice strong{ color: #F7D9CC; }

.legal-body{ padding: 1rem 0 clamp(3rem, 7vw, 5rem); }
.legal-body h2{
  font-size: 1.35rem;
  margin-top: 2.4rem;
  margin-bottom: .9rem;
  padding-top: 1.6rem;
  border-top: 1px solid rgba(238,233,219,.1);
}
.legal-body h2:first-child{ margin-top:0; padding-top:0; border-top:none; }
.legal-body p{ color: var(--ink-dim); font-size: .98rem; line-height: 1.7; margin-bottom: 1rem; }
.legal-body ul, .legal-body ol{ color: var(--ink-dim); font-size: .98rem; line-height: 1.7; margin: 0 0 1rem; padding-left: 1.3rem; }
.legal-body li{ margin-bottom: .4rem; }
.legal-body a{ color: var(--gold-bright); text-decoration:underline; text-underline-offset:2px; }
.legal-body strong{ color: var(--ink); }
.legal-toc{
  display:flex; flex-wrap:wrap; gap: .5rem .9rem;
  padding: 1.2rem 1.4rem;
  background: var(--ground-raised);
  border: 1px solid var(--ground-line);
  border-radius: 8px;
  margin-bottom: 2.4rem;
}
.legal-toc a{ font-size: .85rem; font-weight:600; color: var(--ink-dim); text-decoration:none; }
.legal-toc a:hover{ color: var(--gold-bright); }

.spinner{
  width: 1rem; height: 1rem;
  border-radius: 50%;
  border: 2px solid rgba(7,17,32,.3);
  border-top-color: var(--ground-deep);
  animation: spin .7s linear infinite;
}
@keyframes spin{ to{ transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce){ .spinner{ animation-duration: 1.4s; } }