/* ═══════════════════════════════════════════════════════════════════
   PETA VALE — STYLE.CSS
   Single stylesheet for all pages. Cached after first visit.
   Structure:
     1.  Root variables + reset
     2.  Typography defaults
     3.  Layout utilities
     4.  Nav
     5.  Hero (homepage)
     6.  About section
     7.  Section headers (reusable)
     8.  Signs grid (daily + list)
     9.  Sign detail page
     10. Peta Index card (K-index summary + detail)
     11. Forecast 3-day strip
     12. Purchase cards (natal, synastry, forecast)
     13. Sample pages
     14. Footer
     15. Media queries (responsive)
   ═══════════════════════════════════════════════════════════════════ */


/* ─── 1. ROOT + RESET ─────────────────────────────────────────────── */

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

:root{
  --bg:#f5eee0;
  --surface:#efe5d0;
  --surface-soft:#f0e7d3;
  --card:#faf4e7;
  --card-raised:#fffaed;

  --border:rgba(93,31,35,0.12);
  --border-strong:rgba(93,31,35,0.25);
  --border-ink:rgba(26,24,20,0.08);

  --burgundy:#5d1f23;
  --burgundy-soft:#8a4a4e;
  --burgundy-deep:#3e1115;
  --burgundy-tint:rgba(93,31,35,0.06);

  --ink:#1a1814;
  --ink-soft:#4a4440;
  --ink-muted:#7a7268;
  --ink-whisper:#a39a8d;

  --state-clarity:#2f6f5d;
  --state-cocoon:#3f5680;
  --state-pressure:#6a3d82;
  --state-overload:#a1343d;
  --state-unsettled:#8a6a2b;

  --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --sans:"Inter",system-ui,-apple-system,sans-serif;

  --wrap-narrow:680px;
  --wrap-reading:820px;
  --wrap-wide:1100px;
  --wrap-hero:1240px;
}

html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:300;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  overflow-x:hidden;
}

a{color:var(--burgundy);text-decoration:none;transition:color 0.2s}
a:hover{color:var(--burgundy-deep)}

img{max-width:100%;height:auto;display:block}


/* ─── 2. TYPOGRAPHY ───────────────────────────────────────────────── */

h1,h2,h3,h4{
  font-family:var(--serif);
  font-weight:500;
  line-height:1.1;
  color:var(--ink);
  letter-spacing:-0.01em;
}
h1 .italic,h2 .italic,h3 .italic{
  font-style:italic;font-weight:400;
  color:var(--burgundy);
}
.eyebrow{
  font-family:var(--sans);
  font-size:11px;font-weight:500;
  text-transform:uppercase;
  letter-spacing:0.35em;
  color:var(--burgundy);
  margin-bottom:22px;
}


/* ─── 3. LAYOUT UTILITIES ─────────────────────────────────────────── */

.wrap-narrow{max-width:var(--wrap-narrow);margin:0 auto;padding:0 24px}
.wrap-reading{max-width:var(--wrap-reading);margin:0 auto;padding:0 24px}
.wrap-wide{max-width:var(--wrap-wide);margin:0 auto;padding:0 24px}
.wrap-hero{max-width:var(--wrap-hero);margin:0 auto;padding:0 48px}

.divider{
  display:block;
  width:80px;height:1px;
  background:var(--burgundy);
  margin:40px auto;
  opacity:0.4;
  border:none;
}


/* ─── 4. NAV ──────────────────────────────────────────────────────── */

nav.site-nav{
  position:-webkit-sticky;
  position:sticky;
  top:0;z-index:50;
  background:rgba(245,238,224,0.92);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border);
  padding:18px 48px;
  display:flex;align-items:center;justify-content:space-between;
}
.brand{
  font-family:var(--serif);
  font-size:22px;font-weight:500;
  color:var(--burgundy);
  letter-spacing:0.15em;
}
.brand em{font-style:normal;font-weight:400}
.brand .sep{
  display:inline-block;
  width:0.7em;
  letter-spacing:0;
}
.nav-links{display:flex;gap:36px}
.nav-links a{
  font-family:var(--sans);
  font-size:12px;font-weight:400;
  color:var(--ink-soft);
  text-transform:uppercase;
  letter-spacing:0.2em;
}
.nav-links a:hover{color:var(--burgundy)}
.nav-links a.active{color:var(--burgundy)}


/* ─── 5. HERO ─────────────────────────────────────────────────────── */

.hero{
  max-width:var(--wrap-hero);margin:0 auto;
  padding:90px 48px 110px;
  display:grid;
  grid-template-columns:1fr 1.1fr;
  gap:80px;
  align-items:center;
  min-height:calc(100vh - 75px);
}
.hero-text{max-width:520px}
.hero h1{
  font-size:clamp(48px,6vw,84px);
  margin-bottom:28px;
}
.hero .tagline{
  font-family:var(--serif);
  font-size:clamp(20px,2.2vw,26px);
  font-weight:400;font-style:italic;
  color:var(--ink-soft);
  margin-bottom:48px;
  line-height:1.4;
}
.hero-portrait{
  position:relative;
  aspect-ratio:4/3;
  overflow:hidden;
}
.hero-portrait img{
  width:100%;height:100%;
  object-fit:cover;
  object-position:center 30%;
}
.hero-portrait::after{
  content:'';
  position:absolute;inset:0;
  box-shadow:inset 0 0 60px 30px var(--bg);
  pointer-events:none;
}


/* ─── 6. ABOUT SECTION ────────────────────────────────────────────── */

.about{
  background:var(--surface);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  padding:110px 48px;
}
.about-inner{max-width:var(--wrap-narrow);margin:0 auto}
.about-label{
  font-family:var(--sans);
  font-size:11px;font-weight:500;
  text-transform:uppercase;
  letter-spacing:0.35em;
  color:var(--burgundy);
  margin-bottom:22px;
  text-align:center;
}
.about h2{
  font-size:clamp(34px,4.5vw,54px);
  margin-bottom:48px;
  text-align:center;
  line-height:1.08;
}
.about-body p{
  font-size:17px;
  line-height:1.85;
  color:var(--ink-soft);
  margin-bottom:26px;
}
.about-body p:last-child{margin-bottom:0}
.about-body p.lead{
  font-family:var(--serif);
  font-style:italic;
  font-size:21px;
  line-height:1.55;
  color:var(--ink);
  margin-bottom:36px;
  text-align:center;
  max-width:560px;
  margin-left:auto;
  margin-right:auto;
}
.about-body p strong{
  font-weight:500;
  color:var(--ink);
}
.about-signature{
  font-family:var(--serif);
  font-style:italic;
  font-size:22px;
  color:var(--burgundy);
  text-align:center;
  margin-top:48px;
  letter-spacing:0.05em;
}


/* ─── 7. SECTION HEADERS (reusable across pages) ──────────────────── */

.page-header{
  padding:90px 48px 60px;
  text-align:center;
  background:var(--bg);
}
.page-header h1{
  font-size:clamp(40px,5.5vw,68px);
  margin-bottom:16px;
}
.page-header .lede{
  font-family:var(--serif);
  font-style:italic;
  font-size:20px;
  color:var(--ink-soft);
  max-width:560px;
  margin:0 auto;
  line-height:1.5;
}
.page-header .date-line{
  font-family:var(--sans);
  font-size:12px;font-weight:400;
  text-transform:uppercase;
  letter-spacing:0.3em;
  color:var(--burgundy);
  margin-bottom:24px;
}


/* ─── 8. SIGNS GRID (daily page + signs overview) ─────────────────── */

.signs-grid{
  max-width:var(--wrap-wide);margin:0 auto;
  padding:40px 48px 80px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
}
.sign-card{
  background:var(--card);
  border:1px solid var(--border);
  padding:32px 20px 28px;
  text-align:center;
  text-decoration:none;
  color:var(--ink);
  transition:border-color 0.2s,background 0.2s,transform 0.15s;
  display:block;
}
.sign-card:hover{
  border-color:var(--burgundy);
  background:var(--card-raised);
  color:var(--ink);
  transform:translateY(-2px);
}
.sign-glyph{
  font-family:var(--serif);
  font-size:32px;
  color:var(--burgundy);
  line-height:1;
  margin-bottom:12px;
  display:block;
}
.sign-image{
  width:100%;
  aspect-ratio:1/1;
  object-fit:contain;
  display:block;
  margin:0 auto 16px;
  max-width:140px;
  transition:transform 0.3s ease;
}
.sign-card:hover .sign-image{
  transform:scale(1.05);
}
.sign-name{
  font-family:var(--serif);
  font-size:22px;
  font-weight:500;
  color:var(--ink);
  margin-bottom:4px;
}
.sign-dates{
  font-family:var(--sans);
  font-size:11px;
  letter-spacing:0.2em;
  text-transform:uppercase;
  color:var(--ink-muted);
  margin-bottom:14px;
}
.sign-preview{
  font-family:var(--serif);
  font-style:italic;
  font-size:14px;
  line-height:1.55;
  color:var(--ink-soft);
  max-width:220px;
  margin:0 auto;
}


/* ─── 9. SIGN DETAIL PAGE ─────────────────────────────────────────── */

.sign-detail{
  max-width:var(--wrap-reading);
  margin:0 auto;
  padding:40px 24px 80px;
}
.sign-detail-glyph{
  font-family:var(--serif);
  font-size:96px;
  color:var(--burgundy);
  text-align:center;
  line-height:1;
  margin-bottom:12px;
}
.sign-detail-image{
  width:220px;
  height:220px;
  margin:0 auto 16px;
  display:block;
  object-fit:contain;
}
@media(max-width:640px){
  .sign-detail-image{width:170px;height:170px;margin-bottom:8px}
}
.sign-detail h1{
  font-size:clamp(40px,5.5vw,68px);
  text-align:center;
  margin-bottom:8px;
}
.sign-detail .sign-dates{
  text-align:center;
  margin-bottom:48px;
}
.sign-today{
  background:var(--card);
  border:1px solid var(--border);
  padding:40px 32px;
  margin-bottom:56px;
}
.sign-today .today-label{
  font-family:var(--sans);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:0.3em;
  color:var(--burgundy);
  margin-bottom:14px;
}
.sign-today h2{
  font-size:26px;
  font-weight:500;
  margin-bottom:18px;
}
.sign-today .today-body{
  font-size:17px;
  line-height:1.85;
  color:var(--ink-soft);
}
.sign-traits h2{
  font-size:28px;
  font-weight:500;
  margin-bottom:20px;
  margin-top:48px;
}
.sign-traits p{
  font-size:17px;
  line-height:1.85;
  color:var(--ink-soft);
  margin-bottom:22px;
}

/* ─── Quick Facts grid ─── */
.quick-facts{
  background:var(--card);
  border:1px solid var(--border);
  padding:36px 32px;
  margin:56px 0;
}
.quick-facts h2{
  font-family:var(--serif);
  font-size:22px;
  font-weight:500;
  color:var(--ink);
  margin-bottom:24px;
  letter-spacing:0.02em;
}
.facts-grid{
  display:block;
  max-width:560px;
  margin:0 auto;
}
.fact-row{
  padding:16px 0;
  border-bottom:1px solid var(--border);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:24px;
  width:100%;
}
.fact-row:last-child{border-bottom:none}
.fact-label{
  font-family:var(--sans);
  font-size:11px;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:0.22em;
  color:var(--ink-muted);
  flex:0 0 auto;
  white-space:nowrap;
}
.fact-value{
  font-family:var(--serif);
  font-size:18px;
  font-weight:500;
  color:var(--ink);
  text-align:right;
  flex:1 1 auto;
  line-height:1.3;
}
.fact-value em{
  font-style:italic;
  color:var(--burgundy-soft);
  font-weight:400;
}
@media(max-width:640px){
  .quick-facts{padding:28px 22px;margin:40px 0}
  .fact-row{padding:14px 0;gap:16px}
  .fact-value{font-size:16px}
  .fact-label{font-size:10px;letter-spacing:0.2em}
}
@media(max-width:380px){
  .fact-row{gap:12px}
  .fact-value{font-size:15px}
}

/* ─── Section headings for long-form sign content ─── */
.sign-section{
  margin:56px 0;
}
.sign-section h2{
  font-family:var(--serif);
  font-size:clamp(26px,3.2vw,34px);
  font-weight:500;
  color:var(--ink);
  margin-bottom:24px;
  line-height:1.2;
  letter-spacing:-0.005em;
}
.sign-section h2 .italic{
  font-style:italic;
  font-weight:400;
  color:var(--burgundy);
}
.sign-section p{
  font-size:17px;
  line-height:1.85;
  color:var(--ink-soft);
  margin-bottom:22px;
}
.sign-section p strong{
  color:var(--ink);
  font-weight:500;
}
.sign-section p em{
  font-style:italic;
  color:var(--burgundy-soft);
  font-weight:400;
}

/* ─── Relationships teaser (light version, no match cards) ─── */
.relationships-teaser{
  background:var(--card);
  border:1px solid var(--border);
  padding:36px 32px;
  margin:56px 0;
}
.relationships-teaser h2{
  font-family:var(--serif);
  font-size:26px;
  font-weight:500;
  margin-bottom:18px;
}
.relationships-teaser p{
  font-size:16px;
  line-height:1.8;
  color:var(--ink-soft);
  margin-bottom:18px;
}
.resonant-signs{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:20px 0 28px;
}
.resonant-sign{
  font-family:var(--serif);
  font-size:15px;
  color:var(--burgundy);
  padding:8px 18px;
  border:1px solid var(--burgundy);
  text-decoration:none;
  transition:background 0.15s,color 0.15s;
  letter-spacing:0.02em;
}
.resonant-sign:hover{
  background:var(--burgundy);
  color:var(--bg);
}
.synastry-inline-cta{
  font-family:var(--serif);
  font-style:italic;
  font-size:16px;
  color:var(--ink-soft);
  padding-top:20px;
  border-top:1px solid var(--border);
  margin-top:20px;
}
.synastry-inline-cta a{
  color:var(--burgundy);
  border-bottom:1px solid var(--burgundy);
  padding-bottom:1px;
  font-weight:500;
  font-style:normal;
}
@media(max-width:640px){
  .relationships-teaser{padding:26px 22px}
  .relationships-teaser h2{font-size:23px}
}

/* ─── Famous personalities ─── */
.famous-signs{
  margin:40px 0 56px;
}
.famous-list{
  display:flex;
  flex-wrap:wrap;
  gap:8px 14px;
  margin-top:20px;
}
.famous-name{
  font-family:var(--serif);
  font-size:16px;
  color:var(--ink-soft);
  font-style:italic;
}
.famous-name::after{
  content:" ·";
  color:var(--ink-whisper);
  margin-left:10px;
}
.famous-name:last-child::after{content:""}

/* ─── Chart-selector CTA (the main inline buy card) ─── */
.chart-cta{
  background:var(--card);
  border:1px solid var(--border-strong);
  padding:48px 40px;
  margin:56px 0;
  text-align:center;
  position:relative;
}
.chart-cta-label{
  font-family:var(--sans);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:0.3em;
  color:var(--burgundy);
  margin-bottom:14px;
}
.chart-cta h2{
  font-family:var(--serif);
  font-size:clamp(28px,3.5vw,36px);
  font-weight:500;
  margin-bottom:10px;
  line-height:1.2;
}
.chart-cta .lede{
  font-family:var(--serif);
  font-style:italic;
  font-size:18px;
  color:var(--ink-soft);
  max-width:480px;
  margin:0 auto 32px;
  line-height:1.55;
}

/* Two-option selector: 1 chart / 2 charts */
.chart-options{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  max-width:520px;
  margin:0 auto 28px;
}
.chart-option{
  background:var(--bg);
  border:1.5px solid var(--border-strong);
  padding:24px 18px;
  cursor:pointer;
  text-align:center;
  transition:border-color 0.15s,background 0.15s;
  font-family:var(--sans);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
}
.chart-option input[type="radio"]{
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.chart-option .opt-title{
  font-family:var(--serif);
  font-size:20px;
  font-weight:500;
  color:var(--ink);
  margin-bottom:4px;
}
.chart-option .opt-sub{
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:0.18em;
  color:var(--ink-muted);
  margin-bottom:10px;
}
.chart-option .opt-price{
  font-family:var(--serif);
  font-size:28px;
  font-weight:500;
  color:var(--burgundy);
  line-height:1;
}
.chart-option:hover{
  border-color:var(--burgundy-soft);
  background:var(--card-raised);
}
.chart-option.selected{
  border-color:var(--burgundy);
  background:var(--card-raised);
  box-shadow:inset 0 0 0 1px var(--burgundy);
}

.chart-cta-sample{
  display:inline-block;
  font-family:var(--serif);
  font-style:italic;
  font-size:15px;
  color:var(--burgundy-soft);
  margin-bottom:24px;
  border-bottom:1px solid var(--burgundy-soft);
  padding-bottom:2px;
}
.chart-cta-sample:hover{
  color:var(--burgundy);
  border-bottom-color:var(--burgundy);
}

.chart-cta-actions{
  display:flex;
  justify-content:center;
  margin-top:8px;
}
.chart-cta-button{
  display:inline-flex;
  align-items:center;
  gap:14px;
  background:var(--burgundy);
  color:var(--bg);
  padding:18px 40px;
  font-family:var(--sans);
  font-size:14px;
  font-weight:500;
  letter-spacing:0.18em;
  text-transform:uppercase;
  text-decoration:none;
  border:none;
  cursor:pointer;
  transition:background 0.2s,transform 0.15s;
  min-width:280px;
  justify-content:center;
}
.chart-cta-button:hover{
  background:var(--burgundy-deep);
  color:var(--bg);
  transform:translateY(-1px);
}
.chart-cta-button .arrow{
  font-family:var(--serif);
  font-size:18px;
  font-style:italic;
}

@media(max-width:640px){
  .chart-cta{padding:36px 24px;margin:40px 0}
  .chart-options{grid-template-columns:1fr}
  .chart-cta-button{width:100%;min-width:0;padding:16px 24px}
}

/* ─── Forecast teaser mini-card (on sign pages) ─── */
.forecast-teaser{
  background:var(--card);
  border:1px solid var(--border);
  padding:40px 36px;
  text-align:center;
  margin:56px 0;
}
.forecast-teaser-label{
  font-family:var(--sans);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:0.3em;
  color:var(--burgundy);
  margin-bottom:14px;
}
.forecast-teaser h2{
  font-family:var(--serif);
  font-size:28px;
  font-weight:500;
  margin-bottom:18px;
  line-height:1.25;
}
.forecast-teaser p{
  font-size:16px;
  line-height:1.75;
  color:var(--ink-soft);
  max-width:480px;
  margin:0 auto 24px;
}
.forecast-teaser .price-inline{
  font-family:var(--serif);
  font-size:22px;
  font-weight:500;
  color:var(--burgundy);
  display:block;
  margin-bottom:20px;
}

/* ─── Upsell section on sign pages ─── */
.sign-upsell{
  background:var(--surface);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  padding:80px 24px;
  margin-top:80px;
}
.sign-upsell-inner{
  max-width:var(--wrap-reading);
  margin:0 auto;
  text-align:center;
}
.sign-upsell-lede{
  font-family:var(--serif);
  font-style:italic;
  font-size:clamp(24px,3.2vw,32px);
  line-height:1.3;
  color:var(--ink);
  margin-bottom:12px;
}
.sign-upsell-sublede{
  font-family:var(--serif);
  font-size:18px;
  color:var(--ink-soft);
  margin-bottom:40px;
  max-width:520px;
  margin-left:auto;
  margin-right:auto;
  line-height:1.55;
}
.chart-includes{
  text-align:left;
  max-width:520px;
  margin:0 auto 48px;
  list-style:none;
  padding:0;
}
.chart-includes li{
  padding:16px 0 16px 28px;
  border-bottom:1px solid var(--border);
  position:relative;
  font-size:16px;
  color:var(--ink-soft);
  line-height:1.55;
}
.chart-includes li:last-child{border-bottom:none}
.chart-includes li::before{
  content:'✦';
  position:absolute;
  left:0;
  top:16px;
  color:var(--burgundy);
  font-size:14px;
  opacity:0.7;
}
.chart-includes li strong{
  color:var(--ink);
  font-weight:500;
  display:block;
  margin-bottom:2px;
  font-family:var(--serif);
  font-size:18px;
}
.upsell-ctas{
  display:flex;
  gap:16px;
  justify-content:center;
  flex-wrap:wrap;
}
@media(max-width:540px){
  .sign-upsell{padding:60px 20px;margin-top:60px}
  .upsell-ctas{flex-direction:column;align-items:stretch;max-width:280px;margin:0 auto}
  .chart-includes li{padding-left:24px}
  .chart-includes li strong{font-size:17px}
}


/* ─── 10. PETA INDEX — summary card + detail ──────────────────────── */

.index-summary{
  max-width:var(--wrap-wide);margin:0 auto;
  padding:20px 48px 60px;
}
.index-summary-card{
  background:var(--card);
  border:1px solid var(--border);
  padding:32px 36px;
  display:grid;
  grid-template-columns:1fr auto;
  gap:32px;
  align-items:center;
  text-decoration:none;
  color:var(--ink);
  transition:border-color 0.2s,background 0.2s;
}
.index-summary-card:hover{
  border-color:var(--burgundy);
  background:var(--card-raised);
  color:var(--ink);
}
.index-summary-label{
  font-family:var(--sans);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:0.3em;
  color:var(--burgundy);
  margin-bottom:10px;
}
.index-summary-state{
  font-family:var(--serif);
  font-size:36px;
  font-weight:500;
  color:var(--ink);
  margin-bottom:6px;
  line-height:1.1;
}
.index-summary-note{
  font-family:var(--serif);
  font-style:italic;
  font-size:16px;
  color:var(--ink-soft);
  line-height:1.5;
  max-width:420px;
}
.index-summary-arrow{
  font-family:var(--serif);
  font-style:italic;
  font-size:36px;
  color:var(--burgundy);
  flex-shrink:0;
}

/* state tint applied via modifier class */
.index-summary-card.state-clarity         .index-summary-state{color:var(--state-clarity)}
.index-summary-card.state-cocoon          .index-summary-state{color:var(--state-cocoon)}
.index-summary-card.state-pressure-cooker .index-summary-state{color:var(--state-pressure)}
.index-summary-card.state-overload        .index-summary-state{color:var(--state-overload)}
.index-summary-card.state-unsettled       .index-summary-state{color:var(--state-unsettled)}


/* ─── 11. 3-DAY FORECAST STRIP (K-index detail page) ──────────────── */

.forecast-strip{
  max-width:var(--wrap-wide);margin:0 auto;
  padding:40px 48px 20px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
}
.forecast-day{
  background:var(--card);
  border:1px solid var(--border);
  padding:36px 28px;
  text-align:center;
}
.forecast-day-label{
  font-family:var(--sans);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:0.3em;
  color:var(--burgundy);
  margin-bottom:24px;
}
.forecast-state{
  font-family:var(--serif);
  font-size:32px;
  font-weight:500;
  margin-bottom:8px;
}
.forecast-tone{
  font-family:var(--serif);
  font-style:italic;
  font-size:14px;
  color:var(--ink-soft);
  margin-bottom:24px;
}
.forecast-metrics{
  display:flex;
  justify-content:center;
  gap:24px;
  padding-top:20px;
  border-top:1px solid var(--border);
  font-size:13px;
  color:var(--ink-muted);
}
.forecast-metric strong{
  color:var(--ink);
  font-weight:500;
}
.forecast-day.state-clarity         .forecast-state{color:var(--state-clarity)}
.forecast-day.state-cocoon          .forecast-state{color:var(--state-cocoon)}
.forecast-day.state-pressure-cooker .forecast-state{color:var(--state-pressure)}
.forecast-day.state-overload        .forecast-state{color:var(--state-overload)}
.forecast-day.state-unsettled       .forecast-state{color:var(--state-unsettled)}


/* ─── 11b. K-INDEX PAGE — hero, quadrants, feeling words ──────────── */

/* Hero: state-responsive background tint */
.kindex-hero{
  position:relative;
  padding:100px 48px 80px;
  background:var(--bg);
  transition:background 1.2s ease;
  overflow:hidden;
}
.kindex-hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:var(--state-tint, rgba(93,31,35,0.04));
  transition:background 1.2s ease;
  pointer-events:none;
  z-index:0;
}
.kindex-hero::after{
  /* Subtle radial glow top-right, accent colour */
  content:"";
  position:absolute;
  top:-20%; right:-10%;
  width:80vw; max-width:900px; height:80vw; max-height:900px;
  border-radius:50%;
  background:radial-gradient(circle, var(--state-accent-soft, #a94a50) 0%, transparent 60%);
  opacity:0.10;
  transition:opacity 1.2s ease, background 1.2s ease;
  pointer-events:none;
  z-index:0;
  filter:blur(40px);
}
.kindex-hero > *{position:relative; z-index:1}

.kindex-hero-inner{
  max-width:var(--wrap-wide);
  margin:0 auto;
  display:grid;
  grid-template-columns:1.4fr 1fr;
  gap:80px;
  align-items:center;
}
.kindex-eyebrow{
  font-family:var(--sans);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:0.4em;
  color:var(--state-accent, var(--burgundy));
  margin-bottom:28px;
  display:flex;
  align-items:center;
  gap:14px;
  transition:color 1.2s ease;
}
.kindex-eyebrow::before{
  content:"";
  display:inline-block;
  width:28px; height:1px;
  background:var(--state-accent, var(--burgundy));
  transition:background 1.2s ease;
}
.kindex-state{
  font-family:var(--serif);
  font-size:clamp(64px, 11vw, 140px);
  font-weight:400;
  font-style:italic;
  line-height:0.95;
  color:var(--state-accent, var(--burgundy));
  letter-spacing:-0.02em;
  margin-bottom:28px;
  transition:color 1.2s ease;
  /* Subtle fade-in on load */
  animation:stateReveal 1.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes stateReveal{
  0%{opacity:0; transform:translateY(24px) scale(0.98)}
  100%{opacity:1; transform:translateY(0) scale(1)}
}
.kindex-hero-sentence{
  font-family:var(--serif);
  font-size:clamp(22px, 2.6vw, 30px);
  font-weight:400;
  line-height:1.35;
  color:var(--ink);
  max-width:620px;
  margin-bottom:40px;
  animation:stateReveal 1.4s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both;
}
.kindex-hero-sentence em{
  font-style:italic;
  color:var(--state-accent, var(--burgundy));
  transition:color 1.2s ease;
}

/* The data panel on the right */
.kindex-data{
  border-left:1px solid var(--border);
  padding-left:48px;
  animation:stateReveal 1.4s cubic-bezier(0.16, 1, 0.3, 1) 0.4s both;
}
.kindex-reading{
  font-family:var(--serif);
  font-style:italic;
  font-size:17px;
  line-height:1.6;
  color:var(--ink-soft);
  margin-bottom:36px;
  padding-bottom:28px;
  border-bottom:1px solid var(--border);
}
.kindex-metrics{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px 40px;
}
.kindex-metric-label{
  font-family:var(--sans);
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:0.25em;
  color:var(--ink-muted);
  margin-bottom:6px;
}
.kindex-metric-value{
  font-family:var(--serif);
  font-size:22px;
  font-weight:500;
  color:var(--ink);
  line-height:1.1;
}
.kindex-metric-value .unit{
  font-size:12px;
  color:var(--ink-muted);
  font-weight:400;
  margin-left:4px;
}
.kindex-metric-quadrant{
  grid-column:1 / -1;
  padding-top:20px;
  border-top:1px solid var(--border);
}
.kindex-metric-quadrant .kindex-metric-value{
  color:var(--state-accent, var(--burgundy));
  font-size:16px;
  font-style:italic;
  transition:color 1.2s ease;
}

@media(max-width:960px){
  .kindex-hero{padding:80px 32px 60px}
  .kindex-hero-inner{grid-template-columns:1fr; gap:48px}
  .kindex-data{border-left:none; border-top:1px solid var(--border); padding-left:0; padding-top:40px}
}
@media(max-width:640px){
  .kindex-hero{padding:56px 22px 48px}
  .kindex-state{font-size:clamp(56px, 16vw, 84px)}
  .kindex-metrics{grid-template-columns:1fr 1fr; gap:20px 24px}
}


/* ─── "What to do today" block ─── */
.today-line-block{
  max-width:900px;
  margin:80px auto;
  padding:0 48px;
  text-align:center;
}
.today-line-label{
  font-family:var(--sans);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:0.35em;
  color:var(--ink-muted);
  margin-bottom:24px;
}
.today-line{
  font-family:var(--serif);
  font-style:italic;
  font-size:clamp(24px, 3.4vw, 38px);
  font-weight:400;
  line-height:1.3;
  color:var(--ink);
  max-width:780px;
  margin:0 auto;
}
.today-line .accent{
  color:var(--state-accent, var(--burgundy));
  transition:color 1.2s ease;
}
@media(max-width:640px){
  .today-line-block{margin:56px auto; padding:0 22px}
}


/* ─── Mid-page inline CTA strip ─── */
.kindex-midcta{
  max-width:900px;
  margin:60px auto 80px;
  padding:36px 48px;
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  text-align:center;
}
.kindex-midcta-lede{
  font-family:var(--serif);
  font-size:20px;
  font-style:italic;
  color:var(--ink-soft);
  margin-bottom:14px;
}
.kindex-midcta-link{
  font-family:var(--serif);
  font-size:22px;
  font-weight:500;
  color:var(--burgundy);
  text-decoration:none;
  border-bottom:1.5px solid var(--burgundy);
  padding-bottom:3px;
  transition:color 0.2s, border-color 0.2s;
}
.kindex-midcta-link:hover{
  color:var(--burgundy-deep, #3e1418);
  border-bottom-color:var(--burgundy-deep, #3e1418);
}
@media(max-width:640px){
  .kindex-midcta{padding:28px 22px; margin:40px auto 56px}
  .kindex-midcta-link{font-size:19px}
}


/* ─── Editorial section (for 'what this is') ─── */
.kindex-editorial{
  max-width:720px;
  margin:80px auto;
  padding:0 48px;
}
.kindex-editorial h2{
  font-family:var(--serif);
  font-size:clamp(28px, 3.6vw, 40px);
  font-weight:500;
  margin-bottom:32px;
  line-height:1.15;
  letter-spacing:-0.005em;
}
.kindex-editorial h2 em{
  font-style:italic;
  color:var(--burgundy);
}
.kindex-editorial p{
  font-size:18px;
  line-height:1.75;
  color:var(--ink-soft);
  margin-bottom:24px;
}
.kindex-editorial p strong{color:var(--ink); font-weight:500}
.kindex-editorial p em{
  font-style:italic;
  color:var(--burgundy-soft);
}
@media(max-width:640px){
  .kindex-editorial{margin:60px auto; padding:0 22px}
  .kindex-editorial p{font-size:17px; line-height:1.7}
}


/* ─── The four quadrants — interactive grid ─── */
.quadrants-section{
  max-width:var(--wrap-wide);
  margin:80px auto;
  padding:0 48px;
}
.quadrants-header{
  text-align:center;
  margin-bottom:56px;
}
.quadrants-header h2{
  font-family:var(--serif);
  font-size:clamp(28px, 3.6vw, 40px);
  font-weight:500;
  margin-bottom:18px;
  line-height:1.15;
}
.quadrants-header h2 em{font-style:italic; color:var(--burgundy)}
.quadrants-header p{
  font-family:var(--serif);
  font-style:italic;
  font-size:18px;
  color:var(--ink-soft);
  max-width:580px;
  margin:0 auto;
  line-height:1.5;
}

.quadrants-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
}
.quadrant-card{
  position:relative;
  background:var(--card);
  border:1px solid var(--border);
  padding:44px 40px;
  cursor:default;
  transition:
    background 0.6s ease,
    border-color 0.4s ease,
    transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.4s ease;
  overflow:hidden;
}
.quadrant-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:var(--q-tint, transparent);
  opacity:0;
  transition:opacity 0.6s ease;
  pointer-events:none;
}
.quadrant-card::after{
  content:"";
  position:absolute;
  top:-40%; right:-30%;
  width:80%; height:80%;
  border-radius:50%;
  background:radial-gradient(circle, var(--q-accent-soft, transparent) 0%, transparent 60%);
  opacity:0;
  transition:opacity 0.8s ease;
  pointer-events:none;
  filter:blur(30px);
}
.quadrant-card:hover{
  border-color:var(--q-accent, var(--burgundy));
  transform:translateY(-2px);
  box-shadow:0 20px 50px -20px rgba(93,31,35,0.15);
}
.quadrant-card:hover::before{opacity:1}
.quadrant-card:hover::after{opacity:0.18}
.quadrant-card > *{position:relative; z-index:1}

.quadrant-name{
  font-family:var(--serif);
  font-size:40px;
  font-weight:500;
  color:var(--ink);
  line-height:1.1;
  margin-bottom:6px;
  transition:color 0.6s ease;
}
.quadrant-card:hover .quadrant-name{
  color:var(--q-accent, var(--burgundy));
}
.quadrant-name em{font-style:italic}

.quadrant-axis{
  font-family:var(--sans);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:0.28em;
  color:var(--ink-muted);
  margin-bottom:24px;
}

.quadrant-reading{
  font-family:var(--serif);
  font-style:italic;
  font-size:17px;
  line-height:1.55;
  color:var(--ink-soft);
  margin-bottom:28px;
  padding-bottom:24px;
  border-bottom:1px solid var(--border);
}

.quadrant-feelings-label{
  font-family:var(--sans);
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:0.3em;
  color:var(--ink-muted);
  margin-bottom:14px;
}
.quadrant-feelings{
  list-style:none;
  padding:0; margin:0;
}
.quadrant-feelings li{
  font-family:var(--serif);
  font-size:16px;
  line-height:1.7;
  color:var(--ink-soft);
  padding-left:22px;
  position:relative;
  opacity:0.7;
  transition:opacity 0.4s ease, color 0.4s ease;
}
.quadrant-card:hover .quadrant-feelings li{
  opacity:1;
  color:var(--ink);
}
.quadrant-feelings li::before{
  content:"";
  position:absolute;
  left:0; top:0.75em;
  width:10px; height:1px;
  background:var(--q-accent, var(--ink-muted));
  opacity:0.5;
  transition:opacity 0.4s ease, width 0.4s ease, background 0.4s ease;
}
.quadrant-card:hover .quadrant-feelings li::before{
  opacity:1;
  width:14px;
}
.quadrant-feelings li + li{margin-top:2px}
/* Staggered fade-in on hover */
.quadrant-card:hover .quadrant-feelings li:nth-child(1){transition-delay:0.05s}
.quadrant-card:hover .quadrant-feelings li:nth-child(2){transition-delay:0.10s}
.quadrant-card:hover .quadrant-feelings li:nth-child(3){transition-delay:0.15s}
.quadrant-card:hover .quadrant-feelings li:nth-child(4){transition-delay:0.20s}
.quadrant-card:hover .quadrant-feelings li:nth-child(5){transition-delay:0.25s}

@media(max-width:960px){
  .quadrants-grid{grid-template-columns:1fr}
  .quadrant-card{padding:36px 28px}
  .quadrant-name{font-size:34px}
  /* On touch devices, show the "hover" state always — there's no hover */
  .quadrant-card::before{opacity:1}
  .quadrant-card::after{opacity:0.12}
  .quadrant-card .quadrant-feelings li{opacity:1; color:var(--ink)}
  .quadrant-card .quadrant-feelings li::before{opacity:1; width:14px}
}


/* ─── Honest science note (smaller, near bottom) ─── */
.science-note{
  max-width:720px;
  margin:72px auto;
  padding:36px 40px;
  background:var(--card);
  border-left:3px solid var(--burgundy);
}
.science-note-label{
  font-family:var(--sans);
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:0.3em;
  color:var(--burgundy);
  margin-bottom:16px;
}
.science-note p{
  font-size:15px;
  line-height:1.75;
  color:var(--ink-soft);
  margin-bottom:14px;
}
.science-note p:last-child{margin-bottom:0}
.science-note em{font-style:italic; color:var(--ink)}
@media(max-width:640px){
  .science-note{padding:28px 24px; margin:48px auto}
}


/* ─── 27-day forecast purchase card (expanded version) ─── */
.forecast-purchase{
  max-width:var(--wrap-medium, 900px);
  margin:80px auto;
  padding:64px 56px;
  background:var(--card);
  border:1px solid var(--border-strong);
  text-align:center;
  position:relative;
}
.forecast-purchase-label{
  font-family:var(--sans);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:0.4em;
  color:var(--burgundy);
  margin-bottom:20px;
}
.forecast-purchase h2{
  font-family:var(--serif);
  font-size:clamp(32px, 4vw, 48px);
  font-weight:500;
  line-height:1.1;
  margin-bottom:20px;
  letter-spacing:-0.01em;
}
.forecast-purchase h2 em{font-style:italic; color:var(--burgundy)}
.forecast-purchase-lede{
  font-family:var(--serif);
  font-style:italic;
  font-size:20px;
  color:var(--ink-soft);
  max-width:560px;
  margin:0 auto 44px;
  line-height:1.5;
}
.forecast-purchase-includes{
  list-style:none;
  padding:0;
  margin:0 auto 44px;
  max-width:480px;
  text-align:left;
  display:grid;
  gap:16px;
}
.forecast-purchase-includes li{
  padding-left:28px;
  position:relative;
  font-size:16px;
  line-height:1.55;
  color:var(--ink-soft);
}
.forecast-purchase-includes li::before{
  content:"✦";
  position:absolute;
  left:0; top:0;
  color:var(--burgundy);
  font-size:12px;
  line-height:1.7;
}
.forecast-purchase-includes li strong{
  color:var(--ink);
  font-weight:500;
  display:block;
  font-size:17px;
  margin-bottom:2px;
}
.forecast-purchase-price{
  font-family:var(--serif);
  font-size:40px;
  font-weight:500;
  color:var(--burgundy);
  margin-bottom:8px;
  line-height:1;
}
.forecast-purchase-price-sub{
  font-family:var(--sans);
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:0.3em;
  color:var(--ink-muted);
  margin-bottom:32px;
}
@media(max-width:640px){
  .forecast-purchase{padding:44px 28px; margin:48px auto}
  .forecast-purchase-price{font-size:32px}
}


/* ─── Lighter natal chart mention ─── */
.natal-whisper{
  max-width:720px;
  margin:60px auto 80px;
  padding:0 48px;
  text-align:center;
}
.natal-whisper p{
  font-family:var(--serif);
  font-style:italic;
  font-size:19px;
  line-height:1.7;
  color:var(--ink-soft);
}
.natal-whisper a{
  color:var(--burgundy);
  font-style:normal;
  font-weight:500;
  border-bottom:1px solid var(--burgundy);
  padding-bottom:1px;
}
@media(max-width:640px){
  .natal-whisper{margin:40px auto 60px; padding:0 22px}
  .natal-whisper p{font-size:17px}
}


/* ─── Enhanced 3-day forecast strip (richer than base version) ─── */
.forecast-strip.enhanced{
  padding:0 48px;
  margin:60px auto 0;
}
.forecast-strip.enhanced .forecast-day{
  text-align:left;
  padding:32px 28px;
  transition:transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s;
  opacity:0;
  animation:forecastDayIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.forecast-strip.enhanced .forecast-day:nth-child(1){animation-delay:0.1s}
.forecast-strip.enhanced .forecast-day:nth-child(2){animation-delay:0.2s}
.forecast-strip.enhanced .forecast-day:nth-child(3){animation-delay:0.3s}
.forecast-strip.enhanced .forecast-day:hover{
  transform:translateY(-3px);
  border-color:var(--burgundy-soft);
}
@keyframes forecastDayIn{
  0%{opacity:0; transform:translateY(20px)}
  100%{opacity:1; transform:translateY(0)}
}
.forecast-strip.enhanced .forecast-day-label{
  text-align:left;
  margin-bottom:16px;
  font-size:10px;
}
.forecast-strip.enhanced .forecast-state{
  font-size:28px;
  text-align:left;
  margin-bottom:4px;
}
.forecast-strip.enhanced .forecast-tone{
  text-align:left;
  font-size:15px;
  margin-bottom:24px;
  line-height:1.5;
}
.forecast-strip.enhanced .forecast-metrics{
  justify-content:flex-start;
  gap:28px;
}
@media(max-width:960px){
  .forecast-strip.enhanced{grid-template-columns:1fr; padding:0 32px}
}
@media(max-width:640px){
  .forecast-strip.enhanced{padding:0 22px}
}


/* ─── 12. PURCHASE CARDS (natal, synastry, forecast) ──────────────── */

.purchase-card{
  background:var(--card);
  border:1px solid var(--border);
  padding:48px 40px;
  max-width:560px;
  margin:40px auto;
  text-align:center;
}
.purchase-card .price-label{
  font-family:var(--sans);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:0.3em;
  color:var(--burgundy);
  margin-bottom:12px;
}
.purchase-card h3{
  font-size:32px;
  font-weight:500;
  margin-bottom:12px;
}
.purchase-card .price{
  font-family:var(--serif);
  font-size:48px;
  font-weight:500;
  color:var(--burgundy);
  margin-bottom:8px;
  line-height:1;
}
.purchase-card .price-note{
  font-family:var(--serif);
  font-style:italic;
  font-size:15px;
  color:var(--ink-soft);
  margin-bottom:32px;
}
.purchase-card .description{
  font-size:16px;
  line-height:1.75;
  color:var(--ink-soft);
  margin-bottom:32px;
  max-width:440px;
  margin-left:auto;
  margin-right:auto;
}
.purchase-card .sample-link{
  display:inline-block;
  font-size:13px;
  color:var(--burgundy-soft);
  border-bottom:1px solid var(--burgundy-soft);
  padding-bottom:2px;
  margin-bottom:28px;
  letter-spacing:0.03em;
}
.purchase-card .sample-link:hover{
  color:var(--burgundy);
  border-bottom-color:var(--burgundy);
}


/* ─── 12b. CHARTS PAGE — product selector + form ─────────────────── */

.charts-page{
  max-width:var(--wrap-wide);
  margin:0 auto;
  padding:64px 48px 48px;
}
.charts-header{
  text-align:center;
  margin-bottom:72px;
}
.charts-header-eyebrow{
  font-family:var(--sans);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:0.4em;
  color:var(--burgundy);
  margin-bottom:20px;
}
.charts-header h1{
  font-family:var(--serif);
  font-size:clamp(44px, 6vw, 72px);
  font-weight:400;
  font-style:italic;
  line-height:1;
  letter-spacing:-0.015em;
  color:var(--burgundy);
  margin-bottom:24px;
}
.charts-header-lede{
  font-family:var(--serif);
  font-size:clamp(19px, 2.2vw, 22px);
  line-height:1.45;
  color:var(--ink-soft);
  max-width:640px;
  margin:0 auto;
}

/* Two product cards side-by-side */
.product-selector{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
  margin-bottom:72px;
}
.product-card{
  background:var(--card);
  border:1.5px solid var(--border);
  padding:44px 40px 40px;
  text-align:center;
  cursor:pointer;
  transition:
    border-color 0.3s ease,
    transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.3s ease,
    background 0.3s ease;
  position:relative;
  display:flex;
  flex-direction:column;
}
.product-card:hover{
  border-color:var(--burgundy-soft);
  transform:translateY(-2px);
  box-shadow:0 18px 40px -20px rgba(93,31,35,0.18);
}
.product-card.selected{
  border-color:var(--burgundy);
  background:var(--card-raised);
  box-shadow:inset 0 0 0 1px var(--burgundy), 0 20px 50px -25px rgba(93,31,35,0.22);
}
.product-card.selected::before{
  content:"Selected";
  position:absolute;
  top:-12px;
  left:50%;
  transform:translateX(-50%);
  background:var(--burgundy);
  color:var(--bg);
  font-family:var(--sans);
  font-size:10px;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:0.25em;
  padding:6px 16px;
  line-height:1;
}

.product-card-label{
  font-family:var(--sans);
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:0.3em;
  color:var(--ink-muted);
  margin-bottom:12px;
}
.product-card-title{
  font-family:var(--serif);
  font-size:36px;
  font-weight:500;
  color:var(--ink);
  line-height:1.1;
  margin-bottom:6px;
}
.product-card-title em{font-style:italic; color:var(--burgundy)}
.product-card-sub{
  font-family:var(--serif);
  font-style:italic;
  font-size:16px;
  color:var(--ink-soft);
  margin-bottom:28px;
  min-height:2.4em;
}
.product-card-price{
  font-family:var(--serif);
  font-size:44px;
  font-weight:500;
  color:var(--burgundy);
  line-height:1;
  margin-bottom:4px;
}
.product-card-price-sub{
  font-family:var(--sans);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:0.25em;
  color:var(--ink-muted);
  margin-bottom:28px;
}
.product-card-includes{
  list-style:none;
  padding:0;
  margin:0 0 28px;
  text-align:left;
  font-size:14px;
  line-height:1.7;
  color:var(--ink-soft);
  flex-grow:1;
}
.product-card-includes li{
  padding-left:20px;
  position:relative;
  margin-bottom:6px;
}
.product-card-includes li::before{
  content:"·";
  position:absolute;
  left:6px;
  color:var(--burgundy);
  font-size:18px;
  line-height:1;
  top:1px;
}
.product-card-sample{
  display:inline-block;
  font-family:var(--serif);
  font-style:italic;
  font-size:14px;
  color:var(--burgundy-soft);
  border-bottom:1px solid var(--burgundy-soft);
  padding-bottom:2px;
  margin-bottom:20px;
  transition:color 0.2s;
}
.product-card-sample:hover{
  color:var(--burgundy);
  border-bottom-color:var(--burgundy);
}
.product-card-choose{
  font-family:var(--sans);
  font-size:12px;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:0.25em;
  padding:14px 24px;
  background:transparent;
  border:1.5px solid var(--burgundy);
  color:var(--burgundy);
  cursor:pointer;
  transition:background 0.2s, color 0.2s;
  width:100%;
  max-width:260px;
  margin:0 auto;
}
.product-card-choose:hover{
  background:var(--burgundy);
  color:var(--bg);
}
.product-card.selected .product-card-choose{
  background:var(--burgundy);
  color:var(--bg);
}

@media(max-width:760px){
  .charts-page{padding:48px 22px 40px}
  .product-selector{grid-template-columns:1fr; gap:40px}
  .product-card-title{font-size:30px}
  .product-card-price{font-size:38px}
}


/* ─── Form area ─── */
.charts-form-wrap{
  max-width:720px;
  margin:0 auto 80px;
  display:none;
  opacity:0;
  transition:opacity 0.4s ease;
}
.charts-form-wrap.active{
  display:block;
  animation:formReveal 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes formReveal{
  0%{opacity:0; transform:translateY(16px)}
  100%{opacity:1; transform:translateY(0)}
}

.form-section-header{
  text-align:center;
  margin-bottom:48px;
  padding:0 24px;
}
.form-section-header-eyebrow{
  font-family:var(--sans);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:0.3em;
  color:var(--burgundy);
  margin-bottom:14px;
}
.form-section-header h2{
  font-family:var(--serif);
  font-size:clamp(28px, 3.5vw, 36px);
  font-weight:500;
  line-height:1.2;
  margin-bottom:12px;
}
.form-section-header h2 em{font-style:italic; color:var(--burgundy)}
.form-section-header p{
  font-family:var(--serif);
  font-style:italic;
  font-size:17px;
  color:var(--ink-soft);
  max-width:520px;
  margin:0 auto;
  line-height:1.5;
}

.person-section{
  background:var(--card);
  border:1px solid var(--border);
  padding:40px 44px;
  margin-bottom:32px;
}
.person-section-header{
  font-family:var(--serif);
  font-size:24px;
  font-weight:500;
  color:var(--burgundy);
  margin-bottom:6px;
  font-style:italic;
}
.person-section-note{
  font-family:var(--serif);
  font-style:italic;
  font-size:15px;
  color:var(--ink-muted);
  margin-bottom:32px;
  padding-bottom:20px;
  border-bottom:1px solid var(--border);
}

.form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:28px;
}
.form-field{
  display:flex;
  flex-direction:column;
}
.form-field.full-width{grid-column:1 / -1}
.form-field label{
  font-family:var(--sans);
  font-size:10px;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:0.25em;
  color:var(--ink-muted);
  margin-bottom:10px;
}
.form-field input[type="text"],
.form-field input[type="email"],
.form-field input[type="date"],
.form-field input[type="time"]{
  font-family:var(--serif);
  font-size:18px;
  font-weight:400;
  color:var(--ink);
  background:transparent;
  border:none;
  border-bottom:1px solid var(--ink-whisper, rgba(26,24,20,0.22));
  padding:10px 2px 10px;
  outline:none;
  transition:border-color 0.2s;
  width:100%;
  box-sizing:border-box;
}
.form-field input:focus{
  border-bottom-color:var(--burgundy);
}
.form-field input::placeholder{
  color:var(--ink-muted);
  opacity:0.5;
  font-style:italic;
}
.form-field .helper{
  font-family:var(--serif);
  font-style:italic;
  font-size:13px;
  color:var(--ink-muted);
  margin-top:8px;
  line-height:1.5;
}
.form-field .helper.important{
  color:var(--burgundy-soft);
}

/* The email section — separate, at the bottom */
.email-section{
  max-width:720px;
  margin:0 auto 48px;
  padding:32px 44px;
  background:var(--bg);
  border:1px dashed var(--border-strong);
}
.email-section-label{
  font-family:var(--serif);
  font-style:italic;
  font-size:17px;
  color:var(--ink-soft);
  margin-bottom:14px;
  text-align:center;
}

/* PayPal button area */
.paypal-area{
  max-width:520px;
  margin:48px auto 40px;
  text-align:center;
}
.paypal-area-price{
  font-family:var(--serif);
  font-size:48px;
  font-weight:500;
  color:var(--burgundy);
  line-height:1;
  margin-bottom:6px;
}
.paypal-area-price-sub{
  font-family:var(--sans);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:0.3em;
  color:var(--ink-muted);
  margin-bottom:36px;
}
.paypal-container{
  min-height:56px;
  margin:0 auto;
  max-width:400px;
}
.paypal-placeholder{
  padding:20px;
  background:var(--card);
  border:1.5px dashed var(--border-strong);
  color:var(--ink-muted);
  font-family:var(--serif);
  font-style:italic;
  font-size:15px;
  text-align:center;
  line-height:1.5;
}

.paypal-area-note{
  margin-top:24px;
  font-family:var(--serif);
  font-style:italic;
  font-size:14px;
  color:var(--ink-muted);
  line-height:1.6;
}

/* Validation: disable paypal area with overlay until form complete */
.paypal-area.disabled{
  position:relative;
  opacity:0.5;
  pointer-events:none;
}
.paypal-area.disabled::after{
  content:"Please complete all fields above to continue";
  position:absolute;
  bottom:-24px;
  left:0; right:0;
  font-family:var(--serif);
  font-style:italic;
  font-size:14px;
  color:var(--ink-muted);
}

@media(max-width:640px){
  .charts-form-wrap{padding:0 22px}
  .person-section{padding:28px 22px; margin-bottom:24px}
  .form-grid{grid-template-columns:1fr; gap:22px}
  .email-section{padding:24px 20px}
  .paypal-area-price{font-size:38px}
}


/* ─── 13. SAMPLE PAGES (proof of quality) ─────────────────────────── */

.sample-banner{
  background:var(--burgundy-tint);
  border-bottom:1px solid var(--border);
  padding:14px 24px;
  text-align:center;
  font-family:var(--sans);
  font-size:13px;
  color:var(--ink-soft);
}
.sample-banner strong{
  color:var(--burgundy);
  font-weight:500;
}
.sample-banner a{
  font-weight:500;
  border-bottom:1px solid var(--burgundy);
  padding-bottom:1px;
  margin-left:8px;
}


/* ─── CTA BUTTONS (shared) ────────────────────────────────────────── */

.cta{
  display:inline-flex;align-items:center;gap:14px;
  background:var(--burgundy);
  color:var(--bg);
  padding:16px 32px;
  font-family:var(--sans);
  font-size:13px;font-weight:500;
  letter-spacing:0.18em;
  text-transform:uppercase;
  text-decoration:none;
  border:none;
  cursor:pointer;
  transition:background 0.2s,transform 0.15s;
}
.cta:hover{
  background:var(--burgundy-deep);
  color:var(--bg);
  transform:translateX(3px);
}
.cta-arrow{
  font-family:var(--serif);
  font-size:18px;
  font-style:italic;
}

.cta-ghost{
  display:inline-flex;align-items:center;gap:10px;
  background:transparent;
  color:var(--burgundy);
  padding:14px 28px;
  font-family:var(--sans);
  font-size:12px;font-weight:500;
  letter-spacing:0.2em;
  text-transform:uppercase;
  text-decoration:none;
  border:1px solid var(--burgundy);
  transition:background 0.2s;
}
.cta-ghost:hover{
  background:var(--burgundy);
  color:var(--bg);
}


/* ─── 14. FOOTER ──────────────────────────────────────────────────── */

footer.site-footer{
  padding:60px 48px 48px;
  max-width:var(--wrap-wide);margin:0 auto;
  text-align:center;
}
.footer-ornament{
  font-family:var(--serif);
  font-size:22px;
  color:var(--burgundy);
  margin-bottom:24px;
  letter-spacing:0.6em;
  padding-left:0.6em;
  opacity:0.7;
}
.disclaimer{
  font-family:var(--serif);
  font-style:italic;
  font-size:15px;
  color:var(--ink-soft);
  max-width:580px;
  margin:0 auto 28px;
  line-height:1.7;
}
.footer-meta{
  font-size:12px;
  color:var(--ink-muted);
  letter-spacing:0.05em;
}
.footer-meta a{
  color:var(--burgundy-soft);
  border-bottom:1px solid transparent;
}
.footer-meta a:hover{
  border-bottom-color:var(--burgundy-soft);
  color:var(--burgundy);
}


/* ─── 15. RESPONSIVE ──────────────────────────────────────────────── */

@media(max-width:960px){
  nav.site-nav{padding:14px 20px}
  .nav-links{gap:18px}
  .nav-links a{font-size:11px;letter-spacing:0.15em}
  .brand{font-size:18px}

  .hero{
    grid-template-columns:1fr;
    padding:50px 32px 70px;
    gap:48px;
    min-height:auto;
  }
  .hero-portrait{order:-1;max-height:50vh;aspect-ratio:16/10}
  .hero-text{max-width:100%}
  .hero h1{font-size:clamp(40px,10vw,64px)}

  .signs-grid{
    grid-template-columns:repeat(3,1fr);
    padding:30px 24px 60px;
  }

  .forecast-strip{
    grid-template-columns:1fr;
    padding:30px 24px 20px;
  }

  .index-summary{padding:20px 24px 40px}
  .index-summary-card{
    grid-template-columns:1fr;
    text-align:center;
    padding:28px 24px;
  }
  .index-summary-arrow{display:none}

  .page-header{padding:60px 24px 40px}
}

@media(max-width:640px){
  .about{padding:72px 24px}
  .about-body p{font-size:16px;line-height:1.75}
  .about-body p.lead{font-size:19px}

  .signs-grid{grid-template-columns:repeat(2,1fr);gap:14px}
  .sign-card{padding:22px 18px}

  .purchase-card{padding:36px 28px;margin:30px 20px}
  .purchase-card h3{font-size:26px}
  .purchase-card .price{font-size:40px}
}

@media(max-width:540px){
  .hero{padding:40px 24px 56px;gap:36px}
  footer.site-footer{padding:40px 24px 32px}
}
/* =================================================================
 * Add to /style.css — places the two sample-chart links side by side
 * above the product option cards. Stacks on mobile.
 * Existing .chart-cta-sample styling is reused.
 * ================================================================= */

.chart-cta-samples {
  display: flex;
  gap: 24px;
  justify-content: center;
  flex-wrap: wrap;
  margin: 0 auto 28px auto;
  max-width: 540px;
}

.chart-cta-samples .chart-cta-sample {
  flex: 1 1 220px;
  text-align: center;
  /* Existing .chart-cta-sample colour, font-size, hover etc. all carry over */
}

@media (max-width: 540px) {
  .chart-cta-samples {
    gap: 12px;
  }
  .chart-cta-samples .chart-cta-sample {
    flex-basis: 100%;
  }
}

/* ─── 16. PAGE-SPECIFIC STYLES ────────────────────────────────────
       Moved from inline <style> blocks. Scoped via body.page-X to
       avoid leaking onto other pages. Original FOUC duplicates of
       body/nav.site-nav/.brand have been dropped (already in §1–4).
   ──────────────────────────────────────────────────────────────── */

/* ── page-daily (daily.html) ── */
body.page-daily .daily-hero {
  max-width: 880px;
  margin: 0 auto;
  padding: 56px 32px 24px;
}
body.page-daily .hero-meta {
  text-align: center;
  margin-bottom: 32px;
}
body.page-daily .hero-date {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 14px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #8a7468;
}
body.page-daily .peta-index-hero {
  display: block;
  text-decoration: none;
  color: inherit;
  background: #fbf6ec;
  border: 1px solid rgba(93,31,35,0.18);
  border-radius: 4px;
  padding: 56px 56px 40px;
  position: relative;
  transition: border-color 0.3s, transform 0.3s;
  box-shadow: 0 1px 3px rgba(93,31,35,0.04);
}
body.page-daily .peta-index-hero:hover {
  border-color: rgba(93,31,35,0.4);
  transform: translateY(-1px);
}
body.page-daily .peta-index-eyebrow {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 11px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: #8a7468;
  margin-bottom: 18px;
}
body.page-daily .peta-index-state-name {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 500;
  font-style: italic;
  font-size: clamp(56px, 9vw, 96px);
  line-height: 1;
  color: #5d1f23;
  letter-spacing: -0.01em;
  margin-bottom: 14px;
}
body.page-daily .peta-index-tagline {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 22px;
  line-height: 1.3;
  color: #5d1f23;
  margin: 0 0 32px 0;
}
body.page-daily .peta-index-explainer {
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 300;
  font-size: 15px;
  line-height: 1.65;
  color: #4a3f38;
  max-width: 580px;
  margin: 0 0 24px 0;
}
body.page-daily .peta-index-cta {
  display: inline-block;
  margin-top: 4px;
  font-weight: 400;
  color: #5d1f23;
  border-bottom: 1px solid rgba(93,31,35,0.4);
  padding-bottom: 1px;
  white-space: nowrap;
}
body.page-daily .peta-index-hero:hover .peta-index-cta {
  border-bottom-color: #5d1f23;
}
body.page-daily .peta-index-detail {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 400;
  font-size: 17px;
  line-height: 1.55;
  color: #1a1814;
  max-width: 620px;
  margin: 24px 0 0 0;
  padding-top: 24px;
  border-top: 1px solid rgba(93,31,35,0.12);
}
body.page-daily .peta-index-hero.state-clarity { border-left: 4px solid #4a7a4d; }
body.page-daily .peta-index-hero.state-cocoon { border-left: 4px solid #5677a3; }
body.page-daily .peta-index-hero.state-pressure-cooker { border-left: 4px solid #7a5495; }
body.page-daily .peta-index-hero.state-overload { border-left: 4px solid #a04848; }
body.page-daily .signs-intro {
  max-width: 880px;
  margin: 56px auto 32px;
  padding: 0 32px;
  text-align: center;
}
body.page-daily .signs-intro h2 {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 500;
  font-style: italic;
  font-size: 32px;
  color: #5d1f23;
  margin: 0 0 8px 0;
  letter-spacing: 0.01em;
}
body.page-daily .signs-intro .lede {
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 300;
  font-size: 15px;
  color: #6b5a50;
  max-width: 480px;
  margin: 0 auto;
  line-height: 1.5;
}
@media (max-width: 640px) {
  body.page-daily .daily-hero { padding: 32px 16px 16px; }
  body.page-daily .peta-index-hero { padding: 32px 24px 28px; }
  body.page-daily .peta-index-state-name { font-size: 56px; }
  body.page-daily .peta-index-tagline { font-size: 18px; margin-bottom: 24px; }
  body.page-daily .peta-index-explainer { font-size: 14px; }
  body.page-daily .peta-index-detail { font-size: 15px; }
  body.page-daily .signs-intro { margin: 40px auto 24px; padding: 0 16px; }
  body.page-daily .signs-intro h2 { font-size: 26px; }
}

/* ── page-charts (charts.html) ── */
body.page-charts .gift-section {max-width:560px;margin:48px auto 0;padding:0 24px}
body.page-charts .gift-toggle-row {display:flex;justify-content:center;margin-bottom:18px}
body.page-charts .gift-toggle-label {display:inline-flex;align-items:center;gap:12px;cursor:pointer;font-family:"Cormorant Garamond",Georgia,serif;font-size:18px;font-style:italic;color:#5d1f23}
body.page-charts .gift-toggle-label input[type="checkbox"] {width:18px;height:18px;accent-color:#5d1f23;cursor:pointer}
body.page-charts .gift-toggle-text {user-select:none}
body.page-charts .gift-fields {margin-top:24px;padding:24px;background:rgba(255,255,255,0.4);border:1px solid rgba(93,31,35,0.15);border-radius:6px}
body.page-charts .gift-fields .form-field {margin-bottom:18px}
body.page-charts .gift-fields .form-field:last-child {margin-bottom:0}
body.page-charts .gift-fields textarea {width:100%;padding:12px 14px;background:#fff;border:1px solid rgba(93,31,35,0.2);border-radius:4px;font-family:"Inter",system-ui,sans-serif;font-size:15px;font-weight:300;color:#1a1814;resize:vertical;min-height:80px;line-height:1.5}
body.page-charts .gift-fields textarea:focus {outline:none;border-color:#5d1f23}
body.page-charts .gift-fields .optional {color:#6b5f55;font-style:italic;font-size:13px;font-weight:300}
body.page-charts .gift-fields .helper {font-size:12px;color:#6b5f55;display:block;margin-top:4px;text-align:right}
body.page-charts .paper-size-section {margin-top:32px;padding:24px;background:rgba(255,255,255,0.4);border:1px solid rgba(93,31,35,0.15);border-radius:6px}
body.page-charts .paper-size-label {font-family:"Cormorant Garamond",Georgia,serif;font-size:18px;font-style:italic;color:#5d1f23;text-align:center;margin-bottom:16px}
body.page-charts .paper-size-options {display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:8px}
@media (max-width:560px) {
  body.page-charts .paper-size-options {grid-template-columns:1fr}
}
body.page-charts .paper-size-option {display:flex;flex-direction:column;align-items:center;padding:14px 16px;background:#fff;border:1px solid rgba(93,31,35,0.25);border-radius:4px;cursor:pointer;transition:all 0.15s;text-align:center}
body.page-charts .paper-size-option:hover {border-color:#5d1f23;background:#faf7f0}
body.page-charts .paper-size-option input[type="radio"] {position:absolute;opacity:0;pointer-events:none}
body.page-charts .paper-size-option:has(input[type="radio"]:checked) {border-color:#5d1f23;background:#faf7f0;box-shadow:inset 0 0 0 1px #5d1f23}
body.page-charts .paper-size-name {font-family:"Inter",system-ui,sans-serif;font-size:15px;font-weight:600;color:#1a1814;margin-bottom:4px;letter-spacing:0.02em}
body.page-charts .paper-size-desc {font-family:"Cormorant Garamond",Georgia,serif;font-size:13px;font-style:italic;color:#6b5f55;line-height:1.4}
body.page-charts .paper-size-section .helper {font-size:12px;color:#6b5f55;display:block;margin-top:8px;text-align:center;font-family:"Cormorant Garamond",Georgia,serif;font-style:italic}
body.page-charts .continue-button-area {display:flex;justify-content:center;margin-top:32px;padding-bottom:48px}
body.page-charts .continue-to-confirm-btn {display:inline-flex;align-items:center;gap:10px;padding:14px 36px;background:#5d1f23;color:#f5eee0;border:1px solid #5d1f23;font-family:"Inter",system-ui,sans-serif;font-size:14px;font-weight:500;letter-spacing:0.08em;text-transform:uppercase;cursor:pointer;border-radius:2px;transition:all 0.2s}
body.page-charts .continue-to-confirm-btn:hover:not(:disabled) {background:#3d1517;border-color:#3d1517}
body.page-charts .continue-to-confirm-btn:disabled {background:#b8a991;border-color:#b8a991;cursor:not-allowed;opacity:0.6}
body.page-charts .continue-to-confirm-btn .arrow {font-size:16px}
body.page-charts .confirmation-section {display:none;max-width:680px;margin:0 auto;padding:32px 24px}
body.page-charts .confirmation-section.active {display:block}
body.page-charts .confirmation-card {background:#faf7f0;border:1px solid #b8a991;border-radius:6px;padding:48px 40px}
body.page-charts .confirmation-header {text-align:center;margin-bottom:32px}
body.page-charts .confirmation-eyebrow {font-family:"Cormorant Garamond",Georgia,serif;font-size:14px;font-style:italic;color:#5d1f23;letter-spacing:0.12em;margin-bottom:16px}
body.page-charts .confirmation-question {font-family:"Cormorant Garamond",Georgia,serif;font-size:24px;font-style:italic;color:#1a1814;line-height:1.4;max-width:440px;margin:0 auto}
body.page-charts .confirmation-divider {height:1px;background:#b8a991;margin:28px 0}
body.page-charts .confirmation-person {margin-bottom:8px}
body.page-charts .confirmation-person-label {font-size:11px;letter-spacing:0.18em;text-transform:uppercase;color:#5d1f23;font-weight:500;margin-bottom:14px}
body.page-charts .confirmation-row {display:flex;padding:8px 0;align-items:baseline}
body.page-charts .conf-label {flex:0 0 130px;font-size:13px;color:#6b5f55;font-weight:400}
body.page-charts .conf-value {flex:1;font-size:15px;color:#1a1814;font-weight:400}
body.page-charts .confirmation-delivery .conf-label {flex:0 0 160px}
body.page-charts .confirmation-gift-note {margin-top:14px}
body.page-charts .confirmation-note-text {margin-top:8px;padding:14px 18px;background:#f5eee0;border-left:3px solid #5d1f23;font-family:"Cormorant Garamond",Georgia,serif;font-style:italic;font-size:16px;line-height:1.6;color:#1a1814}
body.page-charts .confirmation-checkbox-row {margin:16px 0 28px;text-align:center}
body.page-charts .confirmation-checkbox-label {display:inline-flex;align-items:center;gap:12px;cursor:pointer;font-family:"Cormorant Garamond",Georgia,serif;font-size:18px;font-style:italic;color:#5d1f23}
body.page-charts .confirmation-checkbox-label input[type="checkbox"] {width:18px;height:18px;accent-color:#5d1f23;cursor:pointer}
body.page-charts .confirmation-actions {display:flex;justify-content:center}
body.page-charts .confirmation-edit-btn {background:transparent;border:none;color:#6b5f55;font-family:"Inter",system-ui,sans-serif;font-size:13px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;padding:8px 16px;text-decoration:underline}
body.page-charts .confirmation-edit-btn:hover {color:#5d1f23}
body.page-charts .arrow-back {font-size:14px}
body.page-charts .paypal-section {display:none;max-width:560px;margin:0 auto;padding:32px 24px 64px}
body.page-charts .paypal-section.active {display:block}
body.page-charts .processing-section {display:none;max-width:560px;margin:0 auto;padding:48px 24px;text-align:center}
body.page-charts .processing-section.active {display:block}
body.page-charts .processing-card {padding:48px 32px;background:#faf7f0;border:1px solid #b8a991;border-radius:6px}
body.page-charts .processing-spinner {width:48px;height:48px;border:3px solid rgba(93,31,35,0.2);border-top-color:#5d1f23;border-radius:50%;animation:spin 1.2s linear infinite;margin:0 auto 28px}
@keyframes spin {
  body.page-charts to {transform:rotate(360deg)}
}
body.page-charts .processing-title {font-family:"Cormorant Garamond",Georgia,serif;font-size:26px;font-style:italic;color:#5d1f23;margin:0 0 14px;line-height:1.3}
body.page-charts .processing-status {font-size:14px;color:#6b5f55;line-height:1.6;max-width:380px;margin:0 auto}
body.page-charts .success-section {display:none;max-width:560px;margin:0 auto;padding:48px 24px;text-align:center}
body.page-charts .success-section.active {display:block}
body.page-charts .success-card {padding:48px 32px;background:#faf7f0;border:1px solid #b8a991;border-radius:6px}
body.page-charts .success-eyebrow {font-family:"Cormorant Garamond",Georgia,serif;font-size:14px;font-style:italic;color:#5d1f23;letter-spacing:0.12em;margin-bottom:16px}
body.page-charts .success-title {font-family:"Cormorant Garamond",Georgia,serif;font-size:32px;color:#5d1f23;margin:0 0 18px;line-height:1.3;font-weight:500}
body.page-charts .success-message {font-size:15px;color:#1a1814;line-height:1.7;max-width:420px;margin:0 auto 32px}
body.page-charts .success-button {display:inline-block;padding:14px 36px;background:#5d1f23;color:#f5eee0;text-decoration:none;font-size:14px;font-weight:500;letter-spacing:0.08em;text-transform:uppercase;border-radius:2px}
body.page-charts .success-button:hover {background:#3d1517}
body.page-charts .success-signoff {font-family:"Cormorant Garamond",Georgia,serif;font-size:18px;color:#5d1f23;margin-top:36px;line-height:1.5}
body.page-charts .success-signoff em {font-size:22px;font-style:italic}
body.page-charts .error-section {display:none;max-width:560px;margin:0 auto;padding:48px 24px;text-align:center}
body.page-charts .error-section.active {display:block}
body.page-charts .error-card {padding:48px 32px;background:#faf7f0;border:1px solid #b8a991;border-radius:6px}
body.page-charts .error-message {font-family:"Cormorant Garamond",Georgia,serif;font-size:20px;font-style:italic;color:#1a1814;line-height:1.6;max-width:440px;margin:0 auto 24px}
body.page-charts .error-signoff {font-family:"Cormorant Garamond",Georgia,serif;font-size:18px;color:#5d1f23;line-height:1.5;margin-bottom:20px}
body.page-charts .error-signoff em {font-size:22px;font-style:italic}
body.page-charts .error-token-info {font-size:11px;color:#6b5f55;font-family:monospace;margin-top:24px;padding-top:18px;border-top:1px solid #b8a991}

/* ── page-forecast (forecast.html) ── */
body.page-forecast * {margin:0;padding:0;box-sizing:border-box}
body.page-forecast {
  --bg:#f5eee0;--card:#fff;--text:#1c1612;--soft:#6b5f55;--muted:#a89f94;
  --burgundy:#5d1f23;--burgundy-light:#8a2c32;--burgundy-pale:rgba(93,31,35,0.05);
  --border:#b8a991;--border-light:#e8e3dc;
  --green:#16a34a;--red:#dc2626;
  --serif:'Cormorant Garamond',Georgia,serif;
  --sans:'Inter',system-ui,sans-serif;
}
body.page-forecast nav {background:rgba(245,238,224,0.92);border-bottom:1px solid rgba(93,31,35,0.12);padding:18px 48px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:100}
body.page-forecast .nl {display:flex;gap:24px}
body.page-forecast .nl a {font-size:13px;font-weight:500;color:var(--text);text-decoration:none;letter-spacing:.5px;text-transform:uppercase}
body.page-forecast .wrap {max-width:640px;margin:0 auto;padding:40px 20px 80px}
body.page-forecast .steps {display:flex;justify-content:center;gap:8px;margin-bottom:36px}
body.page-forecast .step {display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600;color:var(--muted);letter-spacing:0.5px}
body.page-forecast .step.active {color:var(--burgundy)}
body.page-forecast .step.done {color:var(--green)}
body.page-forecast .step-num {width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;border:2px solid var(--border);color:var(--muted)}
body.page-forecast .step.active .step-num {border-color:var(--burgundy);color:var(--burgundy);background:var(--burgundy-pale)}
body.page-forecast .step.done .step-num {border-color:var(--green);color:#fff;background:var(--green)}
body.page-forecast .step-line {width:40px;height:1px;background:var(--border)}
body.page-forecast .hero {text-align:center;margin-bottom:32px}
body.page-forecast .hero h1 {font-family:var(--serif);font-size:clamp(28px,5vw,38px);font-weight:700;line-height:1.15;margin-bottom:8px;font-style:italic;color:var(--burgundy)}
body.page-forecast .hero p {font-size:16px;color:var(--soft);font-weight:300;line-height:1.6}
body.page-forecast .panel {background:var(--card);border:1px solid var(--border-light);border-radius:14px;padding:32px;margin-bottom:20px;display:none}
body.page-forecast .panel.visible {display:block}
body.page-forecast .panel h2 {font-family:var(--serif);font-size:22px;font-weight:700;margin-bottom:18px;color:var(--burgundy)}
body.page-forecast .field {margin-bottom:18px}
body.page-forecast .field label {display:block;font-size:12px;font-weight:600;letter-spacing:0.5px;text-transform:uppercase;color:var(--soft);margin-bottom:6px}
body.page-forecast .field input, body.page-forecast .field select {width:100%;padding:12px 14px;border:1px solid var(--border);border-radius:8px;font-family:var(--sans);font-size:15px;color:var(--text);background:#fff;outline:none}
body.page-forecast .field input:focus {border-color:var(--burgundy)}
body.page-forecast .btn {display:block;width:100%;padding:16px;background:var(--burgundy);border:none;border-radius:10px;font-family:var(--sans);font-size:14px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:#fff;cursor:pointer;transition:all .3s}
body.page-forecast .btn:hover {background:#3d1517;transform:translateY(-2px)}
body.page-forecast .btn-back {background:none;border:1px solid var(--border);color:var(--soft);font-size:12px;padding:10px;border-radius:8px;cursor:pointer;margin-bottom:14px}
body.page-forecast .review-card {background:var(--burgundy-pale);border:1px solid rgba(93,31,35,0.1);border-radius:10px;padding:20px;margin-bottom:20px}
body.page-forecast .review-row {display:flex;justify-content:space-between;padding:6px 0;font-size:14px;border-bottom:1px solid rgba(93,31,35,0.1)}
body.page-forecast .review-row:last-child {border:none}
body.page-forecast .review-label {color:var(--soft)}
body.page-forecast .review-val {font-weight:600}
body.page-forecast .price-box {text-align:center;padding:20px;margin:20px 0;border-top:1px solid var(--border-light);border-bottom:1px solid var(--border-light)}
body.page-forecast .price-box .amount {font-family:var(--serif);font-size:48px;font-weight:700;color:var(--burgundy)}
body.page-forecast .spinner {display:inline-block;width:30px;height:30px;border:3px solid var(--border);border-top-color:var(--burgundy);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin {
  body.page-forecast to {transform:rotate(360deg)}
}
@media(max-width:640px) {
  body.page-forecast nav {padding:14px 20px;}
  body.page-forecast .nl {display:none}
}

/* ── page-kindex (k-index.html) ── */
body[data-state="clarity"] { --state-accent:#4a7a4d; }
body[data-state="cocoon"] { --state-accent:#5677a3; }
body[data-state="pressure-cooker"] { --state-accent:#7a5495; }
body[data-state="overload"] { --state-accent:#a04848; }
body.page-kindex .kindex-hero { max-width: 880px; margin: 0 auto; padding: 56px 32px; display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
body.page-kindex .kindex-state { font-family: "Cormorant Garamond", serif; font-size: 84px; font-style: italic; color: var(--state-accent); line-height: 1; }
body.page-kindex .forecast-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 880px; margin: 40px auto; padding: 0 32px; }
body.page-kindex .forecast-day { background: #fbf6ec; padding: 20px; border-radius: 4px; border-left: 4px solid var(--state-accent); }
body.page-kindex .cta-box { max-width: 600px; margin: 60px auto; padding: 40px; background: #faf7f0; border: 1px solid #b8a991; text-align: center; }
@media (max-width: 600px) {
  body.page-kindex .kindex-hero { grid-template-columns: 1fr; }
  body.page-kindex .forecast-strip { grid-template-columns: 1fr; }
}


/* ─── 17. ABOUT SUB-SECTION ("A Sanctuary from the Noise") ───────── */

.about-subhead{
  font-family:var(--serif);
  font-size:30px;
  font-weight:500;
  font-style:italic;
  color:var(--burgundy);
  text-align:center;
  margin:48px 0 28px;
  letter-spacing:0.01em;
}

.about-principles{
  list-style:none;
  padding:0;
  margin:0 0 28px;
  max-width:640px;
  margin-left:auto;
  margin-right:auto;
}
.about-principles li{
  font-size:17px;
  line-height:1.85;
  color:var(--ink-soft);
  padding:14px 0 14px 26px;
  position:relative;
  border-bottom:1px solid rgba(93,31,35,0.08);
}
.about-principles li:last-child{border-bottom:none}
.about-principles li::before{
  content:"✦";
  position:absolute;
  left:0;
  top:14px;
  color:var(--burgundy);
  font-size:14px;
}
.about-principles strong{
  font-weight:500;
  color:var(--ink);
}

.about-fineprint{
  text-align:center;
  font-size:14px;
  margin-top:36px !important;
}
.about-fineprint a{
  color:var(--burgundy);
  font-style:italic;
  text-decoration:none;
  border-bottom:1px solid rgba(93,31,35,0.3);
  padding-bottom:1px;
}
.about-fineprint a:hover{
  border-bottom-color:var(--burgundy);
}


/* ─── 18. LEGAL / TERMS PAGE ─────────────────────────────────────── */

.legal-page{
  background:var(--cream);
  padding:80px 32px 64px;
}
.legal-inner{
  max-width:760px;
  margin:0 auto;
}

.legal-header{
  text-align:center;
  margin-bottom:64px;
  padding-bottom:48px;
  border-bottom:1px solid var(--border);
}
.legal-eyebrow{
  font-family:var(--sans);
  font-size:11px;font-weight:500;
  text-transform:uppercase;
  letter-spacing:0.35em;
  color:var(--burgundy);
  margin-bottom:22px;
}
.legal-header h1{
  font-family:var(--serif);
  font-size:clamp(34px,4.5vw,52px);
  font-weight:500;
  line-height:1.12;
  margin:0 0 24px;
  color:var(--ink);
}
.legal-meta{
  font-family:var(--serif);
  font-style:italic;
  font-size:15px;
  color:var(--ink-soft);
  margin:0;
}
.legal-meta a{
  color:var(--burgundy);
  text-decoration:none;
  border-bottom:1px solid rgba(93,31,35,0.3);
}
.legal-meta a:hover{border-bottom-color:var(--burgundy)}

.legal-body h2{
  font-family:var(--serif);
  font-size:24px;
  font-weight:500;
  color:var(--burgundy);
  margin:48px 0 18px;
  line-height:1.3;
  letter-spacing:0.01em;
}
.legal-body h2:first-child{margin-top:0}
.legal-body p{
  font-size:16px;
  line-height:1.8;
  color:var(--ink-soft);
  margin:0 0 18px;
}
.legal-body strong{
  font-weight:500;
  color:var(--ink);
}
.legal-body em{
  font-family:var(--serif);
  font-style:italic;
}
.legal-body a{
  color:var(--burgundy);
  text-decoration:none;
  border-bottom:1px solid rgba(93,31,35,0.3);
}
.legal-body a:hover{border-bottom-color:var(--burgundy)}

.legal-list{
  list-style:none;
  padding:0;
  margin:0 0 24px;
}
.legal-list li{
  font-size:16px;
  line-height:1.75;
  color:var(--ink-soft);
  padding:10px 0 10px 24px;
  position:relative;
  border-bottom:1px solid rgba(93,31,35,0.06);
}
.legal-list li:last-child{border-bottom:none}
.legal-list li::before{
  content:"✦";
  position:absolute;
  left:0;
  top:11px;
  color:var(--burgundy);
  font-size:12px;
}

.legal-callout{
  background:var(--surface);
  border-left:3px solid var(--burgundy);
  padding:18px 24px;
  margin:24px 0;
  font-size:15px;
  line-height:1.7;
}

.legal-contact{
  text-align:center;
  font-family:var(--serif);
  font-style:italic;
  font-size:17px;
  color:var(--burgundy);
  margin:32px 0 0 !important;
}

@media (max-width:600px){
  .legal-page{padding:48px 22px 48px}
  .legal-header{margin-bottom:40px;padding-bottom:32px}
  .legal-body h2{margin:36px 0 14px;font-size:21px}
  .about-subhead{font-size:26px;margin:36px 0 22px}
  .about-principles li{padding:12px 0 12px 22px}
}