@font-face { font-family: "Manrope"; src: url("/static/fonts/manrope-latin-wght-normal.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url("/static/fonts/newsreader-latin-standard-normal.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url("/static/fonts/newsreader-latin-standard-italic.woff2") format("woff2"); font-weight: 200 800; font-style: italic; font-display: swap; }
[hidden] { display: none !important; }
:root {
  --night: #09080e;
  --night-2: #0f0d18;
  --surface: #14121f;
  --line: rgba(212, 182, 122, .18);
  --line-strong: rgba(212, 182, 122, .42);
  --gold: #d4b67a;
  --gold-hi: #ead9ab;
  --ivory: #f2ece0;
  --text-2: #c9c3b6;
  --ash: #948fa1;
  --western: #dcc089;
  --vedic: #e39a5e;
  --progressed: #a690e6;
  --timing: #86b8d8;
  --cross: #f3eee4;
  --bazi: #e5806e;
  --numerology: #a9d49c;
  --serif: "Newsreader", Georgia, serif;
  --sans: "Manrope", system-ui, sans-serif;
  --display: var(--serif);
  --text: var(--serif);
  --wrap: 1200px;
  --gutter: clamp(20px, 5vw, 56px);
  --section: clamp(96px, 13vw, 168px);
}
* { box-sizing: border-box; }
html { color-scheme: dark; scroll-behavior: smooth; scroll-padding-top: 88px; }
body { margin: 0; background: var(--night); color: var(--ivory); font: 400 17px/1.7 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; letter-spacing: -.02em; margin: 0; font-optical-sizing: auto; }
p { margin: 0; }
a { color: var(--gold-hi); text-decoration: none; }
::selection { background: rgba(212,182,122,.32); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 2px; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }

/* ------------------------------------------------------------- shared ---- */
.brand { display: inline-flex; align-items: center; gap: 12px; color: var(--ivory); }
.brand svg { width: 38px; height: 38px; color: var(--gold); }
.brand span { font: 600 19px var(--sans); letter-spacing: .3em; }
.btn, .cta { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: 600 15px var(--sans); letter-spacing: .01em;
  color: #15110a; background: var(--gold-hi); border: 1px solid var(--gold-hi); border-radius: 999px; padding: 15px 30px; cursor: pointer;
  transition: background .2s, border-color .2s, color .2s; }
.btn:hover, .cta:hover { background: #f6e8c2; border-color: #f6e8c2; }
.btn.ghost { background: transparent; color: var(--ivory); border-color: var(--line-strong); }
.btn.ghost:hover { border-color: var(--gold-hi); color: var(--gold-hi); }
.btn.small, .cta.small { padding: 10px 20px; font-size: 14px; }
.btn:disabled, .cta:disabled { opacity: .6; cursor: progress; }
.link { background: none; border: 0; color: var(--gold-hi); font: 600 14px var(--sans); cursor: pointer; padding: 0; }
.err { color: #f0a493; font-size: 15px; min-height: 1.4em; margin-top: 12px; }
.section-title { font-size: clamp(36px, 4.6vw, 60px); line-height: 1.08; font-weight: 400; max-width: 18ch; }
.section-sub { color: var(--text-2); font-size: 18px; line-height: 1.6; max-width: 52ch; margin-top: 20px; }

/* ----------------------------------------------------------------- nav ---- */
.nav { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 40px; padding: 20px var(--gutter);
  background: rgba(9, 8, 14, .72); backdrop-filter: blur(14px); border-bottom: 1px solid transparent; transition: border-color .3s; }
.nav nav { display: flex; gap: 32px; margin-left: auto; }
.nav nav a { color: var(--text-2); font-size: 14.5px; font-weight: 500; }
.nav nav a:hover { color: var(--ivory); }

/* ---------------------------------------------------------------- hero ---- */
.hero { max-width: 1320px; margin: 0 auto; padding: clamp(56px, 9vw, 120px) var(--gutter) var(--section);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: center; position: relative; }
.hero::before { content: ""; position: absolute; inset: -20% -10% auto 40%; height: 900px; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(120, 96, 210, .22), transparent 70%); }
.hero h1 { font-size: clamp(56px, 8.4vw, 116px); line-height: .98; letter-spacing: -.035em; font-weight: 400; }
.lede { font-size: clamp(18px, 1.5vw, 20px); line-height: 1.65; color: var(--text-2); max-width: 34em; margin-top: 28px; }
.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 44px; }
.trust { list-style: none; padding: 0; margin: 64px 0 0; display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 44px; }
.trust li { display: grid; gap: 2px; border-left: 1px solid var(--line-strong); padding-left: 16px; }
.trust b { font: 400 24px var(--serif); color: var(--gold-hi); }
.trust span { font-size: 13.5px; color: var(--ash); }
.sky { margin: 0; text-align: center; }
.sky svg { width: min(100%, 620px); height: auto; }
.sky figcaption { color: var(--ash); font-size: 13.5px; margin: 8px auto 0; max-width: 36em; }
.spin { transform-origin: 300px 300px; animation: turn 300s linear infinite; }
@keyframes turn { to { transform: rotate(-360deg); } }

/* ------------------------------------------------------------- systems ---- */
.band-systems { background: var(--night-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: var(--section) 0; }
.systems { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 56px 64px; margin-top: 80px; }
.systems article { border-top: 1px solid var(--line-strong); padding-top: 26px; }
.systems h3 { font-size: 30px; margin-bottom: 12px; color: var(--gold-hi); }
.systems p { color: var(--text-2); max-width: 36ch; font-size: 16.5px; line-height: 1.6; }

/* ----------------------------------------------------------------- how ---- */
.how { padding-top: var(--section); padding-bottom: var(--section); }
.steps { list-style: none; padding: 0; margin: 80px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 64px; counter-reset: s; }
.steps .num { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-strong);
  font: 400 20px var(--serif); color: var(--gold-hi); margin-bottom: 28px; }
.steps h3 { font-size: 28px; margin-bottom: 12px; }
.steps p { color: var(--text-2); }

/* -------------------------------------------------------------- unique ---- */
.unique { background: var(--night-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: var(--section) 0; }
.features { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; margin-top: 80px; }
.features article { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 40px 40px 44px; }
.features svg { width: 100%; max-width: 280px; height: auto; display: block; margin-bottom: 30px; }
.features h3 { font-size: 28px; margin-bottom: 12px; }
.features p { color: var(--text-2); max-width: 44ch; }

/* --------------------------------------------------------------- begin ---- */
.begin { padding: var(--section) var(--gutter); position: relative; }
.begin::before { content: ""; position: absolute; inset: 10% 20%; z-index: -1; background: radial-gradient(closest-side, rgba(212,182,122,.08), transparent); }
.begin-inner { max-width: 880px; margin: 0 auto; text-align: center; }
.begin .section-title { margin: 0 auto 56px; }
.sentence { font: 300 clamp(24px, 2.6vw, 34px)/1.75 var(--serif); }
.sentence p { margin: 0; }
@media (min-width: 981px) { .sentence p { white-space: nowrap; } }
.sentence input:not([type=checkbox]) { font: inherit; color: var(--gold-hi); background: transparent; border: 0; border-bottom: 1px solid var(--line-strong);
  padding: 0 4px; border-radius: 0; min-width: 0; text-align: center; }
.sentence input:not([type=checkbox]):focus { outline: none; border-bottom-color: var(--gold-hi); }
.sentence input::placeholder { color: rgba(234,217,171,.36); font-style: italic; }
.sentence input[type=date], .sentence input[type=time] { color-scheme: dark; }
.sentence input[type=date]::-webkit-calendar-picker-indicator, .sentence input[type=time]::-webkit-calendar-picker-indicator { filter: invert(.75) sepia(.6); cursor: pointer; }
.form-options { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px 36px; margin-top: 36px; font: 400 15px var(--sans); color: var(--text-2); }
.form-options label { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
.form-options input[type=checkbox] { accent-color: var(--gold); width: 16px; height: 16px; }
.form-options select { font: 500 14px var(--sans); color: var(--ivory); background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; }
.form-note { font: 400 14px var(--sans); color: var(--ash); margin-top: 14px; min-height: 1em; }
.sentence .btn { margin-top: 40px; }
.place { position: relative; display: inline-block; }
.dropdown { display: block; position: absolute; left: 50%; transform: translateX(-50%); top: 100%; z-index: 9; margin-top: 8px; padding: 6px;
  min-width: min(460px, 86vw); text-align: left; background: #191628; border: 1px solid var(--line-strong); border-radius: 12px;
  font: 400 15px/1.4 var(--sans); box-shadow: 0 24px 60px rgba(0,0,0,.5); }
.dropdown [role=option] { display: block; padding: 10px 14px; cursor: pointer; border-radius: 8px; white-space: normal; }
.dropdown [role=option]:hover, .dropdown [role=option][aria-selected=true] { background: rgba(166,144,230,.16); }
.dropdown small { color: var(--ash); }

/* ------------------------------------------------------------- pricing ---- */
.pricing { padding-top: var(--section); padding-bottom: var(--section); }
.plans { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-top: 72px; }
.plans article { border: 1px solid var(--line); border-radius: 18px; padding: 36px 30px; display: flex; flex-direction: column; background: var(--night-2); }
.plans article.featured { border-color: var(--gold); background: linear-gradient(180deg, rgba(212,182,122,.08), var(--night-2) 60%); }
.plans h3 { font-size: 26px; }
.price { font: 400 46px/1.1 var(--serif); margin: 18px 0 28px; letter-spacing: -.02em; min-height: 82px; }
.price span { display: block; font: 400 13.5px var(--sans); color: var(--ash); margin-top: 6px; letter-spacing: 0; }
.plans ul { list-style: none; padding: 0; margin: 0 0 36px; display: grid; gap: 12px; align-content: start; color: var(--text-2); font-size: 15.5px; flex: 1; }
.plans li { padding-left: 22px; position: relative; }
.plans li.dev { color: var(--ash); font-size: 13.5px; padding-left: 0; }
.plans li.dev::before { display: none; }
.plans li::before { content: ""; position: absolute; left: 0; top: .72em; width: 10px; height: 1px; background: var(--gold); }
.plans .btn { width: 100%; }

/* ----------------------------------------------------------------- faq ---- */
.faq { padding-top: 0; padding-bottom: var(--section); display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 64px; }
.faq-list { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; font: 400 23px var(--serif); padding: 26px 40px 26px 0; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 22px; font: 300 26px var(--sans); color: var(--gold); transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { color: var(--text-2); padding: 0 0 28px; max-width: 60ch; }

/* -------------------------------------------------------------- footer ---- */
.site-foot { border-top: 1px solid var(--line); padding: 72px 0 80px; background: var(--night-2); }
.foot-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px 64px; }
.foot-contact { color: var(--ash); font-size: 14px; margin-top: 10px; }
.foot-tag { font: italic 400 20px var(--serif); color: var(--text-2); margin-top: 18px; }
.foot-links { display: grid; grid-template-columns: repeat(2, auto); gap: 12px 40px; justify-content: end; align-content: start; }
.foot-links a { color: var(--text-2); font-size: 15px; }
.fine { grid-column: 1 / -1; color: var(--ash); font-size: 13.5px; max-width: 80ch; border-top: 1px solid var(--line); padding-top: 28px; }

/* ============================================================== RESULTS ==== */
.bar { position: sticky; top: 0; z-index: 10; display: flex; gap: 36px; align-items: center; padding: 18px var(--gutter);
  background: rgba(9, 8, 14, .82); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.bar-links { display: flex; gap: 28px; margin-left: auto; }
.bar-links a { color: var(--text-2); font-size: 14.5px; font-weight: 500; }
.bar-links a:hover { color: var(--ivory); }
.folio-head { max-width: 1320px; margin: 0 auto; padding: clamp(72px, 10vw, 140px) var(--gutter) 64px; }
.who { color: var(--ash); font-size: 15px; margin-bottom: 28px; }
.folio-head h1 { font-size: clamp(56px, 8.6vw, 128px); line-height: .96; letter-spacing: -.035em; color: var(--gold-hi); max-width: 13ch; }
.subtitle { font: italic 300 clamp(21px, 2vw, 26px)/1.5 var(--serif); max-width: 40em; margin-top: 36px; color: var(--text-2); }
.key { font-size: 13.5px; color: var(--ash); margin-top: 40px; display: flex; gap: 22px; flex-wrap: wrap; align-items: center; }
.mark { display: inline-flex; align-items: center; gap: 8px; }
.mark::before { content: ""; width: 16px; height: 3px; border-radius: 2px; background: var(--c); }

.folio { max-width: 1320px; margin: 0 auto; padding: 0 var(--gutter) 40px; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 104px); }
.plate { position: sticky; top: 92px; align-self: start; }
.plate svg { width: 100%; height: auto; display: block; }
.plate-cap { color: var(--ash); font-size: 13px; text-align: center; margin: 8px 0 32px; }
.toc { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line); }
.toc li { border-bottom: 1px solid var(--line); }
.toc a { display: flex; justify-content: space-between; gap: 12px; padding: 13px 2px; color: var(--text-2); font-size: 15px; }
.toc a.on, .toc a:hover { color: var(--gold-hi); }
.toc span { color: var(--ash); font-size: 12.5px; }

.prose { max-width: 42em; padding-bottom: 8vh; font: 400 19.5px/1.78 var(--serif); }
.prose section { padding: 8px 0 96px; scroll-margin-top: 96px; }
.prose h2 { font-size: clamp(38px, 3.8vw, 54px); line-height: 1.05; margin-bottom: 16px; }
.lenses { font: 400 13px var(--sans); color: var(--ash); margin: 0 0 34px; display: flex; gap: 18px; flex-wrap: wrap; }
.prose p { margin: 0 0 1.15em; hyphens: auto; }
.prose section > .lenses + p::first-letter, .prose .chapter > .lenses + p::first-letter { font: 400 3.5em/.8 var(--serif); float: left; margin: .07em .1em 0 0; padding-left: .02em; color: var(--gold-hi); }
sup.fn { line-height: 0; }
sup.fn button { font: 700 11.5px var(--sans); color: var(--c, var(--gold)); background: none; border: 0; padding: 0 1px; cursor: pointer; vertical-align: 2px; }
sup.fn button:hover { text-decoration: underline; }

.bridge { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 20px; margin: 44px 0 18px; }
.bridge .side { display: grid; gap: 4px; }
.bridge .side small { font: 400 12.5px var(--sans); color: var(--ash); }
.bridge .side b { font: 400 clamp(30px, 3vw, 44px)/1 var(--serif); }
.bridge .side .deg { font: 400 13px var(--sans); color: var(--ash); font-variant-numeric: tabular-nums; }
.bridge .w b { color: var(--western); } .bridge .v b { color: var(--vedic); } .bridge .v { text-align: right; }
.bridge .point { font: 500 13px var(--sans); color: var(--ivory); align-self: center; text-align: center; padding: 0 14px; border-left: 1px solid var(--line); border-right: 1px solid var(--line); }

.constellation { width: 100%; height: auto; margin: 16px 0 34px; }
.arc { margin: 26px 0 40px; }
.arc svg { width: 100%; height: auto; overflow: visible; }
.clocks { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); margin: 10px 0 40px; border-radius: 12px; overflow: hidden; }
.clock { padding: 18px 12px 16px; text-align: center; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); font-family: var(--sans); }
.clock .g { font-size: 30px; line-height: 1.1; display: block; color: var(--ivory); }
.clock b { display: block; font-weight: 600; font-size: 14.5px; margin-top: 4px; }
.clock small { display: block; color: var(--ash); font-size: 12.5px; line-height: 1.35; margin-top: 3px; }
.clock.shared { background: rgba(212,182,122,.07); }
.clock.shared .g, .clock.shared b { color: var(--gold-hi); }
.questions { list-style: none; padding: 0; margin: 0; }
.questions li { font: italic 400 clamp(24px, 2.4vw, 31px)/1.35 var(--serif); padding: 26px 0; border-bottom: 1px solid var(--line); }
.elements { display: grid; gap: 10px; margin: 18px 0 36px; font-family: var(--sans); }
.elements .row { display: grid; grid-template-columns: 96px 1fr 46px; gap: 14px; align-items: center; font-size: 15px; }
.elements .track { height: 8px; background: rgba(255,255,255,.05); border-radius: 4px; overflow: hidden; }
.elements .fill { height: 100%; border-radius: 4px; }
.elements small { color: var(--ash); font-size: 12.5px; }

.wide { max-width: 1320px; margin: 0 auto; padding: var(--section) var(--gutter) 40px; border-top: 1px solid var(--line); }
.wide h2 { font-size: clamp(38px, 4vw, 56px); }
.intro { color: var(--text-2); max-width: 46em; margin-top: 18px; }
.bands { display: grid; gap: 6px; margin: 56px 0 8px; position: relative; font-family: var(--sans); }
.bandlabel { font-size: 13px; color: var(--ash); margin-top: 14px; }
.band { display: flex; height: 36px; border-radius: 6px; overflow: hidden; }
.seg { height: 100%; display: flex; align-items: center; padding: 0 9px; font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; color: #15121f; border-right: 1px solid rgba(9,8,14,.5); }
.ticks { position: relative; height: 28px; }
.tick { position: absolute; top: 6px; width: 1px; height: 16px; background: var(--timing); }
.cursor { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--gold-hi); box-shadow: 0 0 12px var(--gold); pointer-events: none; }
input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; background: transparent; margin: 18px 0 40px; }
input[type=range]::-webkit-slider-runnable-track { height: 1px; background: var(--line-strong); }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%; background: var(--gold-hi); margin-top: -11px; box-shadow: 0 0 0 8px rgba(212,182,122,.16); cursor: grab; }
input[type=range]::-moz-range-track { height: 1px; background: var(--line-strong); }
input[type=range]::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--gold-hi); border: 0; }
.agepanel { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: clamp(24px, 5vw, 72px); }
.agenum { font: 400 128px/.85 var(--serif); color: var(--gold-hi); letter-spacing: -.04em; }
.ageyears { color: var(--ash); margin-top: 14px; font-size: 14px; }
.agegrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 48px; }
.agegrid > div { border-top: 2px solid var(--c); padding-top: 14px; }
.agegrid small { display: block; color: var(--ash); font-size: 12.5px; }
.agegrid b { font: 400 26px/1.25 var(--serif); display: block; margin: 4px 0 6px; }
.agegrid p { margin: 0; font-size: 15.5px; color: var(--text-2); }
.two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); }
.journal { margin: 24px 0; font-size: 15px; }
.journal summary { cursor: pointer; color: var(--gold-hi); font-weight: 500; }
textarea, .askrow input, .gate input { width: 100%; font: 400 16px var(--sans); color: var(--ivory); background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; }
textarea:focus, .askrow input:focus, .gate input:focus { outline: none; border-color: var(--gold); }
textarea { min-height: 110px; margin-top: 12px; resize: vertical; }
.reading { margin-top: 36px; font: 400 18.5px/1.75 var(--serif); }
.reading h1 { font-size: 46px; color: var(--gold-hi); margin: 10px 0 20px; }
.reading h2 { font-size: 30px; margin: 34px 0 12px; }
.reading p, .chat p { margin: 0 0 1em; }
.typing::after { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); margin-left: 6px; animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .2; } }
.suggest { display: grid; gap: 4px; margin: 28px 0; }
.suggest button { text-align: left; font: italic 400 19px var(--serif); color: var(--ivory); background: none; border: 0; border-bottom: 1px solid var(--line); padding: 14px 0; cursor: pointer; }
.suggest button:hover { color: var(--gold-hi); }
.chat { display: grid; gap: 20px; font: 400 18px/1.7 var(--serif); }
.chat .you { font-style: italic; color: var(--gold-hi); }
.askrow, .gate { display: flex; gap: 10px; margin-top: 20px; }
#calcs summary { list-style: none; cursor: pointer; }
#calcs summary::-webkit-details-marker { display: none; }
#calcs summary h2::after { content: " +"; color: var(--gold); }
#calcs details[open] summary h2::after { content: " −"; }
.tables { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; margin-top: 36px; }
.tables h3 { font-size: 24px; margin-bottom: 10px; }
table { width: 100%; border-collapse: collapse; font-size: 14.5px; font-variant-numeric: tabular-nums; }
th { text-align: left; font-weight: 500; color: var(--ash); font-size: 12.5px; }
td, th { padding: 8px 10px 8px 0; border-bottom: 1px solid var(--line); }
tr.now td { color: var(--gold-hi); }

/* forecast */
.tabs { display: flex; gap: 4px; flex-wrap: wrap; margin: 44px 0 36px; border-bottom: 1px solid var(--line); }
.tabs button { font: 500 15px var(--sans); color: var(--ash); background: none; border: 0; padding: 12px 18px; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tabs button[aria-selected=true] { color: var(--gold-hi); border-bottom-color: var(--gold); }
.highlights { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin: 14px 0 44px; }
.highlights button { text-align: left; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; color: var(--text-2); padding: 16px 18px; cursor: pointer; font: 400 13.5px/1.45 var(--sans); transition: border-color .2s; }
.highlights button:hover { border-color: var(--gold); }
.highlights button b { display: block; font: 400 20px var(--serif); color: var(--gold-hi); margin-bottom: 4px; }
.fc-grid { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.cal { position: sticky; top: 92px; font-family: var(--sans); }
.cal .wk { display: grid; grid-template-columns: 36px repeat(7, 1fr); gap: 5px; margin-bottom: 5px; }
.cal .wk span { font-size: 11.5px; color: var(--ash); align-self: center; }
.cal .dow { font-size: 11.5px; color: var(--ash); text-align: center; }
.cell { aspect-ratio: 1; border: 0; border-radius: 5px; cursor: pointer; font: 500 12px var(--sans); color: rgba(9,8,14,.75); position: relative; }
.cell.quiet { background: #1b1830; color: var(--ash); } .cell.steady { background: #2f2856; color: #cfc8e6; }
.cell.active { background: #6a59a2; color: #f1ecff; } .cell.high { background: #c7a35f; } .cell.peak { background: #f2dca2; }
.cell.anomaly::after { content: ""; position: absolute; inset: -3px; border: 2px solid var(--gold-hi); border-radius: 7px; }
.cell[aria-pressed=true] { outline: 2px solid var(--ivory); outline-offset: 2px; }
.legend { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12.5px; color: var(--ash); margin-top: 14px; align-items: center; }
.legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -1px; margin-right: 5px; }
.daypanel h3 { font-size: clamp(32px, 3.2vw, 44px); line-height: 1.1; }
.daypanel .lvl { color: var(--ash); margin: 10px 0 22px; font-size: 14.5px; }
.daypanel .headline { font: italic 400 23px/1.45 var(--serif); color: var(--gold-hi); margin: 0 0 28px; }
.daypanel h4 { font: 600 12.5px var(--sans); color: var(--ash); letter-spacing: .02em; margin: 36px 0 14px; border-top: 1px solid var(--line); padding-top: 18px; }
.convergence { border: 1px solid var(--gold); background: rgba(212,182,122,.06); padding: 20px 22px; border-radius: 14px; margin: 0 0 28px; }
.convergence b { font: 400 25px var(--serif); color: var(--gold-hi); display: block; margin-bottom: 6px; }
.weather { display: grid; grid-template-columns: 96px 1fr; gap: 12px 22px; margin: 0; font: 400 18px/1.6 var(--serif); }
.weather dt { font: 500 13px/2 var(--sans); color: var(--ash); } .weather dd { margin: 0; }
.evlist { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; font: 400 17.5px/1.6 var(--serif); }
.evlist li { border-left: 2px solid var(--c); padding-left: 16px; }
.evlist li b { font-weight: 500; } .evlist small { color: var(--ash); display: block; font: 400 12.5px var(--sans); margin: 2px 0 2px; }
.clockgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 32px; font-size: 15px; }
.clockgrid small { display: block; color: var(--ash); font-size: 12.5px; margin-bottom: 2px; }
.reflect { display: grid; gap: 22px; }
.reflect label { font: italic 400 21px/1.4 var(--serif); }
.reflect textarea { min-height: 76px; }
.monthlist > div, .yearlist > div { border-top: 1px solid var(--line); padding: 36px 0; }
.monthlist h3, .yearlist h3 { font-size: 34px; margin-bottom: 8px; }
.monthlist h4 { font: 600 12.5px var(--sans); color: var(--ash); margin: 22px 0 8px; }
.monthlist ul, .yearlist ul { margin: 8px 0 0; padding-left: 18px; }
.monthlist li, .yearlist li { margin-bottom: 6px; }
.meta { color: var(--ash); font-size: 14.5px; }

/* accounts */
.navlink { background: none; border: 0; color: var(--text-2); font: 500 14.5px var(--sans); cursor: pointer; padding: 6px 4px; }
.navlink:hover { color: var(--ivory); }
.nav .acct-btn { margin-left: 8px; }
.modal { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; padding: 20px; background: rgba(5,4,10,.72); backdrop-filter: blur(6px); }
.modal-card { position: relative; width: min(480px, 100%); background: #14121f; border: 1px solid var(--line-strong); border-radius: 20px; padding: 40px 36px 36px; box-shadow: 0 40px 100px rgba(0,0,0,.6); }
.modal-card .close { position: absolute; top: 12px; right: 16px; background: none; border: 0; color: var(--gold-hi); font-size: 30px; cursor: pointer; }
.modal-card h3 { font-size: 32px; margin-bottom: 10px; }
.modal-card p { color: var(--text-2); }
.modal-card input[type=email], .modal-card input[type=text] { width: 100%; margin: 22px 0 14px; font: 400 16px var(--sans); color: var(--ivory); background: var(--night); border: 1px solid var(--line-strong); border-radius: 12px; padding: 14px 16px; }
.modal-card input:focus { outline: none; border-color: var(--gold); }
.modal-card .btn { width: 100%; }
.modal-card .row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.modal-card .row .btn { width: auto; flex: 1; }
.acct-grid { display: grid; grid-template-columns: auto 1fr; gap: 8px 18px; margin: 20px 0; font-size: 15px; }
.acct-grid dt { color: var(--ash); } .acct-grid dd { margin: 0; }
.danger { color: #f0a493 !important; border-color: rgba(240,164,147,.4) !important; background: transparent !important; }
.toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 50; background: #1b1830; border: 1px solid var(--gold); color: var(--ivory); padding: 14px 22px; border-radius: 999px; font-size: 15px; box-shadow: 0 20px 50px rgba(0,0,0,.5); }
.mycharts { padding-top: var(--section); }
.chartlist { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; margin-top: 48px; }
.chartlist button { text-align: left; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 22px 24px; color: var(--ivory); cursor: pointer; font: 400 14px var(--sans); }
.chartlist button:hover { border-color: var(--gold); }
.chartlist b { display: block; font: 400 24px var(--serif); margin-bottom: 6px; color: var(--gold-hi); }
.chartlist span { color: var(--ash); }
.savebar { margin-top: 28px; font-size: 14.5px; color: var(--text-2); display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.renewal { color: var(--ash); font-size: 14px; margin-top: 28px; max-width: 70ch; }
.legal { padding-top: 80px; padding-bottom: 120px; max-width: 760px; }
.legal h1 { font-size: clamp(44px, 6vw, 72px); margin-bottom: 12px; }
.legal h2 { font-size: 28px; margin: 48px 0 12px; }
.legal p { color: var(--text-2); font-size: 17px; margin-bottom: 14px; }

/* compatibility */
.compat-form { text-align: left; margin-top: 36px; font-size: clamp(20px, 2vw, 26px); }
.compat-form .form-options { justify-content: flex-start; }
.compat-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px 56px; margin-top: 44px; }
.compat-grid h3 { font-size: 26px; margin-bottom: 12px; }
.compat-score { font: 400 64px/1 var(--serif); color: var(--gold-hi); }
.compat-score small { font: 400 16px var(--sans); color: var(--ash); margin-left: 8px; }
.contact-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.contact-list li { border-left: 2px solid var(--c, var(--gold)); padding-left: 14px; }
.contact-list small { display: block; color: var(--ash); }
@media (max-width: 980px) { .compat-grid { grid-template-columns: 1fr; } }

/* the chapter you are in */
.prose .chapter > p { font-size: 1.06em; }

/* library */
.lib-glance { margin-top: 40px; }
.lib-glance h3, .lib-shelf-head, .lib-archive h3 { font-size: 26px; margin-bottom: 14px; }
.week-strip { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.week-strip div { border-top: 3px solid var(--lv, var(--line)); padding: 10px 4px 0; font-size: 14px; }
.week-strip b { display: block; font: 400 20px var(--serif); color: var(--ivory); }
.week-strip small { color: var(--ash); display: block; line-height: 1.4; margin-top: 4px; }
.week-strip .anom b::after { content: ""; display: inline-block; width: 7px; height: 7px; margin-left: 6px; border-radius: 50%; border: 1px solid var(--gold-hi); vertical-align: middle; }
.shelf { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; margin: 48px 0 12px; }
.shelf article { border: 1px solid var(--line); border-radius: 14px; padding: 26px 24px; background: var(--night-2); display: flex; flex-direction: column; gap: 6px; }
.shelf article.deep { border-color: var(--line-strong); }
.shelf article.locked { opacity: .62; }
.shelf h3 { font-size: 24px; color: var(--gold-hi); }
.shelf p { margin: 0; color: var(--ash); font-size: 14.5px; }
.shelf .btn { margin-top: auto; align-self: flex-start; }
.shelf p:last-of-type { margin-bottom: 18px; }
.lib-archive { margin-top: 48px; }
.lib-archive ul { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line); }
.lib-archive li { border-bottom: 1px solid var(--line); }
.lib-archive button { all: unset; box-sizing: border-box; cursor: pointer; display: grid; grid-template-columns: 11em 1fr auto; gap: 16px; width: 100%; padding: 14px 4px; }
.lib-archive button:hover b, .lib-archive button:focus-visible b { color: var(--gold-hi); }
.lib-archive b { font: 400 19px var(--serif); }
.lib-archive span { color: var(--ash); font-size: 14px; }
.lib-notify { margin-top: 26px; }
.edition:not(:empty) { margin-top: 36px; border-top: 1px solid var(--line-strong); padding-top: 12px; }
@media (max-width: 720px) {
  .week-strip { grid-template-columns: 1fr; }
  .week-strip div { display: grid; grid-template-columns: 7em 1fr; border-top: 0; border-left: 3px solid var(--lv, var(--line)); padding: 6px 10px; }
  .lib-archive button { grid-template-columns: 1fr; gap: 2px; }
}

/* deep codex */
.codex h2 { font-size: 36px; margin-top: 64px; padding-top: 28px; border-top: 1px solid var(--line); }
.codex h2:first-of-type { margin-top: 24px; }
.codex h3 { font-size: 24px; margin: 28px 0 10px; }
.codex ul { padding-left: 20px; }
@media print {
  body { background: #fff !important; color: #1a1712 !important; font-size: 12pt; }
  body > *:not(#results), .site-foot, .bar { display: none !important; }
  body:not([data-print=library]) #results > *:not(#codex), #codex > *:not(#codexOut) { display: none !important; }
  body[data-print=library] #results > *:not(#library), #library > *:not(#edOut) { display: none !important; }
  #library { border: 0; padding: 0; max-width: none; }
  #codex { border: 0; padding: 0; max-width: none; }
  .codex { color: #1a1712; font-size: 12pt; line-height: 1.6; }
  .codex h1 { color: #6b5420; font-size: 30pt; }
  .codex h2 { color: #1a1712; border-top: 1px solid #c9b78f; page-break-before: always; }
  .codex h2:first-of-type { page-break-before: avoid; }
  sup.fn button { color: #6b5420 !important; }
}

/* margin note */
.note { position: fixed; right: 0; top: 0; bottom: 0; width: min(460px, 100%); z-index: 20; overflow-y: auto;
  background: #131020; border-left: 1px solid var(--line-strong); padding: 44px 36px; box-shadow: -40px 0 80px rgba(0,0,0,.5); }
.note .close { position: absolute; top: 14px; right: 18px; background: none; border: 0; color: var(--gold-hi); font-size: 32px; cursor: pointer; }
.note small { color: var(--ash); font-size: 12.5px; }
.note h3 { font-size: 32px; margin: 8px 0 18px; color: var(--c, var(--ivory)); }
.note h4 { font: 600 12.5px var(--sans); color: var(--ash); margin: 24px 0 4px; }
.note p { margin: 0; font: 400 17px/1.6 var(--serif); }

/* --------------------------------------------------------- responsive ---- */
@media (max-width: 1100px) {
  .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nav nav { display: none; }
}
@media (max-width: 980px) {
  .hero, .folio, .two, .tables, .fc-grid, .faq { grid-template-columns: 1fr; }
  .sky { order: -1; } .sky svg { width: min(100%, 440px); }
  .systems, .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .features { grid-template-columns: 1fr; }
  .plate { position: static; max-width: 520px; margin: 0 auto; }
  .cal { position: static; }
  .bar-links { display: none; }
  .bar .btn { margin-left: auto; }
  .agepanel { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr; } .foot-links { justify-content: start; }
}
@media (max-width: 600px) {
  body { font-size: 16px; }
  .systems, .steps, .plans, .agegrid { grid-template-columns: 1fr; }
  .trust { grid-template-columns: 1fr; gap: 18px; }
  .nav .btn { display: none; }
  .features article { padding: 28px 24px; }
  .bridge { grid-template-columns: 1fr; } .bridge .v { text-align: left; } .bridge .point { border: 0; text-align: left; padding: 0; }
  .agenum { font-size: 92px; }
  .weather { grid-template-columns: 1fr; gap: 2px 0; } .weather dd { margin-bottom: 12px; }
  .sentence input:not([type=checkbox]) { max-width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .spin { animation: none; } html { scroll-behavior: auto; } }

/* ----------------------------------------------------------- landing v2 ---- */
.cta-note { align-self: center; color: var(--ash); font-size: 14px; }
.turns { margin: 0; }
.turns svg { width: 100%; height: auto; display: block; }
.turns figcaption { color: var(--ash); font-size: 13.5px; margin: 14px 0 0; max-width: 44em; line-height: 1.5; }
.turns .fade { opacity: 0; animation: appear .7s ease-out forwards; }
.turns .grow { transform-origin: center; transform: scaleY(.92); opacity: 0; animation: appear .9s ease-out 1.1s forwards; }
@keyframes appear { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .turns .fade, .turns .grow { opacity: 1; animation: none; transform: none; } }

.what, .why, .stays { padding-top: var(--section); padding-bottom: var(--section); }
.what-grid, .stays-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 72px; margin-top: 64px; }
.what-grid h3, .stays-grid h3 { font-size: 28px; margin-bottom: 18px; color: var(--gold-hi); }
.what-grid ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.what-grid li { position: relative; padding-left: 22px; color: var(--text-2); font-size: 17.5px; line-height: 1.55; }
.what-grid li::before { content: ""; position: absolute; left: 0; top: .72em; width: 10px; height: 1px; background: var(--gold); }
.stays-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px; }
.stays-grid h3 { font-size: 24px; }
.stays-grid p { color: var(--text-2); }

.sample { background: var(--night-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: var(--section) 0; }
.excerpt { margin: 56px 0 0; max-width: 40em; font: 400 clamp(19px, 1.7vw, 22px)/1.75 var(--serif); color: var(--ivory); border-left: 2px solid var(--gold); padding-left: 32px; }
.excerpt p { margin: 0 0 1.2em; }
.excerpt p:last-child { margin-bottom: 0; }
.excerpt .src { display: block; margin-top: 22px; font: 400 13.5px var(--sans); color: var(--ash); }
.sample-actions { margin-top: 36px; }

.why-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 64px; margin-top: 56px; align-items: start; }
.why-lede { font: 400 clamp(19px, 1.6vw, 22px)/1.65 var(--serif); color: var(--text-2); max-width: 32em; }
.six { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line); }
.six li { display: grid; grid-template-columns: 9em 1fr; gap: 20px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.six b { font: 400 21px var(--serif); color: var(--gold-hi); }
.six span { color: var(--text-2); font-size: 15.5px; line-height: 1.5; }
.proof { list-style: none; padding: 0; margin: 72px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
.proof li { border-top: 1px solid var(--line-strong); padding-top: 20px; color: var(--text-2); line-height: 1.55; }
.proof b { display: block; font: 400 24px var(--serif); color: var(--gold-hi); margin-bottom: 8px; }

@media (max-width: 980px) {
  .what-grid, .why-grid { grid-template-columns: 1fr; gap: 40px; }
  .stays-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .proof { grid-template-columns: 1fr; gap: 28px; }
  .six li { grid-template-columns: 1fr; gap: 6px; }
}
@media (max-width: 600px) { .stays-grid { grid-template-columns: 1fr; } .excerpt { padding-left: 18px; } }

/* the first reading, after paying */
.btn.pulse { animation: pulse 1.6s ease-in-out 4; }
@keyframes pulse { 50% { box-shadow: 0 0 0 12px rgba(234,217,171,.18); } }
@media (prefers-reduced-motion: reduce) { .btn.pulse { animation: none; outline: 2px solid var(--gold); outline-offset: 4px; } }

/* ------------------------------------------------------- their own words ---- */
.moments { margin-top: 64px; border-top: 1px solid var(--line); padding-top: 40px; }
.moments h3 { font-size: 28px; margin-bottom: 10px; }
.momentrow { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; }
.momentrow input { font: 400 15.5px var(--sans); color: var(--ivory); background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 11px 14px; color-scheme: dark; }
.momentrow input[name=text] { flex: 1 1 260px; }
.momentlist { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 10px; }
.momentlist li { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; }
.momentlist .mhead { display: flex; gap: 14px; align-items: baseline; flex-wrap: wrap; }
.momentlist .mwhen { font: 400 15px var(--sans); color: var(--gold-hi); }
.momentlist .mtext { font: 400 19px var(--serif); }
.momentlist .mage { color: var(--ash); font-size: 13.5px; margin-left: auto; }
.momentlist .msum { margin: 10px 0 0; color: var(--text-2); font-size: 15.5px; line-height: 1.55; }
.momentlist .mdel { background: none; border: 0; color: var(--ash); cursor: pointer; font: 500 13px var(--sans); padding: 0; margin-top: 10px; }
.momentlist .mdel:hover { color: var(--gold-hi); }
.moment-dot { position: absolute; top: 50%; width: 11px; height: 11px; border-radius: 50%; background: var(--gold-hi); transform: translate(-50%, -50%); box-shadow: 0 0 0 3px rgba(234,217,171,.18); }
.band.moments-band { background: rgba(255,255,255,.03); }
.qanswers textarea { width: 100%; min-height: 64px; margin: 8px 0 14px; font: 400 16px/1.5 var(--serif); color: var(--ivory); background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; resize: vertical; }
.fit { display: flex; gap: 8px; align-items: center; margin: -6px 0 18px; font: 500 12.5px var(--sans); color: var(--ash); }
.fit button { background: none; border: 1px solid var(--line); color: var(--text-2); border-radius: 999px; padding: 4px 12px; cursor: pointer; font: inherit; }
.fit button:hover { border-color: var(--gold-hi); color: var(--gold-hi); }
.fit button.on { background: var(--gold-hi); color: #15110a; border-color: var(--gold-hi); }
@media print { .fit, .qanswers, .moments { display: none !important; } }

/* language picker */
.langpick { font: 500 13.5px var(--sans); color: var(--text-2); background: transparent; border: 1px solid var(--line); border-radius: 999px; padding: 6px 10px; cursor: pointer; }
.langpick:hover { color: var(--ivory); border-color: var(--line-strong); }
.foot-links .langpick { margin-top: 10px; }

/* ------------------------------------------------------- map of the world ---- */
.map-wrap { margin-top: 40px; border: 1px solid var(--line); border-radius: 16px; background: var(--night-2); padding: 14px; }
#mapSvg { width: 100%; height: auto; display: block; }
#mapSvg .land { fill: #1a1826; stroke: rgba(212,182,122,.25); stroke-width: .6; }
#mapSvg .grat { stroke: rgba(255,255,255,.05); }
#mapSvg .ln { fill: none; stroke-width: 1.6; opacity: .9; }
#mapSvg .ln.dash { stroke-dasharray: 4 3; }
#mapSvg .birth { fill: #ead9ab; stroke: #09080e; stroke-width: 1.5; }
#mapSvg .pin { fill: none; stroke: #ead9ab; stroke-width: 2; }
#mapSvg .lbl { font: 600 9px var(--sans); fill: var(--ash); }
.map-legend { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 12px; font: 500 13px var(--sans); color: var(--text-2); }
.map-legend label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.map-legend i { display: inline-block; width: 18px; height: 3px; border-radius: 2px; }
.map-legend .key { color: var(--ash); margin-left: auto; }
.map-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 32px 56px; margin-top: 40px; }
.map-grid h3 { font-size: 26px; margin-bottom: 8px; }
.standout { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 10px; }
.standout li { border-left: 2px solid var(--gold); padding-left: 14px; }
.standout button { all: unset; cursor: pointer; display: block; }
.standout b { font: 400 19px var(--serif); }
.standout small { display: block; color: var(--ash); font-size: 13.5px; margin-top: 2px; }
.standout button:hover b { color: var(--gold-hi); }
.placerow { display: flex; gap: 10px; align-items: center; margin-top: 14px; }
.placerow input { font: 400 16px var(--sans); color: var(--ivory); background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 11px 14px; min-width: 240px; }
.placerow .place { position: relative; }
.placerow .dropdown { left: 0; transform: none; }
.place-card { margin-top: 20px; border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px; }
.place-card h4 { font: 400 22px var(--serif); margin-bottom: 8px; }
.place-card ul { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 8px; }
.place-card li { font-size: 15px; line-height: 1.5; color: var(--text-2); }
.place-card li b { color: var(--ivory); }
.place-card .meta { margin-top: 12px; }
@media (max-width: 980px) { .map-grid { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------ the sample shelf (/sample) ---- */
.sample-page .lede { font: 400 19px/1.65 var(--serif); color: var(--text-2); max-width: 40em; margin: 0 0 40px; }
.sample-chapter { border-left: 2px solid var(--gold); padding-left: 28px; margin: 0 0 56px; }
.sample-chapter p { color: var(--ivory); font: 400 19px/1.7 var(--serif); }
.sample-chapter .meta { font: 400 13.5px var(--sans); color: var(--ash); margin-bottom: 10px; }
.sample-shelf { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; margin: 0 0 56px; }
.sample-card { border: 1px solid var(--line); border-radius: 14px; padding: 24px 24px 20px; background: var(--surface); display: flex; flex-direction: column; }
.sample-card .tier { font: 500 13px var(--sans); color: var(--gold); margin: 0 0 10px; }
.sample-card h2 { font-size: 24px; margin: 0 0 12px; line-height: 1.25; }
.sample-card h2 a { color: var(--ivory); text-decoration: none; }
.sample-card h2 a:hover { color: var(--gold-hi); }
.sample-card p { color: var(--text-2); font-size: 15.5px; line-height: 1.6; margin: 0 0 16px; }
.sample-card .foot { margin-top: auto; font: 400 13.5px var(--sans); color: var(--ash); }
.sample-card .foot a { color: var(--gold); }
.sample-piece .back { font: 400 13.5px var(--sans); color: var(--ash); margin-bottom: 26px; }
.sample-piece .back a { color: var(--ash); }
@media (max-width: 600px) { .sample-chapter { padding-left: 16px; } .sample-shelf { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------ the offer, in place ---- */
.offer { border: 1px solid var(--line); border-radius: 14px; padding: 20px 22px; background: var(--surface); margin: 6px 0 0; font: 400 16.5px/1.6 var(--serif); }
.offer p { margin: 0 0 10px; }
.offer p:last-child { margin-bottom: 0; }
.offer .row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 14px; }
.chapter .bridge { margin-top: 16px; }