:root {
  color-scheme: dark;
  --surface-shell: #07070c;
  --surface-deep: #0d0f17;
  --surface-panel: rgba(15,16,26,.84);
  --text-primary: #f8f5ff;
  --text-secondary: #c9c1d6;
  --text-muted: #aba1b5;
  --accent-magenta: #8625aa;
  --accent-purple: #6035a3;
  --accent-violet: var(--accent-purple);
  --accent-cyan: #35f0e8;
  --border-muted: rgba(255,255,255,.14);
  --font-body: Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --motion: 240ms cubic-bezier(.2,.9,.2,1);
  --aura-stan: rgba(240,74,218,.14);
  --aura-vera: rgba(53,240,232,.14);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 28px; }
html,body { max-width:100%; overflow-x:clip; }
@supports not (overflow:clip) { html,body { overflow-x:hidden; } }
body { margin: 0; background: var(--surface-shell); color: var(--text-primary); font: 17px/1.65 var(--font-body); }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
p { margin: 0 0 1.1em; }
h1,h2,h3 { margin: 0 0 .65em; line-height: 1.12; letter-spacing: -.04em; }
h1,h2 { font-weight: 800; }
h2 { font-size: clamp(32px,3.2vw,44px); }
h3 { font-size: 26px; font-weight: 700; }
figure { margin: 0; }
.wrap { width: min(1160px,calc(100% - 64px)); margin-inline: auto; }
.section { padding-block: 88px; }
.fine-print { font-size: 13px; color: var(--text-muted); }
:focus-visible { outline: 2px solid var(--accent-cyan); outline-offset: 5px; }
.skip-link { position: absolute; z-index: 10; top: -80px; left: 16px; background: var(--accent-cyan); color: var(--surface-shell); padding: 10px; }
.skip-link:focus { top: 16px; }
.topbar { height: 108px; display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 2; }
.logo { width: 190px; }
.topbar nav { display: flex; align-items: center; gap: 32px; font-size: 14px; font-weight: 650; }
.topbar nav a { padding-block: 12px; transition: color var(--motion); }
.topbar nav a:hover { color: var(--accent-cyan); }
.nav-offer { border-bottom: 1px solid #63457c; }

/* The approved hero composition and canonical imagery remain in place. */
.tarot-hero { position: relative; min-height: 720px; display: flex; align-items: center; isolation: isolate; border-bottom: 1px solid var(--border-muted); background: #120c18; overflow: hidden; }
.hero-art { position: absolute; inset: 0; z-index: -2; }
.hero-art img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.hero-veil { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg,rgba(7,7,12,.97),rgba(7,7,12,.92) 23%,rgba(7,7,12,.55) 44%,transparent 65%),linear-gradient(0deg,rgba(7,7,12,.94),transparent 24%); }
.hero-effects { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
/* Persistent, layered gold shafts sit beside the people, clear of faces/cards. */
.god-ray { position: absolute; top: -16%; left: 42.3%; width: 17.5%; height: 106%; opacity: .58; mask-image: conic-gradient(from 0deg at 45% 0%,transparent 158deg,#000 176deg,#000 184deg,transparent 202deg); transform: none; animation: none; mix-blend-mode: screen; }
.god-ray-mask { position: absolute; inset: 0; mask-image: linear-gradient(#0008,#000 24%,#0008 57%,transparent 94%); }
.god-ray-light { position: absolute; inset: 0; background: linear-gradient(90deg,transparent,#f5c57912 18%,#f3cc8650 35%,#ffe0a28c 45%,#e7b36043 57%,#f7dca647 71%,transparent 94%); filter: blur(18px); mask-image: linear-gradient(90deg,transparent,#000 32%,#000 68%,transparent); }
.god-ray-light::after { content: ''; position: absolute; inset: 0; opacity: .18; background: repeating-linear-gradient(100deg,transparent,#fff2b930 40%,transparent 72%); background-size: 240% 170%; animation: ray-shimmer 34s ease-in-out infinite alternate; animation-play-state: paused; }
.ray-stan-right { left: 62.1%; width: 12.5%; opacity: .54; }
.ray-vera-left { left: 66.1%; width: 12.5%; opacity: .52; }
.ray-vera-right { left: 86.3%; width: 17.5%; opacity: .60; }
.ray-stan-right .god-ray-light::after { animation-duration: 39s; animation-delay: -13s; }
.ray-vera-left .god-ray-light::after { animation-duration: 43s; animation-delay: -21s; }
.ray-vera-right .god-ray-light::after { animation-duration: 37s; animation-delay: -8s; }
.motion-visible .god-ray-light::after { animation-play-state: running; }
.hero-effects i { position: absolute; width: 2.5px; height: 2.5px; border-radius: 50%; background: #ffe9bb; box-shadow: 0 0 7px 1.5px #f5cb7799; opacity: .38; left: 50%; top: 22%; animation: dust-float 18s ease-in-out infinite alternate; animation-play-state: paused; }
.hero-effects i:nth-of-type(2) { left: 68%; top: 46%; animation-delay: -3s; }
.hero-effects i:nth-of-type(3) { left: 72%; top: 32%; animation-delay: -8s; }
.hero-effects i:nth-of-type(4) { left: 94%; top: 17%; animation-delay: -12s; }
.hero-effects i:nth-of-type(5) { left: 93%; top: 58%; animation-delay: -6s; }
.hero-effects i:nth-of-type(6) { left: 49%; top: 37%; animation-delay: -10s; }
.hero-effects i:nth-of-type(7) { left: 67%; top: 11%; animation-delay: -2s; }
.hero-effects i:nth-of-type(8) { left: 73%; top: 49%; animation-delay: -15s; }
.hero-effects i:nth-of-type(9) { left: 94%; top: 36%; animation-delay: -5s; }
.hero-effects i:nth-of-type(10) { left: 51%; top: 57%; animation-delay: -11s; }
.hero-effects i:nth-of-type(11) { left: 69%; top: 27%; animation-delay: -7s; }
.hero-effects i:nth-of-type(12) { left: 92%; top: 9%; animation-delay: -16s; }
.motion-visible .hero-effects > * { animation-play-state: running; }
.motion-toggle { display: block; margin-top: 8px; padding: 10px 0; min-height: 44px; border: 0; background: transparent; color: var(--text-muted); font-size: 12px; text-decoration: underline; text-underline-offset: 4px; }
.motion-toggle:hover { color: var(--accent-cyan); }
.hero-copy { padding-block: 60px 65px; }
.hero-copy > * { max-width: 520px; }
.eyebrow { margin: 0 0 22px; font-size: 15px; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; }
.eyebrow span { display: block; font-size: 12px; margin-top: 6px; color: var(--accent-cyan); letter-spacing: .1em; }
.tarot-hero h1 { max-width: 580px; font-size: clamp(42px,4.4vw,64px); line-height: 1.04; margin-bottom: 25px; }
.hero-lead { max-width: 495px; font-size: 18px; color: #ded8e5; }
.hero-lead strong { font-weight: 650; color: #fff; }
.hero-note { font-size: 16px; color: var(--text-secondary); margin-bottom: 26px; }
.button { display: inline-flex; align-items: center; justify-content: space-between; gap: 32px; padding: 17px 25px; min-height: 58px; font-size: 14px; font-weight: 750; }
.hero-details { margin-top: 21px; }
.pricing-label { margin: 0 0 8px; color: var(--accent-cyan); font-size: 12px; font-weight: 650; }
.hero-prices { display: flex; flex-wrap: wrap; gap: 14px; font-size: 14px; color: #ddd1e7; margin: 0; }
.hero-prices a:hover { color: var(--accent-cyan); }
.welcome { font-size: 12px; color: #cfc2dd; margin: 12px 0 0; }

.experience-intro { display: grid; grid-template-columns: .8fr 1.2fr; gap: 100px; align-items: start; }
.experience-intro h2 { max-width: 380px; margin: 0; }
.experience-copy { max-width: 600px; color: var(--text-secondary); }
.experience-copy p:last-child { margin-bottom: 0; }
.gallery-nav { display: flex; gap: 12px; margin-top: 42px; border-bottom: 1px solid var(--border-muted); }
.gallery-nav button { background: transparent; border: 0; border-bottom: 2px solid transparent; padding: 14px 16px; min-height: 48px; color: var(--text-muted); font-size: 14px; transition: color var(--motion),border-color var(--motion); }
.gallery-nav button[aria-selected="true"] { color: var(--accent-cyan); border-bottom-color: var(--accent-cyan); }
.gallery-nav button:hover { color: var(--text-primary); }
.runtime-frame { background: #0e1119; border: 1px solid var(--border-muted); border-top: 0; }
.image-open { display: block; width: 100%; padding: 0; border: 0; position: relative; background: transparent; }
.image-open img { width: 100%; height: auto; }
.zoom-label { position: absolute; right: 18px; top: 18px; padding: 8px 14px; background: #0b0d14e6; border: 1px solid #64727d; color: #e2dfe9; font-size: 13px; }
.runtime-frame figcaption { display: grid; grid-template-columns: 1.05fr 1fr; gap: 55px; padding: 25px 28px; font-size: 15px; }
.runtime-frame figcaption p { margin: 0; }
#scene-note { color: var(--text-secondary); }
.capture-context { margin: 16px 0 0; color: var(--text-muted); font-size: 13px; }

.deck-section { background: linear-gradient(125deg,#0d0e16,#160f20 70%,#0c1018); border-block: 1px solid var(--border-muted); }
.deck-layout { display: grid; grid-template-columns: .95fr 1.05fr; gap: 100px; align-items: center; }
.deck-art { position: relative; min-height: 490px; }
.fool-art { position: relative; z-index: 1; height: 470px; width: auto; margin-left: 26px; transform: rotate(-4deg); }
.back-art { position: absolute; width: 230px; right: -5px; bottom: 35px; transform: rotate(6deg); box-shadow: 0 18px 40px #0006; }
.deck-caption { margin: 18px 0 12px; color: var(--text-primary); font-weight: 650; font-size: 17px; }
.deck-static-note { font-size: 12px; color: var(--text-muted); margin: 14px 0 0; }
.deck-copy { color: var(--text-secondary); }
.deck-copy h2 { color: var(--text-primary); }
.deck-continuity { padding-top: 22px; margin-top: 25px; border-top: 1px solid var(--border-muted); }
.text-link { display: inline-flex; gap: 22px; align-items: center; min-height: 44px; color: var(--accent-cyan); font-size: 14px; border-bottom: 1px solid #34686d; }
.text-link:hover { color: #d6fffd; }
.stan { display: grid; grid-template-columns: .72fr 1fr; align-items: center; gap: 100px; }
.stan-photo { max-width: 390px; }
.stan-photo img { width: 100%; aspect-ratio: 4/4.55; object-fit: cover; object-position: center; border: 1px solid rgba(240,74,218,.28); border-radius: 12px; box-shadow: 0 0 0 1px rgba(255,32,233,.08),0 28px 90px rgba(0,0,0,.58),0 0 72px var(--aura-stan); }
.stan-photo figcaption { margin-top: 14px; font-size: 13px; color: var(--text-muted); }
.stan-copy { color: var(--text-secondary); }
.stan-copy h2 { color: var(--text-primary); }
.stan-copy p:last-child { margin: 0; }
.companions { position: relative; isolation: isolate; overflow: hidden; --pointer-x: 50%; --pointer-y: 50%; }
.companions::before { content: none; }
.companions::after { content: none; }
.connection-field { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
.stan-photo,.vera-portrait { position: relative; }
.contour-layer { position: absolute; pointer-events: none; z-index: 1; border-radius: 12px; }
.hero-art .contour-layer,.image-open .contour-layer,#image-dialog .contour-layer { border-radius: 0; }
.testimonials { position: relative; isolation: isolate; }
.hex-field { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; mask-image: linear-gradient(transparent,#000 12%,#000 87%,transparent); }
.vera-intro { display: grid; grid-template-columns: 1fr .72fr; gap: 100px; align-items: center; max-width: none; padding-bottom: 88px; }
.vera-portrait { width: 100%; max-width: 390px; justify-self: end; }
.vera-portrait img { width: 100%; height: auto; aspect-ratio: 4/4.55; object-fit: cover; object-position: center 35%; border-radius: 12px; border: 1px solid rgba(53,240,232,.34); box-shadow: 0 0 0 1px rgba(255,32,233,.08),0 28px 90px rgba(0,0,0,.58),0 0 72px var(--aura-vera); }
.vera-portrait figcaption { margin-top: 14px; font-size: 13px; color: var(--text-muted); }
.vera-copy { color: var(--text-secondary); font-size: 17px; }
.vera-copy h2 { color: var(--text-primary); }
.vera-copy p:last-child { margin: 0; }
.vera-copy .text-link { margin-top: 8px; }

.readings-section { background: linear-gradient(110deg,#0c111b,#17101f); border-block: 1px solid var(--border-muted); }
.sessions-heading { display: grid; grid-template-columns: 1fr 1fr; gap: 100px; align-items: start; }
.sessions-heading h2 { margin: 0; }
.sessions-heading > p { margin: 0; color: var(--text-secondary); max-width: 490px; }
.early-access-note { margin: 28px 0 0; max-width: 780px; color: var(--text-secondary); font-size: 16px; }
.early-access-note strong { color: var(--accent-cyan); font-weight: 650; }
.session-comparison { display: grid; grid-template-columns: 1fr 1fr; margin-top: 48px; border-top: 1px solid #535263; background: linear-gradient(180deg,#ffffff05,transparent); }
.session-option { display: flex; flex-direction: column; padding: 34px 48px 8px 0; }
.session-option + .session-option { padding-left: 48px; padding-right: 0; border-left: 1px solid #535263; }
.session-option h3 { margin-bottom: 18px; font-size: 28px; }
.session-price { font-size: 54px; font-weight: 750; letter-spacing: -.04em; line-height: 1.1; color: var(--text-primary); margin-bottom: 25px; }
.session-price span { display: inline-block; font-size: 15px; font-weight: 400; letter-spacing: 0; color: var(--text-secondary); margin-left: 12px; }
.session-description { color: var(--text-secondary); font-size: 16px; flex: 1; padding-bottom: 12px; }
.session-description .session-purpose { color: #e7dfef; font-size: 17px; margin-bottom: 12px; }
.session-option .button { align-self: flex-start; }
.session-inclusions { margin-top: 38px; padding-top: 28px; border-top: 1px solid var(--border-muted); }
.session-inclusions h3 { font-size: 20px; letter-spacing: -.02em; }
.session-inclusions ul { display: flex; flex-wrap: wrap; gap: 14px 38px; padding: 0; margin: 20px 0; list-style: none; color: #e7dfef; font-size: 16px; }
.session-inclusions li { border-left: 2px solid #34686d; padding-left: 14px; }
.session-inclusions > p { max-width: 720px; color: var(--text-secondary); font-size: 15px; margin-bottom: 0; }
.booking-note { margin: 32px 0 0; padding-top: 22px; border-top: 1px solid var(--border-muted); color: var(--text-muted); font-size: 13px; max-width: 780px; }

.after-lead { color: var(--text-secondary); max-width: 720px; font-size: 18px; }
.reading-keepsakes { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; margin: 38px 0 64px; align-items: center; }
.reading-keepsakes figure img { border-radius: 12px; border: 1px solid var(--border-muted); }
.reading-keepsakes figcaption { color: var(--text-muted); font-size: 12px; margin-top: 12px; }
.keepsake-tabs { display: flex; flex-wrap: wrap; gap: 12px; border-bottom: 1px solid var(--border-muted); margin-bottom: 26px; }
.keepsake-tabs button { min-height: 48px; padding: 12px 0; background: transparent; border: 0; border-bottom: 2px solid transparent; color: var(--text-muted); font-size: 13px; }
.keepsake-tabs button[aria-selected="true"] { color: var(--accent-cyan); border-bottom-color: var(--accent-cyan); }
#keepsake-panel { min-height: 165px; }
#keepsake-panel h3 { font-size: 27px; }
#keepsake-panel p,.continuing-story { color: var(--text-secondary); font-size: 16px; }
.continuing-story { border-top: 1px solid var(--border-muted); padding-top: 22px; margin: 0; font-size: 14px; }
.quote-pair { display: grid; grid-template-columns: 1fr 1fr; column-gap: 100px; row-gap: 40px; margin-top: 36px; }
.quote-pair figure { padding: 24px 0 0; border-top: 1px solid var(--border-muted); }
.quote-pair blockquote { margin: 0 0 23px; font-size: 25px; line-height: 1.4; letter-spacing: -.025em; }
.quote-pair blockquote p { margin: 0 0 12px; }
.quote-pair .second-quote { font-size: 18px; letter-spacing: 0; color: var(--text-secondary); }
.quote-pair figcaption { font-size: 14px; font-weight: 650; }
.faq { display: grid; grid-template-columns: .8fr 1.2fr; gap: 100px; padding-top: 0; }
.faq h2 { max-width: 330px; }
.faq details { border-bottom: 1px solid var(--border-muted); }
.faq details:first-child { border-top: 1px solid var(--border-muted); }
.faq summary { list-style: none; position: relative; padding: 21px 36px 21px 0; cursor: pointer; font-size: 16px; font-weight: 600; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; position: absolute; right: 6px; top: 16px; font-size: 23px; color: var(--accent-cyan); font-weight: 300; transition: transform var(--motion); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { color: var(--text-secondary); font-size: 15px; padding: 0 25px 10px 0; animation: arrive var(--motion); }
.faq .faq-body p { animation: none; }
.faq .faq-body strong { color: #e7dfef; font-weight: 650; }
.faq details a { color: var(--accent-cyan); text-decoration: underline; text-underline-offset: 4px; }
.closing { position: relative; isolation: isolate; padding-block: 84px; text-align: center; overflow: hidden; border-block: 1px solid var(--border-muted); }
.closing > img { position: absolute; inset: 0; z-index: -2; height: 100%; width: 100%; object-fit: cover; object-position: center 62%; opacity: .43; }
.closing::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg,#08080ce8,#08080c60,#08080cda); }
.closing h2 { font-size: clamp(38px,4vw,56px); }
.closing p { color: #e0d6e9; margin-bottom: 26px; }
.footer { display: flex; gap: 20px; align-items: center; padding-block: 34px; font-size: 14px; }
.footer > img { width: 43px; }
.footer > span { font-weight: 650; }
.footer small { display: block; font-weight: 400; font-size: 12px; color: var(--text-muted); margin-top: 3px; }
.footer nav { display: flex; gap: 24px; margin-left: auto; font-size: 13px; color: var(--text-secondary); }
.footer nav a { padding-block: 12px; }

dialog { border: 1px solid #654573; padding: 0; background: #13101c; color: var(--text-primary); max-width: min(590px,calc(100% - 32px)); max-height: calc(100svh - 40px); box-shadow: 0 30px 120px #000b; animation: arrive var(--motion); }
dialog::backdrop { background: #030308da; backdrop-filter: blur(6px); animation: backdrop-in var(--motion); }
.dialog-inner { padding: 50px 40px 40px; }
.dialog-inner h2 { font-size: 34px; }
.dialog-inner p { font-size: 16px; color: var(--text-secondary); }
.dialog-inner .selected-session { color: #efd5fb; border-bottom: 1px solid var(--border-muted); padding-bottom: 20px; }
.dialog-inner .fine-print { font-size: 13px; }
.close-dialog { position: absolute; right: 10px; top: 6px; z-index: 2; width: 44px; height: 44px; border: 0; background: #18121fe8; font-size: 30px; }
.close-dialog:hover { color: var(--accent-cyan); }
#image-dialog { width: min(1400px,calc(100% - 24px)); max-width: none; background: #090c12; }
#image-dialog img { width: 100%; max-height: calc(100svh - 100px); object-fit: contain; }
#image-dialog > p { padding: 12px 20px; margin: 0; font-size: 13px; color: var(--text-secondary); }
body.dialog-open { overflow: hidden; }
dialog.is-closing,dialog.is-closing::backdrop { animation: backdrop-out 180ms ease-in forwards; }
@keyframes arrive { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes backdrop-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes backdrop-out { to { opacity: 0; } }
@keyframes ray-shimmer { from { background-position: 0% 15%; opacity: .14; } to { background-position: 35% 30%; opacity: .32; } }
@keyframes dust-float { 0% { opacity: .32; transform: translate(0,12px); } 50% { opacity: .78; } 100% { opacity: .43; transform: translate(-12px,-23px); } }
.motion-paused *, .motion-paused *::before, .motion-paused *::after { animation-play-state: paused !important; transition: none !important; }
.motion-toggle,.keepsake-tabs,.gallery-nav,.zoom-label,.session-option [data-book] { display: none; }
.enhanced .motion-toggle { display: block; }
.enhanced .keepsake-tabs,.enhanced .gallery-nav { display: flex; }
.enhanced .zoom-label { display: inline; }
.enhanced .session-option [data-book] { display: inline-flex; }

@media (min-width:1500px) {
  .tarot-hero { min-height: 780px; }
}
@media (max-width:1000px) {
  .experience-intro,.deck-layout,.stan,.vera-intro,.sessions-heading,.quote-pair,.faq { gap: 48px; }
  .hero-copy > * { max-width: 450px; }
  .tarot-hero h1 { max-width: 490px; }
  .hero-veil { background: linear-gradient(90deg,#07070cf5,#07070cb8 45%,#07070c18 80%),linear-gradient(0deg,#07070c,transparent 30%); }
  .deck-art { min-height: 450px; }
  .fool-art { height: 420px; margin-left: 12px; }
  .back-art { width: 240px; right: -5px; }
  .session-option { padding-right: 30px; }
  .session-option + .session-option { padding-left: 30px; }
  .session-option h3 { font-size: 25px; }
  .session-price span { display: block; margin: 12px 0 0; }
  .footer { flex-wrap: wrap; }
}
@media (max-width:900px) {
  .tarot-hero { flex-direction: column; min-height: 0; background: #100d17; }
  .hero-art { position: relative; inset: auto; width: 100%; height: 390px; z-index: 0; }
  .hero-art img { object-position: center top; }
  .hero-veil { inset: 0 0 auto; height: 395px; z-index: 1; background: linear-gradient(0deg,#100d17,transparent 30%); pointer-events: none; }
  .hero-effects { height: 390px; z-index: 1; }
  .hero-copy { z-index: 2; padding-block: 24px 40px; }
  .hero-copy > * { max-width: 620px; }
  .tarot-hero h1 { max-width: 680px; font-size: 48px; }
  .experience-intro { grid-template-columns: 1fr; gap: 24px; }
  .experience-intro h2 { max-width: 600px; }
  .runtime-frame figcaption { gap: 28px; }
  .deck-layout { grid-template-columns: .9fr 1.1fr; gap: 35px; }
  .stan { grid-template-columns: .72fr 1fr; gap: 40px; align-items: start; }
  .stan-photo img,.vera-portrait img { aspect-ratio: 4/4.55; }
  .vera-intro { gap: 40px; align-items: start; }
  .reading-keepsakes { gap: 35px; }
  .session-price { font-size: 48px; }
  .faq { grid-template-columns: .7fr 1.3fr; gap: 40px; }
}
@media (max-width:700px) {
  body { font-size: 16px; }
  .wrap { width: calc(100% - 40px); }
  .section { padding-block: 64px; }
  h2 { font-size: 34px; }
  .topbar { height: 84px; }
  .logo { width: 145px; }
  .topbar nav a:not(.nav-offer) { display: none; }
  .topbar nav { font-size: 12px; }
  .hero-art { height: clamp(280px,68vw,470px); }
  .hero-veil { height: clamp(285px,68vw,475px); }
  .hero-effects { height: clamp(280px,68vw,470px); }
  .ray-stan-left { left: 17.6%; width: 20%; }
  .ray-stan-right { left: 50.5%; width: 7.5%; }
  .ray-vera-left { left: 54.1%; width: 8.75%; }
  .ray-vera-right { left: 78.6%; width: 20%; }
  .hero-effects i:nth-of-type(1),.hero-effects i:nth-of-type(6),.hero-effects i:nth-of-type(10) { left: 27%; }
  .hero-effects i:nth-of-type(2),.hero-effects i:nth-of-type(7),.hero-effects i:nth-of-type(11) { left: 52%; }
  .hero-effects i:nth-of-type(3),.hero-effects i:nth-of-type(8) { left: 57%; }
  .hero-effects i:nth-of-type(4),.hero-effects i:nth-of-type(5),.hero-effects i:nth-of-type(9),.hero-effects i:nth-of-type(12) { left: 88%; }
  .hero-effects i:nth-of-type(n+9) { display: none; }
  .hero-copy { padding-block: 10px 34px; }
  .eyebrow { font-size: 13px; margin-bottom: 18px; }
  .eyebrow span { font-size: 11px; }
  .tarot-hero h1 { font-size: 37px; max-width: 490px; margin-bottom: 23px; }
  .hero-lead { font-size: 16px; }
  .hero-note { font-size: 15px; margin-bottom: 22px; }
  .hero-copy .button { width: 100%; justify-content: center; }
  .hero-details { margin-top: 18px; }
  .pricing-label { text-align: center; }
  .hero-prices { justify-content: center; gap: 10px; font-size: 12px; }
  .welcome { text-align: center; font-size: 11px; }
  .motion-toggle { margin-inline: auto; }
  .experience-copy { font-size: 16px; }
  .gallery-nav { margin-top: 28px; gap: 0; }
  .gallery-nav button { flex: 1; padding: 12px 7px; font-size: 13px; }
  .zoom-label { top: 8px; right: 8px; padding: 5px 9px; font-size: 11px; }
  .runtime-frame figcaption { grid-template-columns: 1fr; gap: 12px; padding: 20px; font-size: 14px; }
  .capture-context { font-size: 12px; }
  .deck-layout,.stan,.sessions-heading,.quote-pair,.faq { grid-template-columns: 1fr; gap: 28px; }
  .deck-art { min-height: 430px; width: min(355px,calc(100% - 10px)); margin: 0 auto; }
  .fool-art { height: 410px; margin-left: 10px; }
  .back-art { width: 225px; right: 6px; bottom: 12px; }
  .deck-copy { font-size: 16px; }
  .deck-continuity { padding-top: 20px; margin-top: 22px; }
  .stan-photo { max-width: 340px; }
  .stan-photo img { aspect-ratio: 4/4.3; }
  .stan-copy { font-size: 16px; }
  .vera-intro { grid-template-columns: 1fr; gap: 28px; padding-bottom: 64px; align-items: start; }
  .vera-portrait { grid-row: 1; max-width: 340px; justify-self: start; }
  .vera-portrait img { aspect-ratio: 4/4.3; }
  .vera-copy { font-size: 16px; }
  .connection-field { opacity: .88; }
  .session-comparison { grid-template-columns: 1fr; margin-top: 30px; }
  .session-option { padding: 28px 0 32px; }
  .session-option + .session-option { padding: 30px 0 0; border-left: 0; border-top: 1px solid #535263; }
  .session-option h3 { font-size: 27px; }
  .session-price { font-size: 48px; margin-bottom: 22px; }
  .session-price span { display: inline-block; margin: 0 0 0 10px; font-size: 14px; }
  .session-description { padding-bottom: 6px; }
  .session-option .button { width: 100%; justify-content: space-between; }
  .session-inclusions ul { flex-direction: column; gap: 16px; }
  .session-inclusions h3 { font-size: 21px; }
  .booking-note { font-size: 12px; }
  .reading-keepsakes { grid-template-columns: 1fr; gap: 24px; margin: 28px 0 46px; }
  .after-lead { font-size: 16px; }
  #keepsake-panel { min-height: 168px; }
  .testimonials { padding-bottom: 52px; }
  .quote-pair { gap: 30px; }
  .quote-pair blockquote { font-size: 24px; }
  .faq { padding-top: 0; }
  .faq h2 { margin: 0; }
  .faq summary { font-size: 15px; padding-block: 20px; }
  .faq details p { font-size: 14px; }
  .closing { padding-block: 66px; }
  .closing h2 { font-size: 40px; }
  .closing p { font-size: 16px; }
  .footer { gap: 16px; padding-block: 30px; }
  .footer nav { width: 100%; margin: 0; gap: 25px; }
  .dialog-inner { padding: 48px 24px 28px; }
  .dialog-inner h2 { font-size: 31px; }
  .dialog-inner p { font-size: 15px; }
  .dialog-inner .button { width: 100%; font-size: 13px; }
}
@media (max-width:370px) {
  .draft-bar span { display: none; }
  .hero-art { height: 250px; }
  .hero-veil { height: 255px; }
  .hero-effects { height: 250px; }
  .tarot-hero h1 { font-size: 34px; }
  .hero-prices { gap: 8px; font-size: 11px; }
  .deck-art { min-height: 385px; }
  .fool-art { height: 365px; }
  .back-art { width: 200px; }
  .session-price span { display: block; margin: 12px 0 0; }
  .vera-intro { grid-template-columns: 1fr; }
  .vera-portrait { width: 100%; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior: auto; }
  *,*::before,*::after { animation: none !important; transition: none !important; }
  .contour-layer { display: none; }
}

/* Offer surfaces borrow the approved Codex Arcana hardware's dark stock,
   fine gold rim and restrained iridescent reflection. The room stays quiet. */
.session-comparison { gap: 30px; border: 0; background: none; }
.session-option,.session-option + .session-option { position: relative; isolation: isolate; overflow: hidden; padding: 34px; border: 1px solid #b49d6759; border-radius: 14px; background: linear-gradient(135deg,#1b1720,#0b0b12 57%,#15131c); box-shadow: inset 0 1px 0 #ffe7b71c,inset 1px 0 0 #fff4c808,0 3px 0 #06060a,0 4px 0 #8270445c,0 16px 35px #0005; --card-x: 50%; --card-y: 35%; }
.session-option::before { content: ''; position: absolute; inset: 5px; border: 1px solid #a5905629; border-radius: 9px; pointer-events: none; z-index: 2; }
.session-option::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0; opacity: .12; background: radial-gradient(ellipse 380px 270px at var(--card-x) var(--card-y),#e6cc991b,transparent 68%),conic-gradient(from 80deg at var(--card-x) var(--card-y),#96d8f20d,#cc84e512,#e7afbe0c,#e5c58513,#8ee0dc12,#a38aea12,#96d8f20d); transition: opacity 450ms ease; }
.session-option > * { position: relative; z-index: 1; }
.session-option:hover::after,.session-option:focus-within::after,.session-option.is-surface-active::after { opacity: .74; }
.session-option:hover,.session-option:focus-within { border-color: #c6ae7d80; }
.motion-paused .session-option::after { opacity: .16 !important; }
@media (max-width:1000px) { .session-option,.session-option + .session-option { padding: 30px 26px; } .session-comparison { gap: 24px; } }
@media (max-width:700px) { .session-comparison { gap: 26px; } .session-option,.session-option + .session-option { padding: 28px 24px; border: 1px solid #b49d6759; } .session-option .button { justify-content: center; } }
@media (max-width:370px) { .session-option,.session-option + .session-option { padding: 26px 20px; } .session-option h3 { font-size: 24px; } }

/* Invitation and reading sequence: open editorial space in the existing site palette. */
/* Artwork windows: finite discovery, then a quiet illustration beside the words. */
.story-window { position:relative; height:280px; margin:0 -12px 22px; overflow:hidden; pointer-events:none; isolation:isolate; mask-image:radial-gradient(ellipse 60% 58% at 50% 45%,#000 38%,#000d 58%,transparent 86%); -webkit-mask-image:radial-gradient(ellipse 60% 58% at 50% 45%,#000 38%,#000d 58%,transparent 86%); }
.story-window__image,.story-window__echo { display:block; width:100%; height:100%; object-fit:cover; object-position:50% 20%; opacity:.84; transform:scale(1.03); transition:opacity 800ms ease,transform 1200ms ease; }
.story-window--alignment .story-window__image,.story-window--alignment .story-window__echo { object-position:50% 14%; }
.story-window--opening .story-window__image { object-position:50% 18%; }
.story-window__echo { position:absolute; inset:0; opacity:0; }
.story-window__light { position:absolute; inset:0; opacity:0; mix-blend-mode:screen; }
.story-window--reflection .story-window__light { background:radial-gradient(ellipse at center,transparent 30%,#c7eae66b 44%,transparent 60%); }
.story-window--opening .story-window__light { background:linear-gradient(90deg,transparent 15%,#ffdba275 48%,#fff0cc94 50%,#ffdba275 52%,transparent 85%); }
.story-window--table { height:360px; margin:32px -24px -24px; }
.story-window--table .story-window__image { object-position:50% 72%; }
.story-window--table .story-window__light { background:radial-gradient(ellipse at 38% 72%,#eeddbf69,transparent 50%); }
.story-window.is-revealed .story-window__image { animation:story-arrival 2200ms ease-out both; }
.story-window--crt:not(.is-revealed) .story-window__image { opacity:0; }
.story-window--crt.is-revealed .story-window__image { animation:story-fade-in 1000ms ease-out both; }
.story-window--crt .story-window__light { background:radial-gradient(ellipse at center,transparent 30%,#c7eae66b 44%,transparent 60%); }
.story-window--table.is-revealed .story-window__light { animation:story-table-light 2800ms ease-out both; }
@keyframes story-arrival { from { opacity:.58; transform:scale(1.07); } to { opacity:.84; transform:scale(1.03); } }
@keyframes story-fade-in { from { opacity:0; } to { opacity:.84; } }
@keyframes story-table-light { 0% { opacity:0; transform:translateX(-12%); } 45% { opacity:.45; } 100% { opacity:0; transform:translateX(8%); } }
@media(hover:hover) and (pointer:fine) {
 .invitation-paths > div:hover .story-window__image { opacity:.98; transform:scale(1.045); }
 .invitation-paths > div:hover .story-window.is-revealed .story-window__image { animation-fill-mode:none; }
}
.motion-paused .story-window * { animation:none!important; transition:none!important; }
@media(prefers-reduced-motion:reduce) { .story-window * { animation:none!important; transition:none!important; }.story-window__light,.story-window__echo { display:none; } }
@media(max-width:800px) { .story-window { height:260px; margin-inline:0; }.story-window--table { height:270px; margin:24px -12px -20px; }.story-window--table .story-window__image { object-position:35% 72%; } }
/* Invitation's CRT scenes are one composited image/text signal. Low modulation, no hard flashes. */
.invitation-sky { position:relative; isolation:isolate; overflow:clip; }
.invitation-sky__canvas { position:absolute; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; }
.invitation-sky > section { position:relative; z-index:1; }
.quote-pair figcaption { display:flex; align-items:center; flex-wrap:wrap; gap:6px 14px; }
.quote-pair .quote-stars { display:inline-block; flex-shrink:0; }
.story-signal-filters { position:absolute; overflow:hidden; pointer-events:none; }
.story-window__signal { position:relative; width:100%; height:100%; --signal-brightness:1; --signal-scan-y:0px; }
.story-window--crt.signal-running .story-window__signal { filter:var(--signal-filter) brightness(var(--signal-brightness)); }
.story-window--crt .story-window__signal::after { content:''; position:absolute; inset:0; z-index:3; pointer-events:none; opacity:.08; background:repeating-linear-gradient(to bottom,transparent 0 2px,#05060a 2px 3px,transparent 3px 4px); background-position:0 var(--signal-scan-y); }
.story-window__example { position:absolute; z-index:2; inset:35% 10% 10%; display:flex; align-items:center; justify-content:center; padding:20px 8px; text-align:center; color:var(--text-primary); font-size:clamp(17px,1.5vw,21px); line-height:1.35; font-weight:600; text-wrap:balance; opacity:0; text-shadow:0 2px 5px #000,0 0 14px #000; background:radial-gradient(ellipse,#090a12bd,transparent 72%); }
.motion-paused .story-window--crt .story-window__signal { filter:none; }
.motion-paused .story-window__example { opacity:1!important; }
@media(prefers-reduced-motion:reduce) { .story-window--crt .story-window__signal { filter:none!important; }.story-window__example { opacity:1!important; }.story-window--crt .story-window__signal::after { display:none; } }
@media(max-width:800px) { .story-window__example { font-size:19px; } }
.story-window--crt { display:block; width:calc(100% + 24px); padding:0; border:0; background:none; color:inherit; font:inherit; cursor:pointer; pointer-events:auto; overflow:visible; mask-image:none; -webkit-mask-image:none; touch-action:manipulation; }
.story-window--crt .story-window__signal { overflow:hidden; mask-image:radial-gradient(ellipse 60% 58% at 50% 45%,#000 38%,#000d 58%,transparent 86%); -webkit-mask-image:radial-gradient(ellipse 60% 58% at 50% 45%,#000 38%,#000d 58%,transparent 86%); }
.story-window--crt:focus-visible { outline:1px solid var(--accent-cyan,#8eeae0); outline-offset:4px; border-radius:28px; }
.story-window--crt { -webkit-tap-highlight-color:transparent; -webkit-user-select:none; user-select:none; }
.story-window--crt:focus:not(:focus-visible) { outline:none; }
.story-window__roulette { position:absolute; z-index:2; text-align:center; color:var(--text-primary); font-size:14px; line-height:1.35; text-wrap:balance; text-shadow:0 2px 4px #000,0 0 10px #000; opacity:0; pointer-events:none; }
.story-window__ripple { position:absolute; left:-70px; top:-70px; width:calc(100% + 140px); height:calc(100% + 140px); pointer-events:none; z-index:4; }
.story-window__announcement { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.motion-paused .story-window__ripple,.motion-paused .story-window__roulette { display:none; }
@media(prefers-reduced-motion:reduce) { .story-window__ripple,.story-window__roulette { display:none; } }
@media(max-width:800px) { .story-window--crt { width:100%; }.story-window__roulette { font-size:13px; } }
.reading-invitation { padding-bottom: 16px; }
.reading-invitation > h2 { max-width: 650px; }
.invitation-paths { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 40px; margin-top: 36px; }
.invitation-paths > div { border-top: 1px solid #bba7d43b; padding-top: 22px; }
.invitation-paths h3,.reading-steps h3 { font-size: 21px; line-height: 1.35; margin: 0 0 12px; }
.invitation-paths p,.reading-steps p { color: var(--text-secondary); font-size: 16px; margin: 0; }
.early-voices { margin-top: 44px; }
.early-voices .quote-pair { margin-bottom: 24px; }
.reading-steps { list-style: none; padding: 0; margin: 0; }
.reading-steps li { margin-bottom: 28px; }
.reading-steps li:last-child { margin-bottom: 0; }
.closing .wrap > p { max-width: 620px; margin-inline: auto; }
@media (max-width:800px) {
  .invitation-paths { grid-template-columns: 1fr; gap: 24px; }
  .invitation-paths > div { padding-top: 18px; }
  .reading-invitation { padding-bottom: 0; }
  .early-voices { margin-top: 28px; }
}

.voices-section .quote-wide { grid-column:1 / -1; }
.voices-section .quote-wide blockquote { max-width:920px; }

/* A single continuous room sits behind a complete transparent foreground.
   Copy and people stay together in the center at every desktop width.
   Phone/tablet art and layout below 1200px remain unchanged. */
@media (min-width:1200px) {
  .tarot-hero {
    --hero-stage-width: min(100%,2000px);
    min-height: 820px;
  }
  .tarot-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -3;
    background: linear-gradient(rgba(7,7,12,.24),rgba(7,7,12,.24)),url("assets/dojo-continuous-room.webp") center 42%/cover no-repeat;
  }
  .hero-art,.hero-effects {
    width: var(--hero-stage-width);
    left: calc(50% + 120px);
    right: auto;
    transform: translateX(-50%);
  }
  .hero-copy.wrap,.topbar.wrap { width: min(1160px,calc(100% - 96px)); }
  .hero-copy { padding-block: 64px; }
  .hero-copy > * { max-width: 460px; }
  .tarot-hero h1 {
    max-width: 500px;
    font-size: clamp(52px,3.6vw,64px);
    text-wrap: balance;
  }
  .hero-lead { font-size: 18px; }
  .hero-note { font-size: 16px; }
  .hero-veil {
    width: auto;
    left: 0;
    right: 0;
    transform: none;
    background: radial-gradient(ellipse 650px 650px at calc(50% - 360px) 45%,rgba(7,7,12,.94),rgba(7,7,12,.76) 57%,transparent 100%),linear-gradient(0deg,rgba(7,7,12,.72),transparent 23%);
  }
  .god-ray { left: 33%; }
  .ray-stan-right { left: 57%; }
  .ray-vera-left { left: 60%; }
  .ray-vera-right { left: 76%; }
  .hero-effects i:nth-of-type(3n + 1) { left: 41%; }
  .hero-effects i:nth-of-type(3n + 2) { left: 64%; }
  .hero-effects i:nth-of-type(3n) { left: 85%; }
}

/* A bounded viewport field gives the unused room on every screen a living sky. */
body { isolation: isolate; }
.page-sky { position: fixed; inset: -160px 0; z-index: -1; pointer-events: none; overflow: hidden; }
.page-sky canvas { display: block; width: 100%; height: 100%; will-change: transform; }

/* Mobile reading stops keep session choices within easy reach. */
.mobile-session-action { display: none; }
@media (max-width:700px) {
  .mobile-session-action { display: flex; justify-content: center; margin-block: 32px 0; }
  .mobile-session-action .button { justify-content: center; }
  .footer .newsletter-form button[type="submit"] { justify-self: center; }
}