/* My Vedic Kundali: ivory and gold theme */
:root {
  --bg: #ece6dc; --bg2: #e3dcd0; --ink: #2a241d; --muted: #6e655a; --gold: #b08633; --gold-hi: #e2c27a; --gold-deep: #8a6420;
  --navy: #1e2d5a; --line: rgba(60,45,25,.14); --card: rgba(255,253,248,.72); --card2: rgba(255,253,248,.9);
  --err: #b3261e; --ok: #2e7d5b; --shadow: 0 24px 60px rgba(70,50,20,.14);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; color-scheme: light; }
body { margin: 0; font: 16px/1.6 Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--ink); overflow-x: clip;
  background: linear-gradient(180deg, #b7a996 0, #c9bcab 520px, #ddd4c7 1100px, #e9e3d9 1700px) no-repeat, #e9e3d9; }
#stars { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
a { color: var(--gold-deep); }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 16px; }
.serif { font-family: "Cormorant Garamond", Georgia, serif; }

/* header */
.top { position: sticky; top: 0; z-index: 20; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  background: rgba(190,176,160,.55); border-bottom: 1px solid rgba(60,45,25,.12); }
.topin { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.brand { display: inline-flex; align-items: center; gap: 10px; padding: 16px 0; color: var(--ink); text-decoration: none; white-space: nowrap;
  font: 600 17px "Cormorant Garamond", Georgia, serif; letter-spacing: 3.5px; text-transform: uppercase; }
.logo { color: var(--gold); font-size: 18px; }
.topnav { display: flex; align-items: center; gap: 26px; font-size: 11.5px; letter-spacing: 2px; text-transform: uppercase; }
.topnav a:not(.btn) { color: #4b4237; text-decoration: none; } .topnav a:not(.btn):hover { color: var(--ink); }
@media (max-width: 760px) { .topnav a:not(.btn) { display: none; } .brand { font-size: 14px; letter-spacing: 2.4px; } }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; border: 0; border-radius: 999px; padding: 15px 30px;
  font: 600 13.5px Inter, sans-serif; letter-spacing: 1.8px; text-transform: uppercase; color: #fffaf0; text-decoration: none; cursor: pointer;
  background: linear-gradient(135deg, #c99a3e, #a77a2b 55%, #8f6420); box-shadow: 0 10px 28px rgba(140,100,30,.32), inset 0 1px 0 rgba(255,255,255,.35);
  transition: transform .2s ease, box-shadow .2s ease; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(140,100,30,.42), inset 0 1px 0 rgba(255,255,255,.35); }
.btn:disabled { opacity: .6; cursor: wait; transform: none; }
.btn .pl { font-weight: 700; letter-spacing: .5px; }
.btn.sm { padding: 9px 18px; font-size: 11px; box-shadow: none; }
.btn.wide { width: 100%; margin-top: 10px; padding: 17px; font-size: 14px; }
.btn.ghost { background: transparent; color: var(--gold-deep); border: 1px solid rgba(176,134,51,.55); box-shadow: none; }
.btn.ghost:hover { background: rgba(176,134,51,.08); }
.glow { position: relative; overflow: hidden; }
.glow::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.45) 50%, transparent 70%);
  transform: translateX(-120%); animation: shine 3.6s ease-in-out infinite; }
@keyframes shine { 60%, 100% { transform: translateX(120%); } }
.link { display: inline-block; margin-top: 14px; color: #4b4237; font-size: 14px; }
.link:hover { color: var(--gold-deep); }

/* hero: one large golden armillary sphere, headline bottom left */
.hero { position: relative; min-height: calc(100svh - 58px); display: flex; align-items: flex-end; padding: 0 0 7vh; }
.hero-art { position: absolute; z-index: 0; top: 0; bottom: 0; left: calc(50% - 50vw); width: 100vw; }
.sage { position: absolute; inset: 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent 100%); mask-image: linear-gradient(180deg, #000 70%, transparent 100%); }
.sage { will-change: transform; }
.sage img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 60% 22%;
  animation: sagein 1.6s cubic-bezier(.2,.8,.2,1) both; }
@keyframes sagein { from { opacity: 0; filter: blur(6px); } }
.orbglow { position: absolute; z-index: 1; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none; mix-blend-mode: screen;
  background: radial-gradient(circle, rgba(255,252,240,.95) 0, rgba(255,226,160,.5) 30%, rgba(255,200,120,.15) 55%, transparent 70%);
  animation: orbpulse 3.4s ease-in-out infinite; }
.orbglow::before, .orbglow::after { content: ""; position: absolute; inset: -38%; border-radius: 50%; border: 1.5px dotted rgba(255,236,190,.85);
  animation: spin 14s linear infinite; }
.orbglow::after { inset: -56%; border: 1px dashed rgba(255,226,170,.5); animation-duration: 26s; animation-direction: reverse; }
@keyframes orbpulse { 50% { opacity: .55; transform: translate(-50%, -50%) scale(1.18); } }
.hero-copy { position: relative; z-index: 2; max-width: 600px; }
.eyebrow { margin: 0 0 14px; color: #6e4c14; font-size: 11.5px; letter-spacing: 3px; text-transform: uppercase; }
.hero h1 { margin: 0 0 14px; font: 500 clamp(40px, 5.6vw, 76px)/1.02 "Cormorant Garamond", Georgia, serif; letter-spacing: -.5px; color: #2e261e; }
.hero h1 em { font-style: italic; color: #7a5518; }
.lead { max-width: 440px; margin: 0 0 24px; color: #4b4237; font-size: 15.5px; }
.buy { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.buy small { color: #4b4237; font-size: 12.5px; line-height: 1.4; }
.cover3d { position: absolute; z-index: 1; left: max(16px, calc(50vw - 560px)); top: 9%; width: 150px; margin: 0; border-radius: 8px; overflow: hidden;
  box-shadow: 0 30px 60px rgba(60,40,10,.3), 0 0 0 1px rgba(176,134,51,.45);
  transform: perspective(900px) rotateY(18deg) rotateX(5deg); animation: coverfloat 7s ease-in-out infinite; }
.cover3d img { display: block; width: 100%; height: auto; }
.cover3d::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.5) 45%, transparent 60%);
  transform: translateX(-120%); animation: sheen 5s ease-in-out infinite 1.5s; }
.cover3d figcaption { position: absolute; left: 50%; bottom: 7px; transform: translateX(-50%); padding: 3px 10px; border-radius: 999px; white-space: nowrap;
  font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: #fffaf0; background: linear-gradient(135deg, #c99a3e, #8f6420); }
@keyframes coverfloat { 50% { transform: perspective(900px) rotateY(12deg) rotateX(3deg) translateY(-14px); } }
@keyframes sheen { 0%, 60% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
@media (max-width: 900px) {
  .hero { display: block; min-height: 0; padding: 0 0 26px; text-align: center; }
  .hero-art { position: relative; left: auto; height: min(102vw, 64svh); width: 100vw; margin: 0 calc(50% - 50vw); }
  .hero-copy { max-width: none; margin-top: -10px; }
  .hero h1 { font-size: clamp(36px, 10vw, 48px); }
  .lead { margin: 14px auto 0; font-size: 14.5px; } .buy { justify-content: center; flex-direction: column; gap: 8px; }
  .cover3d { width: 22%; left: 5%; top: auto; bottom: 14%; border-radius: 5px; } .cover3d figcaption { font-size: 7.5px; padding: 2px 6px; bottom: 4px; }
  .hero-copy { display: flex; flex-direction: column; align-items: center; }
  .hero-copy .eyebrow { order: 1; margin-bottom: 8px; } .hero-copy h1 { order: 2; } .hero-copy .buy { order: 3; }
  .hero-copy .link { order: 4; margin-top: 10px; } .hero-copy .lead { order: 5; }
}

/* stats */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 40px 0 80px; }
.stats > div { padding: 22px 16px; text-align: center; border-radius: 18px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); }
.stats b { display: block; font: 600 clamp(38px, 4vw, 52px)/1 "Cormorant Garamond", Georgia, serif; color: var(--gold-deep); }
.stats span { color: var(--muted); font-size: 13px; letter-spacing: .3px; }
@media (max-width: 700px) { .stats { grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 26px 0 56px; } }

/* sections */
.sec { text-align: center; margin: 0 0 26px; font: 500 clamp(32px, 4.4vw, 48px)/1.1 "Cormorant Garamond", Georgia, serif; color: #3a3128; }
.sub { text-align: center; color: var(--muted); margin: -12px auto 10px; max-width: 560px; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 30px 0 90px; }
.step { position: relative; padding: 22px 22px 18px 76px; border-radius: 18px; background: var(--card); border: 1px solid var(--line); }
.step > span { position: absolute; left: 20px; top: 20px; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%;
  font: 600 20px "Cormorant Garamond", serif; color: #fffaf0; background: linear-gradient(135deg, #c99a3e, #8f6420); }
.step h3 { margin: 0 0 4px; font-size: 16px; } .step p { margin: 0; color: var(--muted); font-size: 14.5px; }
.step p .pl { color: var(--ink); font-weight: 600; }
@media (max-width: 760px) { .steps { grid-template-columns: 1fr; margin-bottom: 60px; } }
.inside { margin-bottom: 90px; }
.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; perspective: 900px; }
.features > div { padding: 24px; border-radius: 18px; background: var(--card); border: 1px solid var(--line);
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; transform-style: preserve-3d; }
.features > div:hover { border-color: rgba(176,134,51,.55); box-shadow: var(--shadow); }
.features i { display: inline-grid; place-items: center; width: 46px; height: 46px; margin-bottom: 12px; border-radius: 50%; font-style: normal;
  font-size: 20px; color: var(--gold-deep); background: rgba(176,134,51,.08); border: 1px solid rgba(176,134,51,.4); }
.features h3 { margin: 0 0 6px; font: 600 21px "Cormorant Garamond", Georgia, serif; }
.features p { margin: 0; color: var(--muted); font-size: 14.5px; }

/* look inside: turning ring of real pages */
.look { margin: 0 0 90px; scroll-margin-top: 80px; }
.carousel { position: relative; height: 430px; perspective: 1400px; touch-action: pan-y; cursor: grab; user-select: none; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.carousel.drag { cursor: grabbing; }
.ring3d { --r: 430px; --a: 0deg; position: absolute; left: 50%; top: 40px; width: 250px; height: 354px; margin-left: -125px;
  transform-style: preserve-3d; transform: translateZ(calc(-1 * var(--r))) rotateY(var(--a)); }
.ring3d figure { position: absolute; inset: 0; margin: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 6px; overflow: hidden;
  background: #fff8ec; transform: rotateY(calc(var(--i) * 45deg)) translateZ(var(--r)); box-shadow: 0 20px 44px rgba(60,40,10,.25), 0 0 0 1px rgba(176,134,51,.35); }
.ring3d img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.ring3d figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 10px 9px; font-size: 13px; font-weight: 600; text-align: center;
  color: #fff; background: linear-gradient(transparent, rgba(40,28,10,.85)); }
@media (max-width: 700px) {
  .carousel { height: 310px; }
  .ring3d { --r: 260px; width: 180px; height: 255px; margin-left: -90px; top: 30px; }
}
.lb { max-width: min(760px, 94vw); max-height: 92vh; padding: 0; border: 0; border-radius: 10px; background: #fff; overflow: auto; }
.lb::backdrop { background: rgba(30,22,10,.7); backdrop-filter: blur(4px); }
.lb img { display: block; width: 100%; height: auto; }
.lb form { position: sticky; bottom: 0; margin: 0; text-align: right; }
.lbx { position: fixed; top: 14px; right: 18px; width: 44px; height: 44px; border: 0; border-radius: 50%; font-size: 28px; line-height: 1;
  color: #fff; background: var(--gold); cursor: pointer; }

/* cards and forms */
.card { margin: 24px 0 40px; padding: 30px; border-radius: 22px; background: var(--card2); border: 1px solid var(--line); box-shadow: var(--shadow); }
.card h2 { margin: 0; font: 500 34px "Cormorant Garamond", Georgia, serif; }
.order { max-width: 760px; margin: 0 auto 90px; scroll-margin-top: 80px; }
#inside { scroll-margin-top: 80px; }
.orderhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.pricechip { margin: 0; padding: 6px 14px; border-radius: 999px; background: rgba(176,134,51,.08); border: 1px solid rgba(176,134,51,.4);
  color: var(--muted); font-size: 14px; } .pricechip .pl { color: var(--gold-deep); font-weight: 700; }
.center { text-align: center; }
form label { display: block; margin: 14px 0; font-weight: 500; font-size: 14px; color: var(--muted); }
form input:not([type=checkbox]), form select { display: block; width: 100%; margin-top: 6px; padding: 13px 14px; font: inherit; font-size: 16px; color: var(--ink);
  border: 1px solid rgba(60,45,25,.2); border-radius: 12px; background: #fffdf8; transition: border-color .2s, box-shadow .2s; }
form input:focus, form select:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(176,134,51,.18); }
form input::placeholder { color: #a39a8c; }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .row { grid-template-columns: 1fr; gap: 0; } .card { padding: 22px 16px; } }
.chk { font-weight: 400 !important; display: flex !important; gap: 10px; align-items: flex-start; color: var(--ink) !important; }
.chk input { margin-top: 4px; width: 18px; height: 18px; accent-color: var(--gold); flex: none; }
.checks { display: flex; gap: 24px; flex-wrap: wrap; }
.place { position: relative; }
.sugg { position: absolute; z-index: 5; left: 0; right: 0; top: 100%; margin: 4px 0 0; padding: 4px; list-style: none; background: #fffdf8;
  border: 1px solid rgba(60,45,25,.18); border-radius: 12px; max-height: 280px; overflow-y: auto; box-shadow: 0 16px 40px rgba(60,40,10,.2); }
.sugg li { padding: 10px 12px; border-radius: 8px; color: var(--ink); font-weight: 400; cursor: pointer; }
.sugg li:hover { background: rgba(176,134,51,.1); } .sugg li.none { color: var(--muted); cursor: default; }
.sugg li.more { position: sticky; bottom: -4px; background: #f6efe1; color: var(--gold-deep); font-weight: 600; border-top: 1px solid var(--line); margin-top: 4px; }
.err { color: var(--err); } .notice { margin: 12px 0; padding: 10px 14px; border-radius: 12px; background: rgba(176,134,51,.1); border: 1px solid rgba(176,134,51,.35); }
.small { font-size: 13px; color: var(--muted); }
.events { margin: 8px 0 14px; padding: 12px 14px; border: 1px dashed rgba(60,45,25,.25); border-radius: 12px; }
.events summary { cursor: pointer; font-weight: 600; color: var(--ink); }
.promise { display: grid; gap: 8px; margin: 16px 0 0; padding: 14px 16px; list-style: none; border-radius: 14px;
  background: rgba(46,125,91,.06); border: 1px solid rgba(46,125,91,.25); font-size: 14px; color: var(--ink); }
.promise b { display: inline-block; width: 24px; }

/* faq */
.faq { max-width: 760px; margin: 0 auto 90px; }
.faq details { margin: 10px 0; padding: 16px 20px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); }
.faq summary { cursor: pointer; font-weight: 600; } .faq p { margin: 10px 0 0; color: var(--muted); }

/* sticky mobile buy bar */
.stickybuy { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 30; display: none; align-items: center; justify-content: space-between;
  padding: 12px 16px; border-radius: 16px; text-decoration: none; color: var(--ink); background: rgba(255,252,245,.94); border: 1px solid rgba(176,134,51,.45);
  box-shadow: 0 14px 40px rgba(60,40,10,.25); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  transform: translateY(140%); transition: transform .35s ease; }
.stickybuy b { color: var(--gold-deep); } .stickybuy em { font-style: normal; font-weight: 700; color: #fffaf0; padding: 8px 14px; border-radius: 999px;
  background: linear-gradient(135deg, #c99a3e, #8f6420); }
.stickybuy.show { transform: none; }
@media (max-width: 900px) { .stickybuy { display: flex; } }

/* scroll reveal */
.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity .9s ease, transform .9s cubic-bezier(.2,.8,.2,1); }
.js .reveal.in { opacity: 1; transform: none; }

/* other pages */
.spinner { width: 46px; height: 46px; margin: 14px auto; border: 4px solid rgba(60,45,25,.12); border-top-color: var(--gold); border-radius: 50%; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.policy { max-width: 820px; margin: 30px auto 60px; } .policy h3 { color: var(--gold-deep); } .policy li, .policy p { color: #4a4238; }
.foot { margin-top: 20px; padding: 26px 0 90px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); background: rgba(255,252,245,.4); }
.foot nav a { margin-right: 16px; color: var(--muted); } .foot nav a:hover { color: var(--gold-deep); }
@media (min-width: 901px) { .foot { padding-bottom: 26px; } }
.tablewrap { overflow-x: auto; } table.admin { border-collapse: collapse; font-size: 13px; width: 100%; }
table.admin td, table.admin th { border: 1px solid var(--line); padding: 6px 8px; text-align: left; white-space: nowrap; }
table.admin button { font: inherit; padding: 3px 8px; border-radius: 6px; border: 1px solid var(--line); background: #fffdf8; color: var(--ink); cursor: pointer; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .reveal { opacity: 1; transform: none; }
}

/* cinematic scroll: the hero is pinned, zooms into the orb, flashes, then flies through the nine grahas */
.cine { position: relative; height: 100svh; width: 100vw; margin-left: calc(50% - 50vw); }
.stage { position: relative; height: 100svh; overflow: hidden; }
.stage .hero { position: absolute; inset: 0; left: 50%; width: min(1180px, 100%); transform: translateX(-50%); min-height: 0; padding: 0 16px 7vh; }
.sage { transform-origin: 50% 30%; }
.flash { position: absolute; inset: 0; z-index: 5; opacity: 0; pointer-events: none;
  background: radial-gradient(circle at var(--fx, 50%) var(--fy, 40%), #fffef8 0, #fff1cf 35%, #f1d697 75%, #d9b46a 100%); }
.space { position: absolute; inset: 0; z-index: 4; opacity: 0; pointer-events: none; background: #04050f; }
.space canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.labels { position: absolute; inset: 0; }
.pl3 { position: absolute; left: 0; top: 0; text-align: center; white-space: nowrap; pointer-events: none; opacity: 0; will-change: transform, opacity;
  text-shadow: 0 2px 18px rgba(0,0,0,.7); }
.pl3 b { display: block; font: 500 clamp(30px, 4.4vw, 52px)/1 "Cormorant Garamond", Georgia, serif; color: #f6d892; letter-spacing: .5px; }
.pl3 span { display: block; margin-top: 6px; font-size: 11.5px; letter-spacing: 3px; text-transform: uppercase; color: #d9dcff; }
.pl3 em { display: block; margin-top: 6px; font-style: normal; font-size: 14px; color: rgba(255,255,255,.82); }
.pl3.mini b { font-size: clamp(16px, 1.7vw, 22px); } .pl3.mini span { font-size: 9px; letter-spacing: 2px; margin-top: 2px; } .pl3.mini em { display: none; }
.chapter { position: absolute; z-index: 6; left: 0; right: 0; top: 18vh; padding: 0 20px; text-align: center; opacity: 0; pointer-events: none;
  font: 500 clamp(30px, 4.6vw, 58px)/1.1 "Cormorant Garamond", Georgia, serif; color: #fff7e6; text-shadow: 0 4px 30px rgba(0,0,0,.6); }
.chapter em { color: #f3cf7c; }
.finale { position: absolute; z-index: 6; left: 50%; bottom: 8vh; width: min(760px, 92vw); transform: translateX(-50%); text-align: center; opacity: 0; pointer-events: none; }
.finale.on { pointer-events: auto; }
.finale .eyebrow { color: #e9c77a; }
.finale h2 { margin: 0 0 22px; font: 500 clamp(30px, 4.4vw, 54px)/1.08 "Cormorant Garamond", Georgia, serif; color: #fff8ea; text-shadow: 0 4px 30px rgba(0,0,0,.6); }
.finale h2 em { color: #f3cf7c; }
.cue { position: absolute; z-index: 7; right: 16px; bottom: 16px; padding: 8px 14px; border-radius: 999px; cursor: pointer;
  font: 600 11px/1 inherit; letter-spacing: 2px; text-transform: uppercase; color: #4b4237; background: rgba(255,250,240,.55);
  border: 1px solid rgba(138,100,32,.35); backdrop-filter: blur(6px); }
.in-space .cue { color: #f3dfb0; background: rgba(10,8,20,.45); border-color: rgba(243,207,124,.35); }
/* without the effect (reduced motion or no WebGL) the hero is a normal section */
.cine.off { height: auto; width: auto; margin-left: 0; } .cine.off .stage { position: relative; height: auto; overflow: visible; }
.cine.off .stage .hero { position: relative; left: auto; width: auto; transform: none; min-height: calc(100svh - 58px); }
.cine.off .flash, .cine.off .space, .cine.off .chapter, .cine.off .cue { display: none; }
.finale { display: none; }
@media (max-width: 900px) {
  .cine:not(.off) .stage .hero { padding: 0 16px 22px; display: flex; align-items: flex-end; }
  .cine:not(.off) .hero-art { position: absolute; inset: 0; left: auto; width: 100%; height: 100%; margin: 0; }
  .cine:not(.off) .sage { -webkit-mask-image: none; mask-image: none; }
  .cine:not(.off) .sage img { object-position: 22% 18%; }
  .cine:not(.off) .hero-art::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 52%;
    background: linear-gradient(transparent, rgba(214,203,189,.9) 45%, #d6cbbd); }
  .cine:not(.off) .hero-copy { position: relative; z-index: 2; margin: 0; width: 100%; }
  .cine:not(.off) .hero-copy .lead { display: none; }
  .cine:not(.off) .hero-copy .buy small { display: none; }
  .cine:not(.off) .cover3d { left: 4%; top: 38%; bottom: auto; width: 20%; }
  .cue { bottom: auto; top: 54%; right: 12px; }
  .chapter { top: 14vh; }
}
.in-space .top { background: rgba(6,7,20,.45); border-bottom-color: rgba(255,255,255,.08); }
.in-space .brand, .in-space .topnav a:not(.btn) { color: #efe6d2; }
.in-space .stickybuy { transform: translateY(140%); }
/* the headline stays on screen during the journey, in light colours over the stars */
.cine.copy-top .stage .hero { z-index: 6; pointer-events: none; }
.cine.copy-top .hero-art { visibility: hidden; }
.cine.copy-top .hero-copy { pointer-events: auto; text-shadow: 0 2px 18px rgba(0,0,0,.7); }
.cine.copy-top .hero h1 { color: #fff8ea; } .cine.copy-top .hero h1 em { color: #f3cf7c; }
.cine.copy-top .eyebrow { color: #e9c77a; } .cine.copy-top .lead, .cine.copy-top .buy small { color: #e8dcc6; }
.cine.copy-top .hero-copy .link { color: #f3dfb0; }
.hero-copy, .hero h1, .hero h1 em, .eyebrow, .lead { transition: color .6s ease; }

/* brand logo (2026-10-10) */
.brand { padding: 8px 0; }
.brand-logo { display: block; height: 54px; width: auto; }
@media (max-width: 760px) { .brand-logo { height: 40px; } }
.in-space .brand-logo { filter: drop-shadow(0 0 1px rgba(255,244,220,.9)) drop-shadow(0 0 8px rgba(255,236,200,.45)); }

/* hero selling points (2026-10-10) */
.trust { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 16px 0 0; padding: 0; list-style: none; color: #4b4237; font-size: 13px; }
.trust li::before { content: "✓"; margin-right: 6px; color: var(--gold-deep); font-weight: 700; }
.cine.copy-top .trust { color: #e8dcc6; } .cine.copy-top .trust li::before { color: #f3cf7c; }
@media (max-width: 900px) {
  .hero h1 { font-size: clamp(30px, 8.4vw, 42px); line-height: 1.05; }
  .cine:not(.off) .hero-copy .eyebrow { font-size: 10.5px; letter-spacing: 2.2px; margin-bottom: 6px; }
  .cine:not(.off) .hero-copy .lead { display: block; order: 3; margin: 2px auto 14px; max-width: 34em; font-size: 14px; line-height: 1.45; color: #3f372d; }
  .cine:not(.off) .hero-copy .buy { order: 4; width: 100%; }
  .cine:not(.off) .hero-copy .buy .btn { width: 100%; max-width: 420px; justify-content: center; padding: 17px 20px; font-size: 15px; }
  .cine:not(.off) .hero-copy .trust { order: 5; justify-content: center; margin-top: 10px; font-size: 12.5px; }
  .cine:not(.off) .hero-copy .link { order: 6; margin-top: 8px; font-size: 13px; }
  .cine:not(.off) .stage .hero { padding-bottom: 16px; }
  .cine:not(.off) .hero-art::after { height: 62%; }
  .cine.copy-top .hero-copy .lead { color: #e8dcc6; }
}
.lead-short { display: none; }
@media (max-width: 900px) {
  .lead-long { display: none; } .lead-short { display: inline; }
  .hero h1 { font-size: clamp(26px, 7.3vw, 40px); }
  .cine:not(.off) .hero-copy .trust { flex-wrap: nowrap; gap: 12px; font-size: 12px; white-space: nowrap; }
  .cine:not(.off) .hero-copy .trust li::before { margin-right: 4px; }
  .cue { top: 12px; bottom: auto; right: 12px; }
  .cine:not(.off) .cover3d { top: 30%; width: 18%; }
}
@media (max-width: 900px) and (max-height: 760px) { .cine:not(.off) .hero-copy .link { display: none; } }
/* the hero fills the screen below the sticky header, so the buy button is never under the fold */
.cine:not(.off), .cine:not(.off) .stage { height: calc(100svh - var(--toph, 64px)); }
@media (min-width: 901px) {
  .hero h1 { font-size: clamp(36px, 3.8vw, 56px); }
  .hero-copy { max-width: 620px; }
  .hero-copy .buy small { display: none; }
}
/* bigger floating report (2026-10-10) */
.cover3d { width: 210px; } .cover3d figcaption { font-size: 11px; padding: 4px 12px; bottom: 9px; }
@media (max-width: 900px) {
  .cine:not(.off) .cover3d { top: 33%; width: 27%; }
  .cine:not(.off) .cover3d figcaption { font-size: 9px; padding: 3px 8px; bottom: 6px; }
}
/* the floating report sits beside the description, never over the headline (2026-10-10) */
.hero-copy .cover3d { left: 470px; top: auto; bottom: 0; width: 145px; }
.hero-copy .cover3d figcaption { font-size: 9.5px; padding: 3px 9px; bottom: 7px; }
@media (max-width: 1100px) and (min-width: 901px) { .hero-copy .cover3d { display: none; } }
@media (max-width: 900px) {
  .cine:not(.off) .hero-copy .cover3d, .hero-copy .cover3d { left: 4%; top: auto; bottom: calc(100% + 14px); width: 24%; max-width: 120px; }
  .hero-copy .cover3d figcaption { font-size: 8px; padding: 2px 6px; bottom: 5px; }
}