.checkout-notice {
  max-width: 650px;
  margin: 24px auto 0;
  padding: 24px 28px;
  background: rgba(255, 239, 178, .08);
  border: 1px solid var(--line);
  border-radius: 16px;
  text-align: center;
}
.checkout-notice span { font-size: 11px; letter-spacing: .13em; color: var(--gold); font-weight: 700; }
.checkout-notice h3 { font: 500 24px 'Playfair Display', serif; margin: 8px 0; }
.checkout-notice p { margin: 0; color: var(--dim); font-size: 14px; }
.chakra-section { margin-top: 54px; padding: 32px; border: 1px solid var(--line); border-radius: 22px; background: rgba(14, 34, 82, .62); }
.chakra-intro { display: flex; justify-content: space-between; gap: 30px; align-items: end; margin-bottom: 24px; }
.chakra-intro h2 { font: 500 30px/1.15 'Playfair Display', serif; margin: 8px 0 0; }
.chakra-intro > p { max-width: 390px; color: var(--dim); font-size: 13px; margin: 0; }
.chakra-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.chakra-card { padding: 17px; border: 1px solid var(--chakra, var(--line)); border-left: 4px solid var(--chakra, var(--gold)); border-radius: 13px; background: rgba(29, 59, 124, .58); }
.chakra-card.wide { grid-column: span 2; }.chakra-card header { display: flex; gap: 10px; align-items: center; }.chakra-dot { width: 12px; height: 12px; background: var(--chakra); border-radius: 50%; box-shadow: 0 0 11px var(--chakra); }.chakra-card h3 { font: 500 18px 'Playfair Display', serif; margin: 0; }.chakra-values { color: var(--gold); font-size: 12px; margin: 7px 0; }.chakra-card p { color: var(--dim); font-size: 13px; margin: 0; }.chakra-note { color: #b8c5e2; font-size: 11px; margin: 18px 0 0; }
@media (max-width: 720px) { .chakra-section { padding: 24px 18px; }.chakra-intro { display: block; }.chakra-intro > p { margin-top: 14px; }.chakra-grid { grid-template-columns: 1fr; }.chakra-card.wide { grid-column: auto; } }
.position-section { margin-top: 54px; padding: 32px; border: 1px solid var(--line); border-radius: 22px; background: rgba(14, 34, 82, .62); }
.position-grid { display: grid; gap: 12px; }
.position-card { display: grid; grid-template-columns: 64px 1fr; gap: 16px; padding: 18px; border: 1px solid var(--line); border-radius: 13px; background: rgba(29, 59, 124, .58); }
.position-num { display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 12px; background: rgba(255, 239, 178, .08); }
.position-num b { font-size: 11px; color: var(--dim); letter-spacing: .1em; }.position-num strong { font: 600 26px 'Playfair Display', serif; color: var(--gold); }
.position-card span { font-size: 11px; letter-spacing: .1em; color: var(--gold); font-weight: 700; text-transform: uppercase; }
.position-card h3 { font: 500 19px 'Playfair Display', serif; margin: 4px 0 6px; }.position-card p { color: var(--dim); font-size: 13.5px; margin: 0; }
@media (max-width: 720px) { .position-section { padding: 24px 16px; }.position-card { grid-template-columns: 52px 1fr; gap: 12px; padding: 14px; } }
.matrix:has(.full-matrix) { max-width: 520px; }
.matrix svg.full-matrix { stroke: none; overflow: visible; }
.full-matrix .m-line { fill: none; stroke: rgba(235, 201, 109, .5); stroke-width: 1.3; }
.full-matrix .m-dash { stroke-dasharray: 3 4; }
.full-matrix .m-arrow { stroke-width: 1.4; }.full-matrix .m-male { stroke: #a88be0; }.full-matrix .m-female { stroke: #e7787a; }
.full-matrix .m-node circle { fill: #142b68; stroke: var(--gold); stroke-width: 1.5; }
.full-matrix .m-node text { fill: #fff0ad; font-family: 'Playfair Display', serif; font-weight: 700; text-anchor: middle; dominant-baseline: central; }
.full-matrix .m-purple circle { fill: #8e4fc4; stroke: #8e4fc4; }.full-matrix .m-blue circle { fill: #3f6fe0; stroke: #3f6fe0; }
.full-matrix .m-cyan circle { fill: #4fb9dc; stroke: #4fb9dc; }.full-matrix .m-green circle { fill: #86bd52; stroke: #86bd52; }
.full-matrix .m-red circle { fill: #e0524f; stroke: #e0524f; }.full-matrix .m-orange circle { fill: #f0a640; stroke: #f0a640; }
.full-matrix .m-purple text, .full-matrix .m-blue text, .full-matrix .m-cyan text, .full-matrix .m-green text, .full-matrix .m-red text, .full-matrix .m-orange text { fill: #fff; }
.full-matrix .m-center circle { fill: var(--gold); stroke: var(--gold); }.full-matrix .m-center text { fill: #192550; }
.full-matrix .m-sym { font-size: 15px; font-weight: 700; }.full-matrix .m-money-sym { fill: #86bd52; }.full-matrix .m-heart-sym { fill: #e0524f; }
.full-matrix .m-age-dot { fill: var(--gold); }.full-matrix .m-age-key { fill: #142b68; stroke: var(--gold); stroke-width: 1.2; }
.full-matrix .m-age-val { fill: var(--ink); font: 9px 'DM Sans', sans-serif; text-anchor: middle; dominant-baseline: central; }
.full-matrix .m-age-val.key { font-weight: 700; font-size: 10px; fill: var(--gold); }
.full-matrix .m-age { fill: var(--dim); font: 700 9px 'DM Sans', sans-serif; text-anchor: middle; dominant-baseline: central; opacity: .8; }
.full-matrix .m-node, .position-card { cursor: pointer; }
.full-matrix .m-node:hover circle, .full-matrix .m-node:focus circle { stroke: #fff; stroke-width: 2.4; }
.position-card:hover, .position-card:focus { border-color: var(--gold); outline: none; }
.arcana-hint { color: var(--dim); font-size: 12px; margin: 14px 0 0; text-align: center; }
.arcana-panel { margin-top: 24px; padding: 30px; border: 1px solid var(--gold); border-radius: 22px; background: rgba(14, 34, 82, .82); scroll-margin-top: 16px; }
.ar-head { display: grid; grid-template-columns: 72px 1fr auto; gap: 18px; align-items: start; margin-bottom: 16px; }
.ar-num { width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; background: var(--gold); color: #192550; font: 700 30px 'Playfair Display', serif; }
.ar-head h2 { font: 500 30px/1.15 'Playfair Display', serif; margin: 4px 0 8px; }.ar-head p:last-child { color: var(--dim); margin: 0; }
.ar-close { border: 1px solid var(--line); background: none; color: var(--ink); border-radius: 50%; width: 36px; height: 36px; cursor: pointer; }
.ar-fold { border-top: 1px solid var(--line); }
.ar-fold summary { cursor: pointer; padding: 14px 2px; font: 500 19px 'Playfair Display', serif; color: var(--ink); }
.ar-fold summary:hover { color: var(--gold); }
.ar-fold > div { padding: 0 2px 16px; color: var(--dim); font-size: 14.5px; }
.ar-fold p { margin: 0 0 10px; }.ar-fold ul { margin: 0 0 10px; padding-left: 20px; }
.ar-pairs { display: grid; gap: 8px; }
.ar-pairs > div { padding: 11px 14px; border-radius: 10px; background: rgba(29, 59, 124, .58); }
.ar-pairs b { display: block; color: var(--gold); font-size: 13px; margin-bottom: 3px; }
.ar-pn { padding: 12px 14px; border-radius: 10px; background: rgba(29, 59, 124, .58); margin-bottom: 8px; }
.ar-pn b { color: var(--ink); }.ar-pn .plus { color: #9be0b9; margin: 4px 0 2px; }.ar-pn .minus { color: #f2a7a8; margin: 0; }
.ar-task { border-left: 3px solid var(--gold); padding: 8px 12px; background: rgba(255, 239, 178, .07); color: var(--ink); }
.ar-small { font-size: 12px; opacity: .8; }
@media (max-width: 720px) { .arcana-panel { padding: 22px 16px; }.ar-head { grid-template-columns: 52px 1fr auto; gap: 12px; }.ar-num { width: 52px; height: 52px; font-size: 22px; }.ar-head h2 { font-size: 23px; } }
.shine-hero { position: relative; overflow: hidden; display: grid; grid-template-columns: 1.15fr .85fr; gap: 20px; align-items: center; margin: 8px 0 42px; padding: 52px 48px 44px; border-radius: 26px; border: 1px solid rgba(255,255,255,.11); background: radial-gradient(620px 420px at 82% 18%, rgba(196,110,190,.2), transparent 62%), radial-gradient(520px 360px at 8% 4%, rgba(122,84,224,.28), transparent 60%), linear-gradient(150deg, #1f1240 0%, #150c29 62%); box-shadow: 0 30px 70px -30px rgba(6,2,20,.55); font-family: 'Manrope', 'DM Sans', sans-serif; }
.shine-hero h1 { font: 800 clamp(2.2rem, 5vw, 3.3rem)/1.08 'Sora', sans-serif; letter-spacing: -.02em; margin: 0 0 22px; }
.shine-hero h1 span { display: block; }
.sh-l1 { background: linear-gradient(95deg, #ddcdff, #7c4fe0); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sh-l2 { background: linear-gradient(95deg, #ffd2a3, #c9772f); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sh-l3 { color: #f6f2fc; }
.sh-text > p { max-width: 46ch; color: #bfb3dc; font-size: 1.04rem; line-height: 1.65; margin: 0 0 30px; }
.sh-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 26px; }
.sh-btn { display: inline-flex; align-items: center; gap: 9px; padding: 14px 22px; border-radius: 12px; font-weight: 700; font-size: .95rem; text-decoration: none; color: #f6f2fc; border: 1px solid rgba(255,255,255,.11); background: rgba(255,255,255,.05); }
.sh-btn:hover { background: rgba(255,255,255,.1); }
.sh-primary { border-color: transparent; background: linear-gradient(120deg, #7c4fe0, #d15fa8); box-shadow: 0 14px 30px -12px rgba(124,79,224,.65); }
.sh-primary svg { width: 16px; height: 16px; stroke: #fff; }
.sh-trust { display: flex; flex-wrap: wrap; gap: 20px; }
.sh-trust span { display: flex; align-items: center; gap: 8px; font-size: .84rem; color: #8779af; }
.sh-trust svg { width: 15px; height: 15px; stroke: #ddcdff; flex: none; }
.sh-visual { position: relative; height: 340px; display: flex; align-items: center; justify-content: center; }
.sh-ring { position: absolute; border-radius: 50%; border: 1px solid rgba(255,255,255,.11); }
.sh-r1 { width: 300px; height: 300px; }.sh-r2 { width: 210px; height: 210px; border-color: rgba(211,150,220,.28); }
.sh-arc { position: absolute; top: 6%; right: -6%; width: 150px; height: 150px; border: 1px solid rgba(255,255,255,.16); border-radius: 50%; border-bottom-color: transparent; border-left-color: transparent; transform: rotate(35deg); }
.sh-star { position: absolute; border-radius: 50%; background: #ddcdff; opacity: .85; }.sh-star.peach { background: #ffd2a3; }
.sh-mark { width: 108px; height: 108px; position: relative; }
@media (max-width: 860px) { .shine-hero { grid-template-columns: 1fr; padding: 32px 22px; }.sh-visual { display: none; } }
/* S logo orbits: rings carry a glowing dot and rotate around the mark. */
.sh-r1 { animation: sh-spin 26s linear infinite; }
.sh-r2 { animation: sh-spin 16s linear infinite reverse; }
.sh-arc { animation: sh-spin-arc 34s linear infinite; }
.sh-r1::after, .sh-r2::after { content: ''; position: absolute; border-radius: 50%; }
.sh-r1::after { width: 8px; height: 8px; top: -4px; left: calc(50% - 4px); background: #ffd2a3; box-shadow: 0 0 12px 3px rgba(255,210,163,.7); }
.sh-r2::after { width: 6px; height: 6px; bottom: -3px; left: calc(50% - 3px); background: #ddcdff; box-shadow: 0 0 10px 3px rgba(221,205,255,.7); }
@keyframes sh-spin { to { transform: rotate(360deg); } }
@keyframes sh-spin-arc { from { transform: rotate(35deg); } to { transform: rotate(395deg); } }
@media (prefers-reduced-motion: reduce) { .sh-r1, .sh-r2, .sh-arc { animation: none; } }
/* 3D globe around the S mark: meridians spin on Y, the whole sphere sways back and forth. */
.sh-visual { perspective: 900px; }
.sh-tilt { position: absolute; width: 220px; height: 220px; transform-style: preserve-3d; animation: sh-sway 7s ease-in-out infinite alternate; }
.sh-globe { position: absolute; inset: 0; transform-style: preserve-3d; animation: sh-globe 18s linear infinite; }
.sh-mer, .sh-lat { position: absolute; inset: 0; border-radius: 50%; border: 1.2px solid rgba(221,205,255,.42); }
.sh-mer { transform: rotateY(var(--a)); }
.sh-mer:nth-child(odd) { border-color: rgba(255,210,163,.32); }
.sh-lat { transform: translateZ(0) rotateX(90deg) translateZ(var(--z)) scale(var(--s)); border-color: rgba(211,150,220,.5); }
.sh-lat:nth-of-type(7) { border-width: 1.6px; box-shadow: 0 0 18px rgba(196,110,190,.35); }
.sh-sat { position: absolute; width: 9px; height: 9px; top: calc(50% - 4.5px); left: calc(50% - 4.5px); border-radius: 50%; background: #fff; box-shadow: 0 0 14px 4px rgba(231,194,255,.8); transform: rotateY(0) translateZ(112px); animation: sh-sat 6s linear infinite; }
.sh-mark { z-index: 2; filter: drop-shadow(0 0 18px rgba(124,79,224,.6)); }
@keyframes sh-globe { from { transform: rotateY(0); } to { transform: rotateY(360deg); } }
@keyframes sh-sway { from { transform: rotateX(-22deg) rotateZ(-10deg); } to { transform: rotateX(18deg) rotateZ(10deg); } }
@keyframes sh-sat { from { transform: rotateX(70deg) rotateZ(0) translateX(118px); } to { transform: rotateX(70deg) rotateZ(360deg) translateX(118px); } }
@media (prefers-reduced-motion: reduce) { .sh-tilt, .sh-globe, .sh-sat { animation: none; } }
.ar-img { display: block; width: 100%; max-width: 560px; height: auto; margin: 4px auto 16px; border-radius: 12px; }
.ar-lead { color: var(--ink); font-size: 15px; }
.ar-fold summary small { display: block; font: 700 10px 'DM Sans', sans-serif; letter-spacing: .16em; color: var(--gold); }
.ar-fold h4 { color: var(--ink); font: 500 17px 'Playfair Display', serif; margin: 16px 0 8px; }
.ar-pos { display: grid; grid-template-columns: 30px 1fr; gap: 12px; margin-bottom: 14px; }
.ar-pos > span { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--gold); color: #192550; font-weight: 700; }
.ar-pos h4 { margin-top: 2px; }
.ar-task b { color: var(--gold); }

/* ===== Soft light theme (matches the Shine artifact); the S hero keeps its own dark look. ===== */
:root { --night: #f8f0e8; --navy: #ffffff; --card: #ffffff; --ink: #241a30; --dim: #5c516c; --gold: #7c4fe0; --line: rgba(42,33,56,.10); --peach: #a8611c; --inset: #f4eefb; --soft-shadow: 0 16px 36px -26px rgba(60,30,90,.22); }
body { background: var(--night); color: var(--ink); }
.sky { background: radial-gradient(900px 500px at 88% 0%, rgba(209,95,168,.07), transparent 60%), radial-gradient(800px 460px at 4% 8%, rgba(124,79,224,.08), transparent 58%), var(--night); }
.eyebrow, .step, .tag, .checkout-notice span, .premium-card span, .position-card span, .ar-fold summary small { color: var(--peach); }
.hero em, .offer em, .unlock { color: var(--gold); }
.calculator, .matrix-card, .free-reading, .premium-card, .offer, .chakra-section, .position-section, .arcana-panel, .checkout-notice { background: #fff; border-color: var(--line); box-shadow: var(--soft-shadow); }
.premium-card.featured { background: linear-gradient(180deg, #fbf6ff, #fff); border-color: var(--gold); }
.arcana-panel { border-color: rgba(124,79,224,.35); }
input { background: var(--inset); color: var(--ink); }
.primary { background: linear-gradient(120deg, #7c4fe0, #d15fa8); color: #fff; box-shadow: 0 14px 30px -12px rgba(124,79,224,.55); }
.error { color: #a03d3d; }
footer { color: var(--dim); border-top-color: var(--line); }
.gentle-tip, .position-num, .ar-pairs > div, .ar-pn, .chakra-card { background: var(--inset); }
.ar-task { background: #fbf3df; border-left-color: #d0aa52; }.ar-task b { color: #8a6420; }
.ar-pairs b, .chakra-values, .position-num strong { color: var(--gold); }
.ar-pn .plus { color: #1f7a4d; }.ar-pn .minus { color: #a03d3d; }
.ar-num, .ar-pos > span { background: linear-gradient(135deg, #7c4fe0, #d15fa8); color: #fff; }
.chakra-note { color: var(--dim); }
.full-matrix .m-line { stroke: rgba(124,79,224,.32); }
.full-matrix .m-node circle { fill: #fff; stroke: #b9a3ec; }
.full-matrix .m-node text { fill: var(--ink); }
.full-matrix .m-purple text, .full-matrix .m-blue text, .full-matrix .m-cyan text, .full-matrix .m-green text, .full-matrix .m-red text, .full-matrix .m-orange text, .full-matrix .m-center text { fill: #fff; }
.full-matrix .m-center circle { fill: #f2c94c; stroke: #f2c94c; }.full-matrix .m-center text { fill: #3a2a05; }
.full-matrix .m-age-dot { fill: #b9a3ec; }.full-matrix .m-age-key { fill: #fff; stroke: var(--gold); }
.full-matrix .m-age-val.key { fill: var(--gold); }
.full-matrix .m-node:hover circle, .full-matrix .m-node:focus circle { stroke: var(--gold); }
.position-card { background: var(--inset); border-color: var(--line); }
.position-card:hover, .position-card:focus { border-color: var(--gold); }
.full-matrix .m-node.m-purple circle { fill: #8e4fc4; stroke: #8e4fc4; }.full-matrix .m-node.m-blue circle { fill: #3f6fe0; stroke: #3f6fe0; }
.full-matrix .m-node.m-cyan circle { fill: #4fb9dc; stroke: #4fb9dc; }.full-matrix .m-node.m-green circle { fill: #86bd52; stroke: #86bd52; }
.full-matrix .m-node.m-red circle { fill: #e0524f; stroke: #e0524f; }.full-matrix .m-node.m-orange circle { fill: #f0a640; stroke: #f0a640; }
.full-matrix .m-node.m-center circle { fill: #f2c94c; stroke: #f2c94c; }