/* =============================================================================
   Landing page (FRONTEND/index.html) — first-time-visitor sections.

   index.html is GENERATED from landing/templates/index.template.html by
   scripts/render_landing.py; this stylesheet carries everything the new
   sections need that the fleet Tailwind build does not, so the new markup has
   no inline style, no <style> block and no handler attributes (strict-CSP
   ready). Rules: rem only (DEV_GUIDE #1), 2.75rem touch targets (#6), motion
   150–300ms and none under prefers-reduced-motion (#14). Dark mode follows the
   page: `.dark` on <html>, set by the theme toggle.

   Colour pairs were measured for WCAG AA (4.5:1 for text):
     white on #c23a3a 5.3   white on #7a5906..#9a6f07 >= 4.52
     #b3343a on #fff 6.05   #f4b3b3 on #111827 10.1   #7c5a05 on #fffbeb 6.1
   ========================================================================== */

:root {
  --im-rose-ink: #b3343a;
  --im-rose-ink-dark: #f4b3b3;
  --im-gold-ink: #7c5a05;
  --im-gold-ink-dark: #fde68a;
  --im-sage-ink: #3f6212;
  --im-sage-ink-dark: #bef264;
  --im-line: rgba(184, 134, 11, 0.28);
  --im-line-dark: rgba(253, 230, 138, 0.18);
  --im-ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---- Anchored sections clear the fixed header (page-mode token) ---------- */
.im-anchor { scroll-margin-top: var(--app-header-offset, 4rem); }
.im-anchor:focus-visible { outline-offset: -0.25rem; }

/* ---- Hero backgrounds (were inline style attributes) --------------------- */
.im-hero-bg-light { background-image: url("/static/images/astromatch-light.jpg"); }
.im-hero-bg-dark { background-image: url("/static/images/astromatch-dark.jpg"); }

/* A readability scrim: on a phone the headline sits over the couple, so the
   scrim is strongest at the top; from lg the text column is on the left and
   the scrim fades out towards the photograph on the right. */
.im-hero-scrim {
  background: linear-gradient(180deg, rgba(255, 249, 247, 0.92) 0%, rgba(255, 249, 247, 0.78) 55%, rgba(255, 249, 247, 0.35) 100%);
}
.dark .im-hero-scrim {
  background: linear-gradient(180deg, rgba(17, 12, 32, 0.9) 0%, rgba(17, 12, 32, 0.74) 55%, rgba(17, 12, 32, 0.35) 100%);
}
@media (min-width: 64rem) {
  .im-hero-scrim {
    background: linear-gradient(90deg, rgba(255, 249, 247, 0.9) 0%, rgba(255, 249, 247, 0.62) 42%, rgba(255, 249, 247, 0) 62%);
  }
  .dark .im-hero-scrim {
    background: linear-gradient(90deg, rgba(17, 12, 32, 0.88) 0%, rgba(17, 12, 32, 0.6) 42%, rgba(17, 12, 32, 0) 62%);
  }
}

.im-balance { text-wrap: balance; }

/* ---- Buttons and links ---------------------------------------------------- */
.im-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  min-height: 2.75rem;
  padding: 0.875rem 1.75rem;
  border-radius: 1rem;
  font-weight: 600;
  font-size: 1.0625rem;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  border: 0.0625rem solid transparent;
  transition: transform 200ms var(--im-ease), box-shadow 200ms var(--im-ease), background-color 200ms var(--im-ease);
}
.im-btn:hover { transform: translateY(-0.125rem); }
.im-btn:active { transform: translateY(0); }
.im-btn-primary {
  color: #fff;
  background: linear-gradient(135deg, #c23a3a, #a8322f);
  box-shadow: 0 0.5rem 1.5rem rgba(168, 50, 47, 0.28);
}
.im-btn-primary:hover { box-shadow: 0 0.75rem 2rem rgba(168, 50, 47, 0.36); }
.im-btn-gold {
  color: #fff;
  background: linear-gradient(135deg, #9a6f07, #7a5906);
  box-shadow: 0 0.5rem 1.5rem rgba(122, 89, 6, 0.28);
}
.im-btn-secondary {
  color: var(--im-rose-ink);
  background: rgba(255, 255, 255, 0.88);
  border-color: rgba(179, 52, 58, 0.35);
  backdrop-filter: blur(0.5rem);
}
.dark .im-btn-secondary {
  color: var(--im-rose-ink-dark);
  background: rgba(31, 41, 55, 0.82);
  border-color: rgba(244, 179, 179, 0.35);
}
@media (max-width: 39.9375rem) {
  .im-btn { width: 100%; }
}

.im-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  font-weight: 600;
  color: var(--im-rose-ink);
  text-decoration: underline;
  text-decoration-thickness: 0.0625rem;
  text-underline-offset: 0.25rem;
}
.im-link:hover { text-decoration-thickness: 0.125rem; }
.dark .im-link { color: var(--im-rose-ink-dark); }
.im-link .fa-arrow-right { font-size: 0.8125rem; transition: transform 200ms var(--im-ease); }
.im-link:hover .fa-arrow-right { transform: translateX(0.1875rem); }

/* ---- Eyebrow pills and icon tiles ----------------------------------------- */
.im-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  margin-bottom: 1rem;
  border-radius: 9999rem;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--im-rose-ink);
  background: rgba(255, 241, 237, 0.9);
  border: 0.0625rem solid rgba(179, 52, 58, 0.22);
}
.dark .im-eyebrow {
  color: var(--im-rose-ink-dark);
  background: rgba(179, 52, 58, 0.16);
  border-color: rgba(244, 179, 179, 0.25);
}
.im-eyebrow-gold { color: var(--im-gold-ink); background: rgba(254, 243, 199, 0.9); border-color: var(--im-line); }
.dark .im-eyebrow-gold { color: var(--im-gold-ink-dark); background: rgba(212, 160, 18, 0.14); border-color: var(--im-line-dark); }
.im-eyebrow-sage { color: var(--im-sage-ink); background: rgba(236, 252, 203, 0.85); border-color: rgba(63, 98, 18, 0.22); }
.dark .im-eyebrow-sage { color: var(--im-sage-ink-dark); background: rgba(132, 204, 22, 0.12); border-color: rgba(190, 242, 100, 0.22); }

.im-icon-tile {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 1rem;
  font-size: 1.25rem;
  color: var(--im-gold-ink);
  background: rgba(254, 243, 199, 0.95);
  border: 0.0625rem solid var(--im-line);
}
.dark .im-icon-tile { color: var(--im-gold-ink-dark); background: rgba(212, 160, 18, 0.14); border-color: var(--im-line-dark); }
.im-icon-tile-sage { color: var(--im-sage-ink); background: rgba(236, 252, 203, 0.9); border-color: rgba(63, 98, 18, 0.2); }
.dark .im-icon-tile-sage { color: var(--im-sage-ink-dark); background: rgba(132, 204, 22, 0.12); border-color: rgba(190, 242, 100, 0.2); }

/* ---- How it works --------------------------------------------------------- */
.im-steps { list-style: none; margin: 0; padding: 0; }
.im-step { position: relative; min-width: 0; }
/* Beats the page's `.glass-card` / `.dark .glass-card` border shorthand, which loads later. */
.im-steps .im-step.glass-card { border-top: 0.25rem solid #d4a012; }
.im-step-number {
  font-size: 3rem;
  line-height: 1;
  font-weight: 700;
  color: var(--im-gold-ink);
  font-variant-numeric: lining-nums tabular-nums;
}
.dark .im-step-number { color: var(--im-gold-ink-dark); }

/* ---- Astro Match: the almanac panel --------------------------------------- */
.im-almanac {
  background:
    radial-gradient(60rem 30rem at 85% -10%, rgba(212, 160, 18, 0.16), transparent 60%),
    radial-gradient(40rem 24rem at -10% 110%, rgba(224, 119, 119, 0.14), transparent 60%),
    linear-gradient(180deg, #fffbeb 0%, #fff9f7 100%);
}
.dark .im-almanac {
  background:
    radial-gradient(60rem 30rem at 85% -10%, rgba(212, 160, 18, 0.18), transparent 60%),
    radial-gradient(40rem 24rem at -10% 110%, rgba(168, 85, 247, 0.16), transparent 60%),
    linear-gradient(180deg, #120d24 0%, #111827 100%);
}
/* A faint 12-spoke wheel behind the heading, drawn in CSS, echoing the chart. */
.im-almanac::before {
  content: "";
  position: absolute;
  top: -8rem;
  right: -8rem;
  width: 28rem;
  height: 28rem;
  border-radius: 50%;
  border: 0.0625rem solid var(--im-line);
  background: repeating-conic-gradient(from 0deg, var(--im-line) 0deg 0.4deg, transparent 0.4deg 30deg);
  -webkit-mask: radial-gradient(circle, transparent 38%, #000 39%, #000 70%, transparent 71%);
  mask: radial-gradient(circle, transparent 38%, #000 39%, #000 70%, transparent 71%);
  opacity: 0.7;
  pointer-events: none;
}
.dark .im-almanac::before { border-color: var(--im-line-dark); background: repeating-conic-gradient(from 0deg, var(--im-line-dark) 0deg 0.4deg, transparent 0.4deg 30deg); }

.im-ledger { min-width: 0; }
.im-ledger-total-figure {
  font-size: 3.5rem;
  line-height: 1;
  font-weight: 700;
  color: var(--im-gold-ink);
  font-variant-numeric: lining-nums;
}
.dark .im-ledger-total-figure { color: var(--im-gold-ink-dark); }

/* The 36 points as one bar: each koota's segment is as wide as its points. */
.im-weights {
  display: flex;
  gap: 0.1875rem;
  height: 0.875rem;
  margin: 0 0 1.25rem;
  border-radius: 9999rem;
  overflow: hidden;
}
.im-weight { display: block; min-width: 0; flex-basis: 0; background: linear-gradient(180deg, #d4a012, #b8860b); }
.im-weight:nth-child(even) { background: linear-gradient(180deg, #e07777, #c23a3a); }
.im-w1 { flex-grow: 1; } .im-w2 { flex-grow: 2; } .im-w3 { flex-grow: 3; } .im-w4 { flex-grow: 4; }
.im-w5 { flex-grow: 5; } .im-w6 { flex-grow: 6; } .im-w7 { flex-grow: 7; } .im-w8 { flex-grow: 8; }

.im-ledger-list { list-style: none; margin: 0; padding: 0; }
.im-ledger-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: "name leader points" "meaning meaning meaning";
  align-items: baseline;
  column-gap: 0.75rem;
  padding: 0.75rem 0;
  border-bottom: 0.0625rem solid var(--im-line);
}
.dark .im-ledger-row { border-bottom-color: var(--im-line-dark); }
.im-ledger-name { grid-area: name; font-size: 1.375rem; font-weight: 700; color: #111827; }
.dark .im-ledger-name { color: #fff; }
.im-ledger-leader { grid-area: leader; align-self: end; margin-bottom: 0.375rem; border-bottom: 0.125rem dotted var(--im-line); }
.dark .im-ledger-leader { border-bottom-color: var(--im-line-dark); }
.im-ledger-points { grid-area: points; font-weight: 700; color: var(--im-gold-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.dark .im-ledger-points { color: var(--im-gold-ink-dark); }
.im-ledger-unit { font-weight: 500; font-size: 0.8125rem; }
.im-ledger-meaning { grid-area: meaning; font-size: 0.9375rem; color: #4b5563; margin-top: 0.125rem; }
.dark .im-ledger-meaning { color: #d1d5db; }
.im-ledger-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-top: 0.875rem;
  font-weight: 700;
  color: #111827;
}
.dark .im-ledger-total { color: #fff; }

/* The 0–36 scale, split at the engine's rating boundaries. */
.im-scale { display: flex; gap: 0.1875rem; height: 0.625rem; border-radius: 9999rem; overflow: hidden; margin-bottom: 1rem; }
.im-scale > span { display: block; flex-basis: 0; min-width: 0; }
.im-band-1 { background: #9ca3af; }
.im-band-2 { background: #e0b64a; }
.im-band-3 { background: #d4a012; }
.im-band-4 { background: #a8322f; }
.im-scale > .im-band-1 { flex-grow: 18; }
.im-scale > .im-band-2 { flex-grow: 7; }
.im-scale > .im-band-3 { flex-grow: 8; }
.im-scale > .im-band-4 { flex-grow: 4; }
.im-band-row { display: flex; align-items: center; gap: 0.75rem; min-height: 2.75rem; }
.im-band-row > span:nth-child(2) { white-space: nowrap; min-width: 3rem; }
.im-band-swatch { flex: none; width: 0.875rem; height: 0.875rem; border-radius: 9999rem; }

.im-callout {
  background: rgba(255, 255, 255, 0.82);
  border: 0.0625rem solid var(--im-line);
  box-shadow: 0 0.5rem 2rem rgba(122, 89, 6, 0.08);
  min-width: 0;
}
.dark .im-callout { background: rgba(30, 30, 45, 0.78); border-color: var(--im-line-dark); box-shadow: none; }
.im-note {
  border-left: 0.25rem solid #d4a012;
  padding: 0.25rem 0 0.25rem 1rem;
  color: #374151;
  font-style: italic;
}
.dark .im-note { color: #d1d5db; }

/* ---- FAQ (native <details>, no script) ------------------------------------ */
.im-faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 2.75rem;
  padding: 1.125rem 1.25rem;
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  font-size: 1.0625rem;
  color: #111827;
}
.dark .im-faq-q { color: #fff; }
.im-faq-q::-webkit-details-marker { display: none; }
.im-faq-q::marker { content: ""; }
.im-faq-icon { flex: none; color: var(--im-gold-ink); transition: transform 200ms var(--im-ease); }
.dark .im-faq-icon { color: var(--im-gold-ink-dark); }
.im-faq[open] .im-faq-icon { transform: rotate(180deg); }
.im-faq-a { padding: 0 1.25rem 1.25rem; color: #374151; line-height: 1.7; }
.dark .im-faq-a { color: #d1d5db; }
.im-faq-a p + .im-link { margin-top: 0.25rem; }

/* ---- Reduced motion: no movement, instant state --------------------------- */
@media (prefers-reduced-motion: reduce) {
  .im-btn,
  .im-btn:hover,
  .im-link .fa-arrow-right,
  .im-faq-icon {
    transition: none;
    transform: none;
  }
  .im-faq[open] .im-faq-icon { transform: rotate(180deg); }
  .gradient-text { animation: none; }
}