/* The home page: places and sizes its parts, with the tokens of system.css and the components of components.css. */

/* ---------- hero: the indigo panel and the footage to the edge ---------- */
.hero { position: relative; display: grid; grid-template-columns: minmax(0, 47fr) minmax(0, 53fr); min-height: min(calc(100svh - 76px), 880px); background: var(--c-brand); color: var(--c-on-brand); }
.hero__panel { display: flex; align-items: center; padding: clamp(40px, 5vw, 76px) clamp(28px, 3.6vw, 60px) clamp(44px, 5vw, 76px) max(var(--gutter), calc((100vw - var(--max-w)) / 2)); }
.hero__words { width: 100%; max-width: 35rem; }
.hero__title { font-size: clamp(2.35rem, 1.45rem + 2.75vw, 3.85rem); font-weight: 500; line-height: 1.06; letter-spacing: -0.018em; text-wrap: initial; }
.hero__fixed { display: block; }
.hero__wordline { display: block; white-space: nowrap; }
.hero__word { font-style: italic; font-weight: 460; color: var(--c-brand-light); display: inline-block; opacity: calc(1 - var(--kit-swap, 0) * 0.85); transform: translateY(calc(var(--kit-swap, 0) * 0.08em)); }
.hero__line { text-wrap: pretty; margin: clamp(18px, 1.6vw, 24px) 0 clamp(26px, 2.6vw, 34px); font-size: clamp(1.05rem, 0.98rem + 0.32vw, 1.22rem); line-height: 1.6; color: var(--c-on-dark-soft); max-width: 33rem; }
.hero__media { position: relative; overflow: hidden; min-height: 420px; background: var(--c-brand-dark); }
.hero__slide::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(38, 33, 97, 0.38) 0%, rgba(38, 33, 97, 0) 22%), linear-gradient(0deg, rgba(23, 20, 62, 0.42) 0%, rgba(23, 20, 62, 0) 34%); }
.hero__card { position: absolute; z-index: 3; left: clamp(20px, 3vw, 44px); bottom: clamp(24px, 4.2vw, 56px); opacity: var(--kit-in, 1); transform: translateY(calc((1 - var(--kit-in, 1)) * 16px)); }
.hero__stop { top: 18px; right: 18px; }
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; min-height: 0; }
  .hero__panel { padding: 26px var(--gutter) 30px; }
  .hero__words { max-width: 36rem; }
  .hero__title { font-size: clamp(2.05rem, 1.2rem + 4.6vw, 3rem); }
  .hero__line { margin: 14px 0 22px; }
  .hero__media { min-height: 0; height: clamp(300px, 78vw, 480px); }
  .hero__card { left: 16px; bottom: 18px; max-width: calc(100% - 32px); }
  .hero__picker { max-width: none; }
}
@media (max-width: 370px) { .hero__title { font-size: 1.9rem; } .picker__choice span { height: 48px; font-size: 0.98rem; } }

/* ---------- outcomes: the day, four cards ---------- */
.day-wrap { position: relative; }
.day__stop { top: -58px; right: 0; }
.day__card { background: var(--c-white); color: var(--c-ink); min-height: 0; box-shadow: var(--shadow-m); }
.day__media { position: relative; height: clamp(330px, 29vw, 400px); overflow: hidden; background: var(--c-brand-dark); }
.day__media .footage { z-index: 0; --shade: linear-gradient(180deg, rgba(23, 20, 62, 0.34) 0%, rgba(23, 20, 62, 0) 55%); }
.day__scene { z-index: 2; }
.day__scene--out-reviews { --oc-star: var(--c-star); }
.day__words { position: static; padding: clamp(20px, 2vw, 28px) clamp(20px, 2.2vw, 30px) clamp(22px, 2.2vw, 30px); }
.day__title { font-size: clamp(1.45rem, 1.2rem + 0.75vw, 1.85rem); color: var(--c-ink); }
.day__time { color: var(--c-accent-text); }
.day__text { color: var(--c-ink-soft); }
.day__more { margin-top: clamp(26px, 3vw, 40px); }
.day__card:nth-child(4) .day__media .footage video { object-position: 50% 62%; }
@media (max-width: 860px) { .day__card { min-height: 0; } .day__media { height: 380px; } .day__stop { top: -54px; } }

/* ---------- plan: the tour ---------- */
.tour__scene--scan { max-width: 520px; }
.tour__scene--leadbars, .tour__scene--cost { max-width: 580px; }

/* ---------- how: footage under the steps and the phone ---------- */
.how { overflow: hidden; }
.how .footage { --shade: linear-gradient(90deg, rgba(23, 20, 62, 0.94) 0%, rgba(23, 20, 62, 0.86) 50%, rgba(23, 20, 62, 0.55) 100%); }
.how__in { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.how .head { margin-bottom: 28px; }
.how__cta { margin-top: 30px; }
/* the stop icon above the phone's top right corner: in view whenever the chat is */
.how__device { position: relative; padding-top: 54px; }
.how__stop { top: 0; right: max(0px, calc(50% - 170px)); }
@media (max-width: 900px) { .how__in { grid-template-columns: 1fr; } .how .footage { --shade: linear-gradient(180deg, rgba(23, 20, 62, 0.92), rgba(23, 20, 62, 0.8)); } .phone__screen { height: 470px; } }

/* ---------- worth: the calculator and its picture, the climb ---------- */
.worth { position: relative; }
.worth__stop { top: -56px; right: 0; }
.worth__box { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(26px, 4vw, 64px); align-items: center; padding: clamp(22px, 3.2vw, 46px); border-radius: var(--radius-l); background: var(--c-white); box-shadow: var(--shadow-m); --calc-surface: var(--c-white); --calc-fill: var(--c-brand); --calc-thumb-edge: var(--c-brand); --calc-thumb: var(--c-white); --calc-focus: var(--c-accent-text); --calc-track: var(--c-paper-alt); --calc-font-figure: var(--font-display); --calc-total-size: clamp(2.4rem, 1.6rem + 2.6vw, 3.6rem); --calc-figure-size: clamp(1.5rem, 1.2rem + 0.9vw, 2rem); --calc-value-size: 1.35rem; }
.worth__controls .calc-sliders { gap: clamp(22px, 2.4vw, 32px); }
.worth__result { display: grid; gap: 16px; min-width: 0; }
.worth__box .calc-total { color: var(--c-ink); }
.worth__box .calc-total__value { color: var(--c-brand-text); font-weight: 560; }
.worth__box .calc-total__label { font: 500 1rem/1.4 var(--font-ui); color: var(--c-ink-soft); }
.worth__picture { position: relative; }
.worth__figures .calc-figures { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.worth__box .calc-figure { padding: 14px 16px; border-radius: var(--radius-m); background: var(--c-paper); }
.worth__box .calc-figure__label { font: 500 0.92rem/1.35 var(--font-ui); color: var(--c-ink-soft); }
.worth__box .calc-note { font-size: var(--fs-small); color: var(--c-ink-soft); }
.climb { display: block; width: 100%; height: auto; border-radius: var(--radius-m); background: var(--c-brand); }
.climb__sun { fill: var(--c-brand-light); opacity: 0.2; }
.climb__far { fill: color-mix(in srgb, var(--c-brand) 84%, var(--c-brand-light)); }
.climb__mid { fill: color-mix(in srgb, var(--c-brand) 68%, var(--c-brand-light)); }
.climb__ridge { fill: var(--c-brand-light); }
.climb__snow { fill: var(--c-white); }
.climb__trail-all { fill: none; stroke: var(--c-brand); stroke-width: 2; stroke-dasharray: 2 6; stroke-linecap: round; opacity: 0.4; }
.climb__trail { fill: none; stroke: var(--c-brand); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.climb__mark { fill: var(--c-white); stroke: var(--c-brand); stroke-width: 2; opacity: 0.45; }
.climb__mark[data-kit-on] { fill: var(--c-brand); stroke: var(--c-white); opacity: 1; }
.climb__pole { stroke: var(--c-white); stroke-width: 2.4; stroke-linecap: round; fill: none; }
.climb__cloth { fill: var(--c-white); }
.climb__tag { fill: var(--c-white); }
.climb__text { font: 600 15px/1 var(--font-ui); fill: var(--c-ink); }
.climb__start { font: 600 13px/1 var(--font-ui); fill: var(--c-white); }
.climb__flag, .climb__label { transition: opacity 400ms var(--ease-out); }
@media (max-width: 900px) { .worth__box { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .worth__figures .calc-figures { grid-template-columns: 1fr; } }
@media (max-width: 380px) { .worth__box .calc-scale__mark + .calc-scale__mark { display: none; } }

/* ---------- compare ---------- */
.compare__flip { transform: scaleX(-1); }

/* ---------- who: the photos' focus, so no card sits on a face ---------- */
.cats__img--cat-home { object-position: 50% 30%; }
.cats__img--cat-events { object-position: 50% 40%; }

/* ---------- family ---------- */
#family .head__line { margin-bottom: 0; }

/* ---------- faq ---------- */
.faq-wrap { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(24px, 4vw, 64px); align-items: start; }
@media (max-width: 900px) { .faq-wrap { grid-template-columns: 1fr; } }