/* LEAD 2026-09-01 readability pass: body copy over the sparkle canvas needs
   more weight than the 0.6 glass token and more size than 13.5px. These
   tokens are used by every V2 section below. */
.v2-section{
  --v2-body:rgba(255,255,255,0.86);
  --v2-body-dim:rgba(255,255,255,0.72);
  --v2-label:rgba(233,224,200,0.92);
}
.v2-section p, .v2-section dd, .v2-section td, .v2-section li{
  text-shadow:0 1px 2px rgba(0,0,0,0.85);
}
/* ==========================================================================
   home-v2.css, KAOS home page V2, sections 2-11 (below the unchanged hero
   and above/around the unchanged "What runs underneath" section, which
   moves to position 7 via markup order only, no style changes here).
   Brief: brand/HOME-V2-BRIEF.md. Reuses home.css's :root tokens
   (--h-gold, --h-ivory, --font-serif/-ui/-mono, .liquid-glass*) and adds
   only the few extra brand tokens (deep/pale gold, spark, ink) HANDOFF.md
   names but home.css never defined. Black/gold/ivory only, no purple, no
   green, no gradient fills (soft radial glows behind objects only), no
   cards-inside-cards, no bounce easing, no emoji.
   ========================================================================== */

:root{
  --h-gold-deep:#b9822f;
  --h-gold-pale:#c9a558;
  --h-spark:#fbf5e8;
  --h-ink:#14110c;
  --v2-glass-30:rgba(255,255,255,0.3);
  --v2-hairline:rgba(255,255,255,0.12);
}

/* ================= shared section rhythm =================
   Every V2 section is transparent so the fixed #chaos-field canvas shows
   through (spec: "every section has a transparent background"). One
   max-width column, generous vertical rhythm, consistent eyebrow/heading
   treatment reused by every section below. */
.v2-section{
  position:relative;z-index:10;width:100%;
  padding:88px 24px calc(96px + env(safe-area-inset-bottom));
}
.v2-inner{max-width:1080px;margin:0 auto;}
.v2-inner--narrow{max-width:760px;}
.v2-eyebrow{
  margin:0 0 12px;font-family:var(--font-mono);font-size:11px;
  letter-spacing:0.14em;text-transform:uppercase;color:var(--h-gold);
}
.v2-heading{
  margin:0 0 18px;font-family:var(--font-serif);font-weight:400;
  font-size:clamp(28px,5vw,46px);line-height:1.1;color:var(--h-ivory);
}
.v2-sub{
  margin:0 0 40px;max-width:640px;font-family:var(--font-serif);
  font-size:clamp(16px,2.4vw,20px);line-height:1.5;color:var(--glass-80);
}

/* ================= motion: reveal-on-scroll =================
   [data-reveal] starts hidden/offset; js/home.js's IntersectionObserver
   adds .in the first time each element crosses the viewport, at which
   point this transition runs once. --i (set inline per element) staggers
   siblings. Transform + opacity only, per spec. */
[data-reveal]{
  opacity:0;transform:translateY(18px);
  transition:opacity 600ms cubic-bezier(.2,.7,.2,1), transform 600ms cubic-bezier(.2,.7,.2,1);
  transition-delay:calc(var(--i,0) * 70ms);
}
[data-reveal].in{opacity:1;transform:translateY(0);}
@media (prefers-reduced-motion: reduce){
  [data-reveal]{opacity:1;transform:none;transition:none;}
}

/* ================= 2. INTRO ================= */
#intro .intro-grid{
  display:grid;grid-template-columns:1.1fr 0.9fr;gap:56px;align-items:center;
}
.intro-lines{display:flex;flex-direction:column;gap:22px;}
.intro-line{
  margin:0;font-family:var(--font-serif);font-weight:400;
  font-size:clamp(22px,3.4vw,32px);line-height:1.3;color:var(--h-ivory);
}
.intro-figure{
  position:relative;display:flex;justify-content:center;
}
.intro-figure img{
  display:block;width:100%;max-width:360px;height:auto;
  border-radius:2px;
  will-change:transform;
  filter:drop-shadow(0 0 46px rgba(217,168,78,0.28)) drop-shadow(0 28px 40px rgba(0,0,0,0.55));
  transform:translateY(calc(var(--v2-scroll-y, 0px) * -1));
}
@media (prefers-reduced-motion: reduce){
  .intro-figure img{transform:none;}
}
@media (max-width:860px){
  #intro .intro-grid{grid-template-columns:1fr;gap:32px;}
  .intro-figure{order:-1;}
  .intro-figure img{max-width:60%;}
  .intro-line{font-size:clamp(19px,5vw,24px);text-align:center;}
}

/* ================= 3. PULL, the card fan ================= */
#pull{overflow-x:hidden;}
.fan-stage{
  position:relative;height:clamp(320px,42vw,420px);
  margin:8px 0 34px;
  display:flex;align-items:center;justify-content:center;
  perspective:1400px;
}
.fan-card{
  position:absolute;top:50%;left:50%;
  width:clamp(120px,15vw,160px);
  aspect-ratio:5/7;
  transform-style:preserve-3d;
  cursor:pointer;
  transition:transform 120ms ease;
  --rx:0deg;--ry:0deg;
}
.fan-card:focus-visible{ outline:2px solid var(--h-gold); outline-offset:4px; }
.fan-card .fan-card-inner{
  position:relative;width:100%;height:100%;
  transform-style:preserve-3d;
  transition:transform 500ms cubic-bezier(.2,.7,.2,1);
  transform:
    translate(-50%,-50%)
    rotateZ(var(--fan-rz,0deg)) translateX(var(--fan-tx,0px)) translateY(var(--fan-ty,0px))
    rotateY(calc(var(--fan-ry,0deg) + var(--ry,0deg)))
    rotateX(var(--rx,0deg));
}
.fan-card.flipped .fan-card-inner{ transform:
    translate(-50%,-50%)
    rotateZ(var(--fan-rz,0deg)) translateX(var(--fan-tx,0px)) translateY(var(--fan-ty,0px))
    rotateY(calc(var(--fan-ry,0deg) + var(--ry,0deg) + 180deg))
    rotateX(var(--rx,0deg));
}
.fan-card.lifted .fan-card-inner{ translate:0 -14px 0; }
.fan-face{ background:#0c0a07;
  position:absolute;inset:0;backface-visibility:hidden;
  border-radius:6px;overflow:hidden;
  box-shadow:0 14px 30px rgba(0,0,0,0.5);
}
.fan-face img{ width:100%;height:100%;display:block;object-fit:cover; }
.fan-face--back{ transform:rotateY(180deg); }
.fan-card:hover, .fan-card:focus-visible{ z-index:20; }
@media (prefers-reduced-motion: reduce){
  .fan-card, .fan-card .fan-card-inner{ transition:none; }
}
.fan-controls{
  display:flex;flex-direction:column;align-items:center;gap:8px;margin:0 0 44px;
}
#roll-again-btn{
  min-height:44px;padding:0 26px;border-radius:999px;
  background:transparent;color:var(--h-gold);
  font-family:var(--font-mono);font-size:11.5px;font-weight:600;
  letter-spacing:0.08em;text-transform:uppercase;cursor:pointer;
}
#roll-again-btn:hover{ color:var(--h-gold-strong); }
#roll-again-btn:focus-visible{ outline:2px solid var(--glass-60);outline-offset:3px; }
.fan-note{
  margin:0;font-family:var(--font-mono);font-size:12px;letter-spacing:0.05em;
  color:var(--v2-body-dim);
}

/* spark burst, shared by the card flip AND the strongbox stake slide-in --
   absolutely positioned spans using assets/vfx/spark.png as a background
   sprite, animated outward with transform+opacity only. */
.spark-burst{ position:absolute;inset:0;pointer-events:none;overflow:visible; }
.spark{
  position:absolute;top:50%;left:50%;width:14px;height:14px;
  background:url('../assets/vfx/spark.png') center/contain no-repeat;
  opacity:0;
  animation:spark-fly 620ms ease-out forwards;
}
@keyframes spark-fly{
  0%{ opacity:0; transform:translate(-50%,-50%) scale(0.4) rotate(0deg); }
  15%{ opacity:1; }
  100%{ opacity:0; transform:translate(calc(-50% + var(--sx)), calc(-50% + var(--sy))) scale(1) rotate(var(--sr)); }
}
@media (prefers-reduced-motion: reduce){
  .spark{ display:none; }
}

.pack-tablets{
  display:grid;grid-template-columns:repeat(3,1fr);gap:16px;
}
.pack-tablet{
  padding:22px 20px;border-radius:10px;
  background:rgba(255,255,255,0.02);
  box-shadow:inset 0 1px 1px rgba(255,255,255,0.08), inset 0 0 0 1px var(--v2-hairline);
}
.pack-tablet h3{
  margin:0 0 4px;font-family:var(--font-serif);font-weight:400;
  font-size:19px;color:var(--h-ivory);
}
.pack-tablet .pack-price{
  margin:0 0 2px;font-family:var(--font-mono);font-size:13px;color:var(--h-gold);
  letter-spacing:0.03em;
}
.pack-tablet .pack-price-tag{
  margin:0 0 14px;font-family:var(--font-mono);font-size:9.5px;letter-spacing:0.08em;
  text-transform:uppercase;color:var(--v2-label);
}
.pack-odds{ width:100%;border-collapse:collapse;font-family:var(--font-mono);font-size:12.5px; }
.pack-odds td{ padding:5px 0;color:var(--v2-body);border-top:1px solid var(--v2-hairline); }
.pack-odds td:last-child{ text-align:right;color:var(--glass-80); }
@media (max-width:768px){
  .fan-stage{ display:none; }
  #pull.mobile-scroll #fan-scroll-row{
    display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;
    padding:8px 24px 18px;margin:8px -24px 34px;-webkit-overflow-scrolling:touch;
  }
  #pull.mobile-scroll #fan-scroll-row .fan-card{
    position:static;flex:0 0 auto;width:140px;scroll-snap-align:center;
  }
  #pull.mobile-scroll #fan-scroll-row .fan-card .fan-card-inner{
    transform:translate(0,0) rotateY(var(--ry,0deg));
  }
  #pull.mobile-scroll #fan-scroll-row .fan-card.flipped .fan-card-inner{
    transform:translate(0,0) rotateY(calc(var(--ry,0deg) + 180deg));
  }
  .pack-tablets{ grid-template-columns:1fr;gap:12px; }
}

/* ================= 4. SEVEN STATIONS ================= */
.station-strip{
  display:flex;flex-direction:column;gap:2px;
  transform:skewY(-4deg);
}
.station-link{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  min-height:64px;padding:16px 26px;border-radius:8px;
  background:rgba(255,255,255,0.02);
  box-shadow:inset 0 1px 1px rgba(255,255,255,0.07), inset 0 0 0 1px var(--v2-hairline);
  text-decoration:none;
  transform:skewY(4deg);
  transition:background 180ms ease;
}
.station-link:hover, .station-link:focus-visible{
  background:rgba(217,168,78,0.08);
}
.station-link:focus-visible{ outline:2px solid var(--h-gold);outline-offset:2px; }
.station-copy{ display:flex;flex-direction:column;gap:4px;min-width:0; }
.station-label{
  font-family:var(--font-mono);font-size:11px;font-weight:600;
  letter-spacing:0.1em;text-transform:uppercase;color:var(--h-gold);
}
.station-line{
  font-family:var(--font-serif);font-size:clamp(15px,1.8vw,18px);color:var(--h-ivory);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.station-arrow{
  flex:0 0 auto;font-family:var(--font-mono);font-size:16px;color:rgba(255,255,255,0.8);
  transition:transform 180ms ease;
}
.station-link:hover .station-arrow, .station-link:focus-visible .station-arrow{
  transform:translateX(6px);color:var(--h-gold);
}
@media (prefers-reduced-motion: reduce){
  .station-arrow{ transition:none; }
}
@media (max-width:768px){
  .station-strip{ transform:none; }
  .station-link{ transform:none; }
  .station-line{ white-space:normal; }
}

/* ================= 5. STRONGBOX ================= */
.strongbox-lead{ text-align:left; }
.strongbox-stage{
  display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;
  margin:8px 0 48px;
}
.strongbox-chest-wrap{
  position:relative;display:flex;justify-content:center;
}
.strongbox-chest{ width:100%;max-width:380px;height:auto;overflow:visible; }
.chest-ground-shadow{ fill:rgba(0,0,0,0.55); }
.chest-body{ fill:#1a1712;stroke:var(--h-gold-deep);stroke-width:1; }
.chest-lid{ fill:#221e17;stroke:var(--h-gold-deep);stroke-width:1; }
.greek-key{ stroke:var(--h-gold);stroke-width:1.4;fill:none;opacity:0.8; }
.ring-plate-bg{ fill:#0c0a07;stroke:var(--h-gold-deep);stroke-width:1; }
.ring-arc{
  fill:none;stroke:var(--h-gold-deep);stroke-width:9;stroke-linecap:round;
  opacity:0.5;transform-origin:200px 190px;
  transition:opacity 260ms ease, transform 260ms ease, stroke 260ms ease;
}
.ring-arc.filled{ stroke:var(--h-gold);opacity:1;filter:drop-shadow(0 0 6px rgba(217,168,78,0.55)); }
.ring-arc.flash{
  stroke:var(--h-spark);opacity:1;
  transform:translate(var(--kick-x,0px),var(--kick-y,0px));
}
#strongbox-lock-group{
  transform-origin:200px 190px;
  animation:chest-ring-spin 90s linear infinite; /* "rotates slowly", spec section 5 */
}
@keyframes chest-ring-spin{ to{ transform:rotate(360deg); } }
.strongbox-lean-cards{ position:absolute;inset:0;pointer-events:none; }
.lean-card{
  position:absolute;width:15%;aspect-ratio:5/7;object-fit:cover;
  border-radius:3px;box-shadow:0 10px 22px rgba(0,0,0,0.5);
  border:1px solid rgba(217,168,78,0.3);
}
.lean-1{ left:10%;bottom:6%;transform:rotate(-14deg); }
.lean-2{ right:10%;bottom:8%;transform:rotate(11deg); }
.strongbox-slot{
  position:absolute;left:50%;top:34%;width:15%;aspect-ratio:5/7;
  transform:translate(-50%,-40%);
}
.slot-card{
  width:100%;height:100%;object-fit:cover;border-radius:3px;
  box-shadow:0 10px 24px rgba(0,0,0,0.55);
  border:1px solid var(--h-gold);
  animation:slot-drop 500ms cubic-bezier(.2,.7,.2,1) forwards;
}
@keyframes slot-drop{
  0%{ opacity:0;transform:translateY(-60px) scale(0.7); }
  100%{ opacity:1;transform:translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce){
  .slot-card{ animation:none; }
  .ring-arc{ transition:none; }
}
.strongbox-readouts{ display:flex;flex-direction:column;gap:22px; }
.strongbox-cta-btn{
  align-self:flex-start;min-height:44px;padding:0 24px;border-radius:999px;
  background:transparent;color:var(--h-gold);
  font-family:var(--font-mono);font-size:11.5px;font-weight:600;
  letter-spacing:0.07em;text-transform:uppercase;cursor:pointer;
  box-shadow:inset 0 0 0 1px rgba(217,168,78,0.4);
}
.strongbox-cta-btn:hover{ background:rgba(217,168,78,0.08); }
.strongbox-cta-btn:focus-visible{ outline:2px solid var(--glass-60);outline-offset:3px; }
.strongbox-stats{
  display:grid;grid-template-columns:1fr 1fr;gap:16px 24px;margin:0;
}
.strongbox-stats > div{ display:flex;flex-direction:column;gap:4px; }
.strongbox-stats dt{
  font-family:var(--font-serif);font-size:15px;color:var(--v2-body);
}
.strongbox-stats dd{
  margin:0;font-family:var(--font-mono);font-size:19px;color:var(--h-ivory);
}
.strongbox-tag{
  margin:0;font-family:var(--font-mono);font-size:11.5px;letter-spacing:0.12em;
  color:var(--h-gold);text-transform:uppercase;
}
.strongbox-primary-cta{
  display:inline-flex;align-self:flex-start;align-items:center;
  min-height:44px;padding:0 26px;border-radius:999px;
  font-family:var(--font-mono);font-size:12px;font-weight:600;
  letter-spacing:0.07em;text-transform:uppercase;text-decoration:none;
  color:var(--h-gold);
}
.strongbox-primary-cta:focus-visible{ outline:2px solid var(--glass-60);outline-offset:3px; }
.strongbox-tablets{
  display:grid;grid-template-columns:repeat(3,1fr);gap:16px;
}
.stone-tablet{
  position:relative;padding:24px 22px;border-radius:8px;overflow:hidden;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(217,168,78,0.05), transparent 60%),
    #17140f;
  box-shadow:inset 0 1px 1px rgba(255,255,255,0.06), inset 0 0 0 1px var(--v2-hairline);
}
.stone-tablet::before{
  /* CSS noise texture, no image asset */
  content:"";position:absolute;inset:0;opacity:0.05;mix-blend-mode:overlay;pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size:160px 160px;
}
.stone-tablet h3{
  position:relative;margin:0 0 10px;font-family:var(--font-serif);font-weight:400;
  font-size:18px;color:var(--h-gold-pale);
  text-shadow:0 1px 0 rgba(0,0,0,0.6);
}
.stone-tablet p{ font-size:15px;line-height:1.6;color:var(--v2-body);
  position:relative;margin:0;font-family:var(--font-ui);font-size:15.5px;line-height:1.65;
  color:var(--v2-body);
}
@media (max-width:860px){
  .strongbox-stage{ grid-template-columns:1fr;gap:32px; }
  .strongbox-readouts{ align-items:center;text-align:center; }
  .strongbox-cta-btn, .strongbox-primary-cta{ align-self:center; }
  .strongbox-stats{ text-align:left; }
}
@media (max-width:768px){
  .strongbox-tablets{ grid-template-columns:1fr;gap:12px; }
}

/* ================= 6. CHAOS FACTOR ================= */
#chaos-factor .v2-inner{ max-width:920px; }
.chaos-svg-wrap{ width:100%;overflow:visible;margin:12px 0 22px; }
.chaos-svg{ width:100%;height:auto;display:block; }
.chaos-axis-label{
  font-family:var(--font-mono);font-size:11.5px;fill:rgba(255,255,255,0.75);
}
.chaos-caption{
  margin:0 0 6px;font-family:var(--font-ui);font-size:16px;line-height:1.65;
  color:var(--v2-body);max-width:640px;
}
.chaos-floor-note{
  margin:0;font-family:var(--font-mono);font-size:11px;letter-spacing:0.03em;
  color:var(--h-gold);
}

/* ================= 7. technology reveal stagger (existing section) =================
   Brief: "only make the grid rows reveal on scroll with a 40ms stagger" --
   js/home.js adds [data-reveal] + --i to each existing .tech-grid li at
   runtime; the transition itself reuses the shared [data-reveal] rule
   above so no #technology-specific rule is needed beyond the stagger
   timing override (40ms instead of the default 70ms). */
#technology [data-reveal]{ transition-delay:calc(var(--i,0) * 40ms); }

/* ================= 8. PANTHEON ================= */
.pantheon-grid{
  display:grid;grid-template-columns:repeat(6,1fr);gap:14px;grid-auto-flow:dense;
}
.pantheon-card{
  position:relative;border-radius:4px;overflow:hidden;cursor:default;
  box-shadow:0 0 0 1px rgba(217,168,78,0.35);
  aspect-ratio:5/7;
}
.pantheon-card:nth-child(6n+2){ transform:translateY(22px); }
.pantheon-card:nth-child(6n+4){ transform:translateY(-14px); }
.pantheon-card:nth-child(6n+6){ transform:translateY(12px); }
.pantheon-card.size-lg{ grid-column:span 2;grid-row:span 2; }
.pantheon-card img{
  /* LEAD 2026-09-01: 7 of the 23 card arts carry the OLD ticker baked into the
     nameplate at the bottom of the picture. The tile shows the ARTWORK only:
     the image is 128% of the box height, anchored top, so the plate sits below
     the crop. Name and rarity come from our own typography instead. */
  /* LEAD 2026-09-01: all 7 old-ticker plates were regenerated, so the whole
     card is shown again, plate and all. */
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transform-origin:center center;
  transition:transform 240ms ease;
}
.pantheon-card:hover img, .pantheon-card:focus-within img{ transform:scale(1.06); }
.pantheon-rarity{
  position:absolute;top:6px;left:6px;
  font-family:var(--font-mono);font-size:9px;letter-spacing:0.06em;
  color:var(--h-gold);text-transform:uppercase;
  text-shadow:0 1px 2px rgba(0,0,0,0.8);
}
.pantheon-name{
  position:absolute;left:0;right:0;bottom:0;padding:9px 9px 8px;
  font-family:var(--font-serif);font-size:14px;color:var(--h-ivory);
  background:linear-gradient(to top, rgba(0,0,0,0.85), transparent);
  opacity:0;transform:translateY(6px);
  transition:opacity 200ms ease, transform 200ms ease;
}
.pantheon-card:hover .pantheon-name, .pantheon-card:focus-within .pantheon-name{
  opacity:1;transform:translateY(0);
}
/* TICKET LIVE1e: compound rate, revealed with the rest of .pantheon-name on hover */
.pantheon-compound{
  display:block;margin-top:2px;font-family:var(--font-mono);font-size:11.5px;color:var(--h-gold);
}
.pantheon-flagship-tag{
  position:absolute;top:6px;right:6px;
  font-family:var(--font-mono);font-size:9px;font-weight:700;letter-spacing:0.08em;
  color:var(--h-ink);background:var(--h-gold);padding:2px 6px;border-radius:3px;
}
@media (prefers-reduced-motion: reduce){
  .pantheon-card img, .pantheon-name{ transition:none; }
  .pantheon-card:nth-child(n){ transform:none; }
}
@media (max-width:1024px){ .pantheon-grid{ grid-template-columns:repeat(4,1fr); } }
@media (max-width:600px){
  .pantheon-grid{ grid-template-columns:repeat(2,1fr);gap:10px; }
  .pantheon-card:nth-child(n){ transform:none; }
  .pantheon-card.size-lg{ grid-column:span 2;grid-row:span 1; }
  .pantheon-name{ opacity:1;transform:none;padding:6px 6px 5px;font-size:12.5px; }
}

/* ================= 9. LIVE strip ================= */
#live-strip{ padding-top:0;padding-bottom:0; }
.live-strip-bar{
  display:flex;flex-wrap:wrap;gap:10px 26px;align-items:center;justify-content:center;
  max-width:1080px;margin:0 auto;padding:20px 24px;border-radius:999px;
  background:rgba(255,255,255,0.015);
  box-shadow:inset 0 1px 1px rgba(255,255,255,0.08), inset 0 0 0 1px var(--v2-hairline);
  font-family:var(--font-mono);font-size:12.5px;letter-spacing:0.04em;
  color:var(--v2-body-dim);
}
.live-strip-bar span{ white-space:nowrap; }
.live-strip-bar span[hidden]{ display:none; }
.live-dot{
  display:inline-block;width:6px;height:6px;border-radius:50%;
  background:var(--h-gold);margin-right:7px;vertical-align:middle;
}
@media (prefers-reduced-motion: no-preference){
  .live-dot{ animation:live-pulse 2.2s ease-in-out infinite; }
}
@keyframes live-pulse{ 0%,100%{ opacity:1; } 50%{ opacity:0.35; } }

/* ================= 10. FAQ ================= */
#faq details{
  border-top:1px solid var(--v2-hairline);
}
#faq details:last-child{ border-bottom:1px solid var(--v2-hairline); }
#faq summary{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  min-height:44px;padding:20px 4px;cursor:pointer;list-style:none;
  font-family:var(--font-serif);font-size:clamp(17px,2.4vw,21px);color:var(--h-ivory);
}
#faq summary::-webkit-details-marker{ display:none; }
#faq summary::after{
  content:"+";flex:0 0 auto;font-family:var(--font-mono);font-size:18px;color:var(--h-gold);
  transition:transform 200ms ease;
}
#faq details[open] summary::after{ transform:rotate(45deg); }
#faq summary:focus-visible{ outline:2px solid var(--h-gold);outline-offset:2px; }
#faq .faq-answer{
  margin:0 4px 22px;max-width:680px;font-family:var(--font-ui);font-size:15px;
  line-height:1.7;color:var(--v2-body);font-size:15.5px;
}
@media (prefers-reduced-motion: reduce){
  #faq summary::after{ transition:none; }
}

/* ================= 11. CTA + footer ================= */
#cta-footer{ text-align:center; }
.cta-final-title{
  margin:0 0 26px;font-family:var(--font-serif);font-weight:400;
  font-size:clamp(34px,7vw,58px);line-height:1.05;color:var(--h-ivory);
}
.cta-final-row{
  display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin:0 0 22px;
}
.cta-final-primary{
  display:inline-flex;align-items:center;min-height:48px;padding:0 30px;border-radius:999px;
  text-decoration:none;color:var(--h-gold);
  font-family:var(--font-mono);font-size:13px;font-weight:600;
  letter-spacing:0.08em;text-transform:uppercase;
}
.cta-final-secondary{
  display:inline-flex;align-items:center;min-height:48px;padding:0 26px;border-radius:999px;
  text-decoration:none;color:var(--glass-80);
  font-family:var(--font-mono);font-size:12px;font-weight:600;
  letter-spacing:0.07em;text-transform:uppercase;
}
.cta-final-primary:focus-visible, .cta-final-secondary:focus-visible{
  outline:2px solid var(--glass-60);outline-offset:2px;
}
.cta-final-mono{
  margin:0 0 64px;font-family:var(--font-mono);font-size:11px;letter-spacing:0.04em;
  color:rgba(255,255,255,0.72);
}
.site-footer{
  display:flex;flex-direction:column;align-items:center;gap:16px;
  padding-top:32px;border-top:1px solid var(--v2-hairline);
}
.footer-mark{ display:flex;align-items:center;gap:9px; }
.footer-mark img{ width:22px;height:22px;display:block; }
.footer-mark span{
  font-family:var(--font-mono);font-size:11px;letter-spacing:0.1em;
  text-transform:uppercase;color:rgba(255,255,255,0.82);
}
.footer-links{ display:flex;gap:22px;flex-wrap:wrap;justify-content:center; }
.footer-links a{
  font-family:var(--font-mono);font-size:11px;letter-spacing:0.06em;
  text-transform:uppercase;color:rgba(255,255,255,0.82);text-decoration:none;
  min-height:44px;display:inline-flex;align-items:center;
}
.footer-links a:hover, .footer-links a:focus-visible{ color:var(--h-gold); }
.footer-links a:focus-visible{ outline:2px solid var(--glass-60);outline-offset:2px; }
.footer-links a[hidden]{ display:none; }

/* ================= responsive: 1024 / 768 / 390 / 360 sweep ================= */
@media (max-width:1024px){
  .strongbox-stats{ grid-template-columns:1fr 1fr; }
}
@media (max-width:768px){
  .v2-section{ padding:64px 20px calc(72px + env(safe-area-inset-bottom)); }
  .intro-lines{ text-align:center;align-items:center; }
}
@media (max-width:480px){
  .strongbox-stats{ grid-template-columns:1fr; }
  .cta-final-row{ flex-direction:column;width:100%;max-width:300px;margin-left:auto;margin-right:auto; }
  .cta-final-primary, .cta-final-secondary{ width:100%;justify-content:center; }
}

/* LEAD 2026-09-01: chaos graph readability */
.chaos-grid{ stroke:rgba(255,255,255,0.09);stroke-width:1; }
.chaos-band-label{ fill:var(--h-gold);opacity:0.85; }
.chaos-svg-wrap{ padding:0 4px; }

/* LEAD readability: mobile never drops body copy below 15px */
@media (max-width:600px){
  .v2-section p, .v2-section dd, .v2-section li{ font-size:15px;line-height:1.65; }
  .v2-section .v2-sub{ font-size:15.5px; }
  .pack-odds{ font-size:12.5px; }
}

/* ============ LEAD 2026-09-01: Apple-style frosted glass ============
   The panels are translucent, not painted. What makes them read as light,
   living glass is the layer behind: large soft gold lights drifting slowly.
   A backdrop blur destroys small sparkles, so these are big on purpose. */
#bokeh-field{
  position:fixed;inset:0;z-index:1;pointer-events:none;overflow:hidden;
  contain:strict;
}
.bokeh{ position:absolute;border-radius:50%;filter:blur(26px);will-change:transform; }
.bokeh.b1{
  width:302px;height:302px;left:21%;top:54%;
  background:radial-gradient(circle at 42% 40%, rgba(217,168,78,0.42), rgba(217,168,78,0.10) 46%, transparent 70%);
  animation:bokeh-drift-1 46s ease-in-out -1s infinite alternate;
}
@keyframes bokeh-drift-1{ to{ transform:translate3d(-72px,67px,0) scale(1.12); } }
.bokeh.b2{
  width:244px;height:244px;left:48%;top:78%;
  background:radial-gradient(circle at 42% 40%, rgba(217,168,78,0.42), rgba(217,168,78,0.10) 46%, transparent 70%);
  animation:bokeh-drift-2 27s ease-in-out -29s infinite alternate;
}
@keyframes bokeh-drift-2{ to{ transform:translate3d(39px,-16px,0) scale(1.12); } }
.bokeh.b3{
  width:229px;height:229px;left:13%;top:59%;
  background:radial-gradient(circle at 42% 40%, rgba(255,241,214,0.34), rgba(217,168,78,0.10) 46%, transparent 70%);
  animation:bokeh-drift-3 39s ease-in-out -2s infinite alternate;
}
@keyframes bokeh-drift-3{ to{ transform:translate3d(-29px,-47px,0) scale(1.12); } }
.bokeh.b4{
  width:361px;height:361px;left:56%;top:11%;
  background:radial-gradient(circle at 42% 40%, rgba(217,168,78,0.42), rgba(217,168,78,0.10) 46%, transparent 70%);
  animation:bokeh-drift-4 52s ease-in-out -18s infinite alternate;
}
@keyframes bokeh-drift-4{ to{ transform:translate3d(-59px,-13px,0) scale(1.12); } }
.bokeh.b5{
  width:381px;height:381px;left:82%;top:78%;
  background:radial-gradient(circle at 42% 40%, rgba(217,168,78,0.42), rgba(217,168,78,0.10) 46%, transparent 70%);
  animation:bokeh-drift-5 27s ease-in-out -18s infinite alternate;
}
@keyframes bokeh-drift-5{ to{ transform:translate3d(59px,31px,0) scale(1.12); } }
.bokeh.b6{
  width:232px;height:232px;left:30%;top:9%;
  background:radial-gradient(circle at 42% 40%, rgba(255,241,214,0.34), rgba(217,168,78,0.10) 46%, transparent 70%);
  animation:bokeh-drift-6 43s ease-in-out -27s infinite alternate;
}
@keyframes bokeh-drift-6{ to{ transform:translate3d(-56px,4px,0) scale(1.12); } }
.bokeh.b7{
  width:327px;height:327px;left:20%;top:73%;
  background:radial-gradient(circle at 42% 40%, rgba(217,168,78,0.42), rgba(217,168,78,0.10) 46%, transparent 70%);
  animation:bokeh-drift-7 29s ease-in-out -18s infinite alternate;
}
@keyframes bokeh-drift-7{ to{ transform:translate3d(-12px,-24px,0) scale(1.12); } }
.bokeh.b8{
  width:246px;height:246px;left:76%;top:77%;
  background:radial-gradient(circle at 42% 40%, rgba(217,168,78,0.42), rgba(217,168,78,0.10) 46%, transparent 70%);
  animation:bokeh-drift-8 46s ease-in-out -6s infinite alternate;
}
@keyframes bokeh-drift-8{ to{ transform:translate3d(5px,-46px,0) scale(1.12); } }
.bokeh.b9{
  width:360px;height:360px;left:10%;top:76%;
  background:radial-gradient(circle at 42% 40%, rgba(255,241,214,0.34), rgba(217,168,78,0.10) 46%, transparent 70%);
  animation:bokeh-drift-9 27s ease-in-out -19s infinite alternate;
}
@keyframes bokeh-drift-9{ to{ transform:translate3d(-38px,57px,0) scale(1.12); } }
.bokeh.b10{
  width:394px;height:394px;left:70%;top:58%;
  background:radial-gradient(circle at 42% 40%, rgba(217,168,78,0.42), rgba(217,168,78,0.10) 46%, transparent 70%);
  animation:bokeh-drift-10 50s ease-in-out -10s infinite alternate;
}
@keyframes bokeh-drift-10{ to{ transform:translate3d(29px,46px,0) scale(1.12); } }
.bokeh.b11{
  width:312px;height:312px;left:40%;top:35%;
  background:radial-gradient(circle at 42% 40%, rgba(217,168,78,0.42), rgba(217,168,78,0.10) 46%, transparent 70%);
  animation:bokeh-drift-11 51s ease-in-out -5s infinite alternate;
}
@keyframes bokeh-drift-11{ to{ transform:translate3d(88px,-8px,0) scale(1.12); } }
.bokeh.b12{
  width:240px;height:240px;left:75%;top:42%;
  background:radial-gradient(circle at 42% 40%, rgba(255,241,214,0.34), rgba(217,168,78,0.10) 46%, transparent 70%);
  animation:bokeh-drift-12 42s ease-in-out -15s infinite alternate;
}
@keyframes bokeh-drift-12{ to{ transform:translate3d(-3px,44px,0) scale(1.12); } }
@media (prefers-reduced-motion: reduce){ .bokeh{ animation:none; } }

.v2-section{ position:relative;z-index:10; }

/* ---- PANELS: Costa Global's frosted base, finished to the standard the
   topbar pills already set. Five things separate a cheap glass card from a
   good one and all five are here: a tinted gradient rather than a flat
   wash, a masked gradient ring instead of a uniform border, a light caught
   in one corner, a fine grain that kills the plastic look, and a hover that
   lifts. Blur and saturation values are Costa's, untouched. ---- */
.pack-tablet,
.stone-tablet,
.live-strip-bar,
.chaos-svg-wrap,
.faq-list details,
.tech-grid li,
.station-item,
.strongbox-stats{
  position:relative;overflow:hidden;isolation:isolate;
  background:
    radial-gradient(120% 90% at 12% 0%, rgba(255,255,255,0.10), transparent 46%),
    linear-gradient(180deg, rgba(30,28,24,0.50) 0%, rgba(14,13,11,0.60) 100%);
  -webkit-backdrop-filter:blur(24px) saturate(180%);
  backdrop-filter:blur(24px) saturate(180%);
  border:none;
  border-radius:20px;
  color:#F5F0E8;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.16),
    0 1px 2px rgba(0,0,0,0.30),
    0 24px 56px -20px rgba(0,0,0,0.75);
  transition:transform 260ms cubic-bezier(.2,.7,.2,1),
             box-shadow 260ms cubic-bezier(.2,.7,.2,1),
             background 260ms ease;
}
/* the ring: a gradient painted into a masked pseudo element, bright at the
   top edge and fading round the sides. Same construction as .liquid-glass. */
.pack-tablet::before, .stone-tablet::before, .live-strip-bar::before,
.chaos-svg-wrap::before, .faq-list details::before, .tech-grid li::before,
.station-item::before, .strongbox-stats::before{
  content:"";position:absolute;inset:0;padding:1.2px;border-radius:inherit;
  background:linear-gradient(180deg,
    rgba(255,255,255,0.42) 0%,
    rgba(255,255,255,0.14) 22%,
    rgba(255,255,255,0.05) 52%,
    rgba(217,168,78,0.20) 100%);
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite:exclude;
  pointer-events:none;z-index:2;
}
/* grain: the detail that stops glass reading as plastic */
.pack-tablet::after, .stone-tablet::after, .live-strip-bar::after,
.chaos-svg-wrap::after, .faq-list details::after, .tech-grid li::after,
.station-item::after, .strongbox-stats::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  z-index:0;opacity:0.035;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
.pack-tablet > *, .stone-tablet > *, .tech-grid li > *, .station-item > *,
.faq-list details > *, .strongbox-stats > *, .live-strip-bar > *{ position:relative;z-index:1; }

@media (hover:hover){
  .pack-tablet:hover, .stone-tablet:hover, .station-item:hover, .tech-grid li:hover{
    transform:translateY(-3px);
    background:
      radial-gradient(120% 90% at 12% 0%, rgba(255,255,255,0.15), transparent 48%),
      linear-gradient(180deg, rgba(36,33,27,0.52) 0%, rgba(16,15,12,0.62) 100%);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.24),
      0 1px 2px rgba(0,0,0,0.30),
      0 34px 70px -22px rgba(0,0,0,0.8);
  }
}
@media (prefers-reduced-motion: reduce){
  .pack-tablet, .stone-tablet, .station-item, .tech-grid li{ transition:none; }
  .pack-tablet:hover, .stone-tablet:hover, .station-item:hover, .tech-grid li:hover{ transform:none; }
}

.pack-tablet p, .pack-tablet td, .stone-tablet p,
.tech-grid li .tech-item-body, .faq-list details p,
.station-item p, .strongbox-stats dd{ color:#F5F0E8;text-shadow:none; }
.pack-tablet h3, .stone-tablet h3, .faq-list summary{ color:#fff;letter-spacing:0.005em; }
.tech-grid li .tech-item-label, .pack-tablet .pack-price,
.station-item .station-label, .strongbox-stats dt, .pack-tablet .pack-price-tag{
  color:var(--h-gold-strong);
}
.pack-odds td{ border-top:1px solid rgba(255,255,255,0.12);color:#F5F0E8; }
.chaos-svg-wrap .chaos-axis-label{ fill:rgba(245,240,232,0.8); }
.chaos-grid{ stroke:rgba(255,255,255,0.12); }
.chaos-band-label{ fill:var(--h-gold-strong);opacity:1; }

.tech-grid{ border-top:none;gap:14px; }
.tech-grid li{ border-bottom:none;border-right:none;padding:22px 20px 20px !important;text-align:left; }
.tech-grid li *{ text-align:left; }
.faq-list details{ margin-bottom:12px;padding:4px 20px; }
.chaos-svg-wrap{ padding:20px 16px; }
.strongbox-stats{ padding:24px 26px; }
.station-item{ padding:18px 20px; }

@supports not (backdrop-filter: blur(2px)){
  .pack-tablet,.stone-tablet,.live-strip-bar,.chaos-svg-wrap,
  .faq-list details,.tech-grid li,.station-item,.strongbox-stats{
    background:linear-gradient(180deg, rgba(30,28,24,0.95), rgba(14,13,11,0.97));
  }
}