/* PlainAstro design system: night ink, warm gold, lilac; Fraunces for display, Inter for reading. */
:root {
  --ink: #0d1229; --ink-2: #141a36; --ink-3: #1b2246; --line: #2a3263; --line-2: #39437d;
  --text: #ece8f8; --muted: #a9a7c8; --soft: #c9c5e4;
  --gold: #e8c27a; --gold-2: #f6dc9c; --gold-ink: #23180a; --lilac: #b9a7f2; --mint: #7fc8b8; --coral: #e58f84;
  --fire: #f0a07a; --earth: #b7c98f; --air: #a7c4f2; --water: #8fd0d9;
  --r: 14px; --r-lg: 22px; --max: 1120px; --read: 720px;
  --shadow: 0 10px 40px rgba(3, 5, 20, .45);
  /* semantic tokens (dark default; light overrides below) */
  --strong: #ffffff; --prose: #e4e0f5; --card-end: #11173a; --input-bg: #0b1024; --placeholder: #6f6d93; --hover: #262f60;
  --link: var(--gold-2); --btn-1: #f6dc9c; --btn-2: #e8c27a; --gold-line: rgba(232,194,122,.35); --cta-glow: rgba(246,220,156,.18);
  --err-bg: rgba(229,143,132,.12); --err-line: rgba(229,143,132,.45); --err-text: #ffd9d3;
  --header-bg: rgba(13,18,41,.82); --cta-bg: linear-gradient(135deg, #1b2150 0%, #251f4f 55%, #2f2246 100%);
  --scheme: dark; --wheel-glow: #151b3c; --wheel-house: #7c7fae;
  --w-bg: #141a33; --w-stroke: #3b4370; --w-inner: #10152b; --w-tick: #3b4370; --w-cusp: #4a5385; --w-ring: #2c3462; --w-ptick: #e8e3f7;
  --w-fire: #3a2230; --w-earth: #26302a; --w-air: #262c3d; --w-water: #1f2a3a; --a-flow: #7fc8b8; --a-tension: #e58f84; --a-blend: #e8c27a;
  --sky:
    radial-gradient(1px 1px at 12% 18%, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(1px 1px at 72% 8%, rgba(255,255,255,.45), transparent 60%),
    radial-gradient(1.5px 1.5px at 88% 32%, rgba(246,220,156,.6), transparent 60%),
    radial-gradient(1px 1px at 35% 42%, rgba(255,255,255,.35), transparent 60%),
    radial-gradient(1px 1px at 55% 75%, rgba(255,255,255,.3), transparent 60%),
    radial-gradient(900px 500px at 85% -10%, rgba(185,167,242,.10), transparent 70%),
    radial-gradient(700px 400px at -10% 10%, rgba(232,194,122,.07), transparent 70%);
  color-scheme: dark;
  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --glyph: "Noto Sans Symbols 2", "Noto Sans Symbols", "Segoe UI Symbol", "Apple Symbols", sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--ink); color: var(--text); font: 17px/1.65 var(--body); font-feature-settings: "ss01", "cv11";
  background-image: var(--sky);
  background-attachment: fixed;
}
img, svg { max-width: 100%; }
a { color: var(--link); text-decoration-color: var(--gold-line); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--link); }
h1, h2, h3 { font-family: var(--display); font-weight: 560; letter-spacing: -.01em; line-height: 1.15; color: var(--strong); font-optical-sizing: auto; }
h1 { font-size: clamp(2.1rem, 4.6vw, 3.4rem); margin: .2em 0 .35em; }
h2 { font-size: clamp(1.45rem, 2.6vw, 1.95rem); margin: 1.8em 0 .55em; }
h3 { font-size: 1.2rem; margin: 1.2em 0 .4em; }
p { margin: 0 0 1em; }
.glyph { font-family: var(--glyph); font-variant-emoji: text; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 22px; }
.read { max-width: var(--read); }
.muted { color: var(--muted); }
.small { font-size: .9rem; }
.center { text-align: center; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* Header */
.site-head { position: sticky; top: 0; z-index: 30; background: var(--header-bg); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.site-head .wrap { display: flex; align-items: center; gap: 18px; height: 64px; }
.logo { display: flex; align-items: center; gap: 10px; color: var(--strong); text-decoration: none; font-family: var(--display); font-size: 1.32rem; font-weight: 600; letter-spacing: -.01em; }
.logo em { font-style: italic; font-weight: 400; color: var(--gold-2); }
.logo svg { width: 30px; height: 30px; }
.nav { display: flex; gap: 4px; margin-left: auto; align-items: center; }
.nav a { color: var(--soft); text-decoration: none; padding: 8px 12px; border-radius: 999px; font-size: .95rem; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--strong); background: var(--ink-3); }
.nav .btn { margin-left: 6px; }
.menu-btn { display: none; margin-left: auto; background: none; border: 1px solid var(--line-2); color: var(--text); border-radius: 10px; padding: 7px 11px; font: inherit; }
@media (max-width: 880px) {
  .menu-btn { display: block; }
  .nav { display: none; position: absolute; top: 64px; left: 0; right: 0; flex-direction: column; align-items: stretch; background: var(--ink-2); border-bottom: 1px solid var(--line); padding: 10px 16px 16px; }
  .nav.open { display: flex; }
  .nav .btn { margin: 8px 0 0; text-align: center; }
}

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; cursor: pointer; text-decoration: none; font: 600 1rem/1.25 var(--body);
  padding: 14px 22px; border-radius: 999px; background: linear-gradient(180deg, var(--btn-1), var(--btn-2)); color: var(--gold-ink);
  box-shadow: 0 6px 20px rgba(232,194,122,.25), inset 0 -2px 0 rgba(0,0,0,.12); line-height: 1.25; text-align: center; transition: transform .12s ease, box-shadow .12s ease; }
.btn:hover { transform: translateY(-1px); box-shadow: 0 10px 26px rgba(232,194,122,.32), inset 0 -2px 0 rgba(0,0,0,.12); }
.btn:active { transform: translateY(0); }
.btn-sm { padding: 9px 15px; font-size: .9rem; }
.btn-ghost { background: transparent; color: var(--gold-2); box-shadow: inset 0 0 0 1.5px var(--gold-line); }
.btn-ghost:hover { box-shadow: inset 0 0 0 1.5px var(--gold-2); }
.btn[disabled] { opacity: .6; cursor: progress; }

/* Cards and panels */
.card { background: linear-gradient(180deg, var(--ink-2), var(--card-end)); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 24px; box-shadow: var(--shadow); }
.card h2:first-child, .card h3:first-child { margin-top: 0; }
.panel { background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--r); padding: 18px 20px; }
.grid { display: grid; gap: 14px; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.tile { display: block; text-decoration: none; color: var(--text); background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px; transition: border-color .15s, transform .15s; }
.tile:hover { border-color: var(--gold); transform: translateY(-2px); }
.tile strong { display: block; font-family: var(--display); font-weight: 560; font-size: 1.08rem; color: var(--strong); }
.tile span { color: var(--muted); font-size: .88rem; }
.tile .glyph { color: var(--gold-2); font-size: 1.3rem; float: right; }

/* Hero */
.hero { padding: 54px 0 30px; }
.eyebrow { display: inline-block; color: var(--gold-2); font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; border: 1px solid var(--gold-line); padding: 5px 12px; border-radius: 999px; }
.hero h1 { max-width: 15ch; }
.hero .lede { font-size: 1.15rem; color: var(--soft); max-width: 52ch; }
.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 36px; align-items: center; }
@media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; } .hero { padding-top: 30px; } }

/* Form */
.form { display: grid; gap: 14px; }
.form .row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
@media (max-width: 520px) { .form .row { grid-template-columns: minmax(0, 1fr); } }
.field { min-width: 0; }
/* iOS draws date/time inputs with a wide intrinsic size, centred text and no placeholder: tame all three. */
.input[type="date"], .input[type="time"] { -webkit-appearance: none; appearance: none; display: block; width: 100%; min-width: 0; max-width: 100%; min-height: 50px; text-align: left; }
.input::-webkit-date-and-time-value { text-align: left; min-height: 1.4em; }
.input::-webkit-datetime-edit { padding: 0; }
.dt { position: relative; }
.ios .dt.empty::after { content: attr(data-ph); position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: var(--placeholder); pointer-events: none; font-size: 1rem; }
.field label { display: block; font-size: .85rem; color: var(--soft); margin-bottom: 6px; font-weight: 500; }
.field .hint { font-size: .8rem; color: var(--muted); margin-top: 5px; }
.input { width: 100%; background: var(--input-bg); color: var(--text); border: 1.5px solid var(--line-2); border-radius: 12px; padding: 12px 14px; font: 1rem var(--body); transition: border-color .15s, box-shadow .15s; color-scheme: var(--scheme); }
.input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 4px rgba(232,194,122,.15); }
.input::placeholder { color: var(--placeholder); }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: .9rem; color: var(--soft); }
.check input { appearance: none; width: 22px; height: 22px; flex: 0 0 22px; border: 1.5px solid var(--line-2); border-radius: 7px; background: var(--input-bg); margin-top: 1px; cursor: pointer; display: grid; place-content: center; }
.check input:checked { background: var(--gold); border-color: var(--gold); }
.check input:checked::after { content: ""; width: 10px; height: 6px; border: solid var(--gold-ink); border-width: 0 0 2.5px 2.5px; transform: rotate(-45deg) translate(1px, -1px); }
.ac { position: relative; }
.ac-list { position: absolute; z-index: 40; left: 0; right: 0; top: calc(100% + 4px); background: var(--ink-3); border: 1px solid var(--line-2); border-radius: 12px; list-style: none; margin: 0; padding: 6px; box-shadow: var(--shadow); max-height: 280px; overflow: auto; }
.ac-list li { padding: 9px 10px; border-radius: 8px; cursor: pointer; font-size: .95rem; }
.ac-list li small { color: var(--muted); }
.ac-list li[aria-selected="true"], .ac-list li:hover { background: var(--hover); }
.errors { background: var(--err-bg); border: 1px solid var(--err-line); color: var(--err-text); border-radius: 12px; padding: 12px 14px; font-size: .95rem; }
.errors p { margin: 0; }
.toggle-row { display: flex; gap: 8px; flex-wrap: wrap; }
.seg { display: inline-flex; background: var(--input-bg); border: 1.5px solid var(--line-2); border-radius: 999px; padding: 3px; }
.seg label { padding: 6px 12px; border-radius: 999px; font-size: .85rem; cursor: pointer; color: var(--soft); }
.seg input { position: absolute; opacity: 0; }
.seg input:checked + span { color: var(--gold-ink); }
.seg label:has(input:checked) { background: var(--gold); color: var(--gold-ink); }

/* Article */
.crumbs { font-size: .85rem; color: var(--muted); margin: 22px 0 0; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--gold-2); }
.article-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 40px; align-items: start; }
.article-grid aside { position: sticky; top: 84px; display: grid; gap: 14px; }
@media (max-width: 980px) { .article-grid { grid-template-columns: minmax(0, 1fr); } .article-grid aside { position: static; } }
.article-grid > * { min-width: 0; }
.prose { font-size: 1.06rem; }
.prose p { color: var(--prose); }
.lead p:first-child { font-size: 1.18rem; color: var(--strong); }
.quick { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.quick li { padding-left: 26px; position: relative; color: var(--soft); font-size: .95rem; }
.quick li::before { content: "✦"; position: absolute; left: 2px; color: var(--gold); font-family: var(--glyph); }
.pros-cons { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 1.6em 0; }
@media (max-width: 640px) { .pros-cons { grid-template-columns: 1fr; } }
.pros-cons .panel h3 { margin-top: 0; font-size: 1.05rem; }
.pros-cons ul { margin: 0; padding-left: 1.1em; color: var(--soft); }
.pros h3 { color: var(--mint); } .cons h3 { color: var(--coral); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; font-weight: 600; color: var(--strong); list-style: none; display: flex; justify-content: space-between; gap: 12px; padding: 15px 0; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--gold); font-size: 1.3rem; line-height: 1; }
.faq details[open] summary::after { content: "–"; }
.faq details p { margin: 0 0 15px; color: var(--soft); }
.bysign { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; }
.bysign .panel { padding: 14px 16px; }
.bysign strong { color: var(--strong); font-family: var(--display); font-weight: 560; }
.table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.table th, .table td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.table th { color: var(--muted); font-weight: 500; font-size: .82rem; text-transform: uppercase; letter-spacing: .06em; }
.table td .glyph { color: var(--gold-2); margin-right: 6px; }
.table-wrap { overflow-x: auto; }
.pill { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: .78rem; background: var(--ink-3); border: 1px solid var(--line-2); color: var(--soft); }
.pill.rx { color: var(--coral); border-color: var(--err-line); }
.pill.fire { color: var(--fire); } .pill.earth { color: var(--earth); } .pill.air { color: var(--air); } .pill.water { color: var(--water); }
.collapse summary { cursor: pointer; color: var(--gold-2); padding: 10px 0; }

/* Results */
.result { margin: 26px 0; }
.big3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 680px) { .big3 { grid-template-columns: 1fr; } }
.big3 .card { text-align: center; padding: 20px; }
.big3 .sym { font-family: var(--glyph); font-size: 2.6rem; color: var(--gold-2); line-height: 1; }
.big3 .label { color: var(--muted); font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; margin-top: 8px; }
.big3 .sign { font-family: var(--display); font-size: 1.6rem; color: var(--strong); }
.spot { display: flex; gap: 18px; align-items: center; }
.spot .sym { font-family: var(--glyph); font-size: 3.2rem; color: var(--gold-2); width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 30% 30%, var(--hover), var(--ink-2)); border: 1px solid var(--line-2); flex: 0 0 76px; }
.spot .sign { font-family: var(--display); font-size: 1.8rem; color: var(--strong); line-height: 1.1; }
.wheel-box { background: radial-gradient(circle, var(--wheel-glow) 0%, var(--ink-2) 70%); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 14px; }
.wheel { display: block; width: 100%; max-width: 620px; margin: 0 auto; height: auto; }
.wheel text { font-family: var(--glyph); fill: var(--text); }
.wheel .w-sign { font-size: 25px; }
.wheel .w-fire { fill: var(--fire); } .wheel .w-earth { fill: var(--earth); } .wheel .w-air { fill: var(--air); } .wheel .w-water { fill: var(--water); }
.wheel .w-house { font-family: var(--body); font-size: 12px; font-weight: 500; fill: var(--wheel-house); }
.wheel .w-planet text { font-size: 24px; fill: var(--strong); }
.wheel .w-planet .w-deg { font-family: var(--body); font-size: 12.5px; font-weight: 600; fill: var(--soft); }
.wheel .w-planet .w-rx { font-family: var(--glyph); font-size: 12px; fill: var(--coral); }
.wheel .w-angle-label { font-family: var(--body); font-size: 12px; font-weight: 700; letter-spacing: .06em; fill: var(--gold-2); }
.wheel .w-angle-tick { stroke: var(--gold); stroke-width: 2; }
.wheel .w-bg { fill: var(--w-bg); stroke: var(--w-stroke); stroke-width: 1.5; }
.wheel .w-seg { stroke: var(--w-stroke); stroke-width: 1; }
.wheel .w-seg-fire { fill: var(--w-fire); } .wheel .w-seg-earth { fill: var(--w-earth); } .wheel .w-seg-air { fill: var(--w-air); } .wheel .w-seg-water { fill: var(--w-water); }
.wheel .w-inner { fill: var(--w-inner); stroke: var(--w-stroke); }
.wheel .w-tick { stroke: var(--w-tick); stroke-width: 1; }
.wheel .w-cusp { stroke: var(--w-cusp); stroke-width: 1; }
.wheel .w-cusp.w-angular { stroke: var(--gold); stroke-width: 1.8; }
.wheel .w-ring { fill: none; stroke: var(--w-ring); stroke-width: 1.2; }
.wheel .w-ptick { stroke: var(--soft); stroke-width: 1.3; }
.wheel .w-leader { stroke: var(--muted); stroke-width: .8; opacity: .7; }
.wheel .w-dot { fill: var(--muted); }
.wheel .w-asp-flow { stroke: var(--a-flow); } .wheel .w-asp-tension { stroke: var(--a-tension); } .wheel .w-asp-blend { stroke: var(--a-blend); }
.bars { display: grid; gap: 8px; }
.bar { display: grid; grid-template-columns: 90px 1fr 34px; gap: 10px; align-items: center; font-size: .9rem; color: var(--soft); }
.bar i { display: block; height: 8px; border-radius: 99px; background: var(--ink-3); overflow: hidden; }
.bar i b { display: block; height: 100%; border-radius: 99px; }

/* CTA */
.cta { position: relative; overflow: hidden; background: var(--cta-bg); border: 1px solid var(--gold-line); border-radius: var(--r-lg); padding: 26px; }
.cta::after { content: ""; position: absolute; right: -60px; top: -60px; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, var(--cta-glow), transparent 70%); }
.cta h2, .cta h3 { margin-top: 0; }
.cta .price { font-family: var(--display); font-size: 2rem; color: var(--gold-2); }
.ticks { list-style: none; padding: 0; margin: 0 0 18px; display: grid; gap: 6px; }
.ticks li { padding-left: 26px; position: relative; color: var(--soft); }
.ticks li::before { content: "✓"; position: absolute; left: 0; color: var(--mint); font-weight: 700; }

/* Report */
.report h2 { border-top: 1px solid var(--line); padding-top: 1.2em; }
.report .glyphs { font-family: var(--glyph); color: var(--gold-2); }
.loading { display: inline-block; width: 46px; height: 46px; border-radius: 50%; border: 3px solid var(--line-2); border-top-color: var(--gold); animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Footer */
.site-foot { margin-top: 70px; border-top: 1px solid var(--line); padding: 40px 0 30px; color: var(--muted); font-size: .9rem; }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 26px; }
@media (max-width: 780px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
.site-foot h4 { color: var(--strong); font-family: var(--display); font-weight: 560; margin: 0 0 10px; font-size: 1rem; }
.site-foot ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; }
.site-foot li a { display: inline-block; padding: 7px 0; }
.site-foot a { color: var(--muted); text-decoration: none; }
.site-foot a:hover { color: var(--gold-2); }
.disclaimer { margin-top: 26px; border-top: 1px solid var(--line); padding-top: 18px; font-size: .82rem; }
.nav a.btn, .nav a.btn:hover { color: var(--gold-ink); background: linear-gradient(180deg, var(--btn-1), var(--btn-2)); }

/* Light theme: warm paper, ink text, deeper gold so links and accents stay readable. */
[data-theme="light"] {
  --ink: #f6f2ea; --ink-2: #ffffff; --ink-3: #efe8da; --card-end: #fcfaf5; --line: #e4dccb; --line-2: #cdc2ab;
  --text: #26283f; --strong: #13152b; --prose: #2f3149; --muted: #6c6982; --soft: #4b4965;
  --gold: #c9973f; --gold-2: #8f600e; --gold-ink: #2a1c05; --btn-1: #f4d891; --btn-2: #e3b35c; --link: #8a5b0b;
  --lilac: #6a55c9; --mint: #2d8a74; --coral: #c0533f; --fire: #c55f30; --earth: #5f7d2a; --air: #3566b0; --water: #24808e;
  --input-bg: #fffdf9; --placeholder: #87839b; --hover: #f1e9d8; --gold-line: rgba(201,151,63,.45); --cta-glow: rgba(201,151,63,.16);
  --err-bg: #fdecea; --err-line: #efb5ab; --err-text: #86281d;
  --header-bg: rgba(246,242,234,.88); --cta-bg: linear-gradient(135deg, #fff8ea 0%, #fbf3e4 50%, #f4efff 100%);
  --shadow: 0 8px 28px rgba(60,48,20,.08); --scheme: light; --wheel-glow: #fffdf8; --wheel-house: #66627f;
  --w-bg: #fffdf8; --w-stroke: #cfc5b0; --w-inner: #faf6ee; --w-tick: #d6ccb8; --w-cusp: #cfc6db; --w-ring: #e2dacb; --w-ptick: #55526e;
  --w-fire: #fbe3d6; --w-earth: #e7efd9; --w-air: #dfe8f7; --w-water: #d8eef1; --a-flow: #2d8a74; --a-tension: #c0533f; --a-blend: #c9973f;
  --sky: radial-gradient(900px 500px at 85% -10%, rgba(106,85,201,.07), transparent 70%), radial-gradient(700px 400px at -10% 10%, rgba(201,151,63,.09), transparent 70%);
  color-scheme: light;
}
[data-theme="light"] .btn { box-shadow: 0 6px 18px rgba(201,151,63,.25), inset 0 -2px 0 rgba(0,0,0,.08); }

/* Theme toggle */
.theme-btn { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 999px; border: 1px solid var(--line-2); background: transparent; color: var(--soft); cursor: pointer; padding: 0; }
.theme-btn:hover { color: var(--strong); background: var(--ink-3); }
.theme-btn svg { width: 20px; height: 20px; }
.theme-btn .i-sun { display: none; }
[data-theme="light"] .theme-btn .i-sun { display: block; }
[data-theme="light"] .theme-btn .i-moon { display: none; }
.head-actions { display: flex; align-items: center; gap: 8px; margin-left: 8px; }
@media (max-width: 880px) { .head-actions { margin-left: auto; } .menu-btn { margin-left: 0; } }
.ios .dt.empty input::-webkit-datetime-edit { color: transparent; }

/* Phones: keep the calculator close to the top, keep the eyebrow on one line */
@media (max-width: 600px) {
  .eyebrow { font-size: .72rem; letter-spacing: .1em; padding: 5px 10px; white-space: nowrap; }
  .hero { padding-top: 22px; }
  .hero .ticks { display: none; }
  .hero .lede { font-size: 1.05rem; margin-bottom: 0; }
  .hero-grid { gap: 22px; }
  .card { padding: 20px 18px; }
}

/* ---- Mobile fixes (QA pass 31 Oct) ---- */
.result { scroll-margin-top: 84px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 0; }
.table td.nowrap, .table th.nowrap { white-space: nowrap; }
.wheel-dual .wheel-compact { display: none; }
.wheel-compact .w-sign { font-size: 31px; }
.wheel-compact .w-planet text { font-size: 34px; }
.wheel-compact .w-planet .w-deg { font-size: 21px; }
.wheel-compact .w-planet .w-rx { font-size: 19px; }
.wheel-compact .w-planet .w-deg-rx { fill: var(--coral); }
.wheel-compact .w-house { font-size: 20px; }
.wheel-compact .w-angle-label { font-size: 19px; }
.wheel-compact .w-ptick { stroke-width: 2; }
.wheel-compact .w-cusp.w-angular { stroke-width: 2.4; }
.reading-hero { display: grid; grid-template-columns: 1.05fr .95fr; grid-template-areas: "intro card" "points card"; column-gap: 36px; align-items: start; padding: 40px 0 10px; }
.reading-hero .intro { grid-area: intro; } .reading-hero .points { grid-area: points; } .reading-hero .card { grid-area: card; }
@media (max-width: 900px) { .reading-hero { grid-template-columns: minmax(0, 1fr); grid-template-areas: "intro" "card" "points"; row-gap: 18px; padding-top: 24px; } }
@media (max-width: 600px) {
  .wheel-dual .wheel-full { display: none; }
  .wheel-dual .wheel-compact { display: block; }
  .wheel-box { padding: 4px; margin: 0 -8px; border-radius: 16px; }
  .table { font-size: .86rem; }
  .table th, .table td { padding: 8px 6px; }
  .table th { font-size: .72rem; }
  .grid { gap: 10px; }
  .grid-4, .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3.has-desc { grid-template-columns: minmax(0, 1fr); }
  .tile { padding: 12px 13px; }
  .tile strong { font-size: 1rem; }
  .tile .glyph { font-size: 1.1rem; }
  .hero-grid .ticks { display: none; }
  .btn-sm { min-height: 40px; padding: 10px 15px; }
  .spot { gap: 14px; }
  .spot .sym { width: 60px; height: 60px; flex: 0 0 60px; font-size: 2.4rem; }
  .spot .sign { font-size: 1.4rem; }
  .nav a { padding: 11px 12px; }
}
@media (max-width: 360px) {
  .eyebrow { font-size: .64rem; letter-spacing: .06em; }
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}