/* Landing composition based on the approved Natal Ritual art direction. */
:root { --ink:#070c2d; --paper:#fbf5fc; --lav:#c8b1ff; --peach:#ffb29e; --line:rgba(211,194,255,.36); --glass:rgba(19,27,76,.66); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--paper); background:#080d31; font-family:Inter,system-ui,sans-serif; overflow-x:hidden; }
body::before { content:""; position:fixed; inset:0; pointer-events:none; background:radial-gradient(circle at 53% 11%,rgba(100,107,224,.38),transparent 23%),radial-gradient(circle at 84% 29%,rgba(255,152,181,.14),transparent 30%),linear-gradient(180deg,#070b29,#0a113c 62%,#080d2c); z-index:-4; }
.ritual-page { position:relative; max-width:1320px; padding:28px 32px 0; margin:0 auto; overflow:hidden; }
.aurora { position:absolute; z-index:-2; pointer-events:none; filter:blur(8px); opacity:.82; }
.aurora-one { width:1000px; height:460px; top:-135px; left:150px; border:48px solid transparent; border-radius:50%; background:linear-gradient(100deg,transparent 18%,#6659e7 39%,#efa2e7 59%,#ffcfac 68%,transparent 84%) border-box; -webkit-mask:linear-gradient(#000 0 0) padding-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; transform:rotate(10deg); }
.aurora-two { width:1050px; height:350px; left:-220px; top:260px; background:radial-gradient(ellipse,rgba(194,124,239,.60) 0,rgba(112,98,238,.28) 30%,transparent 68%); transform:rotate(-14deg); }
.stars { position:absolute; z-index:-1; inset:0; opacity:.45; background-image:radial-gradient(#fff 1px,transparent 1.2px),radial-gradient(#e9c4ff 1px,transparent 1.2px); background-size:130px 130px,210px 210px; background-position:13px 20px,80px 65px; mask-image:linear-gradient(180deg,black,transparent 75%); }
.ritual-nav { min-height:50px; display:flex; align-items:center; justify-content:space-between; position:relative; z-index:1; }
.ritual-brand { color:#fff7fe; font-family:"Cormorant Garamond",serif; font-size:29px; font-weight:500; text-decoration:none; letter-spacing:-.5px; display:inline-flex; align-items:center; gap:11px; }
.ritual-brand span { color:#f7e5ff; font-family:Inter,sans-serif; font-size:27px; }
.nav-links { display:flex; align-items:center; gap:30px; }
.nav-links a,.ritual-footer a { color:#dcd9ed; text-decoration:none; font-size:13px; }
.nav-actions { display:flex; align-items:center; gap:22px; }.language-control { position:relative; }.language-control > button { min-width:58px; padding:7px 9px; border:1px solid rgba(228,211,255,.54); border-radius:18px; color:#fff; background:rgba(22,31,77,.6); font:700 10px Inter,sans-serif; letter-spacing:.7px; cursor:pointer; }.language-control > button span + span { margin-left:5px; color:#e5c7ef; font-size:14px; line-height:0; }.language-menu { position:absolute; top:calc(100% + 9px); right:0; z-index:20; width:118px; padding:5px; border:1px solid rgba(227,210,255,.55); border-radius:12px; background:rgba(12,19,57,.96); box-shadow:0 16px 35px rgba(0,0,0,.32); }.language-menu[hidden] { display:none; }.language-menu button { display:block; width:100%; padding:9px 8px; border:0; border-radius:8px; color:#eae6f2; background:transparent; text-align:left; font:12px Inter,sans-serif; cursor:pointer; }.language-menu button:hover,.language-menu button.is-active { background:rgba(166,136,219,.24); color:#fff; }
.landing-hero { text-align:center; padding:52px 0 55px; position:relative; }
.hero-orbit { position:absolute; width:600px; height:310px; border:1px solid rgba(207,222,255,.35); border-radius:50%; top:-2px; left:50%; transform:translateX(-50%) rotate(-22deg); box-shadow:0 0 70px rgba(120,168,255,.23) inset; pointer-events:none; }
.hero-copy { max-width:680px; margin:auto; position:relative; }
h1,h2,h3,p { margin-top:0; }
.hero-copy h1 { color:#fffaff; font-family:"Cormorant Garamond",Georgia,serif; font-size:clamp(60px,7vw,98px); font-weight:400; line-height:.84; letter-spacing:-3.4px; margin:24px 0 24px; }
.hero-copy h1 em { font-weight:400; background:linear-gradient(95deg,#b79eff,#e7a5e7,#ffb49a); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero-copy > p { color:#dfdced; font-size:17px; line-height:1.48; max-width:430px; margin:0 auto 19px; }
.free-pill { display:inline-flex; gap:11px; align-items:center; border:1px solid rgba(214,181,255,.74); border-radius:30px; padding:10px 25px; color:#fff; background:rgba(25,32,81,.5); font-size:14px; }
.free-pill:first-letter { color:#dcadff; }
.birth-card { position:relative; z-index:1; max-width:1140px; margin:33px auto 0; padding:25px 26px 32px; border:1px solid rgba(234,205,255,.75); border-radius:18px; background:linear-gradient(115deg,rgba(62,55,107,.84),rgba(24,37,89,.84)); box-shadow:0 22px 60px rgba(0,0,0,.25),inset 0 1px rgba(255,255,255,.13); display:grid; grid-template-columns:1fr 1fr 1.1fr .8fr 1.05fr; gap:17px; text-align:left; }
.birth-card label { display:grid; gap:8px; min-width:0; }.birth-card label span { color:#d8d3e7; font-size:10px; font-weight:600; letter-spacing:.4px; }
.birth-card input,.birth-card select { width:100%; min-width:0; height:54px; border:1px solid rgba(193,189,232,.5); border-radius:10px; padding:0 14px; background:rgba(15,23,65,.5); color:#fff; font:14px Inter,sans-serif; outline:none; }
.birth-card input:focus,.birth-card select:focus { border-color:#eeb1b4; box-shadow:0 0 0 3px rgba(238,177,180,.16); }.birth-card input::placeholder { color:#b7b6cc; }.birth-card button,.preview-button,.plan-card button,.ritual-footer button { border:0; border-radius:11px; align-self:end; height:54px; color:#171530; font:600 14px Inter,sans-serif; background:linear-gradient(100deg,#ffb89d,#e9a4ec 95%); cursor:pointer; box-shadow:0 10px 24px rgba(234,145,179,.2); }.birth-card button b { margin-left:13px; font-size:20px; font-weight:400; }.form-privacy { position:absolute; bottom:10px; left:0; right:0; color:#c4c2d6; text-align:center; font-size:11px; margin:0; }
.hero-down { position:absolute; bottom:0; left:50%; color:#fff; text-decoration:none; font-size:34px; transform:translateX(-50%); }
.glass-panel { border:1px solid var(--line); background:linear-gradient(140deg,rgba(21,35,87,.75),rgba(6,17,54,.78)); box-shadow:inset 0 1px rgba(255,255,255,.09),0 24px 52px rgba(0,0,0,.2); border-radius:18px; }
.chart-preview { min-height:425px; display:grid; grid-template-columns:1.05fr 1.15fr .46fr; align-items:center; padding:34px; gap:21px; }.preview-copy h2,.guidance h2,.plans-heading h2 { font:400 35px/.94 "Cormorant Garamond",serif; letter-spacing:-.8px; margin-bottom:24px; }.preview-copy em,.guidance em { font-weight:400; color:#e6caec; }.identity-list { display:grid; gap:10px; }.identity-list article { display:flex; align-items:center; gap:16px; padding:12px 14px; background:linear-gradient(110deg,rgba(114,94,185,.56),rgba(34,42,95,.2)); border:1px solid rgba(217,201,255,.15); border-radius:11px; }.identity-list i { width:34px; color:#dbb7ff; font-size:29px; font-style:normal; text-align:center; }.identity-list .sun-glyph { color:#ffc96f; }.identity-list .moon-glyph { color:#c7a6ff; }.identity-list b { display:block; font-size:13px; }.identity-list p { margin:4px 0 0; color:#c9c6d8; font-size:11px; }.preview-button { min-width:130px; height:41px; margin:16px 0 10px; color:white; background:linear-gradient(100deg,#a98df4,#6e65db); }.preview-copy small { display:block; color:#b5b3c9; font-size:10px; }
.preview-wheel { width:min(330px,29vw); aspect-ratio:1; justify-self:center; position:relative; border:1px solid #d9a7bd; border-radius:50%; background:radial-gradient(circle,#10123a 0 17%,transparent 17.5%),repeating-conic-gradient(from -2deg,rgba(255,233,204,.4) 0 1deg,transparent 1deg 30deg),radial-gradient(circle,#24326d 0,#091233 71%); box-shadow:0 0 0 9px rgba(189,153,208,.13),0 0 0 30px rgba(5,10,35,.34); }.wheel-ring { position:absolute; border:1px solid rgba(235,203,212,.55); border-radius:50%; inset:12%; }.ring-b { inset:34%; border-color:rgba(226,180,249,.42); }.wheel-center { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); color:#ffb9b1; font-size:22px; }.aspect { position:absolute; width:1px; height:61%; left:50%; top:20%; transform-origin:bottom; background:linear-gradient(#e7abdf,transparent); }.aspect-one{transform:rotate(55deg)}.aspect-two{transform:rotate(-56deg);background:linear-gradient(#67b8ff,transparent)}.aspect-three{transform:rotate(178deg);background:linear-gradient(#ee8ea9,transparent)}.preview-wheel .z { position:absolute; color:#f0b5b9; font-style:normal; font-size:22px; }.z1{top:9%;left:47%}.z2{top:46%;right:9%}.z3{bottom:9%;left:47%}.z4{top:46%;left:9%}.planet-key { align-self:center; display:grid; gap:8px; color:#d9cfe7; font-size:11px; }.planet-key p { color:#fff; margin:0 0 5px; }.planet-key span:nth-of-type(1){color:#ffcc6f}.planet-key span:nth-of-type(2){color:#d6b6ff}.planet-key span:nth-of-type(4){color:#ffb1b2}
.how-section { padding:62px 3px 50px; }.ornament-title { display:flex; align-items:center; gap:17px; justify-content:center; }.ornament-title span { height:1px; flex:1; background:linear-gradient(90deg,transparent,#d9b4d4,transparent); }.ornament-title h2 { margin:0; font:400 35px "Cormorant Garamond",serif; }.ritual-steps { display:grid; grid-template-columns:1fr 42px 1fr 42px 1fr; gap:20px; text-align:center; padding:35px 20px 0; align-items:center; }.ritual-steps > b { color:#cdb6d8; font-weight:400; font-size:35px; }.ritual-steps article { min-width:0; }.step-icon { width:104px; height:104px; margin:0 auto 20px; border:1px solid #bba6e2; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#e6d2fa; font-size:12px; position:relative; }.step-icon i { position:absolute; font-size:35px; font-style:normal; bottom:17px; }.step-icon.warm { border-color:#eba5b3; color:#ffd6cf; }.ritual-steps h3 { font-size:14px; margin-bottom:6px; }.ritual-steps p { max-width:190px; margin:auto; color:#c3c1d2; font-size:12px; line-height:1.5; }
.plans-section { padding:32px 14px 44px; border-top:1px solid rgba(207,179,213,.28); }.plans-heading { text-align:center; }.plans-heading h2 { margin:0 0 5px; font-size:39px; }.plans-heading p { color:#d5cddb; font-size:14px; }.billing-toggle { display:inline-flex; align-items:center; gap:25px; padding:5px 8px 5px 20px; margin:9px 0 24px; border:1px solid rgba(220,202,255,.63); border-radius:20px; font-size:12px; }.billing-toggle b { color:white; }.billing-toggle span { color:#c2bdd0; }.billing-toggle i { padding:5px 10px; border-radius:12px; font-style:normal; color:#f6cef0; background:#5b4aa2; font-size:10px; }.plan-grid { max-width:1050px; margin:auto; display:grid; grid-template-columns:1fr 1fr; gap:18px; }.plan-card { position:relative; min-height:385px; padding:24px; overflow:hidden; border:1px solid rgba(211,191,252,.48); border-radius:14px; background:linear-gradient(137deg,rgba(50,46,119,.93),rgba(15,25,74,.98)); }.plan-card::after { content:""; position:absolute; width:230px; height:230px; border:1px solid rgba(240,179,194,.45); border-radius:50%; right:-90px; bottom:-85px; box-shadow:0 0 0 25px rgba(200,141,226,.06),0 0 0 58px rgba(200,141,226,.04); }.plan-card > * { position:relative; z-index:1; }.plan-card > p { color:#d8c7f3; font-size:10px; letter-spacing:.8px; }.plan-card h3 { margin:12px 0 0; font:400 39px/.9 "Cormorant Garamond",serif; }.plan-card h3 em { color:#f2d9fb; font-style:normal; }.plan-card > span { color:#ded7e3; font-size:14px; }.plan-card strong { display:block; margin:23px 0 19px; font:400 37px "Cormorant Garamond",serif; }.plan-card strong small { color:#e2d9e6; font:14px Inter,sans-serif; }.plan-card ul { padding:0; list-style:none; display:grid; gap:10px; font-size:12px; color:#ece9f0; }.plan-card li::before { content:"✓"; display:inline-grid; place-items:center; width:16px; height:16px; margin-right:8px; border-radius:50%; color:white; background:#8b79d2; font-size:10px; }.plan-card button { width:100%; height:41px; position:absolute; bottom:21px; left:24px; width:calc(100% - 48px); color:white; background:linear-gradient(100deg,#8d73e3,#bd93e4); }.ritual-duo { background:linear-gradient(133deg,rgba(157,104,115,.87),rgba(95,72,126,.96)); }.ritual-duo button { color:#fff; background:linear-gradient(100deg,#ffac94,#ca8ae3); }
.guidance { max-width:1120px; margin:0 auto 36px; padding:28px 34px; display:grid; grid-template-columns:.8fr 1.2fr; align-items:center; gap:30px; background:linear-gradient(115deg,rgba(21,32,86,.78),rgba(47,49,116,.65)); }.guidance h2 { font-size:34px; margin-bottom:16px; }.guidance-intro p { max-width:270px; color:#d0ccd9; font-size:13px; line-height:1.55; }.chat-demo { border:1px solid rgba(200,190,245,.33); border-radius:10px; padding:13px; background:rgba(6,14,49,.43); }.chat-demo small { color:#d1c7e4; font-size:11px; }.chat-demo article { display:flex; gap:11px; margin:13px 0 9px; }.chat-demo article b { display:grid; place-items:center; min-width:28px; height:28px; border:1px solid #edbb9b; border-radius:50%; color:#ffe0ad; }.chat-demo article p { margin:0; padding:11px; border-radius:8px; background:rgba(79,75,139,.35); color:#e5e2e9; font-size:12px; line-height:1.45; }.prompt-tags { display:flex; gap:7px; padding-left:39px; }.prompt-tags span { padding:5px 8px; border-radius:12px; background:#58538d; color:#e7e0ee; font-size:10px; }.chat-input { margin-top:13px; padding:10px; border:1px solid rgba(195,186,241,.45); border-radius:7px; color:#aaa8c2; font-size:11px; }.chat-input b { float:right; color:#ffd2dc; font-size:15px; }
.trust-grid { display:grid; grid-template-columns:repeat(3,1fr); max-width:1110px; padding:10px 15px 46px; margin:auto; border-bottom:1px solid rgba(218,190,218,.35); gap:30px; }.trust-grid article { display:flex; align-items:flex-start; gap:12px; }.trust-grid i { color:#f7e4ff; font-size:28px; font-style:normal; }.trust-grid b { font-size:13px; }.trust-grid p { margin:5px 0 0; color:#c1bdca; font-size:11px; line-height:1.4; }.ritual-footer { max-width:1320px; padding:25px 47px 35px; margin:auto; display:grid; grid-template-columns:1.3fr 1fr 1.2fr 1.25fr; gap:16px; align-items:center; color:#d2ccdb; }.ritual-footer .ritual-brand { font-size:27px; grid-row:span 2; }.ritual-footer > p { font-size:11px; line-height:1.4; grid-row:2; }.ritual-footer > div { display:flex; gap:15px; flex-wrap:wrap; }.ritual-footer button { height:42px; color:#fff; }.ritual-footer small { font-size:10px; text-align:right; }
/* Preserve functional generated-chart UI in the same visual language. */
.result { max-width:1120px; margin:0 auto 45px; padding:35px; border:1px solid var(--line); border-radius:18px; background:rgba(9,19,57,.75); }.result h2 { font:400 44px "Cormorant Garamond",serif; }.result-head { display:flex; justify-content:space-between; align-items:center; }.ghost { padding:10px 17px; color:white; background:transparent; border:1px solid #c7b1e6; border-radius:20px; }.chart-layout { display:grid; grid-template-columns:1fr 1fr; gap:28px; }.wheel-panel,.story-panel { padding:20px; border-radius:14px; background:rgba(39,43,100,.28); }.wheel { margin:auto; }.insight { padding:14px; margin-bottom:9px; border-radius:10px; background:rgba(101,84,151,.38); }.insight h3 { margin-bottom:5px; font-size:15px; }.insight p,.personal-note p,.muted { color:#c8c4d4; font-size:12px; line-height:1.5; }.personal-note { display:flex; gap:12px; padding:12px; }.personal-note span { color:#eeb2e1; }.placements-section { display:flex; gap:30px; margin-top:22px; }.placements { display:grid; flex:1; grid-template-columns:repeat(3,1fr); gap:8px; }.placement { padding:9px; border-radius:8px; background:rgba(105,89,154,.28); font-size:11px; }.placement b,.placement span { display:block; }.placement span { margin-top:4px; color:#d0c7dc; }.hidden { display:none; }
@media (max-width:800px) { .ritual-page{padding:18px 16px 0}.ritual-nav{min-height:38px}.ritual-brand{font-size:25px}.nav-links{display:none}.nav-actions{gap:0}.landing-hero{padding:55px 0 42px}.hero-copy h1{font-size:61px;letter-spacing:-2.3px}.hero-copy>p{font-size:15px}.birth-card{grid-template-columns:1fr 1fr;padding:19px 16px 37px;gap:13px}.birth-card .place-field,.birth-card .zone-field,.birth-card button{grid-column:span 2}.birth-card button{margin-top:3px}.chart-preview{grid-template-columns:1fr;padding:24px;gap:25px}.preview-wheel{width:min(320px,74vw);grid-row:1}.preview-copy{grid-row:2}.planet-key{display:grid;grid-template-columns:repeat(3,1fr);font-size:10px}.planet-key p{grid-column:span 3}.how-section{padding-top:48px}.ritual-steps{grid-template-columns:1fr;padding:28px 0 0;gap:23px}.ritual-steps>b{transform:rotate(90deg)}.plan-grid,.guidance,.chart-layout{grid-template-columns:1fr}.plans-section{padding-left:0;padding-right:0}.guidance{padding:24px}.trust-grid{grid-template-columns:1fr;gap:20px;padding-bottom:28px}.ritual-footer{grid-template-columns:1fr;padding:24px 18px}.ritual-footer .ritual-brand,.ritual-footer>p{grid-row:auto}.ritual-footer small{text-align:left}.result{padding:22px 16px}.result-head{align-items:flex-start;gap:16px}.result h2{font-size:35px}.placements-section{display:block}.placements{margin-top:12px;grid-template-columns:repeat(2,1fr)} }
@media (max-width:420px) { .hero-copy h1{font-size:53px}.birth-card{grid-template-columns:1fr}.birth-card label,.birth-card .place-field,.birth-card .zone-field,.birth-card button{grid-column:span 1}.free-pill{font-size:12px;padding:9px 14px}.chart-preview{margin-left:-3px;margin-right:-3px}.preview-wheel{width:250px}.plan-card{padding:21px}.plan-card h3{font-size:34px}.planet-key{grid-template-columns:repeat(2,1fr)}.planet-key p{grid-column:span 2} }

/* A personal chart is the visual centre of the form, not a decorative static image. */
.birth-stage { max-width:1140px; margin:33px auto 0; display:grid; grid-template-columns:minmax(0,1.32fr) minmax(280px,.68fr); gap:16px; align-items:stretch; position:relative; z-index:1; }
.birth-stage .birth-card { max-width:none; margin:0; grid-template-columns:repeat(2,minmax(0,1fr)); min-height:325px; padding:26px 26px 42px; align-content:start; }
.birth-stage .birth-card .place-field,.birth-stage .birth-card .zone-field { grid-column:auto; }
.birth-stage .birth-card button { grid-column:1/-1; height:50px; margin-top:2px; }
.live-chart-card { min-height:325px; padding:22px 18px 15px; border:1px solid rgba(237,208,255,.68); border-radius:18px; background:linear-gradient(146deg,rgba(53,49,119,.84),rgba(12,22,63,.89)); box-shadow:0 22px 60px rgba(0,0,0,.25),inset 0 1px rgba(255,255,255,.12); overflow:hidden; text-align:center; }
.live-kicker { color:#ded4ef; margin:0 0 8px; font-size:9px; font-weight:700; letter-spacing:1.1px; }
.live-wheel { width:170px; aspect-ratio:1; margin:0 auto 8px; position:relative; display:grid; place-items:center; border:1px solid rgba(255,209,198,.65); border-radius:50%; background:radial-gradient(circle,rgba(250,179,178,.34) 0 6%,transparent 7%),repeating-conic-gradient(from 5deg,rgba(255,236,202,.35) 0 .8deg,transparent .8deg 30deg),radial-gradient(circle,#1c245c 0,#0a1138 67%); box-shadow:0 0 0 7px rgba(222,198,255,.1),0 0 38px rgba(201,132,223,.16); transition:transform 1.2s cubic-bezier(.16,1,.3,1),filter .7s ease; }
.live-wheel::after { content:""; position:absolute; inset:17%; border:1px solid rgba(236,216,255,.46); border-radius:50%; }.live-wheel.is-pending { filter:saturate(.62); }.live-wheel.is-ready { filter:saturate(1.1); animation:chart-arrive .85s cubic-bezier(.16,1,.3,1); }
.live-core { width:30px; height:30px; border-radius:50%; background:radial-gradient(circle,#ffe1c5 0 12%,#f0a5a4 13% 27%,rgba(145,100,218,.25) 28%); box-shadow:0 0 24px rgba(255,196,171,.75); z-index:2; }
.live-planet { --planet-angle:0deg; position:absolute; width:20px; height:20px; display:grid; place-items:center; color:#fff5ed; font-family:"Cormorant Garamond",serif; font-size:17px; line-height:1; border-radius:50%; background:rgba(114,76,183,.94); border:1px solid rgba(255,215,202,.72); box-shadow:0 0 13px rgba(203,143,233,.5); transform:rotate(var(--planet-angle)) translateY(-67px) rotate(calc(var(--planet-angle) * -1)); transition:transform 1.15s cubic-bezier(.16,1,.3,1),opacity .5s ease; z-index:3; }
.live-planet[data-key="Sun"] { background:#d59855; }.live-planet[data-key="Moon"] { background:#7666c8; }.live-planet[data-key="Venus"] { background:#c46f99; }
.live-chart-copy b { display:block; color:#fff; font-size:13px; }.live-chart-copy p { margin:5px auto 0; max-width:250px; color:#c9c5d7; font-size:11px; line-height:1.45; }.live-disclosure { margin:10px auto 0; max-width:250px; color:#a9a5bc; font-size:9px; line-height:1.4; }
@keyframes chart-arrive { from { transform:scale(.9); opacity:.28; } to { transform:scale(1); opacity:1; } }
@media (prefers-reduced-motion: reduce) { .live-wheel,.live-planet { transition:none; animation:none; } }

/* Carefully selected editorial art replaces tiny decorative glyphs. */
.identity-list i { display:none; }.identity-list article { gap:13px; }.position-orb { width:33px; height:33px; flex:0 0 33px; border-radius:50%; border:1px solid rgba(255,229,199,.72); box-shadow:0 0 15px rgba(255,191,151,.23); background:radial-gradient(circle at 35% 32%,#fff7df 0 5%,#ffcd7e 7% 22%,#c6784e 24% 45%,#39255f 48%); }.moon-orb { background:radial-gradient(circle at 34% 32%,#f2eaff 0 12%,#b99de6 13% 29%,#6558aa 30% 53%,#262653 54%); }.rising-orb { background:radial-gradient(circle at 50% 63%,#ffe1ad 0 11%,#e99370 12% 28%,#8f5c9a 30% 49%,#272654 51%); }
.ritual-steps { grid-template-columns:repeat(3,1fr); gap:22px; padding:35px 0 0; align-items:start; }.ritual-steps > b { display:none; }.ritual-steps article { position:relative; padding:0 7px; }.ritual-steps article img { display:block; width:100%; aspect-ratio:1.18; object-fit:cover; border:1px solid rgba(215,194,248,.4); border-radius:15px; box-shadow:0 18px 36px rgba(0,0,0,.2); }.ritual-steps article > span { position:absolute; top:12px; left:19px; display:grid; place-items:center; width:34px; height:34px; color:#2b2353; border-radius:50%; background:#f7e5df; font-size:11px; font-weight:700; }.ritual-steps h3 { margin:17px 0 7px; }.ritual-steps p { max-width:230px; }
.guidance-intro { display:grid; grid-template-columns:150px 1fr; gap:22px; align-items:center; }.guidance-intro > img { width:150px; aspect-ratio:1; object-fit:cover; border:1px solid rgba(232,204,229,.35); border-radius:13px; box-shadow:0 12px 30px rgba(0,0,0,.18); }.chat-presence { display:block; flex:0 0 28px; height:28px; border:1px solid rgba(255,210,191,.7); border-radius:50%; background:url("./assets/astral-guidance.jpg") center/180% no-repeat; }.chat-demo article p b { color:#fff8ef; }.trust-grid article { padding:20px 5px 6px; border-top:1px solid rgba(218,190,218,.28); }.trust-grid article::before { content:""; width:38px; height:2px; margin-bottom:16px; display:block; background:linear-gradient(90deg,#f4bda8,#a989ed); }.trust-grid i { display:none; }.trust-grid article div { display:block; }
.ritual-brand span { display:none; }.free-pill::before { content:""; width:7px; height:7px; display:block; border-radius:50%; background:radial-gradient(circle,#fff7d7 0 22%,#d6abff 28% 70%,transparent 72%); box-shadow:0 0 12px #d6abff; }.hero-down { font-size:0; width:15px; height:15px; border-right:2px solid white; border-bottom:2px solid white; transform:translateX(-50%) rotate(45deg); }.chat-input b { float:right; color:#ffd2dc; font-size:15px; }.ritual-footer .ritual-brand { grid-row:span 2; }
@media (max-width:800px) {
  .landing-hero { padding-top:37px; }
  .hero-copy h1 { margin-top:14px; margin-bottom:15px; }
  .birth-stage { display:flex; flex-direction:column; margin-top:20px; gap:10px; }
  .birth-stage .birth-card { order:2; min-height:0; margin:0; }
  .live-chart-card { order:1; min-height:0; display:grid; grid-template-columns:126px 1fr; gap:8px 16px; align-items:center; text-align:left; padding:15px 17px; }.live-kicker,.live-disclosure { grid-column:1/-1; }.live-kicker { margin:0; }.live-wheel { width:118px; margin:0; }.live-planet { transform:rotate(var(--planet-angle)) translateY(-45px) rotate(calc(var(--planet-angle) * -1)); width:16px; height:16px; font-size:13px; }.live-core { width:23px; height:23px; }.live-disclosure { display:none; margin:0; }
  .birth-stage .birth-card { padding:15px 16px 31px; gap:11px; }.birth-stage .birth-card label { gap:6px; }.birth-stage .birth-card input,.birth-stage .birth-card select { height:48px; }.birth-stage .birth-card button { height:49px; margin-top:0; }.birth-stage .form-privacy { bottom:8px; font-size:9px; }
  .language-control > button { display:none; }.language-menu,.language-menu[hidden] { position:static; display:flex!important; width:auto; gap:2px; padding:2px; border-radius:16px; background:rgba(18,29,76,.72); box-shadow:none; }.language-menu button { width:35px; padding:7px 0; border-radius:13px; text-align:center; font-size:0; }.language-menu button::after { content:attr(data-short); color:#dbd5ed; font:700 10px Inter,sans-serif; letter-spacing:.4px; }.language-menu button.is-active { background:linear-gradient(100deg,rgba(235,168,200,.46),rgba(153,131,227,.55)); }.language-menu button.is-active::after { color:#fff; }
  .ritual-steps { grid-template-columns:1fr; gap:30px; max-width:400px; margin:auto; }.ritual-steps article { padding:0; }.guidance-intro { grid-template-columns:110px 1fr; gap:16px; }.guidance-intro > img { width:110px; }.trust-grid article { padding-top:15px; }
}
@media (max-width:420px) {
  .hero-copy h1 { font-size:48px; line-height:.9; letter-spacing:-1.8px; }.hero-copy > p { margin-bottom:13px; }.free-pill { padding:8px 13px; }
  /* Native date/time controls reserve their own affordance on narrow iPhones.
     A single column is calmer and prevents their controls from colliding. */
  .birth-stage .birth-card { grid-template-columns:minmax(0,1fr); }.birth-stage .birth-card label,.birth-stage .birth-card .place-field,.birth-stage .birth-card .zone-field,.birth-stage .birth-card button { grid-column:1/-1; }.birth-stage .birth-card label { min-width:0; }.birth-stage .birth-card input,.birth-stage .birth-card select { padding-left:12px; padding-right:12px; font-size:14px; }
  .live-chart-card { grid-template-columns:104px 1fr; padding:13px 14px; }.live-wheel { width:100px; }.live-planet { transform:rotate(var(--planet-angle)) translateY(-37px) rotate(calc(var(--planet-angle) * -1)); width:14px; height:14px; font-size:11px; }.live-chart-copy b { font-size:12px; }.live-chart-copy p { font-size:10px; line-height:1.36; }.live-kicker { grid-column:1/-1; font-size:8px; }
  .guidance-intro { grid-template-columns:1fr; }.guidance-intro > img { width:100%; aspect-ratio:2.1; }.ritual-footer .ritual-brand { grid-row:auto; }
}

/* Defensive iPhone form geometry. WebKit date/time controls have intrinsic
   affordances, so both the grid items and their controls must be allowed to
   shrink. This deliberately duplicates the narrow layout rules above: it is
   the last rule in the cascade and remains safe if an earlier stylesheet is
   cached or extended. */
@media (max-width: 420px) {
  .birth-stage,
  .birth-stage .birth-card,
  .birth-stage .birth-card label,
  .birth-stage .birth-card input,
  .birth-stage .birth-card select {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .birth-stage .birth-card {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    inline-size: 100% !important;
    width: 100% !important;
    overflow: clip;
  }
  .birth-stage .birth-card > label,
  .birth-stage .birth-card > .place-field,
  .birth-stage .birth-card > .zone-field,
  .birth-stage .birth-card > button,
  .birth-stage .birth-card > .form-privacy {
    grid-column: 1 / -1 !important;
    inline-size: 100% !important;
    width: 100% !important;
  }
  .birth-stage .birth-card input[type="date"],
  .birth-stage .birth-card input[type="time"] {
    display: block;
    inline-size: 100% !important;
    width: 100% !important;
    max-inline-size: 100% !important;
    min-inline-size: 0 !important;
    -webkit-appearance: none;
    appearance: none;
  }
}

/* Product markers replace Unicode pictograms: each planet has a tactile, named material token. */
.planet-key { gap:10px; }
.planet-key .planet-token { display:flex; align-items:center; gap:8px; color:#e9e4ef; }
.planet-key .planet-token::before { content:""; width:16px; height:16px; flex:0 0 16px; border-radius:50%; border:1px solid rgba(255,238,215,.75); box-shadow:inset 2px 2px 4px rgba(255,255,255,.22),0 0 13px rgba(189,148,240,.32); background:radial-gradient(circle at 32% 27%,#fff7dc 0 10%,#e9aa67 11% 36%,#6a3e72 60%,#242455 100%); }
.planet-key .moon::before { background:radial-gradient(circle at 32% 27%,#fff 0 9%,#e7e4fa 10% 35%,#8375c6 40% 65%,#2c315a 100%); }.planet-key .mercury::before { background:radial-gradient(circle at 30% 25%,#fff3e0 0 8%,#bda5aa 11% 35%,#5d586f 68%); }.planet-key .venus::before { background:radial-gradient(circle at 30% 25%,#ffe9df 0 8%,#de8aa5 12% 40%,#714264 70%); }.planet-key .mars::before { background:radial-gradient(circle at 30% 25%,#ffe4ca 0 7%,#dc765d 10% 43%,#71374b 76%); }.planet-key .jupiter::before { background:radial-gradient(circle at 31% 24%,#fff1d8 0 8%,#d4a677 10% 32%,#b77366 35% 48%,#68507d 73%); }.planet-key .saturn::before { background:radial-gradient(ellipse at 48% 52%,#d5b78b 0 27%,#806a92 29% 41%,#ded2b7 43% 49%,#625476 51% 75%); }
.planet { width:14px; height:14px; border:1px solid rgba(255,239,214,.85); background:radial-gradient(circle at 35% 29%,#fff3df 0 12%,#ce9d75 15% 48%,#5c4678 78%); box-shadow:0 0 12px rgba(209,161,231,.55); }.planet[data-key="Moon"]{background:radial-gradient(circle at 34% 27%,#fff 0 10%,#d5c8f5 12% 48%,#5f5fa7 80%)}.planet[data-key="Venus"]{background:radial-gradient(circle at 34% 27%,#ffe8df 0 10%,#db82a1 12% 48%,#6c4264 80%)}.planet[data-key="Mars"]{background:radial-gradient(circle at 34% 27%,#ffe4ca 0 10%,#da725b 12% 48%,#6d3449 80%)}
.live-planet { font-size:0; }.live-planet::after { content:""; width:8px; height:8px; border-radius:50%; background:#ffe6b9; box-shadow:0 0 8px rgba(255,232,193,.9); }.live-planet[data-key="Moon"]::after { background:#e6ddff; }.live-planet[data-key="Mercury"]::after { background:#d9e4f5; }.live-planet[data-key="Venus"]::after { background:#ffd4e2; }.live-planet[data-key="Mars"]::after { background:#ffb997; }.live-planet[data-key="Jupiter"]::after { background:#f1c891; }.live-planet[data-key="Saturn"]::after { background:#b7d7cc; }
.plan-card li::before { content:""; width:7px; height:7px; margin:0 10px 1px 1px; border-radius:50%; background:linear-gradient(135deg,#f3c3af,#9e88e7); box-shadow:0 0 9px rgba(194,149,244,.5); }

/* Compact explanatory flow: data → chart → return. It is product information, not decorative art. */
.ritual-steps { max-width:980px; margin:0 auto; grid-template-columns:repeat(3,1fr); gap:16px; align-items:stretch; }
.ritual-steps .flow-step { display:grid; grid-template-columns:104px 1fr; gap:16px; align-items:center; padding:16px; border:1px solid rgba(215,194,248,.32); border-radius:15px; background:linear-gradient(135deg,rgba(39,46,103,.66),rgba(14,23,62,.54)); text-align:left; }
.ritual-steps .flow-step > div:last-child { min-width:0; }.ritual-steps .flow-step > div:last-child > span { display:inline-block; margin-bottom:7px; color:#f3c5bd; font-size:10px; font-weight:700; letter-spacing:.8px; }.ritual-steps .flow-step h3 { margin:0 0 6px; font-size:14px; }.ritual-steps .flow-step p { max-width:none; margin:0; font-size:11px; }
.step-visual { width:96px; height:76px; position:relative; overflow:hidden; border-radius:11px; background:linear-gradient(145deg,#222f71,#101942); }
.input-step .step-visual { padding:14px 12px; display:grid; gap:7px; }.input-step .step-visual i { display:block; border-radius:5px; background:linear-gradient(90deg,rgba(255,231,206,.78),rgba(179,159,239,.55)); }.input-step .step-visual i:nth-child(1){width:72%;height:8px}.input-step .step-visual i:nth-child(2){width:100%;height:18px;border:1px solid rgba(243,217,236,.45);background:rgba(24,32,79,.55)}.input-step .step-visual i:nth-child(3){width:56%;height:7px;background:rgba(235,174,214,.58)}
.chart-step .step-visual { border-radius:50%; width:76px; height:76px; margin-left:10px; border:1px solid rgba(245,216,206,.73); background:radial-gradient(circle,#f9c4b7 0 5%,#202966 7% 16%,transparent 17%),repeating-conic-gradient(rgba(238,216,244,.45) 0 1deg,transparent 1deg 30deg),#10183e; }.chart-step .step-visual i { position:absolute; width:8px; height:8px; border-radius:50%; background:#f0bce9; box-shadow:0 0 10px #d890e7; }.chart-step .step-visual i:nth-child(1){top:16px;left:34px}.chart-step .step-visual i:nth-child(2){top:38px;right:12px;background:#ffd2aa}.chart-step .step-visual i:nth-child(3){bottom:13px;left:19px;background:#adbcff}.chart-step .step-visual i:nth-child(4){bottom:9px;right:23px;background:#f7a5b4}
.ritual-step .step-visual { padding:13px; display:grid; align-content:center; gap:7px; }.ritual-step .step-visual::before { content:"TODAY"; color:#f3d1df; font:700 8px Inter,sans-serif; letter-spacing:.9px; }.ritual-step .step-visual i { display:block; height:6px; border-radius:4px; background:rgba(229,215,248,.58); }.ritual-step .step-visual i:nth-child(1){width:84%;background:linear-gradient(90deg,#efb6a9,#a58aea)}.ritual-step .step-visual i:nth-child(2){width:63%}.ritual-step .step-visual i:nth-child(3){width:42%}
@media (max-width:800px) { .ritual-steps { gap:10px; }.ritual-steps .flow-step { grid-template-columns:82px 1fr; padding:13px; }.step-visual { width:76px; height:62px; }.chart-step .step-visual { width:62px; height:62px; margin-left:7px; }.chart-step .step-visual i:nth-child(1){top:12px;left:27px}.chart-step .step-visual i:nth-child(2){top:31px;right:9px}.chart-step .step-visual i:nth-child(3){bottom:9px;left:15px}.chart-step .step-visual i:nth-child(4){bottom:7px;right:18px} }