:root{
  --night-1:#1a1840; --night-2:#08071c; --deep:#05040f;
  --panel:rgba(255,255,255,.05); --panel-2:rgba(255,255,255,.08);
  --edge:rgba(255,255,255,.11); --edge-gold:rgba(197,160,89,.34);
  --gold:#c5a059; --gold-soft:#e2c88d; --gold-dim:rgba(197,160,89,.55);
  --ink:#f4f2ff; --ink-2:rgba(244,242,255,.7);
  /* .42 measured 3.72:1 on the deep ground — under the 4.5:1 AA floor for text
     below 18px, and this token drives 14 rules of 12–13px copy. .55 is 5.76:1
     and still reads as the quiet layer. */
  --ink-3:rgba(244,242,255,.55);
  --serif:'Playfair Display',Georgia,serif;
  --sans:'Inter',-apple-system,system-ui,sans-serif;
  --jp:'Noto Serif JP',serif;
}
*{box-sizing:border-box;margin:0;padding:0}
/* iOS Safari inflates text it judges too small for the viewport unless this is
   set, so a figure sized to fit its box here came out bigger on an iPhone and
   ran past it — "1957" rendering as "195" in the year field (Rich, 2026-10-03).
   100% means "render the size I asked for", and it does not stop the reader
   zooming. */
html{background:var(--deep);-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{font-family:var(--sans);color:var(--ink);background:var(--deep);line-height:1.55;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;min-height:100vh}
#sky{position:fixed;inset:0;z-index:0;pointer-events:none}
.veil{position:fixed;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(58% 42% at 22% 18%,rgba(122,96,196,.20),transparent 62%),
    radial-gradient(50% 40% at 82% 68%,rgba(168,92,140,.16),transparent 62%),
    radial-gradient(120% 95% at 50% -12%,#2c2565 0%,var(--night-1) 40%,var(--night-2) 74%,var(--deep) 100%)}
.wrap{position:relative;z-index:2;max-width:780px;margin:0 auto;padding:0 24px 120px}
header{display:flex;align-items:center;justify-content:space-between;padding:26px 0 0}
/* Sized up 2026-09-02 (Rich): the mark was getting lost on the landing pages. */
.brand{display:flex;align-items:baseline;gap:11px;font-size:28px;color:var(--ink);text-decoration:none}
.brand .k{font-family:var(--jp);color:var(--gold);font-size:33px;
  text-shadow:0 0 26px rgba(197,160,89,.75)}
.brand em{font-family:var(--serif);font-style:italic;opacity:.78}
.brand b{font-weight:500;letter-spacing:.01em}
.login{font-size:13px;color:var(--ink-3);text-decoration:none;transition:color .2s}
.login:hover{color:var(--ink-2)}
.eyebrow{font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);
  text-align:center;opacity:.85}
.eyebrow.hero{font-size:16px;letter-spacing:.34em}
h1{font-family:var(--serif);font-weight:400;font-size:clamp(33px,6vw,48px);line-height:1.1;
  text-align:center;letter-spacing:-.015em;text-wrap:balance}
h1 .em{font-style:italic;color:var(--gold-soft)}
.lede{text-align:center;color:var(--ink-2);font-size:16px;font-weight:300;max-width:456px;
  margin:0 auto;text-wrap:balance}
.stage{display:none}
.stage.on{display:block}
section.pad{padding-top:44px;display:flex;flex-direction:column;gap:16px}
/* ── reveal ── */
.rv{opacity:0;transform:translateY(16px);animation:rv .78s cubic-bezier(.16,.8,.3,1) forwards}
@keyframes rv{to{opacity:1;transform:none}}
.d1{animation-delay:.05s}.d2{animation-delay:.16s}.d3{animation-delay:.28s}
.d4{animation-delay:.40s}.d5{animation-delay:.52s}.d6{animation-delay:.64s}
/* ── ORB (astrolabe) ── */
.orbwrap{display:flex;justify-content:center;margin:6px 0 2px;position:relative}
.orb{position:relative;width:clamp(128px,34vw,236px);aspect-ratio:1}
/* pointer-events:none — the glow reaches 42% past the orb, and inside a link
   it was a huge invisible click target: taps on content near the orb (the
   dashboard's category chips) navigated instead of clicking what was under
   the finger. The glow is atmosphere, never the door. */
.orb .bloom{position:absolute;inset:-42%;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(197,160,89,.30),rgba(140,110,220,.13) 42%,transparent 68%);
  filter:blur(10px);animation:breathe 7s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:scale(.94);opacity:.72}50%{transform:scale(1.06);opacity:1}}
.orb svg.ring{position:absolute;inset:0;width:100%;height:100%;
  animation:spin 150s linear infinite;transform-origin:50% 50%}
.orb svg.ring.rev{animation:spin 230s linear infinite reverse}
@keyframes spin{to{transform:rotate(360deg)}}
.orb .core{position:absolute;inset:19%;border-radius:50%;
  background:
    radial-gradient(circle at 34% 28%,#fbf7ff 0%,#cfc6f2 22%,#9b8fd4 48%,#5b4f96 72%,#2e2760 100%);
  box-shadow:0 0 46px rgba(160,140,255,.42),inset -12px -16px 34px rgba(20,14,52,.62),
    inset 6px 8px 22px rgba(255,255,255,.24)}
.orb .core::after{content:'心';position:absolute;inset:0;display:grid;place-items:center;
  font-family:var(--jp);font-size:clamp(28px,7.4vw,40px);color:rgba(30,22,70,.62)}
.orb .mark{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
/* Every orb is a door: tap it and Kokoro talks. Hover warms the core; while
   the call is live the bloom turns gold and quickens — Kokoro speaking, per
   DESIGN.md's meaning of gold. Reduced motion keeps the gold, loses the pulse. */
.orb.askable{cursor:pointer}
.orb.askable:hover .core,.orb.askable:focus-visible .core{
  box-shadow:0 0 62px rgba(197,160,89,.5),inset -12px -16px 34px rgba(20,14,52,.62),
    inset 6px 8px 22px rgba(255,255,255,.28)}
.orb.askable:focus-visible{outline:2px solid var(--gold-soft);outline-offset:8px;border-radius:50%}
.orb.talking .bloom{
  background:radial-gradient(circle,rgba(226,200,141,.5),rgba(197,160,89,.2) 42%,transparent 68%);
  animation:breathe 2.6s ease-in-out infinite}
.orb.talking .core{
  box-shadow:0 0 72px rgba(226,200,141,.6),inset -12px -16px 34px rgba(20,14,52,.62),
    inset 6px 8px 22px rgba(255,255,255,.3)}
/* ── question cards ── */
.qs{display:grid;gap:11px}
.q{width:100%;text-align:left;cursor:pointer;font-family:var(--serif);font-size:19px;
  line-height:1.38;color:var(--ink);background:linear-gradient(180deg,var(--panel),rgba(255,255,255,.022));
  border:1px solid var(--edge);border-radius:16px;padding:20px 54px 20px 23px;position:relative;
  overflow:hidden;transition:border-color .28s,transform .28s,box-shadow .28s}
.q::before{content:'';position:absolute;inset:0;opacity:0;transition:opacity .34s;
  background:radial-gradient(120% 160% at 12% 50%,rgba(197,160,89,.15),transparent 62%)}
.q:hover,.q:focus-visible{border-color:var(--edge-gold);transform:translateY(-2px);
  box-shadow:0 12px 34px rgba(0,0,0,.36);outline:none}
.q:hover::before,.q:focus-visible::before{opacity:1}
.q .arw{position:absolute;right:21px;top:50%;transform:translateY(-50%);color:var(--gold);
  font-family:var(--sans);font-size:16px;opacity:.45;transition:opacity .28s,right .28s}
.q:hover .arw{opacity:1;right:17px}
.own{display:flex;gap:9px}
.own input{flex:1;min-width:0;background:transparent;
  border:1px solid rgba(197,160,89,.62);border-radius:16px;padding:19px 22px;
  color:rgba(255,255,255,.9);
  font-family:var(--sans);font-size:19px;font-weight:500;letter-spacing:.012em;outline:none;
  transition:border-color .24s,box-shadow .24s}
.own input::placeholder{color:rgba(255,255,255,.58);font-style:normal;font-weight:500}
.own input:hover{border-color:rgba(197,160,89,.85)}
.own input:focus{border-color:var(--gold);box-shadow:0 0 0 4px rgba(197,160,89,.18)}
.free{text-align:center;font-size:13px;color:var(--ink-3);letter-spacing:.05em}
/* ── answer ── */
.asked{font-family:var(--serif);font-style:italic;font-size:clamp(19px,3.4vw,23px);
  color:var(--gold-soft);text-align:center;line-height:1.36;text-wrap:balance}
.said{position:relative;background:linear-gradient(180deg,var(--panel-2),rgba(255,255,255,.028));
  border:1px solid var(--edge);border-radius:20px;padding:30px 28px;
  font-family:var(--serif);font-size:19px;line-height:1.64;box-shadow:0 20px 54px rgba(0,0,0,.34)}
.said::before{content:'';position:absolute;left:0;top:26px;bottom:26px;width:2px;border-radius:2px;
  background:linear-gradient(180deg,transparent,var(--gold-dim),transparent)}
.said p+p{margin-top:15px}
.said em{color:var(--gold-soft)}
.hinge{text-align:center;display:flex;flex-direction:column;gap:16px;align-items:center}
.hinge{text-align:left;align-items:stretch}
.hinge p{color:var(--gold-soft);font-family:var(--serif);font-size:19px;
  font-weight:400;line-height:1.5;text-wrap:pretty}
/* ── buttons ── */
.btn{cursor:pointer;font-family:var(--serif);font-style:italic;font-size:16px;color:#241e3c;
  background:linear-gradient(180deg,#f0dcae,var(--gold-soft) 42%,var(--gold));border:none;
  border-radius:99px;padding:14px 34px;transition:transform .22s,box-shadow .22s;
  box-shadow:0 8px 28px rgba(197,160,89,.26)}
.btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 14px 38px rgba(197,160,89,.4)}
/* Greyed until it is live (Rich, 2026-09-20): a gold-tinted disabled button still
   reads as pressable, and people click it, get nothing, and assume it is broken.
   Gold is reserved for a control that works, so waiting is neutral. */
.btn:disabled{background:rgba(255,255,255,.06);color:var(--ink-3);opacity:1;
  cursor:default;box-shadow:inset 0 0 0 1px var(--edge)}
/* 13px text gives a 16px-tall tap target; the guideline is 44. The padding grows
   the hit area and the negative top margin cancels it in the layout, so the words
   stay exactly where they were and only the reachable area changes. */
.skip{background:none;border:none;color:var(--ink-3);font-size:13px;cursor:pointer;
  font-family:var(--sans);transition:color .2s;
  padding:14px 12px;margin-top:-14px}
.skip:hover{color:var(--ink-2)}
/* ── form ── */
.form{background:linear-gradient(180deg,var(--panel-2),rgba(255,255,255,.026));
  border:1px solid var(--edge);border-radius:20px;padding:32px 28px;
  display:flex;flex-direction:column;gap:24px;box-shadow:0 20px 54px rgba(0,0,0,.32)}
.fl{font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--gold);
  display:block;margin-bottom:11px;opacity:.9}
.row{display:flex;gap:9px}
/* Three equal boxes gave a four-digit year the same room as a two-digit day,
   and the fourth digit was simply cut off. The year takes half again as much,
   with tighter tracking and less side padding to go with it.
   (The font-size:19px that used to sit here never applied — input[type=text]
   below sets 16px at the same specificity and wins on order. Removed rather
   than left to look like it was doing something.) */
.row input{flex:1;min-width:0;text-align:center;font-variant-numeric:tabular-nums;
  letter-spacing:.04em}
/* [type=text] on purpose. `input[type=text]{padding:15px}` below is the same
   specificity and comes later, so a plain `.row input{padding-left:…}` here
   loses to its shorthand — which is exactly how the font-size above came to be
   dead. Two classes' worth of specificity, and it sticks. */
.row input[type=text]{padding-left:10px;padding-right:10px}
.row input[maxlength="4"]{flex:1.45}
input[type=text],input[type=time],input[type=email]{background:rgba(0,0,0,.26);
  border:1px solid var(--edge);border-radius:12px;padding:15px;color:var(--ink);
  font-family:var(--sans);font-size:16px;outline:none;width:100%;transition:border-color .22s}
/* No rule covered <select> at all, so the AM/PM dropdown on /ask rendered as
   the browser's own control — white background, black text, 13px, no padding —
   in the middle of a dark panel (Rich, 2026-10-03). Pages with their own select
   styling (.ch select.in, person) are more specific and still win. */
select{appearance:none;-webkit-appearance:none;cursor:pointer;width:100%;outline:none;
  background:rgba(0,0,0,.26)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23e2c88d' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M5 8l5 5 5-5'/%3E%3C/svg%3E")
    no-repeat right 10px center / 14px;
  border:1px solid var(--edge);border-radius:12px;padding:15px 30px 15px 12px;
  color:var(--ink);font-family:var(--sans);font-size:16px;
  transition:border-color .22s}
select:focus{border-color:var(--edge-gold)}
select option{background:#1a1840;color:#fff}

input:focus{border-color:var(--edge-gold)}
input::placeholder{color:var(--ink-3);letter-spacing:0}
/* The label is the real target — it wraps the input — but it was 21px tall, and
   it is the control that decides whether someone has to produce a birth time.
   Padding replaces the margin so it reaches 44 without moving. */
.chk{display:flex;align-items:center;gap:10px;padding:12px 0;font-size:13px;
  color:var(--ink-2);cursor:pointer}
.chk input{width:16px;height:16px;accent-color:var(--gold);cursor:pointer}
.hint{font-size:13px;color:var(--ink-3);margin-top:9px;font-style:italic}
.sug{margin-top:7px;border:1px solid var(--edge);border-radius:12px;overflow:hidden;
  background:rgba(5,4,15,.95)}
.sug button{display:block;width:100%;text-align:left;padding:13px 16px;background:none;
  border:none;color:var(--ink-2);font-family:var(--sans);font-size:16px;cursor:pointer}
.sug button:hover{background:rgba(197,160,89,.13);color:var(--ink)}
/* ── chart wheel ── */
.wheelwrap{display:flex;justify-content:center}
.wheel{width:min(340px,84vw);aspect-ratio:1;animation:wheelin 1.5s cubic-bezier(.16,.8,.3,1) both}
@keyframes wheelin{from{opacity:0;transform:rotate(-14deg) scale(.9)}to{opacity:1;transform:none}}
.wheel .drift{animation:spin 420s linear infinite;transform-origin:50% 50%}
.chartline{display:flex;gap:9px;flex-wrap:wrap;justify-content:center}
.pill{border:1px solid var(--edge);border-radius:99px;padding:8px 16px;font-size:13px;
  color:var(--ink-2);background:var(--panel)}
.pill b{color:var(--gold-soft);font-weight:500}
.pill.warn{border-color:var(--edge-gold)}
/* ── voice ── */
.voice{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap}
.speak{display:flex;align-items:center;gap:11px;cursor:pointer;background:rgba(197,160,89,.07);
  border:1px solid var(--edge-gold);color:var(--gold-soft);border-radius:99px;
  padding:13px 24px;  /* 12 landed at 43px — one short of the floor */
  font-family:var(--sans);font-size:16px;transition:background .24s}
.speak:hover{background:rgba(197,160,89,.16)}
.wv{display:flex;align-items:center;gap:2.5px;height:15px}
.wv i{width:2.5px;border-radius:2px;background:var(--gold);height:5px;
  animation:wv 1.15s ease-in-out infinite}
.wv i:nth-child(2){animation-delay:.14s}.wv i:nth-child(3){animation-delay:.28s}
.wv i:nth-child(4){animation-delay:.42s}.wv i:nth-child(5){animation-delay:.56s}
@keyframes wv{0%,100%{height:4px;opacity:.45}50%{height:15px;opacity:1}}
/* ── transit / subscribe ── */
.transit{margin-top:56px;padding-top:46px;border-top:1px solid var(--edge);
  display:flex;flex-direction:column;gap:20px}
.tbox{background:linear-gradient(180deg,rgba(197,160,89,.07),rgba(255,255,255,.02));
  border:1px solid var(--edge-gold);border-radius:20px;padding:28px;font-family:var(--serif);
  font-size:19px;line-height:1.62;font-style:italic}
.sub{text-align:center;display:flex;flex-direction:column;gap:14px;align-items:center;
  background:linear-gradient(180deg,rgba(197,160,89,.09),rgba(255,255,255,.02));
  border:1px solid var(--edge-gold);border-radius:20px;padding:34px 28px;margin-top:6px;
  box-shadow:0 20px 54px rgba(0,0,0,.3)}
.sub h2{font-family:var(--serif);font-weight:400;font-size:clamp(23px,4.2vw,33px);
  line-height:1.2;text-wrap:balance}
.sub p{color:var(--ink-2);font-size:16px;font-weight:300;max-width:410px;text-wrap:balance}
.subform{display:flex;gap:9px;max-width:436px;width:100%}
.subform input{flex:1;min-width:0}
.care{text-align:center;font-size:13px;color:var(--ink-3);line-height:1.72;max-width:520px;
  margin:0 auto}
.care a{color:var(--gold);text-decoration:none;border-bottom:1px solid var(--edge-gold)}
.care a:hover{color:var(--gold-soft)}
@media(max-width:600px){
  .wrap{padding-bottom:150px}
  section.pad{padding-top:20px;gap:16px}
  .orbwrap{margin:0}
  h1{font-size:clamp(28px,7.4vw,40px)}
  .said{padding:26px 22px}
  /* one scale step down on phones — 19 pushed the escape hatch under the fold */
  .q{font-size:16px;padding:18px 48px 18px 19px}
}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important}
  .rv{opacity:1;transform:none}
}

/* ── streaming + real-data additions ── */
.said.streaming::after{content:'';display:inline-block;width:7px;height:1.05em;
  background:var(--gold-soft);margin-left:3px;vertical-align:-2px;animation:blink 1s step-end infinite}
@keyframes blink{50%{opacity:0}}
.err{background:rgba(150,60,60,.16);border:1px solid rgba(220,120,120,.42);border-radius:16px;
  padding:18px 22px;font-family:var(--sans);font-size:16px;color:#f3d3d3;line-height:1.6}
.err code{font-family:ui-monospace,Menlo,monospace;font-size:13px;background:rgba(0,0,0,.3);
  padding:2px 6px;border-radius:6px}
.thinking{display:flex;align-items:center;gap:9px;justify-content:center;color:var(--ink-3);
  font-size:13px;padding:8px 0}
.thinking .wv i{background:var(--ink-3)}
.wheel-legend{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;font-size:13px;
  color:var(--ink-2)}
.wheel-legend span{border:1px solid var(--edge);border-radius:99px;padding:5px 11px;
  background:var(--panel);font-variant-numeric:tabular-nums}
.wheel-legend b{color:var(--gold-soft);font-weight:500}
.retro{color:#e9b0b0}


/* ══ the design system from the canvas ═══════════════════════════════
   One module (label + rule), one container (.panel = something you act
   on), one type ramp. Speech sits on the ground, left aligned. */
.sect{display:flex;align-items:center;gap:12px;margin-top:20px}
.sect span.l{font-size:10px;letter-spacing:.3em;text-transform:uppercase;
  color:rgba(226,200,141,.85);white-space:nowrap}
.sect span.l.live{color:#e2c88d}
.sect span.rule{flex-grow:1;height:1px;background:var(--edge)}
.sect span.l.live ~ span.rule{background:rgba(197,160,89,.28)}
.wv.sm{height:9px}
.wv.sm i{width:2px;height:4px}
.wv.sm i:nth-child(2){height:9px}
.wv.sm i:nth-child(3){height:6px}

/* Kokoro speaking — no box; the label above already delimits it */
.speech{font-family:var(--serif);font-size:19px;line-height:1.62;color:var(--ink);
  text-wrap:pretty;display:flex;flex-direction:column;gap:20px}
.speech em{font-style:italic;color:var(--gold-soft)}
.speech.streaming::after{content:'';display:inline-block;width:7px;height:1.05em;
  background:var(--gold-soft);margin-left:3px;vertical-align:-2px;animation:blink 1s step-end infinite}

/* a container means: something you act on */
.panel{background:rgba(255,255,255,.05);border:1px solid var(--edge);border-radius:16px;
  padding:18px;display:flex;flex-direction:column;gap:10px}
.panel .row input,.panel>input{background:rgba(0,0,0,.26);border:1px solid var(--edge);
  border-radius:12px;padding:12px 14px;font-size:16px}
/* This is the only control on the page someone presses with nothing prompting
   them, and it was 21px tall. Padding takes it to 45; the negative margins keep
   it sitting exactly where it did between the reading and the next section. */
.more{display:flex;align-items:center;gap:11px;background:none;border:none;cursor:pointer;
  padding:12px 10px;margin:-12px -10px;
  font-family:var(--serif);font-style:italic;font-size:16px;color:var(--gold-soft);
  text-align:left}
.more:hover{color:#f2e2ba}
.more:disabled{opacity:.45;cursor:default}
.heard{display:flex;align-items:center;gap:11px;background:rgba(255,255,255,.045);
  border:1px solid var(--edge);border-radius:16px;padding:13px 15px;font-size:13px;
  line-height:1.45;color:var(--ink-2)}
.heard b{color:var(--ink);font-weight:400}
.sub{margin-top:26px}


/* .own and .heard set display:flex, which outranks the UA rule for [hidden].
   Two elements were showing as empty boxes before their content existed. */
[hidden]{display:none !important}


/* screen 2: the question is the page title */
#s2 h1{font-size:clamp(28px,5.2vw,40px);line-height:1.16;font-style:italic;color:var(--gold-soft)}
#s4 h1{font-size:clamp(28px,5.4vw,40px);line-height:1.16}
.chartsub{text-align:center;font-size:13px;letter-spacing:.05em;color:var(--ink-3);
  margin-top:-6px}
/* the question they arrived with, above the reading that answers it */
.askedq{text-align:center;font-family:var(--serif);font-style:italic;
  font-size:clamp(17px,2.6vw,20px);line-height:1.4;color:var(--gold-soft);
  margin-bottom:-4px}
/* an opener already heard stays available but stops competing for attention */
.q.heard{opacity:.55}
.q.heard .arw{opacity:.7}
#otherQs{margin-top:4px}


/* ── screen 1: spoken openers, voice first ── */
.sayone{text-align:center;font-size:13px;color:var(--ink-3);letter-spacing:.03em}
.q{display:flex;align-items:center;gap:12px;padding:17px 20px}
.q .qt{flex-grow:1}
.q .arw{display:none}
.talkwrap{display:flex;flex-direction:column;align-items:center;gap:13px;
  /* The gold button is the one thing on the screen to press, so it gets room
     above it. At the section's own 17px it sat on top of the cards. */
  margin-top:16px}
.btn.talk{display:flex;align-items:center;justify-content:center;gap:11px;width:100%;
  font-style:normal;font-family:var(--serif);font-style:italic}


/* two sentences again — the headline takes its full display size */
#s1 h1{font-size:clamp(31px,6vw,48px);line-height:1.14}

/* Implied consent: it has to be legible and it has to be under the button that
   does the joining — quiet enough not to compete with it, never small print. */
p.consent{margin-top:11px;font-size:13px;line-height:1.55;text-align:center;color:var(--ink-3)}
p.consent a{color:var(--ink-2);text-underline-offset:2px}
p.consent a:hover{color:var(--gold-soft)}

.vnote{font-size:13px;color:var(--ink-3);text-align:center;max-width:330px;line-height:1.5}
.vnote.invite{color:var(--gold-soft);font-family:var(--serif);font-style:italic;font-size:15px}
p.joinerr{margin-top:10px;font-size:13px;line-height:1.5;text-align:center;color:#ff9d8a}
p.joinerr:empty{display:none}

/* The one persistent menu. It sits below every stage rather than inside one, so
   it does not move when the flow does. */
.foot{display:flex;flex-wrap:wrap;justify-content:center;gap:0 6px;
  padding:18px 12px 26px;font-size:13px;letter-spacing:.02em}
/* Same reason as .skip: 19px tall was under the 44px floor. Padding carries the
   spacing the flex gap used to, so the row looks unchanged and is now reachable. */
.foot a{color:var(--ink-3);text-decoration:none;text-underline-offset:3px;
  padding:13px 10px}
.foot a:hover,.foot a:focus-visible{color:var(--ink-2);text-decoration:underline}

/* Pages that write their own <footer> instead of using .foot got none of the
   above, so Support / Refunds / Terms / Privacy sat at 16px tall — a third of
   the 44px floor, and the only way to reach the legal pages from most of the
   site. Scoped to the link ROW, so the helpline link inside the care sentence
   keeps its line box (WCAG 2.5.5 exempts links inside a sentence). The
   negative margin cancels the padding, so the row looks unchanged. */
footer > div > a{display:inline-flex;align-items:center;min-height:44px;
  padding:0 9px;margin:0 -5px}

/* The way back to a saved reading. Quiet, but it says what it is — the old
   "Start over" link only ever spoke to the person whose chart was wrong. */
.skip.resume{color:var(--gold-soft);opacity:.85}
.skip.resume:hover{opacity:1;text-decoration:underline;text-underline-offset:3px}

/* Screen 2 and the form are plain blocks, so they miss the section's 17px gap and
   the button ended up 15px closer than the same button on screen 1. Match it. */
/* These two are plain divs inside section.pad, so they inherited none of its 16px
   rhythm — the eyebrow, the question and the answer were all touching at 0px.
   Carry the same rhythm rather than patching margins one element at a time. */
#answerView,#formStep{display:flex;flex-direction:column;gap:16px}
/* 16 gap + 16 margin = the same 32 above the gold button as everywhere else. */
#answerView .talkwrap,#formStep .talkwrap{margin-top:16px}

/* ── the join ──────────────────────────────────────────────────────
   A modal, not a paragraph. The ask arrives at the climax of the reading and
   should feel like Kokoro stepping forward — dimmed room, lit card, one
   question. Gold here is Kokoro speaking and the control, per DESIGN.md. */
#joinCTA{
  position:fixed;inset:0;z-index:60;
  display:flex;align-items:center;justify-content:center;
  padding:20px;
  background:rgba(5,4,15,.72);
  -webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);
}
#joinCTA[hidden]{display:none}
.jm-card{
  position:relative;width:min(440px,100%);
  display:flex;flex-direction:column;align-items:center;gap:12px;
  padding:34px 26px 24px;border-radius:20px;
  background:
    radial-gradient(120% 90% at 50% 0%,rgba(197,160,89,.16),transparent 55%),
    linear-gradient(180deg,#221d49,#151233 70%,#0e0b26);
  border:1.5px solid rgba(226,200,141,.55);
  box-shadow:
    0 0 0 1px rgba(197,160,89,.18),
    0 0 70px rgba(197,160,89,.22),
    0 30px 80px rgba(0,0,0,.6);
}
@media (prefers-reduced-motion:no-preference){
  .jm-card{animation:jmIn .45s cubic-bezier(.16,1,.3,1)}
  @keyframes jmIn{from{opacity:0;transform:translateY(14px) scale(.965)}to{opacity:1;transform:none}}
}
.jm-x{
  position:absolute;top:2px;right:2px;width:44px;height:44px;
  background:none;border:none;cursor:pointer;
  color:var(--ink-3);font-size:26px;line-height:1;border-radius:99px;
  transition:color .2s;
}
.jm-x:hover{color:var(--ink)}
.jm-orb{
  width:54px;height:54px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--jp);font-size:22px;color:var(--ink);
  background:radial-gradient(circle at 38% 32%,rgba(226,200,141,.85),rgba(197,160,89,.4) 55%,rgba(197,160,89,.12) 75%);
  box-shadow:0 0 34px rgba(197,160,89,.5);
}
.jm-eyebrow{margin-top:2px}
.jm-title{
  font-family:var(--serif);font-weight:500;font-size:clamp(24px,5vw,31px);
  line-height:1.2;text-align:center;color:var(--ink);text-wrap:balance;
}
.jm-title .em{font-style:italic;color:var(--gold-soft)}
.jm-lede{
  color:var(--ink-2);font-size:15.5px;font-weight:300;line-height:1.55;
  text-align:center;max-width:340px;text-wrap:balance;
}
.jm-lede em{color:var(--gold-soft);font-style:italic}
#joinCTA .panel{
  width:100%;margin-top:6px;
  background:rgba(5,4,15,.42);
  border-color:rgba(226,200,141,.34);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
  padding:18px 16px;gap:12px;
}
#joinCTA .panel input[type=email]{
  background:rgba(0,0,0,.45);border-color:rgba(226,200,141,.38);
  color:var(--ink);
  text-align:center;font-size:16px;letter-spacing:.01em;
}
#joinCTA .panel input[type=email]::placeholder{color:var(--ink-3);font-style:italic}
#joinCTA .panel input[type=email]:focus{
  outline:none;border-color:var(--gold-soft);
  box-shadow:0 0 0 3px rgba(212,168,85,.22);
}
#joinCTA .skip{padding:10px 6px}
body.jm-lock{overflow:hidden}
/* The inline join at the foot of the reading — the modal's quieter twin,
   warm gold-tinted rather than the neutral input panel. */
#joinInline{margin-top:26px}
/* the join line reads as a title, not body copy (Rich, 2026-09-08) */
#joinInline .jointtl{margin-top:30px;font-family:var(--serif);font-style:italic;
  font-size:clamp(26px,4.4vw,33px);line-height:1.2;color:var(--gold-soft);text-wrap:balance}
#joinInline .panel{
  /* Lightened + a thin gold border (Rich, 2026-09-08) */
  background:linear-gradient(180deg,rgba(226,200,141,.18),rgba(255,255,255,.07));
  border:1px solid var(--gold-soft);
  box-shadow:0 18px 46px rgba(0,0,0,.30);
  padding:22px 20px;gap:13px;margin-top:14px;
}
#joinInline .panel input[type=email]{
  background:rgba(0,0,0,.30);border-color:rgba(212,168,85,.26);
  text-align:center;font-size:16px;letter-spacing:.01em;
}
#joinInline .panel input[type=email]::placeholder{color:var(--gold-soft);opacity:.85;font-style:italic}
/* The inline join button stays golden like every other CTA, even while it
   waits for an email (Rich, 2026-09-08). */
#joinInline .panel .btn,#joinInline .panel .btn:disabled{
  background:var(--gold-soft);color:#0e2a63;font-weight:600;
  box-shadow:0 8px 28px rgba(197,160,89,.26)}
#joinInline .panel input[type=email]:focus{
  outline:none;border-color:var(--gold-soft);
  box-shadow:0 0 0 3px rgba(212,168,85,.15);
}
/* The "Join for a free daily transit reading" label sat in the same thin plum
   as every button; on the wide gold pill it read faintly (Rich, 2026-09-08).
   Give just these two joins a deep, saturated blue with real weight so the
   invitation is the most salient thing in the box. Enabled state only —
   disabled keeps its quiet waiting look. */
#subBtn:not(:disabled),#subBtn2:not(:disabled){
  color:#0e2a63;font-weight:600;font-size:17px;letter-spacing:.005em}

/* ── stage 5 · the offer, folded in from upgrade2 ──────────────────
   Scoped to #s5. The flow and the offer now share one stylesheet, so an
   unscoped .price or .offer here would reach into the reading. */
/* ── upgrade2 — one decision, not a catalogue ────────────────────────
     Built on DESIGN.md. The old page was four priced columns; this model
     has a single offer, so the page has a single card. */
#s5 .lead{font-family:var(--serif);font-size:19px;line-height:1.62;color:var(--ink);
    text-wrap:pretty;display:flex;flex-direction:column;gap:20px}
#s5 .lead em{color:var(--gold-soft);font-style:italic}
/* the offer */
#s5 .offer{background:linear-gradient(180deg,rgba(212,168,85,.10),rgba(255,255,255,.035));
    border:1px solid rgba(212,168,85,.30);border-radius:20px;padding:24px 20px;
    display:flex;flex-direction:column;gap:16px;box-shadow:0 20px 54px rgba(0,0,0,.34)}
#s5 .cycle{display:flex;gap:6px;background:rgba(0,0,0,.28);border:1px solid var(--edge);
    border-radius:99px;padding:4px;align-self:center}
#s5 .cycle button{flex:0 0 auto;background:none;border:none;border-radius:99px;
    padding:11px 20px;min-height:44px;cursor:pointer;color:var(--ink-3);
    font-family:var(--sans);font-size:13px;letter-spacing:.04em;transition:.22s}
#s5 .cycle button[aria-pressed="true"]{background:rgba(212,168,85,.18);color:var(--gold-soft)}
#s5 .price{display:flex;align-items:baseline;justify-content:center;gap:10px}
#s5 .price .amt{font-family:var(--serif);font-size:48px;line-height:1;color:var(--ink);
    font-variant-numeric:tabular-nums}
#s5 .price .per{font-size:13px;color:var(--ink-3);letter-spacing:.05em}
#s5 .saving{text-align:center;font-size:13px;color:var(--gold-soft);min-height:20px}
#s5 .gets{display:flex;flex-direction:column;gap:12px;margin-top:4px}
#s5 .get{display:flex;gap:12px;align-items:flex-start}
#s5 .get svg{flex-shrink:0;margin-top:3px}
#s5 .get p{font-size:16px;line-height:1.55;color:var(--ink-2)}
#s5 .get p b{color:var(--ink);font-weight:500}
#s5 .terms{font-size:13px;color:var(--ink-3);text-align:center;line-height:1.55}
#s5 .terms a{color:var(--ink-2);text-underline-offset:2px}
/* Named .included, not .free — styles.css already owns .free for the flow's
     "Free · no sign-up" microcopy, and its text-align:center was centring this
     checklist into decoration. */
#s5 .included{background:rgba(255,255,255,.05);border:1px solid var(--edge);
    border-radius:16px;padding:20px}
#s5 .included ul{list-style:none;display:flex;flex-direction:column;gap:11px;margin-top:12px}
#s5 .included li{display:flex;gap:11px;align-items:flex-start;font-size:16px;
    line-height:1.5;color:var(--ink-2)}
#s5 .included li svg{flex-shrink:0;margin-top:4px}
/* time */
#s5 .time{display:grid;grid-template-columns:1fr 1fr;gap:10px}
#s5 .tcell{background:rgba(255,255,255,.05);border:1px solid var(--edge);
    border-radius:16px;padding:16px;text-align:center;display:block;
    text-decoration:none;color:inherit;cursor:pointer;transition:border-color .2s,background .2s}
#s5 a.tcell:hover{border-color:var(--gold-soft);background:rgba(197,160,89,.08)}
#s5 .tcell .n{font-family:var(--serif);font-size:28px;color:var(--gold-soft);
    font-variant-numeric:tabular-nums}
#s5 .tcell .l{font-size:13px;color:var(--ink-3);margin-top:4px}
#s5 .keeps{background:rgba(255,255,255,.05);border:1px solid var(--edge-gold);
    border-radius:16px;padding:20px}
#s5 .keeps p{font-family:var(--serif);font-size:19px;line-height:1.55;color:var(--ink)}
#s5 .keeps small{display:block;font-family:var(--sans);font-size:13px;color:var(--ink-3);
    line-height:1.6;margin-top:12px}