/* ==========================================================================
   Stars&Self site.css
   Mirrors the app design system in src/constants exactly.
   Rules that hold here as they do in the app:
     no gradients, no shadows, no blur, no glow-as-filter,
     gold is line art and accents only, never body text, never a large fill.
   The Google Play badge is the one deliberate exception (Google's own colours).
   ========================================================================== */

/* --------------------------------------------------------------------------
   Fonts, self-hosted.
   These used to come from fonts.googleapis.com, which handed every visitor's
   IP address to Google before the first paint and was never named as a
   processor in privacy.html. Serving them ourselves removes the transfer and
   the render-blocking round trip to a third-party origin.
   Latin and Latin Extended subsets only. Playfair Display upright is one
   variable file covering 400 to 600; its italic and all of Lato are static.
   Both families are SIL Open Font License 1.1, see assets/fonts/OFL.txt.
   -------------------------------------------------------------------------- */

/* Lato 300, latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../fonts/lato-300-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Lato 300, latin-ext */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../fonts/lato-300-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Lato 400, latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/lato-400-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Lato 400, latin-ext */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/lato-400-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Lato 700, latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/lato-700-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Lato 700, latin-ext */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/lato-700-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Lato 300 italic, latin */
@font-face {
  font-family: 'Lato';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url('../fonts/lato-300-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Lato 300 italic, latin-ext */
@font-face {
  font-family: 'Lato';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url('../fonts/lato-300-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Playfair Display 400, latin */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/playfair-display-var-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Playfair Display 400, latin-ext */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/playfair-display-var-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Playfair Display 400 italic, latin */
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/playfair-display-400-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Playfair Display 400 italic, latin-ext */
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/playfair-display-400-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* Colors.ts */
  --linen:      #FAFAF8;
  --warm-white: #F3F1EC;
  --stone:      #DDD9D0;
  --ash:        #6B6178;
  --dusk:       #2E2845;
  --bark:       #151322;
  --night:      #1E1B30;
  --gold:       #DC8035;

  /* Derived, kept in one place so nothing invents its own alpha */
  --stone-on-dark: rgba(250, 250, 248, 0.16);
  --gold-wash:     rgba(220, 128, 53, 0.10);
  --gold-line:     rgba(220, 128, 53, 0.34);
  --gold-hair:     rgba(220, 128, 53, 0.18);
  --gold-hair-lo:  rgba(220, 128, 53, 0.12);

  /* Typography, from FontFamily.ts */
  --serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --sans:  'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Metrics */
  --hairline: 1px;
  --radius-card: 16px;
  --gutter: clamp(20px, 5vw, 40px);
  --measure: 1180px;
  --section-y: clamp(72px, 11vw, 148px);

  /* Motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* --------------------------------------------------------------- reset -- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
}

body {
  margin: 0;
  background: var(--linen);
  color: var(--bark);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

h1, h2, h3, h4, p, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }
img, svg { max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }

::selection { background: var(--gold-wash); }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 2px;
}

/* -------------------------------------------------------------- layout -- */

.wrap {
  width: 100%;
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.wrap--narrow { max-width: 780px; }

.band { padding-block: var(--section-y); }

.band--dark {
  background: var(--night);
  color: var(--linen);
}

.band--dark .lede,
.band--dark .small { color: var(--stone); }

.band--figured {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.rule {
  border: 0;
  border-top: var(--hairline) solid var(--stone);
  margin: 0;
}

.band--dark .rule { border-color: var(--stone-on-dark); }

/* Oversized line art bleeding off the side of a section, turning slowly. The
   default sits high on the right, filling the gap a narrow heading leaves
   beside it, and bleeds off that edge only. The block-start is positive, so
   the band's overflow can never crop the top of the disk. What falls below the
   heading is hidden by the cards, which are opaque linen. */
.figure-bg {
  position: absolute;
  z-index: -1;
  inset-block-start: 3%;
  inset-inline-end: -9%;
  width: min(460px, 50vw);
  opacity: 0.5;
  pointer-events: none;
}

/* The low variant drops into the bottom corner instead, where two edges meet
   and the crop reads as a bleed. Named for where it sits, not which side: both
   figures hang off the right. */
.figure-bg--low {
  inset-block-start: auto;
  inset-inline-end: -14%;
  inset-block-end: -18%;
  width: min(560px, 62vw);
}

.band--dark .figure-bg { opacity: 0.62; }

/* Once the viewport is wider than the measure, the right edge of the screen is
   a long way from the copy, and a figure pinned to it reads as unrelated. Past
   that point it stops chasing the viewport and anchors to the right edge of the
   measure instead, bleeding a fixed 88px past it, and grows a little to hold
   the larger gap. Below the breakpoint the percentage bleed is still right,
   because there the viewport edge IS the edge of the copy. */
@media (min-width: 1180px) {
  /* The low corner figures are exempt: hugging the corner is the point there. */
  .figure-bg:not(.figure-bg--low) {
    inset-inline-end: 50%;
    margin-inline-end: calc(var(--measure) / -2 - 88px);
    width: clamp(460px, 38vw, 520px);
  }
}

/* ---------------------------------------------------------------- type -- */

.eyebrow {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ash);
}

.band--dark .eyebrow { color: var(--stone); }

.eyebrow--gold {
  color: var(--gold);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.h2 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(30px, 4.2vw, 46px);
  line-height: 1.14;
  letter-spacing: -0.02em;
}

.h3 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(20px, 2.2vw, 24px);
  line-height: 1.24;
  letter-spacing: -0.015em;
}

.lede {
  font-size: clamp(16px, 1.55vw, 19px);
  line-height: 1.66;
  color: var(--ash);
  max-width: 62ch;
}

.small {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ash);
}

em { font-style: italic; }

/* -------------------------------------------------------------- glyphs -- */

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.glyph {
  width: 1em;
  height: 1em;
  display: inline-block;
  vertical-align: -0.14em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}

/* The phosphor icons from the ui sprite. Same job as .glyph, opposite
   construction: solid shapes, no stroke. */
.ui-icon {
  width: 1em;
  height: 1em;
  display: inline-block;
  vertical-align: -0.14em;
  fill: currentColor;
  stroke: none;
  flex: none;
}

/* ------------------------------------------------------------- buttons -- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 52px;
  padding-inline: 26px;
  border-radius: 999px;
  border: var(--hairline) solid var(--bark);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.01em;
  background: var(--bark);
  color: var(--linen);
  transition: background 0.22s var(--ease), color 0.22s var(--ease),
              border-color 0.22s var(--ease), transform 0.22s var(--ease);
}

.btn:hover { transform: translateY(-2px); }

.btn--ghost {
  background: transparent;
  color: var(--bark);
  border-color: var(--stone);
}

.btn--ghost:hover { border-color: var(--bark); }

/* Google Play badge: Google's own artwork, from the partner marketing hub. The
   export floats an 811x241 badge in an 880x572 artboard, so the fully
   transparent margin is trimmed off and nothing else; the artwork itself is
   byte-for-byte what Google ships. Clear space is the layout's job here: the
   guidelines want a quarter of the badge's height kept free on every side, and
   every gap that meets one of these is at least that. */
.play-badge {
  display: inline-block;
  vertical-align: middle;   /* no descender gap under the inline-block */
  transition: transform 0.24s var(--ease);
}

.play-badge:hover { transform: translateY(-2px); }

.play-badge__art {
  display: block;
  height: 52px;   /* the same height as .btn, so the pair sits on one line */
  width: auto;
}

.play-badge--sm .play-badge__art { height: 44px; }

/* -------------------------------------------------------------- header -- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--linen);
  border-bottom: var(--hairline) solid transparent;
  transition: border-color 0.3s var(--ease);
}

.site-header.is-stuck { border-bottom-color: var(--stone); }

.site-header__inner {
  display: flex;
  align-items: center;
  gap: 28px;
  height: 76px;
}

/* Gold hairline that fills as the page is read. */
.site-header__progress {
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 2px;
  width: 100%;
  background: var(--gold);
  transform: scaleX(var(--progress, 0));
  transform-origin: 0 50%;
  opacity: 0.9;
}

/* The official lockup, carried in the page sprite. The letterforms inherit
   `color`, so the same artwork works on linen and on night; the four-pointed
   mark stays gold. Height, not width, is the fixed dimension, and the lockup is
   293.56 x 44.49, so 20px of height comes out about 132px wide. */
.wordmark {
  display: inline-flex;
  color: var(--bark);
}

.wordmark__art {
  display: block;
  height: 20px;
  width: auto;
}

.band--dark .wordmark { color: var(--linen); }

@media (max-width: 520px) {
  .wordmark__art { height: 18px; }
}

/* The same mark, standing in for the eyebrow's accent dot. It inherits
   currentColor, so it takes the eyebrow's own colour wherever it is used. */
.eyebrow__spark {
  width: 9px;
  height: 9px;
  flex: none;
}

.site-nav {
  display: flex;
  gap: 26px;
  margin-left: auto;
  font-size: 14.5px;
  color: var(--ash);
}

.site-nav a {
  position: relative;
  padding-block: 4px;
  transition: color 0.2s var(--ease);
}

.site-nav a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.28s var(--ease);
}

.site-nav a:hover { color: var(--bark); }
.site-nav a:hover::after { transform: scaleX(1); }

.site-header__cta { flex: none; }

@media (max-width: 860px) {
  .site-nav { display: none; }
  .site-header__cta { margin-left: auto; }
}

/* ---------------------------------------------------------------- hero -- */

.hero {
  padding-block: clamp(44px, 8vw, 104px) clamp(56px, 8vw, 108px);
  overflow: hidden;
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr);
  gap: clamp(36px, 6vw, 84px);
  align-items: center;
}

.hero__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(38px, 6.4vw, 68px);
  line-height: 1.06;
  letter-spacing: -0.03em;
  margin-top: 22px;
}

.hero__title .line { display: block; }
.hero__title em { font-style: italic; color: var(--ash); }

.hero .lede { margin-top: 26px; }

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 34px;
}

.hero__trust {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin-top: 26px;
  font-size: 14px;
  color: var(--ash);
}

.hero__trust span { display: inline-flex; align-items: center; gap: 8px; }
.hero__trust .ui-icon { width: 16px; height: 16px; color: var(--gold); }

.hero__art {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  isolation: isolate;
}

.hero__orb {
  position: absolute;
  z-index: -1;
  width: min(680px, 128%);
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.85;
  pointer-events: none;
}

@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__orb { width: min(560px, 132%); opacity: 0.72; }
}

@media (max-width: 640px) {
  .hero__title { margin-top: 16px; }
  .hero .lede { margin-top: 20px; }
  .hero__actions { margin-top: 26px; }
  .hero__trust { margin-top: 22px; }
}

/* -------------------------------------------------------- zodiac band -- */

.zodiac-band {
  border-block: var(--hairline) solid var(--stone);
  background: var(--warm-white);
  padding-block: 22px;
  overflow: hidden;
  --marquee: 64s;
}

.zodiac-band__track {
  display: flex;
  width: max-content;
  animation: marquee var(--marquee) linear infinite;
}

.zodiac-band__run {
  display: flex;
  align-items: center;
  gap: clamp(38px, 6vw, 76px);
  padding-right: clamp(38px, 6vw, 76px);
}

.zodiac-band .glyph {
  width: 24px;
  height: 24px;
  color: var(--ash);
  opacity: 0.5;
  stroke-width: 1.2;
}

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

/* --------------------------------------------------------------- proof -- */

.proof {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 4vw, 56px);
  padding-block: clamp(56px, 8vw, 96px);
}

.proof__item .ui-icon {
  width: 26px;
  height: 26px;
  color: var(--gold);
}

.proof__title {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 21px;
  letter-spacing: -0.015em;
  margin-top: 16px;
}

.proof__body {
  margin-top: 10px;
  font-size: 15.5px;
  line-height: 1.62;
  color: var(--ash);
}

@media (max-width: 800px) {
  .proof { grid-template-columns: 1fr; gap: 34px; }
}

/* ------------------------------------------------------------ contrast -- */

.contrast {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 34px);
  margin-top: clamp(40px, 5vw, 64px);
}

.contrast__col {
  border: var(--hairline) solid var(--stone);
  border-radius: var(--radius-card);
  padding: clamp(22px, 3vw, 32px);
  background: var(--linen);
}

/* Label, quote, list. Left alone, each column sizes its own quote, so one
   list starts lower than the other and the rows stop reading as pairs.
   Subgrid gives both columns the parent's three rows instead, so the taller
   quote sets the track for both and every part lines up across the gap. The
   padding is identical on both columns, so the inset it adds to the outer
   tracks cancels out. Row gaps stay at zero: the children already carry
   their own margins. Where subgrid is missing this degrades to a plain
   three-row grid, which is the layout as it stands today. */
@media (min-width: 801px) {
  .contrast { grid-template-rows: auto auto auto; }

  .contrast__col {
    display: grid;
    grid-row: span 3;
    grid-template-rows: subgrid;
    row-gap: 0;
  }
}

.contrast__col--ours {
  border-color: var(--gold-line);
  background: var(--gold-wash);
}

.contrast__label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ash);
}

.contrast__col--ours .contrast__label { color: var(--gold); }

.contrast__quote {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(17px, 1.9vw, 21px);
  line-height: 1.5;
  margin-top: 16px;
  color: var(--dusk);
}

.contrast__col--ours .contrast__quote { color: var(--bark); }

.contrast__list {
  margin-top: 22px;
  display: grid;
  gap: 12px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ash);
}

.contrast__list li {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 10px;
}

.mark { color: var(--stone); font-size: 15px; line-height: 1.55; }
.mark--gold { color: var(--gold); font-size: 12px; }

@media (max-width: 800px) {
  .contrast { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------- feature -- */

.feature {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(36px, 6vw, 88px);
  align-items: center;
  padding-block: clamp(64px, 9vw, 120px);
  border-top: var(--hairline) solid var(--stone);
}

.feature:first-child { border-top: 0; }

.feature__copy .h2 { margin-top: 16px; max-width: 15ch; }
.feature__copy .lede { margin-top: 20px; }

.feature__list {
  margin-top: 26px;
  display: grid;
  gap: 14px;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--ash);
}

.feature__list li {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 12px;
  align-items: start;
}

.feature__list .glyph {
  width: 17px;
  height: 17px;
  color: var(--gold);
  stroke-width: 1.2;
  margin-top: 3px;
}

.feature__list .ui-icon {
  width: 17px;
  height: 17px;
  color: var(--gold);
  margin-top: 3px;
}

.feature__art { display: flex; justify-content: center; }

.feature--flip .feature__copy { order: 2; }
.feature--flip .feature__art { order: 1; }

@media (max-width: 900px) {
  .feature { grid-template-columns: 1fr; }
  .feature--flip .feature__copy,
  .feature--flip .feature__art { order: initial; }
}

/* --------------------------------------------------------------- cards -- */

.cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 32px);
  margin-top: clamp(36px, 5vw, 56px);
}

/* Dark cards, on a linen band. This is the section that looks past the daily
   read into the rest of the app, and bark sets the three of them apart from
   everything around them the way the app's own cards do. */
.card {
  border: var(--hairline) solid var(--stone-on-dark);
  border-radius: var(--radius-card);
  padding: clamp(22px, 3vw, 30px);
  background: var(--bark);
  color: var(--linen);
}

/* Each card carries a piece of the same line art the app draws, large enough
   to read as an illustration rather than an icon, centred over the copy. */
.card__art {
  width: clamp(140px, 17vw, 184px);
  color: var(--gold);
  margin: 0 auto 22px;
}

.card__title {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 21px;
  letter-spacing: -0.015em;
}

.card__body {
  margin-top: 10px;
  font-size: 15px;
  line-height: 1.62;
  color: var(--stone);
}

@media (max-width: 860px) {
  .cards { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------- steps -- */

.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(22px, 4vw, 48px);
  margin-top: clamp(26px, 5vw, 56px);
}

.step { border-top: var(--hairline) solid var(--stone); padding-top: 20px; }

.step__num {
  font-family: var(--serif);
  font-size: 15px;
  letter-spacing: 0.1em;
  color: var(--gold);
}

.step__title {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 21px;
  letter-spacing: -0.015em;
  margin-top: 12px;
}

.step__body {
  margin-top: 10px;
  font-size: 15px;
  line-height: 1.62;
  color: var(--ash);
}

@media (max-width: 800px) {
  .steps { grid-template-columns: 1fr; }
}

/* ----------------------------------------------------------------- faq -- */

.faq { margin-top: clamp(32px, 4vw, 48px); }

.faq details {
  border-top: var(--hairline) solid var(--stone);
}

.faq details:last-child { border-bottom: var(--hairline) solid var(--stone); }

.faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-block: 22px;
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(17px, 2vw, 20px);
  letter-spacing: -0.015em;
  transition: color 0.2s var(--ease);
}

.faq summary::-webkit-details-marker { display: none; }

.faq summary::after {
  content: '';
  width: 11px;
  height: 11px;
  flex: none;
  border-right: 1.5px solid var(--gold);
  border-bottom: 1.5px solid var(--gold);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.3s var(--ease);
}

.faq details[open] summary::after {
  transform: rotate(225deg) translate(-2px, -2px);
}

.faq summary:hover { color: var(--gold); }

/* grid-template-rows animates; height:auto does not. */
.faq__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.34s var(--ease);
}

.faq details[open] .faq__panel { grid-template-rows: 1fr; }

.faq__answer {
  overflow: hidden;
  min-height: 0;
  font-size: 15.5px;
  line-height: 1.68;
  color: var(--ash);
  max-width: 66ch;
}

.faq details[open] .faq__answer { padding-bottom: 24px; }

.faq__answer a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }

/* -------------------------------------------------------------- finale -- */

.finale { text-align: center; }
.finale__inner { margin-inline: auto; }
.finale .lede { margin-inline: auto; margin-top: 22px; }

.finale__art {
  width: 216px;
  margin: 0 auto 34px;
  color: var(--gold);
}

.finale__actions {
  display: flex;
  justify-content: center;
  margin-top: 34px;
}

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

.site-footer {
  border-top: var(--hairline) solid var(--stone);
  padding-block: clamp(48px, 6vw, 72px) 34px;
}

.site-footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: clamp(28px, 4vw, 56px);
}

.site-footer h4 {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ash);
  margin-bottom: 14px;
}

.footer-links { display: grid; gap: 10px; font-size: 15px; }

.footer-links a {
  color: var(--dusk);
  transition: color 0.2s var(--ease);
}

.footer-links a:hover { color: var(--gold); }

.site-footer__legal {
  margin-top: clamp(38px, 5vw, 60px);
  padding-top: 22px;
  border-top: var(--hairline) solid var(--stone);
  display: flex;
  flex-wrap: wrap;
  gap: 6px 26px;
  font-size: 12.5px;
  color: var(--ash);
}

@media (max-width: 800px) {
  .site-footer__grid { grid-template-columns: 1fr; }
  .footer-links { gap: 12px; }
  .footer-links a { padding-block: 5px; }
}

@media (max-width: 520px) {
  html { scroll-padding-top: 78px; }
  .site-header__inner { height: 66px; gap: 16px; }
  .play-badge--sm .play-badge__art { height: 40px; }
}

/* ==========================================================================
   Phone mockups
   Every measurement below is the app's own, in app px, scaled through --u.
   --u is one app point: the screen is 390pt wide in the app, so
   1 app px === (screen width / 390) on the page. That keeps the mockups
   proportionally identical to the real screens at any viewport.
   ========================================================================== */

.phone {
  --w: min(330px, 84vw);
  --bezel: 9px;
  width: var(--w);
  flex: none;
  border-radius: 44px;
  padding: var(--bezel);
  background: var(--bark);
  border: var(--hairline) solid var(--dusk);
}

.phone__screen {
  --device: 390;
  --u: calc((var(--w) - 2 * var(--bezel)) / var(--device));
  position: relative;
  aspect-ratio: 9 / 20;
  border-radius: 36px;
  overflow: hidden;
  background: var(--linen);
  display: flex;
  flex-direction: column;
  color: var(--bark);
  font-family: var(--sans);
}

/* Two screens do not fit a 390pt device: Chart carries a 342pt wheel above its
   overview card, Compatibility a heading, two profiles and a score card built
   around a 240pt illustration. Rendering them as a larger device keeps every
   component at the app's own proportions and buys back the room they need, at
   the cost of about a tenth off the type. */
.phone--fit .phone__screen { --device: 445; }

.phone__notch {
  position: absolute;
  top: calc(9 * var(--u));
  left: 50%;
  transform: translateX(-50%);
  width: calc(96 * var(--u));
  height: calc(22 * var(--u));
  border-radius: 999px;
  background: var(--bark);
  z-index: 3;
}

.screen__body {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  padding-top: calc(46 * var(--u));
  display: flex;
  flex-direction: column;
}

/* The frame is a window onto a taller page, not a box that squeezes it. Flex
   items shrink by default, so without this every card inside a screen was
   quietly compressed to fit, clipping its own contents. Let them keep their
   natural height and let the screen crop what falls past the bottom, the way
   a screenshot does. */
.screen__body > * { flex: none; }

/* The Today mockup in the feature row starts already scrolled to the card. */
.screen__body--scrolled { justify-content: center; padding-top: calc(28 * var(--u)); }

/* Chart and Compatibility are the two long screens. Trimming the top inset
   buys back enough of the frame for the card under the fold to start, so it
   reads as something you scroll rather than a cropped strip. The notch still
   clears the heading. */
.screen__body--tight { padding-top: calc(24 * var(--u)); }

/* --- TabBar.tsx ---------------------------------------------------------- */

.screen__tabbar {
  flex: none;
  display: flex;
  background: var(--linen);
  border-top: calc(0.5 * var(--u)) solid var(--stone);
  padding-top: calc(10 * var(--u));
  padding-bottom: calc(14 * var(--u));
}

.tabicon {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(4 * var(--u));
  font-size: calc(11 * var(--u));
  letter-spacing: calc(0.2 * var(--u));
  line-height: 1.2;
  color: var(--ash);
  position: relative;
}

.tabicon svg {
  width: calc(22 * var(--u));
  height: calc(22 * var(--u));
  fill: currentColor;
}

.tabicon.is-active { color: var(--bark); }

.tabicon.is-active::after {
  content: '';
  width: calc(4 * var(--u));
  height: calc(4 * var(--u));
  border-radius: 999px;
  background: var(--gold);
  margin-top: calc(3 * var(--u));
}

/* Shared inline icons (phosphor, via the ui sprite) */
.ss-icon {
  width: calc(16 * var(--u));
  height: calc(16 * var(--u));
  fill: currentColor;
  flex: none;
}

.ss-icon--caret { color: var(--ash); }

/* --- GreetingHeader.tsx -------------------------------------------------- */

/* The greeting is not part of the card: it sits above it, at the screen's own
   horizontal inset, and the card starts at the moon zone. */
.ss-greet__head {
  margin-inline: calc(24 * var(--u));
  margin-bottom: calc(20 * var(--u));
}

.ss-greet {
  margin-inline: calc(24 * var(--u));
  border: calc(0.5 * var(--u)) solid var(--stone);
  border-radius: calc(16 * var(--u));
  overflow: hidden;
}

.ss-greet__eyebrow {
  display: flex;
  justify-content: space-between;
  gap: calc(8 * var(--u));
  font-size: calc(13 * var(--u));
  letter-spacing: calc(1.3 * var(--u));
  text-transform: uppercase;
  color: var(--ash);
}

.ss-greet__name {
  font-family: var(--serif);
  font-weight: 600;
  font-size: calc(42 * var(--u));
  line-height: 1.12;
  letter-spacing: calc(-0.924 * var(--u));
  color: var(--bark);
  margin-top: calc(4 * var(--u));
}

.ss-greet__moon {
  background: var(--night);
  display: flex;
  align-items: center;
  gap: calc(16 * var(--u));
  padding: calc(16 * var(--u));
}

.ss-greet__disc {
  width: calc(46 * var(--u));
  height: calc(46 * var(--u));
  border-radius: 999px;
  background: var(--dusk);
  border: calc(0.5 * var(--u)) solid var(--ash);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  color: var(--linen);
}

.ss-greet__disc svg { width: calc(30 * var(--u)); height: calc(30 * var(--u)); }

.ss-greet__moontext { flex: 1; min-width: 0; }

.ss-greet__mood {
  display: block;
  font-size: calc(15 * var(--u));
  line-height: 1.4;
  color: var(--linen);
}

.ss-greet__cred {
  display: block;
  font-size: calc(11 * var(--u));
  line-height: 1.5;
  color: var(--stone);
  opacity: 0.8;
  margin-top: calc(3 * var(--u));
}

.ss-greet__moon .ss-icon { color: var(--ash); }

.ss-greet__readout {
  border-top: calc(0.5 * var(--u)) solid var(--stone);
  padding: calc(16 * var(--u));
  display: grid;
  gap: calc(12 * var(--u));
}

.ss-read {
  display: flex;
  align-items: center;
  gap: calc(9 * var(--u));
  font-size: calc(13 * var(--u));
  line-height: 1.35;
}

.ss-read__label {
  width: calc(62 * var(--u));
  flex: none;
  color: var(--ash);
}

.ss-read__value { color: var(--dusk); }
.ss-read__level { color: var(--dusk); }

/* DiamondMark.tsx: five marks, filled to the day's energy level */
.ss-diamonds { display: flex; gap: calc(9 * var(--u)); flex: none; }

.ss-diamonds svg {
  width: calc(9 * var(--u));
  height: calc(9 * var(--u));
  overflow: visible;
}

.ss-diamonds path {
  fill: none;
  stroke: var(--stone);
  stroke-opacity: 0.55;
  stroke-width: 0.9;
}

.ss-diamonds .is-on path {
  fill: var(--gold);
  fill-opacity: 0.88;
  stroke: var(--gold);
  stroke-opacity: 0.88;
}

/* --- PillTabs.tsx -------------------------------------------------------- */

.ss-pills {
  display: flex;
  gap: calc(8 * var(--u));
  padding: calc(16 * var(--u)) calc(24 * var(--u));
}

.ss-pill {
  display: inline-flex;
  align-items: center;
  gap: calc(6 * var(--u));
  padding: calc(7 * var(--u)) calc(16 * var(--u));
  border-radius: 999px;
  border: calc(0.5 * var(--u)) solid var(--stone);
  font-size: calc(13 * var(--u));
  letter-spacing: calc(0.26 * var(--u));
  line-height: 1.2;
  color: var(--dusk);
  white-space: nowrap;
  transition: background 0.32s var(--ease), border-color 0.32s var(--ease),
              color 0.32s var(--ease);
}

.ss-pill__dot {
  width: calc(5 * var(--u));
  height: calc(5 * var(--u));
  border-radius: 999px;
  background: var(--gold);
  flex: none;
  width: 0;
  opacity: 0;
  transition: width 0.32s var(--ease), opacity 0.32s var(--ease);
}

.ss-pill.is-active {
  background: var(--night);
  border-color: var(--night);
  color: var(--linen);
}

.ss-pill.is-active .ss-pill__dot {
  width: calc(5 * var(--u));
  opacity: 1;
}

/* --- DailyCard.tsx ------------------------------------------------------- */

.ss-daily {
  margin-inline: calc(24 * var(--u));
  border-radius: calc(16 * var(--u));
  overflow: hidden;
  background: var(--night);
}

.ss-daily__art {
  padding-top: calc(24 * var(--u));
  padding-bottom: calc(16 * var(--u));
  display: flex;
  justify-content: center;
  color: var(--gold);
}

/* The card's drawing comes from the illustration sprite, which is the app's
   own file. It does not move, and it changes with the topic. */
.ss-daily__ill { width: calc(240 * var(--u)); height: calc(240 * var(--u)); }

.ss-greet ~ .ss-daily .ss-daily__ill {
  width: calc(200 * var(--u));
  height: calc(200 * var(--u));
}

/* Crossfades with the copy under it when the topic changes. */
.ss-daily__art { transition: opacity 0.34s var(--ease); }
.ss-daily__art.is-swapping { opacity: 0; }

.ss-daily__body {
  padding: 0 calc(32 * var(--u)) calc(32 * var(--u));
  text-align: center;
  transition: opacity 0.34s var(--ease);
}

.ss-daily__body.is-swapping { opacity: 0; }

.ss-daily__eyebrow {
  font-size: calc(11 * var(--u));
  letter-spacing: calc(1.17 * var(--u));
  text-transform: uppercase;
  color: var(--stone);
  opacity: 0.82;
}

.ss-daily__hook {
  font-family: var(--serif);
  font-weight: 600;
  font-size: calc(22 * var(--u));
  line-height: 1.3;
  letter-spacing: calc(-0.22 * var(--u));
  color: var(--linen);
  margin-top: calc(8 * var(--u));
}

.ss-daily__more {
  margin-top: calc(8 * var(--u));
  font-size: calc(12 * var(--u));
  color: var(--stone);
  opacity: 0.75;
}

/* --- ScreenHeader.tsx ---------------------------------------------------- */

.ss-head {
  padding: calc(24 * var(--u)) calc(24 * var(--u)) calc(16 * var(--u));
}

.ss-head__title {
  font-family: var(--serif);
  font-weight: 600;
  font-size: calc(34 * var(--u));
  line-height: 1.1;
  letter-spacing: calc(-0.34 * var(--u));
  color: var(--bark);
}

.ss-head__sub {
  font-size: calc(15 * var(--u));
  line-height: 1.4;
  color: var(--ash);
  margin-top: calc(6 * var(--u));
}

/* --- NatalWheelSvg ------------------------------------------------------- */

.ss-wheel {
  padding-inline: calc(24 * var(--u));
  color: var(--gold);
}

.ss-wheel .wheel {
  display: block;
  width: 100%;
  height: auto;
}

/* --- ChartTabContent overview / shared dark card ------------------------- */

.ss-dark {
  position: relative;
  margin-inline: calc(24 * var(--u));
  border-radius: calc(16 * var(--u));
  overflow: hidden;
  background: var(--night);
  color: var(--linen);
}

.ss-dark__art {
  padding-top: calc(24 * var(--u));
  padding-bottom: calc(20 * var(--u));
  display: flex;
  justify-content: center;
  border-bottom: calc(0.5 * var(--u)) solid var(--gold-hair);
  color: var(--gold);
}

.ss-dark__art .art { width: calc(180 * var(--u)); }

/* Same size, but drawn from the illustration sprite: the app's own file, held
   still, the way IllustrationImage renders it. */
.ss-dark__ill { width: calc(180 * var(--u)); height: calc(180 * var(--u)); }
.ss-dark__art--tall { padding-top: calc(32 * var(--u)); padding-bottom: calc(24 * var(--u)); }
.ss-dark__art--tall .art { width: calc(240 * var(--u)); }

.ss-biglist { padding-block: calc(8 * var(--u)); }

.ss-big {
  display: flex;
  align-items: center;
  gap: calc(16 * var(--u));
  padding: calc(16 * var(--u)) calc(24 * var(--u));
}

.ss-big__glyph {
  width: calc(40 * var(--u));
  height: calc(40 * var(--u));
  border-radius: 999px;
  background: var(--dusk);
  border: calc(0.5 * var(--u)) solid rgba(221, 217, 208, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  color: var(--gold);
}

.ss-big__glyph .glyph {
  width: calc(24 * var(--u));
  height: calc(24 * var(--u));
  stroke-width: 1.2;
}

.ss-big__info { flex: 1; min-width: 0; }

.ss-big__role {
  display: block;
  font-size: calc(11 * var(--u));
  letter-spacing: calc(1.04 * var(--u));
  text-transform: uppercase;
  color: var(--stone);
  opacity: 0.82;
}

.ss-big__sign {
  display: block;
  font-family: var(--serif);
  font-weight: 600;
  font-size: calc(22 * var(--u));
  line-height: 1.2;
  letter-spacing: calc(-0.22 * var(--u));
  color: var(--linen);
  margin-top: calc(2 * var(--u));
}

.ss-big__teaser {
  display: block;
  font-size: calc(12 * var(--u));
  line-height: 1.5;
  color: var(--stone);
  margin-top: calc(3 * var(--u));
}

.ss-big__rule {
  display: block;
  height: calc(0.5 * var(--u));
  background: var(--gold-hair-lo);
  margin-inline: calc(24 * var(--u));
}

/* --- ProfileSlot.tsx ----------------------------------------------------- */

.ss-slots {
  display: flex;
  gap: calc(16 * var(--u));
  padding-inline: calc(24 * var(--u));
  padding-bottom: calc(20 * var(--u));
}

.ss-slot {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(10 * var(--u));
}

.ss-slot__initial {
  width: calc(64 * var(--u));
  height: calc(64 * var(--u));
  border-radius: 999px;
  background: var(--warm-white);
  border: calc(0.5 * var(--u)) solid var(--stone);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-weight: 600;
  font-size: calc(26 * var(--u));
  color: var(--bark);
}

.ss-slot__name { font-size: calc(15 * var(--u)); color: var(--bark); }

.ss-slot__signs {
  display: flex;
  align-self: stretch;
  background: var(--warm-white);
  border-radius: calc(16 * var(--u));
  padding: calc(8 * var(--u)) calc(6 * var(--u));
}

.ss-slot__cell {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(3 * var(--u));
}

.ss-slot__cell span {
  font-size: calc(9 * var(--u));
  letter-spacing: calc(0.9 * var(--u));
  color: var(--ash);
}

.ss-slot__cell .glyph {
  width: calc(18 * var(--u));
  height: calc(18 * var(--u));
  color: var(--gold);
  stroke-width: 1.3;
}

/* --- CompatibilityScoreCard.tsx ------------------------------------------ */

.ss-syn__share {
  position: absolute;
  top: calc(16 * var(--u));
  right: calc(16 * var(--u));
  width: calc(19 * var(--u));
  height: calc(19 * var(--u));
  fill: var(--stone);
}

.ss-syn__body { padding: calc(24 * var(--u)); }

.ss-syn__eyebrow {
  font-size: calc(11 * var(--u));
  letter-spacing: calc(1.17 * var(--u));
  text-transform: uppercase;
  color: var(--stone);
  opacity: 0.82;
}

.ss-syn__scorerow {
  display: flex;
  align-items: flex-end;
  gap: calc(3 * var(--u));
  margin-top: calc(12 * var(--u));
}

.ss-syn__score {
  font-family: var(--serif);
  font-weight: 600;
  font-size: calc(52 * var(--u));
  line-height: calc(56 * var(--u));
  letter-spacing: calc(-1.04 * var(--u));
  color: var(--linen);
  font-variant-numeric: tabular-nums;
}

.ss-syn__denom {
  font-size: calc(15 * var(--u));
  color: var(--stone);
  margin-bottom: calc(10 * var(--u));
}

.ss-syn__band {
  margin-left: auto;
  margin-bottom: calc(8 * var(--u));
  display: inline-flex;
  align-items: center;
  gap: calc(7 * var(--u));
  font-family: var(--serif);
  font-weight: 600;
  font-size: calc(22 * var(--u));
  color: var(--gold);
}

.ss-syn__band i {
  width: calc(4 * var(--u));
  height: calc(4 * var(--u));
  border-radius: 999px;
  background: var(--gold);
  flex: none;
}

.ss-syn__names {
  font-family: var(--serif);
  font-weight: 600;
  font-size: calc(22 * var(--u));
  color: var(--linen);
  margin-top: calc(12 * var(--u));
}

.ss-syn__rule {
  display: block;
  height: calc(0.5 * var(--u));
  background: rgba(221, 217, 208, 0.16);
  margin-block: calc(20 * var(--u));
}

.ss-syn__summary {
  font-family: var(--serif);
  font-style: italic;
  font-size: calc(18 * var(--u));
  line-height: 1.5;
  letter-spacing: calc(-0.18 * var(--u));
  color: var(--stone);
}

.ss-dims {
  margin: calc(20 * var(--u)) calc(24 * var(--u)) 0;
  border-radius: calc(16 * var(--u));
  background: var(--night);
  padding: calc(20 * var(--u));
  display: grid;
  gap: calc(16 * var(--u));
  color: var(--linen);
}

.ss-dim { display: grid; gap: calc(8 * var(--u)); }

.ss-dim__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: calc(12 * var(--u));
}

.ss-dim__stack { display: grid; gap: calc(2 * var(--u)); }

.ss-dim__label {
  display: inline-flex;
  align-items: center;
  gap: calc(6 * var(--u));
  font-family: var(--serif);
  font-weight: 600;
  font-size: calc(16 * var(--u));
  color: var(--linen);
}

.ss-dim__dot {
  width: calc(4 * var(--u));
  height: calc(4 * var(--u));
  border-radius: 999px;
  background: var(--gold);
  flex: none;
}

.ss-dim__desc {
  font-size: calc(12 * var(--u));
  color: var(--stone);
  opacity: 0.7;
}

.ss-dim__score {
  font-family: var(--serif);
  font-weight: 600;
  font-size: calc(16 * var(--u));
  color: var(--linen);
  white-space: nowrap;
}

.ss-dim__score small {
  font-family: var(--sans);
  font-weight: 400;
  font-size: calc(12 * var(--u));
  color: var(--stone);
}

.ss-dim__track {
  display: block;
  height: calc(4 * var(--u));
  border-radius: 999px;
  background: rgba(221, 217, 208, 0.14);
  overflow: hidden;
}

.ss-dim__fill {
  display: block;
  height: 100%;
  width: var(--w);
  background: var(--gold);
  border-radius: 999px;
  transition: width 1s var(--ease);
}

.js .ss-dim__fill { width: 0; }
.js .is-in .ss-dim__fill { width: var(--w); }

.ss-dim__sep {
  display: block;
  height: calc(0.5 * var(--u));
  background: var(--gold-hair-lo);
}

/* ==========================================================================
   Animation layer

   The app runs these with Reanimated on counter-rotating <G> groups; on the
   web the same groups carry .rot / .breathe / .glow / .twinkle and take their
   period from --dur, their phase from --delay and their pivot from --ox/--oy.
   The build script emits those custom properties, so the timings here are the
   app's own timings.
   ========================================================================== */

.art {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.art g, .art circle, .art path, .art line {
  transform-box: view-box;
}

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

.rot {
  transform-origin: var(--ox, 50%) var(--oy, 50%);
  animation: spin var(--dur, 40s) linear infinite;
  will-change: transform;
}

.rot--rev { animation-name: spin-rev; }

/* A slow inhale, matching withRepeat(withTiming(...), -1, true) in the app. */
@keyframes breathe {
  0%, 100% { transform: scale(1);    opacity: 0.72; }
  50%      { transform: scale(1.07); opacity: 1; }
}

.breathe {
  transform-origin: var(--ox, 50%) var(--oy, 50%);
  animation: breathe var(--dur, 4s) ease-in-out var(--delay, 0s) infinite;
}

/* The vesica between the two orbits, brightening and fading. */
@keyframes glow {
  0%, 100% { opacity: 0.06; }
  50%      { opacity: 0.22; }
}

.glow { animation: glow var(--dur, 4s) ease-in-out var(--delay, 0s) infinite; }

@keyframes twinkle {
  0%, 100% { opacity: 0.25; }
  50%      { opacity: 0.95; }
}

.twinkle { animation: twinkle var(--dur, 3s) ease-in-out var(--delay, 0s) infinite; }

/* --- Natal wheel draw-on ------------------------------------------------- */
/* Every stroked element is emitted with pathLength="1", so one dash covers
   the whole path no matter how long it actually is. */

.js .w-ring, .js .w-spoke, .js .w-aspect {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

.js .w-glyph, .js .w-planet, .js .w-house, .js .w-tail, .js .w-band { opacity: 0; }

.is-in .w-ring {
  animation: draw 1.5s var(--ease) forwards;
}

.is-in .w-band { animation: fade 0.8s var(--ease) 0.35s forwards; }

.is-in .w-spoke {
  animation: draw 0.9s var(--ease) 0.45s forwards;
}

.is-in .w-glyph {
  animation: fade 0.5s var(--ease) forwards;
  animation-delay: calc(0.6s + var(--i, 0) * 0.045s);
}

.is-in .w-house {
  animation: fade 0.5s var(--ease) 1s forwards;
}

.is-in .w-aspect {
  animation: draw 1.1s var(--ease) forwards;
  animation-delay: calc(1.05s + var(--i, 0) * 0.07s);
}

.is-in .w-tail { animation: fade 0.6s var(--ease) 1.5s forwards; }

.is-in .w-planet {
  animation: fade 0.55s var(--ease) forwards;
  animation-delay: calc(1.55s + var(--i, 0) * 0.09s);
}

@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes fade { to { opacity: 1; } }

/* --------------------------------------------------------- scroll reveal -- */

.js [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}

.js [data-reveal].is-in {
  opacity: 1;
  transform: none;
}

/* --------------------------------------------------------- reduced motion -- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .rot, .breathe, .glow, .twinkle, .zodiac-band__track {
    animation: none !important;
  }

  .w-ring, .w-spoke, .w-aspect { stroke-dashoffset: 0; }
  .w-glyph, .w-planet, .w-house, .w-tail, .w-band { opacity: 1; }

  .js [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .ss-dim__fill { transition: none; width: var(--w); }
  .btn:hover, .play-badge:hover { transform: none; }
  .faq__panel { transition: none; }
}

/* ------------------------------------------------------------------ doc -- */
/* Shared by privacy.html, terms.html and delete-account.html. */

.doc { padding-block: clamp(40px, 7vw, 96px); }
.doc h1 { font-family: var(--serif); font-weight: 600; font-size: clamp(30px, 4.6vw, 46px); letter-spacing: -0.02em; line-height: 1.12; }
.doc h2 { font-family: var(--serif); font-weight: 600; font-size: clamp(22px, 2.4vw, 26px); letter-spacing: -0.015em; margin-top: clamp(38px, 5vw, 44px); }
.doc h3 { font-family: var(--serif); font-weight: 600; font-size: clamp(17.5px, 2vw, 19px); margin-top: clamp(24px, 3.4vw, 28px); }
.doc p, .doc li { font-size: 16px; line-height: 1.72; color: var(--ash); }
.doc p { margin-top: 14px; }
.doc ul { margin-top: 14px; display: grid; gap: 10px; }
/* The bullet hangs in the margin rather than taking a grid column: a list item
   with a link in it would otherwise put the link in a column of its own. */
.doc ul li { position: relative; padding-left: 26px; }
.doc ul li::before {
  content: '\2726';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--gold);
  font-size: 11px;
  line-height: 2.3;
}
.doc a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }
/* A button inside a legal page is still a button: the link colour and underline
   above must not reach it. */
.doc .btn { color: var(--linen); text-decoration: none; }
.doc .btn--ghost { color: var(--bark); }
.doc .step__num { margin-top: 0; font-size: 15px; color: var(--gold); }
.doc .step__title { margin-top: 12px; font-size: clamp(19px, 2.4vw, 21px); }
.doc .step__body { margin-top: 10px; font-size: 15px; }

@media (max-width: 640px) {
  .doc .step { padding-top: 16px; }
  .doc .step__title { margin-top: 8px; }
  .doc .step__body { margin-top: 8px; }
}

.doc__meta { font-size: clamp(11.5px, 3.2vw, 13px); letter-spacing: 0.055em; text-transform: uppercase; color: var(--ash); margin-top: 18px; }

/* The header navigation is hidden below 860px, so on a phone these three pages
   had no way to reach each other except the footer, several thousand pixels
   down. They carry their own cross-links instead. */
.doc__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 24px;
}

.doc__tabs a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding-inline: 16px;
  border: var(--hairline) solid var(--stone);
  border-radius: 999px;
  font-size: 13.5px;
  line-height: 1.2;
  color: var(--ash);
  text-decoration: none;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}

.doc__tabs a:hover { color: var(--bark); border-color: var(--bark); }

.doc__tabs a[aria-current="page"] {
  color: var(--bark);
  border-color: var(--gold-line);
  background: var(--gold-wash);
}

/* Contents. Closed by default so the page still opens on its own first
   sentence, and so the list costs one line rather than a screenful on a phone.
   Every section heading already carried an id. */
.doc__toc {
  margin-top: 26px;
  border-top: var(--hairline) solid var(--stone);
  border-bottom: var(--hairline) solid var(--stone);
}

.doc__toc summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 16px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ash);
  transition: color 0.2s var(--ease);
}

.doc__toc summary::-webkit-details-marker { display: none; }

.doc__toc summary::after {
  content: '';
  width: 9px;
  height: 9px;
  flex: none;
  border-right: 1.5px solid var(--gold);
  border-bottom: 1.5px solid var(--gold);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.3s var(--ease);
}

.doc__toc[open] summary::after { transform: rotate(225deg) translate(-2px, -2px); }
.doc__toc summary:hover { color: var(--bark); }

.doc__toc ol {
  list-style: none;
  margin: 0;
  padding: 0 0 20px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 28px;
  counter-reset: toc;
}

.doc__toc li { counter-increment: toc; }

.doc__toc a {
  display: block;
  padding-block: 7px;
  font-size: 15px;
  line-height: 1.4;
  color: var(--dusk);
  text-decoration: none;
}

.doc__toc a::before {
  content: counter(toc, decimal-leading-zero);
  padding-right: 9px;
  color: var(--gold);
  font-size: 12px;
  letter-spacing: 0.08em;
}

.doc__toc a:hover { color: var(--gold); }

@media (max-width: 640px) {
  .doc__toc ol { grid-template-columns: 1fr; }
}