/* ============================================================
   Oliv — marketing site styles
   Light mode is the primary surface.
   ============================================================ */

:root {
  /* ---- Brand palette (light surface) ---- */
  --deep-teal:    #164F55;
  --sage:         #7CA45B;
  --honey:        #F7BB55;
  --aqua-mist:    #B7D6D4;
  --coral:        #FED3C8;
  --plum:         #854C7F;

  --bg:           #FAF7F2;
  --surface:      #FFFFFF;
  --surface-2:    #F1ECE3;
  --hairline:     rgba(22, 79, 85, 0.16);
  --hairline-2:   rgba(22, 79, 85, 0.08);

  --fg:           #0A2A2E;
  --fg-muted:     #696969;

  /* ---- 7 wellness domain hues (clockwise from top) ---- */
  --d-nutrition:  #7CA45B;
  --d-toxicity:   #E0A82E;
  --d-digestion:  #3A6FB0;
  --d-movement:   #1F8A8E;
  --d-metabolism: #D9762B;
  --d-rest:       #854C7F;
  --d-mood:       #C44A3A;

  /* ---- shape & elevation ---- */
  --r-card:       14px;
  --r-pill:       999px;
  --r-tile:       22px;
  --shadow-card:  0 4px 12px rgba(10, 42, 46, 0.08), 0 1px 0 rgba(255, 255, 255, 0.6) inset;
  --shadow-soft:  0 12px 36px rgba(10, 42, 46, 0.10);
  --shadow-deep:  0 30px 90px rgba(10, 42, 46, 0.14);

  --container: 1180px;
}

/* ============================================================
   Reset & base
   ============================================================ */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 17px;
  line-height: 1.55;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

/* ============================================================
   Type system
   ============================================================ */
.display, h1 {
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.02;
  font-size: clamp(2.4rem, 5.4vw, 4.4rem);
  color: var(--fg);
  margin: 0;
  text-wrap: balance;
}
h2 {
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.1;
  font-size: clamp(1.9rem, 3.6vw, 2.8rem);
  margin: 0 0 0.45em;
  text-wrap: balance;
}
h3 {
  font-weight: 600;
  letter-spacing: -0.01em;
  font-size: 1.15rem;
  margin: 0 0 0.4em;
  line-height: 1.25;
  text-wrap: balance;
}
p { margin: 0 0 1em; color: var(--fg-muted); text-wrap: pretty; }
.lead {
  font-size: 1.2rem;
  color: var(--fg);
  opacity: 0.9;
  max-width: 32em;
}
.eyebrow {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.74rem;
  color: var(--deep-teal);
  font-weight: 600;
}
.mono { font-family: "JetBrains Mono", ui-monospace, monospace; }

/* ============================================================
   Layout primitives
   ============================================================ */
.wrap { max-width: var(--container); margin: 0 auto; padding: 0 28px; }
section { padding: 120px 0; position: relative; }
.divider { height: 1px; background: var(--hairline-2); border: 0; margin: 0; }
@media (max-width: 720px) { section { padding: 80px 0; } }

/* ============================================================
   Sticky top bar
   ============================================================ */
.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(250, 247, 242, 0.82);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  border-bottom: 1px solid var(--hairline-2);
}
.topbar .row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 68px;
}
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  letter-spacing: -0.03em;
  font-size: 1.35rem;
  color: var(--deep-teal);
}
.wordmark .mark {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
}
.wordmark .mark img,
.wordmark .mark svg { width: 100%; height: 100%; object-fit: contain; }
.nav-links {
  display: flex;
  gap: 28px;
  align-items: center;
}
.nav-links a {
  color: var(--fg-muted);
  font-size: 0.95rem;
  font-weight: 500;
  transition: color 0.15s ease;
}
.nav-links a:hover { color: var(--fg); }

@media (max-width: 720px) {
  .nav-links a.nav-text { display: none; }
}

/* ============================================================
   App Store badge slot
   Renders the official Apple badge when {{APP_STORE_BADGE}} is filled in.
   Until then, an accessible placeholder pill stands in.
   ============================================================ */
.appstore-slot {
  display: inline-block;
  position: relative;
  min-height: 44px;
}
.appstore-slot img {
  display: block;
  height: 52px;
  width: auto;
  border-radius: 10px;
}
.appstore-slot.small img { height: 40px; }
/* Until {{APP_STORE_BADGE}} resolves, show this fallback pill */
.appstore-slot img::after,
.appstore-slot[data-fallback="true"] .fallback {
  display: inline-flex;
}
.appstore-fallback {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  height: 52px;
  padding: 0 22px 0 18px;
  background: #0A2A2E;
  color: #FFFFFF;
  border-radius: 10px;
  font-weight: 600;
  font-size: 1rem;
  box-shadow: 0 8px 20px rgba(10, 42, 46, 0.18), 0 1px 0 rgba(255, 255, 255, 0.12) inset;
  transition: transform 0.12s ease;
}
.appstore-fallback:hover { transform: translateY(-1px); }
.appstore-fallback .ico { width: 22px; height: 22px; flex-shrink: 0; }
.appstore-fallback .labels { line-height: 1; text-align: left; white-space: nowrap; }
.appstore-fallback .labels .small,
.appstore-fallback .labels .big { white-space: nowrap; }
.appstore-fallback .labels .small {
  display: block;
  font-size: 0.66rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.72);
  margin-bottom: 4px;
  letter-spacing: 0.01em;
}
.appstore-fallback .labels .big {
  display: block;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.appstore-fallback.small { height: 40px; padding: 0 16px 0 14px; }
.appstore-fallback.small .labels .big { font-size: 0.92rem; }
.appstore-fallback.small .labels .small { font-size: 0.58rem; margin-bottom: 3px; }
.appstore-fallback.ghost {
  background: transparent;
  color: var(--fg);
  box-shadow: inset 0 0 0 1px var(--hairline);
}
.appstore-fallback.ghost .labels .small { color: var(--fg-muted); }

/* ============================================================
   Hero
   ============================================================ */
.hero { padding-top: 80px; padding-bottom: 100px; overflow: visible; }
.hero .wrap {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 56px;
  align-items: center;
}
@media (max-width: 960px) {
  .hero .wrap { grid-template-columns: 1fr; gap: 64px; }
}

.hero-copy { position: relative; z-index: 2; }
.hero-mascot {
  width: 104px;
  height: 104px;
  margin-bottom: 20px;
  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.35));
  animation: bob 6s ease-in-out infinite alternate;
}
.hero-mascot img { width: 100%; height: 100%; object-fit: contain; }
@keyframes bob {
  0%   { transform: translateY(0)    rotate(-2deg); }
  100% { transform: translateY(-6px) rotate(2deg); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-mascot { animation: none; }
}

.hero .sub {
  color: var(--fg);
  font-size: 1.3rem;
  font-weight: 500;
  letter-spacing: -0.012em;
  line-height: 1.35;
  max-width: 26em;
  margin: 0 0 36px;
  text-wrap: balance;
}

.hero-tag {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 7px 16px 7px 8px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-pill);
  margin-bottom: 32px;
  font-size: 0.85rem;
  color: var(--fg);
}
.hero-tag .dot {
  width: 20px;
  height: 20px;
  -webkit-clip-path: polygon(50% 10%, 81.3% 25.1%, 89% 58.9%, 67.4% 86%, 32.7% 86%, 11% 58.9%, 18.7% 25.1%);
          clip-path: polygon(50% 10%, 81.3% 25.1%, 89% 58.9%, 67.4% 86%, 32.7% 86%, 11% 58.9%, 18.7% 25.1%);
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,0.55), rgba(255,255,255,0) 55%),
    conic-gradient(from -90deg,
      var(--d-nutrition)  0%,
      var(--d-toxicity)   14.28%,
      var(--d-metabolism) 28.56%,
      var(--d-mood)       42.84%,
      var(--d-rest)       57.12%,
      var(--d-digestion)  71.40%,
      var(--d-movement)   85.68%,
      var(--d-nutrition)  100%);
}
.hero h1 { margin-bottom: 24px; }
.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}
.rating-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 28px;
  color: var(--fg-muted);
  font-size: 0.92rem;
}
.rating-row .stars { color: var(--honey); letter-spacing: 2px; font-size: 0.95rem; text-shadow: 0 1px 0 rgba(154, 110, 26, 0.35); }
.rating-row .sep { width: 4px; height: 4px; border-radius: 50%; background: var(--hairline); }

/* Hero visual */
.hero-visual {
  position: relative;
  aspect-ratio: 1 / 1;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  overflow: visible;
}
/* The Oliv septagon — 7-sided wellness assessment visual.
   Smooth color spectrum clipped to a 7-sided polygon. Order clockwise
   from top: nutrition · toxicity · metabolism · mood · rest · digestion · movement. */
.septagon-shape {
  -webkit-clip-path: polygon(50% 10%, 81.3% 25.1%, 89% 58.9%, 67.4% 86%, 32.7% 86%, 11% 58.9%, 18.7% 25.1%);
          clip-path: polygon(50% 10%, 81.3% 25.1%, 89% 58.9%, 67.4% 86%, 32.7% 86%, 11% 58.9%, 18.7% 25.1%);
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,0.55), rgba(255,255,255,0) 52%),
    conic-gradient(from -90deg,
      var(--d-nutrition)  0%,
      var(--d-toxicity)   14.28%,
      var(--d-metabolism) 28.56%,
      var(--d-mood)       42.84%,
      var(--d-rest)       57.12%,
      var(--d-digestion)  71.40%,
      var(--d-movement)   85.68%,
      var(--d-nutrition)  100%);
}

.septagon {
  position: absolute;
  inset: -60%;
  filter: blur(22px) saturate(130%) brightness(1.1);
  -webkit-mask: radial-gradient(circle at 50% 50%,
    rgba(0,0,0,1)    0%,
    rgba(0,0,0,1)    20%,
    rgba(0,0,0,0.70) 34%,
    rgba(0,0,0,0.32) 50%,
    rgba(0,0,0,0.10) 64%,
    rgba(0,0,0,0)    78%);
          mask: radial-gradient(circle at 50% 50%,
    rgba(0,0,0,1)    0%,
    rgba(0,0,0,1)    20%,
    rgba(0,0,0,0.70) 34%,
    rgba(0,0,0,0.32) 50%,
    rgba(0,0,0,0.10) 64%,
    rgba(0,0,0,0)    78%);
  animation: float 18s ease-in-out infinite alternate;
  pointer-events: none;
}
.septagon-inner {
  position: absolute;
  inset: 0;
  -webkit-clip-path: polygon(50% 10%, 81.3% 25.1%, 89% 58.9%, 67.4% 86%, 32.7% 86%, 11% 58.9%, 18.7% 25.1%);
          clip-path: polygon(50% 10%, 81.3% 25.1%, 89% 58.9%, 67.4% 86%, 32.7% 86%, 11% 58.9%, 18.7% 25.1%);
  background: conic-gradient(from -90deg,
    var(--d-nutrition)  0%,
    var(--d-toxicity)   14.28%,
    var(--d-metabolism) 28.56%,
    var(--d-mood)       42.84%,
    var(--d-rest)       57.12%,
    var(--d-digestion)  71.40%,
    var(--d-movement)   85.68%,
    var(--d-nutrition)  100%);
}
.septagon.septagon-shape { /* legacy — kept for compat */ }
.septagon-glow {
  position: absolute;
  inset: -70%;
  background:
    radial-gradient(circle at 50% 50%,
      rgba(247, 187, 85, 0.16) 0%,
      rgba(58, 111, 176, 0.12) 22%,
      rgba(132, 76, 127, 0.08) 42%,
      rgba(11, 46, 50, 0)      66%);
  filter: blur(70px);
  pointer-events: none;
}
@keyframes float {
  0%   { transform: translateY(0) rotate(0deg); }
  100% { transform: translateY(-8px) rotate(2deg); }
}
@media (prefers-reduced-motion: reduce) {
  .septagon { animation: none; }
}

.domain-label {
  position: absolute;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg);
  background: rgba(250, 247, 242, 0.78);
  border: 1px solid var(--hairline);
  padding: 5px 10px;
  border-radius: var(--r-pill);
  white-space: nowrap;
  backdrop-filter: blur(6px);
}
.domain-label .sw {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: 1px;
}
.dl-1 { top: 0;       left: 50%;   transform: translateX(-50%); }
.dl-2 { top: 16%;     right: -4%; }
.dl-3 { bottom: 24%;  right: -8%; }
.dl-4 { bottom: -2%;  right: 26%; }
.dl-5 { bottom: -2%;  left: 26%; }
.dl-6 { bottom: 24%;  left: -8%; }
.dl-7 { top: 16%;     left: -4%; }
@media (max-width: 540px) { .domain-label { display: none; } }

.phone-wrap {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}
.phone-wrap .phone { transform: rotate(-3deg); }

/* ============================================================
   Phone mockups (designed in CSS — placeholder slots for screenshots)
   ============================================================ */
.phone {
  position: relative;
  width: 246px;
  aspect-ratio: 9 / 19.5;
  background: #06181a;
  border-radius: 38px;
  padding: 9px;
  box-shadow:
    0 0 0 1.5px #1f4548 inset,
    var(--shadow-deep);
  flex-shrink: 0;
}
.phone .screen {
  width: 100%;
  height: 100%;
  background: #103E43;
  border-radius: 30px;
  overflow: hidden;
  position: relative;
  color: #FFFFFF;
  /* Scoped overrides so the dark app mockup keeps its own dark tokens
     while the rest of the page renders in light mode. */
  --fg: #FFFFFF;
  --fg-muted: #8FB3B0;
  --surface: #103E43;
  --surface-2: #164F55;
  --hairline: rgba(183, 214, 212, 0.16);
  --hairline-2: rgba(183, 214, 212, 0.08);
}

/* When the phone shows a real screenshot, the image fills the screen
   and the screenshot's own status bar / dynamic island are used. */
.phone-shot .screen .shot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}
.phone .notch {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: 88px;
  height: 24px;
  background: #06181a;
  border-radius: 999px;
  z-index: 4;
}
.phone .statusbar {
  position: absolute;
  inset: 0 0 auto 0;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 22px;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--fg);
  z-index: 3;
}
.phone .statusbar .icons {
  display: inline-flex;
  gap: 5px;
  align-items: center;
}
.phone .statusbar .icons span {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--fg);
}
.phone .statusbar .icons .bat {
  width: 18px;
  height: 9px;
  border-radius: 2px;
  background: var(--fg);
  margin-left: 3px;
}

/* Each screen contents */
.screen-body {
  position: absolute;
  inset: 50px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.screen-body .top-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
.screen-body h4 {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.18;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--fg);
}

/* Phone screen — wellness assessment with septagon centerpiece */
.scr-septagon {
  width: 168px;
  height: 168px;
  margin: 8px auto 6px;
  position: relative;
  -webkit-clip-path: polygon(50% 10%, 81.3% 25.1%, 89% 58.9%, 67.4% 86%, 32.7% 86%, 11% 58.9%, 18.7% 25.1%);
          clip-path: polygon(50% 10%, 81.3% 25.1%, 89% 58.9%, 67.4% 86%, 32.7% 86%, 11% 58.9%, 18.7% 25.1%);
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0) 52%),
    conic-gradient(from -90deg,
      var(--d-nutrition)  0%,
      var(--d-toxicity)   14.28%,
      var(--d-metabolism) 28.56%,
      var(--d-mood)       42.84%,
      var(--d-rest)       57.12%,
      var(--d-digestion)  71.40%,
      var(--d-movement)   85.68%,
      var(--d-nutrition)  100%);
  filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.45));
}
.scr-septagon .score {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
}
.scr-septagon .score b {
  font-family: "JetBrains Mono", monospace;
  font-weight: 700;
  font-size: 1.95rem;
  letter-spacing: -0.02em;
  color: #0A2A2E;
  text-shadow: 0 1px 0 rgba(255,255,255,0.45);
}
.scr-septagon .score em {
  font-family: "JetBrains Mono", monospace;
  font-style: normal;
  font-size: 0.5rem;
  letter-spacing: 0.22em;
  color: #164F55;
  font-weight: 600;
}
.legend {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px 12px;
  font-size: 0.62rem;
  margin-top: auto;
}
.legend .item {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--fg);
}
.legend .sw {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.legend .v {
  margin-left: auto;
  font-family: "JetBrains Mono", monospace;
  font-weight: 600;
  color: var(--fg-muted);
}

/* Screen 2: recommended-oil carousel */
.scr-carousel { gap: 8px; }
.oil-card {
  background: var(--surface-2);
  border-radius: 16px;
  padding: 12px;
  border: 1px solid var(--hairline);
  position: relative;
  overflow: hidden;
}
.oil-card .oil-vis {
  height: 78px;
  border-radius: 12px;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,0.18), transparent 60%),
    linear-gradient(135deg, var(--d-toxicity), var(--d-metabolism));
  position: relative;
  margin-bottom: 10px;
}
.oil-card .oil-vis::after {
  content: "";
  position: absolute;
  inset: 22% 38%;
  border-radius: 6px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.85) 0 16%, rgba(255,255,255,0) 16%),
    linear-gradient(180deg, #d9762b, #8c4715);
  box-shadow: 0 8px 16px rgba(0,0,0,0.35);
}
.oil-card h5 {
  margin: 0 0 4px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.oil-card .pills {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.pill {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.52rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  color: var(--fg);
  border: 1px solid var(--hairline);
}
.pill.dot::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  margin-right: 5px;
  vertical-align: 1px;
  background: currentColor;
}
.oil-meta {
  display: flex;
  justify-content: space-between;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.58rem;
  color: var(--fg-muted);
  margin-top: 6px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: auto;
  padding-top: 8px;
}
.dots span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--hairline);
}
.dots span.on { background: var(--fg); width: 14px; border-radius: 999px; }

/* Screen 3: face scan result */
.face-frame {
  margin: 6px auto 8px;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 38%, #e7c8ad 0 32%, #c89a76 33% 60%, transparent 61%),
    radial-gradient(circle at 50% 70%, #b07a55 0 40%, transparent 41%),
    linear-gradient(135deg, rgba(255,255,255,0.05), rgba(0,0,0,0.2));
  border: 2px solid var(--hairline);
  position: relative;
  overflow: hidden;
}
.face-frame::before {
  /* scan line */
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: 40%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--honey), transparent);
  box-shadow: 0 0 12px var(--honey);
}
.face-frame::after {
  /* corner brackets */
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  border: 1px dashed rgba(255,255,255,0.35);
}
.state-row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 3px;
}
.state-row .s {
  height: 5px;
  border-radius: 999px;
}
.state-row .s:nth-child(1) { background: var(--d-mood);       opacity: 0.55; }
.state-row .s:nth-child(2) { background: var(--d-metabolism); opacity: 0.40; }
.state-row .s:nth-child(3) { background: var(--d-nutrition);  opacity: 0.85; }
.state-row .s:nth-child(4) { background: var(--d-movement);   opacity: 1; }
.state-row .s:nth-child(5) { background: var(--d-digestion);  opacity: 0.70; }
.state-row .s:nth-child(6) { background: var(--d-rest);       opacity: 0.45; }
.state-list {
  font-size: 0.62rem;
  color: var(--fg);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.state-list .row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.state-list .row .name { flex: 1; }
.state-list .row .v {
  font-family: "JetBrains Mono", monospace;
  font-weight: 600;
  color: var(--fg-muted);
}
.scan-status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg);
  margin-top: 2px;
}
.scan-status .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--sage);
  box-shadow: 0 0 8px rgba(157, 196, 128, 0.7);
  animation: scan-pulse 2.4s ease-in-out infinite;
}
@keyframes scan-pulse {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%      { opacity: 0.55; transform: scale(0.85); }
}
.scan-note {
  text-align: center;
  font-size: 0.7rem;
  color: var(--fg-muted);
  margin: 4px 0 0;
  line-height: 1.4;
}
.disclaimer-mini {
  font-size: 0.52rem;
  color: var(--fg-muted);
  font-style: italic;
  text-align: center;
  margin-top: auto;
  line-height: 1.4;
}

/* Screen 4: Daily Wellness Drops */
.scr-drops { background: linear-gradient(180deg, rgba(157, 196, 128, 0.08), transparent 50%); }
.drop-card {
  background:
    linear-gradient(135deg, rgba(247, 187, 85, 0.12), rgba(157, 196, 128, 0.08));
  border-radius: 14px;
  padding: 12px;
  border: 1px solid var(--hairline);
}
.drop-card .day {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.55rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--honey);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.drop-card .day::before {
  content: "";
  width: 9px; height: 12px;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  background: var(--honey);
  box-shadow: 0 0 8px rgba(247, 187, 85, 0.5);
}
.drop-card h5 {
  margin: 0 0 4px;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.drop-card p {
  margin: 0;
  font-size: 0.66rem;
  color: var(--fg-muted);
  line-height: 1.4;
}
.streak {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
  background: rgba(255,255,255,0.04);
  border-radius: 12px;
  border: 1px solid var(--hairline-2);
}
.streak .num {
  font-family: "JetBrains Mono", monospace;
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--honey);
}
.streak .lbl {
  font-size: 0.6rem;
  color: var(--fg-muted);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.streak-dots {
  display: flex;
  gap: 3px;
}
.streak-dots span {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--honey);
  opacity: 0.4;
}
.streak-dots span:nth-child(-n+5) { opacity: 1; }

/* Screen 5: Catalogue grid */
.cat-tabs {
  display: flex;
  gap: 4px;
  background: rgba(0,0,0,0.2);
  padding: 3px;
  border-radius: 999px;
  font-size: 0.6rem;
  font-weight: 600;
}
.cat-tabs span {
  flex: 1;
  text-align: center;
  padding: 5px 0;
  border-radius: 999px;
  color: var(--fg-muted);
}
.cat-tabs span.on {
  background: var(--fg);
  color: #0A2A2E;
}
.cat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}
.cat-grid .item {
  background: var(--surface-2);
  border-radius: 11px;
  padding: 8px;
  border: 1px solid var(--hairline-2);
}
.cat-grid .vis {
  height: 46px;
  border-radius: 8px;
  margin-bottom: 6px;
}
.cat-grid .item:nth-child(1) .vis { background: linear-gradient(135deg, var(--d-nutrition), #4d6d36); }
.cat-grid .item:nth-child(2) .vis { background: linear-gradient(135deg, var(--d-rest), #5a2f55); }
.cat-grid .item:nth-child(3) .vis { background: linear-gradient(135deg, var(--d-digestion), #1f4373); }
.cat-grid .item:nth-child(4) .vis { background: linear-gradient(135deg, var(--d-toxicity), #97720f); }
.cat-grid .item:nth-child(5) .vis { background: linear-gradient(135deg, var(--d-movement), #114e51); }
.cat-grid .item:nth-child(6) .vis { background: linear-gradient(135deg, var(--coral), #b56e5e); }
.cat-grid .name {
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  margin-bottom: 1px;
}
.cat-grid .meta {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.52rem;
  color: var(--fg-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ============================================================
   Gallery section
   ============================================================ */
.gallery-section { padding-top: 60px; }
.section-head {
  text-align: center;
  margin-bottom: 56px;
}
.section-head .eyebrow { display: block; margin-bottom: 16px; }
.section-head h2 { max-width: 22ch; margin: 0 auto; }
.section-head p { max-width: 38em; margin: 16px auto 0; font-size: 1.05rem; }

.gallery {
  display: flex;
  gap: 24px;
  justify-content: center;
  align-items: flex-start;
  padding: 60px 0 30px;
}
.phone-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 220px;
  margin: 0;
  flex-shrink: 0;
}
.phone-card .phone { width: 220px; }
.gallery .phone-card:nth-child(1) .phone { transform: translateY(28px) rotate(-7deg); }
.gallery .phone-card:nth-child(2) .phone { transform: translateY(8px)  rotate(-3deg); }
.gallery .phone-card:nth-child(3) .phone { transform: translateY(-12px); }
.gallery .phone-card:nth-child(3)        { z-index: 3; }
.gallery .phone-card:nth-child(4) .phone { transform: translateY(8px)  rotate(3deg); }
.gallery .phone-card:nth-child(5) .phone { transform: translateY(28px) rotate(7deg); }

/* Captions sit below each phone in the same column — pad to clear the
   tallest translateY so all 5 captions land on the same baseline. */
.gallery-caption {
  width: 220px;
  text-align: center;
  font-size: 0.85rem;
  color: var(--fg-muted);
  margin-top: 80px;
}
.gallery-caption b {
  display: block;
  color: var(--fg);
  font-weight: 600;
  margin-bottom: 4px;
  font-size: 0.92rem;
  letter-spacing: -0.01em;
}
@media (max-width: 960px) {
  .gallery {
    overflow-x: auto;
    overflow-y: hidden;
    justify-content: flex-start;
    padding: 40px 28px;
    scroll-snap-type: x mandatory;
    margin: 0 -28px;
  }
  .phone-card { scroll-snap-align: center; }
  .gallery .phone-card .phone { transform: none !important; }
  .gallery-caption { margin-top: 24px; }
}

/* ============================================================
   How it works
   ============================================================ */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 12px;
}
@media (max-width: 800px) {
  .steps { grid-template-columns: 1fr; gap: 20px; }
}
.step {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-tile);
  padding: 32px 28px;
  position: relative;
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.step:hover { transform: translateY(-2px); border-color: var(--aqua-mist); }
.step .num {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  color: var(--fg-muted);
  margin-bottom: 24px;
}
.step .ico {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  margin-bottom: 20px;
  position: relative;
}
.step .ico svg { width: 28px; height: 28px; }
.step:nth-child(1) .ico { background: rgba(124, 164, 91, 0.16); color: var(--d-nutrition); }
.step:nth-child(2) .ico { background: rgba(247, 187, 85, 0.16); color: var(--honey); }
.step:nth-child(3) .ico { background: rgba(58, 111, 176, 0.20); color: var(--d-digestion); }
.step h3 { margin-bottom: 8px; font-size: 1.25rem; }
.step p { margin: 0; font-size: 0.98rem; }

/* ============================================================
   Seven wellness domains — mini septagons with the relevant
   slice lit in its color, rest dimmed. No icons.
   ============================================================ */
.domains-wrap {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 16px;
  margin-top: 56px;
}
@media (max-width: 980px) {
  .domains-wrap { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 600px) {
  .domains-wrap { grid-template-columns: repeat(2, 1fr); }
}
.domain {
  text-align: center;
  padding: 20px 6px;
}
.domain .slice {
  width: 88px;
  height: 88px;
  margin: 0 auto 22px;
  position: relative;
  -webkit-clip-path: polygon(50% 10%, 81.3% 25.1%, 89% 58.9%, 67.4% 86%, 32.7% 86%, 11% 58.9%, 18.7% 25.1%);
          clip-path: polygon(50% 10%, 81.3% 25.1%, 89% 58.9%, 67.4% 86%, 32.7% 86%, 11% 58.9%, 18.7% 25.1%);
  background: var(--surface-2);
  transition: transform 0.25s ease;
}
.domain:hover .slice { transform: translateY(-3px) scale(1.04); }

/* The lit slice — one of the 7 segments coloured, rest are muted teal */
.domain.d-nutrition  .slice { background: conic-gradient(from -90deg, var(--d-nutrition)  0  14.28%,  var(--surface-2) 14.28% 100%); }
.domain.d-toxicity   .slice { background: conic-gradient(from -90deg, var(--surface-2) 0  14.28%, var(--d-toxicity)   14.28% 28.56%, var(--surface-2) 28.56% 100%); }
.domain.d-metabolism .slice { background: conic-gradient(from -90deg, var(--surface-2) 0  28.56%, var(--d-metabolism) 28.56% 42.84%, var(--surface-2) 42.84% 100%); }
.domain.d-mood       .slice { background: conic-gradient(from -90deg, var(--surface-2) 0  42.84%, var(--d-mood)       42.84% 57.12%, var(--surface-2) 57.12% 100%); }
.domain.d-rest       .slice { background: conic-gradient(from -90deg, var(--surface-2) 0  57.12%, var(--d-rest)       57.12% 71.40%, var(--surface-2) 71.40% 100%); }
.domain.d-digestion  .slice { background: conic-gradient(from -90deg, var(--surface-2) 0  71.40%, var(--d-digestion)  71.40% 85.68%, var(--surface-2) 85.68% 100%); }
.domain.d-movement   .slice { background: conic-gradient(from -90deg, var(--surface-2) 0  85.68%, var(--d-movement)   85.68% 100%); }

/* Subtle inner darkening + soft outer glow keyed to the lit slice */
.domain .slice::after {
  content: "";
  position: absolute;
  inset: 0;
  -webkit-clip-path: inherit;
          clip-path: inherit;
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0) 55%);
  pointer-events: none;
}

.domain h3 {
  font-size: 1rem;
  margin: 0 0 6px;
  letter-spacing: -0.005em;
  color: var(--fg);
}

.domain p {
  font-size: 0.82rem;
  margin: 0;
  line-height: 1.4;
  color: var(--fg-muted);
}

/* ============================================================
   Features tiles ("What's inside")
   ============================================================ */
.features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 12px;
}
@media (max-width: 720px) { .features { grid-template-columns: 1fr; } }
.feature {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-tile);
  padding: 36px 32px;
  display: flex;
  gap: 22px;
  align-items: flex-start;
  transition: transform 0.18s ease, border-color 0.18s ease;
}
.feature:hover { transform: translateY(-2px); border-color: var(--aqua-mist); }
.feature .ico {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.feature .ico svg { width: 26px; height: 26px; }
.feature:nth-child(1) .ico { background: rgba(160, 103, 160, 0.18); color: var(--plum); }
.feature:nth-child(2) .ico { background: rgba(254, 211, 200, 0.16); color: var(--coral); }
.feature:nth-child(3) .ico { background: rgba(247, 187, 85, 0.16); color: var(--honey); }
.feature:nth-child(4) .ico { background: rgba(157, 196, 128, 0.16); color: var(--sage); }
.feature h3 { font-size: 1.18rem; margin-bottom: 6px; }
.feature p { margin: 0; font-size: 0.98rem; }
.feature em { font-style: normal; color: var(--fg); font-weight: 600; }

/* ============================================================
   FAQ
   ============================================================ */
.faq-list {
  max-width: 760px;
  margin: 12px auto 0;
  border-top: 1px solid var(--hairline-2);
}
.faq {
  border-bottom: 1px solid var(--hairline-2);
}
.faq summary {
  list-style: none;
  cursor: pointer;
  padding: 26px 0;
  display: flex;
  align-items: center;
  gap: 16px;
  font-weight: 600;
  font-size: 1.1rem;
  letter-spacing: -0.01em;
  color: var(--fg);
  transition: color 0.15s ease;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  width: 14px;
  height: 14px;
  margin-left: auto;
  flex-shrink: 0;
  background: currentColor;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M6 9l6 6 6-6" stroke="currentColor" stroke-width="2.4" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>') center/contain no-repeat;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M6 9l6 6 6-6" stroke="currentColor" stroke-width="2.4" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>') center/contain no-repeat;
  transition: transform 0.2s ease;
  color: var(--fg-muted);
}
.faq[open] summary { color: var(--deep-teal); }
.faq[open] summary::after { transform: rotate(180deg); color: var(--deep-teal); }
.faq summary:hover { color: var(--deep-teal); }
.faq .ans {
  padding: 0 0 26px;
  color: var(--fg-muted);
  font-size: 1rem;
  max-width: 60ch;
}
.faq .ans p { margin: 0; }

/* ============================================================
   Trust strip
   ============================================================ */
.trust {
  display: flex;
  justify-content: center;
  gap: 56px;
  flex-wrap: wrap;
  padding: 56px 0;
  border-top: 1px solid var(--hairline-2);
  border-bottom: 1px solid var(--hairline-2);
}
.trust .item {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-weight: 600;
  font-size: 1rem;
  color: var(--fg);
  letter-spacing: -0.005em;
}
.trust .ico {
  width: 28px;
  height: 28px;
  color: var(--sage);
}

/* ============================================================
   Final CTA
   ============================================================ */
.final-cta {
  background:
    radial-gradient(circle at 30% 0%, rgba(58, 111, 176, 0.2), transparent 55%),
    radial-gradient(circle at 80% 100%, rgba(247, 187, 85, 0.16), transparent 55%);
  padding: 120px 28px;
  text-align: center;
  border-radius: var(--r-tile);
  margin: 80px 28px;
  border: 1px solid var(--hairline);
}
.final-cta .eyebrow { display: block; margin-bottom: 20px; }
.final-cta h2 {
  max-width: 18ch;
  margin: 0 auto 16px;
  font-size: clamp(2.2rem, 4.4vw, 3.6rem);
}
.final-cta p { max-width: 32em; margin: 0 auto 36px; font-size: 1.1rem; }
.final-cta .mascot-strip {
  display: grid;
  place-items: center;
  margin: 0 auto 28px;
  width: 96px;
  height: 96px;
}
.final-cta .mascot-strip svg,
.final-cta .mascot-strip img { width: 100%; height: 100%; }
@media (max-width: 720px) {
  .final-cta { margin: 40px 16px; padding: 80px 24px; }
}

/* ============================================================
   Disclaimer
   ============================================================ */
.disclaimer {
  max-width: 860px;
  margin: 0 auto;
  padding: 40px 28px 56px;
  border-top: 1px solid var(--hairline-2);
}
.disclaimer .label {
  font-family: "JetBrains Mono", monospace;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 0.72rem;
  color: var(--deep-teal);
  margin-bottom: 14px;
  font-weight: 700;
}
.disclaimer p {
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--fg-muted);
  margin: 0;
}
.disclaimer p strong { color: var(--fg); font-weight: 700; }

/* ============================================================
   Dark-mode swatch row (preview of the alternate surface)
   ============================================================ */
.swatch-row {
  background: #0B2E32;
  color: #FFFFFF;
  padding: 40px 28px;
}
.swatch-row .wrap {
  display: flex;
  gap: 40px;
  align-items: center;
  flex-wrap: wrap;
}
.swatch-row .copy {
  flex: 1 1 240px;
  min-width: 240px;
}
.swatch-row .copy .eyebrow {
  color: #B7D6D4;
  opacity: 1;
}
.swatch-row .copy h3 {
  margin: 8px 0 0;
  font-size: 1.15rem;
  color: #FFFFFF;
}
.swatch-row .swatches {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  flex: 2 1 480px;
}
.swatch {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px 8px 8px;
  background: #103E43;
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}
.swatch .chip {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.swatch .name {
  font-size: 0.78rem;
  font-weight: 600;
  color: #FFFFFF;
}
.swatch .hex {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.68rem;
  color: #8FB3B0;
  margin-left: 4px;
}

/* ============================================================
   Footer
   ============================================================ */
footer.site {
  background: var(--deep-teal);
  padding: 80px 0 36px;
  border-top: 1px solid var(--hairline-2);
  /* footer is dark on light page — re-scope tokens */
  --fg: #FFFFFF;
  --fg-muted: #B7D6D4;
  --hairline-2: rgba(183, 214, 212, 0.18);
  color: var(--fg);
}
footer.site .cols {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 56px;
}
@media (max-width: 800px) {
  footer.site .cols { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  footer.site .cols { grid-template-columns: 1fr; }
}
footer.site h4 {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--aqua-mist);
  font-weight: 600;
  margin: 0 0 18px;
}
footer.site ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
footer.site ul a {
  color: var(--fg-muted);
  font-size: 0.95rem;
  transition: color 0.15s ease;
}
footer.site ul a:hover { color: var(--fg); }
footer.site .brand-col p {
  font-size: 0.92rem;
  margin: 0 0 20px;
  max-width: 28em;
}
footer.site .brand-col .brand-tagline {
  font-size: 1.05rem;
  font-weight: 700;
  color: #FFFFFF;
  letter-spacing: -0.01em;
  margin: 0 0 22px;
}
footer.site .brand-col .wordmark { margin-bottom: 14px; }
footer.site .company {
  font-size: 0.86rem;
  color: var(--fg-muted);
  line-height: 1.6;
}
footer.site .company b { color: var(--fg); font-weight: 600; }
footer.site .legal-row {
  border-top: 1px solid var(--hairline-2);
  padding-top: 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 18px 36px;
  align-items: center;
  font-size: 0.82rem;
  color: var(--fg-muted);
}
footer.site .legal-row .badge-mini {
  margin-left: auto;
  display: inline-flex;
}
@media (max-width: 600px) {
  footer.site .legal-row .badge-mini { margin-left: 0; }
}

/* ============================================================
   Focus + selection
   ============================================================ */
:focus-visible {
  outline: 2px solid var(--honey);
  outline-offset: 3px;
  border-radius: 4px;
}
::selection { background: var(--honey); color: #0A2A2E; }

/* ============================================================
   Trademark mark — small superscript next to "Oliv"
   ============================================================ */
.tm {
  font-size: 0.45em;
  vertical-align: super;
  letter-spacing: 0;
  font-weight: 600;
  margin-left: 1px;
  opacity: 0.7;
}

/* ============================================================
   Hero umbrella scene
   Adapted from the standalone "Oliv twirling umbrella" prototype.
   The 2.3 MB rasterised septagon PNG is replaced with a CSS
   conic-gradient clipped to the heptagon polygon — same gradient
   the rest of the site uses for .septagon-inner / .scr-septagon.
   ============================================================ */
.umbrella-scene {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: end center;
  padding-bottom: 4%;
  perspective: 1400px;
  pointer-events: none;
  user-select: none;
}

.umbrella-scene .oliv {
  position: relative;
  width: 36%;
  max-width: 200px;
  z-index: 4;
  transform-origin: 50% 92%;
  animation: oliv-sway 3.6s ease-in-out infinite;
  filter: drop-shadow(0 18px 14px rgba(40, 60, 40, 0.18));
}
.umbrella-scene .oliv img {
  width: 100%;
  display: block;
  -webkit-user-drag: none;
}
@keyframes oliv-sway {
  0%, 100% { transform: rotate(-2.4deg) translateY(0); }
  50%      { transform: rotate( 2.4deg) translateY(-3px); }
}

.umbrella-scene .umbrella {
  position: absolute;
  left: 64%;
  bottom: 18%;
  width: 0;
  height: 0;
  transform-style: preserve-3d;
  animation: umbrella-wobble 3.6s ease-in-out infinite;
  z-index: 3;
}
@keyframes umbrella-wobble {
  0%, 100% { transform: translateY(0)    rotate( 1.6deg); }
  50%      { transform: translateY(-6px) rotate(-1.6deg); }
}

.umbrella-scene .shaft {
  position: absolute;
  left: -3px;
  bottom: 0;
  width: 6px;
  height: 100px;
  background: linear-gradient(90deg, #2a2b2a 0%, #4a4c49 45%, #2a2b2a 100%);
  border-radius: 3px;
}

.umbrella-scene .canopy-anchor {
  position: absolute;
  left: 0;
  bottom: 184px;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  transform-style: preserve-3d;
}

.umbrella-scene .canopy {
  position: absolute;
  left: 0;
  top: 0;
  width: 260px;
  height: 260px;
  margin-left: -130px;
  margin-top: -130px;
  transform: rotateX(26deg);
  transform-style: preserve-3d;
  filter: drop-shadow(0 16px 18px rgba(40, 40, 60, 0.22));
}

.umbrella-scene .spinner {
  position: relative;
  width: 100%;
  height: 100%;
  animation: spin 2.6s linear infinite;
  transform-origin: 50% 50%;
  clip-path: polygon(50% 10%, 81.27% 25.06%, 88.99% 58.9%, 67.36% 86.04%, 32.64% 86.04%, 11% 58.9%, 18.73% 25.06%);
}
@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.umbrella-scene .canopy-gradient {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0) 52%),
    conic-gradient(from -90deg,
      var(--d-nutrition)  0%,
      var(--d-toxicity)   14.28%,
      var(--d-metabolism) 28.56%,
      var(--d-mood)       42.84%,
      var(--d-rest)       57.12%,
      var(--d-digestion)  71.40%,
      var(--d-movement)   85.68%,
      var(--d-nutrition)  100%);
}

.umbrella-scene .ribs {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}
.umbrella-scene .ribs line {
  stroke: rgba(20, 25, 35, 0.22);
  stroke-width: 0.45;
  stroke-linecap: round;
}

.umbrella-scene .dome-shade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 38%,
      rgba(255,255,255,0.30) 0%,
      rgba(255,255,255,0.08) 22%,
      rgba(255,255,255,0.00) 42%,
      rgba(20,30,55,0.00)   58%,
      rgba(20,30,55,0.18)   82%,
      rgba(15,20,40,0.28)   100%);
  mix-blend-mode: multiply;
}

.umbrella-scene .dome-glint {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 40% 22% at 48% 32%,
      rgba(255,255,255,0.32) 0%,
      rgba(255,255,255,0)    65%);
}

.umbrella-scene .finial {
  position: absolute;
  left: -4px;
  bottom: 184px;
  width: 8px;
  height: 22px;
  background: #2a2b2a;
  border-radius: 4px 4px 2px 2px;
  box-shadow: inset -1px 0 0 rgba(255,255,255,0.18);
  z-index: 4;
}
.umbrella-scene .finial::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -5px;
  width: 12px;
  height: 12px;
  margin-left: -6px;
  border-radius: 50%;
  background: #2a2b2a;
}

.umbrella-scene .oliv-shadow {
  position: absolute;
  left: 50%;
  bottom: 3%;
  width: 34%;
  height: 24px;
  max-width: 180px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse,
    rgba(86, 116, 64, 0.55) 0%,
    rgba(124, 164, 91, 0.32) 35%,
    rgba(124, 164, 91, 0) 75%);
  filter: blur(1px);
  z-index: 1;
  transform-origin: 50% 50%;
  animation: shadow-dance 3.6s ease-in-out infinite;
}
@keyframes shadow-dance {
  0%, 100% { transform: translateX(-50%) translateX( 2px) scale(1.04, 0.96); opacity: 0.85; }
  50%      { transform: translateX(-50%) translateX(-2px) scale(0.96, 1.04); opacity: 0.95; }
}

.umbrella-scene .sparkles {
  position: absolute;
  left: 50%;
  bottom: 50%;
  width: 520px;
  height: 520px;
  margin-left: -260px;
  margin-bottom: -260px;
  pointer-events: none;
  z-index: 2;
}
.umbrella-scene .sparkle {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 10px;
  height: 10px;
  margin-left: -5px;
  margin-top: -5px;
  border-radius: 50%;
  opacity: 0;
  --tx: 0px;
  --ty: 0px;
  animation: sparkle-fly 3.2s linear infinite;
}
@keyframes sparkle-fly {
  0%   { transform: translate(0, 0) scale(0.4); opacity: 0; }
  15%  { opacity: 0.9; }
  100% { transform: translate(var(--tx), var(--ty)) scale(0.2); opacity: 0; }
}

@media (max-width: 960px) {
  .umbrella-scene { padding-bottom: 0; }
  .umbrella-scene .umbrella { bottom: 22%; }
}

/* ============================================================
   Reduced motion — freeze every animation, including the
   umbrella scene that the prototype didn't cover.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .hero-mascot,
  .septagon,
  .umbrella-scene .oliv,
  .umbrella-scene .umbrella,
  .umbrella-scene .spinner,
  .umbrella-scene .oliv-shadow,
  .umbrella-scene .sparkle,
  .scan-status .dot {
    animation: none !important;
  }
}

/* ============================================================
   Legal pages — Privacy / Terms / Disclaimer / Cookies
   Long-form prose, single narrow column, generous line-height.
   ============================================================ */
.legal-page {
  padding: 48px 0 96px;
}
.legal-page .wrap {
  max-width: 760px;
}
.legal-back {
  display: inline-block;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-muted);
  margin-bottom: 32px;
  padding: 6px 0;
}
.legal-back:hover { color: var(--deep-teal); }

.legal-page h1 {
  font-size: clamp(2rem, 4vw, 3rem);
  margin: 8px 0 12px;
  letter-spacing: -0.03em;
}
.legal-meta {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.82rem;
  color: var(--fg-muted);
  letter-spacing: 0.04em;
  margin: 0 0 24px;
}

.counsel-banner {
  background: var(--coral);
  border-left: 4px solid #C44A3A;
  padding: 18px 22px;
  border-radius: 12px;
  margin: 24px 0 40px;
  color: var(--fg);
  font-size: 0.95rem;
  line-height: 1.55;
}
.counsel-banner strong {
  display: block;
  font-weight: 700;
  margin-bottom: 4px;
  color: #8C2A1C;
}

.legal-toc {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-tile);
  padding: 24px 28px;
  margin: 0 0 56px;
}
.legal-toc h2 {
  font-size: 0.78rem;
  font-family: "JetBrains Mono", monospace;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--deep-teal);
  font-weight: 700;
  margin: 0 0 16px;
  border-top: 0;
  padding-top: 0;
}
.legal-toc ol {
  margin: 0;
  padding-left: 20px;
  columns: 2;
  column-gap: 40px;
}
.legal-toc li {
  margin-bottom: 8px;
  break-inside: avoid;
  font-size: 0.92rem;
  color: var(--fg);
}
.legal-toc a {
  color: var(--fg);
  text-decoration: none;
  border-bottom: 1px dotted var(--hairline);
  transition: color 0.15s ease;
}
.legal-toc a:hover {
  color: var(--deep-teal);
  border-bottom-color: var(--deep-teal);
}
@media (max-width: 600px) {
  .legal-toc ol { columns: 1; }
}

.legal-page section {
  padding: 0;
  margin: 0;
}
.legal-page h2 {
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 56px 0 16px;
  padding-top: 32px;
  border-top: 1px solid var(--hairline-2);
  color: var(--deep-teal);
  scroll-margin-top: 88px;
}
.legal-page h3 {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 32px 0 12px;
  color: var(--fg);
  letter-spacing: -0.005em;
}
.legal-page p,
.legal-page li {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--fg);
}
.legal-page p {
  margin: 0 0 16px;
}
.legal-page ul,
.legal-page ol {
  padding-left: 1.4em;
  margin: 0 0 16px;
}
.legal-page li {
  margin-bottom: 8px;
}
.legal-page li > strong:first-child {
  color: var(--deep-teal);
}
.legal-page a {
  color: var(--deep-teal);
  text-decoration: underline;
  text-decoration-color: var(--aqua-mist);
  text-underline-offset: 3px;
}
.legal-page a:hover {
  text-decoration-color: var(--deep-teal);
}
.legal-page code,
.legal-page .placeholder {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.88em;
  background: var(--hairline-2);
  padding: 1px 6px;
  border-radius: 3px;
  color: var(--deep-teal);
}

.legal-page table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0 32px;
  font-size: 0.92rem;
}
.legal-page th,
.legal-page td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--hairline-2);
  text-align: left;
  vertical-align: top;
  line-height: 1.55;
}
.legal-page thead th {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--deep-teal);
  font-weight: 700;
  border-bottom: 2px solid var(--deep-teal);
}
.legal-page tbody th {
  font-weight: 600;
  color: var(--fg);
  font-size: 0.95rem;
  width: 32%;
}
@media (max-width: 600px) {
  .legal-page table {
    display: block;
    overflow-x: auto;
  }
}

.legal-page blockquote {
  margin: 24px 0;
  padding: 16px 22px;
  background: var(--surface);
  border-left: 4px solid var(--aqua-mist);
  border-radius: 8px;
  color: var(--fg);
  font-size: 0.95rem;
}
.legal-page blockquote p:last-child { margin-bottom: 0; }

.legal-page .tldr {
  background: linear-gradient(135deg, rgba(183, 214, 212, 0.25), rgba(247, 187, 85, 0.10));
  border: 1px solid var(--aqua-mist);
  border-radius: var(--r-tile);
  padding: 28px 32px;
  margin: 0 0 40px;
}
.legal-page .tldr h2 {
  border: 0;
  padding: 0;
  margin: 0 0 12px;
  font-size: 0.82rem;
  font-family: "JetBrains Mono", monospace;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--deep-teal);
}
.legal-page .tldr p:last-child { margin-bottom: 0; }

.legal-page .emergency {
  background: rgba(196, 74, 58, 0.08);
  border: 1px solid rgba(196, 74, 58, 0.35);
  border-left: 4px solid #C44A3A;
  border-radius: 12px;
  padding: 18px 22px;
  margin: 24px 0;
}
.legal-page .emergency strong { color: #8C2A1C; }