/* Reality Revolution Live — Nashville. Rebuilt 2026-08-29 after Koen flagged the first pass
   ("ugly blue buttons") didn't match the live pages visually. Root cause: getComputedStyle
   on the button's `backgroundColor` alone (rgb(1,116,199), a fallback that is never painted)
   without also checking `backgroundImage`, which carries the REAL gradient on top of it —
   confirmed by cross-referencing real screenshots against the DOM, not code alone, on three
   live pages (Sedona, Austin, Newark). The design standards §6 rule ("computed styles, never
   by eye") caught a real bug here, once applied correctly: the eye caught what one shallow
   computed-style query missed. Both matter.

   The real system, confirmed across 3 events:
   - Every CTA is a 3-stop horizontal gradient, light-dark-light of ONE hue family per event:
     Sedona (rock)   #C44A2A -> #3D0808 -> #C44A2A   (terracotta)
     Austin (money)  #00D4FF -> #051A4A -> #00D4FF   (cyan/navy)
     Newark (cosmic) #BC97DC -> #43408C -> #BC97DC   (lavender/indigo)
   - Same light/dark pair reused for countdown digits (dark) + labels (light), and for
     keyword-highlighted words inline in body copy (Newark: "clear", "sharpen", "hard-wire"
     all in the light accent, italic).
   - Pill button: 15px radius, 1px solid rgba(0,0,0,.2) border, inset top highlight
     rgba(255,255,255,.2), plus an animated diagonal glimmer sweep (cfs-btn-glimmer--loop).
   - Hero backgrounds are real uploaded photo/AI-art images (starfield+red-rock for Sedona,
     a purple marble/nebula texture for Austin, a cosmic nebula photo for Newark) — Koen is
     supplying Nashville's actual artwork; until then this file approximates the FAMILY
     (a lit, atmospheric multi-stop radial gradient) rather than a flat near-black.

   Nashville is Music City: chose a warm marquee-gold / deep-bronze pair as the two-tone,
   following the same bright-dark-bright pattern as the three confirmed cities. This pairing
   is a design call, not a scrape — flagged as such in the delivery note, same as before. */

:root{
  --bg:        #151515;
  --bg-raise:  #1c1c1c;
  --card:      #201a10;
  --rule:      rgba(255,255,255,.10);
  --ink:       rgba(255,255,255,.97);
  --ink-dim:   rgba(255,255,255,.72);
  --ink-mute:  rgba(255,255,255,.52);

  /* Nashville two-tone (light/dark of one hue), same shape as Sedona/Austin/Newark's pairs */
  --gold:       #E8B84B;   /* light — marquee gold */
  --gold-deep:  #5C3B12;   /* dark — deep bronze */
  --gold-mid:   #A87C25;

  --cta-grad: linear-gradient(to right, var(--gold), var(--gold-deep), var(--gold));
  --cta-ink:   #ffffff;   /* confirmed: every live-page button uses white text regardless of gradient, not a dark ink */
  --confirm:   #E0A93A;

  --display: "Libre Baskerville", Georgia, "Times New Roman", serif;
  --body:    "Lato", Helvetica, Arial, sans-serif;

  --s1:.5rem; --s2:1rem; --s3:1.5rem; --s4:2rem; --s5:3rem; --s6:4rem; --s7:5.5rem; --s8:7rem;
  --maxw: 1120px;
  --maxw-narrow: 760px;
}

*{box-sizing:border-box}
html{background:var(--bg)}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--body); font-size:18px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:inherit}
.wrap{max-width:var(--maxw); margin-inline:auto; padding-inline:var(--s4)}
.wrap.narrow{max-width:var(--maxw-narrow)}
@media (max-width:700px){ .wrap{padding-inline:var(--s3)} }

h1,h2,h3{font-family:var(--display); font-weight:700; margin:0; text-wrap:balance}
p{margin:0 0 1.1em; text-wrap:pretty}
p:last-child{margin-bottom:0}

.eyebrow{
  text-align:center; text-transform:uppercase; letter-spacing:.08em;
  color:var(--gold); font-family:var(--body); font-weight:700; font-size:.95rem;
  margin:0 0 var(--s3);
}

/* ---------- header ---------- */
.site-head{
  position:sticky; top:0; z-index:50; background:rgba(21,21,21,.94);
  backdrop-filter:blur(6px); border-bottom:1px solid var(--rule);
}
.site-head .row{
  max-width:var(--maxw); margin-inline:auto; padding:14px var(--s4);
  display:flex; align-items:center; justify-content:space-between; gap:var(--s3);
}
.site-head .logo img{height:34px; width:auto}
.site-head .meta{
  font-size:.85rem; color:var(--ink-dim); text-align:right; white-space:nowrap;
  display:none;
}
@media (min-width:860px){ .site-head .meta{display:block} }

/* ---------- buttons ----------
   Real system confirmed on 3 live pages: background-image gradient (not background-color)
   is what actually paints, plus a looping diagonal glimmer sweep via ::after. */
.btn{
  position:relative; overflow:hidden; display:inline-block;
  background-color: var(--gold-deep);           /* fallback, matches the live pages' own fallback pattern */
  background-image: var(--cta-grad);
  color:var(--cta-ink); text-decoration:none;
  font-family:var(--body); font-weight:700; font-size:1rem; letter-spacing:.01em;
  padding:15px 28px; border-radius:15px;
  border:1px solid rgba(0,0,0,.2);
  cursor:pointer;
  box-shadow: rgba(255,255,255,.2) 0 1px 0 0 inset, 0 6px 18px rgba(232,184,75,.28);
}
.btn::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(50deg, rgba(255,255,255,0) 40%, rgba(255,255,255,.5) 50%, rgba(255,255,255,0) 60%);
  background-size:250% 250%; background-position:120% 0;
  animation:btnGlimmer 3.2s ease-in-out infinite;
}
@keyframes btnGlimmer{
  0%,20%{background-position:120% 0}
  60%,100%{background-position:-20% 0}
}
.btn:hover{filter:brightness(1.08)}
.btn.btn-sm{padding:10px 18px; font-size:.9rem; border-radius:12px}
.btn-row{text-align:center; margin-top:var(--s3)}
.affirm{
  text-align:center; font-family:var(--display); font-style:italic; font-size:1.15rem;
  color:var(--ink); margin-bottom:var(--s2);
}

/* ---------- hero ----------
   PLACEHOLDER treatment: the live pages use real uploaded photo/AI-art backgrounds per event
   (starfield+red-rock, purple nebula marble, cosmic photo). Koen is supplying Nashville's own
   artwork. Until then, approximate the FAMILY — a lit, layered, atmospheric field — rather
   than the flat near-black this had before. Swap the background block below for a real
   `background-image: url(...)` the moment art arrives; everything else (text, layout) is final. */
.hero{
  padding-block:var(--s6) var(--s7);
  background:
    radial-gradient(ellipse 1000px 600px at 50% -15%, rgba(232,184,75,.22), transparent 55%),
    radial-gradient(ellipse 700px 500px at 15% 30%, rgba(92,59,18,.35), transparent 60%),
    radial-gradient(ellipse 800px 600px at 90% 70%, rgba(168,124,37,.18), transparent 55%),
    linear-gradient(180deg, #1a1408 0%, var(--bg) 45%, var(--bg) 100%);
  text-align:center;
}
.hero .eyebrow-band{
  font-size:1.05rem; color:var(--gold); font-weight:700; margin-bottom:var(--s4);
  letter-spacing:.02em;
}
.hero h1{
  font-size:clamp(2rem,4.6vw,3.4rem); line-height:1.12; color:var(--ink);
  max-width:920px; margin-inline:auto;
}
.hero .support{
  font-family:var(--display); font-style:italic; font-size:clamp(1.05rem,2vw,1.3rem);
  color:var(--ink-dim); max-width:760px; margin:var(--s3) auto 0; line-height:1.5;
}
.hero .deck{
  font-size:1.15rem; color:var(--ink-dim); max-width:700px; margin:var(--s4) auto 0;
  line-height:1.6;
}
.hero .video-block{
  margin-top:var(--s6); background:var(--card); border:1px solid var(--rule);
  border-radius:16px; padding:var(--s4); text-align:left;
  display:grid; grid-template-columns:1fr; gap:var(--s4); max-width:960px; margin-inline:auto;
}
@media (min-width:820px){ .hero .video-block{grid-template-columns:1.1fr 1fr; align-items:center} }
.video-thumb{
  aspect-ratio:16/9; border-radius:10px; background:linear-gradient(135deg,#2a2a2a,#151515);
  display:flex; align-items:center; justify-content:center; color:var(--ink-mute);
  font-size:.85rem; border:1px dashed var(--rule); text-align:center; padding:var(--s2);
}
.play-badge{
  width:56px; height:56px; border-radius:50%; background:var(--cta-grad); color:var(--cta-ink);
  display:flex; align-items:center; justify-content:center; font-size:1.4rem; margin-bottom:var(--s2);
}
.video-block .label{font-size:.8rem; text-transform:uppercase; letter-spacing:.06em; color:var(--gold); font-weight:700; margin-bottom:var(--s1)}
.video-block p{color:var(--ink-dim); font-size:1rem}
.video-block p em{color:var(--ink); font-style:normal}
.video-block p em .hl{color:var(--gold); font-style:italic}

.countdown-label{margin-top:var(--s5); font-size:.85rem; letter-spacing:.1em; text-transform:uppercase; color:var(--gold); font-weight:700}
.countdown{display:flex; gap:var(--s2); justify-content:center; margin-top:var(--s2); flex-wrap:wrap}
.countdown .u{
  background:var(--card); border:1px solid rgba(232,184,75,.25); border-radius:10px;
  padding:10px 18px; min-width:74px; text-align:center;
}
/* two-tone digit/label pairing, matching the live pages' countdown treatment.
   Note: Newark's live version fills the dark tone directly on a LIGHT card, which reads fine
   there. On this dark card that same dark-on-dark pairing measured 1.72:1 — a real fail, not
   a stylistic call — so the digit stays in the light tone here and the two-tone pairing moves
   to digit-vs-label instead of digit-fill-vs-card. */
.countdown .u .n{font-family:var(--display); font-size:1.6rem; font-weight:700; color:var(--gold)}
.countdown .u .l{font-size:.68rem; text-transform:uppercase; letter-spacing:.06em; color:var(--gold-mid); font-weight:700}

/* inline keyword highlight — the "clear / sharpen / hard-wire" device seen live on Newark:
   specific high-impact words in body copy carry the light accent, italic. Use sparingly,
   2-4 words per section, never a whole clause. */
.hl{color:var(--gold); font-style:italic; font-weight:600}

.sub-line{margin-top:var(--s3); color:var(--ink-dim); font-size:.98rem}
.scarcity{margin-top:var(--s2); color:var(--confirm); font-weight:700; font-size:.95rem}

/* ---------- sections ---------- */
section.block{padding-block:var(--s7)}
section.block.tight{padding-block:var(--s5)}
section.block.raise{background:var(--bg-raise)}
h2.h-center{text-align:center; font-size:clamp(1.7rem,3.4vw,2.3rem); max-width:820px; margin-inline:auto}
.lede{text-align:center; max-width:700px; margin:var(--s3) auto 0; color:var(--ink-dim); font-size:1.1rem}
.prose{max-width:var(--maxw-narrow); margin-inline:auto}
.prose p{font-size:1.08rem; color:var(--ink-dim); line-height:1.7}
.prose p strong{color:var(--ink)}
.prose blockquote{margin:0; padding:0}

.logo-strip{
  display:flex; flex-wrap:wrap; justify-content:center; gap:var(--s5);
  color:var(--ink-mute); font-family:var(--display); font-size:1.05rem; letter-spacing:.02em;
}

/* self-test */
.test-list{max-width:var(--maxw-narrow); margin:var(--s4) auto 0; display:grid; gap:var(--s2)}
.test-item{
  background:var(--card); border:1px solid var(--rule); border-radius:12px;
  padding:var(--s3) var(--s4); font-size:1.05rem; color:var(--ink);
}
.turn-box{
  max-width:var(--maxw-narrow); margin:var(--s5) auto 0; padding:var(--s4);
  border-left:3px solid var(--gold); background:var(--card); border-radius:0 12px 12px 0;
}
.turn-box p{color:var(--ink); font-size:1.1rem}

/* three columns */
.col-3{display:grid; gap:var(--s4); margin-top:var(--s5)}
@media (min-width:820px){ .col-3{grid-template-columns:repeat(3,1fr)} }
.col-3 .card{background:var(--card); border:1px solid var(--rule); border-radius:14px; padding:var(--s4)}
.col-3 .card h3{font-family:var(--body); font-size:1.05rem; color:var(--gold); margin-bottom:.5em}
.col-3 .card p{color:var(--ink-dim); font-size:1rem; margin:0}

/* testimonials */
.testi-grid{display:grid; gap:var(--s3); margin-top:var(--s4)}
@media (min-width:760px){ .testi-grid{grid-template-columns:repeat(3,1fr)} }
.testi-card{background:var(--card); border:1px solid var(--rule); border-radius:14px; overflow:hidden}
.testi-card .video-thumb{aspect-ratio:9/16; border-radius:0; border:none}
.testi-quote{
  max-width:var(--maxw-narrow); margin:var(--s5) auto 0; text-align:center;
  font-family:var(--display); font-style:italic; font-size:1.3rem; color:var(--ink);
}
.testi-quote cite{display:block; font-family:var(--body); font-style:normal; font-size:.85rem; color:var(--ink-mute); margin-top:var(--s2)}

/* steps */
.steps{max-width:var(--maxw-narrow); margin:var(--s5) auto 0; display:grid; gap:var(--s3)}
.step{display:flex; gap:var(--s3); align-items:flex-start}
.step .num{
  flex:0 0 auto; width:44px; height:44px; border-radius:50%; background:var(--gold);
  color:#151515; font-family:var(--display); font-weight:700; font-size:1.1rem;
  display:flex; align-items:center; justify-content:center;
}
.step .body h3{font-family:var(--body); font-size:1.15rem; color:var(--ink); margin-bottom:.35em}
.step .body p{color:var(--ink-dim); font-size:1.02rem}

/* journey/days */
.days{max-width:var(--maxw-narrow); margin:var(--s5) auto 0; display:grid; gap:var(--s2)}
.day{background:var(--card); border:1px solid var(--rule); border-radius:12px; padding:var(--s3) var(--s4)}
.day .tag{font-size:.8rem; text-transform:uppercase; letter-spacing:.06em; color:var(--gold); font-weight:700}
.day h3{font-family:var(--body); font-size:1.15rem; margin:.3em 0; color:var(--ink)}
.day p{color:var(--ink-dim); font-size:1rem; margin:0}

/* venue photo placeholder */
.photo-slot{
  aspect-ratio:16/10; border-radius:14px; border:1px dashed var(--rule);
  background:linear-gradient(135deg,#1c1c1c,#151515);
  display:flex; align-items:center; justify-content:center; text-align:center;
  color:var(--ink-mute); font-size:.85rem; padding:var(--s3);
}
.venue-grid{display:grid; gap:var(--s4); margin-top:var(--s5); align-items:stretch}
@media (min-width:820px){ .venue-grid{grid-template-columns:1fr 1fr} }
.venue-grid .prose{max-width:none; display:flex; flex-direction:column; justify-content:center}

/* host */
.host-grid{display:grid; gap:var(--s5); margin-top:var(--s5); align-items:stretch}
@media (min-width:820px){ .host-grid{grid-template-columns:.9fr 1.1fr} }
.host-grid .photo-slot{height:100%}
.authority{
  display:flex; flex-wrap:wrap; gap:.5em 1.2em; justify-content:center; margin-top:var(--s4);
  font-size:.9rem; color:var(--ink-mute);
}
.authority span::after{content:"·"; margin-left:1.2em; color:var(--rule)}
.authority span:last-child::after{content:""}

/* bonus stack */
.frame-box{
  max-width:var(--maxw-narrow); margin:0 auto var(--s5); padding:var(--s4);
  background:var(--card); border:1px solid var(--gold); border-radius:14px; text-align:center;
}
.frame-box p{margin:0; font-size:1.1rem; color:var(--ink)}
.bonus-group{max-width:var(--maxw-narrow); margin:0 auto var(--s4)}
.bonus-group h4{font-family:var(--body); font-size:.95rem; text-transform:uppercase; letter-spacing:.04em; color:var(--gold); margin-bottom:var(--s2)}
.bonus-list{list-style:none; margin:0; padding:0; display:grid; gap:.6em}
.bonus-list li{
  display:flex; justify-content:space-between; gap:var(--s3); padding:.7em 1em;
  background:var(--card); border:1px solid var(--rule); border-radius:10px; font-size:1rem;
}
.bonus-list .val{color:var(--gold); font-weight:700; white-space:nowrap}
.bonus-note{max-width:var(--maxw-narrow); margin:0 auto var(--s3); color:var(--ink-dim); font-size:.98rem}
.total-box{
  max-width:var(--maxw-narrow); margin:var(--s4) auto 0; text-align:center; padding:var(--s4);
  border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);
}
.total-box .strike{color:var(--ink-mute); text-decoration:line-through; font-size:1.2rem}
.total-box .now{font-family:var(--display); font-size:2rem; color:var(--gold); font-weight:700; margin-left:.5em}

/* faq */
.faq{max-width:var(--maxw-narrow); margin:var(--s5) auto 0}
.faq details{border-bottom:1px solid var(--rule); padding:1.1em 0}
.faq summary{
  cursor:pointer; font-family:var(--body); font-weight:700; font-size:1.05rem; color:var(--ink);
  list-style:none; display:flex; justify-content:space-between; gap:var(--s2);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; color:var(--gold); font-size:1.3rem; line-height:1}
.faq details[open] summary::after{content:"–"}
.faq details p{margin-top:.8em; color:var(--ink-dim); font-size:1.02rem}

/* confirm placeholder */
.confirm{
  display:inline-block; border:1px dashed var(--confirm); color:var(--confirm);
  border-radius:8px; padding:.15em .6em; font-size:.85em; font-family:var(--body); font-weight:700;
}

/* venue details grid */
.detail-grid{max-width:var(--maxw-narrow); margin:var(--s5) auto 0; display:grid; gap:var(--s2); grid-template-columns:1fr}
@media (min-width:600px){ .detail-grid{grid-template-columns:1fr 1fr} }
.detail-grid .d{background:var(--card); border:1px solid var(--rule); border-radius:10px; padding:var(--s3)}
.detail-grid .d .k{font-size:.78rem; text-transform:uppercase; letter-spacing:.05em; color:var(--gold); font-weight:700}
.detail-grid .d .v{margin-top:.3em; color:var(--ink); font-size:1.02rem}

/* footer */
.site-foot{padding-block:var(--s6); border-top:1px solid var(--rule); text-align:center}
.site-foot img{height:44px; width:auto; margin-inline:auto; margin-bottom:var(--s2)}
.site-foot .loc{color:var(--ink-mute); font-size:.9rem; margin-bottom:var(--s3)}
.site-foot .legal-row{display:flex; flex-wrap:wrap; justify-content:center; gap:.4em; font-size:.88rem; color:var(--ink-dim)}
.site-foot .legal-row a{text-decoration:underline}
.site-foot .legal-row span{color:var(--ink-mute)}
.site-foot .copy{margin-top:var(--s2); color:var(--ink-mute); font-size:.85rem}
.site-foot .disclaimer{
  margin-top:var(--s3); padding-top:var(--s3); border-top:1px solid var(--rule);
  color:var(--ink-mute); font-size:.78rem; max-width:640px; margin-inline:auto; line-height:1.6;
}

.dev-note{
  max-width:var(--maxw-narrow); margin:var(--s3) auto 0; font-size:.82rem; color:var(--ink-mute);
  font-style:italic; text-align:center;
}

/* header CTA: full label on desktop, short on phones so the pill doesn't wrap to 3 lines */
.site-head .btn-sm .short{display:none}
@media (max-width:480px){
  .site-head .btn-sm .full{display:none}
  .site-head .btn-sm .short{display:inline}
}

/* narrow-phone overflow fix: video block padding was too generous relative to 320px content width */
@media (max-width:400px){
  .hero .video-block{padding:var(--s3)}
  .video-thumb{padding:var(--s2)}
}
.video-thumb, .video-thumb *{min-width:0}
.hero .video-block{min-width:0}