/* Version 2: "Clay and Sand". Same layout as Version 1, loaded after styles.css.
   Brown Clay carries whole sections instead of being a small accent;
   Muted Sand and Warm Taupe replace ivory as the main surfaces; buttons go charcoal. */
:root {
  --ink-soft: #574f4a;       /* darker body grey so it stays readable on sand and taupe */
  --ivory-on-clay: #f1e6df;  /* soft text on clay, still 4.5:1 */
}

body { background: var(--white); }

/* Buttons: charcoal on light surfaces, ivory on clay */
.btn { background: var(--charcoal); }
.btn:hover { background: #2e2e2e; }
.btn--light { background: var(--ivory); color: var(--clay); }
.btn--light:hover { background: var(--white); }

/* Nav sits on clay */
.nav { background: rgba(143, 93, 70, .97); border-bottom-color: transparent; }
.nav__logo img { filter: brightness(0) invert(1); }
.nav__links a:not(.btn) { color: var(--ivory); }
.nav__links a:not(.btn):hover { color: var(--white); text-decoration: underline; text-underline-offset: 4px; }
.nav__links .btn { background: var(--ivory); color: var(--clay); }
.nav__links .btn:hover { background: var(--white); }

/* Hero on Muted Sand, clay offset block */
.hero { background: var(--sand); }
.hero .lede, .hero__note { color: var(--ink-soft); }
.hero .kicker { color: var(--charcoal); } /* clay on sand is under 4.5:1 at this size */
.hero__photo::before { background: var(--clay); opacity: 1; }

/* Clients strip on Warm Ivory; logos use the shared greyscale treatment */
.clients { background: var(--ivory); }

/* Accidental success on white */
.pills li { background: var(--ivory); border-color: var(--ivory); }
.ph { background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.2) 0 2px, transparent 2px 12px),
    linear-gradient(160deg, #e6ddd6, #cbbdb3); }

/* The slide now runs sand, taupe, clay, deep clay, charcoal */
.decline__steps li { border: 0; }
.decline__steps li:nth-child(1) { background: var(--ivory); }
.decline__steps li:nth-child(2) { background: var(--sand); }
.decline__steps li:nth-child(3) { background: var(--taupe); }
.decline__steps li:nth-child(4) { background: var(--clay); color: var(--ivory); }
.decline__steps li:nth-child(5) { background: var(--charcoal); color: var(--ivory); }

/* Life plan band: same photo with a clay-to-sand wash */
.band__bg::after { background: linear-gradient(90deg, rgba(143,93,70,.28), rgba(216,207,200,.7) 72%); }
.band__card { background: var(--white); }
.band__note { color: var(--charcoal); }

/* Free years: clay instead of charcoal */
.dark { background: var(--clay); }
.kicker--light { color: var(--ivory-on-clay); }
.fy__list li { border-bottom-color: rgba(246,244,240,.25); }
.fy__list li::before { background: var(--ivory); }
.fy__body { color: var(--ivory-on-clay); }
.lifebar { background: rgba(58,58,58,.18); border-color: rgba(246,244,240,.25); }
.lifebar__label, .lifebar figcaption { color: var(--ivory-on-clay); }
.seg { background: var(--sand); }
.lifebar.is-on .seg--sleep, .lifebar.is-on .seg--work, .lifebar.is-on .seg--must { box-shadow: inset 0 0 0 1px rgba(246,244,240,.4); }
.lifebar.is-on .seg em { color: var(--ivory-on-clay); }
.lifebar.is-on .seg--free { background: var(--ivory); }
.lifebar.is-on .seg--free em { color: var(--clay); }

/* Meet Linh on Warm Ivory, filled clay icons */
#meet { background: var(--ivory); }
.creds li { background: var(--white); border-color: transparent; }
.creds__icon { background: var(--clay); border-color: var(--clay); }
.creds__icon svg { stroke: var(--ivory); }
.featured { border-top-color: var(--taupe); }

/* How it works on Warm Taupe */
.how { background: var(--taupe); }
.how .kicker { color: var(--charcoal); }
.step__n { background: var(--charcoal); }

/* Footer in charcoal */
.footer { background: var(--charcoal); border-top: 0; }
.footer img { filter: brightness(0) invert(1); }
.footer p { color: var(--sand); }

.vswitch { background: var(--ivory); color: var(--charcoal); }

@media (max-width: 900px) {
  .nav__toggle { color: var(--ivory); border-color: rgba(246,244,240,.5); }
  .nav__links { background: var(--clay); border-bottom-color: transparent; }
  .nav__links a:not(.btn) { border-bottom-color: rgba(246,244,240,.25); }
}