@import url('styles-motion-v8-light.css');

:root {
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
}

.theme-light .site-header {
  top: 10px;
  height: 44px;
  padding-inline: 18px 14px;
}

.theme-light .site-header .wordmark {
  font-size: 16px;
}

.theme-light .site-header .wordmark i {
  height: 19px;
}

.theme-light .site-header .header-cta {
  min-height: 28px;
}

/* The light page only ever shows the signal background (the other states stay at opacity 0),
   so their 1.5 MB images from the dark base styles are not downloaded at all. */
.theme-light .ambient__state:not(.ambient__state--signal) { background-image: none; }

/* A fixed, fine photographic grain belongs to the color field, below the UI. */
.theme-light .ambient__grain {
  opacity: .036;
  mix-blend-mode: normal;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='1' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23grain)'/%3E%3C/svg%3E");
}

/* Chosen section surfaces sit over the continuous gradient and crossfade with scroll. */
.theme-light .section-backgrounds {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.theme-light main {
  position: relative;
  z-index: 1;
}

.theme-light .section-background {
  position: absolute;
  inset: -140px;
  opacity: 0;
  pointer-events: none;
  filter: blur(18px);
  will-change: opacity;
}

/* Section 03 keeps a flat background; each scenario tab has its own pale tone. */
.theme-light .section-background--third {
  background-color: #C7DCF9;
  transition: background-color .7s ease;
}

.theme-light .section-background--third[data-scenario="research"] { background-color: #D6D3F5; }
.theme-light .section-background--third[data-scenario="family"] { background-color: #F2DECC; }
.theme-light .section-background--third[data-scenario="business"] { background-color: #CBE8D6; }

.theme-light .section-background--fourth {
  background: #F3F7F9;
  filter: none;
}

/* Color spots sit under the outcome cards and scroll with them (shift set in JS). */
.theme-light .section-background--fourth::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 33% 40% at 25% 70%, rgba(102, 210, 202, .43), transparent 80%),
    radial-gradient(ellipse 34% 40% at 76% 70%, rgba(192, 224, 122, .36), transparent 80%),
    radial-gradient(ellipse 29% 32% at 81% 78%, rgba(150, 190, 246, .27), transparent 84%);
  transform: translate3d(0, var(--outcomes-shift, 0px), 0);
  will-change: transform;
}

/* Hero styles live in styles-hero.css. */

.outcomes {
  min-height: 100svh;
  padding-top: clamp(88px, 10vh, 112px);
  padding-bottom: clamp(88px, 10vh, 112px);
}

/* Same vertical breathing room around sections 02, 03 and 04. */
.pains, .handover {
  padding-top: clamp(88px, 10vh, 112px);
  padding-bottom: clamp(88px, 10vh, 112px);
}

.outcomes__intro {
  max-width: 1120px;
}

.outcomes__intro h2 {
  max-width: 1120px;
}

.outcomes__headline-line {
  display: block;
  overflow: hidden;
  padding-bottom: .12em;
  margin-bottom: -.12em;
  color: #0b1520;
}

.outcomes__headline-line [data-reveal-word] {
  display: inline-block;
  opacity: 1;
  transform: translateY(0);
}

.has-motion .outcomes:not(.is-title-visible) [data-reveal-word] {
  opacity: 0;
  transform: translateY(85%);
}

.has-motion .outcomes [data-reveal-word] {
  transition: transform .68s var(--ease-out) var(--word-delay, 0ms), opacity .48s ease var(--word-delay, 0ms);
}

.outcomes__intro > p:last-child {
  max-width: 760px;
}

.outcome-panels {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: clamp(24px, 2.8vw, 42px);
  margin-top: clamp(52px, 7vh, 88px);
}

.outcome-panel {
  position: relative;
  isolation: isolate;
  min-height: 438px;
  overflow: hidden;
  padding: clamp(28px, 2.8vw, 40px);
  border: 1px solid rgba(40, 98, 125, .17);
  border-radius: 32px;
  background: #F3F7F9;
  box-shadow: 0 24px 54px rgba(60, 111, 137, .13), inset 0 1px 0 rgba(255, 255, 255, .84);
  transition: transform .28s var(--ease-out), box-shadow .28s var(--ease-out);
}

.outcome-panel--know {
  background: #F3F7F9;
}

.outcome-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0;
  background: linear-gradient(145deg, rgba(229, 250, 247, .96), rgba(218, 235, 250, .88));
  transition: opacity .28s var(--ease-out);
}

.outcome-panel > * {
  position: relative;
  z-index: 1;
}

.outcome-panel--know::before {
  background: linear-gradient(145deg, rgba(238, 246, 216, .96), rgba(224, 236, 249, .9));
}

.outcome-panel__eyebrow {
  margin: 0 0 18px;
  color: #246781;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
}

.outcome-panel--know .outcome-panel__eyebrow {
  color: #64782f;
}

.outcome-panel__rows { display: grid; }
.outcome-row { display: grid; grid-template-columns: 46px minmax(0, 1fr) minmax(120px, 37%); gap: clamp(12px, 1.4vw, 20px); align-items: center; min-height: 119px; padding: 18px 0; border-top: 1px solid rgba(47, 111, 148, .15); }
.outcome-row:first-child { border-top: 0; }
.outcome-row__number, .outcome-row__icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 14px; color: #247b82; background: rgba(137, 222, 213, .2); font-size: 17px; font-weight: 650; }
.outcome-row__icon { width: 52px; height: 52px; color: #2884bd; background: rgba(197, 230, 249, .44); font-size: 28px; font-weight: 400; }
.outcome-row__copy h3 { margin: 0 0 5px; color: #102436; font-size: clamp(16px, 1.3vw, 20px); line-height: 1.14; letter-spacing: -.035em; }
.outcome-row__copy p { margin: 0; color: #4d6678; font-size: clamp(12px, .95vw, 15px); line-height: 1.4; }
.outcome-row__preview { display: flex; flex-direction: column; justify-content: center; gap: 7px; min-height: 60px; padding: 12px 14px; border: 1px solid rgba(58, 120, 153, .19); border-radius: 16px; background: rgba(255,255,255,.7); box-shadow: 0 6px 18px rgba(48,107,138,.06); }
.outcome-row__preview strong { color: #1b3448; font-size: 12px; }
.outcome-row__preview span { color: #547085; font-size: 10px; line-height: 1.3; }
.outcome-row__status { display: inline-block; width: 7px; height: 7px; margin-right: 5px; border-radius: 50%; background: #82c54d; }
.outcome-row__preview .outcome-row__reviewed { color: #32874a; font-weight: 700; }
.outcome-row__preview--run { flex-direction: row; justify-content: space-between; align-items: center; gap: 5px; }
.outcome-row__preview--run span { padding: 6px 8px; border-radius: 7px; color: #fff; background: #2e88bd; white-space: nowrap; }
.outcome-row--skill { grid-template-columns: 60px minmax(0, 1fr); min-height: 119px; }

.has-motion .outcomes:not(.is-results-visible) .outcome-row { opacity: 0; transform: translateY(16px); }
.has-motion .outcome-row { transition: opacity .42s ease var(--row-delay, 0ms), transform .58s var(--ease-out) var(--row-delay, 0ms); }
.has-motion .outcomes:not(.is-results-visible) .outcome-row__preview { opacity: 0; transform: translateY(9px) scale(.96); }
.has-motion .outcome-row__preview { transition: opacity .38s ease var(--preview-delay, 0ms), transform .5s var(--ease-out) var(--preview-delay, 0ms); }

/* Steep-style hover, as in section 08: the hovered panel grows up and outward from its outer
   bottom corner; the other panel shrinks toward its own outer edge by exactly the width the
   hovered one gained, so the gap stays the same as at rest. The panels are 1.55 : 1 wide. */
.outcome-panel:first-child { transform-origin: left bottom; }
.outcome-panel:last-child { transform-origin: right bottom; }

@media (hover: hover) {
  .outcome-panel { transition: transform .3s ease-out, box-shadow .3s ease-out; }

  .outcome-panel:hover {
    z-index: 2;
    transform: scale(1.03);
    box-shadow: 0 36px 72px rgba(53, 103, 129, .20), inset 0 1px 0 rgba(255, 255, 255, .84);
  }

  .outcome-panels:has(.outcome-panel:first-child:hover) .outcome-panel:last-child { transform: scale(.9535); }
  .outcome-panels:has(.outcome-panel:last-child:hover) .outcome-panel:first-child { transform: scale(.9806); }

  .outcome-panel:hover::before {
    opacity: 1;
  }
}

@media (max-width: 1100px) {
  .outcome-row { grid-template-columns: 42px minmax(0, 1fr); }
  .outcome-row__preview { grid-column: 2; width: min(100%, 230px); }
}

@media (max-width: 760px) {
  .theme-light .site-header {
    top: 7px;
    height: 42px;
  }

  .pains, .handover, .outcomes {
    padding-top: 88px;
    padding-bottom: 88px;
  }

  .outcome-panels {
    grid-template-columns: 1fr;
    margin-top: 42px;
  }

  .outcome-panel {
    min-height: 0;
    padding: 28px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .outcome-panel,
  .outcome-panel::before,
  .outcomes__headline-line [data-reveal-word],
  .outcome-row,
  .outcome-row__preview {
    transition: none;
  }

  .has-motion .outcomes [data-reveal-word],
  .has-motion .outcomes .outcome-row,
  .has-motion .outcomes .outcome-row__preview { opacity: 1; transform: none; }

  .outcome-panel:hover {
    transform: none;
  }
}