/* Saju Compass — modern wellness, not a fortune-teller's tent.
   Deep indigo ground, warm gold accents, generous type. */

:root {
  --bg:        #121214;
  --bg-soft:   #1A1A1D;
  --card:      #1E1E21;
  --line:      #2E2E32;
  --ink:       #EDE9F7;
  --ink-dim:   #A79FC4;
  --gold:      #E8C07D;
  --gold-deep: #C79B52;
  --radius:    18px;
  --maxw:      760px;
  --maxw-hub:  940px;
  --cats-h:    54px;   /* height of the sticky category bar */
}

* { box-sizing: border-box; }

body {
  margin: 0;
  /* Stars are CSS dots, not the photo — a raster starfield gets upscaled
     by `cover` on wide viewports until the dots read as snow. Dots tiled
     at a fixed px size stay the same size at any screen width. */
  background-image:
    /* bright foreground stars, 220px tile */
    radial-gradient(1.5px 1.5px at 15% 20%, rgba(237,233,247,.9), transparent 60%),
    radial-gradient(1px 1px at 60% 8%, rgba(237,233,247,.6), transparent 60%),
    radial-gradient(1.5px 1.5px at 85% 35%, rgba(237,233,247,.7), transparent 60%),
    radial-gradient(1px 1px at 32% 55%, rgba(237,233,247,.5), transparent 60%),
    radial-gradient(1.5px 1.5px at 6% 78%, rgba(237,233,247,.8), transparent 60%),
    radial-gradient(1px 1px at 72% 68%, rgba(237,233,247,.55), transparent 60%),
    radial-gradient(1.5px 1.5px at 45% 92%, rgba(237,233,247,.6), transparent 60%),
    radial-gradient(1px 1px at 93% 85%, rgba(237,233,247,.5), transparent 60%),
    radial-gradient(1.5px 1.5px at 24% 40%, rgba(237,233,247,.75), transparent 60%),
    radial-gradient(1px 1px at 50% 62%, rgba(237,233,247,.5), transparent 60%),
    radial-gradient(1.5px 1.5px at 78% 15%, rgba(237,233,247,.8), transparent 60%),
    radial-gradient(1px 1px at 10% 5%, rgba(237,233,247,.55), transparent 60%),
    /* dimmer background stars, smaller 140px tile for extra density */
    radial-gradient(1px 1px at 20% 30%, rgba(237,233,247,.4), transparent 60%),
    radial-gradient(0.8px 0.8px at 65% 12%, rgba(237,233,247,.35), transparent 60%),
    radial-gradient(1px 1px at 88% 50%, rgba(237,233,247,.4), transparent 60%),
    radial-gradient(0.8px 0.8px at 40% 70%, rgba(237,233,247,.3), transparent 60%),
    radial-gradient(1px 1px at 8% 60%, rgba(237,233,247,.4), transparent 60%),
    radial-gradient(0.8px 0.8px at 55% 90%, rgba(237,233,247,.3), transparent 60%),
    radial-gradient(1px 1px at 95% 78%, rgba(237,233,247,.4), transparent 60%),
    radial-gradient(0.8px 0.8px at 30% 5%, rgba(237,233,247,.35), transparent 60%),
    radial-gradient(600px 320px at 50% 0%, rgba(120, 90, 200, .18), transparent 70%),
    linear-gradient(rgba(6, 6, 10, .82), rgba(6, 6, 10, .82)),
    url("/static/img/milkyway.jpg");
  background-repeat:
    repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat,
    repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat,
    no-repeat, no-repeat, no-repeat;
  background-position:
    0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0,
    0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0,
    center, center, center;
  background-size:
    220px 220px, 220px 220px, 220px 220px, 220px 220px, 220px 220px, 220px 220px, 220px 220px, 220px 220px, 220px 220px, 220px 220px, 220px 220px, 220px 220px,
    140px 140px, 140px 140px, 140px 140px, 140px 140px, 140px 140px, 140px 140px, 140px 140px, 140px 140px,
    auto, cover, cover;
  background-attachment:
    fixed, fixed, fixed, fixed, fixed, fixed, fixed, fixed, fixed, fixed, fixed, fixed,
    fixed, fixed, fixed, fixed, fixed, fixed, fixed, fixed,
    fixed, fixed, fixed;
  background-color: var(--bg);
  color: var(--ink);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  position: relative;
}

h1, h2, h3 { font-family: Fraunces, Georgia, serif; font-weight: 600; line-height: 1.18; }
h1 { font-size: clamp(2rem, 5.5vw, 3.1rem); margin: 0 0 .5em; letter-spacing: -.01em; }
h2 { font-size: 1.5rem; margin: 0 0 .7em; }
h3 { font-size: 1.08rem; margin: 0 0 .4em; }
em { font-style: italic; color: var(--gold); }
a { color: var(--gold); }

header.site {
  display: flex; justify-content: center; align-items: center;
  max-width: var(--maxw); margin: 0 auto; padding: 20px 20px 14px;
}
.brand {
  font-family: Fraunces, serif; font-size: 1.12rem; font-weight: 600;
  color: var(--ink); text-decoration: none; letter-spacing: .01em;
}
.brand .mark { color: var(--gold); margin-right: 4px; }

/* ---- category bar ----
   Sticky and always showing all four services, so a visitor deep inside one
   of them can cross to another without going back. On a phone the row scrolls
   sideways rather than wrapping or collapsing into a menu — a hidden category
   is the problem this bar exists to solve. */
nav.cats {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--line);
}
@supports not (backdrop-filter: blur(4px)) { nav.cats { background: var(--bg); } }

.cats-inner {
  display: flex; gap: 7px;
  max-width: var(--maxw); margin: 0 auto; padding: 9px 20px;
  overflow-x: auto; overscroll-behavior-x: contain;
  scrollbar-width: none; -ms-overflow-style: none;
}
.cats-inner::-webkit-scrollbar { display: none; }

/* Centred only where all four fit. Centring a flex row that overflows puts
   its first item past the left edge with no way to scroll back to it. */
@media (min-width: 701px) { .cats-inner { justify-content: center; } }

/* Fade whichever edge still has services behind it, so a phone shows that the
   row keeps going. Set by forms.js; absent means everything already fits. */
.cats-inner[data-edge="end"]   { mask-image: linear-gradient(90deg, #000 82%, transparent 100%); }
.cats-inner[data-edge="start"] { mask-image: linear-gradient(90deg, transparent 0, #000 18%); }
.cats-inner[data-edge="both"]  { mask-image: linear-gradient(90deg, transparent 0, #000 15%, #000 85%, transparent 100%); }
.cats-inner[data-edge="end"]   { -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent 100%); }
.cats-inner[data-edge="start"] { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 18%); }
.cats-inner[data-edge="both"]  { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 15%, #000 85%, transparent 100%); }

.cat {
  flex: 0 0 auto;
  padding: 9px 17px; border-radius: 999px;
  border: 1px solid transparent;
  font-size: .96rem; font-weight: 500; line-height: 1.2;
  color: var(--ink-dim); text-decoration: none; white-space: nowrap;
  transition: color .12s ease, background .12s ease, border-color .12s ease;
}
.cat:hover { color: var(--ink); background: var(--bg-soft); border-color: var(--line); }
.cat.on {
  color: #241B06; background: var(--gold); border-color: var(--gold);
  font-weight: 600;
}

main { max-width: var(--maxw); margin: 0 auto; padding: 0 20px 80px; }

.eyebrow {
  text-transform: uppercase; letter-spacing: .17em; font-size: .7rem;
  color: var(--gold); font-weight: 600; margin: 0 0 12px;
}

.hero { padding: 40px 0 34px; text-align: center; }
.hero .sub { color: var(--ink-dim); font-size: 1.06rem; max-width: 33em; margin: 0 auto; }

/* ---- cards ---- */
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 30px;
  margin: 22px 0;
}
.form-card { padding: 30px 28px 26px; }

/* ---- form ---- */
.row { display: flex; gap: 16px; }
.row > * { flex: 1; min-width: 0; }
@media (max-width: 620px) { .row { flex-direction: column; } }

.field { display: block; margin-bottom: 18px; position: relative; }
.field > span {
  display: block; font-size: .82rem; font-weight: 600;
  color: var(--ink-dim); margin-bottom: 7px; letter-spacing: .02em;
}
.field > span em { color: var(--ink-dim); opacity: .7; font-weight: 400; }
.field small { display: block; margin-top: 7px; font-size: .78rem; color: var(--ink-dim); opacity: .8; }

input[type=text], input[type=date], input[type=time], input[type=email], select {
  width: 100%; padding: 12px 14px;
  background: var(--bg-soft); color: var(--ink);
  border: 1px solid var(--line); border-radius: 11px;
  font: inherit; font-size: .98rem;
}

/* The native dropdown arrow all but vanishes on a dark background, so the
   control stops reading as clickable. Draw our own. */
select {
  appearance: none; -webkit-appearance: none;
  background-image:
    url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%23E8C07D' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 34px;
  border-color: #3A3168;
  cursor: pointer;
}
select:hover { border-color: var(--gold-deep); }
select option { background: var(--bg-soft); color: var(--ink); }
input:focus, select:focus {
  outline: none; border-color: var(--gold-deep);
  box-shadow: 0 0 0 3px rgba(232,192,125,.14);
}
input:disabled { opacity: .4; }

.check {
  display: flex; align-items: center; gap: 8px;
  margin-top: 9px; font-size: .82rem; color: var(--ink-dim); cursor: pointer;
}
.check input { accent-color: var(--gold); }

/* ---- birth time: labelled columns + an AM/PM toggle ----
   Never <input type="time"> (its AM/PM segment is invisible and blocks
   submission), and never a dropdown for AM/PM (testers could not tell what
   the box wanted). */
/* ---- birth date: three labelled selects, never <input type=date> ----
   The native picker reads as finished after mm/dd, leaving the year — the
   segment furthest from its default — silently empty. Months are spelled
   out so mm/dd and dd/mm readers cannot misread each other. */
.date-row, .time-row { display: flex; align-items: stretch; gap: 8px; }
.dcol, .tcol { flex: 1; min-width: 0; }
.dcol-month { flex: 1.5; }
.dcol select, .tcol select { width: 100%; padding: 13px 30px 13px 14px; }

/* The empty option is a label, not a value — read it as placeholder text. */
.dcol select:invalid, .tcol select.is-empty,
.dcol select.is-empty { color: var(--ink-dim); }

.d-hint, .t-hint {
  display: block; margin-top: 8px;
  font-size: .78rem; color: var(--ink-dim); opacity: .85;
}
.dcol option[hidden] { display: none; }
.tcol-ampm { flex: 1.2; }

.seg { display: flex; gap: 6px; }
.seg-btn { flex: 1; cursor: pointer; }
/* Visually hidden but still in the accessibility tree and still focusable.
   width:0/height:0 drops the control out of the tree entirely, which hides
   the AM/PM choice from screen readers. */
.seg-btn input, .lk input[type=radio] {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap;
}
.seg-btn span {
  display: block; padding: 12px 4px; text-align: center;
  background: var(--bg-soft); border: 1px solid var(--line);
  border-radius: 11px; font-size: .95rem; font-weight: 600;
  color: var(--ink-dim); transition: all .12s ease;
}
.seg-btn:hover span { border-color: var(--gold-deep); color: var(--ink); }
.seg-btn input:checked + span {
  background: var(--gold); border-color: var(--gold); color: #241B06;
}
.seg-btn input:focus-visible + span { box-shadow: 0 0 0 3px rgba(232,192,125,.3); }

.t-hint { display: block; margin-top: 8px; text-align: left; }
.timefield select:disabled { opacity: .35; }
.timefield input:disabled + span { opacity: .35; }

@media (max-width: 480px) {
  .time-row { flex-wrap: wrap; }
  .tcol-ampm { flex: 1 0 100%; min-width: 0; margin-top: 4px; }
}

/* A label spanning the full row means clicking empty space toggles the box.
   Shrink it to its own text. */
.check { display: inline-flex; width: auto; align-self: flex-start; }

.suggest {
  position: absolute; z-index: 20; left: 0; right: 0; top: 100%;
  background: var(--bg-soft); border: 1px solid var(--line);
  border-radius: 11px; margin-top: 5px; overflow: hidden;
  box-shadow: 0 14px 36px rgba(0,0,0,.5);
}
.suggest button {
  display: block; width: 100%; text-align: left; padding: 11px 14px;
  background: none; border: 0; color: var(--ink); font: inherit;
  font-size: .92rem; cursor: pointer;
}
.suggest button:hover { background: var(--card); color: var(--gold); }

/* ---- CTA ---- */
.cta {
  display: block; width: 100%; margin-top: 8px; padding: 15px 22px;
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-deep) 100%);
  color: #241B06; border: 0; border-radius: 13px;
  font: inherit; font-size: 1.02rem; font-weight: 600; cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
}
.cta:hover { transform: translateY(-1px); box-shadow: 0 10px 28px rgba(232,192,125,.26); }

.cta.pulse { animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(232,192,125,.42); }
  55%      { box-shadow: 0 0 0 14px rgba(232,192,125,0); }
}
@media (prefers-reduced-motion: reduce) { .cta.pulse { animation: none; } }

.fine { font-size: .78rem; color: var(--ink-dim); opacity: .78; }
.center { text-align: center; }
.devnote { color: var(--gold); opacity: .85; }
.reassure { font-size: 1rem; color: var(--ink); opacity: .9; line-height: 1.5; margin: 4px 0 14px; }

/* ---- trust badges ---- */
.trust {
  display: flex; gap: 12px; flex-wrap: wrap; justify-content: center;
  margin: 0 0 30px;
}
.trust .badge {
  flex: 1 1 200px; max-width: 230px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: 12px; padding: 14px 16px; text-align: center;
}
.trust .badge h3 {
  font-family: Inter, sans-serif; font-size: .78rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .03em;
  color: var(--gold); margin: 0 0 5px;
}
.trust .badge p { font-size: .82rem; color: var(--ink-dim); margin: 0; line-height: 1.42; }
@media (max-width: 720px) {
  .trust { flex-direction: column; align-items: stretch; }
  .trust .badge { flex: 0 0 auto; max-width: none; }
}

/* ---- day master card ---- */
.dm-card {
  text-align: center; padding: 46px 30px 38px; margin: 20px 0 8px;
  background:
    radial-gradient(560px 220px at 50% 0%, color-mix(in srgb, var(--dm) 26%, transparent), transparent 72%),
    var(--card);
  border: 1px solid var(--line); border-radius: var(--radius);
}
.dm-card.compact { padding: 32px 30px 26px; }
.dm-card h1 { margin: 0 0 8px; color: var(--dm); }
.dm-sub { color: var(--ink-dim); font-size: .88rem; letter-spacing: .05em;
          text-transform: uppercase; margin: 0 0 18px; }
.dm-image { font-family: Fraunces, serif; font-size: 1.18rem; font-style: italic;
            max-width: 26em; margin: 0 auto 20px; }
.traits { list-style: none; display: flex; flex-wrap: wrap; gap: 8px;
          justify-content: center; padding: 0; margin: 0; }
.traits li {
  font-size: .8rem; padding: 5px 13px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--bg-soft); color: var(--ink-dim);
}

.notice {
  background: rgba(232,192,125,.08); border: 1px solid rgba(232,192,125,.28);
  border-radius: 12px; padding: 13px 16px; font-size: .87rem; color: var(--ink);
}

/* ---- pillars ---- */
.pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.pillars:has(.pillar:nth-child(3):last-child) { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 560px) { .pillars { grid-template-columns: repeat(2, 1fr); } }
.pillar {
  text-align: center; background: var(--bg-soft);
  border: 1px solid var(--line); border-radius: 14px; padding: 15px 8px 13px;
}
.plabel { font-size: .68rem; text-transform: uppercase; letter-spacing: .13em;
          color: var(--ink-dim); margin: 0 0 10px; }
.glyph {
  font-size: 2rem; line-height: 1.18; color: var(--e); font-weight: 500;
  font-family: "Noto Serif CJK KR", Fraunces, serif;
}
.glyph.b { font-size: 1.55rem; opacity: .88; }
.pen { font-size: .74rem; margin: 7px 0 0; color: var(--ink); }
.pen.dim { color: var(--ink-dim); margin-top: 2px; }
.god { font-size: .68rem; margin: 9px 0 0; color: var(--gold);
       text-transform: uppercase; letter-spacing: .08em; }

.solar { margin-top: 20px; }
.solar summary { cursor: pointer; font-size: .84rem; color: var(--ink-dim); }
.solar summary:hover { color: var(--gold); }
.solar dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 18px;
            margin: 14px 0 0; font-size: .84rem; }
.solar dt { color: var(--ink-dim); }
.solar dd { margin: 0; }

/* ---- element bars ---- */
.bars { display: flex; flex-direction: column; gap: 11px; }
.bar { display: grid; grid-template-columns: 62px 1fr 46px; align-items: center; gap: 12px; }
.bname { font-size: .84rem; color: var(--ink-dim); }
.track { height: 9px; background: var(--bg-soft); border-radius: 999px; overflow: hidden; }
.track i { display: block; height: 100%; border-radius: 999px; }
.bval { font-size: .8rem; text-align: right; color: var(--ink-dim); font-variant-numeric: tabular-nums; }

.insight { font-size: .93rem; margin: 18px 0 0; padding-top: 16px;
           border-top: 1px solid var(--line); }
.insight strong { color: var(--gold); }

.preview p { font-size: 1.02rem; }
.preview p:last-child { margin-bottom: 0; }

/* ---- paywall ---- */
.paywall {
  background:
    linear-gradient(180deg, rgba(232,192,125,.07) 0%, transparent 46%),
    var(--card);
  border-color: rgba(232,192,125,.3);
}
.chapters { list-style: none; padding: 0; margin: 0 0 24px; }
.chapters li {
  padding: 11px 0 11px 30px; border-bottom: 1px solid var(--line);
  font-size: .94rem; position: relative;
}
.chapters li:last-child { border-bottom: 0; }
.chapters li::before {
  content: "✦"; position: absolute; left: 4px; color: var(--gold); font-size: .8rem;
}
.buyform { display: flex; flex-direction: column; gap: 10px; }
.buyform .cta { margin-top: 0; }
.refund-agree {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: .92rem; color: var(--ink-dim); line-height: 1.45;
  cursor: pointer;
  margin-top: 22px;
}
.refund-agree input {
  margin-top: 2px; flex: none;
  width: 20px; height: 20px;
  accent-color: var(--gold);
  cursor: pointer;
}
.refund-agree strong {
  color: var(--gold); font-size: 1.02em;
}
.buyform .cta:disabled {
  opacity: .45; cursor: not-allowed;
}

.share { text-align: center; margin-top: 26px; }
.share p { font-size: .82rem; color: var(--ink-dim); margin-bottom: 8px; }
.share input {
  max-width: 420px; text-align: center; font-size: .84rem; color: var(--ink-dim);
}

/* ---- copy protection + print ---- */
.no-select {
  user-select: none; -webkit-user-select: none; -moz-user-select: none;
}
.print-bar { text-align: center; margin: 18px 0; }
.print-btn {
  display: inline-block; width: auto; margin: 0; padding: 9px 18px;
  font-size: .84rem;
}
@media print {
  .no-print, .site, .cats { display: none !important; }
  .no-select { user-select: text; } /* printed/exported output stays selectable */
  body { background: #fff; color: #000; }
  .card, .dm-card { border: 0; box-shadow: none; background: none; }
}

/* ---- long-form report ---- */
.longform h2 {
  margin-top: 2.1em; padding-top: 1.1em; border-top: 1px solid var(--line);
  color: var(--gold);
}
.longform > h2:first-of-type { margin-top: .6em; padding-top: 0; border-top: 0; }
.longform em:first-child { font-size: 1.1rem; }
.longform p { margin: 0 0 1.05em; }
.longform ul { padding-left: 1.15em; }
.longform li { margin-bottom: .5em; }

.timeline { display: flex; flex-direction: column; gap: 8px; }
.lp {
  display: grid; grid-template-columns: 62px 52px 1fr auto; gap: 12px;
  align-items: center; padding: 10px 14px;
  background: var(--bg-soft); border-radius: 11px;
  border-left: 3px solid var(--e); font-size: .88rem;
}
.lp .yr { font-weight: 600; font-variant-numeric: tabular-nums; }
.lp .gz { color: var(--e); font-family: "Noto Serif CJK KR", serif; }
.lp .en { color: var(--ink-dim); }
.lp .age { color: var(--ink-dim); font-size: .78rem; }
@media (max-width: 560px) {
  .lp { grid-template-columns: 58px 46px 1fr; }
  .lp .age { display: none; }
}

/* ---- service hub ----
   The hub is the one page that wants width: four cards on a 2x2 board read
   far faster than one column you have to scroll. Reading pages stay at --maxw,
   where a narrow measure is the point. */
.hero.tight { padding: 32px 0 24px; }

body.hub header.site,
body.hub .cats-inner,
body.hub main,
body.hub footer.site { max-width: var(--maxw-hub); }

.services {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 14px; margin-top: 8px;
}
@media (max-width: 700px) { .services { grid-template-columns: 1fr; } }

.svc {
  display: flex; flex-direction: column;
  text-decoration: none; color: inherit;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 26px 28px 22px;
  transition: border-color .15s ease, transform .15s ease;
}
/* Pin the call to action to the bottom edge so all four line up across the
   board however unequal the descriptions are. */
.svc .go { margin-top: auto; }
.svc:hover { border-color: var(--gold-deep); transform: translateY(-2px); }
.svc.feature {
  background: linear-gradient(180deg, rgba(232,192,125,.07) 0%, transparent 40%), var(--card);
  border-color: rgba(232,192,125,.3);
}
.svc h2 { margin: 0 0 6px; }
.svc .what { font-size: .82rem; color: var(--gold); margin: 0 0 10px;
             letter-spacing: .02em; }
.svc .get { font-size: .93rem; color: var(--ink-dim); margin: 0 0 16px; }
/* Drawn as a real button rather than a plain text link, so the next step
   reads as clickable instead of trailing off as a caption. */
.svc .go {
  align-self: center; display: block; width: 100%; box-sizing: border-box;
  padding: 12px 18px; border-radius: 12px;
  border: 1px solid rgba(232,192,125,.35); background: rgba(232,192,125,.08);
  font-size: .96rem; font-weight: 600; color: var(--ink); text-align: center;
  transition: border-color .15s ease, background .15s ease;
}
.svc:hover .go { border-color: var(--gold); background: rgba(232,192,125,.16); }

/* ---- explainer block (every service opens with one) ---- */
.explainer {
  background: var(--bg-soft); border: 1px solid var(--line);
  border-left: 3px solid var(--gold);
  border-radius: 14px; padding: 24px 26px; margin: 0 0 22px;
}
.explainer h2 {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .16em;
  font-family: Inter, sans-serif; font-weight: 600;
  color: var(--gold); margin: 0 0 14px;
}
.explainer p { font-size: .95rem; margin: 0 0 .85em; }
.explainer p:last-child { margin-bottom: 0; }
.explainer b, .explainer strong { color: var(--ink); }
ul.plain { list-style: none; padding: 0; margin: 0 0 1em; }
ul.plain li {
  font-size: .93rem; color: var(--ink-dim);
  padding: 7px 0 7px 16px; border-left: 1px solid var(--line);
  margin-bottom: 4px;
}
ul.plain li b { color: var(--gold); }

/* ---- personality test ---- */
/* Sits directly under the sticky category bar, never behind it. */
.progress {
  position: sticky; top: var(--cats-h); z-index: 30; height: 3px;
  background: var(--line); border-radius: 999px; margin-bottom: 20px;
}
.progress i {
  display: block; height: 100%; width: 0; border-radius: 999px;
  background: var(--gold); transition: width .25s ease;
}
fieldset.q {
  border: 1px solid var(--line); border-radius: 14px;
  background: var(--card); padding: 20px 22px 16px; margin: 0 0 12px;
}
fieldset.q legend { padding: 0 6px; font-size: .98rem; line-height: 1.5; }
.qn { color: var(--gold); font-variant-numeric: tabular-nums; margin-right: 6px; }
.likert { display: flex; gap: 6px; margin-top: 14px; }
.lk {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px;
  cursor: pointer; padding: 8px 2px; border-radius: 10px;
}
.lk:hover { background: var(--bg-soft); }
.lk .dot {
  width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid var(--line); transition: all .12s ease;
}
.lk input:checked + .dot { border-color: var(--gold); background: var(--gold); }
.lk input:focus-visible + .dot { box-shadow: 0 0 0 3px rgba(232,192,125,.3); }
.lk .lbl { font-size: .64rem; color: var(--ink-dim); text-align: center; line-height: 1.25; }
/* One size for all five. The two ends used to be drawn larger to signal
   intensity; next to labels saying the same thing it just read as a
   rendering glitch. */
/* The labels ARE the scale. Dropping them on narrow screens left five
   identical circles with nothing to say which end was agree — shrink them
   instead, and let the two long ones wrap to a second line. */
@media (max-width: 520px) {
  .likert { gap: 4px; }
  .lk { padding: 8px 0; gap: 5px; }
  .lk .lbl { font-size: .58rem; line-height: 1.2; }
}

/* ---- paged question sheet ----
   `.paged` is added by forms.js. Without JavaScript the class never lands and
   every page stays on screen, which is what the markup is anyway. */
.paged .qpage { display: none; }
.paged .qpage.on { display: block; }

.qnav {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin: 18px 0 14px;
}
/* Flexed and centred so it holds the middle whether or not Back is present —
   the first page has no Back and the count should not jump when page two
   adds one. */
.qcount {
  flex: 1; text-align: center;
  font-size: .8rem; color: var(--ink-dim);
  font-variant-numeric: tabular-nums; letter-spacing: .02em;
}
.btn-back, .btn-next {
  padding: 11px 18px; border-radius: 11px;
  background: var(--bg-soft); border: 1px solid var(--line);
  color: var(--ink); font: inherit; font-size: .9rem; font-weight: 600;
  white-space: nowrap;
  cursor: pointer; transition: border-color .12s ease, opacity .12s ease;
}

/* On a phone the row is too tight for label + count + label, and the arrows
   break onto a second line. Count above, buttons side by side under it. */
@media (max-width: 480px) {
  .qnav { flex-wrap: wrap; }
  .qcount { order: -1; flex: 1 0 100%; text-align: center; }
  .btn-back, .btn-next { flex: 1; }
}
.btn-back:hover:not(:disabled), .btn-next:hover:not(:disabled) {
  border-color: var(--gold-deep);
}
.btn-next:not(:disabled) {
  background: var(--gold); border-color: var(--gold); color: #241B06;
}
/* Disabled Next is the answer to "why can't I continue" — it has to read as
   waiting on you, not as broken. */
.btn-next:disabled { opacity: .38; cursor: not-allowed; }
.btn-back[hidden], .btn-next[hidden],
.btn-submit[hidden], .submit-note[hidden] { display: none; }

.axis { margin-bottom: 20px; }
.axis:last-child { margin-bottom: 0; }
.axis-head { display: flex; justify-content: space-between; align-items: baseline;
             margin-bottom: 7px; }
.axis-label { font-size: .82rem; color: var(--ink-dim); }
.axis-win { font-size: .84rem; }
.axis-win b { color: var(--gold); }
.axis .track { height: 9px; background: var(--bg-soft); border-radius: 999px; overflow: hidden; }
.axis .track i { display: block; height: 100%; background: var(--gold); border-radius: 999px; }
.axis-note { font-size: .8rem; color: var(--ink-dim); margin: 7px 0 0; }

/* ---- big five ----
   A dimension, drawn as a dimension: a marker sitting between two named ends,
   never a bar filling toward a winner. The whole argument for this test is
   that the middle is a real place to be, so the middle has to look like one. */
.trait { margin-bottom: 26px; }
.trait:last-child { margin-bottom: 0; }
.trait-head { display: flex; justify-content: space-between; align-items: baseline; }
.trait-name { font-family: Fraunces, serif; font-size: 1.05rem; }
.trait-score {
  font-variant-numeric: tabular-nums; font-size: .9rem; color: var(--gold);
  font-weight: 600;
}
.trait-label { font-size: .8rem; color: var(--ink-dim); margin: 1px 0 12px; }

.scale { margin-bottom: 10px; }
.scale-track {
  position: relative; height: 7px; border-radius: 999px;
  background: linear-gradient(90deg,
    var(--bg-soft) 0%, color-mix(in srgb, var(--dm) 34%, var(--bg-soft)) 100%);
  border: 1px solid var(--line);
}
.scale-track i {
  position: absolute; top: 50%; width: 15px; height: 15px;
  border-radius: 50%; background: var(--dm);
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 3px var(--card), 0 2px 8px rgba(0,0,0,.5);
}
.scale-ends {
  display: flex; justify-content: space-between;
  margin-top: 8px; font-size: .74rem; color: var(--ink-dim);
}
.trait-note { font-size: .89rem; color: var(--ink-dim); margin: 0; }

/* ---- back to the chooser ---- */
.eyebrow .back { color: inherit; text-decoration: none; }
.eyebrow .back:hover { color: var(--ink); }

.bridge { border-color: rgba(232,192,125,.28); }
.bridge .cta { margin-top: 18px; text-align: center; text-decoration: none; }
a.cta { display: block; text-decoration: none; }

/* ---- zodiac ---- */
.big-glyph { color: var(--dm); }
.signgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
@media (max-width: 620px) { .signgrid { grid-template-columns: repeat(3, 1fr); } }
.sgn {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 14px 6px; background: var(--bg-soft); border: 1px solid var(--line);
  border-radius: 12px; text-decoration: none; color: var(--ink);
}
.sgn:hover { border-color: var(--gold-deep); }
.glyph-z { font-size: 1.5rem; color: var(--gold); }
.sgn b { font-size: .84rem; }
.sgn .dates { font-size: .66rem; color: var(--ink-dim); }

/* ---- compatibility ---- */
.person {
  border-top: 1px solid var(--line); padding-top: 20px; margin-top: 20px;
}
.person:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
.person-h {
  font-family: Fraunces, serif; font-size: 1.15rem; color: var(--gold);
  margin: 0 0 16px;
}

.score-card {
  text-align: center; padding: 40px 30px 34px; margin: 20px 0 8px;
  background: radial-gradient(560px 220px at 50% 0%, rgba(232,192,125,.16), transparent 72%), var(--card);
  border: 1px solid var(--line); border-radius: var(--radius);
}
.score-ring {
  width: 132px; height: 132px; margin: 6px auto 20px;
  border-radius: 50%; display: flex; align-items: baseline;
  justify-content: center; gap: 2px; padding-top: 44px;
  background:
    radial-gradient(closest-side, var(--card) 79%, transparent 80%),
    conic-gradient(var(--gold) calc(var(--pct) * 1%), var(--line) 0);
}
.score-num { font-family: Fraunces, serif; font-size: 2.6rem; color: var(--gold); }
.score-of { font-size: .85rem; color: var(--ink-dim); }
.score-card h1 { font-size: clamp(1.4rem, 4vw, 2rem); margin: 0 0 6px; }

.vs { display: flex; align-items: center; gap: 14px; }
.vs-side {
  flex: 1; text-align: center; padding: 18px 12px;
  background: var(--bg-soft); border: 1px solid var(--line);
  border-radius: 14px; border-top: 3px solid var(--dm);
}
.vs-side h3 { color: var(--dm); margin: 4px 0 2px; }
.vs-amp { font-family: Fraunces, serif; font-size: 1.3rem; color: var(--ink-dim); }

.dyn { padding: 16px 0; border-bottom: 1px solid var(--line); }
.dyn:last-child { border-bottom: 0; padding-bottom: 0; }
.dyn-label {
  font-size: .7rem; text-transform: uppercase; letter-spacing: .13em;
  color: var(--gold); font-weight: 600; margin: 0 0 7px;
}
.dyn p:last-child { margin: 0; font-size: .94rem; }

.pair-bar { grid-template-columns: 62px 1fr; row-gap: 3px; }
.pair-bar .bname { grid-row: span 2; }

footer.site {
  max-width: var(--maxw); margin: 0 auto; padding: 30px 20px 50px;
  border-top: 1px solid var(--line); text-align: center;
}
footer.site p { font-size: .82rem; color: var(--ink-dim); margin: 0 0 8px; }