/* home.css: the home page's own placing and sizing (plan.md, "Home"), with the tokens of system.css only. The
   components themselves are in components.css. */

/* ---------- hero: full-bleed footage, the forest shade behind the words, one card a field (kit rotate) ---------- */
.hero { position: relative; isolation: isolate; display: flex; align-items: center; overflow: hidden; min-height: max(640px, calc(100svh - var(--header-h))); background: var(--c-ink); }
[data-kit-scene="rotate"] [data-kit-slide] { position: absolute; inset: 0; margin: 0; visibility: hidden; overflow: hidden; }
[data-kit-scene="rotate"] [data-kit-slide][data-kit-on] { visibility: visible; z-index: 2; opacity: var(--kit-move, 1); transform: translateX(calc((1 - var(--kit-move, 1)) * 4%)); }
[data-kit-scene="rotate"]:not(:has([data-kit-slide][data-prev])) [data-kit-slide][data-kit-on] { transform: none; opacity: 1; }
[data-kit-scene="rotate"] [data-kit-slide][data-prev] { visibility: visible; z-index: 1; }
[data-kit-scene="rotate"] [data-kit-slide] video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
[data-kit-scene="rotate"]:not(:has([data-kit-slide][data-kit-on])) [data-kit-slide]:not([data-kit-slide] ~ [data-kit-slide]) { visibility: visible; }
[data-kit-scene="rotate"] [data-kit-slide] video { inset: 1px; width: calc(100% - 2px); height: calc(100% - 2px); }
.hero__slide::after { content: ''; position: absolute; inset: 0; z-index: 1; background: var(--shade-left); pointer-events: none; }
.hero__card {
  position: absolute; z-index: 2; right: max(var(--gutter), calc((100% - var(--max-w)) / 2)); bottom: 12%;
  opacity: var(--kit-in, 1); transform: translateY(calc((1 - var(--kit-in, 1)) * 16px));
}
.hero__stop { z-index: 6; }
.hero__in { position: relative; z-index: 3; padding-block: clamp(2.5rem, 1.5rem + 3vw, 4.5rem); }
.hero__words { display: grid; justify-items: start; gap: 1.3rem; max-width: 660px; }
.hero__title { font-size: var(--fs-h1); line-height: 1.04; }
.hero__title span { display: block; }
.hero__pay { color: var(--c-brand-on-ink); }
.hero__line { max-width: 590px; font-size: var(--fs-lead); line-height: 1.5; color: var(--c-on-ink-soft); }
.hero__line strong { display: block; margin-bottom: .25rem; font-family: var(--font-ui); font-weight: 700; color: var(--c-on-ink); }
.hero__word { display: inline-block; font-weight: 600; color: var(--c-on-ink); opacity: calc(1 - var(--kit-swap, 0)); transform: translateY(calc(var(--kit-swap, 0) * 5px)); }
.hero__cta { margin-top: .3rem; }
.hero__picker { width: min(100%, 560px); margin-top: .5rem; }
@media (min-width: 900px) and (max-width: 1179px) {
  .hero__card { max-width: 290px; bottom: 9%; }
  .hero__words { max-width: 560px; }
}
@media (max-width: 899px) {
  .hero { display: block; min-height: 0; --hero-media: min(64vw, 440px); }
  .hero [data-kit-slide] { inset: 0 0 auto 0; height: var(--hero-media); }
  .hero__slide::after { background: var(--shade-down); }
  .hero__card { top: auto; right: auto; bottom: 58px; left: 14px; max-width: calc(100% - 84px); }
  .hero__card .fcard__title { font-size: var(--fs-small); }
  .hero__in { padding-top: calc(var(--hero-media) - 46px); padding-bottom: 2.75rem; }
  .hero__words { gap: 1.1rem; }
}

/* ---------- offers: the two free deliverables ---------- */
.offers__grid { display: grid; gap: clamp(1.25rem, 2.5vw, 2rem); }
.offer__media { aspect-ratio: 16 / 10; }
.offer--plan .footage > video { object-position: 100% 30%; }
.offer--site .footage > video { object-position: 100% 35%; }
.offer__scene { position: absolute; z-index: 2; }
.offer__scene--plan { top: 0; bottom: 0; left: 0; width: 56%; display: grid; align-items: center; padding-left: 4%; }
.offer__scene--site { inset: 0; }
.offer .mini { margin-top: .3rem; }
@media (min-width: 960px) { .offers__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) {
  .offer__media { aspect-ratio: 1 / 1.02; }
  .offer--site .footage > video { object-position: 0% 35%; }
  /* the plan card stands taller on the phone, so the owner stays in view above his blueprint */
  .offer--plan .offer__media { aspect-ratio: 4 / 5; }
  .offer--plan .footage > video { object-position: 100% 30%; }
  .offer__scene--plan { top: 40%; width: 100%; padding: 0 3%; }
}

/* ---------- assessment: where revenue leaks, and the qualification form ---------- */
.assess__grid { display: grid; gap: clamp(1.25rem, 3vw, 2.5rem); }
.assess__media { min-height: 560px; box-shadow: var(--shadow-glass); }
.assess__scene { position: absolute; inset: 0; z-index: 2; }
.assess__form { align-self: center; }
@media (min-width: 1000px) { .assess__grid { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); } }
@media (max-width: 599px) { .assess__media { min-height: 620px; } .assess__scene { --lk-x: 0px; } }

/* ---------- outcomes: four cards, each a clip with its scene ---------- */
.outcomes__grid { position: relative; display: grid; gap: clamp(2rem, 3vw, 2.75rem) clamp(1.25rem, 2.5vw, 2rem); }
.ocard__media { aspect-ratio: 16 / 10.5; }
.ocard__scene { position: absolute; z-index: 2; }
.ocard--found .ocard__scene { top: 6%; right: 4%; width: min(340px, 56%); }
.ocard--found .footage > video { object-position: 30% 50%; }
.ocard--answer .ocard__scene { bottom: 6%; left: 4%; width: min(320px, 50%); }
.ocard--reviews .ocard__scene { bottom: 3%; left: 3%; width: min(330px, 50%); }
.ocard--reviews .footage > video { object-position: 0% 50%; }
.ocard--work .ocard__scene { top: 5%; left: 3%; width: min(290px, 40%); }
.ocard--work .footage > video { object-position: 30% 50%; }
.outcomes__system { display: grid; gap: 1rem; margin-top: clamp(2.5rem, 2rem + 2vw, 3.75rem); }
.outcomes__label { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 800; letter-spacing: -.015em; }
.syslinks { display: grid; gap: .6rem; margin: 0; padding: 0; list-style: none; grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); }
.syslinks > li { display: flex; }
.syslinks .syslink { flex: 1; }
@media (min-width: 900px) { .outcomes__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) {
  .ocard__media { aspect-ratio: 3 / 4; }
  .ocard .ocard__scene { top: auto; right: 10px; bottom: 10px; left: 10px; width: auto; }
  .ocard--found .footage > video { object-position: 40% 50%; }
  .ocard--answer .footage > video { object-position: 52% 50%; }
  .ocard--reviews .footage > video { object-position: 50% 50%; }
  .ocard--work .footage > video { object-position: 50% 50%; }
}

/* ---------- method: the tour over a city at dusk ---------- */
.method__footage > video { object-position: 50% 70%; }
.method__footage::after { content: ''; position: absolute; inset: 0; background: var(--shade-veil); }
.method__in { position: relative; z-index: 1; display: grid; gap: clamp(1.75rem, 3vw, 2.5rem); }
.method .head { margin-bottom: 0; }
.method__cta .cta { align-items: center; text-align: center; }

/* ---------- worth: the calculator, its picture a rocket on its year ---------- */
.worth__box {
  --calc-fill: var(--c-brand); --calc-thumb-edge: var(--c-brand); --calc-track: var(--c-line); --calc-focus: var(--c-accent);
  --calc-font: var(--font-ui); --calc-font-figure: var(--font-display); --calc-value-size: 1.3rem;
  --calc-total-size: clamp(2.3rem, 1.5rem + 2.6vw, 3.5rem); --calc-figure-size: clamp(1.35rem, 1.1rem + .9vw, 1.8rem);
  display: grid; gap: clamp(1.5rem, 3vw, 3rem); padding: clamp(1.25rem, .8rem + 2vw, 2.5rem); border: 1px solid var(--c-line); border-radius: var(--radius-l);
  background: var(--c-paper); box-shadow: var(--shadow-l);
}
.worth__controls { display: grid; align-content: center; }
.worth__controls .calc-sliders { gap: 1.75rem; }
.worth__box .calc-slider__label { font-weight: 700; }
.worth__box .calc-slider__value { font-family: var(--font-display); font-weight: 800; color: var(--c-brand-text); }
.worth__box .calc-scale { font-size: var(--fs-xs); color: var(--c-ink-soft); }
.worth__result { display: grid; gap: 1rem; min-width: 0; }
.worth__box .calc-total { display: grid; gap: .2rem; margin: 0; }
.worth__box .calc-total__value { font-weight: 800; letter-spacing: -.02em; line-height: 1; color: var(--c-ink); }
.worth__box .calc-total__label { font-family: var(--font-ui); font-weight: 700; color: var(--c-ink-soft); }
.worth__picture { position: relative; isolation: isolate; overflow: hidden; aspect-ratio: 16 / 8.6; border-radius: var(--radius-l); background: var(--c-ink); }
.worth__box .calc-figures { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.worth__box .calc-figure { display: grid; gap: .15rem; margin: 0; padding: .85rem 1rem; border-radius: var(--radius-m); background: var(--c-paper-alt); }
.worth__box .calc-figure__value { font-weight: 800; letter-spacing: -.015em; color: var(--c-brand-text); }
.worth__box .calc-figure__label { font-size: var(--fs-small); color: var(--c-ink-soft); }
.worth__box .calc-note { font-size: var(--fs-xs); color: var(--c-ink-soft); }
.worth__cta { display: flex; justify-content: center; margin-top: clamp(1.75rem, 3vw, 2.5rem); }
.worth__cta .cta { align-items: center; text-align: center; }
@media (min-width: 1000px) { .worth__box { grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); align-items: center; } }
@media (max-width: 599px) { .worth__picture { aspect-ratio: 4 / 3.1; } }

.rk { --rk-gut: 72px; --rk-r: 44px; --rk-top: 40px; --rk-bot: 46px; position: absolute; inset: 0; color: var(--c-on-ink); }
.rk::before { content: ''; position: absolute; z-index: -1; top: -45%; right: -25%; width: 95%; height: 150%; background: radial-gradient(closest-side, var(--c-glow), transparent); }
.rk__stop { top: 12px; right: 12px; }
.rk__plot { position: absolute; top: var(--rk-top); right: var(--rk-r); bottom: var(--rk-bot); left: var(--rk-gut); }
/* the scale of tens: its lines span the gutter too, so each label sits inside its line; the dash starts at the plot */
.rk__grid { position: absolute; top: var(--rk-top); right: var(--rk-r); bottom: var(--rk-bot); left: 0; }
.rk__line { position: absolute; left: 0; right: 0; bottom: calc(var(--at) * 100%); }
.rk__line::after { content: ''; position: absolute; top: 0; right: 0; left: var(--rk-gut); border-top: 1px dashed var(--c-line-ink-strong); }
.rk__val { position: absolute; top: 0; right: calc(100% - var(--rk-gut) + 12px); font-family: var(--font-ui); font-size: var(--fs-xs); font-weight: 700; line-height: 1; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--c-on-ink-soft); transform: translateY(-50%); }
.rk__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.rk__ahead { fill: none; stroke: var(--c-line-ink-strong); stroke-width: 2; stroke-dasharray: 3 7; stroke-linecap: round; stroke-linejoin: round; }
.rk__trail { fill: none; stroke: var(--c-brand-on-ink); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.rk__pad { position: absolute; left: -12px; bottom: -3px; width: 30px; height: 4px; border-radius: 2px; background: var(--c-on-ink-soft); opacity: .55; }
.rk__month {
  position: absolute; left: calc(var(--m) / 12 * 100%); bottom: calc(var(--y, 0) * 100%); width: 10px; height: 10px; margin: 0 0 -5px -5px;
  border-radius: 50%; background: var(--c-brand-on-ink); box-shadow: 0 0 0 3px var(--c-ink); opacity: 0; transform: scale(.4);
}
.rk__month[data-kit-on] { opacity: 1; transform: scale(calc(.4 + .6 * var(--kit-in, 1))); }
.rk__ship {
  position: absolute; left: calc(var(--rk-x, 1) * 100%); bottom: calc(var(--rk-y, .6) * 100%); width: 64px; height: 40px; margin: 0 0 -20px -34px;
  color: var(--c-accent-on-ink); transform: rotate(calc(var(--rk-angle, -20) * 1deg)); transform-origin: 34px 20px;
}
.rk__ship svg { display: block; overflow: visible; }
.rk__body { fill: var(--c-ink-2); stroke: currentColor; stroke-width: 2.2; stroke-linejoin: round; }
.rk__fin { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.rk__port { fill: var(--c-brand-on-ink); }
.rk__flame { fill: var(--c-accent); }
/* the axis spans the whole picture, so a month's label centered under its point never runs out of it */
.rk__axis { position: absolute; right: 0; bottom: 14px; left: 0; height: 16px; }
.rk__axis span { position: absolute; top: 0; left: calc(var(--rk-gut) + (100% - var(--rk-gut) - var(--rk-r)) * var(--f)); font-family: var(--font-ui); font-size: var(--fs-xs); font-weight: 600; line-height: 1; white-space: nowrap; color: var(--c-on-ink-soft); transform: translateX(-50%); }
.rk__axis span:nth-child(1) { --f: calc(1 / 12); }
.rk__axis span:nth-child(2) { --f: .5; }
.rk__axis span:nth-child(3) { --f: 1; }
@media (prefers-reduced-motion: no-preference) {
  .rk[data-moving] .rk__ship { transition: left .36s linear, bottom .36s linear, transform .36s linear; }
  .rk[data-moving] .rk__month { transition: left .36s linear, bottom .36s linear; }
}
@media (max-width: 599px) {
  .rk { --rk-gut: 60px; --rk-r: 30px; --rk-top: 34px; --rk-bot: 40px; }
  .rk__axis { bottom: 12px; }
  .rk__ship { transform: rotate(calc(var(--rk-angle, -20) * 1deg)) scale(.82); }
}

/* ---------- industries: ten photo cards and a way in for everyone else ---------- */
.inds__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin: 0; padding: 0; list-style: none; }
.inds__grid > li { display: flex; min-width: 0; }
.inds__grid > li > .icard { flex: 1; }
.inds__door { grid-column: span 2; }
.inds__door-words { display: grid; gap: .6rem; }
.inds__door-title { font-size: clamp(1.4rem, 1.15rem + .8vw, 1.8rem); color: var(--c-on-ink); }
.inds__door-line { max-width: 460px; color: var(--c-on-ink-soft); }
@media (min-width: 760px) { .inds__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .inds__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 599px) {
  .inds__grid { grid-template-columns: minmax(0, 1fr); gap: .75rem; }
  .inds__door { grid-column: auto; }
  .inds__grid .icard:not(.icard--door) { flex-direction: row; }
  .inds__grid .icard__media { flex: none; width: 36%; aspect-ratio: auto; }
  .inds__grid .icard__body { padding: .9rem .95rem 1rem; }
  .inds__grid .icard__icon { width: 36px; height: 36px; margin-top: 0; box-shadow: none; background: var(--c-brand-light); }
  .inds__grid .icard__icon svg { width: 19px; height: 19px; }
}

/* ---------- compare: activity against revenue ---------- */
.cmp__box { --rest: .5; --knob-y: 38%; aspect-ratio: 2.1 / 1; min-height: 430px; max-height: 620px; }
.cmp__box .before .compare__cards { width: min(270px, calc(var(--rest) * 100% - 40px)); }
.cmp__box .after .compare__cards { width: min(270px, calc((1 - var(--rest)) * 100% - 40px)); }
.cmp__box .after .compare__tag { right: auto; left: calc(var(--rest) * 100% + 20px); }
.cmp__promises { display: grid; justify-content: center; gap: .9rem 2.25rem; margin-top: clamp(2rem, 1.5rem + 2vw, 3rem); }
@media (min-width: 700px) { .cmp__promises { grid-template-columns: repeat(2, auto); } }
@media (min-width: 1100px) { .cmp__promises { grid-template-columns: repeat(4, auto); } }
@media (max-width: 759px) {
  .cmp__box { --rest: .5; --knob-y: 30%; aspect-ratio: auto; height: 600px; max-height: none; }
  .cmp__box .compare__tag { top: 14px; max-width: calc(var(--rest) * 100% - 28px); border-radius: 12px; font-size: var(--fs-xs); line-height: 1.25; white-space: normal; }
  .cmp__box .before .compare__tag { left: 14px; }
  .cmp__box .after .compare__tag { left: calc(var(--rest) * 100% + 14px); }
  .cmp__box .compare__cards { bottom: 14px; gap: .45rem; }
  .cmp__box .before .compare__cards { left: 14px; width: calc(var(--rest) * 100% - 28px); }
  .cmp__box .after .compare__cards { right: 14px; width: calc((1 - var(--rest)) * 100% - 28px); }
  .cmp__box .ccard { padding: .6rem .7rem .65rem; }
  .cmp__box .ccard__big { font-size: var(--fs-small); }
  .cmp__box .ccard__row { flex-direction: column; align-items: flex-start; gap: .35rem; }
  .cmp__box .after > img { object-position: 74% 50%; }
}

/* ---------- why: the founder and six reasons ---------- */
.why__in { display: grid; gap: clamp(2rem, 4vw, 4.5rem); }
.why__quote .quote__photo { max-width: 460px; aspect-ratio: 1; }
.why__main .head { margin-bottom: clamp(1.5rem, 1rem + 1.5vw, 2.25rem); }
.why__grid { display: grid; gap: 1rem; margin: 0; padding: 0; list-style: none; }
.why__cta { margin-top: clamp(1.5rem, 1rem + 1.5vw, 2.25rem); }
@media (min-width: 640px) { .why__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) {
  .why__in { grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); align-items: start; }
  .why__quote { position: sticky; top: calc(var(--header-h) + 28px); }
}

/* ---------- faq ---------- */
.qa__in { display: grid; gap: clamp(2rem, 4vw, 4.5rem); }
.qa__head { justify-items: start; margin-bottom: 0; }
.qa__head .cta { margin-top: .5rem; }
@media (min-width: 1000px) {
  .qa__in { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); align-items: start; }
  .qa__head { position: sticky; top: calc(var(--header-h) + 28px); }
}

/* ---------- close: the last push ---------- */
.close { display: flex; align-items: center; min-height: clamp(560px, 72vh, 700px); }
.close__footage > video { object-position: 30% 40%; }
.close__in { position: relative; z-index: 1; display: flex; justify-content: flex-end; }
.close__words { display: grid; justify-items: start; gap: 1.2rem; max-width: 560px; }
.close__title { font-size: var(--fs-h2); }
.close__line { font-size: var(--fs-lead); color: var(--c-on-ink-soft); }
.close__picker { width: 100%; margin-top: .5rem; }
@media (max-width: 899px) {
  .close { display: block; min-height: 0; padding-top: 0; }
  .close__footage { position: relative; height: min(66vw, 440px); }
  .close__footage::after { background: var(--shade-down); }
  .close__in { justify-content: flex-start; margin-top: -48px; }
}