/* ==========================================================================
   Astrology Eclipse — shared stylesheet
   Used by index.html and onboarding.html (which also renders the reading).

   Palette follows the warm "linen + night forest" direction:
   cream paper, deep green ink, amber corona accent. No purple, no serif
   display faces — Helvetica throughout, per house style.
   ========================================================================== */

:root {
  /* Surfaces. Warm cream ground, warm-white cards. The ground is the Smalls
     cream (#f5e5c4) shared with the birthdayhoroscope template, so the two
     pages read as one family rather than two unrelated products. Cards are
     off-white, not pure white — pure white against this cream reads as a
     hole punched in the page. */
  --ecl-cream: #fffdf6;   /* cards, raised surfaces */
  --ecl-linen: #f5e5c4;   /* warm cream — the page ground */
  --ecl-sand: #ecd9b2;    /* deeper cream — alternating bands */

  /* Ink. The green is the ink, not a decoration — headings, body and buttons
     all sit on the same hue so the page has one voice. */
  --ecl-forest: #002e2b;
  --ecl-ink: #002e2b;
  /* Both measured against the cream ground, which is the worst case — every
     card surface is lighter, so anything passing here passes everywhere. */
  --ecl-body: #3a5551;    /* body copy — 6.5:1 on cream */
  --ecl-taupe: #506661;   /* secondary — 4.95:1; the lightest value that
                             still clears AA for 14px text on cream */

  /* Accents.
     Three, used by GROUND, not by mood — this is the rule that keeps the
     palette from going muddy:
       --ecl-yellow  fills, and text on DARK green only. 9.6:1 there but
                     1.2:1 on cream, so it must never carry text on the light
                     ground — that single mistake is what would make this
                     palette look broken.
       --ecl-label   small accent text on CREAM (4.8:1). This is the coral
                     darkened until it passes; the coral itself cannot carry
                     text on cream at any size.
       --ecl-coral   fills and marks only, never text
     --ecl-amber stays the corona's own warm light and is also the report's
     accent (styles above line 1366) — left at its working value so this
     rebuild does not reach into a page that was already signed off. */
  --ecl-yellow: #f3ce46;
  --ecl-gold: #efd772;
  --ecl-coral: #ff7168;
  --ecl-label: #a8442a;
  --ecl-amber: #e0973a;
  --ecl-olive: #7d8c3f;
  --ecl-terracotta: #d2542b;

  /* Utility */
  --ecl-line: #ddc9a2;    /* warm border — a grey rule on cream reads dirty */
  --ecl-line-soft: #e8d9b8;
  --ecl-error: #b3341a;

  /* Type — house standard. Helvetica, no webfont. birthdayhoroscope sets
     DM Sans ahead of it, but the house rule for this template is Helvetica
     and no Google Fonts request, so the palette is adopted and the typeface
     is not. */
  --ecl-font: "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* Rhythm */
  --ecl-radius: 16px;
  --ecl-radius-pill: 999px;
  --ecl-maxw: 620px;

  /* Fluid type — scales with the viewport, no breakpoint jumps */
  --t-hero: clamp(42px, 7.4vw, 92px);
  --t-h2: clamp(28px, 3.4vw, 44px);
  --t-h3: clamp(19px, 1.5vw, 21px);
  --t-lede: clamp(17px, 1.4vw, 20px);

  /* Elevation. Tinted with the ink green rather than black — a neutral
     shadow on a cream ground goes grey and kills the warmth. */
  --e-1: 0 1px 2px rgba(0, 46, 43, 0.05), 0 4px 12px -4px rgba(0, 46, 43, 0.08);
  --e-2: 0 2px 4px rgba(0, 46, 43, 0.06), 0 14px 32px -12px rgba(0, 46, 43, 0.16);
  --e-3: 0 4px 8px rgba(0, 46, 43, 0.07), 0 30px 60px -22px rgba(0, 46, 43, 0.28);

  /* The house's hard offset shadow — no blur, flat and confident. This is
     the single detail that most says "same product as birthdayhoroscope". */
  --e-hard: 4px 4px 0 var(--ecl-forest);
  --e-hard-sm: 3px 3px 0 var(--ecl-forest);

  --ease: cubic-bezier(0.22, 0.68, 0.36, 1);
}

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

html {
  -webkit-text-size-adjust: 100%;
}

/* The `hidden` attribute must beat author display rules. Without this,
   `.ecl-onboarding { display: flex }` overrides the UA stylesheet's
   `[hidden] { display: none }` and the progress view never goes away. */
[hidden] {
  display: none !important;
}

body {
  margin: 0;
  padding: 0;
  background: var(--ecl-linen);
  color: var(--ecl-ink);
  font-family: var(--ecl-font);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */

.ecl-shell {
  max-width: var(--ecl-maxw);
  margin: 0 auto;
  padding: 0 20px 64px;
}

.ecl-card {
  background: var(--ecl-cream);
  border: 1px solid var(--ecl-line);
  border-radius: var(--ecl-radius);
  padding: 32px 28px;
}

/* --------------------------------------------------------------------------
   Masthead
   -------------------------------------------------------------------------- */

.ecl-masthead {
  text-align: center;
  padding: 48px 0 32px;
}

.ecl-eyebrow {
  margin: 0 0 14px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0px;
  text-transform: uppercase;
  color: var(--ecl-taupe);
}

h1 {
  margin: 0 0 16px;
  font-size: 40px;
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ecl-forest);
}

h2 {
  margin: 0 0 12px;
  font-size: 24px;
  line-height: 1.25;
  font-weight: 700;
  color: var(--ecl-forest);
}

h3 {
  margin: 0 0 8px;
  font-size: 19px;
  font-weight: 700;
  color: var(--ecl-forest);
}

p {
  margin: 0 0 16px;
  font-size: 17px;
}

.ecl-lede {
  font-size: 19px;
  line-height: 1.55;
  color: var(--ecl-ink);
}

.ecl-muted {
  color: var(--ecl-taupe);
  font-size: 16px;
}

/* --------------------------------------------------------------------------
   The eclipse mark — pure CSS, no image dependency
   -------------------------------------------------------------------------- */

.ecl-mark {
  width: 108px;
  height: 108px;
  margin: 0 auto 28px;
  border-radius: 50%;
  background: var(--ecl-forest);
  box-shadow:
    0 0 0 6px var(--ecl-cream),
    0 0 0 10px var(--ecl-amber),
    0 0 44px 12px rgba(232, 163, 61, 0.42);
}

.ecl-mark--spin {
  animation: ecl-corona 2.8s ease-in-out infinite;
}

@keyframes ecl-corona {
  0%,
  100% {
    box-shadow:
      0 0 0 6px var(--ecl-cream),
      0 0 0 10px var(--ecl-amber),
      0 0 34px 8px rgba(232, 163, 61, 0.35);
  }
  50% {
    box-shadow:
      0 0 0 6px var(--ecl-cream),
      0 0 0 13px var(--ecl-amber),
      0 0 58px 18px rgba(232, 163, 61, 0.6);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ecl-mark--spin {
    animation: none;
  }
}

/* --------------------------------------------------------------------------
   Form
   -------------------------------------------------------------------------- */

.ecl-field {
  margin-bottom: 22px;
}

.ecl-field label {
  display: block;
  margin-bottom: 7px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--ecl-forest);
}

.ecl-field input {
  display: block;
  width: 100%;
  padding: 14px 16px;
  font-family: var(--ecl-font);
  font-size: 16px; /* 16px minimum — stops iOS zoom-on-focus */
  color: var(--ecl-ink);
  background: var(--ecl-cream);
  border: 2px solid var(--ecl-line);
  border-radius: 10px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.ecl-field input::placeholder {
  color: #a89a80;
}

/* Green ring. Yellow would be invisible against a cream field. */
.ecl-field input:focus {
  outline: none;
  border-color: var(--ecl-forest);
  box-shadow: 0 0 0 3px rgba(0, 46, 43, 0.16);
}

.ecl-field input[aria-invalid="true"] {
  border-color: var(--ecl-error);
}

.ecl-hint {
  margin: 6px 0 0;
  font-size: 14px;
  color: var(--ecl-taupe);
}

.ecl-error {
  display: none;
  margin: 6px 0 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--ecl-error);
}

.ecl-error.is-visible {
  display: block;
}

/* --------------------------------------------------------------------------
   Button
   -------------------------------------------------------------------------- */

.ecl-btn {
  display: block;
  width: 100%;
  padding: 17px 28px;
  font-family: var(--ecl-font);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--ecl-linen);
  background: var(--ecl-forest);
  border: 2px solid var(--ecl-forest);
  border-radius: var(--ecl-radius-pill);
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s var(--ease),
    box-shadow 0.15s var(--ease);
}

.ecl-btn:hover {
  background: #013f39;
}

.ecl-btn:active {
  transform: translateY(1px);
}

/* Green outline, not yellow — the focus ring has to be visible on the cream
   ground as well as on the dark bands, and yellow disappears on cream. */
.ecl-btn:focus-visible {
  outline: 3px solid var(--ecl-forest);
  outline-offset: 3px;
}

.ecl-btn--accent {
  color: var(--ecl-forest);
  background: var(--ecl-yellow);
}

.ecl-btn--accent:hover {
  background: var(--ecl-gold);
}

/* --------------------------------------------------------------------------
   Onboarding progress
   -------------------------------------------------------------------------- */

.ecl-onboarding {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 20px;
}

.ecl-progress {
  width: 100%;
  max-width: 340px;
  height: 8px;
  margin: 30px auto 16px;
  background: var(--ecl-sand);
  border-radius: var(--ecl-radius-pill);
  overflow: hidden;
}

.ecl-progress__bar {
  width: 0%;
  height: 100%;
  background: var(--ecl-amber);
  border-radius: var(--ecl-radius-pill);
  transition: width 0.4s ease;
}

.ecl-step {
  font-size: 16px;
  font-weight: 600;
  color: var(--ecl-taupe);
  min-height: 26px;
}

/* --------------------------------------------------------------------------
   Report
   -------------------------------------------------------------------------- */

.ecl-summary {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  margin: 0 0 28px;
  background: var(--ecl-line);
  border: 1px solid var(--ecl-line);
  border-radius: var(--ecl-radius);
  overflow: hidden;
}

.ecl-summary__cell {
  background: var(--ecl-cream);
  padding: 16px 18px;
}

.ecl-summary__label {
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ecl-taupe);
}

.ecl-summary__value {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  color: var(--ecl-forest);
  overflow-wrap: anywhere;
}

.ecl-section {
  padding: 26px 0;
  border-top: 1px solid var(--ecl-line);
}

.ecl-section:first-of-type {
  border-top: none;
}

/* ==========================================================================
   THE READING — premium report layout inside onboarding.html
   ========================================================================== */

.ecl-mark--sm {
  width: 76px;
  height: 76px;
  margin-bottom: 22px;
}

.ecl-eyebrow--gold {
  color: var(--ecl-amber);
}

/* --------------------------------------------------------------------------
   Masthead
   -------------------------------------------------------------------------- */

.ecl-rhead {
  position: relative;
  background: var(--ecl-forest);
  padding: 58px 24px 0;
  text-align: center;
  overflow: hidden;
}

/* Soft corona bloom behind the masthead */
.ecl-rhead::before {
  content: "";
  position: absolute;
  top: -170px;
  left: 50%;
  width: 620px;
  height: 620px;
  margin-left: -310px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(232, 163, 61, 0.16) 0%,
    rgba(232, 163, 61, 0) 62%
  );
  pointer-events: none;
}

.ecl-rhead__inner {
  position: relative;
  max-width: 760px;
  margin: 0 auto;
}

.ecl-rhead__title {
  margin: 0 0 14px;
  font-size: 44px;
  line-height: 1.12;
  letter-spacing: -0.028em;
  color: #ffffff;
}

.ecl-rhead__event {
  margin: 0 0 40px;
  font-size: 15px;
  letter-spacing: 0.06em;
  color: #9bb0a6;
}

/* Birth facts — hairline row, not boxes */
.ecl-facts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: #2a5248;
  border-top: 1px solid #2a5248;
  border-bottom: 1px solid #2a5248;
  text-align: left;
}

.ecl-facts__item {
  background: var(--ecl-forest);
  padding: 18px 20px;
}

.ecl-facts__label {
  margin: 0 0 5px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #7d9990;
}

.ecl-facts__value {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: #ffffff;
  overflow-wrap: anywhere;
}

/* --------------------------------------------------------------------------
   Body
   -------------------------------------------------------------------------- */

.ecl-rbody {
  max-width: 760px;
  margin: 0 auto;
  padding: 8px 24px 0;
}

/* --------------------------------------------------------------------------
   Numbered blocks
   -------------------------------------------------------------------------- */

.ecl-block {
  padding: 48px 0;
  border-bottom: 1px solid var(--ecl-line);
}

.ecl-block:last-child {
  border-bottom: none;
}

.ecl-block__head {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 22px;
}

.ecl-block__num {
  flex: 0 0 auto;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0px;
  color: var(--ecl-amber);
}

.ecl-block__title {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0px;
  text-transform: uppercase;
  color: var(--ecl-taupe);
}

.ecl-block__lede {
  font-size: 18px;
  line-height: 1.62;
  color: var(--ecl-body);
}

.ecl-block__body p:last-child {
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   Block 01 — the answer
   -------------------------------------------------------------------------- */

.ecl-block--answer {
  position: relative;
  margin: 34px 0 0;
  padding: 34px 32px;
  background: var(--ecl-forest);
  border-radius: 20px;
  border-bottom: none;
  box-shadow: 0 26px 60px -26px rgba(26, 60, 52, 0.55);
}

.ecl-block--answer .ecl-block__title {
  color: #8fb0a4;
}

.ecl-answer__area {
  margin: 0 0 8px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ecl-amber);
}

.ecl-answer__house {
  margin: 0 0 16px;
  font-size: 33px;
  line-height: 1.18;
  letter-spacing: -0.02em;
  color: #ffffff;
}

.ecl-answer__summary {
  margin: 0;
  font-size: 18px;
  line-height: 1.62;
  color: #cfd8d0;
}

.ecl-answer__meta {
  margin: 20px 0 0;
}

.ecl-tag {
  display: inline-block;
  padding: 7px 16px;
  border-radius: var(--ecl-radius-pill);
  background: rgba(232, 163, 61, 0.14);
  border: 1px solid rgba(232, 163, 61, 0.55);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ecl-amber);
}

.ecl-window {
  margin: 26px 0 0;
  padding: 18px 20px;
  background: rgba(0, 0, 0, 0.16);
  border-radius: 12px;
}

.ecl-window__label {
  margin: 0 0 6px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #7d9990;
}

.ecl-window__dates {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: #ffffff;
}

.ecl-window__arrow {
  margin: 0 12px;
  color: var(--ecl-amber);
}

/* --------------------------------------------------------------------------
   Block 02 — chart
   -------------------------------------------------------------------------- */

.ecl-chart {
  display: flex;
  align-items: center;
  gap: 32px;
}

.ecl-chart__wheel {
  flex: 1 1 54%;
  margin: 0;
  min-width: 0;
}

.ecl-chart__wheel img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
}

.ecl-chart__points {
  flex: 1 1 46%;
  min-width: 0;
}

.ecl-point {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 15px 0;
  border-bottom: 1px solid var(--ecl-line);
}

.ecl-point:last-child {
  border-bottom: none;
}

.ecl-point__label {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0px;
  text-transform: uppercase;
  color: var(--ecl-taupe);
}

.ecl-point__value {
  margin: 0;
  font-size: 21px;
  font-weight: 700;
  color: var(--ecl-forest);
}

/* A resolving value shows a shimmer bar rather than an empty dash */
.ecl-point__bar {
  display: block;
  width: 82px;
  height: 11px;
  border-radius: 6px;
  background: linear-gradient(90deg, #e6e4de 25%, #f2f0ec 50%, #e6e4de 75%);
  background-size: 240% 100%;
  animation: ecl-shimmer 1.9s ease-in-out infinite;
}

/* --------------------------------------------------------------------------
   Block 03 — influences
   -------------------------------------------------------------------------- */

.ecl-influence {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ecl-influence__item {
  display: flex;
  gap: 18px;
  padding: 20px 0;
  border-bottom: 1px solid var(--ecl-line);
}

.ecl-influence__item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.ecl-influence__marker {
  flex: 0 0 auto;
  width: 13px;
  height: 13px;
  margin-top: 7px;
  border-radius: 50%;
  border: 3px solid var(--ecl-amber);
}

.ecl-influence__text {
  min-width: 0;
}

.ecl-influence__text p {
  margin: 0;
}

.ecl-influence__head {
  font-size: 19px;
  font-weight: 700;
  color: var(--ecl-forest);
}

.ecl-influence__meta {
  margin: 3px 0 10px !important;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--ecl-amber);
}

/* --------------------------------------------------------------------------
   Sub-headings inside a block
   -------------------------------------------------------------------------- */

.ecl-block__sub {
  margin: 30px 0 12px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0px;
  text-transform: uppercase;
  color: var(--ecl-taupe);
}

.ecl-block__sub--good {
  color: #4a7a5e;
}

.ecl-block__sub--bad {
  color: #a8613c;
}

/* --------------------------------------------------------------------------
   Big three — sun / moon / rising
   -------------------------------------------------------------------------- */

.ecl-bigpoints {
  flex: 1 1 46%;
  min-width: 0;
}

.ecl-bigpoint {
  padding: 14px 0;
  border-bottom: 1px solid var(--ecl-line);
}

.ecl-bigpoint:last-child {
  border-bottom: none;
}

.ecl-bigpoint__label {
  margin: 0 0 2px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0px;
  text-transform: uppercase;
  color: var(--ecl-taupe);
}

.ecl-bigpoint__sign {
  margin: 0;
  font-size: 25px;
  font-weight: 700;
  line-height: 1.15;
  color: var(--ecl-forest);
}

.ecl-bigpoint__deg {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--ecl-amber);
}

.ecl-bigpoint__note {
  margin: 2px 0 0;
  font-size: 14px;
  color: var(--ecl-taupe);
}

/* --------------------------------------------------------------------------
   Major placements
   -------------------------------------------------------------------------- */

.ecl-placements {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}

.ecl-placement {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 11px 14px;
  background: var(--ecl-linen);
  border: 1px solid var(--ecl-line);
  border-radius: 10px;
}

.ecl-placement__planet {
  font-size: 15px;
  font-weight: 700;
  color: var(--ecl-forest);
}

.ecl-placement__sign {
  font-size: 15px;
  color: var(--ecl-body);
}

.ecl-placement__house {
  margin-left: auto;
  font-size: 14px;
  font-weight: 700;
  color: var(--ecl-amber);
}

/* --------------------------------------------------------------------------
   Eclipse block
   -------------------------------------------------------------------------- */

.ecl-block--eclipse {
  padding-top: 44px;
}

.ecl-eq {
  margin: 0 0 10px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--ecl-amber);
}

.ecl-ehead {
  margin: 0 0 18px;
  font-size: 32px;
  line-height: 1.16;
  letter-spacing: -0.02em;
  color: var(--ecl-forest);
}

.ecl-emeta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.ecl-chip {
  padding: 7px 14px;
  border-radius: var(--ecl-radius-pill);
  background: var(--ecl-linen);
  border: 1px solid var(--ecl-line);
  font-size: 14px;
  font-weight: 600;
  color: var(--ecl-body);
}

.ecl-chip--gold {
  background: rgba(232, 163, 61, 0.14);
  border-color: var(--ecl-amber);
  color: #8a6420;
  font-weight: 700;
}

.ecl-areas {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
}

.ecl-area {
  padding: 6px 13px;
  border-radius: 8px;
  background: var(--ecl-forest);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: #ffffff;
}

/* --------------------------------------------------------------------------
   Energy meter
   -------------------------------------------------------------------------- */

.ecl-energy {
  margin: 0 0 26px;
  padding: 20px 22px;
  background: var(--ecl-linen);
  border: 1px solid var(--ecl-line);
  border-radius: 14px;
}

.ecl-energy__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.ecl-energy__label {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0px;
  text-transform: uppercase;
  color: var(--ecl-taupe);
}

.ecl-energy__value {
  margin: 0;
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
  color: var(--ecl-forest);
}

.ecl-energy__value span {
  font-size: 16px;
  font-weight: 600;
  color: var(--ecl-taupe);
}

.ecl-energy__track {
  height: 10px;
  background: var(--ecl-sand);
  border-radius: var(--ecl-radius-pill);
  overflow: hidden;
}

.ecl-energy__fill {
  height: 100%;
  border-radius: var(--ecl-radius-pill);
  background: var(--ecl-amber);
}

.ecl-energy__fill.is-high {
  background: #5f8a5f;
}

.ecl-energy__fill.is-low {
  background: var(--ecl-terracotta);
}

.ecl-energy__nature {
  margin: 10px 0 0;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ecl-amber);
}

.ecl-energy__nature.is-high {
  color: #4a7a5e;
}

.ecl-energy__nature.is-low {
  color: var(--ecl-terracotta);
}

/* --------------------------------------------------------------------------
   Why this eclipse affects you
   -------------------------------------------------------------------------- */

.ecl-why {
  margin: 0 0 8px;
  padding: 24px 24px 20px;
  background: var(--ecl-forest);
  border-radius: 14px;
  color: #cfd8d0;
}

.ecl-why__title {
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0px;
  text-transform: uppercase;
  color: var(--ecl-amber);
}

.ecl-why p {
  font-size: 16px;
  line-height: 1.62;
  color: #cfd8d0;
}

.ecl-why p:last-child {
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   Two-column splits + icon lists
   -------------------------------------------------------------------------- */

.ecl-split {
  display: flex;
  gap: 30px;
}

.ecl-split__col {
  flex: 1 1 50%;
  min-width: 0;
}

.ecl-ilist {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ecl-ilist li {
  position: relative;
  padding: 0 0 10px 22px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ecl-body);
}

.ecl-ilist li::before {
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 700;
}

.ecl-ilist--good li::before {
  content: "+";
  color: #4a7a5e;
}

.ecl-ilist--bad li::before {
  content: "!";
  color: #a8613c;
}

.ecl-ilist--avoid li::before {
  content: "\00d7";
  color: var(--ecl-terracotta);
}

/* --------------------------------------------------------------------------
   Talismans — colour / number / power days
   -------------------------------------------------------------------------- */

.ecl-talismans {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin: 30px 0 0;
  background: var(--ecl-line);
  border: 1px solid var(--ecl-line);
  border-radius: 14px;
  overflow: hidden;
}

.ecl-talisman {
  background: var(--ecl-cream);
  padding: 16px 18px;
}

.ecl-talisman__label {
  margin: 0 0 6px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ecl-taupe);
}

.ecl-talisman__value {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  color: var(--ecl-forest);
}

.ecl-swatch {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.16);
}

/* --------------------------------------------------------------------------
   Recommended actions + affirmation
   -------------------------------------------------------------------------- */

.ecl-steps {
  margin: 0;
  padding: 0 0 0 22px;
}

.ecl-steps li {
  padding-bottom: 10px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ecl-body);
}

.ecl-steps li::marker {
  font-weight: 700;
  color: var(--ecl-amber);
}

.ecl-affirm {
  margin: 30px 0 0;
  padding: 22px 24px;
  background: rgba(232, 163, 61, 0.1);
  border: 1px solid rgba(232, 163, 61, 0.4);
  border-radius: 14px;
}

.ecl-affirm__label {
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0px;
  text-transform: uppercase;
  color: #8a6420;
}

.ecl-affirm p:last-child {
  margin: 0;
  font-size: 20px;
  line-height: 1.45;
  font-weight: 700;
  color: var(--ecl-forest);
}

/* --------------------------------------------------------------------------
   Prose (the astrologer's interpretation) + positions table
   -------------------------------------------------------------------------- */

.ecl-prose {
  font-size: 16px;
  line-height: 1.65;
  color: var(--ecl-body);
}

.ecl-prose--muted {
  font-size: 15px;
  color: var(--ecl-taupe);
}

/* Wide tables scroll inside themselves — the page never scrolls sideways */
.ecl-tablewrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--ecl-line);
  border-radius: 12px;
}

.ecl-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}

.ecl-table th {
  padding: 11px 14px;
  text-align: left;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ecl-taupe);
  background: var(--ecl-linen);
  border-bottom: 1px solid var(--ecl-line);
}

.ecl-table td {
  padding: 9px 14px;
  white-space: nowrap;
  border-bottom: 1px solid var(--ecl-line);
  color: var(--ecl-body);
}

.ecl-table tbody tr:last-child td {
  border-bottom: none;
}

.ecl-table td:first-child {
  font-weight: 700;
  color: var(--ecl-forest);
}

/* --------------------------------------------------------------------------
   Pending content — designed, not broken
   -------------------------------------------------------------------------- */

.ecl-await {
  margin: 22px 0 0;
}

.ecl-skeleton span {
  display: block;
  height: 13px;
  margin-bottom: 11px;
  border-radius: 7px;
  background: linear-gradient(90deg, #e6e4de 25%, #f2f0ec 50%, #e6e4de 75%);
  background-size: 240% 100%;
  animation: ecl-shimmer 1.9s ease-in-out infinite;
}

.ecl-skeleton span:nth-child(2) {
  width: 92%;
  animation-delay: 0.12s;
}

.ecl-skeleton span:nth-child(3) {
  width: 74%;
  animation-delay: 0.24s;
}

.ecl-skeleton span:nth-child(4) {
  width: 86%;
  animation-delay: 0.36s;
}

.ecl-skeleton span:nth-child(5) {
  width: 62%;
  animation-delay: 0.48s;
}

/* On the dark answer block the skeleton needs its own tones */
.ecl-block--answer .ecl-skeleton span {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.07) 25%,
    rgba(255, 255, 255, 0.15) 50%,
    rgba(255, 255, 255, 0.07) 75%
  );
  background-size: 240% 100%;
}

.ecl-await__cap {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 16px 0 0;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ecl-taupe);
}

.ecl-await__cap--inline {
  margin-top: 22px;
}

.ecl-block--answer .ecl-await__cap {
  color: #7d9990;
}

.ecl-await__dot {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ecl-amber);
}

@keyframes ecl-shimmer {
  0% {
    background-position: 120% 0;
  }
  100% {
    background-position: -120% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ecl-skeleton span,
  .ecl-point__bar {
    animation: none;
  }
}

/* --------------------------------------------------------------------------
   Report footer
   -------------------------------------------------------------------------- */

.ecl-rfoot {
  max-width: 760px;
  margin: 0 auto;
  padding: 44px 24px 72px;
  text-align: center;
}

.ecl-rfoot__note {
  margin: 0 0 18px;
  font-size: 15px;
  color: var(--ecl-taupe);
}

.ecl-btn--ghost {
  color: var(--ecl-forest);
  background: transparent;
  border: 1.5px solid var(--ecl-line);
  border-radius: var(--ecl-radius-pill);
}

.ecl-btn--ghost:hover {
  background: var(--ecl-cream);
  border-color: var(--ecl-forest);
}

.ecl-footer {
  padding: 32px 0 0;
  text-align: center;
  font-size: 14px;
  color: var(--ecl-taupe);
}

/* ==========================================================================
   LANDING PAGE (index.html)
   Announcement bar → sticky nav → hero → fact strip → scroll rows →
   timeline → callout → form (last) → footer.
   ========================================================================== */


.ecl-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 40px);
}

/* Italic accent inside headings — same family, no display serif.
   Split by ground: yellow only survives on the dark hero, so the headings
   sitting on cream take the burnt-orange label colour instead. */
.ecl-hero__title em {
  font-style: italic;
  color: var(--ecl-yellow);
}

.ecl-sechead h2 em,
.ecl-source__copy h2 em,
.ecl-timeline__media h2 em {
  font-style: italic;
  color: var(--ecl-label);
}

/* Eyebrow on a dark ground */
.ecl-eyebrow--light {
  color: var(--ecl-yellow);
}

/* Kicker with a rule, a small premium signal */
.ecl-kicker {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 22px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ecl-yellow);
}

.ecl-kicker__line {
  width: 36px;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
}

/* --------------------------------------------------------------------------
   Scroll reveal
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   Motion states

   Everything here is scoped to .gsap-ready, which js/motion.js adds ONLY
   after confirming GSAP is present. A blocked CDN, a JS error, or reduced
   motion all mean the class is never set — and then nothing below applies,
   so the page is a plain visible document. GSAP itself sets the "from"
   values at runtime; these rules only stop the first paint flashing.
   -------------------------------------------------------------------------- */

/* Masked headline lines */
.ecl-hero__title .line {
  display: block;
  overflow: hidden;
}

.ecl-hero__title .line__inner {
  display: block;
}

/* Pre-hide with OPACITY only — never a transform.
   GSAP reads the existing computed transform and composes its own on top, so
   a CSS `translateY(118%)` here plus `yPercent: 118` in the tween produces a
   doubled offset, and the leftover px translate survives the animation and
   keeps the line stuck behind its mask. Opacity does not accumulate. */
/* Scoped to `hero-armed`, NOT to `gsap-ready`.
   These two states have different lifetimes: `gsap-ready` must persist for
   the whole session (the marquee's CSS fallback keys off its absence, so
   dropping it would start a second, conflicting marquee animation), while
   this pre-hide only needs to survive the few frames before the intro
   timeline takes over. Separating them lets js/motion.js retire the pre-hide
   on its own.

   That matters because the hidden state is set by CSS and cleared only by JS:
   anything that stops the timeline completing — a throw, or a load in a
   background tab where rAF is throttled and the tween never advances — would
   otherwise leave the hero permanently blank, headline and form both. So
   motion.js clears `hero-armed` on completion and arms a watchdog to clear it
   regardless after 2s. Do not replace that with a CSS-animation failsafe here:
   animations outrank inline styles in the cascade, so it would override GSAP
   mid-tween and re-flash the hero. */
.hero-armed .ecl-hero__title .line__inner,
.hero-armed [data-hero-fade] {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .hero-armed .ecl-hero__title .line__inner,
  .hero-armed [data-hero-fade] {
    opacity: 1;
  }
}

/* --------------------------------------------------------------------------
   Marquee
   -------------------------------------------------------------------------- */

.ecl-marquee {
  overflow: hidden;
  background: var(--ecl-forest);
  border-top: 2px solid var(--ecl-yellow);
  border-bottom: 2px solid var(--ecl-yellow);
  padding: 18px 0;
}

/* Two identical runs sit side by side; motion.js shifts the track -50%, so
   the loop lands on a matching frame and repeats seamlessly. */
.ecl-marquee__track {
  display: flex;
  width: max-content;
}

.ecl-marquee__run {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}

.ecl-marquee span {
  padding: 0 28px;
  font-size: clamp(18px, 2.2vw, 28px);
  font-weight: 700;
  letter-spacing: -0.02em;
  white-space: nowrap;
  color: var(--ecl-linen);
}

.ecl-marquee i {
  font-style: normal;
  font-size: clamp(14px, 1.6vw, 20px);
  color: var(--ecl-yellow);
}

/* Without GSAP the track would just sit still — give it a CSS fallback so
   the strip is still alive. */
@media (prefers-reduced-motion: no-preference) {
  html:not(.gsap-ready) .ecl-marquee__track {
    animation: ecl-marquee 30s linear infinite;
  }
}

@keyframes ecl-marquee {
  to { transform: translateX(-50%); }
}

/* --------------------------------------------------------------------------
   Announcement bar
   -------------------------------------------------------------------------- */

/* Yellow, not another shade of green. The page opens on the loudest colour
   in the palette and then calms down — the same move the promo bar makes on
   birthdayhoroscope. */
.ecl-announce {
  background: var(--ecl-yellow);
  color: var(--ecl-forest);
}

.ecl-announce__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 11px clamp(20px, 4vw, 40px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.ecl-announce__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ecl-forest);
  box-shadow: 0 0 0 0 rgba(0, 46, 43, 0.5);
  animation: ecl-pulse 2.6s ease-out infinite;
}

.ecl-announce a {
  color: var(--ecl-forest);
  text-decoration: none;
  font-weight: 700;
  border-bottom: 2px solid rgba(0, 46, 43, 0.35);
  padding-bottom: 1px;
  transition: border-color 0.2s var(--ease);
}

.ecl-announce a:hover {
  border-color: var(--ecl-forest);
}

/* --------------------------------------------------------------------------
   Nav
   -------------------------------------------------------------------------- */

/* Dark and continuous with the hero at rest, cream once you scroll.
   NOTE: the nav sits ABOVE the hero in flow, not over it — a transparent
   background here would put white text on the cream body colour. */
.ecl-nav {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--ecl-forest);
  border-bottom: 1px solid transparent;
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease),
    box-shadow 0.3s var(--ease);
}

/* Stays green when stuck. The earlier translucent-cream version put the bar
   in a third colour that appeared nowhere else on the page; keeping it green
   means the nav is one solid object from load to footer. */
.ecl-nav.is-stuck {
  background: rgba(0, 46, 43, 0.94);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom-color: rgba(243, 206, 70, 0.28);
  box-shadow: 0 10px 30px -18px rgba(0, 46, 43, 0.9);
}

.ecl-nav__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 15px clamp(20px, 4vw, 40px);
  display: flex;
  align-items: center;
  gap: 24px;
}

.ecl-nav__brand {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ecl-linen);
  transition: color 0.3s var(--ease);
  text-decoration: none;
  white-space: nowrap;
}

.ecl-nav__links {
  display: flex;
  gap: 30px;
  margin-left: auto;
}

.ecl-nav__links a {
  position: relative;
  font-size: 15px;
  font-weight: 500;
  color: rgba(245, 229, 196, 0.7);
  transition: color 0.3s var(--ease);
  text-decoration: none;
  padding: 4px 0;
}

/* Amber underline grows on hover */
.ecl-nav__links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: var(--ecl-yellow);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--ease);
}

.ecl-nav__links a:hover {
  color: var(--ecl-linen);
}

.ecl-nav__links a:hover::after {
  transform: scaleX(1);
}

/* Outlined yellow pill that fills on hover, with the house's hard offset
   shadow. Same component as the birthdayhoroscope nav CTA. */
.ecl-nav__cta {
  font-size: 15px;
  font-weight: 700;
  color: var(--ecl-yellow);
  background: transparent;
  border: 2px solid var(--ecl-yellow);
  padding: 10px 24px;
  border-radius: var(--ecl-radius-pill);
  text-decoration: none;
  white-space: nowrap;
  letter-spacing: 0.01em;
  transition: background 0.2s var(--ease), color 0.2s var(--ease),
    transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.ecl-nav__cta:hover {
  color: var(--ecl-forest);
  background: var(--ecl-yellow);
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 rgba(243, 206, 70, 0.35);
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.ecl-hero {
  position: relative;
  /* Deep night sky, built on the Smalls green rather than a neutral near-
     black. The tonal range still has to be wide — lit around the corona,
     deep at the edges — or the panel reads as flat paint. */
  background:
    radial-gradient(68% 54% at 72% 42%, rgba(3, 99, 86, 0.62) 0%, rgba(3, 99, 86, 0) 62%),
    radial-gradient(90% 70% at 16% 6%, rgba(0, 72, 66, 0.55) 0%, rgba(0, 72, 66, 0) 58%),
    linear-gradient(170deg, #013f39 0%, #002e2b 52%, #001f1d 100%);
  overflow: hidden;
}

/* Starfield — two offset dot layers, no image request */
.ecl-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(1.6px 1.6px at 12% 18%, rgba(255, 255, 255, 0.75), transparent),
    radial-gradient(1.2px 1.2px at 27% 62%, rgba(255, 255, 255, 0.5), transparent),
    radial-gradient(1.8px 1.8px at 41% 12%, rgba(255, 255, 255, 0.7), transparent),
    radial-gradient(1.1px 1.1px at 56% 78%, rgba(255, 255, 255, 0.45), transparent),
    radial-gradient(1.5px 1.5px at 68% 26%, rgba(255, 255, 255, 0.6), transparent),
    radial-gradient(1.2px 1.2px at 83% 58%, rgba(255, 255, 255, 0.5), transparent),
    radial-gradient(1.7px 1.7px at 92% 16%, rgba(255, 255, 255, 0.65), transparent),
    radial-gradient(1.1px 1.1px at 8% 84%, rgba(255, 255, 255, 0.4), transparent),
    radial-gradient(1.3px 1.3px at 35% 92%, rgba(255, 255, 255, 0.45), transparent),
    radial-gradient(1.4px 1.4px at 76% 88%, rgba(255, 255, 255, 0.5), transparent);
}

/* Very fine grain. At 0.35 with `overlay` this was lifting the blacks and
   turning the whole panel dusty — keep it barely-there. */
.ecl-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.09;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>");
}

.ecl-hero__inner {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(64px, 9vw, 120px) clamp(20px, 4vw, 40px) clamp(84px, 10vw, 132px);
  display: flex;
  align-items: center;
  gap: clamp(32px, 5vw, 72px);
}

.ecl-hero__copy {
  flex: 1 1 58%;
  min-width: 0;
  max-width: 660px;
}

.ecl-hero__title {
  margin: 0 0 24px;
  font-size: var(--t-hero);
  line-height: 0.98;
  letter-spacing: -0.042em;
  color: #ffffff;
}

.ecl-hero__lede {
  max-width: 520px;
  margin: 0 0 34px;
  font-size: var(--t-lede);
  line-height: 1.6;
  color: rgba(245, 229, 196, 0.82);
}

.ecl-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* Frosted badge */
.ecl-badge-card {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-top: 34px;
  padding: 13px 22px 13px 15px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 14px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.ecl-badge-card__mark {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #001f1d;
  box-shadow: 0 0 0 2px #001f1d, 0 0 0 4px var(--ecl-yellow),
    0 0 18px 2px rgba(243, 206, 70, 0.5);
}

.ecl-badge-card__title {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: #ffffff;
}

.ecl-badge-card__sub {
  margin: 2px 0 0;
  font-size: 14px;
  color: rgba(245, 229, 196, 0.72);
}

/* --------------------------------------------------------------------------
   FORM PLACEMENT 1 — hero panel, above the fold
   -------------------------------------------------------------------------- */

.ecl-hero__panel {
  flex: 0 1 420px;
  min-width: 0;
}

/* Cream card on the dark hero, with a yellow hairline so its edge is a
   deliberate line rather than a fade into the gradient. */
.ecl-panel {
  padding: clamp(24px, 3vw, 32px);
  background: var(--ecl-cream);
  border: 2px solid var(--ecl-yellow);
  border-radius: var(--ecl-radius);
  box-shadow: 6px 6px 0 rgba(243, 206, 70, 0.22),
    0 30px 70px -26px rgba(0, 0, 0, 0.6);
}

.ecl-panel__eyebrow {
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ecl-label);
}

.ecl-panel__title {
  margin: 0 0 20px;
  font-size: 23px;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.ecl-panel__note {
  margin: 14px 0 0;
  text-align: center;
  font-size: 14px;
  color: var(--ecl-taupe);
}

/* Two fields side by side */
.ecl-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.ecl-form-compact .ecl-field {
  margin-bottom: 16px;
}

.ecl-hero__skip {
  /* Own line — the badge above it is inline-flex, so an inline-block here
     would sit alongside it. */
  display: table;
  margin-top: 22px;
  font-size: 15px;
  font-weight: 600;
  color: rgba(245, 229, 196, 0.78);
  text-decoration: none;
  border-bottom: 2px solid rgba(245, 229, 196, 0.28);
  padding-bottom: 2px;
}

.ecl-hero__skip:hover {
  color: var(--ecl-linen);
  border-color: var(--ecl-yellow);
}

/* --- The orb: totality, drawn in CSS --- */

.ecl-orb {
  position: relative;
  flex: 0 1 40%;
  aspect-ratio: 1;
  max-width: 460px;
  min-width: 220px;
  display: grid;
  place-items: center;
}

/* Background variant — oversized and pushed off the right edge so the
   corona bleeds around the form panel rather than hiding behind it. */
.ecl-orb--bg {
  position: absolute;
  z-index: 0;
  top: 50%;
  right: -8%;
  width: min(58vw, 720px);
  transform: translateY(-50%);
  opacity: 0.85;
  pointer-events: none;
}

/* Outer corona — wide, soft, asymmetric. This is what makes it read as an
   eclipse rather than a gold ring: the light has to bleed a long way out. */
.ecl-orb__glow {
  position: absolute;
  inset: -46%;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255, 247, 214, 0.32) 30%, rgba(255, 247, 214, 0) 47%),
    radial-gradient(circle, rgba(243, 206, 70, 0.28) 34%, rgba(243, 206, 70, 0) 58%),
    radial-gradient(circle, rgba(243, 206, 70, 0.13) 40%, rgba(243, 206, 70, 0) 72%);
  animation: ecl-breathe 7s ease-in-out infinite;
}

/* The rim itself: a thin, bright, slightly uneven ring of light */
.ecl-orb__ring {
  position: absolute;
  inset: 20%;
  border-radius: 50%;
  background: conic-gradient(
    from 200deg,
    #fffbe8,
    #f7e29a 12%,
    var(--ecl-yellow) 30%,
    #c9a833 48%,
    var(--ecl-yellow) 68%,
    #f7e29a 86%,
    #fffbe8
  );
  filter: blur(1.5px);
  box-shadow:
    0 0 60px 12px rgba(243, 206, 70, 0.45),
    0 0 140px 40px rgba(243, 206, 70, 0.22);
  animation: ecl-rotate 40s linear infinite;
}

/* The moon: near-black, so the rim reads as light and not as paint */
.ecl-orb__disc {
  position: absolute;
  inset: 22.4%;
  border-radius: 50%;
  background: radial-gradient(circle at 46% 42%, #0a1a16 0%, #05100d 72%);
  box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.85);
}

/* Diamond-ring flare, sitting on the rim */
.ecl-orb__flare {
  position: absolute;
  top: 24%;
  right: 23.5%;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow:
    0 0 12px 4px rgba(255, 252, 236, 0.95),
    0 0 36px 12px rgba(247, 226, 154, 0.62),
    0 0 90px 30px rgba(243, 206, 70, 0.34);
}

@keyframes ecl-rotate {
  to { transform: rotate(360deg); }
}

@keyframes ecl-breathe {
  0%, 100% { opacity: 0.75; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.05); }
}

@media (prefers-reduced-motion: reduce) {
  .ecl-orb__ring,
  .ecl-orb__glow,
  .ecl-announce__dot {
    animation: none;
  }
}

/* Scroll cue — a hairline that draws downward, rather than a floating dot
   that reads as a rendering artifact. */
.ecl-scrollcue {
  position: absolute;
  z-index: 1;
  left: 50%;
  bottom: 0;
  width: 1px;
  height: 64px;
  margin-left: -0.5px;
  overflow: hidden;
  background: rgba(245, 229, 196, 0.14);
}

.ecl-scrollcue span {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 26px;
  background: linear-gradient(180deg, rgba(243, 206, 70, 0), var(--ecl-yellow));
  animation: ecl-cue 2.4s ease-in-out infinite;
}

@keyframes ecl-cue {
  0%   { transform: translateY(-100%); }
  60%  { transform: translateY(240%); }
  100% { transform: translateY(240%); }
}

@media (prefers-reduced-motion: reduce) {
  .ecl-scrollcue span { animation: none; }
}

/* --------------------------------------------------------------------------
   Fact bar
   -------------------------------------------------------------------------- */

.ecl-factbar {
  background: var(--ecl-cream);
  border-bottom: 1px solid var(--ecl-line);
}

.ecl-factbar__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 18px clamp(24px, 5vw, 64px);
  justify-content: center;
  padding-top: 26px;
  padding-bottom: 26px;
}

.ecl-factbar__item {
  margin: 0;
  font-size: 15px;
  color: var(--ecl-taupe);
}

.ecl-factbar__item strong {
  display: block;
  font-size: 26px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ecl-forest);
}

/* --------------------------------------------------------------------------
   Section heads
   -------------------------------------------------------------------------- */

.ecl-sechead {
  margin-bottom: clamp(28px, 4vw, 44px);
  max-width: 720px;
}

.ecl-sechead h2 {
  margin: 0 0 10px;
  font-size: var(--t-h2);
  line-height: 1.08;
  letter-spacing: -0.032em;
}

.ecl-sechead__sub {
  margin: 0;
  font-size: var(--t-lede);
  color: var(--ecl-taupe);
}

/* --------------------------------------------------------------------------
   Scroll rows
   -------------------------------------------------------------------------- */

.ecl-covers,
.ecl-samples {
  padding: clamp(56px, 6.5vw, 88px) 0;
  background: var(--ecl-linen);
}

.ecl-samples {
  background: var(--ecl-cream);
}

/* Wraps to a grid on desktop, scrolls horizontally only when the cards can
   no longer fit. The previous `grid-auto-flow: column` forced every card onto
   one row at all widths, so the four-card row was permanently cut off at the
   container edge with no affordance saying it could scroll. */
.ecl-scroller {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 18px;
  padding-bottom: 10px;
}

@media (max-width: 720px) {
  .ecl-scroller {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(250px, 78%);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    /* Bleed to the viewport edge so a part-visible next card reads as
       "swipe me" instead of as a clipping bug. */
    margin-inline: calc(clamp(20px, 4vw, 40px) * -1);
    padding-inline: clamp(20px, 4vw, 40px);
  }

  .ecl-scroller > * {
    scroll-snap-align: start;
  }
}

/* Flat, outlined, hard-shadowed — the house card. The old soft-blur card on
   a beige ground had almost no edge and the row read as one grey smear. */
.ecl-tile {
  padding: 26px 24px 28px;
  background: var(--ecl-cream);
  border: 2px solid var(--ecl-forest);
  border-radius: var(--ecl-radius);
  box-shadow: var(--e-hard);
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.ecl-tile:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--ecl-forest);
}

.ecl-tile__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.ecl-tile__glyph {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--ecl-yellow);
  border: 2px solid var(--ecl-forest);
  color: var(--ecl-forest);
  font-size: 22px;
  line-height: 46px;
  text-align: center;
}

.ecl-tile__num {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0px;
  color: var(--ecl-label);
}

.ecl-tile h3 {
  margin: 0 0 8px;
  font-size: var(--t-h3);
  line-height: 1.26;
  letter-spacing: -0.012em;
}

.ecl-tile p {
  margin: 0;
  font-size: 16px;
  color: var(--ecl-body);
}

/* Sample-output quote cards */
.ecl-quote {
  display: flex;
  flex-direction: column;
  padding: 26px 24px;
  background: var(--ecl-linen);
  border: 2px solid var(--ecl-forest);
  border-radius: var(--ecl-radius);
  box-shadow: var(--e-hard);
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.ecl-quote:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--ecl-forest);
}

.ecl-quote__meta {
  margin: 0 0 14px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--ecl-line);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ecl-taupe);
}

.ecl-quote__text {
  margin: 0 0 18px;
  font-size: 17px;
  line-height: 1.58;
  color: var(--ecl-forest);
}

.ecl-quote__tag {
  margin: auto 0 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ecl-label);
}

/* --------------------------------------------------------------------------
   Back to the source
   -------------------------------------------------------------------------- */

.ecl-source {
  padding: clamp(56px, 6.5vw, 88px) 0;
  background: var(--ecl-cream);
}

.ecl-source__inner {
  display: flex;
  align-items: center;
  gap: clamp(32px, 5vw, 64px);
}

.ecl-source__copy {
  flex: 1 1 42%;
  min-width: 0;
}

.ecl-source__copy h2 {
  margin: 0 0 16px;
  font-size: clamp(26px, 2.6vw, 34px);
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.ecl-source__copy p {
  font-size: 17px;
  color: var(--ecl-body);
}

.ecl-ticks {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
}

.ecl-ticks li {
  position: relative;
  padding: 9px 0 9px 30px;
  border-top: 1px solid var(--ecl-line);
  font-size: 16px;
  font-weight: 600;
  color: var(--ecl-forest);
}

.ecl-ticks li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: 9px;
  color: var(--ecl-forest);
  font-weight: 700;
}

.ecl-source__cards {
  flex: 1 1 58%;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.ecl-scard {
  background: linear-gradient(165deg, #013f39, #002e2b);
  border: 2px solid var(--ecl-forest);
  border-radius: var(--ecl-radius);
  overflow: hidden;
  box-shadow: var(--e-hard);
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.ecl-scard:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--ecl-forest);
}

.ecl-scard img {
  display: block;
  width: 100%;
  height: auto;
}

.ecl-scard__body {
  padding: 20px 22px 22px;
}

.ecl-scard__title {
  margin: 0 0 12px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #ffffff;
}

.ecl-scard__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ecl-scard__list li {
  padding: 7px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 15px;
  color: #b9c7c0;
}

/* --------------------------------------------------------------------------
   Method strip
   -------------------------------------------------------------------------- */

.ecl-method {
  padding: clamp(28px, 3.5vw, 42px) 0;
  background: var(--ecl-linen);
  border-top: 1px solid var(--ecl-line);
  border-bottom: 1px solid var(--ecl-line);
}

.ecl-method__inner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px clamp(28px, 5vw, 56px);
}

.ecl-method__label {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ecl-taupe);
}

.ecl-method__list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 16px clamp(24px, 4vw, 48px);
  margin: 0;
  padding: 0;
}

.ecl-method__list li {
  display: flex;
  flex-direction: column;
}

.ecl-method__list strong {
  font-size: 17px;
  letter-spacing: -0.01em;
  color: var(--ecl-forest);
}

.ecl-method__list span {
  font-size: 14px;
  color: var(--ecl-taupe);
}

/* --------------------------------------------------------------------------
   FORM PLACEMENT 2 — inline band, mid-page
   -------------------------------------------------------------------------- */

.ecl-inlineform {
  background:
    radial-gradient(80% 140% at 12% 0%, rgba(3, 99, 86, 0.55) 0%, rgba(3, 99, 86, 0) 60%),
    var(--ecl-forest);
  border-top: 2px solid var(--ecl-yellow);
  border-bottom: 2px solid var(--ecl-yellow);
  padding: clamp(40px, 5vw, 64px) 0;
}

.ecl-inlineform__inner {
  display: flex;
  align-items: center;
  gap: clamp(28px, 4vw, 56px);
}

.ecl-inlineform__copy {
  flex: 0 1 300px;
  min-width: 0;
}

.ecl-inlineform__copy h2 {
  margin: 0 0 8px;
  font-size: clamp(24px, 2.4vw, 30px);
  line-height: 1.14;
  letter-spacing: -0.025em;
  color: #ffffff;
}

.ecl-inlineform__copy p {
  margin: 0;
  font-size: 16px;
  color: #b9c7c0;
}

.ecl-bandform {
  flex: 1 1 auto;
  min-width: 0;
}

.ecl-bandform__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 14px;
}

/* On the dark band the labels and inputs need their own treatment */
.ecl-bandform .ecl-field {
  margin-bottom: 0;
}

.ecl-bandform label {
  color: #9bb0a6;
  font-size: 14px;
}

.ecl-bandform input {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.18);
  color: #ffffff;
}

.ecl-bandform input::placeholder {
  color: #7d9990;
}

.ecl-bandform input:focus {
  border-color: var(--ecl-yellow);
  background: rgba(255, 255, 255, 0.1);
}

.ecl-bandform .ecl-btn {
  width: auto;
  padding: 15px 32px;
}

/* --------------------------------------------------------------------------
   FORM PLACEMENT 4 — sticky bar
   -------------------------------------------------------------------------- */

.ecl-stickybar {
  position: fixed;
  z-index: 45;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 46, 43, 0.95);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 2px solid var(--ecl-yellow);
  animation: ecl-slideup 0.35s var(--ease);
}

@keyframes ecl-slideup {
  from { transform: translateY(100%); }
  to   { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ecl-stickybar { animation: none; }
}

.ecl-stickybar__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 14px clamp(20px, 4vw, 40px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.ecl-stickybar__text {
  margin: 0;
  min-width: 0;
}

.ecl-stickybar__text strong {
  display: block;
  font-size: 16px;
  color: #ffffff;
}

.ecl-stickybar__text span {
  font-size: 14px;
  color: #9bb0a6;
}

.ecl-stickybar .ecl-btn {
  flex: 0 0 auto;
  padding: 13px 26px;
  font-size: 15px;
}

/* --------------------------------------------------------------------------
   Timeline
   -------------------------------------------------------------------------- */

.ecl-timeline {
  padding: clamp(56px, 6.5vw, 88px) 0;
  background: var(--ecl-cream);
}

.ecl-timeline__inner {
  display: flex;
  gap: clamp(32px, 5vw, 72px);
  align-items: flex-start;
}

.ecl-timeline__media {
  flex: 1 1 50%;
  min-width: 0;
}

.ecl-timeline__media h2 {
  margin: 14px 0 26px;
  font-size: var(--t-h2);
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.ecl-timeline__media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 18px;
  box-shadow: var(--e-2);
}

.ecl-tag-lite {
  display: inline-block;
  padding: 6px 14px;
  border-radius: var(--ecl-radius-pill);
  background: var(--ecl-yellow);
  border: 2px solid var(--ecl-forest);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ecl-forest);
}

/* The amber rule draws downward as you scroll — GSAP scrubs --progress. */
@property --progress {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

.ecl-stages {
  --progress: 100%;
  position: relative;
  flex: 1 1 50%;
  min-width: 0;
  list-style: none;
  margin: 0;
  padding: 6px 0 0 30px;
  border-left: 2px solid var(--ecl-line);
}

.ecl-stages::before {
  content: "";
  position: absolute;
  left: -2px;
  top: 0;
  width: 2px;
  height: var(--progress);
  background: var(--ecl-forest);
}

.ecl-stages li {
  position: relative;
  padding: 0 0 30px;
}

.ecl-stages li::before {
  content: "";
  position: absolute;
  left: -36px;
  top: 5px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--ecl-yellow);
  border: 3px solid var(--ecl-forest);
}

.ecl-stages li:last-child {
  padding-bottom: 0;
}

.ecl-stages__when {
  margin: 0 0 5px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--ecl-forest);
}

.ecl-stages p:last-child {
  margin: 0;
  font-size: 16px;
  color: var(--ecl-body);
}

/* --------------------------------------------------------------------------
   Callout band
   -------------------------------------------------------------------------- */

.ecl-callout {
  padding: 0 0 clamp(56px, 6.5vw, 88px);
  background: var(--ecl-cream);
}

.ecl-callout__inner {
  display: flex;
  align-items: center;
  gap: clamp(18px, 3vw, 28px);
  padding: clamp(22px, 3vw, 30px) clamp(22px, 3.5vw, 34px);
  background: var(--ecl-yellow);
  border: 2px solid var(--ecl-forest);
  border-radius: var(--ecl-radius);
  box-shadow: var(--e-hard);
}

.ecl-callout__mark {
  flex: 0 0 auto;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--ecl-cream);
  border: 2px solid var(--ecl-forest);
  color: var(--ecl-forest);
  font-size: 24px;
  line-height: 50px;
  text-align: center;
}

.ecl-callout__copy {
  flex: 1 1 auto;
  min-width: 0;
}

.ecl-callout__title {
  margin: 0 0 5px;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.012em;
  color: var(--ecl-forest);
}

.ecl-callout__copy p:last-child {
  margin: 0;
  font-size: 16px;
  color: var(--ecl-body);
}

/* --------------------------------------------------------------------------
   Note band
   -------------------------------------------------------------------------- */

.ecl-note-band {
  position: relative;
  background:
    radial-gradient(90% 120% at 50% 0%, #036356 0%, rgba(3, 99, 86, 0) 60%),
    var(--ecl-forest);
  padding: clamp(56px, 6.5vw, 88px) 0;
  text-align: center;
}

.ecl-note-band__inner {
  max-width: 780px;
}

.ecl-note-band h2 {
  color: #ffffff;
  font-size: var(--t-h2);
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin-bottom: 20px;
}

.ecl-note-band p {
  color: #b9c7c0;
  font-size: var(--t-lede);
}

.ecl-note-band__foot {
  margin: 0;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  color: #8fa79c !important;
  font-size: 16px !important;
}

/* --------------------------------------------------------------------------
   Form section
   -------------------------------------------------------------------------- */

.ecl-form-section {
  background: var(--ecl-linen);
  padding: clamp(56px, 6.5vw, 88px) 0;
}

.ecl-form-section__inner {
  max-width: 620px;
}

.ecl-form-section__head {
  text-align: center;
  margin-bottom: 34px;
}

.ecl-form-section__head h2 {
  font-size: var(--t-h2);
  line-height: 1.1;
  letter-spacing: -0.032em;
}

.ecl-form-section__head .ecl-eyebrow {
  color: var(--ecl-label);
  font-size: 20px;
}

/* The final form is the page's last word — give it the full house card so it
   reads as the destination, not just another panel. */
.ecl-form-section .ecl-card {
  border: 2px solid var(--ecl-forest);
  border-radius: var(--ecl-radius);
  box-shadow: var(--e-hard);
  padding: clamp(26px, 4vw, 38px);
}

.ecl-form-note {
  margin: 16px 0 0;
  text-align: center;
  font-size: 14px;
  color: var(--ecl-taupe);
}

/* --------------------------------------------------------------------------
   Button variants
   -------------------------------------------------------------------------- */

.ecl-btn--inline {
  display: inline-block;
  width: auto;
  text-decoration: none;
}

/* Flat yellow with a hard green shadow. The gradient-and-glow version read
   as a generic SaaS button and was the loudest thing pulling the page away
   from the rest of the family. */
.ecl-btn--gold {
  color: var(--ecl-forest);
  background: var(--ecl-yellow);
  border: 2px solid var(--ecl-forest);
  box-shadow: var(--e-hard);
}

.ecl-btn--gold:hover {
  background: var(--ecl-gold);
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--ecl-forest);
}

.ecl-btn--gold:active {
  transform: translate(1px, 1px);
  box-shadow: 2px 2px 0 var(--ecl-forest);
}

.ecl-btn--outline {
  color: var(--ecl-yellow);
  background: transparent;
  border: 2px solid var(--ecl-yellow);
}

.ecl-btn--outline:hover {
  color: var(--ecl-forest);
  background: var(--ecl-yellow);
}

.ecl-btn--dark {
  flex: 0 0 auto;
  color: var(--ecl-linen);
  background: var(--ecl-forest);
  border: 2px solid var(--ecl-forest);
}

.ecl-btn--dark:hover {
  background: #013f39;
  transform: translate(-2px, -2px);
  box-shadow: 4px 4px 0 var(--ecl-yellow);
}

/* --------------------------------------------------------------------------
   Site footer
   -------------------------------------------------------------------------- */

.ecl-site-footer {
  background: var(--ecl-forest);
  color: rgba(245, 229, 196, 0.76);
  padding: clamp(48px, 6vw, 72px) 0 40px;
}

.ecl-foot {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(28px, 4vw, 48px);
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(245, 229, 196, 0.16);
}

.ecl-foot__brandcol {
  flex: 1 1 280px;
}

.ecl-foot__col {
  display: flex;
  flex-direction: column;
  gap: 11px;
  flex: 0 1 170px;
}

.ecl-foot__head {
  margin: 0 0 4px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0px;
  text-transform: uppercase;
  color: var(--ecl-yellow);
}

.ecl-foot__col a {
  font-size: 15px;
  color: rgba(245, 229, 196, 0.76);
  text-decoration: none;
  transition: color 0.2s var(--ease);
}

.ecl-foot__col a:hover {
  color: var(--ecl-yellow);
}

.ecl-site-footer__brand {
  margin: 0 0 12px;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0px;
  text-transform: uppercase;
  color: var(--ecl-linen);
}

.ecl-site-footer__glyphs {
  margin: 0 0 16px;
  color: var(--ecl-yellow);
  font-size: 17px;
  letter-spacing: 0.24em;
}

.ecl-foot__note {
  margin: 0;
  max-width: 280px;
  font-size: 14px;
  color: rgba(245, 229, 196, 0.58);
}

.ecl-foot__legal {
  margin: 20px 0 0;
  font-size: 14px;
  line-height: 1.55;
  color: rgba(245, 229, 196, 0.58);
}

/* --------------------------------------------------------------------------
   Landing — tablet
   -------------------------------------------------------------------------- */

@media (max-width: 980px) {
  .ecl-hero__inner {
    flex-direction: column;
    align-items: stretch;
    gap: 36px;
  }

  .ecl-hero__panel {
    flex: 1 1 auto;
  }

  .ecl-orb--bg {
    right: -18%;
    width: min(80vw, 460px);
    opacity: 0.3;
  }

  .ecl-inlineform__inner {
    flex-direction: column;
    align-items: stretch;
  }

  .ecl-bandform__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .ecl-bandform .ecl-btn {
    width: 100%;
  }

  .ecl-stickybar__text span {
    display: none;
  }

  .ecl-source__inner,
  .ecl-timeline__inner {
    flex-direction: column;
    gap: 36px;
  }

  .ecl-nav__links {
    display: none;
  }

  .ecl-nav__cta {
    margin-left: auto;
  }

  .ecl-scrollcue {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   Mobile — nothing below 14px anywhere
   -------------------------------------------------------------------------- */

@media (max-width: 600px) {
  .ecl-wrap {
    padding: 0 20px;
  }

  .ecl-announce__inner {
    padding: 9px 20px;
    font-size: 14px;
    gap: 8px;
  }

  .ecl-nav__inner {
    padding: 12px 20px;
  }

  .ecl-nav__brand {
    font-size: 14px;
    letter-spacing: 0.12em;
  }

  .ecl-nav__cta {
    font-size: 14px;
    padding: 9px 15px;
  }

  .ecl-hero__inner {
    padding: 56px 20px 56px;
    min-height: 0;
  }

  .ecl-hero__title {
    font-size: 40px;
  }

  .ecl-hero__lede {
    font-size: 17px;
  }

  .ecl-hero__actions .ecl-btn {
    display: block;
    width: 100%;
    text-align: center;
  }

  .ecl-badge-card {
    width: 100%;
  }

  .ecl-covers,
  .ecl-samples,
  .ecl-source,
  .ecl-timeline,
  .ecl-form-section,
  .ecl-note-band {
    padding: 52px 0;
  }

  .ecl-callout {
    padding: 12px 0 52px;
  }

  .ecl-sechead h2 {
    font-size: 29px;
  }

  .ecl-source__copy h2,
  .ecl-timeline__media h2,
  .ecl-note-band h2,
  .ecl-form-section__head h2 {
    font-size: 27px;
  }

  .ecl-factbar__inner {
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }

  .ecl-source__cards {
    grid-template-columns: 1fr;
  }

  .ecl-callout__inner {
    flex-direction: column;
    align-items: flex-start;
    padding: 22px;
  }

  .ecl-callout__inner .ecl-btn {
    width: 100%;
    text-align: center;
  }

  .ecl-note-band p {
    font-size: 17px;
  }

  .ecl-method__inner {
    gap: 14px;
  }

  .ecl-panel {
    padding: 22px;
  }

  .ecl-field-row {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .ecl-bandform__grid {
    grid-template-columns: 1fr;
  }

  .ecl-stickybar__inner {
    padding: 12px 20px;
    gap: 12px;
  }

  .ecl-foot {
    gap: 28px;
  }

  h1 {
    font-size: 31px;
  }

  h2 {
    font-size: 21px;
  }

  body,
  p {
    font-size: 16px;
  }

  .ecl-lede {
    font-size: 17px;
  }

  .ecl-card {
    padding: 26px 20px;
  }

  .ecl-masthead {
    padding: 36px 0 26px;
  }

  .ecl-summary {
    grid-template-columns: 1fr;
  }

  /* --- the reading --- */
  .ecl-rhead {
    padding-top: 42px;
  }

  .ecl-rhead__title {
    font-size: 30px;
  }

  .ecl-facts {
    grid-template-columns: 1fr 1fr;
  }

  .ecl-block {
    padding: 36px 0;
  }

  .ecl-block--answer {
    padding: 26px 22px;
    border-radius: 16px;
  }

  .ecl-answer__house {
    font-size: 25px;
  }

  .ecl-answer__summary,
  .ecl-block__lede {
    font-size: 17px;
  }

  .ecl-chart {
    flex-direction: column;
    gap: 24px;
  }

  .ecl-ehead {
    font-size: 25px;
  }

  .ecl-split {
    flex-direction: column;
    gap: 0;
  }

  .ecl-talismans {
    grid-template-columns: 1fr;
  }

  .ecl-affirm p:last-child {
    font-size: 18px;
  }

  .ecl-why {
    padding: 20px 20px 16px;
  }

  .ecl-window__dates {
    font-size: 16px;
  }

  .ecl-window__arrow {
    margin: 0 8px;
  }
}

/* Very narrow — stack the fact row completely */
@media (max-width: 380px) {
  .ecl-facts {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   REPORT — INDEX-MATCHED RESTYLE  (2026-07-23)

   The client asked for onboarding.html (progress + reading report) to adopt
   the landing page's visual language: the warm AskNova palette from
   css/landing.css, Playfair Display for display type over Helvetica body, the
   rounded cream-panel layout, and the wordmark logo instead of the CSS orb.

   Deliberately ADDITIVE — this block is appended last and only re-declares the
   properties that need to change (colour, ground, radius, display family), so
   it wins by source order while every layout/sizing rule above (including the
   responsive tweaks) still stands. Nothing earlier in the file was deleted.

   Tokens are namespaced --rp-* so they can never collide with the older
   --ecl-* set the untouched rules still read. Values mirror landing.css:
   paper/panel/lift grounds, one dusty mauve, one deep cocoa, warm bronze as
   the single accent on light and a lifted tan for accents on cocoa.
   ========================================================================== */

:root {
  --rp-paper: #e9e0d5;      /* page ground, visible between the bands */
  --rp-panel: #f3ece3;      /* chips, tables, soft insets */
  --rp-lift:  #faf6f0;      /* the reading-block cards */
  --rp-mauve: #d6c9cf;      /* meter + progress tracks */
  --rp-cocoa: #6b4438;      /* masthead, footer, dark insets */
  --rp-cream: #f7f1e9;      /* text/fills on cocoa */
  --rp-ink:   #402f28;      /* display headings — 10.8:1 on lift */
  --rp-body:  #6a5850;      /* body copy — 5.7:1 */
  --rp-muted: #78665d;      /* labels/tertiary — 4.65:1 */
  --rp-line:  #ddd0c3;

  /* One warm accent, split by ground. Bronze clears AA on the cream cards
     (6.1:1); the lifted tan is the readable counterpart on cocoa (4.9:1). */
  --rp-accent:      #8a5a34;
  --rp-accent-lite: #e4c39c;

  /* Semantic trio for the positive / challenge / avoid columns and the energy
     meter, warmed to sit in this palette instead of the old green+amber. */
  --rp-good:  #1e5850;
  --rp-warn:  #9c5a2f;
  --rp-avoid: #a3341c;

  --rp-serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --rp-sans:  "Helvetica Neue", Helvetica, Arial, sans-serif;

  --rp-round: 26px;
  --rp-round-sm: 14px;
}

body {
  background: var(--rp-paper);
  color: var(--rp-ink);
}

/* Filter/symbol defs — the inlined wordmark lives here, taken out of flow. */
.ecl-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* --- Wordmark logo (shared with index.html via the inline #ec-logo symbol) - */
.ecl-brand {
  display: inline-flex;
  align-items: center;
  margin: 0 auto 26px;
  color: var(--rp-ink);          /* the symbol's paths are currentColor */
  text-decoration: none;
}

.ecl-brand__logo {
  display: block;
  height: 26px;
  width: auto;
  aspect-ratio: 2005 / 343;
}

/* On the cocoa masthead and footer the wordmark inverts to cream. */
.ecl-brand--light {
  color: var(--rp-cream);
}

.ecl-brand:focus-visible {
  outline: 3px solid var(--rp-accent);
  outline-offset: 4px;
  border-radius: 4px;
}

/* --------------------------------------------------------------------------
   Progress view
   -------------------------------------------------------------------------- */

/* The eclipse loader — a cocoa disc inside a lifted corona ring, replacing the
   old forest+amber orb. Its own animation keyframes (…-rp) so the base
   .ecl-mark--spin rule's amber corona can't paint through. */
.ecl-mark {
  width: 88px;
  height: 88px;
  margin: 0 auto 30px;
  border-radius: 50%;
  background: radial-gradient(circle at 37% 34%, #7d5142 0%, #55352b 72%);
  box-shadow:
    0 0 0 5px var(--rp-lift),
    0 0 0 8px rgba(138, 90, 52, 0.5),
    0 0 46px 12px rgba(138, 90, 52, 0.28);
}

.ecl-mark--spin {
  animation: ecl-corona-rp 2.8s ease-in-out infinite;
}

@keyframes ecl-corona-rp {
  0%, 100% {
    box-shadow:
      0 0 0 5px var(--rp-lift),
      0 0 0 8px rgba(138, 90, 52, 0.5),
      0 0 34px 8px rgba(138, 90, 52, 0.28);
  }
  50% {
    box-shadow:
      0 0 0 5px var(--rp-lift),
      0 0 0 11px rgba(138, 90, 52, 0.62),
      0 0 58px 18px rgba(138, 90, 52, 0.45);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ecl-mark--spin { animation: none; }
}

.ecl-progress { background: var(--rp-mauve); }
.ecl-progress__bar { background: var(--rp-cocoa); }
.ecl-step { color: var(--rp-muted); }

/* --------------------------------------------------------------------------
   Shared type — Playfair for display, Helvetica for everything read in prose
   -------------------------------------------------------------------------- */

h1 {
  font-family: var(--rp-serif);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--rp-ink);
}

.ecl-eyebrow { color: var(--rp-muted); }
.ecl-eyebrow--gold { color: var(--rp-accent-lite); }
.ecl-lede { color: var(--rp-body); }
.ecl-lede.ecl-muted { color: var(--rp-muted); }   /* progress lede carries both */
.ecl-muted { color: var(--rp-muted); }

/* --------------------------------------------------------------------------
   Report masthead — full-bleed cocoa band with rounded lower corners, the
   same move the index closing band makes on the paper ground.
   -------------------------------------------------------------------------- */

.ecl-rhead {
  background: var(--rp-cocoa);
  padding: clamp(40px, 7vw, 64px) 24px 0;
  border-radius: 0 0 var(--rp-round) var(--rp-round);
}

.ecl-rhead::before {
  background: radial-gradient(
    circle,
    rgba(228, 195, 156, 0.16) 0%,
    rgba(228, 195, 156, 0) 62%
  );
}

.ecl-rhead .ecl-brand__logo { height: 30px; }

.ecl-rhead__title {
  font-family: var(--rp-serif);
  font-weight: 500;
  color: var(--rp-cream);
}

.ecl-rhead__event { color: rgba(247, 241, 233, 0.66); }

/* Birth facts — cocoa cells split by a cream hairline. */
.ecl-facts {
  background: rgba(247, 241, 233, 0.16);
  border-top: 1px solid rgba(247, 241, 233, 0.16);
  border-bottom: none;
  margin-top: clamp(28px, 5vw, 40px);
}

.ecl-facts__item { background: var(--rp-cocoa); }
.ecl-facts__label { color: var(--rp-accent-lite); }
.ecl-facts__value { color: var(--rp-cream); }

/* --------------------------------------------------------------------------
   Report body — a centred column of rounded cream panels on the paper ground
   -------------------------------------------------------------------------- */

.ecl-rbody {
  padding: clamp(28px, 5vw, 44px) clamp(16px, 4vw, 24px) 0;
}

.ecl-block {
  background: var(--rp-lift);
  border: 1px solid var(--rp-line);
  border-radius: var(--rp-round);
  padding: clamp(24px, 4vw, 40px);
  margin-bottom: 20px;
  box-shadow: 0 26px 54px -36px rgba(64, 47, 40, 0.3);
}

.ecl-block:last-child { margin-bottom: 0; }

.ecl-block__num { color: var(--rp-accent); }
.ecl-block__title { color: var(--rp-muted); }
.ecl-block__lede { color: var(--rp-body); }
.ecl-block__sub { color: var(--rp-muted); }
.ecl-block__sub--good { color: var(--rp-good); }
.ecl-block__sub--bad { color: var(--rp-warn); }

/* Birth chart */
.ecl-chart__wheel img { border-radius: var(--rp-round-sm); }
.ecl-bigpoint { border-bottom-color: var(--rp-line); }
.ecl-bigpoint__label { color: var(--rp-muted); }
.ecl-bigpoint__sign {
  font-family: var(--rp-serif);
  font-weight: 500;
  color: var(--rp-ink);
}
.ecl-bigpoint__deg { color: var(--rp-accent); }
.ecl-bigpoint__note { color: var(--rp-muted); }

.ecl-point__bar,
.ecl-skeleton span {
  background: linear-gradient(90deg, #e6ddd0 25%, #f4eee5 50%, #e6ddd0 75%);
  background-size: 240% 100%;
}

/* Major placements — content-sized pills that WRAP, matching the eclipse-meta
   and life-area chip rows. The old fixed 4-up grid (minmax 150px) clipped the
   house tag on the longer signs ("Mercury Sagittarius 12H" ran past the cell),
   so a value silently went missing. Sizing each pill to its own text means the
   house is always shown and the row never truncates at any width. */
.ecl-placements {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.ecl-placement {
  gap: 7px;
  padding: 9px 15px;
  background: var(--rp-panel);
  border: 1px solid var(--rp-line);
  border-radius: 999px;
}
.ecl-placement__planet { color: var(--rp-ink); }
.ecl-placement__sign { color: var(--rp-body); }
/* Not margin-left:auto any more — in a content-sized pill that would only add a
   stray gap. A hairline separator keeps the house reading as its own token. */
.ecl-placement__house {
  margin-left: 2px;
  padding-left: 9px;
  border-left: 1px solid var(--rp-line);
  color: var(--rp-accent);
}

.ecl-await__cap { color: var(--rp-muted); }
.ecl-await__dot { background: var(--rp-accent); }

/* --------------------------------------------------------------------------
   Eclipse blocks
   -------------------------------------------------------------------------- */

.ecl-eq { color: var(--rp-accent); }
.ecl-ehead {
  font-family: var(--rp-serif);
  font-weight: 500;
  color: var(--rp-ink);
}

.ecl-chip {
  background: var(--rp-panel);
  border-color: var(--rp-line);
  color: var(--rp-body);
}

.ecl-chip--gold {
  background: rgba(138, 90, 52, 0.12);
  border-color: rgba(138, 90, 52, 0.5);
  color: var(--rp-accent);
}

.ecl-area {
  background: var(--rp-cocoa);
  color: var(--rp-cream);
  border-radius: 8px;
}

/* Energy meter */
.ecl-energy {
  background: var(--rp-panel);
  border-color: var(--rp-line);
  border-radius: var(--rp-round-sm);
}
.ecl-energy__label { color: var(--rp-muted); }
.ecl-energy__value {
  font-family: var(--rp-serif);
  color: var(--rp-ink);
}
.ecl-energy__value span {
  font-family: var(--rp-sans);      /* keep "/100" on the house sans */
  color: var(--rp-muted);
}
.ecl-energy__track { background: var(--rp-mauve); }
.ecl-energy__fill { background: var(--rp-accent); }
.ecl-energy__fill.is-high { background: var(--rp-good); }
.ecl-energy__fill.is-low { background: var(--rp-avoid); }
.ecl-energy__nature { color: var(--rp-accent); }
.ecl-energy__nature.is-high { color: var(--rp-good); }
.ecl-energy__nature.is-low { color: var(--rp-avoid); }

/* Why this eclipse affects you — cocoa inset inside the cream card */
.ecl-why {
  background: var(--rp-cocoa);
  border-radius: var(--rp-round-sm);
  color: rgba(247, 241, 233, 0.9);
}
.ecl-why__title { color: var(--rp-accent-lite); }
.ecl-why p { color: rgba(247, 241, 233, 0.9); }

/* Positive / challenge / opportunity / avoid columns */
.ecl-ilist li { color: var(--rp-body); }
.ecl-ilist--good li::before { color: var(--rp-good); }
.ecl-ilist--bad li::before { color: var(--rp-warn); }
.ecl-ilist--avoid li::before { color: var(--rp-avoid); }

/* Talismans */
.ecl-talismans {
  background: var(--rp-line);
  border-color: var(--rp-line);
  border-radius: var(--rp-round-sm);
}
.ecl-talisman { background: var(--rp-lift); }
.ecl-talisman__label { color: var(--rp-muted); }
.ecl-talisman__value { color: var(--rp-ink); }

/* Recommended actions + affirmation */
.ecl-steps li { color: var(--rp-body); }
.ecl-steps li::marker { color: var(--rp-accent); }

.ecl-affirm {
  background: rgba(138, 90, 52, 0.09);
  border-color: rgba(138, 90, 52, 0.32);
  border-radius: var(--rp-round-sm);
}
.ecl-affirm__label { color: var(--rp-accent); }
.ecl-affirm p:last-child {
  font-family: var(--rp-serif);
  font-style: italic;
  font-weight: 500;
  color: var(--rp-ink);
}

/* Prose + positions table */
.ecl-prose { color: var(--rp-body); }
.ecl-prose--muted { color: var(--rp-muted); }

.ecl-tablewrap {
  border-color: var(--rp-line);
  border-radius: 12px;
}
.ecl-table th {
  color: var(--rp-muted);
  background: var(--rp-panel);
  border-bottom-color: var(--rp-line);
}
.ecl-table td {
  color: var(--rp-body);
  border-bottom-color: var(--rp-line);
}
.ecl-table td:first-child { color: var(--rp-ink); }

/* --------------------------------------------------------------------------
   Report footer — full-bleed cocoa band with rounded upper corners, mirroring
   the masthead and the index footer.
   -------------------------------------------------------------------------- */

.ecl-rfoot {
  max-width: none;
  margin: 28px 0 0;
  padding: clamp(40px, 6vw, 60px) 24px clamp(48px, 7vw, 72px);
  background: var(--rp-cocoa);
  border-radius: var(--rp-round) var(--rp-round) 0 0;
}

.ecl-rfoot .ecl-brand { margin-bottom: 18px; }
.ecl-rfoot__note { color: rgba(247, 241, 233, 0.72); }

/* The "start over" button becomes a cream-outline ghost on the cocoa band. */
.ecl-btn--ghost {
  display: inline-block;
  width: auto;
  padding: 14px 30px;
  color: var(--rp-cream);
  background: transparent;
  border: 1.5px solid rgba(247, 241, 233, 0.5);
}

.ecl-btn--ghost:hover {
  background: rgba(247, 241, 233, 0.12);
  border-color: var(--rp-cream);
}

.ecl-btn--ghost:focus-visible {
  outline: 3px solid var(--rp-cream);
  outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Report responsive — only the panel-era additions; the stacking rules above
   already fold the chart, splits, facts and talismans on small screens.
   -------------------------------------------------------------------------- */

@media (max-width: 600px) {
  :root { --rp-round: 20px; }
  .ecl-brand__logo { height: 24px; }
  .ecl-rhead .ecl-brand__logo { height: 26px; }
}

/* ==========================================================================
   MODERN / PROFESSIONAL POLISH  (2026-07-23)

   Product-grade refinements layered on top of the index-matched restyle:
   structured section badges, tabular figures for every number, crisper
   layered elevation, a faint masthead sheen, a framed chart wheel and a
   sequenced entrance. Still additive, still inside the warm brand — no palette
   or layout-language change, just the finish a shipped report would have.
   ========================================================================== */

html { scroll-behavior: smooth; }
::selection { background: rgba(138, 90, 52, 0.18); }

/* --- Section header: the number becomes a compact badge, centre-aligned with
   its label instead of floating on the text baseline. ---------------------- */
.ecl-block__head {
  align-items: center;
  gap: 13px;
}

.ecl-block__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 26px;
  padding: 0 9px;
  border-radius: 999px;
  background: rgba(138, 90, 52, 0.1);
  border: 1px solid rgba(138, 90, 52, 0.26);
  color: var(--rp-accent);
  font-size: 12.5px;
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
}

/* --- Tabular figures — degrees, dates, scores and table cells line up like a
   real data report instead of drifting on proportional digits. ------------- */
.ecl-facts__value,
.ecl-bigpoint__deg,
.ecl-energy__value,
.ecl-placement__house,
.ecl-emeta .ecl-chip,
.ecl-table td {
  font-variant-numeric: tabular-nums;
}

/* --- Elevation: a hairline top highlight plus a soft, far-thrown shadow reads
   more crafted than one blurry drop. --------------------------------------- */
.ecl-block {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    0 2px 4px rgba(64, 47, 40, 0.04),
    0 28px 56px -38px rgba(64, 47, 40, 0.34);
}

/* --- Masthead sheen — a faint overhead light gives the cocoa band depth. --- */
.ecl-rhead {
  background:
    radial-gradient(130% 90% at 50% -30%, rgba(255, 244, 232, 0.09), rgba(255, 244, 232, 0) 55%),
    var(--rp-cocoa);
}

/* --- The birth-chart wheel, framed in its own soft panel. ----------------- */
.ecl-chart__wheel img {
  padding: 18px;
  background: radial-gradient(circle at 50% 44%, #fffdf9, var(--rp-panel));
  border: 1px solid var(--rp-line);
  border-radius: var(--rp-round-sm);
}

/* --- Sequenced entrance --------------------------------------------------- */
/* Guarded by no-preference, so reduced-motion users get the settled page with
   nothing pre-hidden. These are plain CSS animations that self-complete on
   render — there is no JS reveal that could strand content, which is the trap
   the landing page hit. They start the moment each view leaves display:none. */
@media (prefers-reduced-motion: no-preference) {
  #view-progress > * { animation: rp-fade-up 0.6s var(--ease) both; }
  #view-progress .ecl-mark { animation-delay: 0.04s; }
  #view-progress .ecl-eyebrow { animation-delay: 0.08s; }
  #view-progress h1 { animation-delay: 0.12s; }
  #view-progress .ecl-lede { animation-delay: 0.16s; }
  #view-progress .ecl-progress { animation-delay: 0.2s; }
  #view-progress .ecl-step { animation-delay: 0.24s; }

  #view-report .ecl-rhead { animation: rp-fade-up 0.55s var(--ease) both; }
  #view-report .ecl-rbody .ecl-block { animation: rp-fade-up 0.6s var(--ease) both; }
  #view-report .ecl-block:nth-child(2) { animation-delay: 0.07s; }
  #view-report .ecl-block:nth-child(3) { animation-delay: 0.13s; }
  #view-report .ecl-block:nth-child(4) { animation-delay: 0.19s; }
  #view-report .ecl-block:nth-child(n + 5) { animation-delay: 0.24s; }
  #view-report .ecl-rfoot { animation: rp-fade 0.7s var(--ease) both 0.15s; }
}

@keyframes rp-fade-up {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

@keyframes rp-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ==========================================================================
   HERO / MASTHEAD REDESIGN  (2026-07-23)

   Turns the flat cocoa band into a proper report masthead: a richer graded
   cocoa ground with a warm pool of light, a decorative total-eclipse corona
   bleeding off the right edge over a faint starfield, a kicker eyebrow, the
   two eclipses as data pills, and an airier birth-facts row. Still cocoa +
   cream + Playfair — the brand is intact, the finish is elevated.
   ========================================================================== */

.ecl-rhead {
  position: relative;
  overflow: hidden;
  padding: clamp(44px, 7vw, 72px) 24px 0;
  background:
    radial-gradient(44% 92% at 85% 48%, rgba(255, 198, 142, 0.18), rgba(255, 198, 142, 0) 60%),
    radial-gradient(130% 90% at 50% -35%, rgba(255, 244, 232, 0.08), rgba(255, 244, 232, 0) 55%),
    linear-gradient(180deg, #6f473a 0%, #5a3830 100%);
}

/* The old soft corona bloom is replaced by the sky layer below. */
.ecl-rhead::before { display: none; }

/* Keep the copy above the sky. */
.ecl-rhead__inner {
  position: relative;
  z-index: 2;
}

/* --- Decorative sky ------------------------------------------------------- */
.ecl-rhead__sky {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}

/* A scattered starfield, held mostly to the upper band so it never sits behind
   the facts row. */
.ecl-rhead__sky::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.55;
  background-image:
    radial-gradient(1.5px 1.5px at 10% 24%, rgba(255, 240, 224, 0.7), transparent),
    radial-gradient(1.2px 1.2px at 21% 58%, rgba(255, 240, 224, 0.5), transparent),
    radial-gradient(1.3px 1.3px at 7% 72%, rgba(255, 240, 224, 0.5), transparent),
    radial-gradient(1.6px 1.6px at 32% 16%, rgba(255, 240, 224, 0.6), transparent),
    radial-gradient(1.2px 1.2px at 45% 40%, rgba(255, 240, 224, 0.42), transparent),
    radial-gradient(1.4px 1.4px at 54% 22%, rgba(255, 240, 224, 0.5), transparent),
    radial-gradient(1.2px 1.2px at 63% 54%, rgba(255, 240, 224, 0.4), transparent),
    radial-gradient(1.5px 1.5px at 40% 68%, rgba(255, 240, 224, 0.45), transparent),
    radial-gradient(1.3px 1.3px at 74% 30%, rgba(255, 240, 224, 0.5), transparent);
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 55%, transparent 82%);
  mask-image: linear-gradient(90deg, #000 0%, #000 55%, transparent 82%);
}

/* A total eclipse — dark moon inside a bright corona ring — bleeding off the
   right edge so only its inner crescent of light sits over the band. */
.ecl-rhead__eclipse {
  position: absolute;
  top: 50%;
  right: clamp(-210px, -11vw, -110px);
  width: clamp(220px, 27vw, 330px);
  aspect-ratio: 1;
  transform: translateY(-50%);
  border-radius: 50%;
  opacity: 0.9;
  background:
    radial-gradient(circle,
      transparent 44%,
      rgba(255, 232, 198, 0.92) 47%,
      rgba(255, 206, 152, 0.32) 55%,
      rgba(255, 190, 120, 0) 72%);
  box-shadow: 0 0 100px 26px rgba(255, 200, 135, 0.17);
}

/* The moon: only a touch darker than the band, so it reads as an occulting
   disc rather than a hole punched in the masthead. */
.ecl-rhead__eclipse::after {
  content: "";
  position: absolute;
  inset: 9%;
  border-radius: 50%;
  background: radial-gradient(circle at 42% 38%, #65402f, #4e3126 74%);
  box-shadow: inset 0 0 26px rgba(0, 0, 0, 0.32);
}

/* --- Kicker eyebrow — flanked by a hairline each side. Block-level flex so it
   sits on its OWN line under the wordmark (inline-flex made it flow up beside
   the logo, which is also inline-flex). --------------------------------------*/
.ecl-rhead .ecl-eyebrow--gold {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 13px;
  margin-bottom: 16px;
}

.ecl-rhead .ecl-eyebrow--gold::before,
.ecl-rhead .ecl-eyebrow--gold::after {
  content: "";
  width: 26px;
  height: 1px;
  background: currentColor;
  opacity: 0.5;
}

/* --- The two eclipses, as data pills. ------------------------------------- */
.ecl-rhead__event {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 6px 0 0;
}

.ecl-echip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(247, 241, 233, 0.06);
  border: 1px solid rgba(247, 241, 233, 0.2);
  font-size: 14px;
  line-height: 1;
  color: var(--rp-cream);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

.ecl-echip__icon {
  font-size: 15px;
  color: var(--rp-accent-lite);
}

.ecl-echip__type {
  font-weight: 600;
  letter-spacing: 0.01em;
}

.ecl-echip__sep { color: rgba(247, 241, 233, 0.38); }

.ecl-echip__date {
  color: rgba(247, 241, 233, 0.72);
  font-variant-numeric: tabular-nums;
}

/* --- Birth facts — airy, hairline-topped, subtle column dividers. --------- */
.ecl-facts {
  background: transparent;
  border-top: 1px solid rgba(247, 241, 233, 0.16);
  border-bottom: none;
  gap: 0;
  margin-top: clamp(30px, 5vw, 44px);
}

.ecl-facts__item {
  background: transparent;
  border-left: 1px solid rgba(247, 241, 233, 0.12);
  padding: 22px 24px;
}

.ecl-facts__item:first-child {
  border-left: none;
}

.ecl-facts__label {
  margin-bottom: 6px;
  letter-spacing: 0px;
}

/* --- Entrance for the new masthead pieces. -------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  #view-report .ecl-rhead__sky { animation: rp-fade 1.2s var(--ease) both 0.1s; }
}

@media (max-width: 600px) {
  .ecl-rhead__eclipse { opacity: 0.5; right: -150px; }
  .ecl-rhead__sky::before { opacity: 0.35; }

  .ecl-facts__item {
    border-left: none;
    padding: 14px 4px;
  }
  .ecl-facts { gap: 2px; }
}

/* ==========================================================================
   REPORT HEADER + HERO v2  (2026-07-23)

   Replaces the flat masthead band with a proper page frame: a slim sticky
   header (wordmark + one action) over a split hero — the reading title and
   eclipse pills on the left, a drawn total-solar-eclipse (inline SVG) on the
   right — with the birth facts as a strip beneath. Deliberately namespaced
   .ecl-rhero* / .ecl-topbar so it never touches the dead .ecl-hero* landing
   rules further up this file. The old .ecl-rhead* masthead rules are now inert
   (no matching markup); .ecl-facts and .ecl-echip are reused as-is.
   ========================================================================== */

/* --- Sticky header -------------------------------------------------------- */
/* The index page's floating cream nav PILL, reused here (client: "index wala
   same header"). Fixed and floating over the dark hero — cream on dark reads
   great up top, and the soft shadow keeps it defined once it floats over the
   cream report body on scroll. */
.ecl-topbar {
  position: fixed;
  top: 14px;
  left: 0;
  right: 0;
  z-index: 60;
  padding: 0 clamp(14px, 4vw, 40px);
}

.ecl-topbar__inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 8px 8px 8px 26px;
  display: flex;
  align-items: center;
  gap: 16px;
  background: rgba(250, 246, 240, 0.9);
  -webkit-backdrop-filter: saturate(1.5) blur(18px);
  backdrop-filter: saturate(1.5) blur(18px);
  border: 1px solid rgba(255, 255, 255, 0.65);
  border-radius: 999px;
  box-shadow: 0 16px 40px -20px rgba(40, 22, 17, 0.55);
}

/* Dark wordmark on the cream pill (was cream on the old dark bar). */
.ecl-topbar .ecl-brand {
  margin: 0;
  min-height: 44px;
  color: var(--rp-ink);
}

.ecl-topbar .ecl-brand__logo { height: 23px; }

/* Cocoa CTA pill on the right — index's .ec-nav__cta. */
.ecl-topbar__cta {
  flex: 0 0 auto;
  margin-left: auto;
  padding: 12px 26px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--rp-cream);
  background: var(--rp-cocoa);
  border: none;
  border-radius: 999px;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.2s var(--ease), transform 0.2s var(--ease);
}

.ecl-topbar__cta:hover {
  background: #7d5142;
  transform: translateY(-1px);
}

.ecl-topbar__cta:focus-visible {
  outline: 3px solid var(--rp-cocoa);
  outline-offset: 2px;
}

/* Phones: tighten the CTA so the wordmark + pill never crowd the floating bar.
   Desktop keeps the roomier 12px 26px above. */
@media (max-width: 600px) {
  .ecl-topbar__cta {
    padding: 10px 15px;
  }
}

/* --- Hero shell — full-bleed CINEMATIC night. The eclipse becomes the hero's
   backdrop; the copy sits over a scrim at the foot. --------------------------*/
.ecl-rhero {
  position: relative;
  overflow: hidden;
  border-radius: 0 0 var(--rp-round) var(--rp-round);
  min-height: clamp(620px, 94vh, 900px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* Nav clearance up top (the pill is fixed), plus side + foot padding. The
     eclipse and copy STACK in flow now (see .ecl-rhero__art), so the corona can
     never land on the kicker at any viewport height. */
  padding: clamp(104px, 14vh, 140px) clamp(20px, 4vw, 40px) clamp(32px, 4vw, 48px);
  /* The real twilight sky of a total eclipse: a deep blue-purple that a total
     eclipse actually brings, a pearly-warm glow of the sun's own light around
     the disc, and a warm 360° sunset low on the horizon. */
  background:
    radial-gradient(36% 30% at 50% 30%, rgba(255, 214, 158, 0.42) 0%, rgba(255, 176, 110, 0.12) 40%, rgba(255, 170, 100, 0) 66%),
    radial-gradient(160% 30% at 50% 110%, rgba(232, 120, 52, 0.42) 0%, rgba(180, 84, 44, 0.12) 44%, rgba(150, 70, 40, 0) 72%),
    radial-gradient(130% 100% at 50% 26%, #1c2348 0%, #141838 46%, #090b1c 100%),
    #090b1c;
}

/* Stars come out during totality — scattered across the twilight sky. They sit
   BEHIND the sun/moon discs and show around them (the discs are transparent
   PNGs, not an opaque rectangle, so there is no starless box). */
.ecl-rhero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.7;
  animation: ecl-twinkle-a 6.5s ease-in-out infinite;
  background-image:
    radial-gradient(1.5px 1.5px at 8% 22%, rgba(255, 240, 224, 0.7), transparent),
    radial-gradient(1.2px 1.2px at 17% 60%, rgba(255, 240, 224, 0.45), transparent),
    radial-gradient(1.3px 1.3px at 5% 40%, rgba(255, 240, 224, 0.5), transparent),
    radial-gradient(1.6px 1.6px at 27% 14%, rgba(255, 240, 224, 0.6), transparent),
    radial-gradient(1.1px 1.1px at 40% 30%, rgba(255, 240, 224, 0.4), transparent),
    radial-gradient(1.4px 1.4px at 62% 18%, rgba(255, 240, 224, 0.5), transparent),
    radial-gradient(1.2px 1.2px at 74% 40%, rgba(255, 240, 224, 0.4), transparent),
    radial-gradient(1.5px 1.5px at 90% 24%, rgba(255, 240, 224, 0.5), transparent),
    radial-gradient(1.3px 1.3px at 95% 58%, rgba(255, 240, 224, 0.45), transparent),
    radial-gradient(1.2px 1.2px at 12% 80%, rgba(255, 240, 224, 0.4), transparent),
    radial-gradient(1.3px 1.3px at 84% 72%, rgba(255, 240, 224, 0.42), transparent);
}

/* The eclipse — large, centred, drifting up so the corona fills the top and
   bleeds off. Absolute, so it is the hero's backdrop rather than a column. */
.ecl-rhero__art {
  /* In FLOW, stacked above the copy, with a generous gap so the eclipse breathes
     above the reading title. z-index 1 keeps it above the sky (stars and clouds,
     both z-index 0). */
  z-index: 1;
  margin-bottom: clamp(32px, 5vh, 68px);
  pointer-events: none;
}

/* The eclipse SCENE — real sun + real moon composited into an eclipse in
   progress. Both source PNGs are transparent discs, so they layer cleanly with
   no boxes. */
.ecl-scene {
  position: relative;
  width: min(360px, 46vw, 44vh);
  aspect-ratio: 1;
  display: block;
}

.ecl-scene__sun,
.ecl-scene__moon {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* The sun throws its own warm light into the eclipse sky. */
.ecl-scene__sun {
  filter:
    drop-shadow(0 0 46px rgba(255, 150, 55, 0.55))
    drop-shadow(0 0 120px rgba(255, 110, 40, 0.32));
  animation: ecl-sun-breathe 9s ease-in-out infinite;
}

/* The moon — lifted to a pale, near-white silver (client's white-moon
   reference) by the #ec-moon-light gamma filter, with a soft shadow so it reads
   as a solid body over the sky. Offset so it crosses the sun, leaving a blazing
   crescent. Its base transform is a resting crescent for the reduced-motion
   path; the keyframes drift it so the eclipse is visibly happening. */
.ecl-scene__moon {
  /* A touch SMALLER than the sun and CONCENTRIC, so the sun's fiery rim shows
     as an even ring of fire all the way around the moon. */
  width: 90%;
  height: 90%;
  top: 5%;
  left: 5%;
  filter: url(#ec-moon-light) drop-shadow(0 6px 26px rgba(0, 0, 0, 0.5));
  transform: translate(0%, 0%);
  animation: ecl-moon-cross 22s ease-in-out infinite;
}

@keyframes ecl-sun-breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.025); }
}

@keyframes ecl-moon-cross {
  0%   { transform: translate(-1.4%, 1%); }
  50%  { transform: translate(1.4%, -1%); }
  100% { transform: translate(-1.4%, 1%); }
}

@media (prefers-reduced-motion: reduce) {
  .ecl-scene__sun,
  .ecl-scene__moon { animation: none; }
}

/* REAL clouds in the eclipse sky. clouds.png is a pale daytime cloud photo; it
   is darkened, warmed and screened low over the twilight so it reads as real
   twilight cloud catching the last of the sun's light near the horizon —
   photographic texture the flat gradient was missing. Screen (not multiply)
   because during totality the clouds are LIT by the corona/horizon, i.e.
   lighter than the deep sky, not darker. */
.ecl-rhero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: url("../images/clouds.png") center 72% / cover no-repeat;
  /* Warm twilight clouds; soft-light (not screen) adds real cloud TEXTURE
     without washing the deep sky out to a flat haze. */
  filter: brightness(0.6) contrast(1.1) saturate(1.5) sepia(0.5) hue-rotate(-14deg);
  mix-blend-mode: soft-light;
  opacity: 0.75;
}

/* Second + third star layers, twinkling out of phase with the ::before field so
   individual stars pulse rather than the whole sky at once. */
.ecl-rhero__stars {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.8;
  background-image:
    radial-gradient(1.4px 1.4px at 22% 34%, rgba(255, 246, 232, 0.9), transparent),
    radial-gradient(1.1px 1.1px at 33% 9%,  rgba(255, 246, 232, 0.7), transparent),
    radial-gradient(1.5px 1.5px at 48% 21%, rgba(255, 246, 232, 0.85), transparent),
    radial-gradient(1.2px 1.2px at 56% 46%, rgba(255, 246, 232, 0.7), transparent),
    radial-gradient(1.3px 1.3px at 69% 30%, rgba(255, 246, 232, 0.8), transparent),
    radial-gradient(1.6px 1.6px at 79% 13%, rgba(255, 246, 232, 0.9), transparent),
    radial-gradient(1.2px 1.2px at 89% 52%, rgba(255, 246, 232, 0.7), transparent),
    radial-gradient(1.3px 1.3px at 15% 49%, rgba(255, 246, 232, 0.75), transparent),
    radial-gradient(1.1px 1.1px at 6% 68%,  rgba(255, 246, 232, 0.65), transparent),
    radial-gradient(1.2px 1.2px at 44% 66%, rgba(255, 246, 232, 0.7), transparent),
    radial-gradient(1.4px 1.4px at 92% 38%, rgba(255, 246, 232, 0.85), transparent),
    radial-gradient(1.2px 1.2px at 30% 53%, rgba(255, 246, 232, 0.68), transparent);
  animation: ecl-twinkle-b 4.8s ease-in-out infinite;
}

.ecl-rhero__stars::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1.7px 1.7px at 12% 16%, rgba(255, 252, 244, 0.95), transparent),
    radial-gradient(1.5px 1.5px at 64% 20%, rgba(255, 252, 244, 0.85), transparent),
    radial-gradient(1.6px 1.6px at 83% 30%, rgba(255, 252, 244, 0.9), transparent),
    radial-gradient(1.4px 1.4px at 38% 40%, rgba(255, 252, 244, 0.8), transparent),
    radial-gradient(1.5px 1.5px at 50% 8%,  rgba(255, 252, 244, 0.85), transparent);
  animation: ecl-twinkle-a 3.6s ease-in-out infinite;
  animation-delay: -1.2s;
}

@keyframes ecl-twinkle-a {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 0.9; }
}

@keyframes ecl-twinkle-b {
  0%, 100% { opacity: 0.85; }
  50%      { opacity: 0.32; }
}

@media (prefers-reduced-motion: reduce) {
  .ecl-rhero::before,
  .ecl-rhero__stars,
  .ecl-rhero__stars::after { animation: none; }
}

/* Copy, anchored to the foot of the hero and centred over the scrim. */
.ecl-rhero__grid {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 900px;
  text-align: center;
}

.ecl-rhero__copy { min-width: 0; }

.ecl-kick {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 13px;
  margin: 0 0 18px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0px;
  text-transform: uppercase;
  color: var(--rp-accent-lite);
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.55);
}

.ecl-kick span {
  width: 30px;
  height: 1px;
  background: currentColor;
  opacity: 0.5;
}

.ecl-rhero__title {
  margin: 0 auto 22px;
  max-width: 17ch;
  font-family: var(--rp-serif);
  font-weight: 500;
  font-size: clamp(38px, 6vw, 82px);
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--rp-cream);
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.45);
}

.ecl-rhero__pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

/* Facts strip along the foot, over the darkest part of the scrim. */
.ecl-rhero__facts {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
}

/* --- Eclipse motion — slow corona turn, halo breath, diamond twinkle. ----- */
@media (prefers-reduced-motion: no-preference) {
  .ecl-eclipse__rays {
    transform-box: fill-box;
    transform-origin: center;
    animation: eco-spin 120s linear infinite;
  }
  .ecl-eclipse__glow {
    transform-box: fill-box;
    transform-origin: center;
    animation: eco-breathe 7s ease-in-out infinite;
  }
  .ecl-eclipse__diamond {
    transform-box: fill-box;
    transform-origin: center;
    animation: eco-twinkle 4.5s ease-in-out infinite;
  }

  #view-report .ecl-topbar { animation: rp-fade 0.5s var(--ease) both; }
  #view-report .ecl-rhero { animation: rp-fade-up 0.6s var(--ease) both 0.05s; }
}

@keyframes eco-spin { to { transform: rotate(360deg); } }

@keyframes eco-breathe {
  0%, 100% { transform: scale(1); opacity: 0.96; }
  50%      { transform: scale(1.03); opacity: 1; }
}

@keyframes eco-twinkle {
  0%, 100% { transform: scale(1); opacity: 0.9; }
  50%      { transform: scale(1.14); opacity: 1; }
}

/* --- Hero responsive ------------------------------------------------------ */
@media (max-width: 820px) {
  .ecl-rhero {
    min-height: clamp(560px, 90vh, 780px);
    padding-top: clamp(92px, 13vh, 118px);
  }
  .ecl-scene { width: min(62vw, 260px); }
  .ecl-rhero__art { margin-bottom: clamp(24px, 4vh, 44px); }
}

/* ==========================================================================
   BIRTH FACTS — modern glassmorphism  (2026-07-23)

   Four frosted-glass tiles floating on the hero's twilight sky, replacing the
   old hairline-divided row. Appended last so it overrides the earlier airy
   facts styling. Label/value sizes stay at the project's 14/16px floors.
   ========================================================================== */
.ecl-facts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(10px, 1.1vw, 15px);
  background: none;
  border: none;
  margin-top: clamp(30px, 5vw, 46px);
}

/* The :first-child is in the selector so it beats the earlier
   `.ecl-facts__item:first-child { border-left: none }` and keeps its glass edge. */
.ecl-facts__item,
.ecl-facts__item:first-child {
  background: linear-gradient(158deg, rgba(255, 255, 255, 0.13) 0%, rgba(255, 255, 255, 0.045) 100%);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  backdrop-filter: blur(18px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, 0.17);
  border-radius: 16px;
  padding: clamp(14px, 1.4vw, 18px) clamp(15px, 1.5vw, 20px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    0 16px 36px -22px rgba(0, 0, 0, 0.62);
}

.ecl-facts__label {
  margin: 0 0 6px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0px;
  text-transform: uppercase;
  color: var(--rp-accent-lite);
}

.ecl-facts__value {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--rp-cream);
  overflow-wrap: anywhere;
}

@media (max-width: 600px) {
  .ecl-facts {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .ecl-facts__item,
  .ecl-facts__item:first-child {
    padding: 13px 15px;
  }
}

/* ==========================================================================
   REPORT BODY — light-premium widen + refresh  (2026-07-23)

   Wider reading container, more generous refined cards, an editorial hairline
   under each section header, and long-form prose held to a comfortable measure
   so the extra width helps the data (chart, chips, splits, tables) without
   stretching the reading text. Warm cream theme kept (signed off, readable).
   Appended last so it wins over the earlier report rules.
   ========================================================================== */

.ecl-rbody {
  max-width: 1040px;
  padding: clamp(34px, 5vw, 58px) clamp(16px, 4vw, 34px) 0;
}

.ecl-block {
  padding: clamp(26px, 3.4vw, 52px);
  margin-bottom: clamp(20px, 2.6vw, 34px);
  border-radius: clamp(20px, 2.4vw, 30px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 2px 6px rgba(64, 47, 40, 0.05),
    0 42px 74px -50px rgba(64, 47, 40, 0.34);
}

/* Editorial hairline under the section header. */
.ecl-block__head {
  align-items: center;
  gap: 14px;
  margin-bottom: clamp(22px, 2.6vw, 34px);
  padding-bottom: clamp(16px, 1.8vw, 24px);
  border-bottom: 1px solid var(--rp-line);
}

/* Long-form text held to a readable measure inside the now-wider cards. */
.ecl-prose,
.ecl-block__lede,
.ecl-answer__summary {
  max-width: 74ch;
}

.ecl-why p { max-width: 72ch; }

.ecl-block__sub { margin-top: clamp(28px, 3vw, 40px); }

/* A larger, more confident eclipse headline at the wider size. */
.ecl-ehead {
  font-size: clamp(28px, 3.2vw, 44px);
  margin-bottom: clamp(16px, 1.8vw, 22px);
}

/* More breathing room in the chart, and softer premium radii on the insets. */
.ecl-chart { gap: clamp(28px, 4vw, 52px); }

.ecl-energy,
.ecl-affirm,
.ecl-tablewrap {
  border-radius: clamp(14px, 1.6vw, 20px);
}

.ecl-why {
  border-radius: clamp(16px, 1.8vw, 22px);
  padding: clamp(22px, 2.6vw, 34px);
}

@media (max-width: 640px) {
  /* On phones the header hairline stays but the padding tightens. */
  .ecl-block__head {
    margin-bottom: 18px;
    padding-bottom: 14px;
  }
}

/* ==========================================================================
   FOOTER LINKS + MODALS  (About / Privacy / Terms)  (2026-07-23)
   ========================================================================== */

.ecl-rfoot__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px 24px;
  margin: 22px 0 26px;
}

.ecl-rfoot__link {
  padding: 5px 2px;
  font-family: var(--rp-sans);
  font-size: 15px;
  font-weight: 600;
  color: rgba(247, 241, 233, 0.82);
  background: none;
  border: none;
  border-bottom: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}

.ecl-rfoot__link:hover {
  color: var(--rp-cream);
  border-bottom-color: rgba(247, 241, 233, 0.5);
}

.ecl-rfoot__link:focus-visible {
  outline: 2px solid var(--rp-cream);
  outline-offset: 3px;
  border-radius: 3px;
}

.ecl-rfoot__fine {
  max-width: 620px;
  margin: 26px auto 0;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(247, 241, 233, 0.5);
}

/* --- Native <dialog> modals ----------------------------------------------- */
.ecl-modal {
  width: min(560px, 92vw);
  max-width: 92vw;
  margin: auto;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--rp-body);
  overflow: visible;
}

.ecl-modal::backdrop {
  background: rgba(16, 10, 6, 0.62);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.ecl-modal__card {
  position: relative;
  max-height: 85vh;
  overflow: auto;
  padding: clamp(28px, 4vw, 46px);
  background: var(--rp-lift);
  border: 1px solid var(--rp-line);
  border-radius: clamp(18px, 2vw, 26px);
  box-shadow: 0 40px 110px -34px rgba(0, 0, 0, 0.6);
}

.ecl-modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  font-size: 26px;
  line-height: 1;
  color: var(--rp-muted);
  background: var(--rp-panel);
  border: 1px solid var(--rp-line);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}

.ecl-modal__close:hover {
  background: var(--rp-mauve);
  color: var(--rp-ink);
}

.ecl-modal__eyebrow {
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--rp-accent);
}

.ecl-modal__title {
  margin: 0 0 16px;
  font-family: var(--rp-serif);
  font-weight: 500;
  font-size: clamp(26px, 3vw, 34px);
  color: var(--rp-ink);
}

.ecl-modal__body p {
  margin: 0 0 14px;
  font-size: 16px;
  line-height: 1.65;
  color: var(--rp-body);
}

.ecl-modal__body p:last-child { margin-bottom: 0; }

.ecl-modal__body a {
  color: var(--rp-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

@media (prefers-reduced-motion: no-preference) {
  .ecl-modal[open] { animation: ecl-modal-in 0.28s var(--ease); }
}

@keyframes ecl-modal-in {
  from { opacity: 0; transform: translateY(14px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}

/* ==========================================================================
   TOPBAR ACTIONS — account + new reading

   Appended, like every block above it, so the signed-off report is only ever
   added to. The pill itself, the wordmark and the cocoa CTA are untouched;
   this only groups the CTA with the account button and gives that button a
   ghost treatment built from tokens already in this file.
   ========================================================================== */

/* One group, so the CTA's own `margin-left: auto` (declared further up) has no
   free space left to resolve against and the PAIR is what gets pushed right.
   Without the wrapper the auto margin would open a gap between the two pills
   and shove the CTA alone to the edge. */
.ecl-topbar__actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

.ecl-topbar__ghost {
  flex: 0 0 auto;
  padding: 11px 18px;
  font-family: var(--rp-sans);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.2;
  color: var(--rp-cocoa);
  background: transparent;
  border: 1.5px solid var(--rp-line);
  border-radius: 999px;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease),
    transform 0.2s var(--ease);
}

.ecl-topbar__ghost:hover {
  background: var(--rp-panel);
  border-color: var(--rp-cocoa);
  transform: translateY(-1px);
}

.ecl-topbar__ghost:focus-visible {
  outline: 3px solid var(--rp-cocoa);
  outline-offset: 2px;
}

/* The CTA's short label. Both spans exist in the markup; the link carries an
   aria-label, so assistive tech reads the full name at either width and never
   meets the abbreviation. */
.ecl-topbar__cta-mini { display: none; }

/* Phones. Three things now share the bar, so the wordmark and both pills
   tighten together — measured against a 360px viewport, where the pill's
   usable width is ~307px. */
@media (max-width: 600px) {
  .ecl-topbar__inner {
    padding-left: 18px;
    gap: 10px;
  }

  .ecl-topbar .ecl-brand__logo { height: 20px; }

  .ecl-topbar__actions { gap: 6px; }

  .ecl-topbar__ghost {
    padding: 10px 13px;
    font-size: 14px; /* project floor */
  }

  .ecl-topbar__cta { font-size: 14px; }

  .ecl-topbar__cta-full { display: none; }
  .ecl-topbar__cta-mini { display: inline; }
}

/* Very narrow phones (≤380px covers 320px too). Measured in an iframe harness
   at 320/360/390/414 — headless Chrome clamps its own viewport to 485px, so
   these widths cannot be checked by window size alone. At 320 the pill is
   277px wide and the wordmark plus both pills wanted 281 of the 251 usable,
   which spilled them past the pill's rounded right edge. Everything below is
   that 30px, taken evenly rather than out of any one element. Font sizes are
   NOT part of it — 14px is the floor for this project. */
@media (max-width: 380px) {
  .ecl-topbar__inner {
    padding-left: 13px;
    gap: 8px;
  }

  .ecl-topbar .ecl-brand__logo { height: 18px; }

  .ecl-topbar__actions { gap: 4px; }

  .ecl-topbar__ghost { padding: 10px 10px; }

  .ecl-topbar__cta { padding: 10px 11px; }
}

/* ==========================================================================
   PLAIN ENGLISH FIRST, ASTROLOGY DETAIL AFTER

   Client: the reading has to be readable by someone who knows no astrology,
   without losing the detail for someone who does. So every block now opens
   with a plain-English card and closes with a signposted technical band, and
   the two are styled to look like what they are — the answer, and the working.

   Appended, like every block above it. Nothing existing is overridden.
   ========================================================================== */

/* --------------------------------------------------------------------------
   The plain-English lead
   -------------------------------------------------------------------------- */

.ecl-plain {
  margin: 0 0 clamp(24px, 3vw, 34px);
  padding: clamp(20px, 2.4vw, 28px) clamp(20px, 2.6vw, 30px);
  background: var(--rp-panel);
  border-radius: clamp(14px, 1.6vw, 20px);
  /* One bronze edge rather than a full border: it marks the card as the way
     in without boxing it off from the block it opens. */
  border-left: 3px solid var(--rp-accent);
}

.ecl-plain__label {
  margin: 0 0 12px;
  font-family: var(--rp-sans);
  font-size: 14px; /* project floor */
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rp-accent);
}

/* Deliberately the largest body text in the report. This is the paragraph a
   first-time reader is meant to land on, and size is the cheapest way to say
   "start here" without an instruction. */
.ecl-plain__p {
  margin: 0 0 12px;
  max-width: 68ch;
  font-family: var(--rp-sans);
  font-size: 18px;
  line-height: 1.72;
  color: var(--rp-ink);
}

.ecl-plain__p:last-child { margin-bottom: 0; }

@media (max-width: 600px) {
  .ecl-plain__p { font-size: 17px; }
}

/* --------------------------------------------------------------------------
   The technical band
   -------------------------------------------------------------------------- */

.ecl-tech {
  margin-top: clamp(30px, 3.6vw, 44px);
  padding-top: clamp(22px, 2.6vw, 30px);
  border-top: 1px solid var(--rp-line);
}

.ecl-tech__label {
  margin: 0 0 6px;
  font-family: var(--rp-sans);
  font-size: 14px; /* project floor */
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rp-muted);
}

/* Says out loud that this part is optional. Without it a reader who bounced
   off "Saros 126" would reasonably assume they had missed something. */
.ecl-tech__note {
  margin: 0 0 20px;
  max-width: 66ch;
  font-family: var(--rp-sans);
  font-size: 15px;
  line-height: 1.6;
  color: var(--rp-muted);
}

/* The first sub-heading inside the band sits right under that note, so it
   does not also need its own top margin. */
.ecl-tech > .ecl-block__sub:first-of-type { margin-top: 0; }

/* The chips lead the band now instead of the block, so they carry the gap. */
.ecl-tech .ecl-emeta { margin-bottom: 18px; }

/* ==========================================================================
   "WE NEED YOUR BIRTH DETAILS" — the empty state of the progress view

   This page used to location.replace() back to index.html whenever storage
   held no birth data. From the outside that is indistinguishable from
   "onboarding.html doesn't open": the wrong page appears and nothing says
   why. It now stays put and explains itself, per the standing rule that a
   missing input is named on the page rather than hidden.
   ========================================================================== */

/* The progress bar and its caption are meaningless here — nothing is loading.
   Hidden by a class on the view so the markup stays declarative and no inline
   display is written from JS. */
#view-progress.is-empty .ecl-progress,
#view-progress.is-empty .ecl-step {
  display: none;
}

.ecl-need {
  max-width: 540px;
  margin: 8px auto 0;
  text-align: center;
}

.ecl-need__body {
  margin: 0 0 26px;
  font-family: var(--rp-sans);
  font-size: 16px;
  line-height: 1.7;
  color: var(--rp-body);
}

/* Its own pill rather than .ecl-btn: that base rule is the old forest-green
   landing button, and this page is the warm cocoa report. Built from --rp-*
   so it matches the topbar CTA exactly. */
.ecl-need__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 34px;
  font-family: var(--rp-sans);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--rp-cream);
  background: var(--rp-cocoa);
  border-radius: 999px;
  text-decoration: none;
  transition: background 0.2s var(--ease), transform 0.2s var(--ease);
}

.ecl-need__btn:hover {
  background: #7d5142;
  transform: translateY(-1px);
}

.ecl-need__btn:focus-visible {
  outline: 3px solid var(--rp-ink);
  outline-offset: 3px;
}

.ecl-need__alt {
  margin: 18px 0 0;
  font-family: var(--rp-sans);
  font-size: 15px;
  color: var(--rp-muted);
}

.ecl-need__alt a {
  color: var(--rp-accent);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ==========================================================================
   PLAIN ENGLISH / ASTROLOGER'S DETAIL — the per-block segmented switch

   Client supplied the shape (a pill track with the active option filled) from
   another template, which drew it in dark teal. Only the SHAPE is borrowed:
   the fill is this report's own --rp-cocoa on its own --rp-panel track, so
   nothing foreign lands in the eclipse palette.
   ========================================================================== */

.ecl-tabs {
  display: inline-flex;
  gap: 4px;
  margin: 0 0 clamp(22px, 2.6vw, 30px);
  padding: 5px;
  background: var(--rp-panel);
  border: 1px solid var(--rp-line);
  border-radius: 999px;
}

.ecl-tabs__tab {
  flex: 0 0 auto;
  padding: 11px 22px;
  font-family: var(--rp-sans);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.2;
  white-space: nowrap;
  color: var(--rp-muted);
  background: transparent;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}

.ecl-tabs__tab:hover:not(.is-active) {
  color: var(--rp-ink);
  background: rgba(107, 68, 56, 0.08);
}

.ecl-tabs__tab.is-active {
  color: var(--rp-cream);
  background: var(--rp-cocoa);
}

/* The ring sits OUTSIDE the track, so it is not clipped by the pill and is
   visible whether the tab is filled or not. */
.ecl-tabs__tab:focus-visible {
  outline: 3px solid var(--rp-ink);
  outline-offset: 3px;
}

/* The panel itself is a plain container. It carries no padding or border of
   its own — every child already brings its own spacing, and a second box
   inside .ecl-block would read as a card in a card. `tabindex="0"` makes a
   scrollable panel reachable by keyboard, so kill the ring it would otherwise
   draw round the whole pane on click. */
.ecl-tabpanel:focus { outline: none; }

.ecl-tabpanel:focus-visible {
  outline: 2px solid var(--rp-accent);
  outline-offset: 6px;
  border-radius: 8px;
}

/* Phones: "Astrologer's detail" is a long label, and two nowrap pills plus
   the track padding overflow a 320px card. The switch goes full width and
   splits the row evenly instead — measured at 320/360/390. */
@media (max-width: 560px) {
  .ecl-tabs {
    display: flex;
    width: 100%;
  }

  .ecl-tabs__tab {
    /* `auto`, not `0`. Equal halves forced "Astrologer's detail" onto two
       lines at 390px while "Plain English" sat on one and the whole switch
       grew to the taller of the two. Sizing from content lets the longer
       label take the room it needs, and both still shrink (min-width: 0
       below) when there genuinely is not enough. */
    flex: 1 1 auto;
    padding: 11px 10px;
    font-size: 14px; /* project floor */

    /* Both of these are load-bearing, and leaving them off cost a 67px
       sideways scroll on the WHOLE report at 320px. A flex item's default
       `min-width: auto` floors it at its own content width, and with
       `white-space: nowrap` that floor is the full "Astrologer's detail" on
       one line — so the pair could not shrink into a 273px card, the card
       grew to fit them, and every ancestor grew with it. Letting the label
       wrap to two lines is the whole fix; the pills stay equal height
       because the row stretches them. */
    min-width: 0;
    white-space: normal;
  }
}

/* .ecl-tech was built as a band at the FOOT of a block, so it carries a top
   rule and a big top margin to separate itself from the copy above it. Inside
   a tab panel there is nothing above it — the switch already does that job —
   and the leftover rule read as a stray line under the tabs with a gap either
   side. Only the first-child case is reset; the class keeps its band spacing
   anywhere it is still used as one. */
.ecl-tabpanel > .ecl-tech:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

/* The panel must be allowed to be NARROWER than its widest child.

   Measured at 320px: with the longitude table inside a panel, the document
   grew to 372px against a 305px viewport — a 67px sideways scroll on the
   whole report. The same table sitting directly in .ecl-block__body (where it
   lived before the switch) did not do this. The panel was taking its
   max-content width, so .ecl-tablewrap's `overflow-x: auto` was handed 361px
   to lay out in and had nothing to clip.

   min-width: 0 is the fix for that whole class of bug; max-width: 100% is the
   belt to its braces, so a future wide child can only ever scroll inside its
   own wrapper and never widen the page. */
.ecl-tabpanel {
  min-width: 0;
  max-width: 100%;
}