@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Playfair+Display:wght@500;600;700&display=swap');
:root{--bg:#f7f7fb;--surface:#fff;--surface2:#f0eff8;--text:#171827;--muted:#6f7182;--line:#e5e4ee;--accent:#6357d9;--accent2:#8b7ff2;--header:rgba(255,255,255,.88);--shadow:0 18px 60px rgba(29,27,68,.09);--container:1160px;--gutter:clamp(14px,3vw,40px)}
html[data-theme=dark]{--bg:#0d0f18;--surface:#151824;--surface2:#1d2030;--text:#f4f3fb;--muted:#a7a9b8;--line:#2b2e3e;--accent:#9a8fff;--accent2:#c0b8ff;--header:rgba(13,15,24,.88);--shadow:0 18px 60px rgba(0,0,0,.28)}
*{box-sizing:border-box}html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%;overflow-x:hidden}body{margin:0;min-width:280px;background:var(--bg);color:var(--text);font-family:Manrope,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1.65;overflow-x:hidden}img,svg,video,canvas{max-width:100%;height:auto}button,input,select,textarea{font:inherit}button,a{-webkit-tap-highlight-color:transparent}a{color:inherit;text-decoration:none}.container{width:min(var(--container),calc(100% - 2 * var(--gutter)));margin-inline:auto}
.site-header{position:sticky;top:0;z-index:50;background:var(--header);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-bottom:1px solid var(--line)}.header-inner{min-height:76px;display:flex;align-items:center;gap:clamp(16px,3vw,36px)}.brand{font-weight:800;font-size:clamp(20px,2vw,23px);letter-spacing:-.04em;margin-right:auto;white-space:nowrap}.brand span{color:var(--accent)}.desktop-nav{display:flex;gap:clamp(14px,2.4vw,28px);font-size:14px;font-weight:600}.desktop-nav a:hover,.text-link:hover{color:var(--accent)}.header-actions{display:flex;gap:8px;align-items:center;flex-shrink:0}.theme-toggle,.menu-toggle{border:1px solid var(--line);background:var(--surface);color:var(--text);border-radius:12px;height:42px;width:42px;cursor:pointer;display:grid;place-items:center}.menu-toggle{display:none}.menu-toggle span{display:block;width:17px;height:1.5px;background:var(--text);margin:2px auto}.mobile-menu{display:none}
.hero{overflow:hidden;padding:clamp(58px,9vw,100px) 0 clamp(65px,9vw,100px);background:radial-gradient(circle at 72% 35%,rgba(127,111,255,.18),transparent 32%),var(--bg)}.hero-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(280px,.9fr);align-items:center;gap:clamp(25px,5vw,70px)}.eyebrow{text-transform:uppercase;letter-spacing:.14em;font-size:11px;font-weight:800;color:var(--accent);margin-bottom:14px}h1,h2,h3{margin:0;letter-spacing:-.04em;line-height:1.15;overflow-wrap:anywhere}h1{font-size:clamp(40px,6vw,72px);max-width:760px}h1 em{font-family:inherit;font-weight:inherit;color:var(--accent);font-style:normal}.hero-lead{max-width:650px;color:var(--muted);font-size:clamp(15px,1.5vw,18px);margin:25px 0 30px}.hero-actions{display:flex;gap:12px;flex-wrap:wrap}.button{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 20px;border-radius:14px;font-weight:700;font-size:14px;touch-action:manipulation}.button.primary{background:var(--accent);color:white;box-shadow:0 10px 28px rgba(99,87,217,.25)}.button.secondary{background:var(--surface);border:1px solid var(--line)}
.hero-orbit{height:min(420px,38vw);min-height:280px;position:relative;display:grid;place-items:center}.orbit{position:absolute;border:1px solid var(--line);border-radius:50%;max-width:90%;max-height:90%;aspect-ratio:1}.orbit-1{width:min(310px,80vw)}.orbit-2{width:min(220px,58vw)}.sun{width:clamp(76px,9vw,100px);height:clamp(76px,9vw,100px);border-radius:50%;display:grid;place-items:center;background:var(--accent);color:#fff;font-size:clamp(28px,3vw,35px);box-shadow:0 0 80px rgba(99,87,217,.35)}.planet{position:absolute;font-size:clamp(20px,2.5vw,28px);color:var(--accent2);background:var(--surface);border:1px solid var(--line);width:clamp(46px,5vw,58px);height:clamp(46px,5vw,58px);border-radius:18px;display:grid;place-items:center;box-shadow:var(--shadow)}.p1{top:12%;left:18%}.p2{right:10%;top:34%}.p3{bottom:10%;right:24%}.p4{bottom:18%;left:12%}
.section{padding:clamp(52px,7vw,78px) 0}.section.soft{background:var(--surface2)}.section-heading{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:28px}.section-heading h2{font-size:clamp(28px,4vw,36px)}.text-link{color:var(--accent);font-weight:700;font-size:14px}.zodiac-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.zodiac-grid.compact{grid-template-columns:repeat(3,minmax(0,1fr))}.zodiac-card{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:22px;min-height:150px;transition:transform .2s,border-color .2s,box-shadow .2s;box-shadow:0 5px 25px rgba(0,0,0,.02);min-width:0}.zodiac-card:hover{transform:translateY(-3px);border-color:var(--accent2);box-shadow:var(--shadow)}.zodiac-symbol{font-size:28px;color:var(--accent);display:block;margin-bottom:8px}.zodiac-name{display:block;font-weight:800;font-size:17px}.zodiac-date{font-size:11px;color:var(--muted)}.zodiac-card p{font-size:12px;color:var(--muted);margin:12px 0 0;overflow-wrap:anywhere}.feature-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.feature-card{padding:clamp(24px,4vw,32px);background:var(--surface);border:1px solid var(--line);border-radius:24px;min-width:0}.feature-icon{display:block;color:var(--accent);font-size:30px;margin-bottom:20px}.feature-card h3{font-size:clamp(22px,3vw,25px)}.feature-card p{color:var(--muted);margin:12px 0 20px}
.page-head{padding:clamp(32px,7vw,58px) 0 30px;background:var(--surface2)}.page-head h1{font-size:clamp(36px,5vw,58px)}.page-head p{color:var(--muted);font-size:clamp(15px,1.5vw,17px)}.content-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,260px);gap:24px}.content-main{min-width:0}.horoscope-card,.side-card,.empty-state{background:var(--surface);border:1px solid var(--line);border-radius:24px;padding:clamp(22px,4vw,30px);box-shadow:var(--shadow)}.card-kicker{font-size:12px;text-transform:uppercase;letter-spacing:.12em;color:var(--accent);font-weight:800;margin-bottom:20px}.horoscope-text{font-size:clamp(16px,1.5vw,17px);overflow-wrap:anywhere}.side-card{display:flex;flex-direction:column;gap:4px}.side-card strong{margin-bottom:10px}.side-card a{padding:9px 10px;border-radius:10px;font-size:13px}.side-card a:hover{background:var(--surface2);color:var(--accent)}.site-footer{border-top:1px solid var(--line);padding:50px 0 25px;background:var(--surface)}.footer-grid{display:grid;grid-template-columns:minmax(0,1.55fr) repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,36px)}.footer-grid p,.footer-grid a:not(.brand){color:var(--muted);font-size:13px}.footer-grid>div:not(:first-child){display:flex;flex-direction:column;gap:7px}.footer-grid strong{margin-bottom:6px;font-size:13px}.footer-bottom{border-top:1px solid var(--line);margin-top:35px;padding-top:18px;display:flex;justify-content:space-between;gap:15px;color:var(--muted);font-size:11px;flex-wrap:wrap}
@media (max-width:1024px){.desktop-nav{gap:16px}.hero-grid{grid-template-columns:minmax(0,1fr) minmax(250px,.75fr)}.zodiac-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.content-layout{grid-template-columns:minmax(0,1fr) 220px}}
@media (max-width:820px){.desktop-nav{display:none}.menu-toggle{display:block}.mobile-menu.open{display:grid;padding:8px var(--gutter) 18px;background:var(--header);gap:2px}.mobile-menu a{padding:13px 0;font-weight:700;border-bottom:1px solid var(--line)}.hero-grid{grid-template-columns:1fr}.hero-orbit{display:none}.zodiac-grid,.zodiac-grid.compact{grid-template-columns:repeat(2,minmax(0,1fr))}.content-layout{grid-template-columns:1fr}.sidebar{display:none}}
@media (max-width:560px){.header-inner{min-height:64px}.brand{font-size:20px}.theme-toggle,.menu-toggle{height:40px;width:40px}.hero-actions{display:grid;grid-template-columns:1fr}.button{width:100%}.zodiac-grid,.zodiac-grid.compact{gap:9px}.zodiac-card{padding:16px;min-height:132px;border-radius:17px}.zodiac-symbol{font-size:25px}.zodiac-name{font-size:15px}.zodiac-date{font-size:10px}.feature-grid{grid-template-columns:1fr}.footer-grid{grid-template-columns:1fr;gap:26px}.footer-bottom{flex-direction:column}.horoscope-card{border-radius:18px}.mobile-menu{max-height:calc(100svh - 64px);overflow:auto}}
@media (max-width:360px){:root{--gutter:12px}.hero{padding-top:48px}.hero-lead{margin:18px 0 24px}.zodiac-grid,.zodiac-grid.compact{grid-template-columns:1fr}.zodiac-card{min-height:auto}.section-heading h2{font-size:26px}.page-head h1{font-size:34px}}
@media (min-width:1440px){:root{--container:1240px}.hero{padding-top:110px;padding-bottom:120px}.section{padding-top:90px;padding-bottom:90px}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.zodiac-card{transition:none}.zodiac-card:hover{transform:none}}
@media (max-width:820px){.site-header{z-index:100}.mobile-menu{position:fixed;inset:0;z-index:90;display:flex;flex-direction:column;justify-content:center;gap:8px;width:100vw;height:100svh;min-height:100vh;margin:0;padding:calc(82px + env(safe-area-inset-top)) var(--gutter) calc(28px + env(safe-area-inset-bottom));overflow-y:auto;overscroll-behavior:contain;visibility:hidden;opacity:0;pointer-events:none;transform:translateY(-14px) scale(.985);background:radial-gradient(circle at 15% 15%,rgba(139,127,242,.20),transparent 34%),radial-gradient(circle at 85% 80%,rgba(99,87,217,.14),transparent 38%),rgba(247,247,251,.72);-webkit-backdrop-filter:blur(28px) saturate(145%);backdrop-filter:blur(28px) saturate(145%);transition:opacity .24s ease,transform .28s ease,visibility .28s}.mobile-menu.open{display:flex;visibility:visible;opacity:1;pointer-events:auto;transform:none}html[data-theme=dark] .mobile-menu{background:radial-gradient(circle at 15% 15%,rgba(154,143,255,.18),transparent 34%),radial-gradient(circle at 85% 80%,rgba(99,87,217,.14),transparent 38%),rgba(13,15,24,.72)}.mobile-menu a{position:relative;display:flex;align-items:center;min-height:58px;padding:15px 18px;border:1px solid rgba(255,255,255,.42);border-radius:18px;background:rgba(255,255,255,.34);box-shadow:0 10px 35px rgba(29,27,68,.07),inset 0 1px 0 rgba(255,255,255,.55);-webkit-backdrop-filter:blur(18px) saturate(135%);backdrop-filter:blur(18px) saturate(135%);font-size:clamp(18px,5vw,23px);font-weight:800;letter-spacing:-.025em;transition:transform .18s ease,background .18s ease,border-color .18s ease}html[data-theme=dark] .mobile-menu a{border-color:rgba(255,255,255,.10);background:rgba(255,255,255,.055);box-shadow:0 10px 35px rgba(0,0,0,.20),inset 0 1px 0 rgba(255,255,255,.10)}.mobile-menu a:active{transform:scale(.985);background:rgba(255,255,255,.50)}html[data-theme=dark] .mobile-menu a:active{background:rgba(255,255,255,.09)}.menu-toggle,.theme-toggle{position:relative;z-index:110}body.menu-open{overflow:hidden;touch-action:none}}@media (max-width:360px){.mobile-menu{gap:7px;padding-left:12px;padding-right:12px}.mobile-menu a{min-height:54px;padding:13px 15px;font-size:18px;border-radius:16px}}@media (prefers-reduced-motion:reduce){.mobile-menu,.mobile-menu a{transition:none}}@media (max-width:820px){
.mobile-menu{
 background:rgba(247,247,251,.97);
 -webkit-backdrop-filter:blur(18px) saturate(120%);
 backdrop-filter:blur(18px) saturate(120%);
}
html[data-theme=dark] .mobile-menu{background:rgba(13,15,24,.97)}
.mobile-menu a{
 min-height:56px;
 padding:14px 4px;
 border:0;
 border-radius:0;
 background:transparent;
 box-shadow:none;
 -webkit-backdrop-filter:none;
 backdrop-filter:none;
 font-size:clamp(18px,5vw,23px);
 font-weight:700;
 letter-spacing:-.02em;
 color:var(--text);
}
html[data-theme=dark] .mobile-menu a{border:0;background:transparent;box-shadow:none}
.mobile-menu a:hover,.mobile-menu a:focus-visible{
 background:transparent;
 color:var(--accent);
}
.mobile-menu a:active{transform:none;background:transparent}
html[data-theme=dark] .mobile-menu a:active{background:transparent}
}
.compat-picker{padding:clamp(20px,4vw,38px);border:1px solid var(--line);border-radius:28px;background:var(--card);box-shadow:var(--shadow)}
.compat-picker-head{display:flex;gap:24px;align-items:flex-end;justify-content:space-between;margin-bottom:24px}
.compat-picker-head h2,.section-heading h2{margin:.2rem 0 0}
.compat-picker-head p,.section-heading p{max-width:520px;color:var(--muted);margin:0}
.compat-form{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:end}
.compat-form label{display:grid;gap:8px;font-weight:700}
.compat-form select{width:100%;min-height:52px;padding:0 15px;border:1px solid var(--line);border-radius:14px;background:var(--bg);color:var(--text);outline:0}
.compat-form select:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent)}
.compat-form .button{width:100%;min-height:52px;padding:0 15px;border:0;outline:0;box-shadow:none;border-radius:14px}
/* Keep the submit button in its original position while a sign list expands. */
.compat-form > .button{align-self:start;margin-top:calc(1.65em + 8px)}
.compat-form .button:focus,.compat-form .button:focus-visible{outline:0;box-shadow:none}
.compat-score-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.score-card{padding:22px;border:1px solid var(--line);border-radius:22px;background:var(--card);box-shadow:var(--shadow)}
.score-label{display:flex;align-items:center;justify-content:space-between;gap:12px;font-weight:700}
.score-label strong{font-size:1.35rem;color:var(--accent)}
.score-track{height:10px;margin:14px 0 9px;overflow:hidden;border-radius:999px;background:var(--soft)}
.score-track span{display:block;height:100%;border-radius:inherit;background:var(--accent)}
.score-card small{color:var(--muted)}
.compatibility-article{transform:none}
.content-narrow{max-width:var(--container)}
.content-card{padding:clamp(22px,4vw,42px);border:1px solid var(--line);border-radius:26px;background:var(--card);box-shadow:var(--shadow)}
.compatibility-article .lead{font-size:clamp(1.05rem,1.5vw,1.2rem);line-height:1.75;color:var(--muted)}
.compatibility-article h2{margin-top:2.2rem;margin-bottom:.8rem}
.compatibility-article p{line-height:1.78}
.pair-links{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.pair-links a,.mini-pair-grid a{display:flex;align-items:center;gap:9px;min-height:50px;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:var(--card);color:var(--text);text-decoration:none;font-weight:650}
.pair-links a:hover,.mini-pair-grid a:hover,.pair-links a.active{border-color:var(--accent);color:var(--accent);transform:translateY(-1px)}
.mini-pair-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
@media(max-width:900px){.compat-form{grid-template-columns:1fr 1fr}.compat-form .button{grid-column:1/-1}.pair-links{grid-template-columns:repeat(3,1fr)}}
@media(max-width:680px){.compat-picker-head{display:block}.compat-picker-head p{margin-top:8px}.compat-score-grid{grid-template-columns:1fr}.pair-links{grid-template-columns:repeat(2,1fr)}.mini-pair-grid{grid-template-columns:1fr}}
@media(max-width:480px){.compat-form{grid-template-columns:1fr}.compat-form .button{grid-column:auto}.pair-links{grid-template-columns:1fr}}

/* Frosted / ripple overlay for mobile menu */
@media (max-width:820px){
 .mobile-menu{background:radial-gradient(circle at 18% 22%,rgba(139,127,242,.20),transparent 28%),radial-gradient(circle at 82% 72%,rgba(99,87,217,.16),transparent 30%),repeating-radial-gradient(ellipse at 30% 40%,rgba(255,255,255,.10) 0,rgba(255,255,255,.10) 1px,transparent 2px,transparent 13px),rgba(247,247,251,.62);-webkit-backdrop-filter:blur(24px) saturate(150%);backdrop-filter:blur(24px) saturate(150%)}
 html[data-theme=dark] .mobile-menu{background:radial-gradient(circle at 18% 22%,rgba(154,143,255,.16),transparent 28%),radial-gradient(circle at 82% 72%,rgba(99,87,217,.14),transparent 30%),repeating-radial-gradient(ellipse at 30% 40%,rgba(255,255,255,.035) 0,rgba(255,255,255,.035) 1px,transparent 2px,transparent 13px),rgba(13,15,24,.62)}
 .mobile-menu a{border:1px solid rgba(255,255,255,.30);border-radius:16px;background:rgba(255,255,255,.16);box-shadow:0 8px 30px rgba(29,27,68,.06),inset 0 1px 0 rgba(255,255,255,.42);-webkit-backdrop-filter:blur(12px) saturate(130%);backdrop-filter:blur(12px) saturate(130%)}
 html[data-theme=dark] .mobile-menu a{border-color:rgba(255,255,255,.10);background:rgba(255,255,255,.055);box-shadow:0 8px 30px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.08)}
}

/* Final mobile menu: clean text navigation over frosted glass */
@media (max-width:820px){
 .mobile-menu a{min-height:0;padding:13px 2px;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;font-size:clamp(18px,5vw,23px);font-weight:700;letter-spacing:-.02em;color:var(--text);justify-content:flex-start;transition:color .18s ease,transform .18s ease}
 .mobile-menu a:hover,.mobile-menu a:focus-visible{color:var(--accent);background:transparent!important;outline:none}
 .mobile-menu a:active{transform:translateX(3px);background:transparent!important}
 .mobile-menu{background:radial-gradient(circle at 18% 22%,rgba(139,127,242,.20),transparent 28%),radial-gradient(circle at 82% 72%,rgba(99,87,217,.16),transparent 30%),rgba(247,247,251,.62)!important;-webkit-backdrop-filter:blur(24px) saturate(150%)!important;backdrop-filter:blur(24px) saturate(150%)!important}
 html[data-theme=dark] .mobile-menu{background:radial-gradient(circle at 18% 22%,rgba(154,143,255,.16),transparent 28%),radial-gradient(circle at 82% 72%,rgba(99,87,217,.14),transparent 30%),rgba(13,15,24,.62)!important}
}
/* Header: permanently fixed to the viewport */
.site-header{position:fixed;top:0;left:0;right:0;width:100%;z-index:100}
body{padding-top:76px}
@media (max-width:560px){body{padding-top:64px}}
/* Mobile popup menu: 10% transparent background */
@media (max-width:820px){
 .mobile-menu{background:radial-gradient(circle at 18% 22%,rgba(139,127,242,.10),transparent 28%),radial-gradient(circle at 82% 72%,rgba(99,87,217,.08),transparent 30%),rgba(247,247,251,.90)!important}
 html[data-theme=dark] .mobile-menu{background:radial-gradient(circle at 18% 22%,rgba(154,143,255,.08),transparent 28%),radial-gradient(circle at 82% 72%,rgba(99,87,217,.07),transparent 30%),rgba(13,15,24,.90)!important}
}
/* Mobile popup menu: 5% transparent background */
@media (max-width:820px){
 .mobile-menu{background:radial-gradient(circle at 18% 22%,rgba(139,127,242,.05),transparent 28%),radial-gradient(circle at 82% 72%,rgba(99,87,217,.04),transparent 30%),rgba(247,247,251,.95)!important}
 html[data-theme=dark] .mobile-menu{background:radial-gradient(circle at 18% 22%,rgba(154,143,255,.04),transparent 28%),radial-gradient(circle at 82% 72%,rgba(99,87,217,.035),transparent 30%),rgba(13,15,24,.95)!important}
}
/* Compatibility selectors: align the native arrow with the same right inset as the left text */
.compat-form select{
  appearance:none;
  -webkit-appearance:none;
  padding:0 44px 0 15px;
  background-color:var(--bg);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%236f7182' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 15px center;
  background-size:18px 18px;
}
html[data-theme=dark] .compat-form select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23a7a9b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
/* Interactive zodiac sphere: all 12 signs, irregularly arranged */
.hero-orbit{height:min(500px,42vw);min-height:390px;max-width:560px;margin-inline:auto;isolation:isolate}
.hero-orbit .orbit-1{width:min(410px,92%);opacity:.85}
.hero-orbit .orbit-2{width:min(275px,62%);opacity:.65}
.hero-orbit .sun{position:relative;z-index:2}
.zodiac-orb{position:absolute;z-index:3;width:clamp(58px,6.2vw,74px);height:clamp(58px,6.2vw,74px);border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;background:var(--surface);border:1px solid var(--line);color:var(--accent);box-shadow:var(--shadow);transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease,color .22s ease;touch-action:manipulation}
.zodiac-orb span{font-size:clamp(23px,2.7vw,31px);line-height:1}
.zodiac-orb small{font-size:8px;line-height:1.1;color:var(--muted);font-weight:800;white-space:nowrap}
.zodiac-orb:hover,.zodiac-orb:focus-visible{transform:scale(1.12);border-color:var(--accent2);color:var(--accent);box-shadow:0 18px 45px rgba(99,87,217,.22);outline:none}
.zodiac-orb:active{transform:scale(1.05)}
.z1{top:2%;left:38%}.z2{top:11%;right:7%}.z3{top:37%;right:0}.z4{bottom:7%;right:11%}.z5{bottom:0;left:37%}.z6{bottom:10%;left:7%}.z7{top:45%;left:-1%}.z8{top:13%;left:9%}.z9{top:25%;left:30%}.z10{top:19%;right:25%}.z11{bottom:22%;right:27%}.z12{bottom:25%;left:25%}
@media(max-width:1024px){.hero-orbit{height:430px;min-height:360px}.zodiac-orb{width:64px;height:64px}.z1{top:1%}.z3{right:1%}.z7{left:0}}
@media(max-width:820px){.hero-grid{grid-template-columns:1fr}.hero-orbit{display:grid;height:min(430px,92vw);min-height:330px;width:min(100%,520px);margin-top:28px}.zodiac-orb{width:clamp(54px,13vw,68px);height:clamp(54px,13vw,68px)}.zodiac-orb small{font-size:7px}.hero-orbit .orbit-1{width:86%}.hero-orbit .orbit-2{width:57%}}
@media(max-width:560px){.hero-orbit{height:350px;min-height:320px;margin-top:18px}.zodiac-orb{width:56px;height:56px}.zodiac-orb span{font-size:23px}.zodiac-orb small{display:none}.z1{top:0;left:38%}.z2{top:7%;right:3%}.z3{top:36%;right:-1%}.z4{bottom:4%;right:8%}.z5{bottom:-2%;left:38%}.z6{bottom:7%;left:5%}.z7{top:42%;left:-2%}.z8{top:9%;left:4%}.z9{top:22%;left:26%}.z10{top:16%;right:22%}.z11{bottom:19%;right:23%}.z12{bottom:22%;left:22%}}
@media(max-width:360px){.hero-orbit{height:310px;min-height:290px}.zodiac-orb{width:51px;height:51px}.zodiac-orb span{font-size:21px}.hero-orbit .orbit-1{width:90%}.hero-orbit .orbit-2{width:59%}}
@media(prefers-reduced-motion:reduce){.zodiac-orb{transition:none}}
/* Zodiac signs: true circular orbit around the center */
.hero-orbit{position:relative;height:min(500px,42vw);min-height:390px;max-width:560px;margin-inline:auto;isolation:isolate}
.hero-orbit .orbit-1{width:min(410px,92%);opacity:.85}
.hero-orbit .orbit-2{width:min(275px,62%);opacity:.65}
.hero-orbit .sun{position:absolute;left:50%;top:50%;z-index:2;transform:translate(-50%,-50%)}
.zodiac-orb{position:absolute;z-index:3;left:50%;top:50%;width:clamp(58px,6.2vw,74px);height:clamp(58px,6.2vw,74px);margin:calc(clamp(58px,6.2vw,74px) / -2);border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;background:var(--surface);border:1px solid var(--line);color:var(--accent);box-shadow:var(--shadow);transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease,color .22s ease;touch-action:manipulation;transform:rotate(var(--angle)) translateY(calc(-1 * var(--orbit-radius))) rotate(calc(-1 * var(--angle)))}
.zodiac-orb span{font-size:clamp(23px,2.7vw,31px);line-height:1}
.zodiac-orb small{font-size:8px;line-height:1.1;color:var(--muted);font-weight:800;white-space:nowrap}
.zodiac-orb:hover,.zodiac-orb:focus-visible{transform:rotate(var(--angle)) translateY(calc(-1 * var(--orbit-radius))) rotate(calc(-1 * var(--angle))) scale(1.12);border-color:var(--accent2);color:var(--accent);box-shadow:0 18px 45px rgba(99,87,217,.22);outline:none}
.zodiac-orb:active{transform:rotate(var(--angle)) translateY(calc(-1 * var(--orbit-radius))) rotate(calc(-1 * var(--angle))) scale(1.05)}
.z1{--angle:0deg}.z2{--angle:30deg}.z3{--angle:60deg}.z4{--angle:90deg}.z5{--angle:120deg}.z6{--angle:150deg}.z7{--angle:180deg}.z8{--angle:210deg}.z9{--angle:240deg}.z10{--angle:270deg}.z11{--angle:300deg}.z12{--angle:330deg}
@media (min-width:1025px){.zodiac-orb{--orbit-radius:min(205px,18vw)}}
@media (max-width:1024px){.hero-orbit{height:430px;min-height:360px}.zodiac-orb{width:64px;height:64px;margin:-32px;--orbit-radius:175px}}
@media (max-width:820px){.hero-grid{grid-template-columns:1fr}.hero-orbit{height:min(430px,92vw);min-height:330px;width:min(100%,520px);margin-top:28px}.zodiac-orb{width:clamp(54px,13vw,68px);height:clamp(54px,13vw,68px);margin:calc(clamp(54px,13vw,68px) / -2);--orbit-radius:clamp(125px,37vw,175px)}.zodiac-orb small{font-size:7px}.hero-orbit .orbit-1{width:86%}.hero-orbit .orbit-2{width:57%}}
@media (max-width:560px){.hero-orbit{height:350px;min-height:320px;margin-top:18px}.zodiac-orb{width:56px;height:56px;margin:-28px;--orbit-radius:clamp(116px,35vw,145px)}.zodiac-orb span{font-size:23px}.zodiac-orb small{display:none}}
@media (max-width:360px){.hero-orbit{height:310px;min-height:290px}.zodiac-orb{width:51px;height:51px;margin:-25.5px;--orbit-radius:clamp(105px,34vw,125px)}.zodiac-orb span{font-size:21px}.hero-orbit .orbit-1{width:90%}.hero-orbit .orbit-2{width:59%}}
@media (prefers-reduced-motion:reduce){.zodiac-orb{transition:none}}
/* Zodiac orbit: thin concentric paths with signs placed on different distances */
.hero-orbit{position:relative;height:min(520px,42vw);min-height:400px;max-width:580px;margin-inline:auto;isolation:isolate}
.hero-orbit .orbit{position:absolute;left:50%;top:50%;border:1px solid color-mix(in srgb,var(--accent) 22%,transparent);border-radius:50%;transform:translate(-50%,-50%);pointer-events:none}
.hero-orbit .orbit-1{width:min(220px,39%);height:min(220px,39%);opacity:.62}
.hero-orbit .orbit-2{width:min(300px,54%);height:min(300px,54%);opacity:.55}
.hero-orbit .orbit-3{width:min(385px,69%);height:min(385px,69%);opacity:.48}
.hero-orbit .orbit-4{width:min(475px,86%);height:min(475px,86%);opacity:.40}
.hero-orbit .sun{position:absolute;left:50%;top:50%;z-index:2;transform:translate(-50%,-50%);display:grid;place-items:center;width:clamp(44px,6vw,66px);height:clamp(44px,6vw,66px);border-radius:50%;color:var(--accent);font-size:clamp(25px,3vw,36px);background:radial-gradient(circle,rgba(139,127,242,.18),rgba(139,127,242,.04) 62%,transparent 70%)}
.zodiac-orb{position:absolute;z-index:3;left:50%;top:50%;margin:calc(var(--size) / -2);width:var(--size);height:var(--size);border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--surface);border:1px solid color-mix(in srgb,var(--accent) 28%,var(--line));color:var(--accent);box-shadow:0 8px 26px rgba(30,28,55,.10);transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease,color .22s ease;touch-action:manipulation;transform:rotate(var(--angle)) translateY(calc(-1 * var(--radius))) rotate(calc(-1 * var(--angle)))}
.zodiac-orb span{font-size:calc(var(--size) * .46);line-height:1}
.zodiac-orb:hover,.zodiac-orb:focus-visible{transform:rotate(var(--angle)) translateY(calc(-1 * var(--radius))) rotate(calc(-1 * var(--angle))) scale(1.15);border-color:var(--accent2);box-shadow:0 14px 36px rgba(99,87,217,.24);outline:none}
.zodiac-orb:active{transform:rotate(var(--angle)) translateY(calc(-1 * var(--radius))) rotate(calc(-1 * var(--angle))) scale(1.07)}
.z1{--angle:-10deg;--radius:110px;--size:52px}.z2{--angle:78deg;--radius:150px;--size:64px}.z3{--angle:145deg;--radius:192px;--size:58px}.z4{--angle:205deg;--radius:235px;--size:70px}.z5{--angle:265deg;--radius:150px;--size:50px}.z6{--angle:332deg;--radius:192px;--size:62px}.z7{--angle:28deg;--radius:235px;--size:56px}.z8{--angle:108deg;--radius:192px;--size:72px}.z9{--angle:168deg;--radius:150px;--size:54px}.z10{--angle:228deg;--radius:110px;--size:66px}.z11{--angle:292deg;--radius:235px;--size:52px}.z12{--angle:350deg;--radius:192px;--size:60px}
@media(max-width:1024px){.hero-orbit{height:450px;min-height:370px}.z1{--radius:100px}.z2{--radius:135px}.z3{--radius:172px}.z4{--radius:210px}.z5{--radius:135px}.z6{--radius:172px}.z7{--radius:210px}.z8{--radius:172px}.z9{--radius:135px}.z10{--radius:100px}.z11{--radius:210px}.z12{--radius:172px}}
@media(max-width:820px){.hero-grid{grid-template-columns:1fr}.hero-orbit{height:min(440px,94vw);min-height:330px;width:min(100%,520px);margin-top:28px}.hero-orbit .orbit-1{width:31%;height:31%}.hero-orbit .orbit-2{width:50%;height:50%}.hero-orbit .orbit-3{width:68%;height:68%}.hero-orbit .orbit-4{width:87%;height:87%}.z1{--radius:clamp(82px,22vw,100px)}.z2{--radius:clamp(112px,30vw,135px)}.z3{--radius:clamp(145px,38vw,172px)}.z4{--radius:clamp(178px,46vw,210px)}.z5{--radius:clamp(112px,30vw,135px)}.z6{--radius:clamp(145px,38vw,172px)}.z7{--radius:clamp(178px,46vw,210px)}.z8{--radius:clamp(145px,38vw,172px)}.z9{--radius:clamp(112px,30vw,135px)}.z10{--radius:clamp(82px,22vw,100px)}.z11{--radius:clamp(178px,46vw,210px)}.z12{--radius:clamp(145px,38vw,172px)}}
@media(max-width:560px){.hero-orbit{height:350px;min-height:310px;margin-top:18px}.hero-orbit .orbit-1{width:31%;height:31%}.hero-orbit .orbit-2{width:51%;height:51%}.hero-orbit .orbit-3{width:70%;height:70%}.hero-orbit .orbit-4{width:88%;height:88%}.z1{--radius:clamp(72px,21vw,82px);--size:46px}.z2{--radius:clamp(95px,29vw,112px);--size:55px}.z3{--radius:clamp(121px,37vw,145px);--size:50px}.z4{--radius:clamp(145px,44vw,178px);--size:60px}.z5{--radius:clamp(95px,29vw,112px);--size:45px}.z6{--radius:clamp(121px,37vw,145px);--size:54px}.z7{--radius:clamp(145px,44vw,178px);--size:49px}.z8{--radius:clamp(121px,37vw,145px);--size:62px}.z9{--radius:clamp(95px,29vw,112px);--size:47px}.z10{--radius:clamp(72px,21vw,82px);--size:57px}.z11{--radius:clamp(145px,44vw,178px);--size:46px}.z12{--radius:clamp(121px,37vw,145px);--size:52px}}
@media(max-width:360px){.hero-orbit{height:310px;min-height:285px}.hero-orbit .orbit-1{width:30%;height:30%}.hero-orbit .orbit-2{width:50%;height:50%}.hero-orbit .orbit-3{width:69%;height:69%}.hero-orbit .orbit-4{width:88%;height:88%}.z1{--radius:clamp(65px,20vw,72px);--size:42px}.z2{--radius:clamp(84px,27vw,95px);--size:51px}.z3{--radius:clamp(104px,34vw,121px);--size:46px}.z4{--radius:clamp(124px,41vw,145px);--size:55px}.z5{--radius:clamp(84px,27vw,95px);--size:41px}.z6{--radius:clamp(104px,34vw,121px);--size:50px}.z7{--radius:clamp(124px,41vw,145px);--size:45px}.z8{--radius:clamp(104px,34vw,121px);--size:57px}.z9{--radius:clamp(84px,27vw,95px);--size:43px}.z10{--radius:clamp(65px,20vw,72px);--size:52px}.z11{--radius:clamp(124px,41vw,145px);--size:42px}.z12{--radius:clamp(104px,34vw,121px);--size:48px}}
@media(prefers-reduced-motion:reduce){.zodiac-orb{transition:none}}

/* Solar-system style: thin, clean circular orbital paths */
.hero-orbit .orbit{box-sizing:border-box;border:1px solid rgba(99,87,217,.22);border-radius:50%;background:transparent;box-shadow:none;opacity:1}
.hero-orbit .orbit-1{width:220px;height:220px;opacity:.72}
.hero-orbit .orbit-2{width:300px;height:300px;opacity:.58}
.hero-orbit .orbit-3{width:384px;height:384px;opacity:.46}
.hero-orbit .orbit-4{width:470px;height:470px;opacity:.34}
@media(max-width:820px){.hero-orbit .orbit-1{width:31%;height:31%}.hero-orbit .orbit-2{width:51%;height:51%}.hero-orbit .orbit-3{width:69%;height:69%}.hero-orbit .orbit-4{width:87%;height:87%}}
@media(max-width:560px){.hero-orbit .orbit-1{width:31%;height:31%}.hero-orbit .orbit-2{width:51%;height:51%}.hero-orbit .orbit-3{width:70%;height:70%}.hero-orbit .orbit-4{width:88%;height:88%}}
/* Final solar-system zodiac layout: 12 signs on 4 concentric circular orbits */
.hero-orbit{position:relative;width:min(560px,100%);height:min(560px,42vw);min-height:420px;margin-inline:auto;isolation:isolate}
.hero-orbit .orbit{position:absolute!important;left:50%!important;top:50%!important;transform:translate(-50%,-50%)!important;border:1px solid rgba(99,87,217,.22)!important;border-radius:50%!important;background:transparent!important;box-shadow:none!important;pointer-events:none}
.hero-orbit .orbit-1{width:150px!important;height:150px!important;opacity:.75!important}
.hero-orbit .orbit-2{width:260px!important;height:260px!important;opacity:.62!important}
.hero-orbit .orbit-3{width:370px!important;height:370px!important;opacity:.50!important}
.hero-orbit .orbit-4{width:480px!important;height:480px!important;opacity:.38!important}
.hero-orbit .sun{position:absolute!important;left:50%!important;top:50%!important;z-index:8!important;transform:translate(-50%,-50%)!important;width:72px!important;height:72px!important;border-radius:50%!important;display:grid!important;place-items:center!important;color:#fff!important;background:radial-gradient(circle at 35% 30%,#76a9ff 0%,#3977e8 48%,#2054bd 100%)!important;border:2px solid rgba(255,255,255,.75)!important;box-shadow:0 0 0 8px rgba(59,120,232,.10),0 10px 30px rgba(35,82,180,.28)!important;font-size:32px!important;line-height:1!important}
.zodiac-orb{position:absolute!important;left:50%!important;top:50%!important;z-index:6!important;width:56px!important;height:56px!important;margin:-28px!important;padding:0!important;border-radius:50%!important;display:grid!important;place-items:center!important;background:var(--surface)!important;border:1px solid rgba(99,87,217,.32)!important;color:var(--accent)!important;box-shadow:0 6px 20px rgba(30,28,55,.12)!important;transform:rotate(var(--angle)) translateY(calc(-1 * var(--radius))) rotate(calc(-1 * var(--angle)))!important;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease!important}
.zodiac-orb span{font-size:27px!important;line-height:1!important}
.zodiac-orb:hover,.zodiac-orb:focus-visible{transform:rotate(var(--angle)) translateY(calc(-1 * var(--radius))) rotate(calc(-1 * var(--angle))) scale(1.14)!important;border-color:var(--accent2)!important;box-shadow:0 12px 30px rgba(99,87,217,.25)!important;outline:none}
.z1{--angle:0deg;--radius:130px}.z2{--angle:120deg;--radius:130px}.z3{--angle:240deg;--radius:130px}
.z4{--angle:0deg;--radius:185px}.z5{--angle:120deg;--radius:185px}.z6{--angle:240deg;--radius:185px}
.z7{--angle:0deg;--radius:240px}.z8{--angle:120deg;--radius:240px}.z9{--angle:240deg;--radius:240px}
.z10{--angle:60deg;--radius:240px}.z11{--angle:180deg;--radius:240px}.z12{--angle:300deg;--radius:240px}
.z10,.z11,.z12{width:56px!important;height:56px!important;margin:-28px!important}
@media(max-width:1024px){
.hero-orbit{height:450px;min-height:380px}
.hero-orbit .orbit-1{width:130px!important;height:130px!important}.hero-orbit .orbit-2{width:225px!important;height:225px!important}.hero-orbit .orbit-3{width:320px!important;height:320px!important}.hero-orbit .orbit-4{width:415px!important;height:415px!important}
.z1,.z2,.z3{--radius:112px}.z4,.z5,.z6{--radius:155px}.z7,.z8,.z9,.z10,.z11,.z12{--radius:205px}
}
@media(max-width:820px){
.hero-orbit{height:min(500px,94vw);min-height:330px;width:min(100%,500px)}
.hero-orbit .orbit-1{width:27%!important;height:27%!important}.hero-orbit .orbit-2{width:47%!important;height:47%!important}.hero-orbit .orbit-3{width:67%!important;height:67%!important}.hero-orbit .orbit-4{width:87%!important;height:87%!important}
.z1,.z2,.z3{--radius:clamp(82px,23vw,112px)}.z4,.z5,.z6{--radius:clamp(112px,32vw,155px)}.z7,.z8,.z9,.z10,.z11,.z12{--radius:clamp(145px,42vw,205px)}
}
@media(max-width:560px){
.hero-orbit{height:350px;min-height:310px}.hero-orbit .sun{width:60px!important;height:60px!important;font-size:27px!important}
.hero-orbit .orbit-1{width:27%!important;height:27%!important}.hero-orbit .orbit-2{width:47%!important;height:47%!important}.hero-orbit .orbit-3{width:67%!important;height:67%!important}.hero-orbit .orbit-4{width:88%!important;height:88%!important}
.zodiac-orb,.z10,.z11,.z12{width:48px!important;height:48px!important;margin:-24px!important}.zodiac-orb span{font-size:23px!important}
.z1,.z2,.z3{--radius:clamp(68px,23vw,80px)}.z4,.z5,.z6{--radius:clamp(94px,31vw,112px)}.z7,.z8,.z9,.z10,.z11,.z12{--radius:clamp(124px,41vw,145px)}
}
@media(max-width:360px){
.hero-orbit{height:300px;min-height:285px}.hero-orbit .sun{width:54px!important;height:54px!important;font-size:24px!important}
.zodiac-orb,.z10,.z11,.z12{width:43px!important;height:43px!important;margin:-21.5px!important}.zodiac-orb span{font-size:21px!important}
.z1,.z2,.z3{--radius:clamp(62px,21vw,68px)}.z4,.z5,.z6{--radius:clamp(82px,29vw,94px)}.z7,.z8,.z9,.z10,.z11,.z12{--radius:clamp(108px,39vw,124px)}
}
@media(prefers-reduced-motion:reduce){.zodiac-orb{transition:none!important}}

/* Chaotic zodiac layout: uneven angles and distances, decorative orbits remain in background */
.hero-orbit .zodiac-orb{transform:rotate(var(--angle)) translateY(calc(-1 * var(--radius))) rotate(calc(-1 * var(--angle)))!important}
.z1{--angle:7deg;--radius:104px}.z2{--angle:63deg;--radius:178px}.z3{--angle:126deg;--radius:132px}
.z4{--angle:171deg;--radius:222px}.z5{--angle:214deg;--radius:151px}.z6{--angle:258deg;--radius:205px}
.z7{--angle:301deg;--radius:119px}.z8{--angle:338deg;--radius:238px}.z9{--angle:42deg;--radius:239px}
.z10{--angle:94deg;--radius:107px}.z11{--angle:146deg;--radius:232px}.z12{--angle:286deg;--radius:166px}

@media(max-width:1024px){
.z1{--radius:91px}.z2{--radius:154px}.z3{--radius:114px}.z4{--radius:192px}.z5{--radius:131px}.z6{--radius:177px}
.z7{--radius:103px}.z8{--radius:205px}.z9{--radius:205px}.z10{--radius:93px}.z11{--radius:199px}.z12{--radius:143px}
}
@media(max-width:820px){
.z1{--radius:clamp(70px,20vw,91px)}.z2{--radius:clamp(112px,29vw,154px)}.z3{--radius:clamp(84px,23vw,114px)}
.z4{--radius:clamp(140px,37vw,192px)}.z5{--radius:clamp(96px,26vw,131px)}.z6{--radius:clamp(129px,34vw,177px)}
.z7{--radius:clamp(76px,21vw,103px)}.z8{--radius:clamp(149px,40vw,205px)}.z9{--radius:clamp(149px,40vw,205px)}
.z10{--radius:clamp(68px,20vw,93px)}.z11{--radius:clamp(145px,39vw,199px)}.z12{--radius:clamp(104px,28vw,143px)}
}
@media(max-width:560px){
.z1{--radius:clamp(60px,19vw,72px)}.z2{--radius:clamp(90px,28vw,112px)}.z3{--radius:clamp(68px,21vw,84px)}
.z4{--radius:clamp(112px,35vw,140px)}.z5{--radius:clamp(78px,24vw,96px)}.z6{--radius:clamp(103px,32vw,129px)}
.z7{--radius:clamp(62px,19vw,76px)}.z8{--radius:clamp(119px,37vw,149px)}.z9{--radius:clamp(119px,37vw,149px)}
.z10{--radius:clamp(58px,18vw,68px)}.z11{--radius:clamp(116px,36vw,145px)}.z12{--radius:clamp(83px,26vw,104px)}
}
@media(max-width:360px){
.z1{--radius:56px}.z2{--radius:84px}.z3{--radius:63px}.z4{--radius:104px}.z5{--radius:72px}.z6{--radius:95px}
.z7{--radius:57px}.z8{--radius:110px}.z9{--radius:110px}.z10{--radius:53px}.z11{--radius:107px}.z12{--radius:77px}
}
/* Hero positioning: bring the complete introductory block closer to the fixed header */
/* Final zodiac orb styling: subtle color, varied size, irregular placement */
.hero-orbit .zodiac-orb{width:var(--orb-size)!important;height:var(--orb-size)!important;margin:calc(var(--orb-size) / -2)!important;background:var(--orb-bg)!important;border:1px solid var(--orb-border)!important;color:var(--orb-color)!important;box-shadow:0 5px 18px rgba(30,28,55,.10),inset 0 0 0 1px rgba(255,255,255,.28)!important}
.hero-orbit .zodiac-orb span{font-size:clamp(20px,calc(var(--orb-size) * .48),27px)!important}
.z1{--orb-size:52px;--orb-bg:rgba(255,184,92,.16);--orb-border:rgba(230,151,49,.42);--orb-color:#b86b08}
.z2{--orb-size:44px;--orb-bg:rgba(104,177,255,.16);--orb-border:rgba(64,139,220,.40);--orb-color:#286eb1}
.z3{--orb-size:55px;--orb-bg:rgba(132,211,154,.17);--orb-border:rgba(67,163,94,.40);--orb-color:#2f8750}
.z4{--orb-size:48px;--orb-bg:rgba(184,143,255,.16);--orb-border:rgba(126,88,204,.40);--orb-color:#7042b7}
.z5{--orb-size:40px;--orb-bg:rgba(255,143,176,.17);--orb-border:rgba(220,87,125,.40);--orb-color:#bd466d}
.z6{--orb-size:53px;--orb-bg:rgba(93,201,202,.16);--orb-border:rgba(45,157,159,.40);--orb-color:#267f81}
.z7{--orb-size:46px;--orb-bg:rgba(255,205,92,.17);--orb-border:rgba(220,167,43,.42);--orb-color:#a77a08}
.z8{--orb-size:56px;--orb-bg:rgba(116,151,255,.17);--orb-border:rgba(75,109,211,.42);--orb-color:#3b59b1}
.z9{--orb-size:42px;--orb-bg:rgba(242,160,104,.16);--orb-border:rgba(211,119,61,.40);--orb-color:#a85627}
.z10{--orb-size:50px;--orb-bg:rgba(122,213,190,.17);--orb-border:rgba(58,167,141,.40);--orb-color:#287e6b}
.z11{--orb-size:45px;--orb-bg:rgba(194,157,255,.17);--orb-border:rgba(139,96,204,.40);--orb-color:#7045ad}
.z12{--orb-size:51px;--orb-bg:rgba(255,133,133,.16);--orb-border:rgba(215,82,82,.40);--orb-color:#b33f3f}
.hero-orbit .zodiac-orb:hover,.hero-orbit .zodiac-orb:focus-visible{box-shadow:0 10px 26px rgba(70,60,130,.20),inset 0 0 0 1px rgba(255,255,255,.34)!important}
@media(max-width:560px){.hero-orbit .zodiac-orb{--orb-size:calc(var(--orb-size) * .86)}}
@media(max-width:360px){.hero-orbit .zodiac-orb{--orb-size:calc(var(--orb-size) * .76)}}

/* Unified zodiac palette: one violet family, different saturation */
.zodiac-orb:nth-of-type(1),.zodiac-card:nth-child(1) .zodiac-symbol{color:hsl(258 82% 56%)}
.zodiac-orb:nth-of-type(2),.zodiac-card:nth-child(2) .zodiac-symbol{color:hsl(258 76% 59%)}
.zodiac-orb:nth-of-type(3),.zodiac-card:nth-child(3) .zodiac-symbol{color:hsl(258 70% 61%)}
.zodiac-orb:nth-of-type(4),.zodiac-card:nth-child(4) .zodiac-symbol{color:hsl(258 64% 63%)}
.zodiac-orb:nth-of-type(5),.zodiac-card:nth-child(5) .zodiac-symbol{color:hsl(258 58% 65%)}
.zodiac-orb:nth-of-type(6),.zodiac-card:nth-child(6) .zodiac-symbol{color:hsl(258 52% 67%)}
.zodiac-orb:nth-of-type(7),.zodiac-card:nth-child(7) .zodiac-symbol{color:hsl(258 48% 60%)}
.zodiac-orb:nth-of-type(8),.zodiac-card:nth-child(8) .zodiac-symbol{color:hsl(258 56% 58%)}
.zodiac-orb:nth-of-type(9),.zodiac-card:nth-child(9) .zodiac-symbol{color:hsl(258 64% 56%)}
.zodiac-orb:nth-of-type(10),.zodiac-card:nth-child(10) .zodiac-symbol{color:hsl(258 72% 54%)}
.zodiac-orb:nth-of-type(11),.zodiac-card:nth-child(11) .zodiac-symbol{color:hsl(258 78% 52%)}
.zodiac-orb:nth-of-type(12),.zodiac-card:nth-child(12) .zodiac-symbol{color:hsl(258 84% 50%)}
html[data-theme=dark] .zodiac-orb:nth-of-type(1),html[data-theme=dark] .zodiac-card:nth-child(1) .zodiac-symbol{color:hsl(258 82% 70%)}
html[data-theme=dark] .zodiac-orb:nth-of-type(2),html[data-theme=dark] .zodiac-card:nth-child(2) .zodiac-symbol{color:hsl(258 76% 71%)}
html[data-theme=dark] .zodiac-orb:nth-of-type(3),html[data-theme=dark] .zodiac-card:nth-child(3) .zodiac-symbol{color:hsl(258 70% 72%)}
html[data-theme=dark] .zodiac-orb:nth-of-type(4),html[data-theme=dark] .zodiac-card:nth-child(4) .zodiac-symbol{color:hsl(258 64% 73%)}
html[data-theme=dark] .zodiac-orb:nth-of-type(5),html[data-theme=dark] .zodiac-card:nth-child(5) .zodiac-symbol{color:hsl(258 58% 74%)}
html[data-theme=dark] .zodiac-orb:nth-of-type(6),html[data-theme=dark] .zodiac-card:nth-child(6) .zodiac-symbol{color:hsl(258 52% 75%)}
html[data-theme=dark] .zodiac-orb:nth-of-type(7),html[data-theme=dark] .zodiac-card:nth-child(7) .zodiac-symbol{color:hsl(258 48% 68%)}
html[data-theme=dark] .zodiac-orb:nth-of-type(8),html[data-theme=dark] .zodiac-card:nth-child(8) .zodiac-symbol{color:hsl(258 56% 67%)}
html[data-theme=dark] .zodiac-orb:nth-of-type(9),html[data-theme=dark] .zodiac-card:nth-child(9) .zodiac-symbol{color:hsl(258 64% 66%)}
html[data-theme=dark] .zodiac-orb:nth-of-type(10),html[data-theme=dark] .zodiac-card:nth-child(10) .zodiac-symbol{color:hsl(258 72% 65%)}
html[data-theme=dark] .zodiac-orb:nth-of-type(11),html[data-theme=dark] .zodiac-card:nth-child(11) .zodiac-symbol{color:hsl(258 78% 64%)}
html[data-theme=dark] .zodiac-orb:nth-of-type(12),html[data-theme=dark] .zodiac-card:nth-child(12) .zodiac-symbol{color:hsl(258 84% 63%)}


/* Final zodiac orb colors: higher specificity so each orbit circle is visibly different */
.hero-orbit .zodiac-orb.z1{--orb-bg:rgba(239,92,92,.18);--orb-border:rgba(211,65,65,.48);--orb-color:#c63f3f}
.hero-orbit .zodiac-orb.z2{--orb-bg:rgba(242,151,76,.18);--orb-border:rgba(211,117,46,.48);--orb-color:#b96325}
.hero-orbit .zodiac-orb.z3{--orb-bg:rgba(245,201,72,.20);--orb-border:rgba(205,157,34,.50);--orb-color:#a87908}
.hero-orbit .zodiac-orb.z4{--orb-bg:rgba(118,197,105,.18);--orb-border:rgba(73,157,69,.48);--orb-color:#438d3c}
.hero-orbit .zodiac-orb.z5{--orb-bg:rgba(67,188,172,.18);--orb-border:rgba(35,143,129,.48);--orb-color:#247f73}
.hero-orbit .zodiac-orb.z6{--orb-bg:rgba(76,153,224,.18);--orb-border:rgba(48,117,185,.48);--orb-color:#326fae}
.hero-orbit .zodiac-orb.z7{--orb-bg:rgba(91,112,220,.18);--orb-border:rgba(65,82,177,.48);--orb-color:#4658ae}
.hero-orbit .zodiac-orb.z8{--orb-bg:rgba(126,91,214,.18);--orb-border:rgba(91,61,169,.48);--orb-color:#6848ae}
.hero-orbit .zodiac-orb.z9{--orb-bg:rgba(180,91,211,.18);--orb-border:rgba(143,63,171,.48);--orb-color:#9343aa}
.hero-orbit .zodiac-orb.z10{--orb-bg:rgba(214,88,157,.18);--orb-border:rgba(176,58,121,.48);--orb-color:#aa3c7b}
.hero-orbit .zodiac-orb.z11{--orb-bg:rgba(226,103,126,.18);--orb-border:rgba(188,65,91,.48);--orb-color:#b9435d}
.hero-orbit .zodiac-orb.z12{--orb-bg:rgba(150,108,221,.18);--orb-border:rgba(110,72,177,.48);--orb-color:#774ab8}

html[data-theme=dark] .hero-orbit .zodiac-orb.z1{--orb-bg:rgba(255,108,108,.24);--orb-border:rgba(255,125,125,.58);--orb-color:#ff9a9a}
html[data-theme=dark] .hero-orbit .zodiac-orb.z2{--orb-bg:rgba(255,170,93,.24);--orb-border:rgba(255,180,108,.58);--orb-color:#ffc080}
html[data-theme=dark] .hero-orbit .zodiac-orb.z3{--orb-bg:rgba(255,216,89,.24);--orb-border:rgba(255,220,105,.58);--orb-color:#ffe08a}
html[data-theme=dark] .hero-orbit .zodiac-orb.z4{--orb-bg:rgba(120,218,105,.24);--orb-border:rgba(125,220,115,.58);--orb-color:#a4ee99}
html[data-theme=dark] .hero-orbit .zodiac-orb.z5{--orb-bg:rgba(69,211,190,.24);--orb-border:rgba(80,220,201,.58);--orb-color:#8beee0}
html[data-theme=dark] .hero-orbit .zodiac-orb.z6{--orb-bg:rgba(87,171,242,.24);--orb-border:rgba(96,183,248,.58);--orb-color:#9bcfff}
html[data-theme=dark] .hero-orbit .zodiac-orb.z7{--orb-bg:rgba(111,130,241,.24);--orb-border:rgba(125,143,255,.58);--orb-color:#aebcff}
html[data-theme=dark] .hero-orbit .zodiac-orb.z8{--orb-bg:rgba(151,111,235,.24);--orb-border:rgba(166,132,247,.58);--orb-color:#c6aaff}
html[data-theme=dark] .hero-orbit .zodiac-orb.z9{--orb-bg:rgba(206,111,235,.24);--orb-border:rgba(219,130,241,.58);--orb-color:#e4aaff}
html[data-theme=dark] .hero-orbit .zodiac-orb.z10{--orb-bg:rgba(239,105,176,.24);--orb-border:rgba(246,126,189,.58);--orb-color:#ffb0d5}
html[data-theme=dark] .hero-orbit .zodiac-orb.z11{--orb-bg:rgba(244,117,143,.24);--orb-border:rgba(249,139,160,.58);--orb-color:#ffb1c2}
html[data-theme=dark] .hero-orbit .zodiac-orb.z12{--orb-bg:rgba(177,126,240,.24);--orb-border:rgba(190,145,249,.58);--orb-color:#d0b1ff}

.hero-orbit .zodiac-orb{background:var(--orb-bg);border-color:var(--orb-border);color:var(--orb-color)}
/* Unified violet-blue palette for all zodiac circles */
.hero-orbit .zodiac-orb.z1{--orb-bg:rgba(86,72,190,.16);--orb-border:rgba(86,72,190,.38);--orb-color:#5d52b8}
.hero-orbit .zodiac-orb.z2{--orb-bg:rgba(91,78,198,.16);--orb-border:rgba(91,78,198,.38);--orb-color:#6258bd}
.hero-orbit .zodiac-orb.z3{--orb-bg:rgba(96,84,205,.17);--orb-border:rgba(96,84,205,.39);--orb-color:#675ec2}
.hero-orbit .zodiac-orb.z4{--orb-bg:rgba(101,89,211,.17);--orb-border:rgba(101,89,211,.39);--orb-color:#6c64c7}
.hero-orbit .zodiac-orb.z5{--orb-bg:rgba(106,94,216,.17);--orb-border:rgba(106,94,216,.40);--orb-color:#7169cb}
.hero-orbit .zodiac-orb.z6{--orb-bg:rgba(111,100,221,.18);--orb-border:rgba(111,100,221,.40);--orb-color:#766fce}
.hero-orbit .zodiac-orb.z7{--orb-bg:rgba(116,105,226,.18);--orb-border:rgba(116,105,226,.41);--orb-color:#7b75d2}
.hero-orbit .zodiac-orb.z8{--orb-bg:rgba(121,110,231,.18);--orb-border:rgba(121,110,231,.41);--orb-color:#807bd6}
.hero-orbit .zodiac-orb.z9{--orb-bg:rgba(126,115,234,.18);--orb-border:rgba(126,115,234,.42);--orb-color:#8581d9}
.hero-orbit .zodiac-orb.z10{--orb-bg:rgba(131,120,237,.19);--orb-border:rgba(131,120,237,.42);--orb-color:#8a87dc}
.hero-orbit .zodiac-orb.z11{--orb-bg:rgba(136,125,240,.19);--orb-border:rgba(136,125,240,.43);--orb-color:#8f8de0}
.hero-orbit .zodiac-orb.z12{--orb-bg:rgba(141,130,243,.19);--orb-border:rgba(141,130,243,.43);--orb-color:#9493e4}

/* Final compact orbital system: every zodiac orb sits exactly on an orbit centerline. */
.hero-orbit{position:relative!important;width:min(380px,100%)!important;height:380px!important;min-height:0!important;margin-inline:auto!important;isolation:isolate!important}
.hero-orbit .orbit{position:absolute!important;left:50%!important;top:50%!important;transform:translate(-50%,-50%)!important;border:1px solid rgba(99,87,217,.24)!important;border-radius:50%!important;background:none!important;box-shadow:none!important;pointer-events:none!important}
.hero-orbit .orbit-1{width:100px!important;height:100px!important}
.hero-orbit .orbit-2{width:173px!important;height:173px!important}
.hero-orbit .orbit-3{width:246px!important;height:246px!important}
.hero-orbit .orbit-4{width:320px!important;height:320px!important}
.hero-orbit .sun{position:absolute!important;left:50%!important;top:50%!important;z-index:8!important;transform:translate(-50%,-50%)!important;width:58px!important;height:58px!important;margin:0!important;padding:0!important;border-radius:50%!important;display:grid!important;place-items:center!important;background:radial-gradient(circle at 35% 30%,#80aaff 0%,#4b7fe5 52%,#2d59b8 100%)!important;border:2px solid rgba(255,255,255,.82)!important;box-shadow:0 0 0 7px rgba(67,111,220,.10),0 8px 24px rgba(35,70,150,.28)!important;color:#fff!important;font-size:0!important;line-height:0!important}
.hero-orbit .sun svg{display:block!important;width:30px!important;height:30px!important;fill:#fff!important;stroke:#fff!important;stroke-width:1.2!important;overflow:visible!important}
.hero-orbit .zodiac-orb{position:absolute!important;left:50%!important;top:50%!important;z-index:6!important;width:46px!important;height:46px!important;margin:-23px!important;padding:0!important;border-radius:50%!important;display:grid!important;place-items:center!important;box-sizing:border-box!important;transform:rotate(var(--angle)) translateY(calc(-1 * var(--radius))) rotate(calc(-1 * var(--angle)))!important;transition:box-shadow .2s ease,transform .2s ease,border-color .2s ease!important}
.hero-orbit .zodiac-orb span{font-size:22px!important;line-height:1!important}
/* Three signs per orbit, with their centers exactly on the corresponding ring. */
.hero-orbit .z1{--angle:0deg;--radius:50px}
.hero-orbit .z2{--angle:120deg;--radius:50px}
.hero-orbit .z3{--angle:240deg;--radius:50px}
.hero-orbit .z4{--angle:0deg;--radius:86.5px}
.hero-orbit .z5{--angle:120deg;--radius:86.5px}
.hero-orbit .z6{--angle:240deg;--radius:86.5px}
.hero-orbit .z7{--angle:0deg;--radius:123px}
.hero-orbit .z8{--angle:120deg;--radius:123px}
.hero-orbit .z9{--angle:240deg;--radius:123px}
.hero-orbit .z10{--angle:0deg;--radius:160px}
.hero-orbit .z11{--angle:120deg;--radius:160px}
.hero-orbit .z12{--angle:240deg;--radius:160px}
.hero-orbit .zodiac-orb:hover,.hero-orbit .zodiac-orb:focus-visible{transform:rotate(var(--angle)) translateY(calc(-1 * var(--radius))) rotate(calc(-1 * var(--angle))) scale(1.1)!important;outline:none!important}

@media(max-width:560px){
 .hero-orbit{width:min(320px,100%)!important;height:320px!important}
 .hero-orbit .orbit-1{width:84px!important;height:84px!important}.hero-orbit .orbit-2{width:145px!important;height:145px!important}.hero-orbit .orbit-3{width:205px!important;height:205px!important}.hero-orbit .orbit-4{width:270px!important;height:270px!important}
 .hero-orbit .sun{width:54px!important;height:54px!important}.hero-orbit .sun svg{width:27px!important;height:27px!important}
 .hero-orbit .zodiac-orb{width:42px!important;height:42px!important;margin:-21px!important}.hero-orbit .zodiac-orb span{font-size:20px!important}
 .hero-orbit .z1,.hero-orbit .z2,.hero-orbit .z3{--radius:42px}.hero-orbit .z4,.hero-orbit .z5,.hero-orbit .z6{--radius:72.5px}.hero-orbit .z7,.hero-orbit .z8,.hero-orbit .z9{--radius:102.5px}.hero-orbit .z10,.hero-orbit .z11,.hero-orbit .z12{--radius:135px}
}
@media(max-width:360px){
 .hero-orbit{width:min(286px,100%)!important;height:286px!important}
 .hero-orbit .orbit-1{width:75px!important;height:75px!important}.hero-orbit .orbit-2{width:130px!important;height:130px!important}.hero-orbit .orbit-3{width:185px!important;height:185px!important}.hero-orbit .orbit-4{width:240px!important;height:240px!important}
 .hero-orbit .sun{width:50px!important;height:50px!important}.hero-orbit .sun svg{width:25px!important;height:25px!important}
 .hero-orbit .zodiac-orb{width:38px!important;height:38px!important;margin:-19px!important}.hero-orbit .zodiac-orb span{font-size:18px!important}
 .hero-orbit .z1,.hero-orbit .z2,.hero-orbit .z3{--radius:37.5px}.hero-orbit .z4,.hero-orbit .z5,.hero-orbit .z6{--radius:65px}.hero-orbit .z7,.hero-orbit .z8,.hero-orbit .z9{--radius:92.5px}.hero-orbit .z10,.hero-orbit .z11,.hero-orbit .z12{--radius:120px}
}
@media(prefers-reduced-motion:reduce){.hero-orbit .zodiac-orb{transition:none!important}}


/* Final orbit composition: +20% area, asymmetric placement and varied zodiac circles */
@media (min-width:821px){
.hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.08fr)}
.hero-orbit{width:min(672px,120%);height:min(672px,50vw);min-height:504px;max-width:none}
.hero-orbit .orbit-1{width:180px!important;height:180px!important}.hero-orbit .orbit-2{width:312px!important;height:312px!important}.hero-orbit .orbit-3{width:444px!important;height:444px!important}.hero-orbit .orbit-4{width:576px!important;height:576px!important}
.hero-orbit .sun{width:86px!important;height:86px!important;font-size:36px!important}
.zodiac-orb{margin:calc(var(--size) / -2)!important;width:var(--size)!important;height:var(--size)!important}
.z1{--angle:8deg;--radius:118px;--size:50px}.z2{--angle:58deg;--radius:190px;--size:68px}.z3{--angle:119deg;--radius:142px;--size:56px}.z4{--angle:167deg;--radius:264px;--size:62px}.z5{--angle:213deg;--radius:176px;--size:48px}.z6{--angle:251deg;--radius:232px;--size:72px}.z7{--angle:302deg;--radius:128px;--size:54px}.z8{--angle:337deg;--radius:285px;--size:46px}.z9{--angle:43deg;--radius:268px;--size:64px}.z10{--angle:93deg;--radius:211px;--size:52px}.z11{--angle:184deg;--radius:126px;--size:70px}.z12{--angle:289deg;--radius:218px;--size:44px}
.zodiac-orb span{font-size:calc(var(--size) * .46)!important}
}
@media (max-width:1024px) and (min-width:821px){
.hero-orbit{width:120%;height:540px;min-height:456px}.hero-orbit .orbit-1{width:156px!important;height:156px!important}.hero-orbit .orbit-2{width:270px!important;height:270px!important}.hero-orbit .orbit-3{width:384px!important;height:384px!important}.hero-orbit .orbit-4{width:498px!important;height:498px!important}
.z1{--radius:104px}.z2{--radius:158px}.z3{--radius:122px}.z4{--radius:228px}.z5{--radius:146px}.z6{--radius:200px}.z7{--radius:110px}.z8{--radius:246px}.z9{--radius:230px}.z10{--radius:182px}.z11{--radius:108px}.z12{--radius:190px}
}
@media (max-width:820px){
.hero-orbit{width:min(120%,600px);height:min(120vw,600px);min-height:396px}.hero-orbit .orbit-1{width:31%!important;height:31%!important}.hero-orbit .orbit-2{width:51%!important;height:51%!important}.hero-orbit .orbit-3{width:70%!important;height:70%!important}.hero-orbit .orbit-4{width:88%!important;height:88%!important}
.z1{--angle:8deg;--radius:clamp(72px,23vw,96px);--size:clamp(44px,9vw,58px)}.z2{--angle:58deg;--radius:clamp(100px,31vw,132px);--size:clamp(50px,11vw,68px)}.z3{--angle:119deg;--radius:clamp(82px,25vw,108px);--size:clamp(43px,9vw,56px)}.z4{--angle:167deg;--radius:clamp(128px,39vw,166px);--size:clamp(52px,10vw,64px)}.z5{--angle:213deg;--radius:clamp(94px,28vw,120px);--size:clamp(42px,8vw,50px)}.z6{--angle:251deg;--radius:clamp(116px,35vw,150px);--size:clamp(55px,12vw,72px)}.z7{--angle:302deg;--radius:clamp(76px,23vw,100px);--size:clamp(45px,9vw,56px)}.z8{--angle:337deg;--radius:clamp(138px,42vw,178px);--size:clamp(40px,8vw,48px)}.z9{--angle:43deg;--radius:clamp(128px,38vw,162px);--size:clamp(50px,10vw,64px)}.z10{--angle:93deg;--radius:clamp(104px,31vw,132px);--size:clamp(44px,9vw,54px)}.z11{--angle:184deg;--radius:clamp(74px,22vw,96px);--size:clamp(52px,11vw,68px)}.z12{--angle:289deg;--radius:clamp(112px,34vw,142px);--size:clamp(40px,8vw,48px)}
.zodiac-orb{width:var(--size)!important;height:var(--size)!important;margin:calc(var(--size) / -2)!important}.zodiac-orb span{font-size:calc(var(--size) * .46)!important}
}
@media (max-width:560px){
.hero-orbit{width:min(120%,420px);height:420px;min-height:350px}.z1{--radius:74px;--size:45px}.z2{--radius:106px;--size:55px}.z3{--radius:84px;--size:43px}.z4{--radius:132px;--size:52px}.z5{--radius:98px;--size:41px}.z6{--radius:118px;--size:58px}.z7{--radius:76px;--size:46px}.z8{--radius:140px;--size:39px}.z9{--radius:130px;--size:51px}.z10{--radius:106px;--size:44px}.z11{--radius:78px;--size:54px}.z12{--radius:114px;--size:40px}
}
@media (max-width:360px){
.hero-orbit{width:120%;height:330px;min-height:300px}.z1{--radius:65px;--size:40px}.z2{--radius:88px;--size:48px}.z3{--radius:70px;--size:39px}.z4{--radius:108px;--size:45px}.z5{--radius:82px;--size:38px}.z6{--radius:98px;--size:50px}.z7{--radius:63px;--size:41px}.z8{--radius:116px;--size:36px}.z9{--radius:106px;--size:45px}.z10{--radius:86px;--size:39px}.z11{--radius:66px;--size:47px}.z12{--radius:94px;--size:37px}
}

/* Mobile final override: keep the enlarged composition without clipping */
@media(max-width:560px){.hero-orbit{width:min(120%,420px)!important;height:420px!important;min-height:350px!important}}
@media(max-width:360px){.hero-orbit{width:120%!important;height:330px!important;min-height:300px!important}}


/* Hero without orbit composition */
.hero-grid{grid-template-columns:minmax(0,1fr)!important}
.hero-orbit{display:none!important}


/* Hero text lines: full available width, no wrapping, no punctuation */
.hero h1 .hero-line{display:block;white-space:nowrap;width:max-content;max-width:none}
@media(max-width:560px){.hero h1 .hero-line{font-size:clamp(2rem,9vw,3.1rem)}}


/* Preserve original hero typography/colors while keeping both lines unwrapped */
.hero h1 .hero-line:first-child{display:block;white-space:nowrap;width:max-content;max-width:none;color:inherit;font:inherit;line-height:inherit;letter-spacing:inherit}
.hero h1 .hero-line:last-child{display:block;white-space:nowrap;width:max-content;max-width:none;color:inherit;font:inherit;line-height:inherit;letter-spacing:inherit}

/* Restore original accent styling of the second hero line */
.hero h1 .hero-line:last-child{color:var(--accent);font-family:inherit;font-weight:inherit;font-style:normal}

/* Remove decorative purple glow from the homepage hero */
.hero{background:var(--bg)!important}
/* Final responsive hero typography: both headline lines stay on one line */
@media (max-width:560px){
  .hero h1 .hero-line{
    font-size:clamp(1.35rem,7.5vw,2.5rem)!important;
    line-height:1.12!important;
    white-space:nowrap!important;
    width:max-content!important;
    max-width:none!important;
  }
}
@media (max-width:360px){
  .hero h1 .hero-line{font-size:clamp(1.35rem,7.5vw,2.5rem)!important;}
}

/* Bring the "Сегодня / Гороскоп для всех знаков" block closer to the hero */
/* Horoscope period navigation */
.period-nav{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:12px}.period-nav a{display:inline-flex;align-items:center;justify-content:center;min-height:36px;padding:0 14px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--muted);font-size:13px;font-weight:800;text-decoration:none;transition:.2s ease}.period-nav a:hover,.period-nav a:focus-visible,.period-nav a.active{color:var(--accent);border-color:var(--accent);background:color-mix(in srgb,var(--accent) 9%,var(--surface))}@media(max-width:560px){.period-nav{gap:6px;margin-bottom:10px}.period-nav a{min-height:34px;padding:0 12px;font-size:12px}}

/* Compatibility article: keep normal document flow with the unified 50px section spacing */
@media (max-width:820px){.compatibility-article{transform:none}}



/* Exact 50px separation between compatibility score cards and the article below. */
.compat-scores-section{padding-bottom:0!important}
.compat-content-section{padding-top:50px!important}

/* Prediction ball */
.ball-section{padding-top:clamp(38px,5vw,64px)}
.ball-layout{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr);gap:24px;align-items:stretch}
.magic-ball-card,.ball-info .content-card{background:var(--surface);border:1px solid var(--line);border-radius:28px;box-shadow:var(--shadow)}
.magic-ball-card{padding:clamp(22px,4vw,38px);display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:620px;overflow:hidden}
.magic-ball-stage{position:relative;width:min(100%,520px);aspect-ratio:1;display:grid;place-items:center;touch-action:none}
.magic-ball-glow{position:absolute;width:72%;height:72%;border-radius:50%;background:radial-gradient(circle,rgba(99,87,217,.25),rgba(99,87,217,.08) 48%,transparent 70%);filter:blur(20px)}
.magic-ball{position:relative;width:min(72%,360px);aspect-ratio:1;border-radius:50%;cursor:pointer;user-select:none;background:radial-gradient(circle at 35% 28%,#bdb5ff 0,#7769df 25%,#41369c 55%,#1d174e 100%);border:10px solid color-mix(in srgb,var(--accent) 22%,var(--surface));box-shadow:inset -24px -28px 55px rgba(0,0,0,.28),inset 14px 16px 28px rgba(255,255,255,.18),0 28px 70px rgba(49,40,132,.28);touch-action:none;transition:transform .25s ease,filter .25s ease}
.magic-ball:hover{transform:translateY(-4px);filter:saturate(1.08)}.magic-ball.rubbing{transform:scale(.97) rotate(-2deg);filter:saturate(1.2) brightness(1.08)}.magic-ball.thinking{animation:ball-pulse .65s ease-in-out}.magic-ball.revealed{box-shadow:inset -24px -28px 55px rgba(0,0,0,.28),inset 14px 16px 28px rgba(255,255,255,.18),0 28px 90px rgba(99,87,217,.45)}
.magic-ball-shine{position:absolute;inset:5% 12% 42% 12%;border-radius:50%;background:linear-gradient(150deg,rgba(255,255,255,.35),rgba(255,255,255,0));transform:rotate(-12deg);filter:blur(3px)}
.magic-ball-core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:42%;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 35% 30%,#eef0ff,#aeb4ee 48%,#6971b7 100%);border:5px solid rgba(255,255,255,.34);box-shadow:inset 0 5px 16px rgba(255,255,255,.4),0 8px 22px rgba(10,8,50,.3)}
.magic-ball-answer{width:84%;text-align:center;color:#22234c;font-size:clamp(12px,1.5vw,16px);line-height:1.25;font-weight:800;opacity:.35;transform:scale(.88);transition:opacity .3s,transform .35s}.magic-ball-answer.show{opacity:1;transform:scale(1)}
.ball-ripple{position:absolute;width:78%;aspect-ratio:1;border:2px solid rgba(139,127,242,.55);border-radius:50%;opacity:0;pointer-events:none}.ball-ripple.active{animation:ball-ripple 1s ease-out}
.ball-status{min-height:28px;margin:2px 0 16px;color:var(--muted);font-size:13px;text-align:center}.ball-button{min-width:240px}.ball-reset{margin-top:10px;min-width:240px}
.ball-info{display:grid;gap:18px;align-content:center}.ball-info .content-card{padding:clamp(22px,4vw,34px)}.ball-info h2{font-size:clamp(25px,3vw,34px)}.ball-info h3{font-size:23px}.ball-info p{color:var(--muted)}.ball-tip{background:linear-gradient(145deg,var(--surface),color-mix(in srgb,var(--accent) 6%,var(--surface)))}
@keyframes ball-pulse{0%{transform:scale(1)}35%{transform:scale(.96)}70%{transform:scale(1.02)}100%{transform:scale(1)}}@keyframes ball-ripple{0%{opacity:.8;transform:scale(.55)}100%{opacity:0;transform:scale(1.15)}}
@media(max-width:820px){.ball-layout{grid-template-columns:1fr}.magic-ball-card{min-height:0}.ball-info{grid-template-columns:1fr 1fr}.magic-ball-stage{max-width:460px}}
@media(max-width:560px){.magic-ball-card{padding:20px 14px;border-radius:22px}.magic-ball-stage{max-width:390px}.ball-info{grid-template-columns:1fr}.ball-button,.ball-reset{width:100%;min-width:0}.magic-ball{width:70%}}
@media(prefers-reduced-motion:reduce){.magic-ball,.magic-ball-answer,.ball-ripple{transition:none!important;animation:none!important}}

/* Prediction ball */
.ball-section{padding-top:clamp(28px,4vw,52px)}.ball-card{max-width:900px;margin:0 auto;background:var(--surface);border:1px solid var(--line);border-radius:28px;box-shadow:var(--shadow);padding:clamp(18px,3vw,34px);overflow:hidden}.ball-title{text-align:center;margin:0 0 10px;font-size:clamp(22px,3vw,32px)}.ball-wrap{display:flex;justify-content:center}.ball-stage{position:relative;width:min(100%,600px);aspect-ratio:1;display:grid;place-items:center;touch-action:none}.ball-img{position:relative;z-index:1;display:block;width:100%;height:100%;object-fit:contain;user-select:none}.ball-stage canvas{position:absolute;inset:0;width:100%;height:100%;z-index:3;touch-action:none;clip-path:circle(50% at 50% 50%)}.ball-img{pointer-events:none}.ball-stage #particles{z-index:4;pointer-events:none}.ball-glow{position:absolute;z-index:0;width:72%;height:72%;border-radius:50%;background:radial-gradient(circle,rgba(99,87,217,.25),rgba(99,87,217,.08) 48%,transparent 70%);filter:blur(22px)}.ball-limit{display:none;margin:4px auto 14px;max-width:620px;padding:11px 16px;border:1px solid var(--line);border-radius:14px;background:var(--surface-2);color:var(--muted);text-align:center;font-weight:700}.ball-limit:not([hidden]){display:block}.ball-prediction{max-width:760px;margin:0 auto;padding:22px 24px;border:1px solid var(--line);border-radius:20px;background:var(--surface-2);text-align:center}.ball-prediction h2{margin:0 0 10px;font-size:clamp(20px,2.4vw,28px)}.ball-prediction p{margin:0;color:var(--muted);font-size:clamp(15px,1.7vw,18px);line-height:1.65}.ball-prediction.is-revealed{border-color:color-mix(in srgb,var(--accent) 35%,var(--line));background:color-mix(in srgb,var(--accent) 6%,var(--surface-2))}.ball-description{max-width:900px;margin:24px auto 0;padding:clamp(20px,3vw,30px)}.ball-description h2{margin-top:0}.ball-description p:last-child{margin-bottom:0}@media(max-width:560px){.ball-card{padding:14px 10px;border-radius:22px}.ball-title{font-size:21px}.ball-prediction{padding:18px 14px}}

/* Prediction ball layout: ball is outside all cards; result blocks sit below it. */
.ball-section{padding-top:clamp(28px,4vw,52px)}
.ball-title-wrap{text-align:center;margin:0 auto 8px}
.ball-title{margin:0;font-size:clamp(22px,3vw,32px)}
.ball-wrap{display:flex;justify-content:center}
.ball-stage{position:relative;width:min(100%,600px);aspect-ratio:1;display:grid;place-items:center;touch-action:none}
.ball-img{position:absolute;z-index:1;display:block;width:50%;height:50%;left:25%;top:25%;object-fit:contain;border-radius:50%;user-select:none}
.ball-stage canvas{position:absolute;left:25%;top:25%;width:50%;height:50%;z-index:3;touch-action:none}
.ball-stage #particles{z-index:4;pointer-events:none}
.ball-glow{position:absolute;z-index:0;width:72%;height:72%;border-radius:50%;background:radial-gradient(circle,rgba(99,87,217,.25),rgba(99,87,217,.08) 48%,transparent 70%);filter:blur(22px)}
.ball-result{max-width:760px;margin:8px auto 0;display:grid;gap:12px}
.ball-prediction{margin:0;padding:22px 24px;border:1px solid var(--line);border-radius:20px;background:var(--surface);box-shadow:var(--shadow);text-align:center}
.ball-prediction h2{margin:0 0 10px;font-size:clamp(20px,2.4vw,28px)}
.ball-prediction p{margin:0;color:var(--muted);font-size:clamp(15px,1.7vw,18px);line-height:1.65}
.ball-prediction.is-revealed{border-color:color-mix(in srgb,var(--accent) 35%,var(--line));background:color-mix(in srgb,var(--accent) 6%,var(--surface))}
.ball-limit{display:none;margin:0;padding:11px 16px;border:1px solid var(--line);border-radius:14px;background:var(--surface);box-shadow:var(--shadow);color:var(--muted);text-align:center;font-weight:700}
.ball-limit:not([hidden]){display:block}
.ball-description{max-width:900px;margin:24px auto 0;padding:clamp(20px,3vw,30px)}
.ball-description h2{margin-top:0}
.ball-description p:last-child{margin-bottom:0}
@media(max-width:560px){
 .ball-section{padding-top:24px}
 .ball-title-wrap{margin-bottom:4px}
 .ball-title{font-size:21px}
 .ball-stage{width:min(100%,390px)}
 .ball-result{margin-top:4px}
 .ball-prediction{padding:18px 14px}
}

/* Prediction ball adjustments */
.ball-stage{transform:translateY(-10px)}
.ball-result{margin-top:28px}
.ball-limit[hidden]{display:none!important}

/* Unified homepage vertical rhythm: keep the hero and first section compact. */
@media (min-width:561px){
  .hero{padding-top:clamp(22px,3.5vw,41px);padding-bottom:clamp(29px,4vw,45px)}
  .hero + .section{padding-top:clamp(8px,1.25vw,15px)}
}
@media (min-width:1440px){
  .hero{padding-top:47px;padding-bottom:52px}
  .hero + .section{padding-top:16px}
}
@media (max-width:560px){
  .hero{padding-bottom:36px}
  .hero + .section{padding-top:clamp(10px,1.75vw,11px)}
}
@media (max-width:360px){
  .hero{padding-bottom:34px}
  .hero + .section{padding-top:10px}
}


/* Prediction ball: match the Tarot cards block width on desktop and mobile. */
.ball-stage{width:100%;max-width:900px}
@media(max-width:560px){.ball-stage{width:100%;max-width:none}}

/* Magic ball: the layout box must match the visible ball size. */
.ball-stage{width:min(100%,600px);max-width:600px}
.ball-img{width:100%;height:100%;left:0;top:0}
.ball-stage canvas{left:0;top:0;width:100%;height:100%}
@media(max-width:560px){.ball-stage{width:min(100%,390px);max-width:390px}}

/* Prediction ball: reduce visible ball size by 30% */
.ball-stage{width:min(70%,420px)!important;max-width:420px!important}
@media(max-width:560px){.ball-stage{width:min(70%,273px)!important;max-width:273px!important}}

/* Prediction ball: mobile position +15px */
@media(max-width:560px){.ball-stage{transform:translateY(5px)!important}}

/* Prediction ball: match prediction window width to description block */
.ball-prediction{max-width:900px!important}

/* Prediction ball: result container matches description block */
.ball-result{max-width:900px!important}

/* Prediction ball: result container matches description block */
.ball-result{max-width:900px!important}
.ball-prediction{width:100% !important;box-sizing:border-box}

/* Prediction ball: timeout block matches result width and has a subtle red tint */
.ball-limit{width:100%;max-width:none!important;box-sizing:border-box;background:color-mix(in srgb,#d66 7%,var(--surface))!important;border-color:color-mix(in srgb,#c55 22%,var(--line))!important;color:color-mix(in srgb,#a33 72%,var(--muted))!important}

/* Align every content block beneath the prediction ball to one shared width and spacing. */
/* Align all blocks below the prediction ball to a shared width and spacing. */
.ball-section .ball-result,
.ball-section .ball-description {
  width: 100%;
  max-width: 900px !important;
  box-sizing: border-box;
  margin-left: auto !important;
  margin-right: auto !important;
}
.ball-section .ball-result {
  margin-top: 22px !important;
  margin-bottom: 0;
  gap: 22px;
}
.ball-section .ball-result > .ball-limit,
.ball-section .ball-result > .ball-prediction {
  width: 100%;
  max-width: none !important;
  box-sizing: border-box;
  margin: 0 !important;
}
.ball-section .ball-description {
  margin-top: 22px !important;
}

/* Keep the initial description aligned with the result panel's top;
   add the gap only after a prediction or timeout becomes visible. */
.ball-section .ball-result {
  margin-top: 36px !important;
}
.ball-section .ball-description {
  margin-top: 0 !important;
}
.ball-section .ball-result:has(> .ball-prediction:not([hidden])) ~ .ball-description,
.ball-section .ball-result:has(> .ball-limit:not([hidden])) ~ .ball-description {
  margin-top: 22px !important;
}

/* Left-align the prediction text while keeping the prediction panel centered. */
.ball-section .ball-prediction {
  text-align: left !important;
}

/* Desktop navigation: keep links within half of the header content width. */
@media (min-width:821px){
 .header-inner{gap:clamp(12px,1.6vw,24px)}
 .desktop-nav{position:relative;flex:0 1 50%;width:50%;max-width:50%;min-width:0;gap:clamp(8px,.85vw,14px);align-items:center;white-space:nowrap;overflow:visible}
 .desktop-nav>a{flex:0 0 auto;white-space:nowrap}
 .desktop-nav>a.nav-overflow-hidden{display:none}
 .nav-more{position:relative;display:inline-flex;flex:0 0 auto}
 .nav-more[hidden]{display:none}
 .nav-more-toggle{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--line);background:var(--surface);color:var(--text);border-radius:10px;padding:8px 10px;font:inherit;font-size:13px;font-weight:700;cursor:pointer;white-space:nowrap}
 .nav-more-toggle:hover,.nav-more-toggle[aria-expanded="true"]{border-color:var(--accent2);color:var(--accent)}
 .nav-more-menu{position:absolute;top:calc(100% + 12px);right:0;z-index:120;display:none;min-width:230px;max-width:min(320px,80vw);padding:8px;border:1px solid var(--line);border-radius:16px;background:var(--surface);box-shadow:var(--shadow);white-space:normal}
 .nav-more-menu.open{display:grid;gap:2px}
 .nav-more-menu a{display:block;padding:10px 12px;border-radius:9px;line-height:1.35;font-size:13px}
 .nav-more-menu a:hover{background:var(--surface2);color:var(--accent)}
}


/* Keep desktop navigation close to the theme switch. */
@media (min-width:821px){
 .header-inner{gap:8px}
 .desktop-nav{margin-left:auto;margin-right:0}
 .header-actions{margin-left:0;gap:6px}
}


/* Exact spacing between the desktop nav and theme toggle. */
@media (min-width:821px){
 .header-inner{gap:0}
 .desktop-nav{margin-left:auto;margin-right:15px;flex:0 1 50%;width:50%;max-width:50%}
 .header-actions{margin-left:0;gap:6px}
}


/* Fix auto-margin competition: anchor the nav 15px before the theme controls. */
@media (min-width:821px){
 .header-inner > .brand{margin-right:0!important}
 .header-inner > .desktop-nav{margin-left:auto!important;margin-right:15px!important}
 .header-inner > .header-actions{margin-left:0!important}
}


/* Align the visible desktop links to the theme control, not to the left edge of the nav slot. */
@media (min-width:821px){
 .header-inner > nav.desktop-nav[data-desktop-nav]{
   justify-content:flex-end!important;
   margin-left:auto!important;
   margin-right:15px!important;
   text-align:right;
 }
 .header-inner > .header-actions{margin-left:0!important}
}


/* Compatibility SEO card follows the same width, spacing and appearance as the Tarot description card. */
.compatibility-seo-section{padding-top:22px;margin-top:-85px}
@media (max-width: 767px){
  .compatibility-seo-section{margin-top:-67px}
}
.compatibility-seo-section .compatibility-seo{
  width:100%;
  max-width:900px;
  margin:0 auto;
}


/* Keep the compatibility selector the same width as the SEO text card below it. */
.compat-picker{
  width:100%;
  max-width:900px;
  margin-left:auto;
  margin-right:auto;
}


/* Lift the compatibility sign picker further on desktop and mobile. */
@media (min-width: 769px) {
  .compat-picker { transform: translateY(-30px); }
}
@media (max-width: 768px) {
  .compat-picker { transform: translateY(-15px); }
}\n

/* Force the compatibility text card 17px lower on mobile. */
@media (max-width: 767px) {
  .compatibility-seo-section .compatibility-seo {
    position: relative !important;
    top: 27px !important;
  }
}


/* Mobile compatibility SEO card: move it an additional 10px down. */
@media (max-width: 767px) {
  body .compatibility-seo-section article.content-card.compatibility-seo {
    transform: translateY(10px) !important;
  }
}

/* Make the compatibility result text card the same width as the sign picker. */
.compat-content-section > .container.content-narrow {
  width: 100%;
  max-width: 900px;
}
.compat-content-section .compatibility-article {
  width: 100%;
  box-sizing: border-box;
}


/* Keep the three compatibility score cards within the same 900px column as the picker and result text. */
.compat-scores-section > .container {
  width: 100%;
  max-width: 900px;
  margin-inline: auto;
}
.compat-scores-section .compat-score-grid {
  width: 100%;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 680px) {
  .compat-scores-section .compat-score-grid {
    grid-template-columns: 1fr;
  }
}


/* Central bordered content panels only; overall page widths remain unchanged. */
.content-card{width:100%;max-width:900px;margin-inline:auto}

/* Unify the central bordered content/form panels across key pages at 900px. */
.compat-picker{width:100%;max-width:900px;margin-inline:auto;box-sizing:border-box}
.personal-container{width:100%;max-width:900px!important;margin-inline:auto}
.ball-section .ball-description{width:100%;max-width:900px;margin-inline:auto;box-sizing:border-box}
.taro-section .taro-description{width:100%;max-width:900px;margin-inline:auto;box-sizing:border-box}


/* Compatibility sign pickers: dropdown rows styled like the answer suggestions on /test-anxiety. */
.compat-sign-picker{position:relative;display:block;min-width:0}
/* Keep the picker anchored at the top of its grid cell so its option list expands downward. */
.compat-form .compat-sign-label{align-self:start;min-width:0}
.compat-sign-trigger{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:52px;padding:9px 14px;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--text);text-align:left;cursor:pointer;transition:border-color .18s,background .18s,box-shadow .18s}
.compat-sign-trigger:hover,.compat-sign-picker:focus-within .compat-sign-trigger{background:var(--surface2);border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent)}
.compat-sign-trigger:focus-visible{outline:2px solid color-mix(in srgb,var(--accent) 24%,transparent);border-color:var(--accent)}
.compat-sign-options{position:static;display:grid;grid-template-columns:minmax(0,1fr);gap:2px;width:100%;max-height:none;margin:6px 0 0;overflow:visible;overscroll-behavior:auto;scrollbar-width:none;-ms-overflow-style:none}
.compat-sign-options::-webkit-scrollbar{display:none;width:0;height:0}
/* Expand the enclosing form panel while options are open, keeping the dropdown inside its border. */
.compat-picker:has(.compat-sign-options:not([hidden])){padding-bottom:clamp(20px,4vw,38px)}
.compat-sign-options[hidden]{display:none!important}
.compat-sign-option{display:block;width:100%;box-sizing:border-box;margin:0;padding:9px 12px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--text);font:inherit;line-height:1.5;text-align:left;cursor:pointer;transition:background .15s,border-color .15s}
.compat-sign-option:hover,.compat-sign-option:focus-visible{background:var(--surface2);border-color:var(--accent);color:var(--text);outline:none}
html[data-theme="dark"] .compat-sign-trigger,html[data-theme="dark"] .compat-sign-option{background:var(--surface);color:var(--text);border-color:var(--line)}
html[data-theme="dark"] .compat-sign-trigger:hover,html[data-theme="dark"] .compat-sign-picker:focus-within .compat-sign-trigger{background:var(--surface2);border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent)}
html[data-theme="dark"] .compat-sign-option:hover,html[data-theme="dark"] .compat-sign-option:focus-visible{background:var(--surface2);border-color:var(--accent)}


/* Match compatibility-result panels to the 14px mobile gutters used on test pages. */
@media (max-width: 560px) {
  .compat-content-section > .container.content-narrow,
  .compat-scores-section > .container {
    width: calc(100% - 28px) !important;
    max-width: 900px;
    padding-inline: 0;
    box-sizing: border-box;
  }
}

/* Homepage zodiac cards: daily relationship, health and finance ratings. */
.zodiac-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.zodiac-card{padding:18px}
.daily-ratings{display:grid;gap:9px;margin-top:16px;padding-top:13px;border-top:1px solid var(--line)}
.daily-rating{display:flex;align-items:center;justify-content:space-between;gap:7px;min-width:0}
.daily-rating-label{font-size:12px;color:var(--muted);white-space:nowrap}
.daily-rating-stars{display:inline-flex;gap:1px;flex-shrink:0;color:var(--muted);font-size:15px;line-height:1;letter-spacing:0}
.daily-rating-stars .is-filled{color:#e8ad32}
@media(max-width:1024px) and (min-width:821px){.zodiac-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.zodiac-card{padding:14px}.daily-rating-label{font-size:11px}.daily-rating-stars{font-size:13px}}
@media(max-width:820px){.zodiac-grid,.zodiac-grid.compact{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.zodiac-grid,.zodiac-grid.compact{gap:9px}.zodiac-card{padding:14px}.daily-ratings{gap:8px;margin-top:13px;padding-top:11px}.daily-rating-label{font-size:11px}.daily-rating-stars{font-size:13px}}
@media(max-width:360px){.zodiac-grid,.zodiac-grid.compact{grid-template-columns:1fr}}

/* Zodiac card header: symbol on the left, sign name beside it. */
.zodiac-card .zodiac-symbol{display:inline-block;vertical-align:middle;margin:0 10px 0 0;font-size:28px}
.zodiac-card .zodiac-name{display:inline-block;vertical-align:middle;max-width:calc(100% - 52px)}
.zodiac-card .zodiac-date{display:block;margin-top:6px}
@media(max-width:820px){.zodiac-grid,.zodiac-grid.compact{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:360px){.zodiac-grid,.zodiac-grid.compact{grid-template-columns:1fr}}


/* Keep homepage period controls in their original pill-link visual style. */
.period-nav button{appearance:none;-webkit-appearance:none;display:inline-flex;align-items:center;justify-content:center;min-height:36px;padding:0 14px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--muted);font:inherit;font-size:13px;font-weight:800;text-decoration:none;cursor:pointer;transition:.2s ease}
.period-nav button:hover,.period-nav button:focus-visible,.period-nav button.active{color:var(--accent);border-color:var(--accent);background:color-mix(in srgb,var(--accent) 9%,var(--surface));outline:none}
@media(max-width:560px){.period-nav button{min-height:34px;padding:0 12px;font-size:12px}}

/* Mobile homepage: zodiac signs in a single column; hide the removed all-forecasts link if cached markup remains. */
@media(max-width:560px){.zodiac-grid[data-period-grid]{grid-template-columns:minmax(0,1fr)}}

/* Increase category labels in homepage zodiac-card ratings by 2px on desktop and mobile. */
.daily-rating-label{font-size:14px}
@media(max-width:1024px) and (min-width:821px){.daily-rating-label{font-size:13px}}
@media(max-width:560px){.daily-rating-label{font-size:13px}}

/* Further enlarge rating labels and stars on mobile only. */
@media(max-width:560px){
  .daily-rating-label{font-size:15px}
  .daily-rating-stars{font-size:15px}
}

/* Sticky homepage horoscope period controls */
.home-period-section .section-heading{position:sticky;top:76px;z-index:45;background:var(--bg);padding:14px 0 12px;margin-bottom:16px;align-items:flex-start}.home-period-section .section-heading>div{min-width:0}@media(max-width:560px){.home-period-section .section-heading{top:64px;padding:10px 0;margin-bottom:14px}}

/* Sticky elements fail when an ancestor creates a scroll container with overflow-x:hidden. */
html,body{overflow-x:clip}

/* Keep date horoscope headings on one line whenever the available width allows it. */
.page-head h1.date-heading{max-width:none;overflow-wrap:normal;white-space:nowrap;font-size:clamp(30px,4.5vw,54px)}
@media(max-width:480px){.page-head h1.date-heading{white-space:normal;font-size:clamp(29px,7.5vw,36px)}}

/* Space between horoscope content/cards and the service feature cards below. */
.content-main > .horoscope-feature-links{margin-top:32px}
@media(max-width:560px){.content-main > .horoscope-feature-links{margin-top:24px}}

/* Spacing between the date picker and psychological tests in horoscope sidebar. */
.side-card + .side-tests-card{margin-top:20px}

/* Compatibility page: calculator and explanatory cards on the left, zodiac list vertically on the right. */
.compatibility-layout-section{padding-top:30px}
.compatibility-layout{display:grid;grid-template-columns:minmax(0,1fr) 245px;gap:28px;align-items:start}
.compatibility-main-column{display:flex;flex-direction:column;gap:22px;min-width:0}
.compatibility-layout .compat-picker{max-width:none;margin:0;transform:none!important;box-sizing:border-box}
.compatibility-layout .compatibility-seo,.compatibility-layout .compatibility-how-it-works{width:100%;max-width:none;margin:0;box-sizing:border-box;position:static!important;top:auto!important;transform:none!important}
.compatibility-signs-column{min-width:0;padding:22px;border:1px solid var(--line);border-radius:22px;background:var(--card)}
.compatibility-signs-column h2{font-size:22px;margin:6px 0 8px}
.compatibility-signs-column>p{font-size:13px;color:var(--muted);margin:0 0 16px}
.compatibility-layout .compatibility-vertical-signs{display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
.compatibility-layout .compatibility-vertical-signs .zodiac-card{display:grid;grid-template-columns:34px minmax(0,1fr);grid-template-rows:auto auto;align-items:center;gap:0 9px;padding:10px 12px;min-height:0;border-radius:12px}
.compatibility-layout .compatibility-vertical-signs .zodiac-symbol{grid-column:1;grid-row:1/3;font-size:25px;margin:0}
.compatibility-layout .compatibility-vertical-signs .zodiac-name{grid-column:2;grid-row:1;font-size:14px}
.compatibility-layout .compatibility-vertical-signs .zodiac-date{grid-column:2;grid-row:2;font-size:10px}
@media(max-width:820px){.compatibility-layout{grid-template-columns:minmax(0,1fr);gap:26px}.compatibility-signs-column{padding:18px}.compatibility-layout .compatibility-vertical-signs{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.compatibility-layout-section{padding-top:18px}.compatibility-main-column{gap:16px}.compatibility-layout .compatibility-vertical-signs{grid-template-columns:minmax(0,1fr)}}

/* Compatibility sidebar cards: zodiac glyph and name share one row, date sits below. */
.compatibility-layout .compatibility-vertical-signs .zodiac-card{grid-template-columns:34px minmax(0,1fr);grid-template-rows:auto auto;align-items:center}
.compatibility-layout .compatibility-vertical-signs .zodiac-symbol{grid-column:1;grid-row:1/3;align-self:center}
.compatibility-layout .compatibility-vertical-signs .zodiac-name{grid-column:2;grid-row:1;align-self:end}
.compatibility-layout .compatibility-vertical-signs .zodiac-date{grid-column:2;grid-row:2;align-self:start}
/* Keep zodiac icon and name inside one shared first-row container. */
.compatibility-layout .compatibility-vertical-signs .zodiac-card{display:flex;flex-direction:column;align-items:stretch;gap:3px}
.compatibility-layout .compatibility-vertical-signs .zodiac-title-row{display:flex;align-items:center;gap:9px;min-width:0}
.compatibility-layout .compatibility-vertical-signs .zodiac-title-row .zodiac-symbol{display:inline-flex;align-items:center;justify-content:center;flex:0 0 34px;margin:0;font-size:25px}
.compatibility-layout .compatibility-vertical-signs .zodiac-title-row .zodiac-name{display:inline-block;min-width:0;font-size:14px}
.compatibility-layout .compatibility-vertical-signs .zodiac-date{display:block;margin-left:43px;font-size:10px}
/* Match zodiac cards on /compatibility to the layout used on /horoscope/today. */
.compatibility-layout .compatibility-vertical-signs .zodiac-card{display:block;flex-direction:initial;align-items:initial;gap:initial}
.compatibility-layout .compatibility-vertical-signs .zodiac-symbol{display:inline-block;vertical-align:middle;margin:0 10px 0 0;font-size:28px;flex:initial}
.compatibility-layout .compatibility-vertical-signs .zodiac-name{display:inline-block;vertical-align:middle;max-width:calc(100% - 52px);font-size:17px}
.compatibility-layout .compatibility-vertical-signs .zodiac-date{display:block;margin:6px 0 0;font-size:11px}
/* Compatibility sidebar: smaller sign selector heading and more space before cards. */
.compatibility-signs-column h2{font-size:18px;margin:6px 0 18px}

/* Compatibility pair detail: metrics and article left, two vertical sign selectors right. */
.compat-detail-section{padding-top:30px}
.compat-detail-layout{display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:28px;align-items:start}
.compat-detail-main{min-width:0}
.compat-detail-main .compat-score-grid{margin:0 0 24px}
.compat-detail-main .compatibility-article{width:100%;max-width:none;margin:0;box-sizing:border-box}
.compat-variant-sidebar{display:flex;flex-direction:column;gap:18px;min-width:0}
.compat-variant-card{padding:18px;border:1px solid var(--line);border-radius:20px;background:var(--card);min-width:0}
.compat-variant-card h2{font-size:17px;line-height:1.35;margin:5px 0 16px}
.compat-variant-links{display:flex;flex-direction:column;gap:6px}
.compat-variant-links a{display:flex;align-items:center;gap:9px;padding:8px 10px;border:1px solid transparent;border-radius:10px;color:var(--text);text-decoration:none;font-size:13px;line-height:1.3}
.compat-variant-links a:hover,.compat-variant-links a.active{background:var(--surface2);border-color:var(--line);color:var(--accent)}
.compat-variant-symbol{display:inline-flex;align-items:center;justify-content:center;width:25px;flex:0 0 25px;font-size:21px;color:var(--accent)}
@media(max-width:820px){.compat-detail-layout{grid-template-columns:minmax(0,1fr);gap:24px}.compat-variant-sidebar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}}
@media(max-width:560px){.compat-detail-section{padding-top:18px}.compat-variant-sidebar{grid-template-columns:minmax(0,1fr)}.compat-variant-card{padding:16px}}

/* Personal horoscope page: form and explanatory content on the left, related feature links stacked on the right. */
.personal-page .personal-layout{max-width:1180px!important;display:grid;grid-template-columns:minmax(0,1fr) 285px;gap:28px;align-items:start}
.personal-main-column{display:flex;flex-direction:column;gap:22px;min-width:0}
.personal-main-column>.personal-card,.personal-main-column>#personalForm{width:100%;max-width:none;margin:0;box-sizing:border-box}
.personal-feature-sidebar{display:flex;flex-direction:column;gap:14px;min-width:0}
.personal-feature-sidebar .feature-card{display:block;padding:18px;border-radius:18px;text-decoration:none;color:var(--text)}
.personal-feature-sidebar .feature-icon{font-size:24px;margin-bottom:9px}
.personal-feature-sidebar .feature-card h3{font-size:17px;line-height:1.35;margin:0}
.personal-feature-sidebar .feature-card p{font-size:12px;line-height:1.5;margin:8px 0 10px}
.personal-feature-sidebar .text-link{font-size:12px}
@media(max-width:820px){.personal-page .personal-layout{grid-template-columns:minmax(0,1fr);gap:24px}.personal-feature-sidebar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch}}
@media(max-width:560px){.personal-page .personal-layout{gap:20px}.personal-main-column{gap:16px}.personal-feature-sidebar{grid-template-columns:minmax(0,1fr);gap:12px}.personal-feature-sidebar .feature-card{padding:17px}}

/* Tests index: test cards on the left and a vertical zodiac selector on the right. */
.tests-layout{display:grid;grid-template-columns:minmax(0,1fr) 245px;gap:28px;align-items:start}
.tests-main-column{min-width:0}
.tests-main-column .tests-page{width:100%;max-width:none;margin:0;box-sizing:border-box}
.tests-signs-column{min-width:0}
.tests-signs-column h2{font-size:18px;margin:6px 0 18px}
.tests-signs-column .compatibility-vertical-signs{grid-template-columns:minmax(0,1fr);gap:10px}
.tests-signs-column .zodiac-card{display:grid;grid-template-columns:28px minmax(0,1fr);column-gap:9px;row-gap:2px;align-items:center;padding:12px 13px;min-height:0;border-radius:14px}
.tests-signs-column .zodiac-symbol{grid-row:1 / span 2;font-size:22px;margin:0;text-align:center}
.tests-signs-column .zodiac-name{font-size:14px;line-height:1.3}
.tests-signs-column .zodiac-date{font-size:10px;line-height:1.3}
@media(max-width:820px){.tests-layout{grid-template-columns:minmax(0,1fr);gap:26px}.tests-signs-column{padding:18px}.tests-signs-column .compatibility-vertical-signs{grid-template-columns:repeat(2,minmax(0,1fr))}.tests-signs-column .zodiac-card{grid-template-columns:25px minmax(0,1fr);padding:12px 10px}}
@media(max-width:560px){.tests-layout{gap:20px}.tests-signs-column .compatibility-vertical-signs{grid-template-columns:minmax(0,1fr)}.tests-signs-column .zodiac-card{padding:13px}}

/* Related service cards below the zodiac selector on the tests page, matching /personal. */
.tests-related-features{display:flex;flex-direction:column;gap:14px;margin-top:20px;min-width:0}
.tests-related-features .feature-card{display:block;padding:18px;border-radius:18px;text-decoration:none;color:var(--text);background:var(--surface);border:1px solid var(--line);min-width:0;box-sizing:border-box}
.tests-related-features .feature-icon{display:block;color:var(--accent);font-size:24px;margin:0 0 9px}
.tests-related-features .feature-card h3{font-size:17px;line-height:1.35;margin:0}
.tests-related-features .feature-card p{font-size:12px;line-height:1.5;margin:8px 0 10px;color:var(--muted)}
.tests-related-features .text-link{font-size:12px}
@media(max-width:820px){.tests-related-features{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.tests-related-features{grid-template-columns:minmax(0,1fr);gap:12px;margin-top:16px}.tests-related-features .feature-card{padding:17px}}

/* Tarot page: keep the card reading and its explanatory text in the left column, with the same feature sidebar as /personal. */
.taro-section > .container.taro-layout{width:100%;max-width:1180px!important;margin-inline:auto;display:grid;grid-template-columns:minmax(0,1fr) 285px;gap:28px;align-items:start;box-sizing:border-box}
.taro-main-column{min-width:0}
.taro-main-column .taro-carousel{width:100%;max-width:900px;margin-left:0;margin-right:0}
.taro-main-column .taro-info,.taro-main-column .taro-description{width:100%;max-width:900px;margin-left:0;margin-right:0;box-sizing:border-box}
.taro-main-column .taro-description{margin-top:22px}
.taro-feature-sidebar{display:flex;flex-direction:column;gap:14px;min-width:0}
.taro-feature-sidebar .feature-card{display:block;padding:18px;border-radius:18px;text-decoration:none;color:var(--text)}
.taro-feature-sidebar .feature-icon{display:block;font-size:24px;margin-bottom:9px}
.taro-feature-sidebar .feature-card h3{font-size:17px;line-height:1.35;margin:0}
.taro-feature-sidebar .feature-card p{font-size:12px;line-height:1.5;margin:8px 0 10px}
.taro-feature-sidebar .text-link{font-size:12px}
@media(max-width:820px){.taro-section > .container.taro-layout{grid-template-columns:minmax(0,1fr);gap:24px}.taro-feature-sidebar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch}.taro-main-column .taro-carousel{margin-left:auto;margin-right:auto}}
@media(max-width:560px){.taro-section > .container.taro-layout{gap:20px}.taro-feature-sidebar{grid-template-columns:minmax(0,1fr);gap:12px}.taro-feature-sidebar .feature-card{padding:17px}}


/* Prediction ball page: interactive ball and explanatory content on the left, StarGid feature cards on the right. */
.ball-section > .container.ball-layout{width:100%;max-width:1180px!important;margin-inline:auto;display:grid;grid-template-columns:minmax(0,1fr) 285px;gap:28px;align-items:start;box-sizing:border-box}
.ball-main-column{min-width:0;display:flex;flex-direction:column;gap:22px}
.ball-main-column .ball-wrap{width:100%;max-width:900px;margin:0 auto}
.ball-main-column .ball-result{width:100%;max-width:900px;margin-left:auto;margin-right:auto}
.ball-main-column .ball-description{width:100%;max-width:900px;margin:0;box-sizing:border-box}
.ball-feature-sidebar{display:flex;flex-direction:column;gap:14px;min-width:0}
.ball-feature-sidebar .feature-card{display:block;padding:18px;border-radius:18px;text-decoration:none;color:var(--text);background:var(--surface);border:1px solid var(--line);box-sizing:border-box}
.ball-feature-sidebar .feature-icon{display:block;color:var(--accent);font-size:24px;margin-bottom:9px}
.ball-feature-sidebar .feature-card h3{font-size:17px;line-height:1.35;margin:0}
.ball-feature-sidebar .feature-card p{font-size:12px;line-height:1.5;margin:8px 0 10px;color:var(--muted)}
.ball-feature-sidebar .text-link{font-size:12px}
@media(max-width:820px){.ball-section > .container.ball-layout{grid-template-columns:minmax(0,1fr);gap:24px}.ball-feature-sidebar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch}.ball-main-column .ball-wrap,.ball-main-column .ball-result{margin-left:auto;margin-right:auto}}
@media(max-width:560px){.ball-section > .container.ball-layout{gap:20px}.ball-main-column{gap:16px}.ball-feature-sidebar{grid-template-columns:minmax(0,1fr);gap:12px}.ball-feature-sidebar .feature-card{padding:17px}}

/* Ball page: left reading area and right related services sidebar. */
.ball-section > .container.ball-layout{width:100%;max-width:1180px!important;margin-inline:auto;display:grid;grid-template-columns:minmax(0,1fr) 285px;gap:28px;align-items:start;box-sizing:border-box}
.ball-main-column{min-width:0;display:flex;flex-direction:column;gap:22px}
.ball-main-column .ball-wrap{width:100%;max-width:900px;margin:0 auto}
.ball-main-column .ball-result{width:100%;max-width:900px;margin-left:auto;margin-right:auto}
.ball-main-column .ball-description{width:100%;max-width:900px;margin:0;box-sizing:border-box}
.ball-feature-sidebar{display:flex;flex-direction:column;gap:14px;min-width:0}
.ball-feature-sidebar .feature-card{display:block;padding:18px;border-radius:18px;text-decoration:none;color:var(--text);background:var(--surface);border:1px solid var(--line);box-sizing:border-box}
.ball-feature-sidebar .feature-icon{display:block;color:var(--accent);font-size:24px;margin-bottom:9px}
.ball-feature-sidebar .feature-card h3{font-size:17px;line-height:1.35;margin:0}
.ball-feature-sidebar .feature-card p{font-size:12px;line-height:1.5;margin:8px 0 10px;color:var(--muted)}
.ball-feature-sidebar .text-link{font-size:12px}
@media(max-width:820px){.ball-section > .container.ball-layout{grid-template-columns:minmax(0,1fr);gap:24px}.ball-feature-sidebar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch}.ball-main-column .ball-wrap,.ball-main-column .ball-result{margin-left:auto;margin-right:auto}}
@media(max-width:560px){.ball-section > .container.ball-layout{gap:20px}.ball-main-column{gap:16px}.ball-feature-sidebar{grid-template-columns:minmax(0,1fr);gap:12px}.ball-feature-sidebar .feature-card{padding:17px}}

/* Tests sidebar: remove the outer frame around the right-hand feature blocks. */
.tests-related-features{border:0!important;outline:0!important;box-shadow:none!important;background:transparent!important;padding:0!important}

/* Tests page: make the right-hand service cards match the /taro sidebar. */
.tests-layout{grid-template-columns:minmax(0,1fr) 285px;gap:28px}
.tests-related-features{display:flex;flex-direction:column;gap:14px;margin-top:20px;min-width:0;border:0!important;outline:0!important;box-shadow:none!important;background:transparent!important;padding:0!important}
.tests-related-features .feature-card{display:block;padding:18px;border-radius:18px;text-decoration:none;color:var(--text);background:var(--surface);border:1px solid var(--line);min-width:0;box-sizing:border-box}
.tests-related-features .feature-icon{display:block;font-size:24px;margin-bottom:9px}
.tests-related-features .feature-card h3{font-size:17px;line-height:1.35;margin:0}
.tests-related-features .feature-card p{font-size:12px;line-height:1.5;margin:8px 0 10px;color:var(--muted)}
.tests-related-features .text-link{font-size:12px}
@media(max-width:820px){.tests-layout{grid-template-columns:minmax(0,1fr);gap:26px}.tests-related-features{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch}}
@media(max-width:560px){.tests-layout{gap:20px}.tests-related-features{grid-template-columns:minmax(0,1fr);gap:12px;margin-top:16px}.tests-related-features .feature-card{padding:17px}}

/* Tests page: remove the frame around the zodiac heading/list and its related cards. */
.tests-signs-column.compatibility-signs-column{border:0!important;outline:0!important;box-shadow:none!important;background:transparent!important;padding:0!important;border-radius:0!important}
@media(max-width:820px){.tests-signs-column.compatibility-signs-column{padding:0!important}}


/* Match zodiac sign cards on /tests to the sign cards on /compatibility. */
.tests-layout .compatibility-vertical-signs .zodiac-card{display:block;grid-template-columns:none;grid-template-rows:none;align-items:initial;gap:initial;padding:10px 12px;min-height:0;border-radius:12px}
.tests-layout .compatibility-vertical-signs .zodiac-symbol{display:inline-block;vertical-align:middle;grid-column:auto;grid-row:auto;margin:0 10px 0 0;font-size:28px;flex:initial;text-align:left}
.tests-layout .compatibility-vertical-signs .zodiac-name{display:inline-block;vertical-align:middle;grid-column:auto;grid-row:auto;max-width:calc(100% - 52px);font-size:17px;line-height:inherit}
.tests-layout .compatibility-vertical-signs .zodiac-date{display:block;grid-column:auto;grid-row:auto;margin:6px 0 0;font-size:11px;line-height:inherit}
@media(max-width:820px){.tests-layout .compatibility-vertical-signs{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.tests-layout .compatibility-vertical-signs .zodiac-card{padding:10px 12px}}
@media(max-width:560px){.tests-layout .compatibility-vertical-signs{grid-template-columns:minmax(0,1fr);gap:8px}.tests-layout .compatibility-vertical-signs .zodiac-card{padding:10px 12px}}

/* Remove the outer panel frame around the zodiac sign list on /compatibility, matching /tests. */
.compatibility-layout .compatibility-signs-column{border:0!important;outline:0!important;box-shadow:none!important;background:transparent!important;padding:0!important;border-radius:0!important}
@media(max-width:820px){.compatibility-layout .compatibility-signs-column{padding:0!important}}


/* Unified two-column proportions and shared top alignment for all requested service pages. */
@media(min-width:821px){
 .horoscope-layout-section .content-layout,
 .compatibility-layout,
 .personal-page .personal-layout,
 .tests-layout,
 .taro-section > .container.taro-layout,
 .ball-section > .container.ball-layout{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;align-items:start!important}
}
.horoscope-layout-section,.compatibility-layout-section,.tests-layout-section,.personal-page,.taro-section,.ball-section{padding-top:clamp(52px,7vw,78px)!important}
.horoscope-layout-section .content-layout,.compatibility-layout,.personal-page .personal-layout,.tests-layout,.taro-section > .container.taro-layout,.ball-section > .container.ball-layout{margin-top:0!important;align-items:start!important}
.horoscope-layout-section .content-main,.horoscope-layout-section .sidebar,
.compatibility-main-column,.compatibility-signs-column,.personal-main-column,.personal-feature-sidebar,
.tests-main-column,.tests-signs-column,.taro-main-column,.taro-feature-sidebar,.ball-main-column,.ball-feature-sidebar{margin-top:0!important;transform:none!important;position:static!important;top:auto!important;min-width:0}
@media(max-width:820px){
 .horoscope-layout-section,.compatibility-layout-section,.tests-layout-section,.personal-page,.taro-section,.ball-section{padding-top:clamp(52px,7vw,58px)!important}
 .horoscope-layout-section .content-layout,.compatibility-layout,.personal-page .personal-layout,.tests-layout,.taro-section > .container.taro-layout,.ball-section > .container.ball-layout{grid-template-columns:minmax(0,1fr)!important;align-items:start!important}
}


/* Keep the primary content column at 900px on the requested desktop pages. */
@media(min-width:821px){
 .horoscope-layout-section .content-layout,
 .compatibility-layout,
 .personal-page .personal-layout,
 .tests-layout,
 .taro-section > .container.taro-layout,
 .ball-section > .container.ball-layout{grid-template-columns:minmax(0,850px) minmax(0,1fr)!important;column-gap:28px!important;align-items:start!important}
}

/* Use the same centered container and equal left/right outer gutters on all six service pages. */
.horoscope-layout-section .content-layout,
.compatibility-layout,
.personal-page .personal-layout,
.tests-layout,
.taro-section > .container.taro-layout,
.ball-section > .container.ball-layout{
  width:min(var(--container),calc(100% - 2 * var(--gutter)))!important;
  max-width:1180px!important;
  margin-left:auto!important;
  margin-right:auto!important;
  box-sizing:border-box!important;
}

/* Match the content-column alignment on /tests, /taro and /ball to /compatibility. */
@media(min-width:821px){
 .tests-layout,.taro-section > .container.taro-layout,.ball-section > .container.ball-layout{
   display:grid!important;
   grid-template-columns:minmax(0,850px) minmax(0,1fr)!important;
   column-gap:28px!important;
   align-items:start!important;
   justify-content:space-between!important;
 }
 .tests-layout > .tests-main-column,.tests-layout > .tests-signs-column,
 .taro-section > .container.taro-layout > .taro-main-column,
 .taro-section > .container.taro-layout > .taro-feature-sidebar,
 .ball-section > .container.ball-layout > .ball-main-column,
 .ball-section > .container.ball-layout > .ball-feature-sidebar{
   width:100%!important;max-width:none!important;min-width:0!important;
   margin-left:0!important;margin-right:0!important;
   align-self:start!important;justify-self:stretch!important;
   transform:none!important;position:static!important;
 }
 .tests-main-column .tests-page.wrapper{width:100%!important;max-width:none!important;margin:0!important}
 .taro-main-column .taro-carousel,.taro-main-column .taro-description,
 .ball-main-column .ball-wrap,.ball-main-column .ball-result,.ball-main-column .ball-description{
   margin-left:0!important;margin-right:0!important;
 }
}

/* Test description/form cards match the 850px main content width used on /compatibility. */
@media(min-width:821px){
 .tests-layout > .tests-main-column > .tests-page.wrapper{
   width:100%!important;max-width:none!important;margin:0!important;padding-left:0!important;padding-right:0!important;
 }
 .tests-layout > .tests-main-column > .tests-page.wrapper > .card,
 .tests-layout > .tests-main-column > .tests-page.wrapper > form.card,
 .tests-layout > .tests-main-column > .tests-page.wrapper > .content-card{
   width:100%!important;max-width:none!important;margin-left:0!important;margin-right:0!important;box-sizing:border-box!important;
 }
}
@media(max-width:820px){
 .tests-layout > .tests-main-column > .tests-page.wrapper{width:100%!important;max-width:none!important;margin:0!important}
 .tests-layout > .tests-main-column > .tests-page.wrapper > .card,
 .tests-layout > .tests-main-column > .tests-page.wrapper > form.card{width:100%!important;max-width:none!important;box-sizing:border-box!important}
}

/* Horoscope index: four cards per row on desktop and a stable period number. */
.horoscope-layout-section .zodiac-grid.compact{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:14px;margin-bottom:36px}
.horoscope-layout-section .zodiac-grid.compact .zodiac-number{display:block;margin-top:12px;padding-top:10px;border-top:1px solid var(--line);font-size:12px;line-height:1.4;color:var(--muted)}
.horoscope-layout-section .zodiac-grid.compact .zodiac-number strong{display:inline-block;margin-left:3px;color:var(--accent);font-size:18px;font-weight:800;font-variant-numeric:tabular-nums}
@media(max-width:820px){.horoscope-layout-section .zodiac-grid.compact{grid-template-columns:repeat(2,minmax(0,1fr))!important;margin-bottom:28px}}
@media(max-width:360px){.horoscope-layout-section .zodiac-grid.compact{grid-template-columns:minmax(0,1fr)!important}}

/* Personal page: homepage-style zodiac forecast below the form/content and date links in the right sidebar. */
.personal-zodiac-section{width:100%;min-width:0;margin-top:10px}
.personal-zodiac-section .section-heading{position:sticky;top:76px;z-index:45;display:block;margin-bottom:16px;padding:14px 0 12px;background:var(--bg)}
.personal-zodiac-section .section-heading h2{font-size:clamp(24px,3.5vw,32px);line-height:1.25;margin:0}
.personal-zodiac-section .period-nav{margin-bottom:12px}
.personal-zodiac-section .personal-zodiac-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.personal-zodiac-section .personal-zodiac-grid .zodiac-card{padding:16px;min-width:0}
.personal-date-sidebar .side-card{display:flex;flex-direction:column;gap:0;padding:20px;border:1px solid var(--line);border-radius:20px;background:var(--card)}
.personal-date-sidebar .side-card strong{display:block;margin-bottom:12px;font-size:16px}
.personal-date-sidebar .side-card a{display:block;padding:9px 0;border-top:1px solid var(--line);font-size:14px;text-decoration:none;color:var(--text)}
.personal-date-sidebar .side-card a:hover{color:var(--accent)}
@media(max-width:820px){.personal-zodiac-section .personal-zodiac-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.personal-zodiac-section .section-heading{top:64px;padding:10px 0;margin-bottom:14px}.personal-date-sidebar{display:block!important}}
@media(max-width:560px){.personal-zodiac-section .personal-zodiac-grid{grid-template-columns:minmax(0,1fr);gap:9px}.personal-zodiac-section .section-heading h2{font-size:25px}.personal-date-sidebar .side-card{padding:17px}}

/* Compatibility sidebar: related site sections first, date links below. */
.compatibility-layout .compatibility-feature-sidebar{display:flex;flex-direction:column;gap:14px;min-width:0;margin-top:0!important}
.compatibility-layout .compatibility-feature-sidebar .feature-card{display:block;padding:18px;border-radius:18px;text-decoration:none;color:var(--text);background:var(--surface);border:1px solid var(--line);min-width:0;box-sizing:border-box}
.compatibility-layout .compatibility-feature-sidebar .feature-icon{display:block;font-size:24px;margin-bottom:9px}
.compatibility-layout .compatibility-feature-sidebar .feature-card h3{font-size:17px;line-height:1.35;margin:0}
.compatibility-layout .compatibility-feature-sidebar .feature-card p{font-size:12px;line-height:1.5;margin:8px 0 10px;color:var(--muted)}
.compatibility-layout .compatibility-feature-sidebar .text-link{font-size:12px}
.compatibility-layout .compatibility-feature-sidebar .compatibility-date-card{display:flex;flex-direction:column;gap:0;padding:20px;border:1px solid var(--line);border-radius:20px;background:var(--surface);box-shadow:var(--shadow)}
.compatibility-layout .compatibility-feature-sidebar .compatibility-date-card strong{display:block;margin-bottom:12px;font-size:16px}
.compatibility-layout .compatibility-feature-sidebar .compatibility-date-card a{display:block;padding:9px 0;border-top:1px solid var(--line);font-size:14px;text-decoration:none;color:var(--text)}
.compatibility-layout .compatibility-feature-sidebar .compatibility-date-card a:hover{color:var(--accent)}
@media(max-width:820px){.compatibility-layout .compatibility-feature-sidebar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch}.compatibility-layout .compatibility-feature-sidebar .compatibility-date-card{grid-column:1/-1}}
@media(max-width:560px){.compatibility-layout .compatibility-feature-sidebar{grid-template-columns:minmax(0,1fr);gap:12px}.compatibility-layout .compatibility-feature-sidebar .feature-card{padding:17px}.compatibility-layout .compatibility-feature-sidebar .compatibility-date-card{grid-column:auto;padding:17px}}

/* Compatibility page: restore clear breathing room before related service cards,
   keep the calculator and explanatory blocks aligned, and let sign options fully expand. */
.compatibility-layout .compatibility-main-column{gap:22px!important;min-width:0}
.compatibility-layout .compatibility-feature-links{margin-top:14px!important;row-gap:14px}
.compatibility-layout .compat-picker{width:100%!important;max-width:none!important;margin:0!important}
.compatibility-layout .compat-sign-options{max-height:none!important;overflow:visible!important;overflow-y:visible!important;scrollbar-width:none!important}
.compatibility-layout .compat-sign-options::-webkit-scrollbar{display:none!important;width:0!important;height:0!important}
.compatibility-layout .compatibility-feature-sidebar{align-self:start!important}
@media(max-width:820px){
 .compatibility-layout-section{padding-top:clamp(38px,6vw,52px)!important}
 .compatibility-layout{row-gap:26px!important}
 .compatibility-layout .compatibility-feature-links{margin-top:10px!important;row-gap:12px}
}
@media(max-width:560px){
 .compatibility-layout-section{padding-top:34px!important}
 .compatibility-layout .compatibility-main-column{gap:16px!important}
 .compatibility-layout .compatibility-feature-links{margin-top:8px!important;row-gap:12px}
}


/* Compatibility page follows the personal-horoscope layout: related feature cards on the right, zodiac cards below the main content on the left. */
.compatibility-layout .compatibility-zodiac-section{width:100%;min-width:0;margin-top:10px}
.compatibility-layout .compatibility-zodiac-section .section-heading{display:block;margin:0 0 16px}
.compatibility-layout .compatibility-zodiac-section .section-heading h2{font-size:clamp(24px,3.5vw,32px);line-height:1.25;margin:0}
.compatibility-layout .compatibility-zodiac-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.compatibility-layout .compatibility-zodiac-grid .zodiac-card{display:block;padding:16px;min-width:0}
.compatibility-layout .compatibility-zodiac-grid .zodiac-symbol{display:block;margin-bottom:8px}
.compatibility-layout .compatibility-zodiac-grid .zodiac-name{display:block}
.compatibility-layout .compatibility-zodiac-grid .zodiac-date{display:block}
@media(max-width:820px){.compatibility-layout .compatibility-zodiac-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.compatibility-layout .compatibility-zodiac-section .section-heading{margin-bottom:14px}}
@media(max-width:560px){.compatibility-layout .compatibility-zodiac-grid{grid-template-columns:minmax(0,1fr);gap:9px}.compatibility-layout .compatibility-zodiac-grid .zodiac-card{padding:14px}.compatibility-layout .compatibility-zodiac-section .section-heading h2{font-size:25px}}

/* Keep the zodiac period controls visible with a viewport-wide sticky backdrop. */
.personal-zodiac-section .section-heading,
.compatibility-layout .compatibility-zodiac-section .section-heading{
  position:sticky!important;top:76px;z-index:45;display:block;margin:0 0 16px;padding:14px 0 12px;background:transparent;isolation:isolate;
}
.personal-zodiac-section .section-heading::before,
.compatibility-layout .compatibility-zodiac-section .section-heading::before{
  content:"";position:absolute;z-index:-1;top:0;bottom:0;left:-100vw;width:300vw;transform:none;background:var(--bg);border-bottom:1px solid var(--line);box-shadow:0 8px 18px rgba(0,0,0,.035);pointer-events:none;
}
.personal-zodiac-section .section-heading h2,
.compatibility-layout .compatibility-zodiac-section .section-heading h2{font-size:clamp(24px,3.5vw,32px);line-height:1.25;margin:0}
.personal-zodiac-section .period-nav,
.compatibility-layout .compatibility-zodiac-section .period-nav{margin-bottom:12px}
@media(max-width:820px){
 .personal-zodiac-section .section-heading,
 .compatibility-layout .compatibility-zodiac-section .section-heading{top:64px;padding:10px 0;margin-bottom:14px}
}
@media(max-width:560px){
 .personal-zodiac-section .section-heading h2,
 .compatibility-layout .compatibility-zodiac-section .section-heading h2{font-size:25px}
}

/* Prevent the sticky horoscope heading/backdrop from covering the right-hand cards. */
.personal-zodiac-section .section-heading,
.compatibility-layout .compatibility-zodiac-section .section-heading{
  position:static!important;
  top:auto!important;
  z-index:auto!important;
  isolation:auto!important;
  background:transparent!important;
}
.personal-zodiac-section .section-heading::before,
.compatibility-layout .compatibility-zodiac-section .section-heading::before{
  content:none!important;
  display:none!important;
}

/* Keep the Today / Tomorrow / Month controls and their heading visible while scrolling the zodiac list on /personal and /compatibility. */
.personal-zodiac-section .section-heading,
.compatibility-layout .compatibility-zodiac-section .section-heading{
  position:sticky!important;
  top:76px!important;
  z-index:45!important;
  isolation:isolate!important;
  display:block!important;
  width:100%;
  box-sizing:border-box;
  padding:14px 0 12px!important;
  margin:0 0 16px!important;
  background:var(--bg)!important;
}
.personal-zodiac-section .section-heading>div,
.compatibility-layout .compatibility-zodiac-section .section-heading>div{min-width:0}
.personal-zodiac-section .section-heading::before,
.compatibility-layout .compatibility-zodiac-section .section-heading::before{content:none!important;display:none!important}
@media(max-width:820px){
  .personal-zodiac-section .section-heading,
  .compatibility-layout .compatibility-zodiac-section .section-heading{top:64px!important;padding:10px 0!important;margin-bottom:14px!important}
}

/* Keep Today / Tomorrow / Month controls and heading visible while scrolling the zodiac list on /personal and /compatibility. */
.personal-zodiac-section .section-heading,
.compatibility-layout .compatibility-zodiac-section .section-heading{
  position:sticky!important;
  top:76px!important;
  z-index:45!important;
  isolation:isolate!important;
  display:block!important;
  width:100%;
  box-sizing:border-box;
  padding:14px 0 12px!important;
  margin:0 0 16px!important;
  background:var(--bg)!important;
}
.personal-zodiac-section .section-heading>div,
.compatibility-layout .compatibility-zodiac-section .section-heading>div{min-width:0}
.personal-zodiac-section .section-heading::before,
.compatibility-layout .compatibility-zodiac-section .section-heading::before{content:none!important;display:none!important}
@media(max-width:820px){
  .personal-zodiac-section .section-heading,
  .compatibility-layout .compatibility-zodiac-section .section-heading{top:64px!important;padding:10px 0!important;margin-bottom:14px!important}
}

/* Match the sticky period controls on /personal and /compatibility to the homepage. */
.personal-zodiac-section .section-heading,
.compatibility-layout .compatibility-zodiac-section .section-heading{
  position:sticky!important;
  top:76px!important;
  z-index:45!important;
  display:flex!important;
  align-items:flex-start!important;
  justify-content:flex-start!important;
  width:100%;
  box-sizing:border-box;
  padding:14px 0 12px!important;
  margin:0 0 16px!important;
  background:var(--bg)!important;
}
.personal-zodiac-section .section-heading>div,
.compatibility-layout .compatibility-zodiac-section .section-heading>div{min-width:0;width:100%}
.personal-zodiac-section .period-nav,
.compatibility-layout .compatibility-zodiac-section .period-nav{margin-bottom:12px}
@media(max-width:560px){
 .personal-zodiac-section .section-heading,
 .compatibility-layout .compatibility-zodiac-section .section-heading{top:64px!important;padding:10px 0!important;margin-bottom:14px!important}
}

/* Let the sticky period heading blend into the actual page background in both themes. */
.personal-zodiac-section .section-heading,
.compatibility-layout .compatibility-zodiac-section .section-heading{
  background:transparent!important;
  box-shadow:none!important;
  border-color:transparent!important;
}
.personal-zodiac-section .section-heading::before,
.compatibility-layout .compatibility-zodiac-section .section-heading::before{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}


/* /personal and /compatibility: period tabs and heading stay in normal document flow. */
.personal-zodiac-section .section-heading,
.compatibility-layout .compatibility-zodiac-section .section-heading{
  position:static!important;
  top:auto!important;
  z-index:auto!important;
  isolation:auto!important;
  background:transparent!important;
  box-shadow:none!important;
  border-color:transparent!important;
}
.personal-zodiac-section .section-heading::before,
.compatibility-layout .compatibility-zodiac-section .section-heading::before{
  content:none!important;
  display:none!important;
}

/* Zodiac cards beneath the main content on Tarot and prediction-ball pages. */
.zodiac-after-content{margin-top:34px;min-width:0}
.zodiac-after-content .section-heading{align-items:center;flex-wrap:wrap;margin-bottom:20px}
.zodiac-after-content .section-heading h2{font-size:clamp(23px,3vw,30px);margin:0}
.zodiac-after-content .zodiac-grid.horoscope-sign-cards{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.zodiac-after-content .zodiac-card{display:block;text-decoration:none;color:var(--text);padding:18px;min-height:0}
.zodiac-after-content .zodiac-number{display:block;margin-top:12px;padding-top:10px;border-top:1px solid var(--line);font-size:12px;line-height:1.4;color:var(--muted)}
.zodiac-after-content .zodiac-number strong{display:inline-block;margin-left:3px;color:var(--accent);font-size:18px;font-weight:800;font-variant-numeric:tabular-nums}
@media(max-width:820px){.zodiac-after-content{margin-top:28px}.zodiac-after-content .zodiac-grid.horoscope-sign-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}}
@media(max-width:360px){.zodiac-after-content .zodiac-grid.horoscope-sign-cards{grid-template-columns:minmax(0,1fr)}}


 
/* Pair compatibility page: forecast and related site cards. */
.compat-detail-main>.compatibility-zodiac-section{margin-top:30px;min-width:0}
.compat-detail-main>.compatibility-zodiac-section .section-heading{align-items:flex-start;margin-bottom:18px}
.compat-detail-main>.compatibility-zodiac-section .section-heading h2{font-size:clamp(22px,2.7vw,29px);line-height:1.25;margin:14px 0 0}
.compat-detail-main>.compatibility-zodiac-section .period-nav{display:flex;gap:7px;flex-wrap:wrap}
.compat-detail-main>.compatibility-zodiac-section .zodiac-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.compat-pair-feature-card .feature-card{display:block;padding:17px;border:1px solid var(--line);border-radius:18px;background:var(--card);text-decoration:none;color:var(--text);transition:transform .18s ease,border-color .18s ease}
.compat-pair-feature-card .feature-card:hover{transform:translateY(-2px);border-color:var(--accent)}
.compat-pair-feature-card .feature-icon{display:block;font-size:25px;line-height:1.2;margin-bottom:9px;color:var(--accent)}
.compat-pair-feature-card .feature-card h3{font-size:16px;line-height:1.35;margin:0}
.compat-pair-feature-card .feature-card p{font-size:12px;line-height:1.5;margin:8px 0 10px;color:var(--muted)}
.compat-pair-feature-card .text-link{font-size:12px;font-weight:700;color:var(--accent)}
@media(max-width:820px){.compat-detail-main>.compatibility-zodiac-section .zodiac-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.compat-variant-sidebar{display:flex;flex-direction:column;gap:16px}}
@media(max-width:560px){.compat-detail-main>.compatibility-zodiac-section{margin-top:24px}.compat-detail-main>.compatibility-zodiac-section .zodiac-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.compat-detail-main>.compatibility-zodiac-section .section-heading h2{font-size:23px}.compat-pair-feature-card .feature-card{padding:16px}}

/* Date navigation in the detailed compatibility sidebar, matching /compatibility. */
.compat-detail-layout .compat-variant-sidebar .compatibility-date-card{display:flex;flex-direction:column;gap:0;padding:20px;border:1px solid var(--line);border-radius:20px;background:var(--surface);box-shadow:var(--shadow)}
.compat-detail-layout .compat-variant-sidebar .compatibility-date-card strong{display:block;margin-bottom:12px;font-size:16px}
.compat-detail-layout .compat-variant-sidebar .compatibility-date-card a{display:block;padding:9px 0;border-top:1px solid var(--line);font-size:14px;text-decoration:none;color:var(--text)}
.compat-detail-layout .compat-variant-sidebar .compatibility-date-card a:hover{color:var(--accent)}
@media(max-width:820px){.compat-detail-layout .compat-variant-sidebar .compatibility-date-card{width:100%}}

/* Dedicated desktop layout for personal horoscope result pages. */
/* Result layout override */
@media(min-width:821px){.personal-page .personal-layout.personal-result-layout{display:grid!important;grid-template-columns:minmax(0,850px) minmax(0,285px)!important;column-gap:28px!important;justify-content:space-between!important;max-width:1180px!important}.personal-result-layout>.personal-main-column{grid-column:1!important;grid-row:1!important;width:100%!important;max-width:none!important}.personal-result-layout>.personal-feature-sidebar{grid-column:2!important;grid-row:1!important;max-width:285px!important}.personal-result-layout .personal-main-column>.personal-card,.personal-result-layout .personal-zodiac-section{width:100%!important;max-width:none!important;margin-left:0!important;margin-right:0!important}}
@media(max-width:820px){.personal-page .personal-layout.personal-result-layout{grid-template-columns:minmax(0,1fr)!important}.personal-result-layout>.personal-main-column,.personal-result-layout>.personal-feature-sidebar{grid-column:1!important;grid-row:auto!important;max-width:none!important;width:100%!important}}


/* Personal result page: match /compatibility container width and two-column proportions. */
.personal-page .personal-result-container{width:min(var(--container),calc(100% - 2 * var(--gutter)))!important;max-width:var(--container)!important;margin-inline:auto}
.personal-page .personal-result-layout{width:100%;max-width:none!important;grid-template-columns:minmax(0,1fr) 245px!important;gap:28px;align-items:start}
.personal-result-layout .personal-main-column{min-width:0;gap:22px}
.personal-result-layout .personal-zodiac-section{width:100%;min-width:0;margin:0}
.personal-result-layout .personal-zodiac-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:820px){.personal-page .personal-result-layout{grid-template-columns:minmax(0,1fr)!important;gap:24px}.personal-result-layout .personal-zodiac-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.personal-result-layout .personal-main-column{gap:16px}.personal-result-layout .personal-zodiac-grid{grid-template-columns:minmax(0,1fr)}}


/* Compact date choices for daily zodiac horoscopes on mobile. */
.horoscope-mobile-dates{display:none}
@media(max-width:700px){
 .horoscope-mobile-dates{display:flex;align-items:center;gap:8px;margin:0 0 16px;padding:0 0 3px;overflow-x:auto;overflow-y:hidden;white-space:nowrap;overscroll-behavior-x:contain;touch-action:pan-x;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:none}
 .horoscope-mobile-dates::-webkit-scrollbar{display:none}
 .horoscope-mobile-dates .horoscope-date-link{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;min-width:54px;min-height:38px;padding:7px 13px;border:1px solid var(--border-color,rgba(130,120,170,.28));border-radius:10px;color:var(--text-color,inherit);text-decoration:none;font-size:14px;font-weight:600;line-height:1;white-space:nowrap;scroll-snap-align:start}
 .horoscope-mobile-dates .horoscope-date-link.is-current{border-color:var(--accent,#8b70d6);background:rgba(139,112,214,.13);color:var(--accent,#8b70d6)}
}


/* Swipeable month selector for monthly zodiac horoscopes on mobile. */
.horoscope-mobile-months{display:none}
@media(max-width:700px){
 .horoscope-mobile-months{display:flex;align-items:center;gap:8px;margin:0 0 16px;padding:0 0 3px;overflow-x:auto;overflow-y:hidden;white-space:nowrap;overscroll-behavior-x:contain;touch-action:pan-x;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:none}
 .horoscope-mobile-months::-webkit-scrollbar{display:none}
 .horoscope-mobile-months .horoscope-month-link{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;min-height:38px;padding:7px 13px;border:1px solid var(--border-color,rgba(130,120,170,.28));border-radius:10px;color:var(--text-color,inherit);text-decoration:none;font-size:14px;font-weight:600;line-height:1;white-space:nowrap;scroll-snap-align:start}
 .horoscope-mobile-months .horoscope-month-link.is-current{border-color:var(--accent,#8b70d6);background:rgba(139,112,214,.13);color:var(--accent,#8b70d6)}
.horoscope-mobile-months .horoscope-month-link.is-locked{opacity:.72;gap:6px}
.horoscope-mobile-months .horoscope-month-link .date-lock-icon{width:12px;height:12px;flex:0 0 12px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
}

/* Mobile compatibility detail order: content, both sign lists, site sections, then zodiac profile. */
@media(max-width:820px){
  .compat-detail-layout{display:flex;flex-direction:column;gap:20px}
  .compat-detail-main,.compat-variant-sidebar{display:contents}
  .compat-detail-main>.compat-score-grid{order:1;width:100%}
  .compat-detail-main>.compatibility-article{order:2;width:100%}
  .compat-variant-sidebar>.compat-variant-card:nth-child(1){order:3;width:100%}
  .compat-variant-sidebar>.compat-variant-card:nth-child(2){order:4;width:100%}
  .compat-variant-sidebar>.compat-pair-feature-card{order:5;width:100%}
  .compat-variant-sidebar>.compatibility-date-card{order:6;width:100%}
  .compat-detail-main>.compatibility-zodiac-section{order:7;width:100%;margin-top:0}
}
@media(max-width:560px){
  .compat-detail-layout{gap:16px}
  .compat-detail-main>.compatibility-zodiac-section{margin-top:4px}
}

/* Mobile spacing for personal horoscope result sidebar cards */
@media (max-width: 820px) {
  .personal-page .personal-result-layout > .personal-feature-sidebar {
    display: flex !important;
    flex-direction: column !important;
    gap: 18px !important;
    align-items: stretch !important;
  }
  .personal-page .personal-result-layout > .personal-feature-sidebar > .feature-card {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }
  .personal-page .personal-result-layout > .personal-feature-sidebar > .side-card {
    margin-top: 2px !important;
    box-sizing: border-box !important;
  }
}

/* Match mobile content width on personal horoscope result pages to horoscope pages. */
@media(max-width:820px){
  .personal-page .container.personal-container.personal-result-container{
    width:calc(100% - 2 * var(--gutter))!important;
    max-width:var(--container)!important;
    margin-left:auto!important;
    margin-right:auto!important;
    padding-left:0!important;
    padding-right:0!important;
    box-sizing:border-box!important;
  }
  .personal-page .personal-result-layout,
  .personal-page .personal-result-layout>.personal-main-column,
  .personal-page .personal-result-layout>.personal-feature-sidebar,
  .personal-page .personal-result-layout .personal-card,
  .personal-page .personal-result-layout .personal-zodiac-section{
    width:100%!important;
    max-width:none!important;
    min-width:0!important;
    box-sizing:border-box!important;
  }
}

/* Desktop: make personalized horoscope result pages use the same overall width as horoscope detail pages. */
@media (min-width: 821px) {
  .personal-page .container.personal-container.personal-result-container {
    width: min(1180px, calc(100% - 2 * var(--gutter))) !important;
    max-width: 1180px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }
  .personal-page .personal-layout.personal-result-layout {
    display: grid !important;
    width: 100% !important;
    max-width: 1180px !important;
    grid-template-columns: minmax(0, 1fr) 285px !important;
    column-gap: 28px !important;
    justify-content: stretch !important;
    box-sizing: border-box !important;
  }
  .personal-page .personal-result-layout > .personal-main-column,
  .personal-page .personal-result-layout > .personal-feature-sidebar {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
  .personal-page .personal-result-layout .personal-card,
  .personal-page .personal-result-layout .personal-zodiac-section {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
  }
}

/* Personal horoscope date selector matches /horoscope/today sidebar card */
.personal-date-sidebar .side-card{background:var(--surface);border:1px solid var(--line);border-radius:24px;padding:clamp(22px,4vw,30px);box-shadow:var(--shadow)}
.personal-date-sidebar .side-card strong{margin-bottom:10px;font-size:inherit}
.personal-date-sidebar .side-card a{padding:9px 10px;border:0;border-radius:10px;font-size:13px;color:var(--text)}
.personal-date-sidebar .side-card a:hover{background:var(--surface2);color:var(--accent)}


/* 2026-10-12: unify content panels to the same surface color as month-horoscope feature cards */
body :is(.card,.content-card,.horoscope-card,.side-card,.empty-state,.feature-card,.zodiac-card,.personal-card,.compat-picker,.score-card,.compatibility-signs-column,.compat-variant-card,.compat-pair-feature-card .feature-card,.compatibility-date-card,.personal-date-sidebar .side-card,.magic-ball-card,.ball-info .content-card,.ball-card,.ball-prediction,.ball-limit,.tests-page .card,.tests-page form.card){background:var(--surface)!important}

/* 2026-10-12: right-hand columns on /compatibility and /tests stay transparent;
   only the individual feature/date cards keep their own surface. */
body .compatibility-layout > .compatibility-feature-sidebar,
body .tests-layout > .tests-signs-column.compatibility-signs-column {
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

/* 2026-10-12: remove the extra panel behind the right-hand cards on /compatibility. */
body .compatibility-layout > aside.compatibility-signs-column.compatibility-feature-sidebar {
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

/* Footer navigation: all primary site sections, responsive and theme-aware */
.footer-grid{align-items:start}
.footer-grid .footer-about p{max-width:290px;line-height:1.7;margin:12px 0 0}
.footer-grid>div:not(:first-child){min-width:0}
.footer-grid>div:not(:first-child) a{line-height:1.55;text-decoration:none;transition:color .18s ease}
.footer-grid>div:not(:first-child) a:hover{color:var(--accent)}
.footer-grid strong{line-height:1.4}
@media(max-width:900px){.footer-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 24px}.footer-grid .footer-about{grid-column:1/-1}.footer-grid .footer-about p{max-width:440px}}
@media(max-width:560px){.site-footer{padding:34px 0 22px}.footer-grid{grid-template-columns:minmax(0,1fr);gap:24px}.footer-grid .footer-about{grid-column:auto}.footer-grid>div:not(:first-child){gap:9px}.footer-grid strong{margin-bottom:2px}.footer-bottom{margin-top:28px;gap:9px;line-height:1.5}}

/* Ensure daily horoscope date pills are visible above the forecast on all mobile widths. */
@media (max-width: 820px) {
  .horoscope-layout-section .content-main > nav.horoscope-mobile-dates { display:flex !important; }
  .horoscope-layout-section .content-main > nav.horoscope-mobile-dates .horoscope-date-link { flex:0 0 auto; }
}


/* Date access sharing dialog for locked daily horoscope dates. */
.horoscope-mobile-dates .horoscope-date-link.is-locked{position:relative;gap:5px;border-style:dashed;opacity:.86;cursor:pointer}
.horoscope-mobile-dates .date-lock-icon{width:13px;height:13px;flex:0 0 13px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.date-share-modal[hidden]{display:none!important}.date-share-modal{position:fixed;inset:0;z-index:10000;display:grid;place-items:center;padding:18px}
.date-share-backdrop{position:absolute;inset:0;width:100%;height:100%;border:0;background:rgba(8,7,18,.72);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)}
.date-share-panel{position:relative;z-index:1;width:min(100%,440px);padding:30px 24px 24px;border:1px solid var(--border-color,rgba(160,145,210,.3));border-radius:22px;background:var(--card-bg,#1c1a2a);color:var(--text-color,#f7f4ff);box-shadow:0 24px 80px rgba(0,0,0,.35);text-align:center}
.date-share-close{position:absolute;top:10px;right:13px;border:0;background:transparent;color:inherit;font-size:28px;line-height:1;cursor:pointer}.date-share-favicon{display:block;width:48px;height:48px;object-fit:contain;margin:0 auto 14px;border-radius:12px}
.date-share-panel h2{margin:0 12px 10px;font-size:22px;line-height:1.25}.date-share-panel>p{margin:0 auto 18px;max-width:35ch;color:var(--muted-color,#bcb7ce);font-size:14px;line-height:1.55}
.date-share-actions{display:grid;grid-template-columns:minmax(0,1fr);gap:9px}.date-share-actions button{min-height:44px;padding:10px 12px;border:1px solid var(--border-color,rgba(160,145,210,.3));border-radius:12px;background:rgba(139,112,214,.1);color:inherit;font:inherit;font-size:14px;font-weight:600;cursor:pointer}.date-share-actions button:hover{background:rgba(139,112,214,.2)}.date-share-actions .date-share-copy{grid-column:1/-1;background:var(--accent,#a995ef);color:#171323;border-color:transparent}.date-share-panel .date-share-note{margin:15px auto 0;font-size:12px}body.date-share-open{overflow:hidden}
@media(max-width:700px){.date-share-panel{padding:28px 20px 20px}.date-share-panel h2{font-size:20px}}


/* Locked date links in the desktop sidebar, sharing the same unlock dialog as mobile. */
.side-card a.is-locked{display:flex;align-items:center;justify-content:space-between;gap:8px;cursor:pointer;opacity:.88}
.side-card a.is-locked .date-lock-icon{width:14px;height:14px;flex:0 0 14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}