/* Homepage redesign (owner 11/09 mock, shipped 11/10): full-bleed hero, a still scene, no framed "window"
   sections, a four-item nav with dropdowns, painted scenery bands between sections. Loaded after pearl.css on
   index.html only; every rule here is an override so the redesign can be reverted as one file.
   `:root:root` outranks the Alpine theme's `:root` selectors. */

:root {
  --mk-bg: #0b1517;
  --mk-panel: #0f1f22;
  --mk-line: rgba(255, 255, 255, .09);
  --mk-line-2: rgba(255, 255, 255, .16);
}

/* ───────── One continuous page background, no framed cards ───────── */
:root:root body { background: var(--mk-bg); }
:root:root .hero { background: var(--mk-bg); }
:root:root main#main-content {
  padding-bottom: 0;
  background: var(--mk-bg);   /* one flat colour, so every fade lands on exactly the page colour */
}
:root:root main > #two-ways,
:root:root main > .stack,
:root:root main > #study,
:root:root main > #humanizer,
:root:root main > #more,
:root:root main > .final,
:root:root .tw.sec {
  margin: 0; border: 0; border-radius: 0; box-shadow: none; background: transparent;
}
/* no divider lines: sections run into each other */
:root:root main > .sec + .sec, :root:root main > .stack, :root:root main > .final, :root:root main > #more { border-top: 0; position: relative; }
:root:root .stack > #vision, :root:root .stack > .fb { border-top: 0; }

/* ───────── Hero: full-bleed, edge to edge, under the nav ───────── */
:root:root .hero {
  margin: 0; border: 0; border-radius: 0; box-shadow: none;
  min-height: clamp(640px, 100svh, 1100px);
  display: flex; flex-direction: column;
  /* the cursor and idle drift no longer move anything; scrolling still gives the painted layers their depth
     (--alp-hp, set by alpine/home.js: near layers rise faster than far ones as the hero scrolls away) */
  --alp-mx: 0 !important; --alp-my: 0 !important; --alp-foot: 0px !important;
}
:root:root .hero .alp-drift { animation: none; translate: none; }
:root:root .hero .hero__inner {
  flex: 1; position: static;
  padding-top: calc(var(--nav-h, 72px) + 24px);
  padding-bottom: clamp(80px, 14vh, 170px);   /* the copy rests a little above the middle, over the valley */
  grid-template-rows: repeat(4, auto);
  align-content: center;
}
:root:root .hero .hero__inner > .hero__copy > *,
:root:root .hero .hero__stage { position: relative; z-index: 4; }
:root:root .hero .hero__stage { position: absolute; }
/* the painted world now fills the whole hero, not just the old card */
:root:root .hero .alp-fore.alp-cliff { z-index: 1; }
/* the bottom of the painting dissolves into the page, so the hero flows straight into what follows */
:root:root .hero .alp-world::after,
:root:root .hero .alp-world::before { z-index: 3; }
:root:root .hero .alp-fore.alp-cliff::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 40%; z-index: 4; pointer-events: none;
  background: linear-gradient(180deg, rgba(11, 21, 23, 0) 0%, rgba(11, 21, 23, .2) 28%, rgba(11, 21, 23, .58) 52%, rgba(11, 21, 23, .9) 72%, var(--mk-bg) 88%);
}
/* the top of the painting carries the nav: a light shade so the links read on the bright sky */
:root:root .hero .alp-fore.alp-cliff::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 180px; z-index: 4; pointer-events: none;
  background: linear-gradient(180deg, rgba(6, 18, 24, .55), rgba(6, 18, 24, 0));
}
@media (min-width: 901px) {
  :root:root .hero .hero__stage { top: calc(var(--nav-h, 72px) + 26px); }
}
@media (max-width: 900px) {
  :root:root .hero { min-height: 0; }
  :root:root .hero .hero__inner { padding-top: calc(var(--nav-h, 64px) + 36px); grid-template-rows: none; }
  :root:root .hero .hero__stage { position: relative; }
}

/* ───────── Nav: transparent over the painting, solid once scrolled ───────── */
:root:root .nav:not(.scrolled):not(.menu-open) {
  background: transparent; border-bottom-color: transparent; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
:root:root .nav:not(.scrolled):not(.menu-open) .nav-logo-text,
:root:root .nav:not(.scrolled):not(.menu-open) .nd__btn,
:root:root .nav:not(.scrolled):not(.menu-open) .nav-signin { text-shadow: 0 1px 12px rgba(4, 16, 22, .5); }

/* ───────── Nav: four menus with dropdowns ───────── */
.nd { position: relative; }
.nd__btn {
  display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px; border-radius: 10px;
  font: 500 15px/1 var(--sans, 'DM Sans', system-ui, sans-serif); color: var(--alp-text-2, #c9d4d1);
  background: transparent; border: 0; cursor: pointer; white-space: nowrap;
  transition: color .15s, background-color .15s;
}
.nd__btn:hover, .nd.is-open .nd__btn { color: var(--alp-text, #f3f5f1); background: rgba(255, 255, 255, .07); }
.nd__btn:focus-visible { outline: 2px solid var(--alp-mint, #8fcfb8); outline-offset: 2px; }
.nd__chev { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; opacity: .7; transition: transform .2s; }
.nd.is-open .nd__chev { transform: rotate(180deg); }

@media (min-width: 901px) {
  /* Centre the four menus on the page, not between the logo and a right group
     whose width changes (signed in: Account + Open the app). The side columns
     never shrink below their content, so a tight width falls back to packed. */
  :root:root .nav {
    display: grid; grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr);
    column-gap: 16px;
  }
  :root:root .nav > .nav-logo { justify-self: start; }
  :root:root .nav > .nav-right { justify-self: end; }
  :root:root .nav-links {
    display: flex; align-items: center; gap: 2px;
    position: static; flex-direction: row; padding: 0; background: none; border: 0; box-shadow: none; border-radius: 0;
    transform: none; opacity: 1; visibility: visible; max-height: none; overflow: visible;
  }
  :root:root .mobile-toggle { display: none; }
  :root:root .nav-links a.nav-signin-menu { display: none; }

  .nd__panel {
    position: absolute; top: calc(100% + 12px); left: 50%; z-index: 120;
    min-width: 300px; padding: 8px; border-radius: 16px;
    background: var(--mk-panel); border: 1px solid var(--mk-line-2);
    box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .75), 0 2px 8px rgba(0, 0, 0, .3);
    opacity: 0; visibility: hidden; transform: translate(-50%, -6px);
    transition: opacity .16s, transform .16s, visibility 0s .16s;
  }
  .nd__panel::before { content: ''; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }   /* hover bridge */
  .nd.is-open .nd__panel { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity .16s, transform .16s; }

  .nd__panel--grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 8px; width: 460px; padding: 14px 10px 8px; }
}

/* panel contents (shared by the desktop dropdown and the phone accordion) */
:root:root .nd__panel a {
  display: block; padding: 10px 12px; border-radius: 10px; border: 0;
  color: var(--alp-text-2, #c9d4d1); font-size: 14.5px; font-weight: 500; text-decoration: none; white-space: normal; opacity: 1;
  transition: background-color .12s, color .12s;
}
:root:root .nd__panel a:hover, :root:root .nd__panel a:focus-visible { background: rgba(255, 255, 255, .06); color: var(--alp-text, #f3f5f1); outline: none; }
.nd__panel--list a b { display: block; font-weight: 600; font-size: 14.5px; color: var(--alp-text, #f3f5f1); }
.nd__panel--list a span { display: block; margin-top: 2px; font-size: 13px; color: var(--alp-text-3, #93a3a0); }
.nd__label { margin: 0 0 4px; padding: 0 12px; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--alp-text-3, #93a3a0); }
.nd__col { display: flex; flex-direction: column; }
.nd__foot { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; column-gap: 8px; margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--mk-line); }
:root:root .nd__foot a { color: var(--alp-text, #f3f5f1); font-weight: 600; }

/* phones and small tablets: the menu sheet, with each section as an accordion */
@media (max-width: 900px) {
  :root:root .mobile-toggle { display: inline-flex; }
  .nd { border-bottom: 1px solid var(--mk-line); }
  .nd__btn { width: 100%; justify-content: space-between; height: auto; padding: 16px 2px; font-size: 17px; border-radius: 0; }
  .nd__btn:hover, .nd.is-open .nd__btn { background: transparent; }
  .nd__panel { display: none; padding: 0 0 12px; }
  .nd.is-open .nd__panel { display: block; }
  .nd__panel--grid .nd__label { display: none; }
  :root:root .nd__panel a { padding: 10px 2px; border-bottom: 0; }
  .nd__panel--list a span { display: none; }
  .nd__foot { display: block; border-top: 0; margin-top: 0; padding-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .nd__panel, .nd__chev { transition: none; }
}

/* the forest strip at the foot of "Two ways to run it" now fades out at the bottom too, so it no longer
   ends on a hard line where the next section begins */
:root:root .tw.sec::after { display: none; }   /* the old grass strip; the forest band below replaces it */
:root:root .tw.sec { padding-top: clamp(40px, 5vw, 72px); }

/* the hiker's signal waves and the dot on the agent view are gone (owner 11/09, round 2) */
:root:root .hero .alp-beam { display: none; }

/* "Two ways to run it": its soft glows come back (radial only, so they have no edges) */
:root:root .tw.sec {
  background:
    radial-gradient(ellipse 50% 30% at 50% 34%, rgba(110, 160, 160, .09), transparent 72%);
}

/* Final CTA ("Your nights, back."): the dusk sky and painted ridge come back, painted on a layer that fades in
   from the page at the top and back out at the bottom, so the band has no edges */
:root:root main > .final { position: relative; isolation: isolate; overflow: visible; background: transparent; }
:root:root main > .final::after {
  content: ''; position: absolute; left: 0; right: 0; top: -60px; bottom: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(ellipse 60% 40% at 50% 34%, rgba(8, 24, 30, .38), transparent 75%) no-repeat,
    linear-gradient(180deg, #11272f 0%, #1a3a44 30%, #345d64 56%, #6d8f8c 74%, #a3b2a2 100%);
  /* fades in from the page at the top; the grass dissolves back into the page at the bottom */
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 220px, #000 calc(100% - 200px), rgba(0, 0, 0, .45) calc(100% - 90px), transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0, #000 220px, #000 calc(100% - 200px), rgba(0, 0, 0, .45) calc(100% - 90px), transparent 100%);
}
:root:root main > #more { z-index: 1; }

/* the footer stops being a boxed card too */
:root:root footer { margin: 0; border: 0; border-radius: 0; box-shadow: none; background: transparent; }

/* ───────── Scenery bands: layered forests and ranges between sections ─────────
   Each band: a soft horizon glow (so the dark silhouettes read on the dark page), then painted layers back to
   front. The band fades in from the page at the top; its nearest layer is the page colour, so it ends seamlessly.
   scape.js sets --sp (-1 .. 1) as the band crosses the screen; each layer moves by its depth --d. */
.scape {
  position: relative; overflow: hidden; pointer-events: none;
  height: clamp(150px, 15vw, 240px);
  margin-top: clamp(-40px, -3vw, -10px);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, rgba(0, 0, 0, .08) 14%, rgba(0, 0, 0, .3) 28%, rgba(0, 0, 0, .62) 42%, rgba(0, 0, 0, .9) 54%, #000 62%);
          mask-image: linear-gradient(180deg, transparent 0, rgba(0, 0, 0, .08) 14%, rgba(0, 0, 0, .3) 28%, rgba(0, 0, 0, .62) 42%, rgba(0, 0, 0, .9) 54%, #000 62%);
}
.scape::after {                                   /* the foot dissolves into the page */
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 38%; z-index: 2;
  background: linear-gradient(180deg, rgba(11, 21, 23, 0), rgba(11, 21, 23, .7) 55%, var(--mk-bg));
}
.scape--final::after { height: 30%; }
.scape__sky {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 55% at 72% 78%, rgba(150, 190, 186, .22), transparent 70%),
    linear-gradient(180deg, rgba(42, 74, 80, 0) 0%, rgba(42, 74, 80, .18) 30%, rgba(60, 96, 102, .42) 55%, rgba(86, 124, 128, .55) 74%, rgba(42, 74, 80, .4) 100%);
}
.scape__l {
  position: absolute; left: -2%; right: -2%; bottom: -12%;
  background-repeat: repeat-x; background-position: center bottom; background-size: auto 100%;
  will-change: transform;
  transform: translate3d(0, calc(var(--sp, 0) * var(--d, 0) * -70px), 0);
}
/* layer heights, as a share of the band: far layers sit lower and smaller */
.scape__l--peaks-0 { height: 92%; bottom: 8%; }
.scape__l--peaks-1 { height: 78%; bottom: -2%; }
.scape__l--forest-0 { height: 58%; }
.scape__l--forest-1 { height: 66%; }
.scape__l--forest-2 { height: 80%; }
.scape__l--forest-3 { height: 96%; bottom: -16%; }
.scape--forest .scape__l--forest-0 { bottom: 2%; }


/* final CTA: the band is the foot of the dusk sky, under the copy */
:root:root main > .final { padding-block: clamp(36px, 4.5vw, 64px) clamp(150px, 14vw, 230px); }
:root:root .final .final__mark, :root:root .final .final__mark img { width: clamp(72px, 7vw, 96px); height: clamp(72px, 7vw, 96px); }
:root:root .final .final__title { margin-top: 22px; font-size: clamp(40px, 5vw, 72px); }
.scape--final {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: -1; margin: 0;
  height: clamp(190px, 18vw, 290px);
  -webkit-mask-image: none; mask-image: none;
}
.scape--final .scape__sky { display: none; }
.scape--final .scape__l--peaks-0 { height: 70%; bottom: 22%; opacity: .9; scale: -1 1; background-position: 37% bottom; }   /* mirrored, so it is not the range above */
.scape--final .scape__l--forest-0 { height: 44%; bottom: 4%; }
.scape--final .scape__l--forest-1 { height: 54%; }
.scape--final .scape__l--forest-2 { height: 70%; }
.scape--final .scape__l--forest-3 { height: 86%; bottom: -18%; }

@media (max-width: 760px) {
  .scape { height: 140px; }
  .scape--lake { height: 180px; }
  .scape__l { left: -30%; right: -30%; }
}

/* ───────── Lake band (before the final CTA): a moonlit lake, the far shore's pines mirrored in the water ───────── */
.scape--lake { height: clamp(200px, 19vw, 300px); --hz: 56%;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, rgba(0, 0, 0, .35) 10%, rgba(0, 0, 0, .8) 20%, #000 28%);
          mask-image: linear-gradient(180deg, transparent 0, rgba(0, 0, 0, .35) 10%, rgba(0, 0, 0, .8) 20%, #000 28%); }          /* --hz: the shoreline, from the top */
.scape--lake .scape__sky {
  background:
    radial-gradient(ellipse 46% 60% at 47% 42%, rgba(170, 205, 205, .2), transparent 70%),
    linear-gradient(180deg, rgba(36, 66, 74, 0) 0%, rgba(36, 66, 74, .3) 28%, rgba(70, 108, 114, .5) 52%, rgba(30, 56, 62, .5) 53%, rgba(16, 32, 36, .6) 100%);
}
.scape__moon {
  position: absolute; left: 47%; top: 27%; width: clamp(34px, 3.4vw, 54px); aspect-ratio: 1; border-radius: 50%; translate: -50% 0;
  background: radial-gradient(circle at 42% 40%, #f6f3e8, #dcdcd0 60%, #c6cbc2);
  box-shadow: 0 0 40px 10px rgba(230, 236, 222, .18), 0 0 120px 40px rgba(170, 205, 205, .12);
  transform: translate3d(0, calc(var(--sp, 0) * -14px), 0);
}
/* the water: darker than the sky, with faint horizontal swell lines */
.scape__water {
  position: absolute; left: 0; right: 0; top: var(--hz); bottom: 0;
  background:
    repeating-linear-gradient(180deg, rgba(160, 200, 200, .05) 0 1px, transparent 1px 7px),
    linear-gradient(180deg, rgba(58, 94, 100, .55), rgba(14, 28, 32, .6) 70%);
}
/* far shore: the pine line sits on the horizon; its reflection hangs below it, rippled and dimmed */
.scape--lake .scape__l--shore { height: 34%; bottom: auto; top: calc(var(--hz) - 34% + 1px); filter: brightness(.72) saturate(.9); }
.scape--lake .scape__l--mirror {
  height: 34%; bottom: auto; top: var(--hz); opacity: .5; filter: brightness(.7) blur(.6px);
  scale: 1 -1;
  -webkit-mask-image: repeating-linear-gradient(180deg, #000 0 3px, rgba(0, 0, 0, .35) 3px 5px), linear-gradient(transparent, #000);
          mask-image: repeating-linear-gradient(180deg, #000 0 3px, rgba(0, 0, 0, .35) 3px 5px);
}
/* the moon's light broken across the water */
.scape__glint {
  position: absolute; left: 47%; top: calc(var(--hz) + 2%); width: clamp(60px, 7vw, 120px); height: 40%; translate: -50% 0;
  background:
    repeating-linear-gradient(180deg, rgba(244, 242, 228, .7) 0 2px, transparent 2px 8px);
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 30%, #000, transparent 75%);
          mask-image: radial-gradient(ellipse 50% 50% at 50% 30%, #000, transparent 75%);
  opacity: .7;
}
.scape--lake .scape__l--forest-3 { height: 92%; bottom: -16%; }

/* ───────── Hero stats strip (owner 11/10: kept, so the homepage loses no content) ─────────
   The note, the three proof chips and the "Built for Canvas" line stay in the hero exactly as on the old page,
   restyled as one quiet strip that rests on the dark fade at the foot of the painting: note left, chips right,
   the LMS line centred beneath them. No card, no rule, no ground colour. */
:root:root .hero .hero__lms {
  background: transparent; border-top: 0; z-index: 5;
  padding: 0 24px clamp(14px, 2.2vh, 22px); color: rgba(231, 239, 237, .6); font-size: 13px;
}
:root:root .hero .hero__lms strong { color: rgba(243, 245, 241, .88); }
:root:root .hero .hero__lms .bar { background: rgba(255, 255, 255, .18); }
@media (min-width: 901px) {
  /* the copy column no longer spans the hero, so the strip is placed against the hero itself */
  :root:root .hero .hero__copy { position: static; }
  :root:root .hero .hero__inner > .hero__copy > * { z-index: 6; }
  :root:root .hero .hero__inner > .hero__copy > .hero__note,
  :root:root .hero .hero__inner > .hero__copy > .hero__proof { position: absolute; }
  :root:root .hero .hero__note { left: clamp(20px, 2.4vw, 36px); bottom: calc(var(--alp-lms-h, 40px) + 14px); }
  :root:root .hero .hero__proof { right: clamp(16px, 2vw, 30px); bottom: calc(var(--alp-lms-h, 40px) + 10px); }
}