/* ==========================================================================
   PRODUCTS — product emblems, the arsenal (ZEUS / APOLLO), the OLYMPUS
   strip, pricing refinements and the guarantee ("oath") pieces.
   Each EA owns a tone from the theme: ZEUS is storm gold, APOLLO is the
   dawn sky (the theme's Skywash), OLYMPUS carries both.
   ========================================================================== */

/* tones ------------------------------------------------------------------ */
.god--zeus, .price--zeus { --tone: var(--gold); --tone-hi: var(--gold-hi); --tone-soft: rgba(242, 199, 92, .1); --tone-edge: var(--gold-edge); --tone-text: var(--gold-text); }
.god--apollo, .price--apollo { --ia: #d8ecf8; --tone: #98c0ef; --tone-hi: #d8ecf8; --tone-soft: rgba(152, 192, 239, .11); --tone-edge: rgba(182, 217, 252, .4); --tone-text: var(--sky); }
.price--olympus { --tone: var(--gold); --tone-hi: var(--gold-hi); --tone-soft: rgba(242, 199, 92, .12); --tone-edge: var(--gold-edge); }

/* PRODUCT EMBLEMS --------------------------------------------------------- */
/* The artwork for each EA, used wherever the product appears: ZEUS's gold seal turns slowly,
   APOLLO's silver sunrise stays still, OLYMPUS layers the sunrise behind the turning seal.
   A still glow sits behind; the spin is transform-only (compositor) and pauses off-screen (data-loop). */
.emblem { position: relative; flex: none; width: 76px; height: 76px; display: grid; place-items: center; }
.emblem::before { content: ""; position: absolute; inset: -16%; border-radius: 50%; pointer-events: none; background: radial-gradient(closest-side, rgba(242, 199, 92, .24), rgba(242, 199, 92, .06) 62%, transparent); }
.emblem > img, .emblem > svg { position: relative; display: block; width: 100%; height: 100%; animation: emblemSpin 60s linear infinite reverse; filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .55)); }
.emblem--still > img, .emblem--duo > img:first-child { animation: none; }
.emblem--apollo::before { background: radial-gradient(closest-side, rgba(216, 236, 248, .2), rgba(152, 192, 239, .06) 62%, transparent); }
.emblem--duo > img { position: absolute; left: 0; top: 0; }
.emblem--duo > img + img { left: 22%; top: 22%; width: 56%; height: 56%; }
/* no artwork yet: a struck-gold medallion around the product's icon */
.emblem--mark { border-radius: 50%; background: radial-gradient(circle at 34% 28%, #6b5222, #2a1f0b 62%, #17120a); box-shadow: inset 0 0 0 1.5px rgba(255, 231, 163, .55), inset 0 0 0 5px rgba(23, 18, 10, .9), inset 0 0 0 6px rgba(242, 199, 92, .35), 0 4px 12px rgba(0, 0, 0, .5); }
.emblem--mark > svg { width: 46%; height: 46%; color: var(--gold-hi); filter: drop-shadow(0 0 6px rgba(242, 199, 92, .45)); animation-direction: normal; animation-duration: 72s; }
@keyframes emblemSpin { to { transform: rotate(360deg); } }
/* sizes by place: the sunrise is wide and short; the OLYMPUS coin is full and round, so it reads a touch larger */
.price .emblem--apollo { width: 84px; height: 84px; margin: -4px -2px -4px -4px; }
.price .emblem--duo { width: 92px; height: 92px; margin: -8px -4px -8px -8px; }
.price .emblem--olympus { width: 84px; height: 84px; margin: -4px -2px -4px -4px; }
.god__top .emblem { width: 58px; height: 58px; margin: -6px 0; }
.god__top .emblem--apollo { width: 66px; height: 66px; margin: -10px -2px -10px -4px; }
.bundle .emblem { width: 62px; height: 62px; margin: -8px 0; }
.gods__tabs .emblem { width: 24px; height: 24px; }
.gods__tabs .emblem--apollo { width: 30px; height: 30px; margin: -3px -2px; }
.gods__tabs .emblem::before { display: none; }
.gods__tabs .emblem > img { animation: none; filter: none; }

/* THE ARSENAL ------------------------------------------------------------- */
.gods { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: stretch; }
.god { --py: clamp(24px, 3vw, 38px); --px: var(--py); position: relative; display: flex; flex-direction: column; padding: var(--py) var(--px); border-radius: var(--r-window); background: var(--deep-glass); box-shadow: var(--sh-modal), inset 0 0 0 1px rgba(186, 214, 247, .04); }
/* a hairline of the god's own light along the top edge */
.god::before { content: ""; position: absolute; left: 12%; right: 12%; top: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--tone-hi), transparent); opacity: .8; }
.god__top { display: flex; align-items: center; gap: 14px; }

/* a god's backdrop: its art stands behind the panel's content, pushed far to the left and
   dissolving to the right and below, blended with `lighten` so its black becomes the panel.
   Behind it the sky is dark, and now and then a faint, distant strike lights it: a bolt,
   a soft flash and the statue catching the light for a moment. Strikes come 7 to 14
   seconds apart, each bolt drawn new, and none fire off-screen or in a hidden tab. */
.god--art { overflow: hidden; isolation: isolate; }
.god--art::before { z-index: 2; }
.god--art > :not(.god__bg) { position: relative; z-index: 1; }
.god__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.god__statue {
  --o: .42; position: absolute; left: -26%; top: -1%; width: 92%; height: auto; opacity: var(--o); mix-blend-mode: lighten;
  -webkit-mask-image: linear-gradient(90deg, #000 76%, transparent 100%), linear-gradient(180deg, #000 0, #000 42%, rgba(0, 0, 0, .7) 55%, rgba(0, 0, 0, .38) 67%, rgba(0, 0, 0, .14) 78%, rgba(0, 0, 0, .04) 85%, transparent 90%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, #000 76%, transparent 100%), linear-gradient(180deg, #000 0, #000 42%, rgba(0, 0, 0, .7) 55%, rgba(0, 0, 0, .38) 67%, rgba(0, 0, 0, .14) 78%, rgba(0, 0, 0, .04) 85%, transparent 90%);
  mask-composite: intersect;
}
/* APOLLO stands on the right, mirrored, so the two gods face each other. Its art is brighter
   silver, so it sits a touch quieter, and it dissolves sooner, leaving the head and halo. */
.god__bg--right .god__statue {
  left: auto; right: -24%; width: 90%; --o: .36;
  -webkit-mask-image: linear-gradient(270deg, #000 74%, transparent 100%), linear-gradient(180deg, #000 0, #000 40%, rgba(0, 0, 0, .68) 52%, rgba(0, 0, 0, .34) 62%, rgba(0, 0, 0, .12) 71%, rgba(0, 0, 0, .03) 79%, transparent 85%);
  mask-image: linear-gradient(270deg, #000 74%, transparent 100%), linear-gradient(180deg, #000 0, #000 40%, rgba(0, 0, 0, .68) 52%, rgba(0, 0, 0, .34) 62%, rgba(0, 0, 0, .12) 71%, rgba(0, 0, 0, .03) 79%, transparent 85%);
}
/* each god strikes in its own metal: ZEUS gold, APOLLO silver */
.god--zeus .god__bg--storm { --bolt: rgba(255, 231, 163, .5); --bolt-glow: rgba(242, 199, 92, .7); --flash: rgba(242, 199, 92, .13); --flash-lo: rgba(242, 199, 92, .035); }
.god--apollo .god__bg--storm { --bolt: rgba(226, 238, 250, .46); --bolt-glow: rgba(216, 236, 248, .65); --flash: rgba(216, 236, 248, .12); --flash-lo: rgba(186, 214, 247, .035); }
.god__flash { position: absolute; top: -8%; left: calc(var(--bx, 70) * 1%); width: 80%; height: min(52%, 600px); transform: translateX(-50%); opacity: 0; background: radial-gradient(closest-side, var(--flash), var(--flash-lo) 55%, transparent); }
.god__bolt { position: absolute; left: 0; top: 0; width: 100%; height: min(46%, 520px); overflow: visible; opacity: 0; filter: drop-shadow(0 0 4px var(--bolt-glow)); }
.god__bolt path { fill: none; stroke: var(--bolt); stroke-width: 1.1; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
/* one strike: a double flicker of about half a second (products.js fires it, 7 to 14 s apart) */
.god__bg.is-strike .god__flash, .god__bg.is-strike .god__bolt { animation: godStrike .5s linear; }
.god__bg.is-strike .god__statue { animation: godLit .5s linear; }
@keyframes godStrike { 0%, 100% { opacity: 0; } 16% { opacity: 1; } 34% { opacity: .22; } 54% { opacity: .8; } }
@keyframes godLit { 0%, 100% { opacity: var(--o); } 16% { opacity: calc(var(--o) + .12); } 34% { opacity: calc(var(--o) + .03); } 54% { opacity: calc(var(--o) + .1); } }
.god__role { font-size: 13.5px; color: var(--text-2); }
.god__ver { margin-left: auto; font-family: var(--font-mono); font-size: 12px; color: var(--text-4); }
.god__name {
  margin: 26px 0 4px; font-family: var(--font-display); font-weight: 500; font-size: clamp(64px, 8.4vw, 116px); line-height: .9;
  background: var(--tone-text); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .06em;
}
.god__title { font-size: 19px; font-weight: 500; color: var(--text-hi); }
.god__pitch { margin-top: 10px; max-width: 48ch; font-size: 16px; line-height: 1.6; color: var(--text-2); }
.god__specs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin: 28px 0; border-radius: 12px; overflow: hidden; background: var(--edge-soft); box-shadow: var(--sh-hair); }
.god__specs div { padding: 12px 14px; background: #070914; }
.god__specs dt { font-size: 12px; color: var(--text-4); }
.god__specs dd { margin: 4px 0 0; font-size: 14px; line-height: 1.35; color: var(--text-hi); }
.god__powers { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; flex: 1; align-content: start; }
.god__powers li { position: relative; padding-left: 24px; }
/* a cut gem in the god's colour instead of a stock tick */
.god__powers li::before { content: ""; position: absolute; left: 3px; top: 7px; width: 7px; height: 7px; transform: rotate(45deg); background: var(--tone); box-shadow: 0 0 0 3px var(--tone-soft); }
.god__powers b { display: block; font-size: 15px; font-weight: 500; color: var(--text-hi); }
.god__powers span { display: block; margin-top: 3px; font-size: 14px; line-height: 1.55; color: var(--text-3); }
.god__more { display: none; }
.god__buy { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 30px; padding-top: 24px; box-shadow: inset 0 1px 0 var(--edge-soft); }
.god__price b { font-family: var(--font-display); font-weight: 500; font-size: 44px; line-height: 1; }
.god__price s { margin-left: 10px; font-family: var(--font-mono); font-size: 15px; color: var(--text-4); }
.god__price small { display: block; margin-top: 6px; font-size: 12.5px; color: var(--text-3); }
.god__oath { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 12.5px; color: var(--text-3); }
.god__oath svg, .price__oath svg { flex: none; width: 14px; height: 14px; color: var(--gold); }

/* the OLYMPUS strip: the layered emblem, one line, one action */
.bundle { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 20px; margin-top: 16px; padding: 18px 24px; border-radius: var(--r-card); background: var(--glass); box-shadow: var(--sh-hair), inset 0 1px 1px rgba(216, 236, 248, .07); font-size: 15px; color: var(--text-2); transition: background-color .2s, box-shadow .2s; }
.bundle b { font-weight: 500; color: var(--text-hi); }
.bundle__go { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-size: 14px; font-weight: 500; color: var(--gold-hi); }
.bundle__go svg, .price__up svg, .oath-band__go svg { width: 14px; height: 14px; transition: transform .2s var(--ease-out); }
@media (hover: hover) {
  .bundle:hover { background: var(--glass-2); box-shadow: inset 0 0 0 1px var(--gold-edge); }
  .bundle:hover .bundle__go svg, .price__up:hover svg, .oath-band:hover .oath-band__go svg { transform: translateX(3px); }
}

/* PRICING refinements ------------------------------------------------------ */
.price__head { display: flex; align-items: center; gap: 16px; }
.price__id { min-width: 0; }
.price__id .price__tag { margin-top: 6px; }
.price .price__name { font-size: 18px; color: var(--tone-hi); }
.price__stack { margin: -4px 0 22px; border-radius: 10px; overflow: hidden; box-shadow: var(--sh-hair); font-size: 13.5px; }
.price__stack div { display: flex; justify-content: space-between; gap: 12px; padding: 9px 12px; color: var(--text-3); }
.price__stack div + div { box-shadow: inset 0 1px 0 var(--edge-soft); }
.price__stack dd { margin: 0; font-family: var(--font-mono); color: var(--text-hi); }
.price__stack-total { background: var(--gold-soft); }
.price__stack-total dt { font-weight: 500; color: var(--text-hi); }
.price__stack-total dd { color: var(--gold-hi); }
.price__oath { display: flex; justify-content: center; align-items: center; gap: 7px; margin-top: 12px; font-size: 12.5px; color: var(--text-3); }
.price__oath a { color: var(--text-2); text-decoration: underline; text-decoration-color: var(--edge-strong); text-underline-offset: 3px; }
@media (hover: hover) { .price__oath a:hover { color: var(--text-hi); } }
.price ul { align-content: start; }
.price__up { display: flex; justify-content: center; align-items: center; gap: 6px; margin: -10px 0 16px; padding: 12px 0 0; box-shadow: inset 0 1px 0 var(--edge-soft); text-align: center; font-size: 13px; color: var(--gold-hi); }
.price.is-flash { animation: offerFlash 1.6s var(--ease-out); }
@keyframes offerFlash { 30% { box-shadow: var(--sh-modal), 0 0 0 2px var(--gold), 0 0 80px -10px rgba(242, 199, 92, .55); } }

/* the oath strip under the cards: a small seal that echoes the big one */
.oath-band { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 20px; margin-top: 20px; padding: 16px 22px; border-radius: var(--r-card); background: linear-gradient(90deg, rgba(242, 199, 92, .07), transparent 55%), var(--glass); box-shadow: var(--sh-hair), inset 0 0 0 1px rgba(242, 199, 92, .1); font-size: 14.5px; line-height: 1.5; color: var(--text-3); }
.oath-band strong { font-weight: 500; color: var(--text-hi); }
.oath-band__seal { position: relative; width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; align-content: center; text-align: center; box-shadow: inset 0 0 0 1px var(--gold-edge), 0 0 0 4px rgba(242, 199, 92, .06); }
.oath-band__seal::before { content: ""; position: absolute; inset: 6px; border-radius: 50%; border: 1px dashed rgba(242, 199, 92, .35); }
.oath-band__seal b { font-family: var(--font-dot); font-weight: 800; font-size: 22px; line-height: .9; color: var(--gold-hi); text-shadow: 0 0 10px rgba(242, 199, 92, .45); }
.oath-band__seal small { display: block; margin-top: 2px; font-family: var(--font-mono); font-size: 8px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); }
.oath-band__go { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-size: 13.5px; font-weight: 500; color: var(--gold-hi); }

/* GUARANTEE: the three steps of the oath --------------------------------- */
.oath-steps { list-style: none; margin: 26px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; max-width: 640px; border-radius: 12px; overflow: hidden; background: var(--edge-soft); box-shadow: var(--sh-hair); text-align: left; }
.oath-steps li { padding: 14px 16px; background: #070914; font-size: 14px; line-height: 1.45; color: var(--text-2); }
.oath-steps b { display: block; margin-bottom: 6px; font-family: var(--font-dot); font-weight: 800; font-size: 20px; line-height: 1; color: var(--gold-hi); }

/* THE THRONE ROOM: behind the pricing, ZEUS (gold, left, arms raised) and APOLLO (silver, right,
   mirrored so they face in) stand at the far edges, soft with distance. The images carry their own blur,
   which deepens toward the legs, and a fade that swallows the feet; `lighten` turns their black
   into the page. Below everything in the section, and clipped so nothing widens the page. */
.throne { position: absolute; inset: 0; z-index: var(--z-below); overflow: hidden; pointer-events: none; }
.throne img { position: absolute; top: 0; width: auto; max-width: none; height: min(1250px, 100%); opacity: .42; mix-blend-mode: lighten; transform: translateX(-50%); }
.throne__apollo { left: 88%; }
/* ZEUS is a wide half figure with arms raised: its empty sky sits above the section, the raised
   hands rise beside the heading, the halo by the countdown, and the left arm runs off the page
   edge so the image's own edge never shows. Brighter gold, so a touch quieter. */
.throne .throne__zeus { top: -110px; left: calc(9% - 205px); height: 820px; transform: none; opacity: .38; }

/* phones: one god at a time, chosen by tabs (or a sideways swipe) */
.gods__tabs { display: none; }
@keyframes godIn { from { opacity: 0; transform: translateX(var(--from, 14px)); } }

/* responsive --------------------------------------------------------------- */
@media (max-width: 960px) {
  .gods { grid-template-columns: 1fr; max-width: 640px; margin-inline: auto; }
  .throne img { height: 1000px; opacity: .44; }
  .throne .throne__zeus { top: -100px; left: calc(9% - 190px); height: 760px; }
  .throne__apollo { left: 93%; }
  .god__statue { left: -14%; width: 76%; }
  .god__bg--right .god__statue { left: auto; right: -12%; width: 72%; }
  .bundle { max-width: 640px; margin-inline: auto; }
}
@media (max-width: 760px) {
  .throne img { top: 0; height: 640px; opacity: .42; }
  .throne .throne__zeus { top: -70px; left: -205px; height: 520px; }
  .throne__apollo { left: 91%; }
  .gods__tabs { display: flex; width: 100%; margin-bottom: 14px; scroll-margin-top: 90px; }
  .gods__tabs button { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 9px; height: 46px; font-size: 15px; }
  .gods__tabs button[aria-selected="true"] { color: var(--white); background: var(--glass-3); box-shadow: inset 0 1px 1px rgba(216, 236, 248, .2), var(--sh-hair); }
  .gods__tabs button[aria-selected="false"] .emblem { opacity: .55; }
  .gods { touch-action: pan-y; }
  .god:not(.is-shown) { display: none; }
  .god.is-shown { animation: godIn .35s var(--ease-out); }
  .god { --py: 24px; --px: 18px; }
  .god__statue { left: -34%; width: 112%; --o: .4; }
  .god__bg--right .god__statue { left: auto; right: -30%; width: 104%; --o: .34; }
  .god__top .emblem { width: 50px; height: 50px; margin: -4px 0; }
  .god__top .emblem--apollo { width: 58px; height: 58px; margin: -8px -2px -8px -4px; }
  .god__name { margin-top: 20px; }
  .god__specs { grid-template-columns: repeat(2, 1fr); margin: 22px 0; }
  .god:not(.is-open) .god__powers li:nth-child(n+5) { display: none; }
  .god__more { display: inline-flex; align-self: flex-start; align-items: center; height: 36px; margin-top: 16px; padding: 0 14px; border-radius: var(--r-pill); font-size: 13.5px; font-weight: 500; color: var(--tone-hi); background: var(--tone-soft); box-shadow: inset 0 0 0 1px var(--tone-edge); }
  .god__buy { flex-direction: column; align-items: stretch; gap: 18px; }
  .god__buy .btn { width: 100%; }
  .bundle { grid-template-columns: auto 1fr; gap: 14px 16px; padding: 16px 18px; font-size: 14.5px; }
  .bundle .emblem { width: 54px; height: 54px; }
  .bundle__go { grid-column: 1 / -1; }
  .oath-band { grid-template-columns: auto 1fr; gap: 14px 16px; padding: 16px 18px; font-size: 14px; }
  .oath-band__go { grid-column: 1 / -1; }
  .oath-steps { grid-template-columns: 1fr; }
  .price .emblem { width: 64px; height: 64px; }
  .price .emblem--apollo, .price .emblem--duo, .price .emblem--olympus { width: 72px; height: 72px; }
}
@media (prefers-reduced-motion: reduce) { .price.is-flash, .god.is-shown, .emblem > img, .emblem > svg, .god__statue, .god__flash, .god__bolt { animation: none; } }