/* AstroNat Local Space Home Finder. Gen-Z Seamless house style (see DESIGN-NOTES.md).
   Tokens 1-1 from GENZ-DESIGN-GUIDE.md. Anything marked "calculator-only" is not in the app guide yet. */
/* Perfectly Nineties, the same files astronat.io uses: real italic and bold cuts, so the browser never fakes a slant or weight.
   "block" keeps headings hidden for the split second the font loads instead of flashing a stand-in serif. */
@font-face { font-family: "Perfectly Nineties"; src: url("/fonts/PerfectlyNineties.otf") format("opentype"); font-weight: 400; font-style: normal; font-display: block; }
@font-face { font-family: "Perfectly Nineties"; src: url("/fonts/PerfectlyNineties-Italic.otf") format("opentype"); font-weight: 400; font-style: italic; font-display: block; }
@font-face { font-family: "Perfectly Nineties"; src: url("/fonts/PerfectlyNineties-SemiBold.otf") format("opentype"); font-weight: 500 600; font-style: normal; font-display: block; }
@font-face { font-family: "Perfectly Nineties"; src: url("/fonts/PerfectlyNineties-Bold.otf") format("opentype"); font-weight: 700 900; font-style: normal; font-display: block; }
:root {
  --paper: #F8F5EC; --surface: #fff; --ink: #1B1B1B; --ink2: #555049; --ink3: #8a847a;
  --rule: rgba(27, 27, 27, .12);
  --blue: #0456fb;    /* links, primary buttons, "today" outline */
  --acqua: #CAF1F0;   /* good / best / positive highlight */
  --gold: #C9A96E;    /* premium, planet of the year, accents */
  --spiced: #E67A7A;  /* careful / warning */
  --amber: #F2C14E;   /* mixed */
  --mono: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;  /* labels: DM Sans caps, no monospace face */
  --nineties: "Perfectly Nineties", Georgia, serif;  /* big uppercase headings only */
  --body: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* soft fills used across the app */
  --fill-aqua: #CAF1F0; --fill-blue: #BFD2FF; --fill-yellow: #F7DE9C; --fill-pink: #F2B6B6; --fill-sand: #EADFC8; --fill-lilac: #D9CCF5;

  /* colour = meaning */
  --go: #7FD8D4;      /* strong best: Prime */
  --good: #CAF1F0;    /* good: Good, Green */
  --mixed: #F7DE9C;   /* mixed: Workable, Amber */
  --avoid: #F2B6B6;   /* careful: Not acceptable, Red */
  --avoid-strong: #E67A7A;

  /* calculator-only */
  --desk: #EAE5D8;          /* the guide's body background, as a token so dark mode can change it */
  --link: var(--blue);      /* text links; lifted in dark mode for contrast */
  --on-fill: #1B1B1B;       /* text on soft fills, the same in both modes */
  --selected-bg: #1B1B1B; --selected-ink: #fff;
  --field: #fff;
  --map-bg: #e9e4d8;
  --map-prime: #1FA39C; --map-good: #7FD8D4; --map-mixed: #F2C14E; --map-avoid: #E67A7A;  /* keep in step with GRADE in app.js */
  --card-radius: 18px; --page-radius: 28px; --gap: 12px;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --paper: #141414; --ink: #F8F5EC; --ink2: #cfc8bb; --ink3: #8f887c; --rule: rgba(248, 245, 236, .14); --surface: #1f1f1f;
  --desk: #0b0b0b; --link: #8AAEFF; --selected-bg: #F8F5EC; --selected-ink: #1B1B1B; --field: #1a1a1a; --map-bg: #262626;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #141414; --ink: #F8F5EC; --ink2: #cfc8bb; --ink3: #8f887c; --rule: rgba(248, 245, 236, .14); --surface: #1f1f1f;
    --desk: #0b0b0b; --link: #8AAEFF; --selected-bg: #F8F5EC; --selected-ink: #1B1B1B; --field: #1a1a1a; --map-bg: #262626;
    color-scheme: dark;
  }
}

/* ---------- base ---------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--desk); color: var(--ink); font: 14px/1.5 var(--body); }
[hidden] { display: none !important; }
h1, h2, h3 { margin: 0; text-wrap: balance; }
h1 { font-family: var(--nineties); font-weight: 400; text-transform: uppercase; font-size: clamp(28px, 7.6vw, 32px); line-height: .95; letter-spacing: .005em; }
p { margin: 0 0 8px; }
a { color: var(--link); text-underline-offset: 2px; }
code { font-family: var(--mono); }
button, input, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

.page { max-width: 1280px; margin: 20px auto; background: var(--paper); border-radius: var(--page-radius); padding: 16px 20px 24px; }
.page:has(#gate:not([hidden])), .page:has(#claim:not([hidden])) { max-width: 430px; padding: 16px 16px 24px; }

.eyebrow { font: 500 12px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink3); margin: 0 0 6px; }
.lede { font-size: 14px; line-height: 1.55; color: var(--ink2); margin: 10px 0 0; }
.fine { font-size: 12px; line-height: 1.5; color: var(--ink3); margin: 0; }
.hint { font-size: 12px; color: var(--ink3); margin: 5px 0 0; }

/* one card style: no shadows, no box inside a box */
.card { background: var(--surface); border: 1.5px solid var(--rule); border-radius: var(--card-radius); padding: 12px 14px; min-width: 0; }

/* ---------- top bar ---------- */
.top { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 2px 0 12px; margin-bottom: var(--gap); border-bottom: 1px solid var(--rule); background: var(--paper); position: sticky; top: env(safe-area-inset-top, 0px); z-index: 1200; }
.brand { display: inline-flex; align-items: center; gap: 6px; font: 700 15px var(--body); letter-spacing: -.01em; color: var(--ink); text-decoration: none; min-height: 32px; }
.brand-mark { color: var(--gold); font-size: 19px; line-height: 1; }
.top-right { display: flex; align-items: center; gap: 10px; }
.seat { font: 500 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink3); }
.link { background: none; border: 0; padding: 0; color: var(--link); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.top .link { min-height: 32px; font-size: 13px; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 42px; padding: 9px 18px; border-radius: 999px; border: 1.5px solid transparent; background: var(--blue); color: #fff; font: 600 14px/1.2 var(--body); text-decoration: none; text-align: center; cursor: pointer; transition: background-color .15s, color .15s, border-color .15s, filter .15s, transform .1s; }
.btn:hover { filter: brightness(.9); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .55; cursor: wait; }
.btn.secondary { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn.secondary:hover { filter: none; background: var(--ink); color: var(--paper); }
.btn.dark { background: #1B1B1B; color: #fff; }
.btn.small { min-height: 34px; padding: 6px 14px; font-size: 13px; }
.btn.big { width: 100%; min-height: 48px; font-size: 15px; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- chips / pills ---------- */
.chip { display: inline-flex; align-items: center; border-radius: 999px; padding: 3px 10px; font: 600 12px/1.35 var(--body); white-space: nowrap; background: var(--fill-sand); color: var(--on-fill); }
.chip.prime { background: var(--go); }
.chip.good, .chip.G { background: var(--good); }
.chip.workable, .chip.A { background: var(--mixed); }
.chip.no, .chip.R { background: var(--avoid); }

.tog { flex: 0 0 auto; min-height: 32px; border-radius: 999px; padding: 5px 11px; font: 600 13px/1.2 var(--body); border: 1.5px solid var(--rule); background: var(--surface); color: var(--ink); cursor: pointer; white-space: nowrap; transition: background-color .15s, color .15s, border-color .15s; }
.tog:hover { border-color: var(--ink3); }
.tog.on { background: var(--selected-bg); color: var(--selected-ink); border-color: var(--selected-bg); }

/* ---------- forms ---------- */
label { display: block; font: 600 12px/1.3 var(--body); color: var(--ink2); margin: 0 0 5px; }
input:not([type=checkbox]), select { width: 100%; min-width: 0; min-height: 42px; background: var(--field); color: var(--ink); border: 1.5px solid var(--rule); border-radius: 12px; padding: 8px 12px; font-size: 15px; transition: border-color .15s; }
input::placeholder { color: var(--ink3); }
input:not([type=checkbox]):focus, select:focus { border-color: var(--blue); outline: none; }
input:not([type=checkbox]):focus-visible, select:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
input[type=checkbox] { accent-color: var(--blue); width: 18px; height: 18px; flex: 0 0 auto; margin: 1px 0 0; }
.msg { min-height: 1.2em; margin: 8px 0 0; font-size: 13px; color: var(--ink); }
.card .msg:empty { min-height: 0; margin: 0; }
.msg:not(:empty)::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--avoid-strong); margin-right: 7px; vertical-align: 1px; }
.msg.ok:not(:empty)::before { background: var(--map-prime); }

/* ---------- gate + claim ---------- */
.gate { display: grid; gap: var(--gap); }
.hero { padding: 6px 2px 2px; }
.row { display: flex; gap: 8px; flex-wrap: wrap; }
.row input { flex: 1 1 200px; font-family: var(--mono); letter-spacing: .04em; }
.row .btn { flex: 0 0 auto; }
.stack { display: grid; gap: var(--gap); }
.keybox { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 2px 0 12px; border-bottom: 1px solid var(--rule); }
.keybox code { flex: 1 1 auto; font-size: 17px; font-weight: 600; letter-spacing: .06em; word-break: break-all; }
.warn { margin: 10px 0 0; font-size: 13px; line-height: 1.5; color: var(--ink2); }
.warn .chip { margin-right: 4px; }
/* ---------- key screen ---------- */
.page:has(#gate:not([hidden])) > .top, .page:has(#claim:not([hidden])) > .top { display: none; }
#claim.gate { gap: 22px; }
.c-paid { font: 600 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--on-fill); background: var(--go); border-radius: 999px; padding: 4px 10px; }
.c-wrap { display: grid; gap: 22px; min-width: 0; }
.keytag { background: var(--surface); border: 1.5px solid #1B1B1B; border-radius: var(--card-radius); box-shadow: 3px 3px 0 #1B1B1B; overflow: hidden; }
.kt-h { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 14px; background: var(--acqua); color: var(--on-fill); font: 600 12px var(--mono); letter-spacing: .1em; text-transform: uppercase; border-bottom: 1.5px solid #1B1B1B; }
.kt-once { background: var(--avoid); border-radius: 999px; padding: 2px 8px; }
.keytag .keybox { padding: 16px 14px 14px; border-bottom: 1px solid var(--rule); }
.keytag .keybox code { font-size: 20px; }
.keytag .warn { margin: 0; padding: 10px 14px 14px; }
.c-steps .g-h { margin: 0 0 10px; }
.c-steps .st-steps li { font-size: 14px; }
#gate.gate { gap: 28px; }
.g-top { display: flex; justify-content: space-between; align-items: center; font-size: 13px; min-height: 32px; }
.g-top a { color: var(--ink); text-decoration: none; font-weight: 500; }
.g-top .g-have { color: var(--link); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.gate .hero { padding: 0; }
.gate h1 { margin: 0 0 8px; }
.brand-name { display: inline-flex; width: fit-content; align-self: flex-start; align-items: center; gap: 6px; margin: 0 0 10px; padding: 5px 12px; border-radius: 999px; background: var(--ink); color: var(--paper); font: 700 13px/1.2 var(--body); letter-spacing: .02em; }
.gate .lede { margin: 0; }
.g-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 0; }
.g-chips .chip { background: transparent; border: 1.5px solid var(--rule); color: var(--ink); font-weight: 500; }
.g-h { font: 400 24px/.95 var(--nineties); text-transform: uppercase; letter-spacing: .005em; margin: 0 0 10px; }
.g-sample, .g-get, .g-buy { display: grid; align-content: start; min-width: 0; }

/* sample report styled as a property listing */
.listing { background: var(--surface); border: 1.5px solid var(--rule); border-radius: var(--card-radius); overflow: hidden; }
.l-map { position: relative; height: 230px; overflow: hidden; border-bottom: 1.5px solid var(--rule); background: #EFE8D8; }
.l-badge { position: absolute; left: 10px; top: 10px; background: #1B1B1B; color: #fff; font: 600 12px var(--mono); letter-spacing: .1em; text-transform: uppercase; padding: 5px 9px; border-radius: 6px; }
.l-area { position: absolute; left: 63%; top: 18%; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--blue); color: #fff; font: 700 12px var(--body); border: 2px solid #fff; }
.l-pin { position: absolute; left: calc(50% - 7px); top: calc(58% - 18px); width: 14px; height: 14px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--blue); border: 2px solid #fff; }
.l-body { padding: 12px 14px 14px; display: grid; gap: 8px; }
.l-body p { margin: 0; }
.l-row { display: flex; align-items: center; gap: 14px; }
.l-score { display: grid; justify-items: center; background: var(--go); color: var(--on-fill); border-radius: 12px; padding: 8px 10px; min-width: 56px; }
.l-score span { font: 400 34px/1 var(--nineties); }
.l-score small { font: 600 9px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.l-addr { display: grid; font-size: 13px; color: var(--ink2); }
.l-addr b { font-size: 16px; color: var(--ink); }
.l-specs { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; color: var(--ink2); padding-top: 8px !important; border-top: 1px solid var(--rule); }
.l-read { font-size: 14px; color: var(--ink); }

/* sales story */
.g-story { display: grid; gap: 28px; min-width: 0; }
.st-block, .st-wide { display: grid; align-content: start; gap: 10px; min-width: 0; }
.st-block .g-h, .st-wide .g-h { margin: 0; }
.st-lede { margin: 0; font-size: 15px; line-height: 1.6; color: var(--ink2); max-width: 40em; }
.st-list { list-style: none; margin: 4px 0 0; padding: 2px 14px; }
.st-list li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; padding: 10px 0; border-top: 1px solid var(--rule); font-size: 14px; line-height: 1.5; color: var(--ink2); }
.st-list li:first-child { border-top: 0; }
.st-list b, .st-steps b { color: var(--ink); }
.st-steps { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 8px; }
.st-steps li { display: grid; grid-template-columns: 26px 1fr; gap: 10px; align-items: start; font-size: 14px; line-height: 1.5; color: var(--ink2); }
.st-n { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--acqua); color: var(--on-fill); font: 400 16px/1 var(--nineties); border: 1.5px solid rgba(27, 27, 27, .14); }
.st-cards { display: grid; gap: 10px; }
.st-card { background: var(--surface); border: 1.5px solid var(--rule); border-radius: var(--card-radius); padding: 14px; }
.st-card .st-ico { font-size: 22px; line-height: 1; margin: 0 0 8px; }
.st-card h3 { font: 400 20px/1 var(--nineties); text-transform: uppercase; margin: 0 0 10px; }
.st-card p:last-child { margin: 0; font-size: 14px; line-height: 1.55; color: var(--ink2); }
.st-close { margin: 6px 0 0; font: 400 22px/1.15 var(--nineties); text-transform: uppercase; text-align: center; padding: 18px 12px; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }

/* phones: sticky buy bar so checkout is always one tap away */
.m-buy { display: none; }
@media (max-width: 900px) {
  .m-buy { display: flex; align-items: center; justify-content: space-between; gap: 12px; position: sticky; bottom: 0; z-index: 20; margin: 0 -16px -24px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); background: var(--paper); border-top: 1px solid var(--rule); }
  .m-buy-price { font: 400 26px/1 var(--nineties); }
  .m-buy-price s { font-size: 16px; color: var(--ink3); text-decoration-color: var(--avoid-strong); }
  .m-buy .cta { padding: 12px 22px; }
  .page:has(#gate:not([hidden])) ~ .theme-toggle { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
}

/* what you get */
.cmp { width: 100%; border-collapse: collapse; font-size: 13px; background: var(--surface); border: 1.5px solid var(--rule); border-radius: var(--card-radius); border-spacing: 0; overflow: hidden; }
.cmp th { font: 600 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink3); text-align: center; padding: 10px 6px 6px; }
.cmp th:first-child { text-align: left; padding-left: 14px; }
.cmp td { padding: 9px 6px; border-top: 1px solid var(--rule); color: var(--ink2); vertical-align: top; }
.cmp td:first-child { color: var(--ink); padding-left: 14px; }
.cmp td:not(:first-child) { text-align: center; width: 92px; font-size: 12px; }
.cmp td:last-child { padding-right: 14px; background: color-mix(in srgb, var(--acqua) 40%, transparent); }
.cmp th:last-child { background: color-mix(in srgb, var(--acqua) 40%, transparent); }
.cmp td.y { color: var(--link); font-weight: 700; }
.g-get .fine { margin-top: 8px; }
@media (max-width: 460px) { .cmp td:not(:first-child) { width: 70px; font-size: 12px; } .cmp td { padding: 8px 4px; } .cmp td:first-child, .cmp th:first-child { padding-left: 10px; } .cmp td:last-child { padding-right: 8px; } }

/* checkout */
.g-buy { gap: 12px; }
.buycard { background: var(--surface); border: 1.5px solid #1B1B1B; border-radius: var(--card-radius); padding: 16px; display: grid; gap: 10px; }
.b-offer { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; font: 500 12px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink2); }
.b-tag { background: var(--gold); color: #1B1B1B; border-radius: 999px; padding: 3px 9px; font-weight: 600; letter-spacing: .08em; }
.b-was { display: block; font: 400 20px/1 var(--nineties); color: var(--ink3); text-decoration-thickness: 2px; text-decoration-color: var(--avoid-strong); margin-bottom: 2px; }
.b-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; }
.b-head .g-h { margin: 0; font-size: 26px; }
.b-price { margin: 0; text-align: right; font: 400 40px/1 var(--nineties); white-space: nowrap; }
.b-price small { display: block; font: 500 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink3); margin-top: 3px; }
.b-list { list-style: none; margin: 0; padding: 10px 0 0; border-top: 1px solid var(--rule); display: grid; gap: 6px; font-size: 14px; color: var(--ink2); }
.b-list li { position: relative; padding-left: 22px; }
.b-list li::before { content: "✓"; color: var(--link); font-weight: 700; position: absolute; left: 0; }
.cta { display: block; text-align: center; background: var(--blue); color: #fff; border-radius: 999px; padding: 14px; font: 700 15px var(--body); text-decoration: none; transition: filter .15s; }
.cta:hover { filter: brightness(.92); }
.trust { text-align: center; font-size: 12px; color: var(--ink2); margin: 0; }
.keyform label { font-size: 12px; }
.keyform .fine { margin-top: 10px; }

/* "Your next step": aqua card, one per page, at the end */
.next { display: grid; gap: 4px; background: var(--acqua); color: var(--on-fill); border: 1.5px solid rgba(27, 27, 27, .12); border-radius: var(--card-radius); padding: 14px 16px; }
.next-label { font: 600 12px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: rgba(27, 27, 27, .62); margin: 0; }
.next-line { font: 700 16px/1.35 var(--body); margin: 0; }
.next-sub { font-size: 13px; color: rgba(27, 27, 27, .75); margin: 0; }
.next .actions { margin-top: 8px; }
.next .btn.secondary { color: var(--on-fill); border-color: var(--on-fill); }
.next .btn.secondary:hover { background: var(--on-fill); color: #fff; }

/* key screen rows: one rhythm, a heading column and a content column */
.g-row { display: grid; gap: 12px; min-width: 0; }
.g-col { display: grid; gap: 10px; align-content: start; min-width: 0; }
.g-col > .g-h, .g-full > .g-h { margin: 0; }
/* one heading-to-body gap everywhere: 20px under section headings, 10px inside cards */
.g-col > .g-h + .st-lede, .st-block > .g-h + .st-lede, .st-wide > .g-h + .st-lede { margin-top: 10px; }
#gate .g-full > .g-h + .st-cards { margin-top: 8px; }
@media (min-width: 901px) { #gate .g-full > .g-h + .st-cards { margin-top: 2px; } }
@media (max-width: 900px) { #gate .g-gethead { gap: 10px; } #gate .g-col > .g-h + .about-nat { margin-top: 10px; } }
.g-col .k { margin: 0; }
.st-stepcard { display: grid; gap: 10px; padding: 14px 16px; }
.st-stepcard .st-steps { margin: 0; }
.k { display: block; font: 500 12px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink3); margin: 0; }
.st-cardlede { margin: 0; font-size: 15px; line-height: 1.6; color: var(--ink); padding-bottom: 12px; border-bottom: 1px solid var(--rule); }
.g-gethead { display: grid; gap: 8px; }
.g-get .cmp { table-layout: fixed; }
.g-get .cmp th:first-child, .g-get .cmp td:first-child { width: 48%; }
.g-get .cmp th:not(:first-child), .g-get .cmp td:not(:first-child) { width: 26%; }
.g-get .cmp th { white-space: normal; line-height: 1.3; }
@media (max-width: 460px) { .g-get .cmp th:first-child, .g-get .cmp td:first-child { width: 44%; } .g-get .cmp th:not(:first-child), .g-get .cmp td:not(:first-child) { width: 28%; } .g-get .cmp th { letter-spacing: .04em; } }
@media (min-width: 901px) { .g-get .cmp, .g-get > .fine, .g-get > .g-gethead { width: 100%; } .g-gethead { grid-template-columns: auto 1fr !important; column-gap: 40px !important; } .g-get .cmp td { padding: 11px 14px; } }
.g-checkout { max-width: 620px; width: 100%; justify-self: center; }
@media (min-width: 901px) {
  .page:has(#gate:not([hidden])) { max-width: min(1080px, calc(100% - 40px)); padding: 20px 48px 36px; }
  #gate.gate { gap: 0; }
  #gate .g-row { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 56px; align-items: start; padding: 44px 0; border-top: 1px solid var(--rule); }
  #gate .g-row.g-hero { border-top: 0; padding-top: 28px; align-items: center; }
  #gate .g-row.g-full { grid-template-columns: 1fr; row-gap: 18px; }
  #gate .g-row.g-checkout { grid-template-columns: 1fr; row-gap: 14px; border-top: 0; padding-top: 0; }
  #gate .g-row.g-faq { row-gap: 20px; }
  .g-faq > .g-col:first-child { display: contents; }
  .g-faq .g-h { grid-column: 1 / -1; grid-row: 1; margin: 0; }
  .g-faq .about-nat { grid-column: 1; grid-row: 2; margin-top: 0; }
  .g-faq > .faq { grid-column: 2; grid-row: 2; }
  #gate .g-get { padding-bottom: 44px; }
  .g-gethead { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 56px; align-items: end; }
  .st-stepcard { padding: 20px 22px; gap: 14px; }
  .st-stepcard .st-steps li { font-size: 15px; }
  .gate h1 { font-size: clamp(48px, 5vw, 68px); }
  .gate .lede { font-size: 16px; }
  .g-h { font-size: 30px; }
  .st-lede { font-size: 15px; }
  .st-cards { grid-template-columns: repeat(3, 1fr); }
  .st-close { font-size: 30px; padding: 26px 12px 0; border-bottom: 0; }
  .l-map { height: 300px; }
  .g-checkout .buycard { padding: 22px; }
}

@media (min-width: 901px) {
  .page:has(#claim:not([hidden])) { max-width: min(1040px, calc(100% - 40px)); padding: 20px 40px 36px; }
  #claim.gate { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "top top" "hero hero" "wrap wrap"; column-gap: 44px; }
  #claim > .g-top { grid-area: top; } #claim > .hero { grid-area: hero; } #claim > .c-wrap { grid-area: wrap; }
  #claim .c-wrap { grid-template-columns: 1fr 1fr; grid-template-areas: "key steps" "next steps"; column-gap: 44px; align-items: start; }
  #claim .keytag { grid-area: key; } #claim .c-steps { grid-area: steps; } #claim .next { grid-area: next; }
  #claim h1 { font-size: clamp(44px, 4.6vw, 64px); }
  #claim .lede { font-size: 16px; }
}

/* ---------- calmer calculator ---------- */
.who-lines { display: inline-flex; gap: 4px; padding: 0 4px; border-left: 1.5px solid var(--rule); border-right: 1.5px solid var(--rule); }
.who-lines[hidden] { display: none !important; }
.who-lines .tog { min-height: 30px; padding: 4px 10px; font-size: 12px; }
.legend .lg-on { display: none; }
.legend.lines-on .lg-on { display: inline; }
.legend.lines-on .lg-off { display: none; }
details.adv { margin-top: 6px; }
details.adv > summary { cursor: pointer; font: 600 12px var(--body); color: var(--link); list-style: none; }
details.adv > summary::-webkit-details-marker { display: none; }
details.adv > summary::after { content: " \203A"; }
details.adv[open] > summary { margin-bottom: 6px; }
.house-tag.match { background: var(--acqua); }
.method-body h3 { font: 700 14px/1.3 var(--body); margin: 12px 0 4px; }
.method-body p, .method-body li { font-size: 13px; color: var(--ink2); }

/* lines fade while the pin is dragged, then redraw at the new spot */
#map.moving .leaflet-overlay-pane { opacity: .12; transition: opacity .15s; }
#map.moving .leaflet-marker-pane > :not(.ls-pin) { opacity: 0; }
.moving-tag { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 800; background: #1B1B1B; color: #fff; border-radius: 999px; padding: 7px 14px; font: 600 13px var(--body); pointer-events: none; white-space: nowrap; }
.moving-tag[hidden] { display: none; }
.draw-hint { pointer-events: auto; cursor: pointer; border: 0; background: var(--blue); }
.draw-hint:hover { background: #1B1B1B; }

/* map: centre pin control */
.centre-ctl { display: inline-flex; align-items: center; gap: 5px; min-height: 32px; padding: 4px 11px; border-radius: 999px; border: 1.5px solid #1B1B1B; background: #fff; color: #1B1B1B; font: 600 13px var(--body); cursor: pointer; box-shadow: 2px 2px 0 #1B1B1B; }
.centre-ctl span { font-size: 15px; line-height: 1; }
.centre-ctl:hover { background: var(--acqua); }
.centre-ctls { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.leaflet-top.leaflet-left .centre-ctls { margin-top: 8px; }
.centre-ctl.ghost { box-shadow: none; border-color: var(--rule); }
/* faint + in the middle of the map: where "Pin to map centre" drops the pin */
.map-cross { position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; z-index: 450; pointer-events: none; opacity: .55; }
.map-cross::before, .map-cross::after { content: ''; position: absolute; background: #1B1B1B; }
.map-cross::before { left: 10px; top: 0; width: 2px; height: 22px; }
.map-cross::after { top: 10px; left: 0; height: 2px; width: 22px; }

/* compare towns + address checker */
.compare h2 { font: 700 17px/1.3 var(--body); margin: 0 0 2px; }
.compare tr.here td { background: color-mix(in srgb, var(--acqua) 35%, transparent); }
.best-tag { display: inline-block; margin-left: 6px; background: var(--gold); color: #1B1B1B; border-radius: 999px; padding: 1px 8px; font-size: 12px; font-weight: 600; }
#addrBox { margin-bottom: 0; }

/* ---------- Ask Nat (included support) ---------- */
.ask-top { display: inline-flex; align-items: center; min-height: 32px; padding: 4px 12px; border-radius: 999px; background: var(--acqua); color: var(--on-fill); border: 1.5px solid rgba(27, 27, 27, .14); font: 600 13px var(--body); text-decoration: none; white-space: nowrap; }
.ask-top:hover { filter: brightness(.95); }
.ask { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; padding: 10px 14px; border: 1.5px solid var(--rule); border-radius: var(--card-radius); background: var(--surface); }
.ask > p { margin: 0; font-size: 14px; color: var(--ink2); }
.ask > p b { color: var(--ink); }
.ask-ico { font-size: 26px; line-height: 1; }
.ask h2 { font: 700 15px/1.3 var(--body); margin: 0 0 2px; }
.ask p { margin: 0; font-size: 13px; color: var(--ink2); }
@media (max-width: 600px) { .seat { display: none; } }

/* ---------- app layout ---------- */

.app { display: grid; grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); gap: var(--gap); align-items: start; }
.panel { background: var(--surface); border: 1.5px solid var(--rule); border-radius: var(--card-radius); padding: 14px 16px; position: sticky; top: 64px; max-height: calc(100vh - 84px); overflow: auto; }
.panel-title { margin-bottom: 12px; }
.step { border-top: 1px solid var(--rule); padding: 10px 0 4px; }
.step h3 { display: flex; gap: 8px; align-items: center; margin: 0 0 10px; font: 600 12px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink2); }
.step { --tint: var(--fill-sand); }
.step.s1 { --tint: var(--fill-aqua); } .step.s2 { --tint: var(--fill-lilac); } .step.s3 { --tint: var(--fill-yellow); } .step.s4 { --tint: var(--fill-blue); }
.panel .step { border-top: 0; background: color-mix(in srgb, var(--tint) 26%, var(--surface)); border: 1.5px solid color-mix(in srgb, var(--tint) 70%, var(--surface)); border-radius: 14px; padding: 12px 12px 8px; margin-top: 10px; }
.panel .step .n { background: var(--tint); color: var(--on-fill); border: 1.5px solid rgba(27, 27, 27, .14); }
.panel .step h3 { color: var(--ink); }
.panel .step input:not([type=checkbox]), .panel .step select { background: var(--field); }
.n { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--selected-bg); color: var(--selected-ink); font: 600 12px var(--mono); letter-spacing: 0; }
.opt { font: 400 12px var(--body); letter-spacing: 0; text-transform: none; color: var(--ink3); }
.field { margin-bottom: 8px; min-width: 0; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.check { display: flex; gap: 8px; align-items: flex-start; font: 400 13px/1.4 var(--body); color: var(--ink2); cursor: pointer; }
.offin { display: inline-block; min-height: 34px !important; padding: 4px 10px !important; margin-top: 4px; }

.place { position: relative; }
.results { position: absolute; z-index: 1300; left: 0; right: 0; top: 100%; margin: 4px 0 0; padding: 4px 0; list-style: none; background: var(--surface); border: 1.5px solid var(--ink3); border-radius: 12px; max-height: 240px; overflow: auto; }
.results li { padding: 8px 12px; min-height: 36px; cursor: pointer; font-size: 14px; border-bottom: 1px solid var(--rule); }
.results li:last-child { border: 0; }
.results li:hover, .results li[aria-selected=true] { background: var(--paper); }

.areas { list-style: none; margin: 8px 0 0; padding: 0; display: grid; }
.areas li { display: flex; gap: 6px; align-items: center; padding: 6px 0; border-top: 1px solid var(--rule); }
.areas input { min-height: 34px; padding: 4px 10px; font-size: 14px; flex: 1; }
.areas button { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid var(--rule); background: none; color: var(--ink2); cursor: pointer; font-size: 17px; line-height: 1; }
.areas button:hover { border-color: var(--avoid-strong); color: var(--ink); }

/* ---------- map ---------- */
.stage { min-width: 0; }
.mapbar { display: flex; flex-wrap: nowrap; gap: 6px; margin-bottom: 10px; overflow-x: auto; scrollbar-width: none; padding: 1px; }
.mapbar::-webkit-scrollbar { display: none; }
.mapwrap { position: relative; border: 1.5px solid var(--rule); border-radius: var(--card-radius); overflow: hidden; background: var(--map-bg); }
#map { height: min(62vh, 560px); min-height: 360px; background: var(--map-bg); }
.legend { position: absolute; right: 10px; top: 10px; z-index: 900; display: flex; flex-wrap: wrap; gap: 4px 10px; max-width: calc(100% - 64px); background: var(--surface); color: var(--ink); border: 1.5px solid var(--rule); border-radius: 14px; padding: 6px 10px; font: 600 12px/1.3 var(--body); }
.legend span { display: inline-flex; align-items: center; gap: 5px; }
.sw { width: 12px; height: 12px; border-radius: 4px; display: inline-block; }
.sw.prime { background: var(--map-prime); } .sw.good { background: var(--map-good); } .sw.workable { background: var(--map-mixed); } .sw.no { background: var(--map-avoid); }
.ln { width: 20px; height: 0; border-top: 2.5px solid var(--ink); display: inline-block; }
.ln.dash { border-top-style: dashed; }

/* map glyphs and markers (built in app.js) */
.glyph { font: 600 15px/1 'Segoe UI Symbol', 'Noto Sans Symbols', 'DejaVu Sans', sans-serif; text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 2px #fff; white-space: nowrap; transform: translate(-50%, -50%); pointer-events: auto; }
.glyph small { font: 600 9px var(--mono); vertical-align: sub; }
.glyph.opp { opacity: .6; }
.hnum { font: 600 10.5px var(--mono); color: var(--ink); background: var(--surface); border: 1.5px solid var(--rule); border-radius: 50%; width: 22px; height: 22px; display: grid; place-items: center; transform: translate(-50%, -50%); }
.cand-dot { width: 16px; height: 16px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 1.5px #1B1B1B; transform: translate(-50%, -50%); }
.cand-label { font: 600 12px var(--body); color: var(--ink); background: var(--surface); border: 1.5px solid var(--rule); padding: 1px 8px; border-radius: 999px; white-space: nowrap; transform: translate(12px, -50%); display: inline-block; }
.ls-pin .pin { position: relative; display: block; width: 26px; height: 26px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--blue); border: 3px solid #fff; box-shadow: 0 0 0 1.5px rgba(27, 27, 27, .45); }
.ls-pin .pin::after { content: ""; position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; background: #fff; }

/* Leaflet chrome */
.mapwrap .leaflet-container { font: 12px/1.4 var(--body); background: var(--map-bg); }
.mapwrap .leaflet-bar { border: 1.5px solid var(--rule); border-radius: 12px; box-shadow: none; overflow: hidden; }
.mapwrap .leaflet-bar a { width: 34px; height: 34px; line-height: 32px; background: var(--surface); color: var(--ink); border-bottom: 1px solid var(--rule); font: 600 18px/32px var(--body); transition: background-color .15s; }
.mapwrap .leaflet-bar a:last-child { border-bottom: 0; }
.mapwrap .leaflet-bar a:hover, .mapwrap .leaflet-bar a:focus { background: var(--paper); color: var(--ink); }
.mapwrap .leaflet-control-scale-line { background: var(--surface); color: var(--ink2); border: 1.5px solid var(--ink3); border-top: 0; font: 500 10px var(--mono); padding: 1px 6px; }
.mapwrap .leaflet-control-scale-line:not(:first-child) { border-top: 1.5px solid var(--ink3); border-bottom: 0; }
.mapwrap .leaflet-control-attribution { background: var(--surface); color: var(--ink3); font: 10.5px var(--body); border-top-left-radius: 8px; padding: 1px 8px; }
.mapwrap .leaflet-control-attribution a { color: var(--link); }
.leaflet-tooltip { font: 12px/1.4 var(--body); background: var(--surface); color: var(--ink); border: 1.5px solid var(--rule); border-radius: 10px; box-shadow: none; padding: 6px 9px; }
.leaflet-tooltip.zone-tip { width: 250px; white-space: normal; }
.zone-tip i { color: var(--ink2); }
.leaflet-tooltip-top::before { border-top-color: var(--surface); }
.leaflet-tooltip-bottom::before { border-bottom-color: var(--surface); }
.leaflet-tooltip-left::before { border-left-color: var(--surface); }
.leaflet-tooltip-right::before { border-right-color: var(--surface); }
:root[data-theme="dark"] .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(.92) contrast(.9); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(.92) contrast(.9); } }

/* ---------- results ---------- */
.results-area { margin-top: var(--gap); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap); }
.results-area > *, #compareBox > * { min-width: 0; }
.compare .tablewrap { overflow-x: auto; }
.duo { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: var(--gap); align-items: start; }
.duo > .card { height: 100%; }
.card h2 { font: 700 17px/1.25 var(--body); letter-spacing: -.01em; margin: 0 0 2px; }
.sub { font-size: 13px; color: var(--ink3); margin: 0 0 8px; }
.verdict { font-size: 14px; font-weight: 500; line-height: 1.5; margin: 0 0 4px; }
.arcs { display: grid; }
.arc { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 10px; align-items: start; padding: 8px 0; border-top: 1px solid var(--rule); }
.arc .check-line { grid-column: 1 / -1; }
.arc:last-child { padding-bottom: 2px; }
.arc-head { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; }
.arc-head strong { font-size: 15px; }
.why { font-size: 13px; line-height: 1.5; color: var(--ink2); }
.why b { color: var(--ink); font-weight: 600; }
.check-line { font-size: 13px; line-height: 1.5; color: var(--ink); }
.check-line b { font-weight: 600; }
.arc-head { padding-top: 4px; }
.arc-head .why { min-width: 0; }
.arc .btn.small, .pick .btn.small { min-height: 32px; padding: 4px 12px; }

/* top directions and home-sector lines: compact rows, thin rules between */
.picks { display: grid; }
.pick { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 8px 0; border-top: 1px solid var(--rule); }
.pick:last-child { padding-bottom: 2px; }
.rank { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--selected-bg); color: var(--selected-ink); font: 600 12px var(--mono); margin-top: 1px; }
.pick-body { display: grid; gap: 2px; min-width: 0; }
.pick-head { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; }
.pick-head strong { font-size: 15px; }
.pick .btn { min-width: 52px; }
.house-tag { justify-self: start; display: inline-block; margin: 2px 0 1px; padding: 2px 9px; border-radius: 8px; background: var(--fill-sand); color: var(--on-fill); font: 600 12px/1.4 var(--body); }
.reading { font-size: 14px; line-height: 1.5; color: var(--ink); }
.tone-tag .tg { font-size: 15px; line-height: 1; vertical-align: -1px; }
.house-tag.tone-tag { background: transparent; border: 1px solid var(--rule); color: var(--ink2); font-weight: 500; }
.tone-more { font-size: 12px; color: var(--ink3); }
.hl-row { display: grid; gap: 2px; padding: 8px 0; border-top: 1px solid var(--rule); }
.hl-row:last-child { padding-bottom: 2px; }
.pick-num { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #1B1B1B; color: #fff; border: 2px solid #fff; font: 600 12px var(--mono); transform: translate(-50%, -50%); box-shadow: 0 0 0 1px rgba(27, 27, 27, .4); }
.legend .hl { width: 20px; height: 8px; border-radius: 4px; background: var(--ink3); opacity: .45; display: inline-block; }
.legend .pk { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: #1B1B1B; color: #fff; font: 600 9px var(--mono); font-style: normal; }

/* partners side by side; one column only when the panel is too narrow */
.pair { container-type: inline-size; display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.pair .two { grid-template-columns: 1fr; gap: 0; }
@container (min-width: 620px) { .pair .two { grid-template-columns: 1fr 1fr; gap: 8px; } }
@container (max-width: 320px) { .pair { grid-template-columns: 1fr; } }
/* phones: one partner per row, birth date and time side by side, roomier fields */
@media (max-width: 600px) {
  .pair { grid-template-columns: 1fr; gap: 0; }
  .pair .two { grid-template-columns: 1fr 1fr; gap: 10px; }
  .panel .step { padding: 14px 14px 10px; margin-top: 12px; }
  .panel .step .field { margin-bottom: 12px; }
  .pair .hint { font-size: 12px; }
}
.pair .hint { font-size: 12px; }
.offin { width: 100% !important; max-width: 9.5rem; }

/* start here: top 3 areas */
.top3 h2 { font: 700 17px/1.3 var(--body); margin: 0 0 2px; }
.areas3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 20px; }
.area3 { display: grid; gap: 4px; align-content: start; padding: 12px 0 4px; border-top: 1px solid var(--rule); min-width: 0; }
.area3-head { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; }
.area3-head strong { font-size: 17px; }
.area3-head .btn { margin-left: auto; min-height: 32px; padding: 4px 12px; }
.letter { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--blue); color: #fff; font: 600 13px var(--mono); }
.area-num { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #0456fb; color: #fff; border: 2px solid #fff; font: 600 12px var(--mono); transform: translate(-50%, -50%); box-shadow: 0 0 0 1px rgba(27, 27, 27, .4); }
.legend .ar { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: #0456fb; color: #fff; font: 600 9px var(--mono); font-style: normal; }

/* compact items: decide on line 1, understand on line 2, tap for the rest */
.reading { font-size: 14px; line-height: 1.5; color: var(--ink); }
.house-tag { white-space: nowrap; }
.house-tag.term { border-bottom: 0; cursor: help; }
.pick-meta, .area3-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; font-size: 13px; color: var(--ink2); }
.pl { white-space: nowrap; }
.star { border-bottom: 0; color: var(--gold); margin-left: 2px; }
.pdot { display: inline-flex; align-items: center; gap: 5px; font: 600 13px var(--body); color: var(--ink2); white-space: nowrap; }
.d { width: 10px; height: 10px; border-radius: 50%; display: inline-block; background: var(--fill-sand); }
.d.G { background: var(--map-good); } .d.A { background: var(--map-mixed); } .d.R { background: var(--map-avoid); }
.dot-key { display: inline-flex; gap: 10px; margin-left: 6px; vertical-align: middle; }
.dot-key .pdot { font-weight: 500; color: var(--ink3); font-size: 12px; }
details.more > summary { min-height: 30px; font-size: 13px; }
.more-body { font-size: 13px; line-height: 1.5; color: var(--ink2); padding: 0 0 4px; }
.more-body b { color: var(--ink); }
.area3 { gap: 6px; }

/* map line details: tap a line or planet symbol */
.leaflet-popup.line-pop .leaflet-popup-content-wrapper { background: var(--surface); color: var(--ink); border: 1.5px solid var(--rule); border-radius: 14px; box-shadow: 0 0 0 1px rgba(27, 27, 27, .06); }
.leaflet-popup.line-pop .leaflet-popup-tip { background: var(--surface); box-shadow: none; }
.leaflet-popup.line-pop .leaflet-popup-content { margin: 12px 14px; font: 13px/1.45 var(--body); min-width: 220px; }
.leaflet-popup.line-pop a.leaflet-popup-close-button { color: var(--ink3); }
.lp-head { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; font-size: 14px; }
.lp-str { font-size: 12px; color: var(--ink3); margin-top: 2px; }
.lp-feel { color: var(--ink2); margin: 6px 0 2px; }
.lp-end { display: grid; gap: 3px; padding: 7px 0 2px; border-top: 1px solid var(--rule); margin-top: 6px; }
.lp-end-head { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; }
.lp-dir { font-weight: 700; font-size: 13px; }
.lg-hint { font-weight: 500; color: var(--ink3); }

/* priorities chooser (form) and match badge (results) */
p.label { display: block; font: 600 12px/1.3 var(--body); color: var(--ink2); margin: 0 0 6px; }
p.label .opt { font-weight: 400; }
.prefs { display: flex; flex-wrap: wrap; gap: 6px; }
.prefs .pref { font-size: 12px; padding: 5px 10px; }
.match { display: inline-flex; align-items: center; gap: 3px; padding: 2px 9px; border-radius: 8px; background: var(--fill-blue); color: var(--on-fill); font: 600 12px/1.4 var(--body); white-space: nowrap; }

/* Home score: one number to decide by. Colour follows the grade band. */
.score-pill { display: inline-flex; align-items: baseline; gap: 5px; border-radius: 999px; padding: 2px 10px 3px; font: 600 12px/1.35 var(--body); white-space: nowrap; background: var(--fill-sand); color: var(--on-fill); }
.score-pill b { font: 400 15px/1 var(--nineties); }
.score-pill.prime, .score-tile.prime { background: var(--go); }
.score-pill.good, .score-tile.good { background: var(--good); }
.score-pill.workable, .score-tile.workable { background: var(--mixed); }
.score-pill.no, .score-tile.no { background: var(--avoid); }
.area3-head { flex-wrap: nowrap; align-items: center; }
.area3-title { display: grid; gap: 1px; min-width: 0; flex: 1 1 auto; }
.area3-title strong { font-size: 16px; line-height: 1.2; }
.grade-word { font: 500 12px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink3); }
.score-tile { flex: 0 0 auto; display: grid; place-items: center; min-width: 54px; padding: 8px 10px; border-radius: 14px; color: var(--on-fill); text-align: center; }
.score-tile b { font: 400 30px/1 var(--nineties); }
.score-tile small { font: 600 9.5px/1.2 var(--mono); letter-spacing: .06em; text-transform: uppercase; opacity: .75; }
.area3-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.area3-foot .btn { min-height: 32px; padding: 4px 12px; }
.score-key { display: inline-block; margin-top: 4px; font-size: 12px; color: var(--ink3); }
.score-key b { color: var(--ink2); }

/* results: one open answer (top 3), everything else a closed row with a title and a count */
.card.section { padding: 2px 14px; }
.card.section[open] { padding-bottom: 12px; }
details.section > summary { justify-content: space-between; gap: 10px; min-height: 48px; color: var(--ink); font: 700 15px/1.3 var(--body); }
details.section > summary::after { color: var(--ink3); }
.sec-title { flex: 1 1 auto; }
.sec-meta { font: 500 12px var(--mono); letter-spacing: .04em; color: var(--ink3); white-space: nowrap; }
.sec-ico { font-size: 16px; margin-right: 8px; }
/* phones: every row title stays on one line; the grey hint gives way first */
@media (max-width: 640px) {
  details.section > summary { font-size: 14px; gap: 8px; }
  .sec-title { flex: 0 1 auto; white-space: nowrap; }
  .sec-meta { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 12px; letter-spacing: .02em; }
  .sec-ico { font-size: 15px; margin-right: 6px; }
}
/* consecutive folded sections read as one grouped card, rows split by a rule */
.card.section + .card.section { margin-top: calc(-1 * var(--gap) - 1.5px); border-top-left-radius: 0; border-top-right-radius: 0; border-top: 1px solid var(--rule); }
.card.section:has(+ .card.section) { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-bottom: 0; }
.sec-body { border-top: 1px solid var(--rule); padding-top: 8px; }
.sec-body > .sub:first-child { margin-top: 2px; }
.cand-score { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }

/* map key: the essentials, the rest under "More" */
.legend-more[open] { flex-basis: 100%; }
.legend-more > summary { min-height: 20px; font: 600 12px var(--body); color: var(--link); }
.legend-more-body { display: flex; flex-wrap: wrap; gap: 4px 10px; padding-top: 4px; }

/* person switch inside a list */
.who-filter { display: flex; gap: 6px; flex-wrap: wrap; margin: 2px 0 6px; }
.who-filter .tog { font-size: 12px; padding: 4px 12px; }
.who-empty { border-top: 0; }

/* place names under each top area (filled by /api/places when the server has it) */
.area-names { font-size: 13px; line-height: 1.4; color: var(--ink2); margin-top: -2px; }
.area-names b { color: var(--ink); font-weight: 600; }
.area-names .sample { font: 500 12px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink3); margin-left: 4px; }

/* one fold for everything deep */
.fold-card > summary { min-height: 34px; }
.fold-card[open] > summary { margin-bottom: 4px; }
.fold-card > .note:first-of-type { border-top: 1px solid var(--rule); }
.detail-h { font: 600 12px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink2); margin: 12px 0 4px; padding-top: 12px; border-top: 1px solid var(--rule); }
.detail-block .sub { margin-bottom: 4px; }
.detail-block table { margin-bottom: 4px; }

.tablewrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 13px; }
th, td { text-align: left; padding: 8px; border-bottom: 1px solid var(--rule); vertical-align: top; }
tr:last-child td { border-bottom: 0; }
th { font: 600 12px/1.3 var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--ink3); white-space: nowrap; }
td.num, th.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 0 20px; }
.note { margin: 0; padding: 10px 0; border-top: 1px solid var(--rule); font-size: 13px; line-height: 1.5; color: var(--ink2); }
.note:last-child { padding-bottom: 2px; }
.note b { color: var(--ink); }
.intro { margin-top: var(--gap); color: var(--ink2); }
.intro p:last-child { margin: 0; }
.intro strong { color: var(--ink); }

/* folding: deep detail behind a clear blue summary */
details > summary { display: flex; align-items: center; min-height: 32px; cursor: pointer; list-style: none; color: var(--link); font: 600 13px var(--body); }
details > summary::-webkit-details-marker { display: none; }
details > summary::after { content: "\203A"; margin-left: 6px; font-size: 16px; line-height: 1; transition: transform .15s; }
details[open] > summary::after { transform: rotate(90deg); }
.fold { margin-top: 2px; }
.arcs + .fold, .note + .fold, .picks + .fold { border-top: 1px solid var(--rule); padding-top: 6px; }
.method { margin-top: var(--gap); }
.stage > .ask { margin-top: var(--gap); }
.next-slot { margin-top: var(--gap); }
.method[open] > summary { margin-bottom: 4px; }
.method h3 { font: 600 12px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink2); margin: 14px 0 6px; padding-top: 12px; border-top: 1px solid var(--rule); }
.method p, .method li { font-size: 13px; line-height: 1.55; color: var(--ink2); }
.method ul { margin: 4px 0 8px; padding-left: 18px; }
.method b { color: var(--ink); }

/* astrology terms: dotted underline, tap or hover to explain */
.term { border-bottom: 1.5px dotted currentColor; cursor: help; position: relative; }
.term:focus { outline: none; background: var(--fill-blue); color: var(--on-fill); border-radius: 3px; }
.term:hover::after, .term:focus::after { content: attr(data-tip); position: fixed; left: 16px; right: 76px; bottom: 16px; z-index: 1600; max-width: 420px; background: #1B1B1B; color: #fff; font: 500 13px/1.45 var(--body); text-transform: none; letter-spacing: 0; padding: 10px 14px; border-radius: 14px; pointer-events: none; }
@media (min-width: 700px) and (hover: hover) {
  .term:hover::after, .term:focus::after { position: absolute; left: 0; right: auto; top: calc(100% + 6px); bottom: auto; width: 260px; }
}

.foot { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--rule); font-size: 12px; line-height: 1.5; color: var(--ink3); }
.foot p { margin: 0; text-wrap: pretty; }

/* round light/dark toggle, bottom right */
.theme-toggle { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 1500; width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--rule); background: var(--surface); color: var(--ink); font: 18px/1 var(--body); cursor: pointer; display: grid; place-items: center; transition: background-color .15s, border-color .15s; }
.theme-toggle:hover { border-color: var(--ink3); }

/* ---------- responsive: phone first at 375-390px ---------- */
@media (max-width: 900px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .panel { position: static; max-height: none; overflow: visible; }
  #map { height: 52vh; min-height: 320px; }
}
@media (max-width: 600px) {
  input:not([type=checkbox]), select { font-size: 16px; }  /* stops iOS zooming into fields */
}
@media (max-width: 460px) {
  .page, .page:has(#gate:not([hidden])), .page:has(#claim:not([hidden])) { margin: 0; border-radius: 0; padding: 12px 16px 80px; }
  .panel { padding: 12px 14px; }
  .legend { left: 10px; right: auto; top: auto; bottom: 10px; max-width: calc(100% - 20px); }
  .mapwrap .leaflet-bottom.leaflet-left { bottom: 64px; }
}
@media (max-width: 360px) { .two { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; } }

/* desktop: the four steps in one row across the top, the map full width below, then the results */
@media (min-width: 901px) {
  .app { grid-template-columns: minmax(0, 1fr); row-gap: 12px; }
  .app > .panel { position: static; max-height: none; overflow: visible; padding: 16px 18px 18px;
    display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1.3fr) minmax(0, 1fr); grid-template-rows: auto auto auto auto auto 1fr; column-gap: 14px; align-items: start; }
  .panel > .eyebrow { grid-column: 1 / -1; grid-row: 1; }
  .panel > .panel-head { grid-column: 1; grid-row: 2; }
  .panel > .who-toggle { grid-column: 2 / -1; grid-row: 2; justify-self: end; align-self: center; margin: 0; }
  .app > .panel.is-solo { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.3fr) minmax(0, 1fr); }
  .panel > .pair { grid-column: 1; grid-row: 3 / span 4; }
  .panel > .step.s3 { grid-column: 2; grid-row: 3 / span 4; }
  .panel > .step.s4 { grid-column: 3; grid-row: 3; }
  .panel > #runBtn { grid-column: 3; grid-row: 4; margin-top: 10px; }
  .panel > #runMsg { grid-column: 3; grid-row: 5; }
  .panel > #seatNote { grid-column: 3; grid-row: 6; }
  .panel .pair { gap: 0 14px; align-self: stretch; align-items: stretch; }
  .panel > .step.s3 { align-self: stretch; }
  .panel .pair .step, .panel > .step { margin-top: 10px; }
  #map { height: min(72vh, 680px); min-height: 520px; }
}

/* phones: square map so the wheel fills the width */
@media (max-width: 600px) {
  #map { height: auto; aspect-ratio: 1 / 1; min-height: 0; max-height: none; }
  .mapwrap .legend { position: static; max-width: none; margin: 0; border: 0; border-top: 1.5px solid var(--rule); border-radius: 0; padding: 8px 12px; }
}

/* ---------- printable home report: hidden on screen, the only thing printed ---------- */
.report { display: none; }
@media print {
  @page { size: A4; margin: 0; }
  html, body { background: #F8F5EC !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; color-scheme: light; }
  body > *:not(.report) { display: none !important; }
  .report { display: block !important; background: #F8F5EC; min-height: 296mm; padding: 12mm 13mm 10mm; color: #1B1B1B; font: 10.5pt/1.45 var(--body); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .rp-area { background: #fff; }
  .rp-table { background: #fff; border-radius: 8px; }
}
.rp { display: grid; gap: 9px; color: #1B1B1B; }
.rp p { margin: 0; }
.rp-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; padding-bottom: 12px; border-bottom: 2px solid #1B1B1B; }
.rp-brand { font: 600 8pt var(--body); letter-spacing: .1em; text-transform: uppercase; color: #8a847a; }
.rp-title { font: 400 30pt/.95 var(--nineties); text-transform: uppercase; margin: 4px 0 2px; }
.rp-who { font: 600 12pt var(--body); }
.rp-best { text-align: center; background: #7FD8D4; border-radius: 12px; padding: 8px 14px; }
.rp-best b { display: block; font: 400 34pt/1 var(--nineties); }
.rp-best small, .rp-score small { font: 600 7pt var(--body); letter-spacing: .08em; text-transform: uppercase; }
.rp-facts { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 9pt; color: #555049; }
.rp-facts b { color: #1B1B1B; margin-right: 4px; }
.rp-top3 { display: grid; grid-template-columns: 62mm 1fr; gap: 16px; align-items: start; }
.rp-wheelbox { display: grid; gap: 6px; }
.rp-wheel { width: 100%; height: auto; }
.rp-key { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; font-size: 8pt; }
.rp-small { font-size: 7.5pt; color: #8a847a; }
.rp-h { font: 400 15pt/1 var(--nineties); text-transform: uppercase; margin: 2px 0 6px; }
.rp-areas { display: grid; gap: 8px; }
.rp-area { display: grid; grid-template-columns: 20mm 1fr; gap: 10px; border: 1.2px solid rgba(27, 27, 27, .18); border-radius: 10px; padding: 7px; break-inside: avoid; }
.rp-score { display: grid; place-content: center; text-align: center; border-radius: 8px; background: #CAF1F0; }
.rp-score.prime { background: #7FD8D4; } .rp-score.workable { background: #F7DE9C; } .rp-score.no { background: #F2B6B6; }
.rp-score b { font: 400 24pt/1 var(--nineties); }
.rp-body { display: grid; gap: 3px; min-width: 0; }
.rp-top { font: 600 8pt var(--body); letter-spacing: .06em; text-transform: uppercase; color: #555049; }
.rp-letter { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: #0456fb; color: #fff; margin-right: 6px; font-size: 8pt; letter-spacing: 0; }
.rp-name { font: 700 11pt var(--body); }
.rp-meta { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; font-size: 8.5pt; }
.rp-house { background: #EADFC8; border-radius: 999px; padding: 1px 7px; font-weight: 600; }
.rp-read { font-size: 9.5pt; }
.rp-lines { font-size: 8pt; color: #8a847a; }
.rp-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 4px; vertical-align: 0; background: #EADFC8; border: 1px solid rgba(27, 27, 27, .2); }
.rp-dot.G, .rp-dot.good { background: #CAF1F0; } .rp-dot.prime { background: #1FA39C; } .rp-dot.A, .rp-dot.workable { background: #F2C14E; } .rp-dot.R, .rp-dot.no { background: #E67A7A; }
.rp-table { width: 100%; border-collapse: collapse; font-size: 9pt; break-inside: avoid; }
.rp-table th { text-align: left; font: 600 7.5pt var(--body); letter-spacing: .08em; text-transform: uppercase; color: #8a847a; padding: 4px 6px; border-bottom: 1px solid rgba(27, 27, 27, .2); }
.rp-table td { padding: 3px 6px; border-bottom: 1px solid rgba(27, 27, 27, .1); }
.rp-avoid { font-size: 9pt; background: #fbeaea; border-radius: 8px; padding: 6px 10px; }
.rp-foot { border-top: 1px solid rgba(27, 27, 27, .2); padding-top: 10px; display: grid; gap: 8px; font-size: 8.5pt; color: #555049; }
.rp-keyrow { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 8px; }
.rp-keyrow b { color: #1B1B1B; font-weight: 700; }
.rp-gap { margin-left: 10px; }
.rp-chip { border-radius: 999px; padding: 1px 8px; font-weight: 600; color: #1B1B1B; background: #CAF1F0; }
.rp-chip.prime { background: #7FD8D4; } .rp-chip.workable { background: #F7DE9C; } .rp-chip.no { background: #F2B6B6; }
.rp-ask { font-size: 10pt; color: #1B1B1B; background: #CAF1F0; border-radius: 8px; padding: 7px 10px; }
.rp-ask a { color: #0456fb; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.rp-legal { font-size: 7.5pt; color: #8a847a; }

/* places around the pin (AstroNat picks) */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.spot-search { display: flex; gap: 8px; margin: 10px 0 6px; }
.spot-search input { flex: 1; min-width: 0; min-height: 42px; padding: 8px 14px; border-radius: 999px; border: 1.5px solid var(--rule); background: var(--surface); color: var(--ink); font: 15px var(--body); }
.spot-search input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 18%, transparent); }
.spot-search .btn { min-height: 42px; border-radius: 999px; }
.spot-try { margin: 0 0 12px; font-size: 13px; color: var(--ink3); }
.spot-try .link { font-size: 13px; }
.spot-pick.plain { background: var(--fill-sand); }
.spot-pick { background: color-mix(in srgb, var(--acqua) 45%, var(--surface)); border-radius: 14px; padding: 12px 14px; margin-bottom: 12px; }
.spot-head { font: 500 12px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink2); margin: 0 0 6px; }
.spot-row { margin: 0 0 8px; font-size: 14px; line-height: 1.55; }
.spot-row.skip { color: var(--ink2); }
.spot-house { color: var(--ink2); font-size: 13px; }
.spot-pick .why, .spot-row .why { font-size: 13px; color: var(--ink2); }
.spot-pick .sub { margin: 4px 0 10px; }
.spot-places { list-style: none; margin: 0 0 8px; padding: 0; counter-reset: sp; }
.spot-places li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 1px solid var(--rule); }
.spot-place { all: unset; cursor: pointer; display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.spot-place:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 6px; }
.sp-name { font-weight: 600; font-size: 14px; }
.spot-place:hover .sp-name { color: var(--link); text-decoration: underline; }
.sp-meta { font-size: 13px; color: var(--ink2); line-height: 1.45; }
.spot-mk { display: grid; place-items: center; width: 28px; height: 28px; margin: -14px 0 0 -14px; border-radius: 50%; background: #fff; border: 2.5px solid var(--ink3); font-size: 14px; box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.spot-mk.prime { border-color: #1FA39C; } .spot-mk.good { border-color: #7FD8D4; } .spot-mk.workable { border-color: #F2C14E; } .spot-mk.no { border-color: #E67A7A; }

.rp-spots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px 14px; margin: 0 0 8px; font-size: 12px; }
.rp-spot small { color: #8a847a; }

/* is the ruling planet fit for this purpose? (travel-app strength model) */
.fit { border: 1.5px solid var(--rule); border-radius: 14px; padding: 10px 14px; margin: 0 0 12px; background: var(--surface); }
.fit-verdict { margin: 0 0 8px; font-weight: 600; font-size: 14px; line-height: 1.45; }
.fit-verdict.no { color: #B23A3A; } .fit-verdict.caution { color: #9A6B00; } .fit-verdict.ok { color: #13756F; }
.fit-list { list-style: none; margin: 0; padding: 0; }
.fit-row { display: grid; grid-template-columns: auto auto 1fr; gap: 4px 10px; align-items: baseline; padding: 6px 0; border-top: 1px solid var(--rule); font-size: 13px; }
.fit-who { font-weight: 600; white-space: nowrap; }
.fit-tag { justify-self: start; border-radius: 999px; padding: 1px 9px; font-size: 12px; font-weight: 600; white-space: nowrap; color: #1B1B1B; }
.fit-tag.strong { background: #7FD8D4; } .fit-tag.fair { background: #F7DE9C; } .fit-tag.weak { background: #F2B6B6; }
.fit-why { color: var(--ink2); font-size: 13px; }
.spot-pick.warn { background: color-mix(in srgb, #F2B6B6 35%, var(--surface)); }
@media (max-width: 640px) { .fit-row { grid-template-columns: auto 1fr; } .fit-why { grid-column: 1 / -1; } }
.rp-warn { color: #B23A3A !important; }
@media (max-width: 640px) { .centre-ctl .cc-label { display: none; } .centre-ctl { width: 36px; min-height: 36px; padding: 0; justify-content: center; } .centre-ctl span { font-size: 17px; } }

/* your home: the pin on the exact address */
.home-set { border: 1.5px dashed var(--rule); border-radius: 14px; padding: 10px 14px; margin: 4px 0 14px; }
.home-set.on { border-style: solid; background: color-mix(in srgb, var(--gold) 16%, var(--surface)); }
.home-set .sub { margin: 0 0 8px; }
.home-line { margin: 0 0 6px; font-size: 14px; line-height: 1.5; }
.home-acts { margin: 6px 0 0; font-size: 13px; color: var(--ink3); }
.home-acts .link { font-size: 13px; }
#homeBox { margin: 0; }
.ls-pin.is-home .pin { background: var(--gold); }
.ls-pin.is-home::after { content: '\1F3E1'; position: absolute; left: 50%; top: -24px; transform: translateX(-50%); font-size: 16px; }

/* top 3 areas: collapsible, compact */
details.top3 > summary { list-style: none; cursor: pointer; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
details.top3 > summary::-webkit-details-marker { display: none; }
details.top3 > summary::after { content: '\203A'; font-size: 22px; line-height: 1; color: var(--ink3); transform: rotate(90deg); transition: transform .15s; margin-top: 2px; }
details.top3:not([open]) > summary::after { transform: rotate(0deg); }
.t3-title { display: grid; gap: 3px; min-width: 0; }
.t3-h { font: 700 17px/1.3 var(--body); color: var(--ink); }
.t3-title .verdict { margin: 0; font-size: 14px; line-height: 1.45; }
.t3-how { margin: 4px 0 6px; font-size: 13px; }
.areas3 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 0 24px; }
.area3 { display: flex; flex-direction: column; gap: 6px; padding: 12px 0 10px; }
.area3-head { gap: 10px; }
.area3-title strong { font-size: 15px; }
.area3 .letter { width: 26px; height: 26px; font-size: 13px; flex: none; }
.area3 .score-tile { min-width: 52px; padding: 4px 6px; border-radius: 11px; }
.area3 .score-tile b { font-size: 22px; }
.area3 .score-tile small { font-size: 8px; }
.area-names { font-size: 13px; line-height: 1.4; }
.area3-meta { gap: 4px 10px; font-size: 12px; }
.area3 .reading { font-size: 14px; line-height: 1.5; margin: 0; }
.area3-foot { margin-top: auto; padding-top: 4px; gap: 8px; }
.area3-foot .btn { min-height: 32px; padding: 4px 14px; }
.refine-tag { position: absolute; right: 10px; bottom: 30px; z-index: 800; background: var(--surface); color: var(--ink2); border: 1.5px solid var(--rule); border-radius: 999px; padding: 4px 10px; font: 600 12px var(--body); pointer-events: none; }
.refine-tag[hidden] { display: none; }

/* homepage: illustrated neighbourhood map in the sample report */
.hm { display: block; width: 100%; height: 100%; }
.hm-place { font: 500 10.5px var(--body); fill: #7d7566; letter-spacing: .02em; }
.hm-lab text { font: 600 9.5px var(--body); fill: #555049; }
.hm-area text { font: 700 12px var(--body); fill: #fff; }
.l-key { position: absolute; right: 10px; bottom: 10px; display: flex; align-items: center; gap: 4px 8px; background: rgba(255,255,255,.92); color: #1B1B1B; border-radius: 999px; padding: 4px 10px; font: 600 12px var(--body); }
.l-key i { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: -3px; }
.hm-zones { animation: hm-fade 1.2s ease-out both; }
.hm-lines { transform-origin: 330px 196px; animation: hm-grow 1.6s cubic-bezier(.2,.7,.2,1) .3s both; }
.hm-area { animation: hm-fade .6s ease-out 1.5s both; }
@keyframes hm-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes hm-grow { from { transform: scale(.05); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .hm-zones, .hm-lines, .hm-area { animation: none; } }

/* who's buying: just me / two of us */
.who-toggle { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; margin: 2px 0 12px; }
.who-q { font: 600 13px var(--body); color: var(--ink2); margin-right: 2px; }
.who-opt { border: 1.5px solid var(--rule); background: var(--surface); color: var(--ink); border-radius: 999px; padding: 6px 14px; min-height: 34px; font: 600 13px var(--body); cursor: pointer; }
.who-opt:hover { border-color: var(--ink); }
.who-opt.on { background: #1B1B1B; color: #fff; border-color: #1B1B1B; }
.step.s2[hidden] { display: none !important; }
.panel.is-solo .pair { grid-template-columns: minmax(0, 1fr) !important; }

/* buy card: solo / couple plan switch */
.plan-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.plan-opt { display: grid; gap: 1px; text-align: left; border: 1.5px solid var(--rule); background: var(--paper); color: var(--ink); border-radius: 14px; padding: 9px 12px; cursor: pointer; font: inherit; }
.plan-opt b { font: 700 14px var(--body); }
.plan-opt small { font: 500 12px var(--body); color: var(--ink3); }
.plan-opt:hover { border-color: var(--ink); }
.plan-opt.on { border-color: #1B1B1B; background: #1B1B1B; color: #fff; }
.plan-opt.on small { color: #d8d2c4; }
.who-opt:disabled { opacity: .45; cursor: not-allowed; }
.who-toggle .solo-note { flex-basis: 100%; margin: 0; text-align: inherit; }
@media (min-width: 901px) { .who-toggle { justify-content: flex-end; } .who-toggle .solo-note { text-align: right; } }

/* hero call to action */
.hero-cta { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 18px; margin: 18px 0 6px; }
.hero-cta .cta { display: inline-block; padding: 14px 26px; }
.hero-how { font: 600 14px var(--body); color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.hero-fine { margin: 0; font-size: 13px; color: var(--ink3); }
.hero-fine b { color: var(--ink); }
/* buyer questions */
.faq { display: grid; gap: 8px; }
.faq details { background: var(--surface); border: 1.5px solid var(--rule); border-radius: 14px; padding: 0 14px; }
.faq summary { cursor: pointer; list-style: none; padding: 12px 0; font: 600 15px/1.35 var(--body); color: var(--ink); display: flex; justify-content: space-between; gap: 10px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-size: 18px; line-height: 1; color: var(--ink3); }
.faq details[open] summary::after { content: '\2013'; }
.faq details p { margin: 0 0 12px; font-size: 14px; line-height: 1.55; color: var(--ink2); }
.about-nat { margin-top: 14px; padding: 12px 14px; }
.about-nat p { margin: 0; font-size: 14px; line-height: 1.55; }
.about-nat .k { margin-bottom: 4px; }
.b-left { margin-left: auto; background: var(--spiced, #E67A7A); color: #1B1B1B; border-radius: 999px; padding: 2px 9px; font: 600 12px var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.time-hint { margin: -4px 0 8px; }

/* Made by Natalia: photo */
.about-nat { overflow: hidden; }
.nat-photo { display: block; width: calc(100% + 28px); max-width: none; height: 220px; object-fit: cover; object-position: 40% 30%; margin: -12px -14px 12px; }
/* Ask Natalia chat (calculator page) */
.ask-launch { position: fixed; right: 16px; bottom: 76px; z-index: 1200; display: inline-flex; align-items: center; gap: 6px; border: 0; border-radius: 999px; padding: 11px 16px; background: var(--blue); color: #fff; font: 700 14px var(--body); box-shadow: 0 4px 14px rgba(4,86,251,.35); cursor: pointer; }
.ask-launch[hidden] { display: none; }
.ask-pop { position: fixed; right: 16px; bottom: 16px; z-index: 1600; width: min(380px, calc(100vw - 32px)); height: min(560px, calc(100vh - 32px)); background: var(--surface); border: 1.5px solid #1B1B1B; border-radius: 20px; box-shadow: 0 12px 40px rgba(0,0,0,.25); display: flex; flex-direction: column; overflow: hidden; }
.ask-pop[hidden] { display: none; }
.ask-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--rule); background: var(--paper); }
.ask-head b { display: block; font: 700 15px var(--body); }
.ask-head small { font-size: 12px; color: var(--ink3); }
.ask-av { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--gold); color: #1B1B1B; font: 700 15px var(--body); flex: none; }
.ask-x { margin-left: auto; border: 0; background: none; font-size: 24px; line-height: 1; color: var(--ink2); cursor: pointer; padding: 4px 6px; }
.ask-log { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.ask-msg { max-width: 88%; padding: 9px 12px; border-radius: 14px; font-size: 14px; line-height: 1.5; }
.ask-msg.bot { align-self: flex-start; background: var(--paper); border: 1px solid var(--rule); border-bottom-left-radius: 4px; }
.ask-msg.me { align-self: flex-end; background: #1B1B1B; color: #fff; border-bottom-right-radius: 4px; }
.ask-msg a { color: var(--link); font-weight: 600; }
.ask-cta { display: inline-block; margin-top: 8px; background: var(--blue); color: #fff !important; border-radius: 999px; padding: 6px 12px; text-decoration: none; font-size: 13px; }
.ask-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ask-chip { border: 1.5px solid var(--rule); background: var(--surface); color: var(--ink); border-radius: 999px; padding: 6px 11px; font: 600 13px var(--body); cursor: pointer; text-align: left; }
.ask-chip:hover { border-color: var(--blue); color: var(--blue); }
.ask-form { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--rule); }
.ask-in { flex: 1; min-width: 0; min-height: 40px; border: 1.5px solid var(--rule); border-radius: 999px; padding: 6px 14px; font: 14px var(--body); background: var(--paper); color: var(--ink); }
.ask-in:focus { outline: none; border-color: var(--blue); }
.ask-send { width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--blue); color: #fff; font-size: 18px; cursor: pointer; }
@media (max-width: 600px) { .ask-pop { right: 8px; left: 8px; bottom: 8px; width: auto; height: min(78vh, 600px); } .ask-launch { bottom: 70px; right: 12px; padding: 10px 14px; } }
/* Zone place names: suburb, street and tappable coordinates along the strongest bearing */
.area-names { display: grid; gap: 3px; margin: 6px 0 2px; }
.arc .area-names { grid-column: 1 / -1; }
.area-names .nm-h { font: 500 12px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink3); }
.area-names .nm-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; }
.area-names .nm-km { font: 600 12px var(--mono); color: var(--ink3); min-width: 38px; }
.area-names .nm-ll { font: 500 12px var(--mono); color: var(--ink2); text-decoration: underline dotted; text-underline-offset: 2px; }
.ask-ol { margin: 6px 0; padding-left: 18px; display: grid; gap: 4px; }
/* phones: the chat launcher shrinks to a round button so it doesn't cover Map buttons */
@media (max-width: 640px) {
  .ask-launch { font-size: 0; gap: 0; width: 52px; height: 52px; padding: 0; justify-content: center; bottom: 84px; right: 12px; }
  .ask-launch span { font-size: 22px; }
}

/* ---------- phones: calculator and map ---------- */
.map-tip { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 1000; max-width: 80%; background: rgba(27,27,27,.86); color: #fff; border-radius: 14px; padding: 10px 14px; font: 600 14px/1.35 var(--body); text-align: center; pointer-events: none; }
.map-tip[hidden] { display: none; }
.map-full-btn { width: 40px; height: 40px; border-radius: 12px; border: 1.5px solid var(--rule); background: var(--surface); color: var(--ink); font: 20px/1 var(--body); display: grid; place-items: center; cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,.12); }
.mapwrap.map-full { position: fixed; inset: 0; z-index: 1700; border-radius: 0; border: 0; display: flex; flex-direction: column; }
.mapwrap.map-full #map { flex: 1 1 auto; width: 100%; height: auto; aspect-ratio: auto; min-height: 0; max-height: none; }
.mapwrap.map-full .legend { flex: 0 0 auto; padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)); }
html.map-full-open, html.map-full-open body { overflow: hidden; }
html.map-full-open .ask-launch, html.map-full-open .theme-toggle:not(.in-head) { display: none; }
.map-sheet { position: absolute; left: 8px; right: 8px; bottom: 8px; z-index: 1001; max-height: 58%; overflow: auto; -webkit-overflow-scrolling: touch; background: var(--surface); color: var(--ink); border: 1.5px solid var(--rule); border-radius: 16px; box-shadow: 0 8px 28px rgba(0,0,0,.22); padding: 14px 16px 16px; font-size: 15px; line-height: 1.5; }
.map-sheet[hidden] { display: none; }
.map-sheet-x { position: sticky; top: -6px; float: right; margin: -6px -8px 4px 8px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--paper); color: var(--ink); font: 22px/1 var(--body); cursor: pointer; }
.map-sheet .lp { max-width: none; }
.theme-toggle.in-top { position: static; width: 34px; height: 34px; font-size: 15px; flex: 0 0 auto; margin-left: 14px; }
.g-top:has(.in-top) .g-have { margin-left: auto; }
.theme-toggle.in-head { position: static; width: 36px; height: 36px; font-size: 16px; flex: 0 0 auto; }
@media (max-width: 640px) {
  html { scroll-padding-top: 72px; }
  /* the header already has Ask Natalia: no floating button over the results on phones */
  .page:has(#app:not([hidden])) ~ .ask-launch { display: none !important; }
  .top-right { gap: 10px; }
  .ask-top { padding: 7px 11px; font-size: 14px; }
  /* map */
  .mapwrap .leaflet-control-scale { display: none; }
  .mapwrap .leaflet-control-zoom a { width: 40px; height: 40px; line-height: 40px; font-size: 20px; }
  .centre-ctl { width: 40px; min-height: 40px; }
  .mapwrap .leaflet-control-attribution { font-size: 9.5px; max-width: 70%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .legend { font-size: 13px; gap: 6px 12px; }
  /* tap targets and text */
  .tog, .who-opt { min-height: 40px; padding: 8px 14px; font-size: 14px; }
  .who-lines .tog, .who-filter .tog { min-height: 38px; font-size: 13px; }
  .btn.small { min-height: 40px; padding: 8px 16px; }
  .hint, .fine, .time-hint { font-size: 13px; }
  .step h3 { font-size: 13px; }
  .eyebrow { font-size: 12px; }
  .area-names .nm-ll { display: inline-block; padding: 4px 0; font-size: 13px; }
  .ask-in, .spot-q input, input[type=search] { font-size: 16px; }
  .more > summary, details > summary { min-height: 36px; }
  /* tables become small cards: one row per card, each value with its column name */
  table.stack, table.stack tbody, table.stack tr, table.stack td { display: block; width: auto !important; }
  table.stack thead { display: none; }
  table.stack tr { padding: 10px 0; border-bottom: 1px solid var(--rule); }
  table.stack td { position: relative; padding: 3px 0 3px 39% !important; border: 0 !important; text-align: left; font-size: 14px; min-height: 22px; }
  table.stack td::before { content: attr(data-label); position: absolute; left: 0; top: 5px; width: 37%; font: 600 12px/1.4 var(--mono); letter-spacing: .03em; text-transform: uppercase; color: var(--ink3); }
  table.stack td:first-child { text-align: left; font-size: 15px; padding: 0 0 6px !important; }
  table.stack td:first-child::before { display: none; }
  table.stack .chip, table.stack .score-pill { white-space: nowrap; display: inline-flex; width: auto; }
  .tablewrap { overflow-x: visible; }
}

/* map style switch: Map / Streets / Satellite (same pill look as the centre-pin buttons) */
.base-ctl { display: flex; border-radius: 999px; overflow: hidden; border: 1.5px solid #1B1B1B; background: #fff; box-shadow: 2px 2px 0 #1B1B1B; }
.base-ctl button { border: 0; background: transparent; color: #1B1B1B; font: 600 13px var(--body); padding: 4px 11px; min-height: 32px; cursor: pointer; }
.base-ctl button + button { border-left: 1.5px solid #1B1B1B; }
.base-ctl button.on { background: #1B1B1B; color: #fff; }
@media (max-width: 640px) { .base-ctl button { min-height: 36px; padding: 4px 9px; } }

/* ---------- brand colours on the homepage (astronat.io blue and coral; the calculator keeps its own look) ---------- */
#gate .brand-name { background: var(--blue); color: #fff; }
#gate h1 .hl { color: var(--link); font-style: italic; }
#gate .st-n { background: var(--blue); color: #fff; border-color: var(--blue); }
#gate .st-card { border-top: 3px solid var(--spiced); }
#gate .st-card h3 { color: var(--link); }
#gate .st-close { background: var(--blue); color: #fff; border: 0; border-radius: var(--card-radius); padding: 26px 20px; }
#gate .st-close::before, #gate .st-close::after { content: "\2726"; color: var(--spiced); margin: 0 .5em; font-size: .6em; vertical-align: .25em; }
#gate .cmp th:last-child { background: var(--blue); color: #fff; }
#gate .cmp td:last-child { background: color-mix(in srgb, var(--blue) 9%, transparent); }
#gate .b-tag { background: var(--spiced); color: #1B1B1B; }
#gate .plan-opt.on { border-color: var(--blue); background: var(--blue); color: #fff; }
#gate .plan-opt.on small { color: rgba(255, 255, 255, .8); }
#gate .plan-opt:hover { border-color: var(--blue); }
#gate .b-was, #gate .m-buy-price s { text-decoration-color: var(--spiced); }
#gate .listing { box-shadow: 0 18px 44px -26px var(--blue); }

/* ---------- astronat.io type on the homepage: mixed-case Perfectly Nineties heads with a blue italic accent,
   coral DM Mono buttons, DM Sans for all copy ---------- */
#gate { font-family: var(--body); }
#gate h1, #gate .g-h, #gate .st-card h3, #gate .st-close { text-transform: none; letter-spacing: -.01em; text-wrap: balance; }
#gate h1 { font-size: clamp(46px, 11vw, 60px); line-height: .95; margin: 0; }
#gate .g-h { font-size: clamp(30px, 7.4vw, 36px); line-height: 1; }
#gate .st-card h3 { font-size: 24px; }
#gate .st-close { font-size: 26px; line-height: 1.1; }
#gate .hl { font-style: italic; color: var(--link); }
#gate .st-close .hl, #gate .st-close { color: #fff; }
.script-line { margin: 10px 0 0; font: 400 clamp(30px, 8vw, 40px)/.9 "Bilbo Swash Caps", "Brush Script MT", cursive; color: var(--spiced); }
.squiggle { display: block; width: 130px; height: 16px; margin: 2px 0 8px; }
#gate .cta { display: inline-flex; align-items: center; justify-content: center; gap: 10px; background: var(--spiced); color: #fff; border: 1.5px solid var(--spiced); border-radius: 4px; padding: 15px 22px; font: 500 15px/1 "DM Mono", ui-monospace, Menlo, monospace; text-transform: uppercase; letter-spacing: .05em; }
#gate .cta::after { content: "\2192"; font-family: var(--body); }
#gate .cta.ghost { background: var(--surface); color: var(--ink); border-color: var(--rule); }
#gate .cta.ghost::after { content: none; }
#gate .cta:hover { filter: brightness(.95); }
#gate .cta:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
#gate .hero-cta { display: flex; flex-wrap: wrap; gap: 10px; }
#gate #buyLink { display: flex; width: 100%; }
#gate .m-buy .cta { padding: 12px 18px; font-size: 13px; }
#gate .btn.dark { font: 500 14px/1 "DM Mono", ui-monospace, Menlo, monospace; text-transform: uppercase; letter-spacing: .05em; border-radius: 4px; }
@media (min-width: 900px) {
  #gate h1 { font-size: clamp(60px, 6.2vw, 88px); }
  #gate .g-h { font-size: clamp(36px, 3.4vw, 48px); }
  #gate .st-card h3 { font-size: 28px; }
  #gate .st-close { font-size: 34px; }
}
@media (min-width: 900px) { #gate .hero-cta .cta { padding: 14px 16px; font-size: 13px; } }
@media (max-width: 480px) { #gate .hero-cta .cta { width: 100%; } }

/* ---------- astronat.io type and colour on the calculator: same rules as the homepage ---------- */
#app { --dmmono: "DM Mono", ui-monospace, Menlo, monospace; font-family: var(--body); }
#app .panel-title { font: 400 clamp(40px, 10vw, 48px)/.95 var(--nineties); text-transform: none; letter-spacing: -.01em; margin: 0; }
#app .hl { font-style: italic; color: var(--link); }
#app .panel-script { font-size: 30px; margin-top: 6px; }
#app .panel-squiggle { width: 110px; height: 14px; margin: 5px 0 12px; }
#app .panel-head .script-line { margin-bottom: 0; }
#app .eyebrow { font-family: var(--dmmono); font-weight: 500; }
#app .panel > .eyebrow::before, #app .intro .eyebrow::before { content: "\2726"; color: var(--spiced); margin-right: 7px; }
#app .step h3, #app .detail-h { font-family: var(--dmmono); font-weight: 500; }
#app .panel .step .n { background: var(--blue); color: #fff; border-color: var(--blue); }
#app .t3-h, #app .compare h2, #app .top3 > h2 { font: 400 28px/1.02 var(--nineties); text-transform: none; letter-spacing: -.01em; text-wrap: balance; }
#app .t3-from { display: block; font: 500 13px/1.3 var(--body); color: var(--ink2); margin-top: 4px; }
#app .btn { font: 500 14px/1.2 var(--dmmono); text-transform: uppercase; letter-spacing: .05em; border-radius: 4px; }
#app .btn:not(.secondary):not(.dark) { background: var(--spiced); border-color: var(--spiced); color: #fff; }
#app .btn.big { font-size: 15px; min-height: 52px; }
#app .btn.big::after { content: "\2192"; font-family: var(--body); margin-left: 4px; }
#app .btn.secondary { border-color: var(--rule); background: var(--surface); }
#app .btn.secondary:hover { border-color: var(--ink); background: var(--surface); color: var(--ink); }
#app .btn.small { font-size: 12px; }
#app .btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
#app .who-opt.on, #app .tog.on { background: var(--blue); border-color: var(--blue); color: #fff; }
@media (min-width: 900px) { #app .panel-title { font-size: 52px; } #app .t3-h, #app .compare h2, #app .top3 > h2 { font-size: 32px; } }
@media (max-width: 640px) { .base-ctl button { font-size: 12px; padding: 4px 8px; min-height: 30px; } }

.terms-note { text-align: center; margin: 4px 0 0; }
.terms-note a, .foot-links a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.foot-links { margin: 6px 0 0; }
.foot-links .nw { white-space: nowrap; }

/* ---------- Pro (agents) tools in the calculator ---------- */
.pro-bar { border: 1.5px solid var(--blue); border-radius: 14px; padding: 12px 14px; margin-top: 10px; display: grid; gap: 10px; background: color-mix(in srgb, var(--blue) 5%, var(--surface)); }
.pro-tag { margin: 0; font: 500 12px/1 "DM Mono", ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--link); }
.pro-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pro-row label { font-weight: 600; font-size: 13px; }
.pro-row select { flex: 1 1 200px; min-width: 0; }
.pro-brand summary { cursor: pointer; font-weight: 600; font-size: 13px; color: var(--link); }
.pro-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0 12px; margin-top: 8px; }
.rp-prep { margin: 4px 0 0; font-size: 12px; color: var(--ink2); }
@media (min-width: 901px) { .panel > #proBar { grid-column: 1 / -1; grid-row: 7; } }

/* ---------- Home Finder Pro page ---------- */
@media (min-width: 900px) { .st-cards.st-cards-6 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 560px) and (max-width: 899px) { .st-cards.st-cards-6 { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Home Finder Pro: the brand palette (cream, ink, blue, coral), a step more refined ---------- */
body.pro-page .page { background: radial-gradient(900px 480px at 92% -8%, rgba(4, 86, 251, .09), transparent 62%), radial-gradient(700px 420px at -8% 38%, rgba(230, 122, 122, .07), transparent 60%), var(--paper); }
body.pro-page #gate .brand-name { background: transparent; color: var(--blue); border: 1px solid var(--blue); font: 500 12px/1 "DM Mono", ui-monospace, monospace; letter-spacing: .1em; text-transform: uppercase; padding: 8px 12px; }
body.pro-page #gate .g-chips .chip { background: transparent; border-color: var(--rule); font-weight: 500; }
body.pro-page .pro-num { font: 500 13px/1 "DM Mono", ui-monospace, monospace; letter-spacing: .1em; color: var(--spiced); margin-bottom: 14px; }
body.pro-page .pro-mark { color: var(--spiced); font-size: 13px; line-height: 1.6; }
body.pro-page #gate .st-card { border-top: 2px solid var(--blue); box-shadow: 0 18px 40px -32px rgba(4, 86, 251, .45); }
body.pro-page #gate .st-card h3 { color: var(--ink); }
body.pro-page .buycard { border: 1.5px solid var(--blue); box-shadow: 0 30px 70px -38px rgba(4, 86, 251, .55); }
body.pro-page .listing { box-shadow: 0 30px 70px -36px rgba(4, 86, 251, .5); }
.pro-stats { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); margin: 8px 0; }
.pro-stats div { padding: 22px 12px; text-align: center; display: grid; gap: 6px; }
.pro-stats div + div { border-left: 1px solid var(--rule); }
.pro-stats b { font: 400 clamp(40px, 6vw, 56px)/1 var(--nineties); color: var(--ink); }
.pro-stats span { font: 500 12px/1.3 "DM Mono", ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--link); }
@media (max-width: 600px) { .pro-stats { grid-template-columns: repeat(2, 1fr); } .pro-stats div:nth-child(3) { border-left: 0; } .pro-stats div:nth-child(n+3) { border-top: 1px solid var(--rule); } }

/* Pro tools inside the calculator: a light workspace bar edged in brand blue */
.pro-bar { box-shadow: 0 16px 40px -30px rgba(4, 86, 251, .6); }
.pro-bar .pro-tag::before { content: "\2726"; color: var(--spiced); margin-right: 6px; }
body.pro-page #gate .brand-name { white-space: nowrap; }
@media (max-width: 420px) { body.pro-page #gate .brand-name { font-size: 12px; letter-spacing: .05em; padding: 7px 10px; max-width: 100%; } }
@media (max-width: 359px) { body.pro-page #gate .brand-name { font-size: 12px; letter-spacing: .03em; padding: 6px 9px; } }
body.pro-page .about-nat p { color: var(--ink2); } body.pro-page .about-nat b { color: var(--ink); }

/* Pro page: "The cost of a wrong fit" comparison */
.pc-wrap { overflow-x: auto; }
.pc-table { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--surface); border: 1.5px solid var(--rule); border-radius: var(--card-radius); overflow: hidden; font-size: 14px; }
.pc-table th, .pc-table td { padding: 14px 16px; text-align: left; vertical-align: top; border-top: 1px solid var(--rule); line-height: 1.5; }
.pc-table thead th { border-top: 0; font: 500 12px/1.2 "DM Mono", ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--ink3); }
.pc-table thead th.pc-no { background: color-mix(in srgb, var(--spiced) 16%, transparent); color: #9b3b3b; }
.pc-table thead th.pc-yes { background: var(--blue); color: #fff; }
.pc-table tbody th { font: 400 21px/1.1 var(--nineties); text-transform: none; letter-spacing: -.005em; color: var(--ink); width: 24%; }
.pc-table td.pc-no { color: var(--ink2); background: color-mix(in srgb, var(--spiced) 5%, transparent); width: 36%; }
.pc-table td.pc-yes { color: var(--ink); background: color-mix(in srgb, var(--blue) 6%, transparent); width: 40%; }
.pc-ico { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; font-size: 12px; font-weight: 700; margin-right: 8px; vertical-align: 1px; }
.pc-no .pc-ico { background: var(--spiced); color: #fff; }
.pc-yes .pc-ico { background: var(--blue); color: #fff; }
.pc-sum { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 4px; }
.pc-sum div { border: 1.5px solid var(--blue); border-radius: 14px; padding: 16px; text-align: center; display: grid; gap: 4px; background: var(--surface); }
.pc-sum b { font: 400 30px/1 var(--nineties); color: var(--link); font-style: italic; }
.pc-sum span { font: 500 12px/1.3 "DM Mono", ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--ink2); }
@media (max-width: 700px) {
  .pc-table, .pc-table tbody, .pc-table tr, .pc-table th, .pc-table td { display: block; width: auto !important; }
  .pc-table thead { display: none; }
  .pc-table tr { border-top: 1px solid var(--rule); padding: 4px 0; }
  .pc-table tr:first-child { border-top: 0; }
  .pc-table tbody th { border-top: 0; padding-bottom: 6px; }
  .pc-table td { border-top: 0; margin: 0 10px 8px; border-radius: 10px; }
  .pc-sum { grid-template-columns: 1fr; }
}

/* ---------- compact, sleek landing pages (personal and Pro): tighter rhythm, smaller display type, hairline borders ---------- */
#gate { --card-radius: 14px; }
#gate .card, #gate .st-card, #gate .listing, #gate .faq details, #gate .cmp, #gate .pc-table { border-width: 1px; }
#gate h1 { font-size: clamp(40px, 10.5vw, 48px); }
#gate .script-line { font-size: clamp(24px, 6.5vw, 30px); margin-top: 6px; }
#gate .squiggle { width: 104px; height: 13px; margin: 0 0 6px; }
#gate .lede { font-size: 15px; line-height: 1.55; }
#gate .g-h { font-size: clamp(26px, 6.8vw, 30px); }
#gate .st-lede { font-size: 14px; }
#gate .st-list li { padding: 8px 0; font-size: 14px; }
#gate .st-card { padding: 14px 16px; }
#gate .st-card .st-ico { font-size: 18px; margin-bottom: 6px; }
#gate .st-card h3 { font-size: 21px; margin-bottom: 8px; }
#gate .st-card p:last-child { font-size: 13px; }
#gate .pro-num { margin-bottom: 8px; }
#gate .st-close { font-size: 21px; padding: 16px 18px; }
#gate .cta { padding: 13px 18px; font-size: 13px; }
#gate .faq summary { padding: 10px 0; font-size: 14px; }
#gate .cmp td { padding: 7px 10px; }
#gate .pc-table th, #gate .pc-table td { padding: 10px 14px; font-size: 14px; }
#gate .pc-table tbody th { font-size: 18px; }
#gate .pc-sum div { padding: 10px; }
#gate .pc-sum b { font-size: 24px; }
#gate .g-chips { margin-top: 8px; }
#gate .g-chips .chip { font-size: 12px; padding: 2px 9px; }
.pro-stats div { padding: 14px 10px; }
.pro-stats b { font-size: clamp(32px, 5vw, 42px); }
@media (max-width: 899px) { #gate.gate { gap: 22px; } }
@media (min-width: 900px) {
  #gate .g-row { padding: 30px 0; column-gap: 48px; }
  #gate .g-row.g-hero { padding-top: 14px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  #gate h1 { font-size: clamp(52px, 5vw, 70px); }
  #gate .g-h { font-size: clamp(30px, 2.8vw, 38px); }
  #gate .st-card h3 { font-size: 22px; }
  #gate .st-close { font-size: 26px; }
  #gate .l-map { height: 260px; }
  #gate .hero-cta .cta { padding: 13px 15px; font-size: 13px; }
  #gate .st-cards { gap: 10px; }
}

/* Pro page "at a glance": four tiles instead of a ruled strip; they rise in, the numbers count up and a brand bar draws across */
#gate .pro-stats { gap: 10px; border: 0; margin: 4px 0; }
#gate .pro-stats div, #gate .pro-stats div + div, #gate .pro-stats div:nth-child(n+3) { position: relative; overflow: hidden; border: 1px solid var(--rule); border-radius: 14px; background: var(--surface); padding: 20px 10px 18px; gap: 8px; }
#gate .pro-stats div::before { content: ""; position: absolute; left: 0; top: 0; height: 3px; width: 100%; background: linear-gradient(90deg, var(--blue), var(--spiced)); transform-origin: left; }
#gate .pro-stats b { font-variant-numeric: tabular-nums; }
#gate .pro-stats + .g-row { border-top: 0; }
#gate .pro-stats.anim div { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s cubic-bezier(.2, .7, .2, 1); }
#gate .pro-stats.anim div::before { transform: scaleX(0); transition: transform .9s cubic-bezier(.2, .7, .2, 1) .25s; }
#gate .pro-stats.anim.in div { opacity: 1; transform: none; }
#gate .pro-stats.anim.in div::before { transform: scaleX(1); }
#gate .pro-stats.anim div:nth-child(2), #gate .pro-stats.anim div:nth-child(2)::before { transition-delay: .1s; }
#gate .pro-stats.anim div:nth-child(3), #gate .pro-stats.anim div:nth-child(3)::before { transition-delay: .2s; }
#gate .pro-stats.anim div:nth-child(4), #gate .pro-stats.anim div:nth-child(4)::before { transition-delay: .3s; }
#gate .pro-stats div:hover { border-color: color-mix(in srgb, var(--blue) 40%, var(--rule)); }
@media (prefers-reduced-motion: reduce) { #gate .pro-stats.anim div, #gate .pro-stats.anim div::before { transition: none; } }

/* every button and CTA in DM Sans, same face as the copy; caps and spacing stay so they still read as buttons */
#app .btn, #gate .cta, #gate .btn, #gate .btn.dark, .btn { font-family: var(--body); font-weight: 600; letter-spacing: .06em; }
/* small labels in DM Sans caps (not DM Mono): stats, table heads, eyebrows, step labels. */
.pro-stats span, #gate .pro-stats span, .pc-sum span, .pc-table thead th, .pro-tag, body.pro-page #gate .brand-name, body.pro-page .pro-num, #gate .pro-num,
#app .eyebrow, #app .step h3, #app .detail-h { font-family: var(--body); font-weight: 600; }
.pro-stats span, .pc-sum span, .pc-table thead th { letter-spacing: .1em; font-size: 12px; }

/* street addresses on recommended areas and lifestyle places */
.area-names .nm-addr { color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 3px; }
.area-names .nm-addr:hover { color: var(--link); text-decoration-color: currentColor; }
.sp-addr { display: block; font-size: 13px; color: var(--ink2); }
.sp-addr:empty { display: none; }

/* strongest & weakest planets */
.pr-who { font: 600 15px var(--body); margin: 14px 0 6px; }
.pr-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
@media (min-width: 760px) { .pr-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.pr-col-h { margin: 0 0 6px; font: 600 12px var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--ink3); }
.pr { border-top: 1px solid var(--rule); padding: 10px 0 12px; }
.pr-head { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 15px; }
.pr-glyph { font-size: 18px; }
.pr-tag { margin-left: auto; font: 600 12px var(--body); letter-spacing: .08em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; }
.is-strong .pr-tag { background: var(--good); color: var(--on-fill); }
.is-weak .pr-tag { background: var(--avoid); color: var(--on-fill); }
.pr-why { margin: 4px 0 6px; font-size: 13px; color: var(--ink2); }
.pr-k { margin: 0 0 4px; font: 600 12px var(--body); letter-spacing: .08em; text-transform: uppercase; color: var(--ink3); }
.pr-ends { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.pr-ends li { display: grid; gap: 1px; font-size: 13px; }
.pr-dir { font-weight: 600; } .pr-dir small { color: var(--ink3); font-weight: 500; }
.pr-house { font-size: 12px; color: var(--link); }
.pr-read { color: var(--ink2); line-height: 1.45; }

/* map layer tabs: soft fade on the right while more tabs are off screen */
.mapbar.more { -webkit-mask-image: linear-gradient(90deg, #000 78%, transparent); mask-image: linear-gradient(90deg, #000 78%, transparent); }
/* a visible way to the hidden tabs: a round arrow on the faded edge */
.mapbar-wrap { position: relative; }
.mapbar-next { position: absolute; right: 0; top: 1px; width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid var(--rule); background: var(--surface); color: var(--ink); font: 700 16px/1 var(--body); display: grid; place-items: center; cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,.08); }
.mapbar-next[hidden] { display: none; }
.mapbar-next:hover { border-color: var(--ink3); }

/* planets card on phones: direction and house on one line, degrees tucked away, tighter rhythm */
@media (max-width: 600px) {
  .pr { padding: 8px 0 10px; }
  .pr-k { display: none; }
  .pr-why { margin: 2px 0 6px; }
  .pr-ends { gap: 5px; }
  .pr-ends li { display: block; }
  .pr-dir small { display: none; }
  .pr-dir::after { content: " · "; color: var(--ink3); font-weight: 400; }
  .pr-house { font-size: 13px; }
  .pr-read { display: block; }
}

/* ---------- cleaner results: headline first, detail one tap away ---------- */
/* top area cards: one address up front; the bearing and the 10 km address live in "Why this area" */
.area-names.compact .nm-h, .area-names.compact .nm-row + .nm-row { display: none; }
.area-names.compact { margin: 4px 0 0; }
/* planets: one row each, tap to open */
details.pr { border-top: 1px solid var(--rule); padding: 0; }
details.pr > summary.pr-head { list-style: none; cursor: pointer; padding: 10px 0; display: flex; align-items: center; gap: 8px; }
details.pr > summary::-webkit-details-marker { display: none; }
details.pr > summary::after { content: "+"; color: var(--ink3); font-size: 16px; width: 14px; text-align: center; }
details.pr[open] > summary::after { content: "\2013"; }
.pr-lead { flex: 1; min-width: 0; font-size: 13px; color: var(--ink3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
details.pr .pr-tag { margin-left: 0; }
details.pr[open] { padding-bottom: 10px; }
details.pr[open] .pr-lead { visibility: hidden; }
/* "Bought your home?": one line until opened */
details.home-set > summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
details.home-set > summary::-webkit-details-marker { display: none; }
details.home-set > summary .link { font: 500 13px var(--body); text-transform: none; letter-spacing: 0; color: var(--link); text-decoration: underline; }
details.home-set[open] > summary .link { display: none; }
.compare-hint { margin: 4px 2px 0; font-size: 13px; color: var(--ink3); }
details.home-set > summary { justify-content: flex-start; }
details.home-set > summary .link { margin-right: auto; }
@media (max-width: 640px) {
  details.home-set > summary { white-space: nowrap; letter-spacing: .04em; gap: 6px; }
  details.home-set > summary .link { font-size: 13px; }
}
@media (max-width: 374px) {
  .sec-meta { display: none; }
  details.home-set { padding: 10px 12px; }
  details.home-set > summary { font-size: 12px; letter-spacing: .02em; gap: 4px; }
  details.home-set > summary .link { font-size: 12px; }
}


/* bad-match table: on phones, two tabs pick which side shows; desktop keeps both columns */
.pc-tabs { display: none; }
@media (max-width: 700px) {
  .pc-tabs { position: sticky; top: 8px; z-index: 5; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; margin-bottom: 8px; background: var(--surface); border: 1px solid var(--rule); border-radius: 999px; box-shadow: 0 4px 14px -8px rgba(0,0,0,.18); }
  .pc-tab { display: inline-flex; align-items: center; justify-content: center; gap: 0; min-height: 40px; border: 0; border-radius: 999px; background: transparent; color: var(--ink2); font: 600 14px/1.2 var(--body); cursor: pointer; }
  .pc-tab .pc-ico { width: 18px; height: 18px; font-size: 12px; }
  .pc-tab .pc-ico { background: color-mix(in srgb, var(--ink3) 30%, transparent); color: var(--ink2); }
  .pc-tab.no[aria-selected="true"] .pc-ico { background: var(--spiced); color: #fff; }
  .pc-tab.no[aria-selected="true"] { background: color-mix(in srgb, var(--spiced) 16%, var(--surface)); color: #9b3b3b; }
  .pc-tab.yes[aria-selected="true"] { background: var(--blue); color: #fff; }
  .pc-tab.yes[aria-selected="true"] .pc-ico { background: #fff; color: var(--blue); }
  .pc-table.show-no td.pc-yes, .pc-table.show-yes td.pc-no { display: none; }
}

/* first-run tour: the step's target is lit, everything else dims; the note sits at the foot of the screen */
.tour-lit { position: relative; z-index: 2001; border-radius: 14px; box-shadow: 0 0 0 3px var(--blue), 0 0 0 9999px rgba(18, 18, 28, .55); }
.tour { position: fixed; z-index: 2002; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); width: min(420px, calc(100% - 32px));
  background: var(--surface); color: var(--ink); border-radius: 16px; padding: 14px 16px 12px; box-shadow: 0 12px 32px rgba(0,0,0,.28); }
.tour-n { margin: 0 0 2px; font: 600 12px/1.2 var(--body); letter-spacing: .08em; text-transform: uppercase; color: var(--ink3); }
.tour h3 { margin: 0 0 4px; font: 400 22px/1.15 var(--nineties); }
.tour p:not(.tour-n) { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ink2); }
.tour-btns { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; }
.t3-how .link { font: inherit; padding: 0; }

/* ---------- 44px tap targets ----------
   Small controls keep their look: an invisible 44px hit area reaches past the edge. Chunkier ones just get taller. */
.brand, .ask-top, #signOut, .g-top a, .legend-more > summary { position: relative; }
/* the floating toggle's fixed offsets must not apply once it sits in a header */
.theme-toggle.in-head, .theme-toggle.in-top { position: relative; right: auto; bottom: auto; }
.brand::before, .ask-top::before, #signOut::before, .g-top a::before, .legend-more > summary::before {
  content: ""; position: absolute; left: -6px; right: -6px; top: 50%; height: 44px; transform: translateY(-50%); }
.theme-toggle.in-head::before, .theme-toggle.in-top::before { content: ""; position: absolute; inset: -5px; }
#gate .cta, .btn.big { min-height: 44px; }
.tour-btns .btn, .tour-btns .link { min-height: 44px; }
@media (max-width: 900px) {
  .who-opt { min-height: 44px; }
  .faq summary, #gate .faq summary { min-height: 44px; align-items: center; }
  .area3-foot .more > summary { display: inline-flex; align-items: center; min-height: 44px; }
}

/* a second line under a closed row's title */
.sec-sub { display: block; margin: 2px 0 0 31px; font: 400 12px/1.4 var(--body); color: var(--ink2); white-space: normal; letter-spacing: 0; }
@media (max-width: 640px) { .sec-sub { margin-left: 27px; } }

/* phones and tablets: optional fields fold away below the Find button */
.fine-tune { margin-top: 12px; }
.fine-tune > summary { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 14px; border: 1.5px dashed var(--rule); border-radius: 14px; cursor: pointer; list-style: none; font: 600 14px var(--body); color: var(--ink); }
.fine-tune > summary::-webkit-details-marker { display: none; }
.fine-tune > summary small { margin-right: auto; font: 500 12px var(--body); color: var(--ink2); }
.fine-tune > summary::after { content: '\203A'; font-size: 22px; line-height: 1; color: var(--ink3); transform: rotate(90deg); transition: transform .15s; }
.fine-tune[open] > summary::after { transform: rotate(-90deg); }
.fine-tune > summary:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.fine-tune .ft-opts { --tint: var(--fill-yellow); }
.fine-tune .step { margin-top: 10px; }

/* phones: Find button clear of the box above it; the Pro eyebrow pill may take two lines at the 12px minimum */
@media (max-width: 900px) { #runBtn { margin-top: 12px; } }
@media (max-width: 520px) { body.pro-page #gate .brand-name { white-space: normal; text-align: left; line-height: 1.35; border-radius: 18px; letter-spacing: .04em; padding: 7px 12px; } }

/* every <small> is at least the 12px caption size */
small { font-size: 12px; }

/* more 44px tap areas on phones: the visible control stays as it is where it can */
.area-names .nm-addr, .spot-try .link, .mapbar-next { position: relative; }
.area-names .nm-addr::before, .spot-try .link::before { content: ""; position: absolute; left: 0; right: 0; top: -13px; bottom: -13px; }
.mapbar-next::before { content: ""; position: absolute; inset: -6px; }
@media (max-width: 900px) {
  input:not([type=checkbox]):not([type=hidden]), select { min-height: 44px; }
  details.adv > summary { display: flex; align-items: center; min-height: 44px; }
  summary.spot-head { min-height: 44px; display: flex; align-items: center; }
  .btn, .pc-tab { min-height: 44px; }
}
#gate .btn { min-height: 44px; }

@media (max-width: 900px) { #app .btn, #app .btn.small { min-height: 44px; } }
.t3-how .link, .home-acts .link { position: relative; }
.t3-how .link::before, .home-acts .link::before { content: ""; position: absolute; left: -4px; right: -4px; top: -12px; bottom: -12px; }
.faq summary, #gate .faq summary { min-height: 44px; align-items: center; }

.lede { text-wrap: pretty; }

#signOut { white-space: nowrap; }
/* the smallest phones: the AstroNat word gives way to its mark so Ask Natalia, Sign out and the toggle all fit */
@media (max-width: 340px) { .brand { font-size: 0; gap: 0; } .brand-mark { font-size: 19px; } }

/* phones, personal page: the buy bar shows both plans, each with its own price and checkout link */
@media (max-width: 900px) {
  #gate .m-buy-two { gap: 10px; }
  #gate .m-buy-two .m-opt { flex: 1; min-width: 0; display: grid; justify-items: center; align-content: center; gap: 4px; padding: 8px 10px; min-height: 52px; line-height: 1; }
  #gate .m-buy-two .m-opt::after { content: none; }
  #gate .m-opt .m-lab { font: 600 12px/1 var(--body); letter-spacing: .08em; text-transform: uppercase; }
  #gate .m-opt .m-pr { display: inline-flex; align-items: baseline; gap: 6px; font: 400 24px/1 var(--nineties); letter-spacing: 0; text-transform: none; }
  #gate .m-opt .m-pr b { font-weight: 400; }
  #gate .m-opt .m-pr s { font-size: 14px; opacity: .75; text-decoration-color: currentColor; }
  .page:has(#gate:not([hidden])) ~ .theme-toggle { bottom: calc(90px + env(safe-area-inset-bottom, 0px)); }
}

/* Buy cards: live countdown while the launch price lasts (personal and Pro) */
.b-cd { display: grid; gap: 8px; padding: 12px 14px; border: 1px solid var(--rule); border-radius: 12px; background: var(--paper); }
.b-cd[hidden] { display: none; }
.b-cd-l { font: 600 12px/1 var(--body); letter-spacing: .08em; text-transform: uppercase; color: var(--ink2); }
.b-cd-r { display: flex; }
.b-cd .u { flex: 1; display: grid; justify-items: center; gap: 3px; border-left: 1px solid var(--rule); }
.b-cd .u:first-child { border-left: 0; }
.b-cd b { font: 400 30px/1 var(--nineties); font-variant-numeric: tabular-nums; color: var(--ink); }
.b-cd i { font: 500 12px/1.2 var(--body); font-style: normal; color: var(--ink2); }