/* Learn hub + topic pages. Tokens mirror the landing page on purpose, so the
   science pages and the product never look like two different brands. */
:root{
  --bg:#0a0a0f; --surface:#1a1a2e; --surface-2:#12121f; --line:#2a2a4a;
  --text:#f0f0f5; --text-secondary:#8888aa;
  --accent:#ff2d78; --accent-light:rgba(255,45,120,0.15);
  --success:#00d4ff; --spotlight:#ffe600; --radius:16px;
}
/* The canvas, not only the column: the body is capped at 46rem, so a browser that paints
   its own background shows its colour down both sides of the text. Same one line as the
   landing page (web/site/index.html), for the same reason -- a visitor and a user should
   not see two products, and neither should see a browser's grey. */
html{background:var(--bg);color-scheme:dark}
body{font-family:-apple-system,BlinkMacSystemFont,'SF Pro','Inter',system-ui,sans-serif;
  max-width:46rem;margin:0 auto;padding:0 1.2rem 0;line-height:1.7;color:var(--text);
  background:var(--bg);-webkit-font-smoothing:antialiased}
a{color:var(--accent);text-decoration:none;border-bottom:1px solid var(--accent-light)}
a:hover{border-bottom-color:var(--accent)}
.mark{color:var(--accent)}
.topnav{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;
  padding:.9rem 0;margin-bottom:1.4rem;background:rgba(10,10,15,.82);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.topnav .brand{font-weight:800;font-size:1.5rem;letter-spacing:-.02em;color:var(--text);border:0}
.topnav .brand .mark{color:var(--accent)}
.topnav .brand img{height:1.05rem;width:auto;vertical-align:-.15em;margin-right:.35rem}
.topnav .crumb{font-size:.9rem;color:var(--text-secondary);border:0}
.topnav .crumb:hover{color:var(--accent)}
.topnav .crumb .arrow{color:var(--spotlight)}
.arrow{font-size:1.84em;font-weight:700;line-height:0;vertical-align:-.06em;margin:0 .06em}
.kicker{display:inline-block;font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);margin-bottom:.6rem}
h1{font-size:2.6rem;letter-spacing:-.035em;line-height:1.05;font-weight:800;margin:.1rem 0 .6rem}
h1 .mark{color:var(--accent)}
h2{font-size:1.15rem;font-weight:700;margin:2.6rem 0 .8rem}
h2::before{content:"";display:inline-block;width:18px;height:2px;background:var(--accent);
  vertical-align:middle;margin-right:.6rem;border-radius:1px}
.lead{font-size:1.15rem;color:var(--text);font-weight:500;line-height:1.55}
p{margin:.85rem 0}
.trait-grid{display:grid;gap:1rem;margin:1.4rem 0}
.trait{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.25rem 1.4rem;box-shadow:0 4px 20px rgba(0,0,0,.3)}
.trait h3{margin:0 0 .2rem;font-size:1.15rem;font-weight:800;letter-spacing:-.01em}
.trait .tag{font-size:1.05rem;font-weight:800;letter-spacing:.02em;text-transform:uppercase;color:var(--success);display:block;margin-bottom:.1rem}
.trait .hi,.trait .lo{margin:.55rem 0 0;font-size:.95rem}
.trait .hi b{color:var(--accent)}
.trait .lo b{color:var(--text)}
.trait .flirt{margin-top:.7rem;font-size:.92rem;color:var(--text-secondary);font-style:italic}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.3rem 1.5rem;margin:1.1rem 0;box-shadow:0 4px 20px rgba(0,0,0,.3)}
.card h3{margin:.1rem 0 .4rem;font-size:1.1rem}
.sources{list-style:none;padding:0;margin:1rem 0}
.sources li{margin:.7rem 0;padding-left:1.1rem;position:relative;font-size:.92rem;color:var(--text-secondary)}
.sources li::before{content:"";position:absolute;left:0;top:.55em;width:6px;height:6px;border-radius:50%;background:var(--success)}
.sources a{color:var(--success);border:0;font-weight:600}
.sources a:hover{text-decoration:underline}
.sources .yr{color:var(--text)}
.honest{border-left:3px solid var(--accent);background:var(--surface-2);border-radius:0 var(--radius) var(--radius) 0;
  padding:1rem 1.3rem;margin:1.4rem 0;font-size:.95rem}
.ask{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius);
  padding:1rem 1.3rem;margin:1.2rem 0;font-size:.98rem}
.ask a{color:var(--success);border:0;font-weight:600}
.ask a:hover{text-decoration:underline}
/* Mapping tables on the topic pages. Two columns on purpose: three columns of
   long words like "Conscientiousness" push the table past a 390px phone screen,
   and a page that scrolls sideways is a bug report waiting to happen. */
.map{width:100%;border-collapse:collapse;margin:1.3rem 0;font-size:.95rem}
.map th{text-align:left;font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text-secondary);padding:.4rem .7rem .5rem;border-bottom:1px solid var(--line)}
.map td{padding:.75rem .7rem;border-bottom:1px solid var(--line);vertical-align:top;
  color:var(--text-secondary)}
.map tr:last-child td{border-bottom:0}
.map .letters{color:var(--text);font-weight:800;white-space:nowrap}
.map .letters span{display:block;font-weight:400;font-size:.85rem;color:var(--text-secondary);
  margin-top:.15rem;white-space:normal}
.map .gap td{background:var(--surface-2)}
.map .gap .letters{color:var(--accent)}
/* The alignment grid. Four columns at 390px is the tight thing on this page, so
   the cells stay short and the type stays small; the render check measures it. */
.grid9{width:100%;border-collapse:separate;border-spacing:4px;margin:1.3rem 0}
.grid9 th{font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--success);padding:.2rem .3rem;text-align:left}
.grid9 th.corner{color:var(--text-secondary)}
.grid9 td{background:var(--surface);border:1px solid var(--line);border-radius:12px;
  padding:.55rem .45rem;text-align:center;vertical-align:top}
.grid9 td b{display:block;color:var(--text);font-size:.86rem;line-height:1.25}
.grid9 td span{display:block;color:var(--text-secondary);font-size:.76rem;margin-top:.2rem;line-height:1.35}
.grid9 .mid td{background:var(--surface-2)}

/* The monthly list. The month lives in the heading on purpose: a forecast that
   states its own month cannot quietly go stale on somebody. */
.month{list-style:none;padding:0;margin:1.1rem 0}
.month li{display:flex;gap:.7rem;padding:.6rem 0;border-bottom:1px solid var(--line);
  font-size:.95rem;color:var(--text-secondary)}
.month li:last-child{border-bottom:0}
.month .glyph{flex:none;width:1.5rem;text-align:center;font-size:1.2rem;color:var(--success)}
.month b{color:var(--text)}
.dates{font-size:.82rem;color:var(--text-secondary)}

/* The zodiac wheel: twelve tappable signs and one card that pops in below them.
   Same move as the sign-up box: the content swaps, the page never moves, and
   nothing floats over the assistant button in the corner. */
.signs{display:grid;grid-template-columns:repeat(4,1fr);gap:.55rem;margin:1.3rem 0 1rem}
.sign{display:flex;flex-direction:column;align-items:center;gap:.12rem;padding:.7rem .3rem;
  background:var(--surface);border:1px solid var(--line);border-radius:14px;color:var(--text);
  font:inherit;text-align:center;cursor:pointer;border-bottom-width:1px;
  transition:transform .12s,border-color .12s,background .12s}
.sign:hover{border-color:var(--accent);transform:translateY(-2px)}
.sign .glyph{font-size:1.45rem;line-height:1;color:var(--success)}
.sign .name{font-size:.84rem;font-weight:700;letter-spacing:-.01em}
.sign .dates{font-size:.66rem;color:var(--text-secondary);letter-spacing:.02em}
.sign[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-light)}
.sign[aria-pressed="true"] .glyph{color:var(--accent)}
.sign-pop{display:none;position:relative;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);padding:1.2rem 3.2rem 1.2rem 1.4rem;margin:.3rem 0 1.2rem;
  box-shadow:0 10px 40px rgba(0,0,0,.45)}
.sign-pop.open{display:block;animation:pop .18s ease-out}
@keyframes pop{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.sign-pop .row{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem}
.sign-pop h3{margin:0;font-size:1.25rem;font-weight:800;letter-spacing:-.02em;padding-right:.4rem}
.sign-pop h3 .glyph{color:var(--accent);margin-right:.35rem}
.sign-pop .dates{font-size:.8rem;color:var(--text-secondary);margin:.15rem 0 0}
.sign-pop .facts{font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--success);margin:.6rem 0 0}
.sign-pop .hi,.sign-pop .lo{margin:.55rem 0 0;font-size:.95rem;color:var(--text-secondary)}
.sign-pop .hi b{color:var(--accent)}
.sign-pop .lo b{color:var(--text)}
.sign-pop .flirt{margin-top:.7rem;font-size:.92rem;color:var(--text-secondary);font-style:italic}
.sign-pop .note{margin-top:.9rem;padding-top:.7rem;border-top:1px solid var(--line);
  font-size:.8rem;color:var(--text-secondary)}
.sign-pop .x{position:absolute;top:.8rem;right:.8rem;background:none;border:1px solid var(--line);
  color:var(--text-secondary);border-radius:10px;width:2rem;height:2rem;cursor:pointer;
  font-size:1rem;line-height:1;font-family:inherit;padding:0}
.sign-pop .x:hover{color:var(--accent);border-color:var(--accent)}
footer{margin:3rem 0 2.5rem;padding-top:1.4rem;font-size:.85rem;color:var(--text-secondary);border-top:1px solid var(--line)}
footer a{color:var(--text-secondary);border:0}
footer a:hover{color:var(--accent)}
.cta{display:inline-block;margin-top:.6rem;padding:.8rem 1.5rem;border-radius:12px;background:var(--accent);
  color:#fff;font-weight:600;border:0;box-shadow:0 0 24px rgba(255,45,120,.35)}
.cta:hover{color:#fff}
@media (max-width:480px){h1{font-size:2rem}
  .map{font-size:.88rem}
  .map th,.map td{padding:.55rem .45rem}
  .signs{grid-template-columns:repeat(3,1fr)}
  .month li{font-size:.9rem}
  .month .glyph{width:1.3rem}
  .grid9{border-spacing:3px}
  .grid9 td b{font-size:.8rem}
  .grid9 td span{font-size:.72rem}}