/* ==========================================================================
   Homepage — page-specific styles.
   Loaded after design-system.css; relies entirely on its tokens/components.
   Prototype only — not committed, not deployed.
   ========================================================================== */

/* Missing-asset placeholder: used only where no real photograph exists yet.
   Deliberately obvious — dashed border, muted fill, visible label — so it
   reads as "not final" rather than an intentional design choice. */
.asset-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--color-linen);
  border: 2px dashed rgba(var(--color-evergreen-rgb), 0.3);
  padding: var(--space-6);
  min-height: 340px;
}
.asset-placeholder__label {
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-secondary);
  letter-spacing: 0.02em;
  max-width: 28ch;
}

/* Two-column grid for the nutrition-path preview (Free Conversation + Blueprint) —
   deliberately not the 3-column .grid-3, since forcing a third empty slot
   into a 2-item section is exactly the "default to three cards" pattern
   CLAUDE.md warns against. */
.grid-2 {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .grid-2 { grid-template-columns: 1fr 1fr; }
}

/* Credentials strip: a plain list, not cards — this is a factual record,
   not a set of marketing claims, so it shouldn't compete visually with the
   card components used elsewhere. */
.credentials-list {
  list-style: none;
  margin: 0 0 var(--space-5) 0;
  padding: 0;
  max-width: var(--width-reading);
}
.credentials-list li {
  font-family: var(--font-serif);
  font-size: 1.1rem;
  color: var(--color-forest);
  padding: var(--space-3) 0;
  border-bottom: var(--border-hairline);
}
.credentials-list li:first-child { padding-top: 0; }

/* Secondary detail line, added 2026-07-13: the IFM affiliation was previously
   appended inline onto the MS credential line ("...University of Western
   States, an Institute for Functional Medicine (IFM)-affiliated program"),
   which made that single list item visually dominate the others — a much
   longer line than every credential around it. Moved to a smaller, quieter
   line beneath the degree instead, same pattern as a caption under a
   headline: the fact is still there and still specific, it just no longer
   competes for the same visual weight as the degree itself. */
.credentials-list__detail {
  display: block;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.01em;
  color: var(--text-secondary);
  margin-top: 2px;
}
/* 0.95, not 0.6 — 0.6 measured 2.87:1 on Forest, under the 4.5:1 AA
   minimum for this 13px line. (2026-07-13) */
.section--deep .credentials-list__detail { color: rgba(253, 251, 245, 0.95); }

/* Recommended-tier marker, added 2026-07-13: the copy already calls
   Wellness Transformation "the package Paula recommends," but nothing in
   the card itself carried that forward visually — every ongoing-package
   card looked equally weighted. A quiet Sun Gold border plus a small label
   gives it real visual priority without a badge/pill shape (Sun Gold is
   already the system's one rare-highlight accent, per
   docs/design-system.md) and without breaking the restrained, no-shouting
   button/card language used everywhere else. */
.card--recommended {
  border: 1px solid var(--color-gold);
}
.card__recommended-label {
  display: block;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  /* Gold-text, not Sun Gold — Sun Gold measures 2.14:1 on ivory, far under
     the 4.5:1 AA minimum for this 11px label. The card's gold border keeps
     the Sun Gold accent; the label itself has to be readable. (2026-07-13) */
  color: var(--color-gold-text);
  margin-bottom: var(--space-2);
}

/* This section is placed on a Primary Forest (--color-forest) background
   in index.html (.section--deep). Without this override, the list text and
   its hairline border would both render in the same dark green as the
   background they sit on — effectively invisible. Light-on-dark variants,
   matching how design-system.css already handles headings/body text inside
   .section--deep. */
.section--deep .credentials-list li {
  color: var(--color-ivory);
  border-bottom-color: rgba(253, 251, 245, 0.2);
}
/* 0.95 ivory, not Sage — Sage measures 2.87:1 on the Forest background,
   under the 4.5:1 AA minimum for this 13px text. (2026-07-13) */
.section--deep .disclaimer {
  color: rgba(253, 251, 245, 0.95);
}

/* Same problem, different component: .btn-primary is filled with
   --color-forest, which is invisible as a *shape* against a .section--deep
   background of the same color — the label text would still be readable,
   but the button would lose its edges entirely, undermining the
   already-settled "primary CTA must be unmistakable" rule. Inverted to an
   ivory fill so it reads as a distinct, high-contrast button on dark
   sections specifically (light sections keep the standard filled-forest
   treatment). .btn-secondary's text color needs the same light-on-dark
   treatment for the same reason. */
.section--deep .btn-primary {
  background: var(--color-ivory);
  color: var(--color-forest);
  border-color: var(--color-ivory);
}
.section--deep .btn-primary:hover {
  background: var(--color-linen);
  border-color: var(--color-linen);
}
.section--deep .btn-secondary {
  color: var(--color-ivory);
  border-color: rgba(253, 251, 245, 0.4);
}
.section--deep .btn-secondary:hover {
  background: rgba(253, 251, 245, 0.08);
}

/* Disclaimer text: small, quiet, sans — deliberately not styled as a
   .caption (which is uppercase/tracked and harder to read at length).
   Disclaimers need to be legible, not decorative. */
.disclaimer {
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-secondary);
  max-width: var(--width-reading);
  margin-top: var(--space-4);
}
.disclaimer + .disclaimer { margin-top: var(--space-2); }

/* Hero-specific spacing: a little more room at the top than a standard
   .section, since this is the very first thing a visitor sees. */
.hero-section { padding-top: var(--space-9); }
@media (min-width: 1024px) {
  .hero-section { padding-top: var(--space-10); }
}

/* Real logo mark, added 2026-07-12 per founder request: sits between the
   nav's text wordmark and the hero headline. The source PNG is a square
   1200x1200 canvas with generous transparent padding built into the file
   itself, so a modest rendered width is enough — no extra crop needed. */
/* Sized up and centered within the text column per direct founder feedback
   on the first placement (140px, left-aligned) — she marked a larger size
   and a position shifted toward the middle of the column, not flush left. */
.hero-logo {
  display: block;
  width: 220px;
  height: 220px;
  margin: 0 auto var(--space-6) auto;
}

.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-6);
}

/* Footer: nav + disclaimers + social, stacked with real breathing room. */
.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-6) 0;
}
.footer-nav a {
  font-family: var(--font-sans);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  /* Sage-bright, not Sage — Sage measures 4.29:1 on the evergreen footer,
     under the 4.5:1 AA minimum for this 13px text. (2026-07-13) */
  color: var(--color-sage-bright);
  text-decoration: none;
}
.footer-nav a:hover { color: var(--color-ivory); }
.footer-disclaimers {
  border-top: 1px solid rgba(253, 251, 245, 0.15);
  padding-top: var(--space-5);
  margin-top: var(--space-5);
}
/* 0.78, not 0.65 — 0.65 measured 4.18:1 on evergreen, under the 4.5:1 AA
   minimum for this 13px legally-load-bearing text; 0.78 measures 5.24:1.
   (2026-07-13) */
.footer-disclaimers .disclaimer { color: rgba(253, 251, 245, 0.78); }

/* ==========================================================================
   Botanical frame accents — fine-line herb/leaf clusters that grow along a
   photo frame's edge, like foliage the picture sits within.

   REVISED 2026-07-12, second pass: the corner "badge" version of this
   component (a small circle sitting on the photo corner) read as a sticker
   or a UI button dropped on top of the image — the founder's direct
   feedback was that it felt "too close" to the photo and out of sync with
   it, and asked instead for something that reads as the picture being
   "surrounded by herbs/greenery," with each instance unique rather than
   the same icon repeated in a different color.

   This version removes the circular blob entirely. Every accent below is
   built from one shared leaf primitive (defined once as an SVG <symbol> in
   index.html and referenced via <use>), but each placement composes that
   primitive into its own hand-arranged cluster — a vine cascading off a
   corner, a low trail along a base edge, a spray climbing a side edge, two
   small scattered clusters at opposite corners — so no two photos on the
   page carry the same shape. Two smaller standalone fan-sprigs (not tied to
   a photo) mark the Philosophy and Flagship-specialty section tops.

   Still an original illustration inspired by, not copied from, the
   founder's supplied style reference (licensed stock). See
   docs/design-system.md, "Botanical elements."
   ========================================================================== */

.photo-frame { overflow: visible; }

.botanical-frame {
  position: absolute;
  pointer-events: none;
  z-index: 2;
}
.botanical-frame svg { display: block; width: 100%; height: 100%; overflow: visible; }

.botanical-frame .bf-stem {
  fill: none;
  stroke: var(--color-evergreen);
  stroke-width: 1.1;
  opacity: 0.6;
}

/* FIX 2026-07-12: color is set here, on the <use> element, not on classes
   inside the referenced <symbol> content (see index.html comment for why —
   that was the actual cause of every leaf rendering solid black). `fill`
   and `stroke` are normal inherited SVG properties, so setting them on
   <use> flows reliably into whatever it references. Bumped opacity way up
   and swapped the previous muted-bronze-outline treatment for saturated
   greens throughout — direct founder feedback was "vibrant greenery," not
   a faint decorative wash.

   SECOND PASS, same day, after actually viewing it rendered (via the
   Claude-in-Chrome screenshot route — the Browser pane's own screenshot
   tool remains broken): fill-opacity 0.68 read fine against plain photo
   backgrounds (the founder, shop, and gardening photos) but the leaves got
   visually absorbed by the hero photo specifically, since that background
   is a busy, saturated mural pattern with no plain area for the foliage to
   sit against. Bumped opacity further and added a soft warm-ivory halo via
   drop-shadow so every leaf gets a hint of separation from whatever photo
   it sits on, busy or plain — this reads as "the leaf catching light,"
   not a hard sticker outline, at the low blur/opacity used here. */
.botanical-frame use {
  fill: var(--leaf-fill, var(--color-forest));
  fill-opacity: 0.82;
  stroke: var(--leaf-stroke, var(--color-evergreen));
  stroke-width: 1.25;
  filter: drop-shadow(0 0 2.5px rgba(253, 251, 245, 0.85));
}

/* Leaf-fill/stroke variants — three saturated greens, not three hues.
   Variety now comes from each accent's unique arrangement (see the six
   compositions in index.html), not from cycling through unrelated colors
   like the brand's pink or a literal gold, which would have read as
   off-theme foliage. */
.botanical-frame--moss { --leaf-fill: var(--color-forest); --leaf-stroke: var(--color-evergreen); }
.botanical-frame--sage { --leaf-fill: var(--color-moss); --leaf-stroke: var(--color-evergreen); }
.botanical-frame--gold { --leaf-fill: var(--color-forest); --leaf-stroke: var(--color-bronze); }

/* Four unique photo-frame arrangements — sized and positioned per photo,
   not a single repeatable "corner" rule. */
/* Hero anchored bottom-left, not top-right — see the 2026-07-12 comment in
   index.html: the top-right corner is already occupied by the photo's own
   pink "HN" logo badge, and stacking a second botanical mark on top of it
   was the actual cause of the "blocked logo" complaint. */
.botanical-frame--hero { bottom: -26px; left: -20px; width: 148px; height: 186px; }
.botanical-frame--founder { bottom: -16px; left: -6px; width: 176px; height: 60px; }
.botanical-frame--shop { top: -12px; left: -22px; width: 66px; height: 182px; }
.botanical-frame--gardening { top: -18px; left: -18px; width: calc(100% + 36px); height: calc(100% + 36px); }

@media (max-width: 639px) {
  .botanical-frame--hero { width: 84px; height: 106px; bottom: -14px; left: -12px; }
  .botanical-frame--founder { width: 130px; height: 46px; bottom: -10px; left: -4px; }
  .botanical-frame--shop { width: 48px; height: 132px; top: -8px; left: -14px; }
  .botanical-frame--gardening { width: calc(100% + 24px); height: calc(100% + 24px); top: -12px; left: -12px; }
}

/* Section-top fan-sprigs (Philosophy, Flagship specialty) — small, inline
   with normal flow (not overlapping a photo), each a different leaf count
   and angle spread so the two don't read as the same mark repeated. */
.botanical-frame--marker {
  position: static;
  display: inline-block;
  width: 60px;
  height: 60px;
  margin-bottom: var(--space-3);
}

/* ==========================================================================
   Signal cards ("The problem, named") — original fine-line icons, 2026-07-12.
   Replaces a stock symptom-collage graphic the founder was considering: same
   four ideas (low energy, food reactions, "normal" labs, post-exertion
   crash — all already stated in the paragraph beside this), rebuilt as a
   small icon set in the site's own line-art language instead of a stock
   photo composite on an off-palette pink/teal background. See CHANGELOG.md.
   ========================================================================== */

.signal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  align-content: center;
}
.signal-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  background: var(--color-ivory);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: var(--space-6) var(--space-3);
  text-align: center;
}
.signal-card__icon {
  width: 30px;
  height: 30px;
  stroke: var(--color-evergreen);
  color: var(--color-evergreen);
  fill: none;
  stroke-width: 1.4;
}
.signal-card span {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--color-evergreen);
  letter-spacing: 0.01em;
}

/* ==========================================================================
   Condition web (Flagship specialty) — original diagram, 2026-07-12.
   Replaces a stock infographic on a saturated pink/purple/teal background;
   conveys the same eight conditions (all already named in the paragraph
   beside it) as a radial diagram built from this site's own fine-line icons
   and palette (Meadow Green / Blush Cream / Evergreen / Bronze), not the
   stock graphic's unrelated purple/lavender/teal scheme. See CHANGELOG.md.
   ========================================================================== */

.condition-web {
  display: block;
  width: 100%;
  max-width: 440px;
  height: auto;
  margin: 0 auto;
  overflow: visible;
}
.cw-line {
  stroke: var(--color-bronze);
  stroke-width: 1;
  stroke-dasharray: 3 5;
  opacity: 0.55;
}
.cw-node {
  stroke: var(--color-evergreen);
  stroke-width: 1;
}
.cw-node--a { fill: var(--color-ivory); }
.cw-node--b { fill: var(--color-linen); }
.cw-center {
  fill: var(--color-forest);
}
.cw-icon {
  stroke: var(--color-evergreen);
  color: var(--color-evergreen);
  fill: none;
  stroke-width: 1.5;
  width: 24px;
  height: 24px;
  overflow: visible;
}
.cw-icon--center { stroke: var(--color-ivory); }
.cw-label {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  fill: var(--color-evergreen);
  text-anchor: middle;
}
.cw-center-label {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  fill: var(--color-ivory);
  text-anchor: middle;
}
/* FIX 2026-07-13: below ~480px the whole diagram renders small enough that
   the in-SVG text labels (which scale down with the viewBox, and can't be
   pinned to a fixed pixel size without a much larger foreignObject rework)
   stop being legible. The original fix hid only the labels — but that left
   a cluster of unlabeled, identical-looking circles and icons, which reads
   as broken, not restrained: there's no way to tell the shapes apart. The
   diagram is hidden outright at this width instead, and replaced with
   .cw-fallback (markup in index.html), a compact plain-HTML list of the
   same content that isn't subject to SVG scaling and stays legible at any
   width. The adjacent paragraph already states all eight conditions in
   prose for screen readers, so this fallback (like the diagram it
   replaces) is aria-hidden — quick-scan reinforcement, not the primary way
   the information is conveyed. */
.cw-fallback {
  display: none;
  margin: var(--space-2) 0 0 0;
  padding: 0;
  list-style: none;
  text-align: center;
}
.cw-fallback li {
  display: inline;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--color-evergreen);
}
.cw-fallback li:first-child {
  font-weight: 600;
  color: var(--color-forest);
}
.cw-fallback li:not(:last-child)::after {
  content: '·';
  margin: 0 var(--space-2);
  color: var(--color-bronze);
}
/* This block must come after the .cw-fallback base rule above — same
   specificity either way, so cascade order (not the media query condition
   alone) decides which `display` value wins at a matching width. Caught by
   testing at 375px during this fix's own verification pass, not by
   inspection: the base "display: none" was silently winning at every
   width because it was declared later in the file, regardless of whether
   the media query matched. */
@media (max-width: 480px) {
  .condition-web { display: none; }
  .cw-fallback { display: block; }
}

/* Cottage-food placeholder note — same visual language as .disclaimer
   (small, legible, not decorative) but with a dashed border so it reads
   unmistakably as "not final" rather than a quietly-invented real number. */
.placeholder-note {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-secondary);
  border: 1px dashed rgba(var(--color-evergreen-rgb), 0.35);
  border-radius: var(--radius-input);
  padding: var(--space-2) var(--space-3);
  margin-top: var(--space-4);
}