/**
 * Homepage — page-scoped styles. Loads after tokens.css and system.css.
 *
 * The hero is a video. The hard part is legibility, and the usual fix — a flat
 * black overlay — kills the warmth that made the footage worth shooting. So:
 * a DIRECTIONAL scrim, dense where the type sits and clear where the image is
 * doing its work, and no text shadows anywhere. The scrim earns the contrast.
 */

/* ══ FILM HERO ══ */
.hero-film {
    position: relative;
    min-height: min(88vh, 820px);
    display: flex; align-items: flex-end;
    overflow: hidden;
    background: var(--pitch);
    isolation: isolate;
    z-index: 1;
}

.hero-film video,
.hero-film .hf-fallback {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover; z-index: 0;
}
.hero-film .hf-fallback {
    background:
        radial-gradient(60% 50% at 68% 34%, rgba(242, 192, 73, 0.5), transparent 70%),
        linear-gradient(160deg, var(--umber), #7A5B2E 58%, #E7C98A);
}

.hero-film::before {
    content: '';
    position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background:
        linear-gradient(to top,
            rgba(18, 14, 10, 0.90) 0%,
            rgba(18, 14, 10, 0.60) 26%,
            rgba(18, 14, 10, 0.14) 55%,
            rgba(18, 14, 10, 0.02) 80%),
        linear-gradient(to right,
            rgba(18, 14, 10, 0.66) 0%,
            rgba(18, 14, 10, 0.20) 44%,
            transparent 72%);
}
/* A breath of brand gold so the footage belongs to the same world. */
.hero-film::after {
    content: '';
    position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: radial-gradient(90% 70% at 76% 24%, rgba(200, 146, 17, 0.18), transparent 66%);
    mix-blend-mode: soft-light;
}

.hf-in {
    position: relative; z-index: 2;
    width: 100%; max-width: var(--w-page); margin: 0 auto;
    padding: 0 clamp(20px, 4vw, 52px) clamp(40px, 6vw, 72px);
}

/* Copy on the left, the wound on the right. Ralston's "intentional pairing":
   the promise and the specific pain it answers, side by side, one glance. */
.hf-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
    gap: clamp(24px, 4vw, 56px); align-items: end;
}
@media (max-width: 900px) { .hf-grid { grid-template-columns: 1fr; gap: 26px; } }

/* The question. Small, gold, and unavoidable — it is the first line read,
   and it puts the reader inside the problem before we make any promise. */
.hf-q {
    font-family: var(--font-display);
    font-size: clamp(19px, 2.1vw, 27px);
    font-weight: 600; line-height: 1.25; letter-spacing: -0.02em;
    color: var(--gold-lit);
    margin-bottom: 14px; max-width: 24ch;
}

/* ══ THE COST PANEL ══
   The pain made specific and countable. This is the graphic that earns the
   headline — without it "elevate your work" is a promise with no wound. */
.hf-cost {
    background: color-mix(in srgb, var(--pitch) 88%, transparent);
    backdrop-filter: blur(10px);
    border: 1px solid color-mix(in srgb, var(--terra) 46%, transparent);
    border-radius: var(--r);
    padding: 18px 18px 16px;
}
.hf-cost-h {
    font-family: var(--font-ui);
    font-size: 9.5px; font-weight: 600;
    letter-spacing: var(--tr-chrome); text-transform: uppercase;
    color: color-mix(in srgb, var(--ink-lit) 55%, transparent);
    padding-bottom: 11px; margin-bottom: 3px;
    border-bottom: 1px solid color-mix(in srgb, var(--ink-lit) 14%, transparent);
}
.hf-cost-r {
    display: grid; grid-template-columns: 46px 1fr auto;
    gap: 10px; align-items: baseline;
    padding: 9px 0;
    border-bottom: 1px solid color-mix(in srgb, var(--ink-lit) 8%, transparent);
    font-family: var(--font-ui); font-size: 11px;
}
.hf-cost-r span:first-child { color: color-mix(in srgb, var(--ink-lit) 42%, transparent); }
.hf-cost-r span:nth-child(2) { color: color-mix(in srgb, var(--ink-lit) 88%, transparent); }
.hf-cost-r b {
    font-size: 8.5px; letter-spacing: 0.1em; text-transform: uppercase;
    color: #E9A08C; padding: 3px 8px; border-radius: 3px;
    background: color-mix(in srgb, var(--terra) 26%, transparent);
}
.hf-cost-f {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 10px; padding-top: 13px; margin-top: 4px;
    border-top: 1px solid color-mix(in srgb, var(--ink-lit) 14%, transparent);
}
.hf-cost-f span {
    font-family: var(--font-ui); font-size: 9.5px;
    letter-spacing: 0.12em; text-transform: uppercase;
    color: color-mix(in srgb, var(--ink-lit) 55%, transparent);
}
.hf-cost-f b {
    font-family: var(--font-display); font-weight: 700;
    font-size: 26px; letter-spacing: -0.02em; color: #E9A08C;
}
.hf-kick {
    font-family: var(--font-ui);
    font-size: var(--t-micro); font-weight: 600;
    letter-spacing: var(--tr-chrome); text-transform: uppercase;
    color: var(--gold-lit); margin-bottom: 18px;
}
.hf-h1 {
    font-family: var(--font-display);
    font-size: var(--t-hero); line-height: var(--lh-hero);
    letter-spacing: var(--tr-hero);
    color: var(--ink-lit); max-width: 14ch;
}
.hf-h1 em { font-style: normal; color: var(--gold-lit); }
.hf-lede {
    font-size: var(--t-lead); line-height: var(--lh-lead);
    color: var(--ink-lit-soft); max-width: 46ch; margin-top: 20px;
}
.hf-acts { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 30px; }
.hf-note {
    font-family: var(--font-ui);
    font-size: var(--t-micro); letter-spacing: 0.13em; text-transform: uppercase;
    color: color-mix(in srgb, var(--ink-lit) 55%, transparent); margin-top: 20px;
}

.hf-pause {
    position: absolute; right: clamp(16px, 3vw, 28px); bottom: clamp(16px, 3vw, 28px);
    z-index: 3;
    font-family: var(--font-ui);
    font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase;
    padding: 9px 15px; border: 0; cursor: pointer;
    border-radius: var(--r);
    background: color-mix(in srgb, var(--ink-lit) 14%, transparent);
    color: var(--ink-lit); backdrop-filter: blur(6px);
}
.hf-pause:hover { background: color-mix(in srgb, var(--ink-lit) 26%, transparent); }

@media (prefers-reduced-motion: reduce) { .hero-film video { display: none; } }

/* ══ MOBILE ══
   Most of this audience is on a phone, often on cell data, often outdoors.

   The video is 16:9. In a tall portrait box, object-fit: cover crops the
   sides away and takes the phone and the mug with them — leaving just dog,
   which loses the entire point of the shot. So on narrow screens the hero
   gets shorter (closer to the clip's own ratio) and the framing is nudged
   to hold the table. */
@media (max-width: 760px) {
    .hero-film { min-height: 0; padding-top: 74vw; }
    .hero-film video,
    .hero-film .hf-fallback { object-position: 46% 42%; }

    /* Scrim goes denser — less clear space to hide type against. */
    .hero-film::before {
        background:
            linear-gradient(to top,
                rgba(18, 14, 10, 0.94) 0%,
                rgba(18, 14, 10, 0.78) 34%,
                rgba(18, 14, 10, 0.30) 62%,
                rgba(18, 14, 10, 0.06) 84%);
    }

    .hf-in { padding-bottom: 32px; }
    .hf-kick { margin-bottom: 12px; }
    .hf-lede { margin-top: 14px; }
    .hf-acts { margin-top: 22px; gap: 10px; }
    .hf-acts .btn { flex: 1 1 auto; justify-content: center; min-height: 52px; }
    .hf-pause { right: 12px; bottom: 12px; }

    /* Panel earns its place on mobile too, just tighter. */
    .hf-cost { padding: 14px 14px 12px; }
    .hf-cost-r { padding: 7px 0; font-size: 10.5px; grid-template-columns: 42px 1fr auto; gap: 8px; }
    .hf-cost-f b { font-size: 22px; }
}

/* Very small phones: the clip is decoration, the message is not. */
@media (max-width: 400px) {
    .hero-film { padding-top: 88vw; }
    .hf-acts .btn { width: 100%; }
}

/* ══ PILLAR SPREAD ══ */
.spread { display: grid; grid-template-columns: 1fr 1fr; border-top: 2px solid var(--ink); }
@media (max-width: 900px) { .spread { grid-template-columns: 1fr; } }
.spread-col { padding: 38px clamp(20px, 3vw, 44px) 34px 0; }
.spread-col + .spread-col {
    border-left: 1px solid var(--rule);
    padding-left: clamp(20px, 3vw, 44px);
}
@media (max-width: 900px) {
    .spread-col { padding: 32px 0; }
    .spread-col + .spread-col { border-left: 0; padding-left: 0; border-top: 1px solid var(--rule); }
}
.spread-col p { font-size: 16.5px; line-height: 1.7; color: var(--ink-soft); margin: 14px 0 20px; }

.mini { display: flex; flex-wrap: wrap; gap: 0; margin: 22px 0; }
.mini div { flex: 1; min-width: 92px; border-top: 1px solid var(--rule); padding: 12px 12px 0 0; }
.mini b {
    display: block; font-family: var(--font-display); font-weight: 700;
    font-size: 26px; letter-spacing: -0.03em; color: var(--gold-deep);
}
.mini span {
    font-family: var(--font-ui); font-size: 9.5px;
    letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft);
}

.link {
    font-family: var(--font-ui);
    font-size: var(--t-micro); letter-spacing: 0.14em; text-transform: uppercase;
    text-decoration: none; color: var(--ink);
    border-bottom: 2px solid var(--gold); padding-bottom: 4px;
}
.link:hover { color: var(--gold-deep); }

/* Sources line — cited claims stay cited. If a number cannot carry a link
   or a named study, it does not belong on the page. */
.sources {
    font-family: var(--font-ui);
    font-size: 11px; line-height: 1.7;
    color: var(--ink-soft);
    margin-top: 22px; max-width: 78ch;
}
.sources a { color: var(--gold-deep); }

/* ══ THE COST CALCULATOR ══
   Percentages don't land; dollars do. This makes no claim of its own — it is
   arithmetic on numbers the visitor supplies, with the one borrowed constant
   (85% never call back) named on screen. Their number, not ours. */
.calc { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
@media (max-width: 900px) { .calc { grid-template-columns: 1fr; gap: 28px; } }

.calc-field { margin-bottom: 22px; }
.calc-field label {
    display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
    font-family: var(--font-ui);
    font-size: var(--t-micro); font-weight: 600;
    letter-spacing: var(--tr-chrome); text-transform: uppercase;
    color: var(--ink-soft); margin-bottom: 10px;
}
.calc-field label b {
    font-family: var(--font-display); font-weight: 700;
    font-size: 22px; letter-spacing: -0.02em; color: var(--ink);
    text-transform: none;
}
.calc-field input[type="range"] {
    width: 100%; accent-color: var(--gold);
    height: 26px; cursor: pointer;
}

.calc-out {
    background: var(--pitch); color: var(--ink-lit);
    border-radius: var(--r-lg);
    padding: clamp(26px, 3.4vw, 44px);
}
.calc-out-l {
    font-family: var(--font-ui);
    font-size: var(--t-micro); font-weight: 600;
    letter-spacing: var(--tr-chrome); text-transform: uppercase;
    color: color-mix(in srgb, var(--ink-lit) 55%, transparent);
}
.calc-big {
    font-family: var(--font-display); font-weight: 700;
    font-size: clamp(52px, 8.5vw, 116px); line-height: 0.9;
    letter-spacing: -0.035em; color: var(--gold-lit);
    margin: 10px 0 6px;
    font-variant-numeric: tabular-nums;
}
.calc-sub { font-size: var(--t-lead); line-height: 1.5; color: var(--ink-lit-soft); max-width: 34ch; }

.calc-break {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
    margin-top: 26px; padding-top: 22px;
    border-top: 1px solid color-mix(in srgb, var(--ink-lit) 16%, transparent);
}
@media (max-width: 560px) { .calc-break { grid-template-columns: 1fr 1fr; } }
.calc-break div b {
    display: block; font-family: var(--font-display); font-weight: 700;
    font-size: 26px; letter-spacing: -0.02em; color: var(--ink-lit);
    font-variant-numeric: tabular-nums;
}
.calc-break div span {
    font-family: var(--font-ui); font-size: 9.5px;
    letter-spacing: 0.12em; text-transform: uppercase;
    color: color-mix(in srgb, var(--ink-lit) 52%, transparent);
}

.calc-weekend {
    margin-top: 22px; padding: 14px 16px;
    border-radius: var(--r);
    background: color-mix(in srgb, var(--terra) 20%, transparent);
    border: 1px solid color-mix(in srgb, var(--terra) 42%, transparent);
    font-size: 14.5px; line-height: 1.5; color: var(--ink-lit);
}
.calc-weekend b { color: #F0B49E; font-variant-numeric: tabular-nums; }

/* Two products, not three. */
.tiles--two { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 760px) { .tiles--two { grid-template-columns: 1fr; } }

/* ══ QUOTE PANEL ══
   The automation offer is genuinely custom, and the old treatment looked like
   a tier with the price left off. This reads as a quote from the first glance:
   dark, single, no columns to compare against. */
.quote-panel {
    background: var(--umber); color: var(--bone);
    border-radius: var(--r-lg);
    padding: clamp(28px, 4vw, 52px);
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 360px);
    gap: clamp(26px, 4vw, 56px); align-items: center;
}
@media (max-width: 860px) { .quote-panel { grid-template-columns: 1fr; gap: 26px; } }

.quote-badge {
    display: inline-block;
    font-family: var(--font-ui); font-size: var(--t-micro); font-weight: 600;
    letter-spacing: var(--tr-chrome); text-transform: uppercase;
    color: var(--pitch); background: var(--gold-lit);
    padding: 7px 14px; border-radius: var(--r); margin-bottom: 18px;
}
.quote-panel h3 {
    font-size: var(--t-h3); line-height: var(--lh-h3); letter-spacing: var(--tr-h3);
    margin-bottom: 14px;
}
.quote-panel > div > p { font-size: var(--t-lead); line-height: var(--lh-lead); color: color-mix(in srgb, var(--bone) 74%, transparent); }

.quote-what {
    background: color-mix(in srgb, var(--pitch) 60%, transparent);
    border-radius: var(--r); padding: 22px;
}
.quote-what-h {
    font-family: var(--font-ui); font-size: var(--t-micro); font-weight: 600;
    letter-spacing: var(--tr-chrome); text-transform: uppercase;
    color: color-mix(in srgb, var(--bone) 55%, transparent);
    padding-bottom: 12px; margin-bottom: 6px;
    border-bottom: 1px solid color-mix(in srgb, var(--bone) 16%, transparent);
}
.quote-what li {
    list-style: none; font-size: 14.5px; line-height: 1.5;
    padding: 9px 0 9px 20px; position: relative;
    color: color-mix(in srgb, var(--bone) 88%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--bone) 8%, transparent);
}
.quote-what li:last-child { border-bottom: 0; }
.quote-what li::before { content: '→'; position: absolute; left: 0; color: var(--gold-lit); }

/* Sub-step marker inside a combined pricing section — keeps the build fee and
   the monthly fee under one header while still reading as two stages. */
.step {
    display: flex; align-items: baseline; gap: 14px;
    margin: 0 0 20px;
}
.step-n {
    font-family: var(--font-ui); font-size: var(--t-micro); font-weight: 600;
    letter-spacing: var(--tr-chrome);
    width: 30px; height: 30px; flex-shrink: 0;
    display: grid; place-items: center;
    background: var(--ink); color: var(--bone); border-radius: var(--r);
}
.step-t { font-family: var(--font-display); font-weight: 700; font-size: 21px; letter-spacing: -0.02em; color: var(--ink); }
.step-s { font-size: 15px; color: var(--ink-soft); }
.step-rule { flex: 1; height: 1px; background: var(--rule); }
@media (max-width: 620px) { .step-s, .step-rule { display: none; } }