/*
 * Liquid Blue Mist — local homepage polish
 * Visual-only overrides. Layout, scroll timelines and interactions stay untouched.
 */

.five-home {
  --mist-canvas: #fafcff;
  --mist-base: #eef2fa;
  --mist-surface: #d6e0f0;
  --mist-primary: #6b86e8;
  --mist-deep: #455e93;
  --mist-white: #ffffff;
  --mist-ink: #24365d;
  --mist-line: rgba(69, 94, 147, .16);
  --mist-shadow: 0 28px 80px rgba(36, 54, 93, .12);
  --five-canvas: var(--mist-base);
  --five-surface: var(--mist-surface);
  --five-primary: var(--mist-primary);
  --five-deep: var(--mist-deep);
  --five-ink: var(--mist-ink);
  --five-paper: var(--mist-white);
}

/* Global chrome — a quieter, app-like glass layer. */
.five-header {
  border-bottom-color: rgba(69, 94, 147, .14);
  background: rgba(250, 252, 255, .82);
  box-shadow: 0 12px 34px rgba(36, 54, 93, .075);
  backdrop-filter: blur(26px) saturate(145%);
}

.five-nav a {
  color: var(--mist-ink);
}

.five-header .five-button-small,
.five-primary-button,
#capture.integrated-agent-manual .agent-primary-action {
  border-color: var(--mist-deep);
  background: linear-gradient(135deg, var(--mist-deep), var(--mist-primary));
  box-shadow: 0 14px 32px rgba(69, 94, 147, .23);
}

.five-header .five-button-small:hover,
.five-primary-button:hover,
#capture.integrated-agent-manual .agent-primary-action:hover,
#capture.integrated-agent-manual .agent-primary-action:focus-visible {
  border-color: var(--mist-ink);
  background: linear-gradient(135deg, var(--mist-ink), var(--mist-deep));
}

.five-page-rail {
  border-color: rgba(255, 255, 255, .8);
  background: rgba(238, 242, 250, .72);
  box-shadow: 0 14px 34px rgba(36, 54, 93, .12), inset 0 1px rgba(255, 255, 255, .9);
}

.five-page-rail a:hover,
.five-page-rail a:focus-visible {
  color: #fff;
  background: linear-gradient(135deg, var(--mist-primary), var(--mist-deep));
}

/* Chapter 1 — only tune material surfaces; preserve every orbit/scatter effect. */
.homepage-kb-hero .kb-orbit-card {
  color: var(--mist-ink);
  border-color: rgba(214, 224, 240, .86);
  background: rgba(255, 255, 255, .86);
  box-shadow: 0 14px 34px rgba(36, 54, 93, .18), inset 0 1px rgba(255, 255, 255, .96);
}

.homepage-kb-hero .kb-orbit-card > svg,
.homepage-kb-hero .kb-orbit-card > img {
  color: var(--mist-deep);
  background: var(--mist-base);
}

.homepage-kb-hero .kb-cosmos-trace {
  border-color: rgba(107, 134, 232, .28);
  background: rgba(250, 252, 255, .76);
  box-shadow: 0 16px 40px rgba(36, 54, 93, .16), inset 0 1px rgba(255, 255, 255, .92);
}

/* Chapter 2 — Granola-style asymmetric color blocks around the real product proof. */
#capture.integrated-agent-manual {
  isolation: isolate;
  background:
    radial-gradient(circle at 72% 39%, rgba(107, 134, 232, .12), transparent 27%),
    linear-gradient(135deg, var(--mist-canvas) 0%, #fff 60%, var(--mist-base) 132%);
}

#capture.integrated-agent-manual::before,
#capture.integrated-agent-manual::after {
  position: absolute;
  z-index: 0;
  content: "";
  pointer-events: none;
}

#capture.integrated-agent-manual::before {
  top: 20%;
  left: -7%;
  width: 39%;
  height: 42%;
  border-radius: 0 30px 30px 0;
  background: rgba(238, 242, 250, .9);
  box-shadow: inset -1px 0 rgba(214, 224, 240, .78);
}

#capture.integrated-agent-manual::after {
  right: -4%;
  bottom: 8%;
  width: 20%;
  height: 25%;
  border-radius: 26px 0 0 26px;
  background: rgba(214, 224, 240, .68);
}

#capture.integrated-agent-manual > * {
  z-index: 1;
}

#capture.integrated-agent-manual .agent-manual-copy {
  z-index: 2;
}

#capture.integrated-agent-manual .agent-manual-copy h2,
#capture.integrated-agent-manual .agent-heading h3 {
  color: var(--mist-ink);
}

#capture.integrated-agent-manual .agent-manual-copy > p {
  color: rgba(36, 54, 93, .72);
}

#capture.integrated-agent-manual .agent-backplane--lime {
  color: var(--mist-ink);
  background: var(--mist-surface);
}

#capture.integrated-agent-manual .agent-backplane--blue {
  background: linear-gradient(180deg, var(--mist-primary), var(--mist-deep));
  box-shadow: 0 22px 52px rgba(69, 94, 147, .2);
}

#capture.integrated-agent-manual .agent-window {
  border-color: rgba(69, 94, 147, .16);
  box-shadow: 0 34px 76px rgba(36, 54, 93, .19), 0 4px 12px rgba(36, 54, 93, .09);
}

#capture.integrated-agent-manual .agent-window-body {
  background:
    linear-gradient(rgba(69, 94, 147, .04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(69, 94, 147, .04) 1px, transparent 1px),
    var(--mist-canvas);
  background-size: 28px 28px;
}

#capture.integrated-agent-manual .agent-choice,
#capture.integrated-agent-manual .agent-prompt-card,
#capture.integrated-agent-manual .agent-result-card {
  border-color: rgba(69, 94, 147, .16);
}

/* Chapter 3 — keep the stage and three tabs intact; add one calm mist block. */
.action-connect-ready {
  isolation: isolate;
  background: var(--mist-canvas);
}

.action-connect-ready::before,
.action-connect-ready::after {
  position: absolute;
  z-index: 0;
  content: "";
  pointer-events: none;
}

.action-connect-ready::before {
  top: 20%;
  left: 0;
  width: clamp(190px, 21vw, 310px);
  height: 48%;
  border-radius: 0 28px 28px 0;
  background: var(--mist-base);
}

.action-connect-ready::after {
  top: 7%;
  right: 6%;
  width: clamp(90px, 10vw, 150px);
  height: clamp(30px, 4vw, 54px);
  border-radius: 10px;
  background: rgba(107, 134, 232, .18);
}

.ac-granola-shell {
  position: relative;
  z-index: 1;
}

.ac-output-tabs {
  position: relative;
}

.ac-output-tabs::before {
  position: absolute;
  z-index: -1;
  inset: -14px -18px;
  border: 1px solid rgba(214, 224, 240, .88);
  border-radius: 18px;
  background: rgba(255, 255, 255, .64);
  box-shadow: 0 18px 44px rgba(36, 54, 93, .08);
  content: "";
}

.action-connect-ready.ac-scroll-sequence::before,
.action-connect-ready.ac-scroll-sequence::after {
  display: none;
}

.ac-scroll-sequence .ac-output-tabs::before {
  inset: -10px -14px;
  border-radius: 16px;
  transition: inset .3s ease, border-radius .3s ease;
}

.ac-output-tab::after {
  background: linear-gradient(90deg, var(--mist-primary), var(--mist-deep));
}

.ac-product-stage {
  border: 1px solid rgba(107, 134, 232, .32);
  background: var(--mist-ink);
  box-shadow: 0 28px 82px rgba(36, 54, 93, .2), 0 0 0 8px rgba(238, 242, 250, .68);
}

.ac-stage-ui-wrap,
.ac-stage-source-wrap {
  border-color: rgba(214, 224, 240, .92);
}

/* Chapter 4 — pale blocks frame the fan, while the fan motion remains unchanged. */
.five-share.share-social-fan-active {
  isolation: isolate;
  background: var(--mist-canvas);
}

.share-social-fan-active .share-social-fan__sticky {
  z-index: 1;
}

.share-social-fan-active .share-social-fan__sticky::before,
.share-social-fan-active .share-social-fan__sticky::after {
  position: absolute;
  z-index: -1;
  content: "";
  pointer-events: none;
}

.share-social-fan-active .share-social-fan__sticky::before {
  top: 18%;
  left: -5%;
  width: 34%;
  height: 58%;
  border-radius: 0 32px 32px 0;
  background: var(--mist-base);
}

.share-social-fan-active .share-social-fan__sticky::after {
  right: -4%;
  bottom: 7%;
  width: 31%;
  height: 42%;
  border-radius: 32px 0 0 32px;
  background: rgba(214, 224, 240, .7);
}

.share-social-fan-active .share-social-fan__intro > h2 {
  color: var(--mist-ink);
}

.share-social-fan-active .share-social-fan__intro em,
.share-social-fan-active .share-social-fan__intro > p,
.share-social-fan-active .share-social-fan__phone-label {
  color: var(--mist-deep);
}

.share-social-fan-active .share-social-fan__stage::before {
  background: radial-gradient(ellipse, rgba(69, 94, 147, .17), rgba(107, 134, 232, .05) 47%, transparent 73%);
}

/* Context return — the app surface now speaks the same Liquid Blue Mist language. */
.memova-return-story {
  --return-paper: var(--mist-base);
  --return-surface: #fff;
  --return-ink: var(--mist-ink);
  --return-muted: rgba(36, 54, 93, .68);
  --return-line: rgba(69, 94, 147, .14);
  --return-blue: var(--mist-deep);
  --return-blue-soft: var(--mist-base);
  isolation: isolate;
  background: linear-gradient(135deg, var(--mist-base), var(--mist-canvas) 58%, #fff 120%);
}

.memova-return-story::before,
.memova-return-story::after {
  position: absolute;
  z-index: 0;
  content: "";
  pointer-events: none;
}

.memova-return-story::before {
  top: 10%;
  left: -6%;
  width: 28%;
  height: 46%;
  border-radius: 0 30px 30px 0;
  background: rgba(214, 224, 240, .78);
}

.memova-return-story::after {
  top: 3%;
  right: 0;
  width: 19%;
  height: 19%;
  background: rgba(107, 134, 232, .13);
}

.memova-return-story__sticky,
.memova-return-story > .five-page-number {
  z-index: 1;
}

.memova-return-demo {
  border-color: rgba(69, 94, 147, .18);
  background: #fff;
  box-shadow: 0 28px 64px rgba(36, 54, 93, .14);
}

.memova-return-demo__chrome {
  background: var(--mist-canvas);
}

.memova-return-demo__sidebar {
  background: var(--mist-base);
}

.memova-return-demo__sidebar a.is-current,
.memova-return-demo__surface {
  background: #fff;
}

.memova-return-view blockquote,
.memova-return-review-card,
.memova-return-note,
.memova-return-book {
  border-color: rgba(69, 94, 147, .15);
}

/* Final chapter — deep brand close with app-primary light fields. */
.five-waitlist {
  background:
    linear-gradient(90deg, rgba(107, 134, 232, .14) 0 13%, transparent 13% 87%, rgba(69, 94, 147, .18) 87%),
    radial-gradient(circle at 20% 20%, rgba(107, 134, 232, .55), transparent 29%),
    radial-gradient(circle at 82% 72%, rgba(69, 94, 147, .8), transparent 34%),
    var(--mist-ink);
}

.five-waitlist form {
  border-color: rgba(214, 224, 240, .52);
  background: rgba(255, 255, 255, .13);
  box-shadow: 0 26px 72px rgba(7, 18, 46, .3), inset 0 1px rgba(255, 255, 255, .25);
}

.five-waitlist form button {
  color: var(--mist-ink);
  background: linear-gradient(135deg, #fff, var(--mist-base));
}

.five-final-paper {
  border-color: rgba(214, 224, 240, .32);
  background: linear-gradient(180deg, rgba(238, 242, 250, .14), rgba(255, 255, 255, .08));
}

@media (max-width: 820px) {
  #capture.integrated-agent-manual::before {
    top: 10%;
    left: -12%;
    width: 78%;
    height: 28%;
  }

  #capture.integrated-agent-manual::after {
    right: -16%;
    bottom: 5%;
    width: 58%;
    height: 22%;
  }

  .action-connect-ready::before {
    top: 17%;
    width: 48%;
    height: 35%;
  }

  .action-connect-ready::after {
    right: 5%;
    width: 24%;
  }

  .share-social-fan-active .share-social-fan__sticky::before {
    top: 18%;
    width: 45%;
    height: 48%;
  }

  .share-social-fan-active .share-social-fan__sticky::after {
    width: 42%;
    height: 36%;
  }

  .memova-return-story::before {
    width: 44%;
    height: 30%;
  }

  .five-waitlist {
    background:
      radial-gradient(circle at 18% 16%, rgba(107, 134, 232, .52), transparent 31%),
      radial-gradient(circle at 86% 76%, rgba(69, 94, 147, .76), transparent 38%),
      var(--mist-ink);
  }
}

@media (prefers-reduced-motion: reduce) {
  .five-header,
  .five-page-rail,
  .ac-product-stage,
  .memova-return-demo {
    scroll-behavior: auto;
  }
}